/* v1.0.8: Extrahiert aus pages/home.html (war ~1830 Zeilen inline <style>). Home-spezifisches CSS für Hero, Stats, Counter, Steps, USP-Cinema, Bento, Coding-Card, Reviews-Marquee, Mini-Buybox. Tokens kommen aus tokens.css (Plugin-Asset), Komponenten zusätzlich aus plugin.css. */
  /* v1.0.8: Token-Block entfernt — Single Source of Truth ist designkit/tokens.css */

  /* Base */
  *, *::before, *::after { box-sizing: border-box; }
  

/* Fallback für ältere Browser ohne overflow:clip — nur body, nicht html (damit sticky funktioniert) */
  @supports not (overflow-x: clip) {
    html { overflow-x: visible; }
    body { overflow-x: hidden; }
  }
  h1, h2, h3, h4, h5, h6 { color: var(--brand-ink); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
  p { margin: 0; }

  



/* ~50% von h-hero */
  
/* USP-Snap + Final-CTA */

  /* Eyebrow */
  


/* Buttons */
  


/* v11.14: Header-Buttons schmaler (vertikales Padding runter von 0.6 → 0.45rem) */
  
/* v11.11: btn-soft — dezenter Button (für Login) · v11.14: BG transparent, Border bleibt */
  







/* v1.3.0: Reveal + Word-Stagger Init zurück in CSS (FOUC-Fix).
     Vor JS-Load waren diese Elemente sichtbar, dann versteckt, dann animiert
     eingeblendet → unschöner Flash. CSS-Init verhindert das. */
  /* v11: Word-Stagger Init für headlines (wird per JS in spans gewrappt) */
  .word-split { display: inline-block; overflow: visible; }
  /* v1.0.6: will-change entfernt — wird auf vielen Spans gesetzt, kostet RAM/GPU. Reveal läuft einmalig per ScrollTrigger. */
  .word-split .word { display: inline-block; opacity: 0; transform: translateY(20px); filter: blur(4px); }
  .word-split .word.space { width: 0.25em; filter: none; }
  @media (prefers-reduced-motion: reduce) {
    .word-split .word { opacity: 1 !important; transform: none !important; filter: none !important; }
  }

  /* v11: Stat-Cards 3D-Tilt Setup (v11.3: stat-card-visual entfernt, Icon-Boxen statt Bilder) */
  .stats-grid { perspective: 1200px; }
  .stat-card { transform-style: preserve-3d; transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1); }

  /* v11: USP-Cinema Icon-Box Entry Setup · v1.0.6: will-change weg (einmalig animiert) */
  /* v11: Cyclist-Image Float Setup */
  .bp-hero-block-image img { will-change: transform; }

  /* v11: Counter-LIVE Pulse Setup */
  .counter-frame { transition: box-shadow 220ms ease-out, border-color 220ms ease-out; }
  .counter-frame.is-pulsing {
    border-color: rgba(255, 77, 77, 0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
                0 30px 60px -20px rgba(0,0,0,0.7),
                0 0 28px -2px rgba(255, 77, 77, 0.45);
  }

  /* Mesh-aurora · v1.0.6: blur runter (38→24, 48→32) + radial-gradients reichen visuell schon weich */
  

/* =================================================================
     v-section — DEFAULT edge-to-edge ohne Box (umgekehrt zu v5)
     ================================================================= */
  


.v-section--alt  { background: #f6f7f9; }
  

/* =================================================================
     HEADER
     ================================================================= */
  



/* v11.22: Logo nur im scrolled Zustand 1.70rem */
  

/* v12.6 Mobile: Header scrolled top 0.6rem (statt 1rem) + Padding 1rem L/R forced */
  @media (max-width: 1023px) {
    #site-header.is-scrolled { top: 0.6rem; }
    .site-header-bar { padding-left: 1rem !important; padding-right: 1rem !important; }
    #site-header.is-scrolled .site-header-bar { padding-left: 1rem !important; padding-right: 1rem !important; }
  }
  

/* v12: Mobile-Burger + Account-Icon + Slide-Down-Menu */
  
.mobile-burger,
  .mobile-account {
    /* v12.5: kompakter 36×36 statt 44×44 */
    width: 36px; height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--slate-200);
    background: transparent;
    color: var(--brand-ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
    text-decoration: none;
  }
  .mobile-burger:hover,
  .mobile-account:hover { background: var(--slate-100); border-color: var(--slate-300); }
  .mobile-burger svg,
  .mobile-account svg { width: 18px; height: 18px; }
  @media (max-width: 1023px) {
    .mobile-header-actions { display: inline-flex; }
    /* Hide login + register on mobile (in mobile menu) */
    .site-header-bar .header-cta-group { display: none; }
  }

  

.mobile-menu-close:hover { background: var(--slate-100); border-color: var(--slate-300); }
  










.mobile-menu-foot {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--slate-400);
    font-size: 0.8rem;
  }
  
/* v12.6: Heading-Hierarchie Mobile — Hauptüberschriften deutlich größer, Card-Titles größer
     L0 Hero/Brand-Hero  >  L1 Main Section/Sticky-Cinema  >  L3 Step Titles  >  L4 Feature-Tile  >  L4b Stat-Card-Body  >  L5 Eyebrow */
  @media (max-width: 767px) {
    /* L0 Hero/Brand-Hero — größte Headlines (v12.7: mobil ~15% kleiner) */
    .h-hero { font-size: clamp(2.25rem, 9.5vw, 3.15rem) !important; line-height: 1.02; }
    .coding-h-main { font-size: clamp(2.75rem, 11vw, 4rem) !important; line-height: 0.98; }
    /* L1 Main Section Headlines + Sticky-Cinema-Slides — größer für klare Hierarchie */
    .h-section,
    .usp-cinema-h,
    .reviews-intro h2,
    .bp-hero-block-text h2 { font-size: clamp(2.35rem, 9vw, 3rem) !important; line-height: 1.05; }
    /* L3 Subsection / Step Titles */
    .steps-text h3 { font-size: clamp(1.65rem, 6vw, 2rem) !important; line-height: 1.1; }
    /* L4 Feature-Tile Cards — v12.7: alle Bento-Headlines auf Größe der Hero-Box (Konsistenz) */
    .feature-tile h3,
    .feature-tile--hero h3,
    .eu-card h3 { font-size: clamp(1.45rem, 5vw, 1.75rem) !important; line-height: 1.15; }
    /* L4b Stat-Card-Body Headlines (kompakter, weil neben Bignumber) */
    .stat-card-body h3 { font-size: clamp(1.05rem, 4vw, 1.2rem) !important; }
    /* L5 Eyebrow / Subheading — v12.7: alle Eyebrow-Varianten gleich groß */
    .eyebrow,
    .usp-cinema-eyebrow,
    .coding-subheading { font-size: clamp(0.72rem, 2.6vw, 0.82rem) !important; letter-spacing: 0.16em !important; }
    /* v12.7: USP-Cinema Icon-Boxen mobil kleiner */
    .usp-cinema-icon-box { width: 64px !important; height: 64px !important; border-radius: 1rem !important; }
    .usp-cinema-icon-box svg { width: 28px !important; height: 28px !important; }
  }

  /* v12.4: Mini-Buybox — INVERTIERT (teal BG, weißer CTA, schräges Produktbild überlappend) */
  .mini-buybox {
    position: fixed;
    bottom: 1.25rem; right: 1.25rem;
    z-index: 60;
    width: 360px;
    /* v12.9.3: Gradient mit Alpha + Backdrop-Blur für Glas-Look auf Content darunter */
    background: linear-gradient(135deg, #0d9488de 0%, var(--brand-teal) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px -14px rgba(54,208,188,0.45), 0 6px 16px -6px rgba(15,23,42,0.18);
    padding: 0.85rem 1rem 0.85rem 110px;   /* extra left-padding für überlappendes Bild */
    display: flex; align-items: center; gap: 0.85rem;
    opacity: 0;
    transform: translateY(140%);
    transition: opacity 380ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    color: #ffffff;
  }
  .mini-buybox.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Schräges, überlappendes Produktbild oben-links */
  .mini-buybox-thumb {
    position: absolute;
    top: 50%; left: 0.6rem;
    transform: translateY(-50%) rotate(-6deg);
    width: 96px; height: 96px;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35)) drop-shadow(0 0 8px rgba(0,0,0,0.18));
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* v2.3.10: aspect-ratio:auto + !important gegen WP 6.6 override */
  .mini-buybox-thumb img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; display: block; object-fit: contain; }
  .mini-buybox:hover .mini-buybox-thumb { transform: translateY(-50%) rotate(-3deg) scale(1.04); }
  .mini-buybox-body { flex: 1; min-width: 0; }
  .mini-buybox-title {
    font-family: 'Geist', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 0.05rem;
  }
  .mini-buybox-sub {
    /* v12.6: subline überall versteckt (Desktop + Mobile) */
    display: none;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.3;
    margin-bottom: 0.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mini-buybox-price {
    font-family: 'Geist', sans-serif;
    font-size: 1rem; font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 0.3rem;
  }
  .mini-buybox-price-suffix {
    font-size: 0.65rem; font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0;
  }
  /* v12.9.2: Dezenter CTA — nur weiße Transparenz, kein Border, kein Shadow */
  .mini-buybox-cta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    font-weight: 600; font-size: 0.82rem;
    border-radius: 9999px;
    text-decoration: none;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
    transition: background 200ms ease;
  }
  .mini-buybox-cta:hover { background: rgba(255,255,255,0.22); }
  .mini-buybox-cta svg { color: #ffffff; }

  /* Mobile — Bottom-Bar mit gleicher Margin wie Header (1rem) */
  @media (max-width: 767px) {
    .mini-buybox {
      bottom: 0.75rem;
      left: 1rem; right: 1rem;
      width: auto;
      padding: 0.65rem 0.75rem 0.65rem 80px;
      /* v12.5: gleicher border-radius wie Navbar scrolled (1.75rem) */
      border-radius: 1.75rem;
      gap: 0.5rem;
    }
    .mini-buybox-thumb {
      width: 72px; height: 72px;
      left: 0.4rem;
    }
    .mini-buybox-title { font-size: 0.85rem; }
    .mini-buybox-sub { display: none; }
    .mini-buybox-price { font-size: 0.88rem; }
    .mini-buybox-price-suffix { font-size: 0.6rem; }
    .mini-buybox-cta { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mini-buybox { transition: none; }
    .mini-buybox-thumb { transition: none; }
  }

  /* =================================================================
     S1 — Hero+Strip = exakt First-View (calc(100svh - 1rem))
     ================================================================= */
  .hero-wrap {
    position: relative;
    margin: 0.5rem var(--section-inset-x) 0;
    height: calc(100svh - 6rem);
    display: flex; flex-direction: column;
    gap: 0.5rem;
  }
  @media (max-width: 1023px) {
    .hero-wrap { height: auto; min-height: calc(100svh - 2rem); }
  }
  /* v12 Mobile-Hero — verschoben nach hero-content default (siehe unten) */
  .hero {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--radius-section);
    overflow: hidden;
    isolation: isolate;
  }
  .hero-bg-video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 45%;
    will-change: transform;
  }
  .hero-overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(90deg, rgba(5,10,20,0.85) 0%, rgba(5,10,20,0.55) 40%, rgba(5,10,20,0.08) 75%),
      linear-gradient(180deg, rgba(5,10,20,0.10) 0%, transparent 45%, rgba(5,10,20,0.55) 100%);
  }
  .hero-content {
    /* Default Desktop: absolute über hero, dank hero-wrap position: relative referenziert */
    position: absolute; inset: 0; bottom: calc(96px + 0.5rem); /* bottom = strip-min-height + gap */
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem 1.5rem 4rem;
    z-index: 1;
  }
  /* v2.3.8: section-spezifischer margin-reset NUR für hero-content children
   * (verhindert Elementor widget-frontend.css h1 { margin: 0.67em 0 } → 80px Lücke
   * weil margin-bottom + flex-gap addieren sich). KEIN globales !important. */
  .hero-content > h1,
  .hero-content > p {
    margin: 0 !important;
  }
  @media (min-width: 768px) { .hero-content { padding: 1rem 3rem 5rem; } }
  @media (min-width: 1024px){ .hero-content { padding: 1rem 4.5rem 6rem; } }
  /* v12 Mobile-Hero: Video 16:9 oben, Text+Buttons drunter auf weißem BG, zentriert + full-width Buttons */
  @media (max-width: 767px) {
    /* v1.4.8: Hero full-width Mobile (kein Side-Margin, keine Rundung).
       v1.4.9: 10px Top-Margin damit Hero leicht unter dem Header "schwebt" (User-Wunsch). */
    .hero-wrap { height: auto; min-height: 0; gap: 0; margin: 10px 0 0; }
    .hero {
      flex: 0 0 auto;
      aspect-ratio: 16/9;
      min-height: 0;
      border-radius: 0;
    }
    .hero-overlay { display: none; }
    .hero-content {
      position: relative; inset: auto;
      padding: 1.75rem 1.25rem 1.5rem;
      background: #ffffff;
      color: var(--brand-ink);
      justify-content: flex-start; align-items: center;
      text-align: center;
      gap: 0.25rem;
    }
    .hero-content .h-hero,
    .hero-content h1.text-white { color: var(--brand-ink) !important; font-size: clamp(2rem, 9vw, 2.5rem); max-width: none !important; text-align: center; }
    .hero-content .h-hero-sub { color: var(--brand-teal-deep) !important; font-size: clamp(1.05rem, 5vw, 1.4rem); }
    .hero-content p,
    .hero-content p.text-white\/90 { color: var(--slate-600) !important; margin-top: 1rem !important; text-align: center; }
    .hero-content .flex.flex-wrap {
      margin-top: 1.5rem !important;
      width: 100%; flex-direction: column; gap: 0.6rem !important; align-items: stretch;
    }
    .hero-content .btn-on-image,
    .hero-content .btn-ghost-on-image {
      width: 100%; justify-content: center;
    }
    .hero-content .btn-ghost-on-image {
      background: rgba(15,23,42,0.04); color: var(--brand-ink); border-color: var(--slate-200);
      backdrop-filter: none;
    }
    .hero-content .btn-ghost-on-image:hover { background: rgba(15,23,42,0.08); border-color: var(--slate-300); }
  }
  /* v12.2: Mobile Section-Abstände kompakter */
  @media (max-width: 767px) {
    :root { --section-pad-y: clamp(2.5rem, 6vw, 4rem); }
    .bp-hero-block { padding-top: 2rem; padding-bottom: 2rem; }
    .coding-card { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .stats-section .v-inner .text-center.mb-12 { margin-bottom: 1.5rem; }
    .features-bento { gap: 0.85rem !important; }
    #reviews { padding-bottom: 2rem !important; }
    /* v1.5.0: padding-bottom 50px (User-Wunsch), margin-top bleibt 1rem. */
    .footer-wrap { margin-top: 1rem; padding: 3rem 1.5rem 50px; }
  }

  /* Marquee — in Hero-Strip (zwischen Kunden und EU/MiG) */
  .marquee {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 18%, black 100%);
  }
  .marquee-track {
    display: flex; gap: 0.65rem; width: max-content;
    /* v1.0.3: !important gegen Theme-Override (Elementor/uicore setzt animation: 0.4s) */
    animation: marquee 38s linear infinite !important;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.42rem 0.9rem;
    /* v9: Weißer BG mit grauem Border (statt Mint-Tint) */
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-radius: 9999px;
    color: var(--slate-600);
    font-size: 0.8rem; font-weight: 600; white-space: nowrap;
    font-family: 'Geist', sans-serif;
  }
  .marquee-pill svg { color: var(--slate-600); flex-shrink: 0; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @media (max-width: 1023px) {
    .marquee { display: none; }   /* Auf Mobile: nur Kunden+MiG sichtbar */
  }

  /* Strip — flach, ohne Box-Stil */
  .hero-strip {
    flex: 0 0 auto;
    background: transparent;
    border-radius: 0;
    padding: 1rem 0.5rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    box-shadow: none;
    min-height: 72px;
  }
  @media (min-width: 768px) { .hero-strip { padding: 1.1rem 1rem; min-height: 80px; } }
  /* v12 Mobile: Strip zentriert vertikal gestapelt */
  @media (max-width: 767px) {
    .hero-strip {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
      text-align: center;
      padding: 1.25rem 1rem;
      min-height: auto;
    }
    .strip-customers { justify-content: center; flex-direction: column; gap: 0.6rem; text-align: center; }
    .strip-customers p { font-size: 0.85rem; }
    .strip-trust { justify-content: center; }
  }
  .strip-customers { display: flex; align-items: center; gap: 1rem; }
  .stack-avatars { display: inline-flex; }
  .stack-avatars > div {
    width: 38px; height: 38px;
    border-radius: 9999px;
    border: 3px solid #fff;
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.15);
    background-size: cover; background-position: center;
  }
  .stack-avatars > div:first-child { margin-left: 0; }
  .strip-customers p { font-size: 0.9rem; color: var(--slate-600); line-height: 1.35; }
  .strip-customers strong { color: var(--brand-ink); font-weight: 700; }

  .strip-trust { display: flex; align-items: center; gap: 0.9rem; }
  .strip-trust .eu-flag { width: 52px; height: 38px; object-fit: cover; border-radius: 0.5rem; }
  .strip-trust .de-dots { display: flex; flex-direction: column; gap: 5px; }
  .strip-trust .de-dots span { width: 8px; height: 8px; border-radius: 9999px; display: block; }
  .strip-trust .mig-text {
    font-size: 0.74rem; font-weight: 800; letter-spacing: -0.005em;
    text-transform: uppercase; color: var(--brand-ink); line-height: 1.1;
    font-family: 'Geist', sans-serif;
  }

  /* =================================================================
     S2 — Stats-Triple (Position 2 · v11.4: 3 Varianten via data-variant)
     ================================================================= */
  .stats-section { position: relative; isolation: isolate; }
  .stats-aurora {
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 38% 50% at 18% 35%, rgba(54,208,188,0.10), transparent 70%),
      radial-gradient(ellipse 30% 40% at 82% 65%, rgba(167,243,208,0.14), transparent 70%),
      radial-gradient(ellipse 20% 30% at 50% 100%, rgba(254,240,138,0.06), transparent 70%);
    filter: blur(20px);
    opacity: 0;
    transition: opacity 600ms ease-out;
  }
  .stats-section[data-variant="A"] .stats-aurora { opacity: 1; }
  .stats-section[data-variant="C"] .stats-aurora { opacity: 1; }

  .stat-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms;
    display: flex; flex-direction: column;
    min-height: 320px;
  }
  .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
  .stat-card-top {
    padding: 2rem 1.6rem 0.25rem;
  }
  .stat-icon-box {
    /* Identischer Style wie .usp-cinema-icon-box, leicht kleiner für Card-Format */
    width: 72px; height: 72px;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(236,250,247,0.95) 100%);
    color: var(--brand-teal-deep);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px -8px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
    border: 1px solid rgba(54, 208, 188, 0.22);
    /* v1.0.6: will-change weg (einmalig animiert) */
  }
  .stat-icon-box svg { width: 34px; height: 34px; }
  .stat-bignumber {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    letter-spacing: 0.015em;
    color: var(--brand-ink);
    padding: 0.6rem 1.6rem 0;
  }
  .stat-card-body { padding: 0.4rem 1.6rem 1.6rem; }
  .stat-card-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.45rem; }
  .stat-card-body p { font-size: 0.94rem; color: var(--slate-600); line-height: 1.55; }
  /* v12.4 Mobile: Stats-Card horizontale Anordnung — Icon links, Bignumber rechts daneben, Body drunter */
  @media (max-width: 639px) {
    .stat-card {
      min-height: auto;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "icon  number"
        "body  body";
      align-items: center;
      gap: 0 1rem;
      padding: 1.25rem 1.25rem 1.5rem;
    }
    .stat-card-top {
      grid-area: icon;
      padding: 0;
    }
    .stat-bignumber {
      grid-area: number;
      padding: 0;
      font-size: clamp(2rem, 7vw, 2.5rem);
      line-height: 1;
    }
    .stat-card-body {
      grid-area: body;
      padding: 0.85rem 0 0;
    }
    .stat-card-body h3 { font-size: 1rem; }
    .stat-card-body p { font-size: 0.88rem; }
    .stat-icon-box { width: 56px; height: 56px; border-radius: 1rem; }
    .stat-icon-box svg { width: 26px; height: 26px; }
  }

  /* ── Variant A: Mesh-Tinted Cards (Default) ───────────────────────────────
     Jede Card bekommt eine andere Aurora-Tint, Number mit Gradient-Text. */
  .stats-section[data-variant="A"] .stat-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfffe 100%);
  }
  .stats-section[data-variant="A"] .stat-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.55;
  }
  .stats-section[data-variant="A"] .stat-card:nth-child(1)::before {
    background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(54,208,188,0.18), transparent 70%);
  }
  .stats-section[data-variant="A"] .stat-card:nth-child(2)::before {
    background: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(167,243,208,0.22), transparent 70%);
  }
  .stats-section[data-variant="A"] .stat-card:nth-child(3)::before {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(254,240,138,0.18), transparent 70%);
  }
  .stats-section[data-variant="A"] .stat-card > * { position: relative; z-index: 1; }
  .stats-section[data-variant="A"] .stat-bignumber {
    background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-teal-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .stats-section[data-variant="A"] .stat-card:hover { transform: translateY(-6px); }
  .stats-section[data-variant="A"] .stat-icon-box {
    box-shadow: 0 14px 36px -10px rgba(54,208,188,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
  }

  /* ── Variant B: Dark Drama ──────────────────────────────────────────────
     Schwarze Cards, teal-glow Number, weiße Headline, mint eyebrow. */
  .stats-section[data-variant="B"] .stat-card {
    background: linear-gradient(180deg, #0f172a 0%, #050a14 100%);
    border-color: rgba(255,255,255,0.08);
    color: #f8fafc;
    overflow: hidden;
    position: relative;
  }
  .stats-section[data-variant="B"] .stat-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse 70% 50% at 20% 0%, rgba(54,208,188,0.22), transparent 65%),
      radial-gradient(ellipse 50% 40% at 90% 100%, rgba(54,208,188,0.10), transparent 65%);
    pointer-events: none;
  }
  .stats-section[data-variant="B"] .stat-card > * { position: relative; z-index: 1; }
  .stats-section[data-variant="B"] .stat-bignumber {
    color: var(--brand-teal);
    text-shadow: 0 0 28px rgba(54,208,188,0.45), 0 0 60px rgba(54,208,188,0.18);
  }
  .stats-section[data-variant="B"] .stat-card-body h3 { color: #ffffff; }
  .stats-section[data-variant="B"] .stat-card-body p { color: var(--slate-400); }
  .stats-section[data-variant="B"] .stat-card-body p strong { color: #ffffff !important; }
  .stats-section[data-variant="B"] .stat-icon-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(207,247,235,0.85) 100%);
    box-shadow: 0 12px 30px -8px rgba(54,208,188,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .stats-section[data-variant="B"] .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 36px -8px rgba(54,208,188,0.3);
  }

  /* ── Variant C: Asymmetric Hero ─────────────────────────────────────────
     Card 1 dominiert links (volle Höhe), Card 2 + 3 stapeln rechts. */
  .stats-section[data-variant="C"] .stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 768px) {
    .stats-section[data-variant="C"] .stats-grid {
      grid-template-columns: 1.45fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        "hero card-2"
        "hero card-3";
      gap: 1.25rem;
    }
    .stats-section[data-variant="C"] .stat-card:nth-child(1) { grid-area: hero; }
    .stats-section[data-variant="C"] .stat-card:nth-child(2) { grid-area: card-2; }
    .stats-section[data-variant="C"] .stat-card:nth-child(3) { grid-area: card-3; }
  }
  .stats-section[data-variant="C"] .stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6fffa 100%);
    overflow: hidden;
    position: relative;
  }
  .stats-section[data-variant="C"] .stat-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(54,208,188,0.10), transparent 70%);
  }
  .stats-section[data-variant="C"] .stat-card > * { position: relative; z-index: 1; }
  /* Hero-Card (1) bekommt mehr Power */
  .stats-section[data-variant="C"] .stat-card:nth-child(1) {
    background:
      linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
    min-height: 480px;
  }
  .stats-section[data-variant="C"] .stat-card:nth-child(1)::before {
    background:
      radial-gradient(ellipse 70% 50% at 25% 30%, rgba(54,208,188,0.25), transparent 65%),
      radial-gradient(ellipse 50% 40% at 80% 80%, rgba(167,243,208,0.30), transparent 70%);
  }
  .stats-section[data-variant="C"] .stat-card:nth-child(1) .stat-icon-box {
    width: 96px; height: 96px; border-radius: 1.5rem;
  }
  .stats-section[data-variant="C"] .stat-card:nth-child(1) .stat-icon-box svg { width: 44px; height: 44px; }
  .stats-section[data-variant="C"] .stat-card:nth-child(1) .stat-bignumber {
    font-size: clamp(4rem, 8vw, 7rem);
    padding-top: 1.2rem;
    line-height: 0.92;
  }
  .stats-section[data-variant="C"] .stat-card:nth-child(1) .stat-card-body h3 { font-size: 1.35rem; }
  .stats-section[data-variant="C"] .stat-card:nth-child(1) .stat-card-body p { font-size: 1.05rem; max-width: 38rem; }
  /* Side-Cards (2+3) etwas kompakter */
  .stats-section[data-variant="C"] .stat-card:nth-child(2),
  .stats-section[data-variant="C"] .stat-card:nth-child(3) {
    min-height: auto;
  }
  .stats-section[data-variant="C"] .stat-card:nth-child(2) .stat-bignumber,
  .stats-section[data-variant="C"] .stat-card:nth-child(3) .stat-bignumber {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
  }

  /* =================================================================
     S3 — Counter (Position 3, BOX, Pin mit +72px Header-Offset)
     ================================================================= */
  .v-section.counter-section {
    /* v11.9: kein Offset — Section pinnt direkt am Viewport-Top */
    /* v1.0.5: full-width — kein side margin, kein border-radius */
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100svh;
    min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem) var(--section-pad-x);
    overflow: hidden;
  }
  /* v10: Subtiles Video als BG hinter Counter — sehr leicht, nur „lebendig"
     v1.0.6: pinning + scrub raus → mix-blend-mode bleibt, ist alleine kein Killer mehr */
  .counter-bg-video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.22;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  .counter-content {
    position: relative; z-index: 2;
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
  }
  .counter-frame {
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(20,30,55,0.35) 100%);
    border: 1px solid rgba(54,208,188,0.22);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem 2.25rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 60px -20px rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
  }
  .counter-digits {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    letter-spacing: 0.04em;
    color: #ff4d4d;
    text-shadow: 0 0 22px rgba(255,77,77,0.65), 0 0 45px rgba(255,77,77,0.35);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .counter-digit { display: inline-block; min-width: 0.7em; transition: transform 280ms cubic-bezier(0.34,1.56,0.64,1); }
  .counter-digit.tick { animation: tick 0.4s ease-out; }
  @keyframes tick { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
  /* v1.1.7: .counter-dot + blink-Keyframe entfernt (Diebstahl-Counter ohne Tausender-Punkt). */
  .counter-label {
    font-family: 'Geist', sans-serif;
    font-size: 0.74rem; letter-spacing: 0.22em;
    color: #5eead4;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* =================================================================
     S4 (alt) — Highlight „Bis Schutz" v9 entfernt
     S5 — 3-Step Pinned-Horizontal (edge-to-edge, +72px, OHNE Dots)
     ================================================================= */
  .steps-section { padding: 0; }
  .steps-intro {
    padding: var(--section-pad-y) var(--section-pad-x) 2.5rem;
    max-width: 80rem; margin: 0 auto; text-align: center;
  }
  .steps-outro {
    padding: 2.5rem var(--section-pad-x) var(--section-pad-y);
    max-width: 80rem; margin: 0 auto; text-align: center;
  }
  .steps-pin {
    position: relative;
    height: var(--vh-content);   /* berücksichtigt Header */
    overflow: hidden;
  }
  .steps-track {
    display: flex;
    width: 300%;
    height: 100%;
    will-change: transform;
  }
  .steps-panel {
    flex: 0 0 calc(100% / 3);
    height: 100%;
    display: grid;
    /* v12.9: Bild 65% (Spalte 1, .steps-visual via order:-1) / Textblock 35% (Spalte 2) */
    grid-template-columns: 65fr 35fr;
    align-items: center;
    padding: 2.5rem 3rem;
    gap: 3rem;
    position: relative; isolation: isolate;
  }
  .steps-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; }
  .steps-panel--01::before { background: radial-gradient(ellipse 60% 50% at 25% 30%, rgba(54,208,188,0.18), transparent 60%); }
  .steps-panel--02::before { background: radial-gradient(ellipse 50% 60% at 75% 35%, rgba(167,243,208,0.22), transparent 60%); }
  .steps-panel--03::before { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(54,208,188,0.14), transparent 65%); }
  /* v11.6: Text-Spalte als Card wie Bild · v11.23: Border statt nur Shadow
     v1.4.4: max-height auf clamp(32rem, 70vh, 40rem) — bei großen Viewports gedeckelt
     statt vh-fillend. `align-items: center` am .steps-panel (Z. 767) zentriert automatisch
     vertikal. Verhindert dass Bild + Text bei hohen Browser-Fenstern (>1000px) zu sehr stretchen. */
  .steps-text {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: clamp(32rem, 70vh, 40rem);
    border-radius: var(--radius-section);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-card);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 1.3rem;
    text-align: center;
  }
  .steps-text::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    filter: blur(28px);
  }
  .steps-panel--01 .steps-text::before {
    background:
      radial-gradient(ellipse 60% 50% at 20% 25%, rgba(54,208,188,0.32), transparent 65%),
      radial-gradient(ellipse 50% 40% at 80% 80%, rgba(167,243,208,0.30), transparent 65%);
  }
  .steps-panel--02 .steps-text::before {
    background:
      radial-gradient(ellipse 55% 50% at 75% 25%, rgba(167,243,208,0.36), transparent 65%),
      radial-gradient(ellipse 50% 40% at 20% 80%, rgba(54,208,188,0.20), transparent 65%);
  }
  .steps-panel--03 .steps-text::before {
    background:
      radial-gradient(ellipse 60% 50% at 50% 30%, rgba(54,208,188,0.28), transparent 65%),
      radial-gradient(ellipse 40% 40% at 50% 100%, rgba(254,240,138,0.20), transparent 65%);
  }
  .steps-num {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(5rem, 12vw, 9rem);
    color: var(--brand-teal);
    line-height: 0.85;
    letter-spacing: 0.02em;
    opacity: 0.9;
  }
  .steps-text h3 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: 0.015em;
    line-height: 1.02;
    text-transform: uppercase;
  }
  .steps-text p { font-size: 1.05rem; color: #334155; max-width: 28rem; line-height: 1.55; margin: 0 auto; }
  .steps-visual {
    position: relative;
    width: 100%;
    height: 100%;
    /* v1.4.4: max-height analog .steps-text — verhindert Bild-Stretch bei sehr hohen Viewports */
    max-height: clamp(32rem, 70vh, 40rem);
    border-radius: var(--radius-section);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    /* v11.1: Bild links, Text rechts (CSS-order Swap) */
    order: -1;
  }
  .steps-visual img {
    /* v1.4.4: 145% Breite + will-change entfernt — der containerAnimation-Parallax wurde in v1.4.3
       removed (war Resize-Bug-Trigger). Bild füllt jetzt 100% des Containers mit object-fit:cover.
       v2.3.8: aspect-ratio:auto + !important auf width/height/display — neutralisiert WP 6.6+
       wp-img-auto-sizes-contain-inline-css (sonst rendert Bild mit native-Aspect statt Container-Höhe). */
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    display: block;
    object-fit: cover;
    max-width: none;
  }

  /* v12.4: Tablet-only (768–1023px) — vertical stack OHNE transform-Override für Mobile */
  @media (min-width: 768px) and (max-width: 1023px) {
    .steps-pin { height: auto; overflow: visible; }
    .steps-track { display: grid; grid-template-columns: 1fr; width: 100%; gap: 2rem; transform: none !important; padding: 1rem; }
    .steps-panel { grid-template-columns: 1fr; padding: 2rem 1rem; flex: none; gap: 1.5rem; }
    .steps-visual { aspect-ratio: 4/3; max-height: none; }
  }
  /* v12.4: Default Steps-Dots verstecken (nur auf Mobile sichtbar) */
  .steps-dots { display: none; }

  /* v12.2: Mobile — Steps als Slider mit Punkt-Navigation, Textbox erst, dann Bild */
  @media (max-width: 767px) {
    .steps-pin {
      height: auto;
      overflow: hidden;
      position: relative;
    }
    .steps-track {
      display: flex !important;
      grid-template-columns: none !important;
      width: 300% !important;
      gap: 0 !important;
      padding: 0 !important;
      transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .steps-panel {
      flex: 0 0 calc(100% / 3) !important;
      /* v12.7: horizontaler Inset über --section-inset-x → konsistent mit allen anderen Boxen */
      padding: 0.5rem var(--section-inset-x) 1rem !important;
      gap: 1rem !important;
      grid-template-columns: 1fr !important;
    }
    /* Textbox zuerst (oben), Bild danach */
    .steps-visual {
      order: 2 !important;
      aspect-ratio: 4/5 !important;
      max-height: none !important;
      width: 100% !important;
    }
    .steps-text { order: 1 !important; }
    /* Bild auf Mobile sauber positionieren — Motive zentriert, nicht angeschnitten */
    .steps-visual img {
      width: 100% !important;
      object-fit: cover;
      object-position: center center;
      transform: none !important;
    }
    .steps-panel--01 .steps-visual img { object-position: 40% center; }
    .steps-panel--02 .steps-visual img { object-position: center center; }
    .steps-panel--03 .steps-visual img { object-position: 60% center; }

    /* Steps Dots-Navigation */
    .steps-dots {
      display: flex !important; justify-content: center; gap: 0.6rem;
      padding: 0.75rem 1rem 1.25rem;
    }
    .steps-dot {
      width: 8px; height: 8px;
      border-radius: 9999px;
      background: var(--slate-300);
      border: none;
      cursor: pointer;
      transition: width 250ms ease, background 250ms ease;
      padding: 0;
    }
    .steps-dot[aria-current="true"] {
      background: var(--brand-teal);
      width: 26px;
    }
  }

  /* =================================================================
     S5b (v10.2) — Cyclist Headline Block — Box full-width, Content content-width
     ================================================================= */
  .bp-hero-block {
    padding: clamp(3rem, 5vw, 5rem) var(--section-inset-x);
    background: transparent;
  }
  .bp-hero-block-inner {
    /* Box füllt fast die ganze Viewport-Breite (nur Section-Inset Margin) */
    position: relative;
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-section);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    isolation: isolate;
    /* KEIN padding-bottom — Bild dockt mit Box-Unterkante ab */
    padding: clamp(2rem, 4vw, 3.5rem) 0 0;
  }
  /* v11.5: Mesh-Aurora hinter dem Content */
  .bp-hero-aurora {
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 45% 60% at 12% 20%, rgba(54,208,188,0.18), transparent 65%),
      radial-gradient(ellipse 40% 55% at 88% 75%, rgba(167,243,208,0.22), transparent 65%),
      radial-gradient(ellipse 30% 40% at 50% 100%, rgba(254,240,138,0.10), transparent 70%);
    filter: blur(24px);
    opacity: 0.95;
  }
  .bp-hero-block-content { position: relative; z-index: 1; }
  .bp-hero-block-content {
    /* Content bleibt content-width inside der full-width Box */
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    display: grid; grid-template-columns: 1fr; gap: 2rem;
    align-items: end;
  }
  @media (min-width: 1024px) {
    .bp-hero-block-content {
      grid-template-columns: 1fr 1.05fr;
      gap: 3.5rem;
      padding: 0 clamp(2.5rem, 4vw, 4rem);
    }
  }
  .bp-hero-block-image {
    position: relative;
    width: 100%;
    display: flex; justify-content: center; align-items: flex-end;
  }
  .bp-hero-block-image img {
    width: 100%; height: auto;
    max-width: 32rem;
    object-fit: contain;
    display: block;
    margin-bottom: 0;
  }
  .bp-hero-block-text {
    /* v11: Text rutscht in der eigenen Spalte ganz nach oben — Bild dockt unten weiter an */
    align-self: start;
    display: flex; flex-direction: column; gap: 1.5rem;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: 0;
  }
  .bp-hero-block-text .btn-primary { align-self: flex-start; margin-top: 0.5rem; }
  /* v12: Mobile — Text oben, Bild unten */
  @media (max-width: 1023px) {
    .bp-hero-block-text { order: 1; padding-top: 0; padding-bottom: 1.5rem; }
    .bp-hero-block-image { order: 2; }
  }
  .bp-hero-block-text h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2rem, 4.4vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--brand-ink);
    max-width: 22ch;
  }
  .bp-hero-block-text h2 .accent { color: var(--brand-teal-deep); }
  .bp-hero-block-text p {
    font-size: 1.02rem;
    color: var(--slate-600);
    line-height: 1.55;
    max-width: 32rem;
  }

  /* =================================================================
     S6 (v9.1) — USP Cinema: 5 sticky 100svh-Slides mit Foto-BG + Parallax
     Sticky-Stack: jede Slide pin-t bei top:0, nächste Slide schiebt sich darüber.
     BG-Image via GSAP-scrub leicht skaliert+verschoben für Parallax-Effekt.
     ================================================================= */
  .usp-cinema { position: relative; padding-bottom: 0; }
  .usp-cinema-slide {
    position: sticky;
    /* v11.22: kein Sticky-Offset, kein Gap zwischen Slides */
    /* v1.0.5: full-width — kein margin, kein border-radius */
    top: 0;
    margin: 0;
    height: 100svh;
    border-radius: 0;
    display: grid; place-items: center;
    padding: var(--section-pad-y) var(--section-pad-x);
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
  }
  /* v1.2.1: iOS-Safari-robuste BG-Properties.
     - Explizite top/left statt nur `inset: 0` (Safari iOS handelt inset auf img inkonsistent)
     - min-width/min-height als Fallback wenn parent height:auto und `height:100%` nicht greift
     - display:block (img defaultet auf inline → Whitespace-Bug möglich)
     GSAP-Parallax läuft nur auf Desktop (siehe home.js USP-Cinema-Block). */
  .usp-cinema-bg {
    position: absolute;
    top: 0; left: 0;
    z-index: -3;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    /* v2.3.10: aspect-ratio:auto + !important gegen WP 6.6 wp-img-auto-sizes override */
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
  }
  @media (max-width: 1023px) {
    /* v1.4.6: Mobile-Sticky wieder aktiviert — User-Wunsch.
       Vorher (v12) deaktiviert mit position:relative; height:auto → keine Sticky-Stack-Optik.
       Jetzt: sticky + 100svh + iOS-Safari-robust mit 100vh-Fallback (svh seit Safari 15.4 supported).
       Padding analog Desktop für Content-Inset. */
    .usp-cinema { padding: 0; }
    .usp-cinema-slide {
      position: sticky;
      top: 0;
      /* iOS-Safari-Robustheit: 100vh als Fallback für ältere Browser, 100svh überschreibt
         in modernen Browsern (small viewport — stabil bei Toolbar-Show/Hide auf iOS). */
      height: 100vh;
      height: 100svh;
      margin: 0;
      border-radius: 0;
      padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 4vw, 2rem);
      /* display: grid; place-items: center vom Desktop-Default greift weiter — Content zentriert */
    }
    /* v1.1.9: BG-Mobile-Override entfernt — Desktop-Default `height:100%; top:0` greift überall. */
  }
  .usp-cinema-overlay {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(135deg, rgba(5,10,20,0.78) 0%, rgba(15,23,42,0.52) 100%),
      radial-gradient(ellipse 60% 60% at 20% 30%, rgba(54,208,188,0.20), transparent 60%);
  }
  .usp-cinema-inner {
    max-width: 56rem; width: 100%;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.5rem;
    position: relative; z-index: 1;
  }
  .usp-cinema-icon-box {
    width: 88px; height: 88px;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(236,250,247,0.95) 100%);
    color: var(--brand-teal-deep);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.6);
  }
  .usp-cinema-icon-box svg { width: 38px; height: 38px; }
  .usp-cinema-eyebrow {
    color: #5eead4;
    font-family: 'Geist', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.55rem;
  }
  .usp-cinema-eyebrow .eyebrow-dot {
    width: 6px; height: 6px; border-radius: 9999px;
    background: var(--brand-teal);
    box-shadow: 0 0 0 4px rgba(54, 208, 188, 0.15);
  }
  .usp-cinema-h {
    font-family: 'Bebas Neue', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    line-height: 1.02;
    /* v11.22: Hero-Größe (clamp 2.5–5.25rem statt 2.5–4.5rem) */
    font-size: clamp(2.5rem, 6vw, 5.25rem);
    color: #ffffff;
    max-width: 22ch;
  }
  .usp-cinema-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgba(248,250,252,0.85);
    line-height: 1.55;
    max-width: 38rem;
  }

  /* =================================================================
     S7 — EU-Section (3 App-Style Cards, edge-to-edge)
     ================================================================= */
  .eu-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
  @media (min-width: 768px) { .eu-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
  .eu-card {
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-card);
    padding: 2rem 1.85rem;
    box-shadow: var(--shadow-card);
    transition: transform 240ms, box-shadow 240ms, border-color 240ms;
    display: flex; flex-direction: column; gap: 1.25rem;
  }
  .eu-card:hover { transform: translateY(-4px); border-color: var(--brand-teal); box-shadow: var(--shadow-card-hover); }
  .eu-icon-box {
    width: 80px; height: 80px;
    border-radius: 1rem;
    background: var(--brand-teal-light);
    color: var(--brand-teal-deep);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .eu-card h3 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem; line-height: 1.05;
    letter-spacing: 0.015em;
    text-transform: uppercase;
  }
  .eu-card p { font-size: 0.94rem; color: var(--slate-600); line-height: 1.55; }


  /* =================================================================
     S9 — Funktionen Bento (edge-to-edge)
     ================================================================= */
  .features-bento {
    display: grid; gap: 1.25rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px)  { .features-bento { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) {
    .features-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(280px, auto); gap: 1.5rem; }
    .feature-tile--hero { grid-column: span 2; grid-row: span 2; }
  }
  .feature-tile {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms;
    display: flex; flex-direction: column;
  }
  .feature-tile:hover { transform: scale(1.02); box-shadow: var(--shadow-card-hover); }
  .feature-tile-visual {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 200px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
  }
  /* v2.3.8: aspect-ratio: auto + !important auf width/height nötig — WordPress 6.6+ injected
   * <style id="wp-img-auto-sizes-contain-inline-css"> ein `aspect-ratio: auto W/H` Property auf
   * <img>-Tags mit width+height Attributen, das überschreibt sonst height:100% → Bild bleibt
   * native-aspect statt Container-Höhe (Whitespace zwischen Bild und Card-Body).
   * Spezifisch nur für .feature-tile-visual img, kein global. */
  .feature-tile-visual img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; display: block; object-fit: cover; transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
  .feature-tile:hover .feature-tile-visual img { transform: scale(1.04); }
  .feature-tile-body { padding: 1.5rem 1.6rem 1.75rem; }
  .feature-tile h3 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.55rem;
    letter-spacing: 0.015em;
    line-height: 1.05;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
  }
  .feature-tile--hero h3 { font-size: 2.2rem; }
  .feature-tile p { font-size: 0.95rem; color: var(--slate-600); line-height: 1.55; }
  /* v12.7: Hero-Tile Copy auf Standard-Tile-Größe — Konsistenz */
  .feature-tile--hero p { font-size: 0.95rem; }
  .feature-tile--pastel { background: linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 50%, #ffffff 100%); }

  /* =================================================================
     S10 — Reviews (edge-to-edge)
     ================================================================= */
  /* v11.16: Reviews wieder content-width — Intro + Rows beide in max-width 80rem */
  #reviews > .v-inner { max-width: 80rem; margin: 0 auto; }
  .reviews-intro { text-align: center; max-width: 38rem; margin: 0 auto 3rem; }
  .reviews-intro h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.02; letter-spacing: 0.015em;
    margin-bottom: 0.9rem; text-transform: uppercase;
  }
  .reviews-intro p { color: var(--slate-600); font-size: 1.02rem; line-height: 1.55; }

  /* Reviews v10 — Marquee-only (Snap-Scroll-Nav v9 rückgängig, war verbuggt) */
  .reviews-rows {
    display: flex; flex-direction: column; gap: 1rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }
  .reviews-row { display: flex; gap: 1rem; width: max-content; animation: marquee 90s linear infinite !important; }
  .reviews-row.is-paused { animation-play-state: paused; }
  .reviews-row--reverse { animation: marqueeReverse 90s linear infinite !important; }
  @keyframes marqueeReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .review-card {
    min-width: 320px;
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.4rem;
    display: flex; flex-direction: column; gap: 0.7rem;
    flex-shrink: 0;
  }
  .review-card__head { display: flex; align-items: center; justify-content: space-between; }
  .review-card__id { display: flex; align-items: center; gap: 0.75rem; }
  .review-card__avatar {
    width: 40px; height: 40px;
    border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.8rem;
    flex-shrink: 0;
  }
  .review-card__name { font-weight: 600; color: var(--brand-ink); font-size: 0.92rem; }
  .review-card__stars { color: #f59e0b; font-size: 0.92rem; letter-spacing: 0.08em; }
  .review-card p { font-size: 0.93rem; color: var(--slate-600); line-height: 1.5; }
  .reviews-controls { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
  .reviews-arrow {
    width: 44px; height: 44px; border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-card);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--brand-ink);
    transition: border-color 200ms, color 200ms;
  }
  .reviews-arrow:hover { border-color: var(--brand-teal); color: var(--brand-teal-deep); }
  .reviews-dots { display: flex; align-items: center; gap: 0.4rem; padding: 0 1rem; }
  .reviews-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--slate-300); transition: all 250ms ease; }
  .reviews-dot.is-active { background: var(--brand-teal); width: 22px; }

  /* =================================================================
     S11 (v9) — Final-CTA: Bild full-cover als BG mit Dark-Overlay
     ================================================================= */
  .final-cta-v7 {
    /* v11.15: Full-Width mit Section-Inset (wie Codierung-Box), natürliche Höhe */
    position: relative;
    width: auto;
    max-width: none;
    margin: clamp(3rem, 6vw, 5rem) var(--section-inset-x) var(--section-inset-x);
    border-radius: var(--radius-section);
    overflow: hidden;
    color: #ffffff;
    isolation: isolate;
    min-height: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
  }
  .final-cta-bg {
    position: absolute; inset: 0; z-index: -3;
    overflow: hidden;
  }
  .final-cta-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 50%;
  }
  .final-cta-overlay {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(135deg, rgba(5,10,20,0.72) 0%, rgba(15,23,42,0.58) 100%),
      radial-gradient(ellipse 60% 60% at 20% 25%, rgba(54,208,188,0.18), transparent 60%);
  }
  .final-cta-v7 .mesh-aurora {
    z-index: -1;
    background: radial-gradient(ellipse 60% 60% at 22% 22%, rgba(54,208,188,0.20), transparent 60%),
                radial-gradient(ellipse 50% 50% at 80% 80%, rgba(54,208,188,0.10), transparent 60%);
    opacity: 0.7;
  }
  .final-cta-content {
    position: relative; z-index: 2;
    max-width: 56rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  }
  @media (min-width: 768px)  { .final-cta-content { padding: 5rem 2rem; gap: 1.5rem; } }
  @media (min-width: 1024px) { .final-cta-content { padding: 6rem 4rem; } }

  .final-cta-content h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.5rem, 5.5vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #ffffff;
    max-width: 22ch;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  }
  .final-cta-content h2 .accent { color: var(--brand-teal); }

  .cta-variant { display: none; }
  .cta-variant.is-active { display: block; }

  /* =================================================================
     Footer
     ================================================================= */
  

@media (min-width: 768px)  { .footer-wrap { padding: 5rem 2.5rem 2.5rem; } }
  @media (min-width: 1024px) { .footer-wrap { padding: 5rem 4rem 2.5rem; } }
  /* v12.4: Footer Mobile — kleinere Schrift + Seiten/Quicklinks nebeneinander */
  @media (max-width: 767px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "logo logo"
        "seiten quicklinks"
        "recht recht";
      gap: 1.5rem 1rem;
      padding-bottom: 2rem;
    }
    .footer-grid > div:nth-child(1) { grid-area: logo; }
    .footer-grid > div:nth-child(2) { grid-area: seiten; }
    .footer-grid > div:nth-child(3) { grid-area: quicklinks; }
    .footer-grid > div:nth-child(4) { grid-area: recht; }
    .footer-grid h4 { font-size: 0.68rem; letter-spacing: 0.16em; margin-bottom: 0.7rem; }
    .footer-grid ul { gap: 0.2rem; }
    .footer-grid ul a { font-size: 0.85rem; line-height: 1.4; }
    .footer-intro { font-size: 0.82rem; line-height: 1.5; }
    .footer-wrap .pt-8 p { font-size: 0.75rem; }
    .footer-wrap .pt-8 { flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; }
  }
  
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } }
  .footer-grid h4 { color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 1.1rem; font-family: 'Geist', sans-serif; }
  



/* v12.7: Footer-Intro etwas kleiner als Default-p */
  


/* Social-Toast */
  .social-toast {
    position: fixed; bottom: 1.25rem; left: 1.25rem;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 1rem;
    padding: 0.875rem 2.25rem 0.875rem 0.75rem;
    box-shadow: var(--shadow-floating);
    display: flex; align-items: center; gap: 0.75rem;
    max-width: 320px;
    opacity: 0; transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
  }
  .social-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .social-toast .avatar {
    width: 42px; height: 42px; border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-deep));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
  }
  .social-toast .close-x {
    position: absolute; top: 6px; right: 8px;
    color: var(--slate-400); cursor: pointer; font-size: 18px;
    background: none; border: none; padding: 4px; line-height: 1;
  }
  .social-toast .close-x:hover { color: var(--brand-ink); }