:root {
      /* Klares, frisches Weiss als Basis */
      --bg: #FFFFFF;
      --bg-soft: #F7F7F6;
      --bg-warm: #EFEFEE;
      --surface: #FFFFFF;

      /* Dunkle Akzent-Sektionen, sauberes Schwarz */
      --dark: #0F0F0F;
      --dark-soft: #1A1A1A;

      /* Kuester Markenfarben (Gold) - Akzent */
      --gold: #C6AB7C;
      --gold-dark: #A88A5C;
      --gold-light: #E8D9BD;
      --gold-soft: #F5EDDC;
      --gold-glow: rgba(198, 171, 124, 0.3);

      /* Marken-Gruen (Kuester) */
      --green: #3A9365;
      --green-dark: #2B6E4C;
      --green-soft: #DCEFE2;
      --green-light: #E8F5ED;
      --green-glow: rgba(58, 147, 101, 0.28);

      /* Text - neutrales Schwarz/Grau */
      --text: #111111;
      --text-soft: #555555;
      --text-mute: #888888;

      /* Borders - neutral */
      --border: rgba(0, 0, 0, 0.08);
      --border-strong: rgba(0, 0, 0, 0.16);
      --border-gold: rgba(198, 171, 124, 0.3);
      --border-green: rgba(58, 147, 101, 0.25);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    ::selection { background: var(--gold); color: var(--dark); }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
      overflow-x: hidden;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      /* overflow-x: clip statt hidden:
         clip verhindert horizontalen Scroll OHNE einen Scroll-Container zu
         erzeugen. Dadurch funktioniert position: sticky in Child-Elementen
         weiterhin (overflow-x: hidden wuerde das blockieren). */
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
    }

    .mono { font-family: 'JetBrains Mono', monospace; }

    /* ====== Custom Cursor ====== */
    .cursor {
      position: fixed;
      width: 8px;
      height: 8px;
      background: var(--gold);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease;
      transform: translate(-50%, -50%);
      display: none;
    }

    .cursor.expand {
      width: 48px;
      height: 48px;
      background: transparent;
      border: 1px solid var(--gold);
    }

    @media (min-width: 1024px) {
      body { cursor: none; }
      .cursor { display: block; }
      a, button, .clickable { cursor: none; }
    }

    h1, h2, h3, h4 {
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--dark);
    }

    .serif {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    

    /* ====== Sichtbarer Daten-Stream im Hintergrund ====== */
    .data-stream {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      opacity: 0.55;
    }

    .data-column {
      position: absolute;
      top: -100%;
      width: 280px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 500;
      animation: streamDown linear infinite;
      white-space: nowrap;
      line-height: 2;
    }

    .data-column.green { color: var(--green-dark); }
    .data-column.gold { color: var(--gold-dark); }
    .data-column.dim { color: var(--text-mute); }

    @keyframes streamDown {
      from { transform: translateY(0); }
      to { transform: translateY(200vh); }
    }

    .data-line {
      opacity: 0;
      animation: dataFade 5s ease-in-out infinite;
    }

    @keyframes dataFade {
      0%, 100% { opacity: 0; }
      25%, 75% { opacity: 1; }
    }

    header, section, footer, .marquee, .loader { position: relative; z-index: 2; }
    header { z-index: 100; }
    .loader { z-index: 10000; }

    /* Lesbarkeits-Layer: Content-Sektionen bekommen einen halbtransparenten Hintergrund,
       der den Datenstrom hinter dem Text gezielt dimmt. */
    .founders-section,
    .process-section,
    .bewertung-section,
    .values-section,
    .ratgeber-section,
    .faq-section,
    .reviews-section,
    .hero,
    .services-bar,
    .marketing-section {
      background-color: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* Akzent-Sektionen mit leichtem Grauton fuer visuellen Rhythmus.
       Reviews-Section ist hier RAUS, weil sie an die schwarze Marketing-Section
       angrenzt - der Gradient von Weiss zu Schwarz funktioniert nur mit weissem
       Vorlauf, sonst entsteht ein Beige-Weiss-Schwarz Bruch. */
    .services-bar,
    .process-section,
    .ratgeber-section {
      background-color: rgba(247, 247, 246, 0.96);
    }

    .values-section {
      background-color: rgba(239, 245, 231, 0.55);
    }

    /* ====== Loader ====== */
    .loader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    .loader.hidden { opacity: 0; visibility: hidden; }

    .loader-content { text-align: center; }

    .loader-logo {
      width: 64px;
      height: 64px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: pulse 1.5s ease-in-out infinite;
      box-shadow: 0 12px 32px var(--gold-glow);
    }

    .loader-logo span {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 36px;
      font-weight: 600;
      color: white;
    }

    .loader-text {
      font-size: 13px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-soft);
      font-weight: 500;
    }

    .loader-bar {
      position: absolute;
      bottom: 32px;
      left: 32px;
      right: 32px;
      height: 1px;
      background: var(--border);
    }

    .loader-bar::after {
      content: '';
      display: block;
      height: 100%;
      background: var(--gold);
      animation: loadBar 1.4s ease forwards;
    }

    @keyframes loadBar {
      from { width: 0%; }
      to { width: 100%; }
    }

    /* ====== Header ====== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 20px 32px;
      transition: all 0.4s ease;
    }

    header.scrolled {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 14px 32px;
    }

    .nav {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--dark);
      flex-shrink: 0;
    }

    .logo-img {
      height: 52px;
      width: auto;
    }

    .nav-links {
      display: flex;
      gap: 4px;
      list-style: none;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px;
      backdrop-filter: blur(10px);
    }

    .nav-links a {
      color: var(--text);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 999px;
      transition: all 0.3s ease;
    }

    .nav-links a:hover {
      color: var(--green-dark);
      background: var(--green-light);
    }

    .nav-phone {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--dark);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
    }

    .nav-phone:hover { color: var(--gold-dark); }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--dark);
      color: var(--bg) !important;
      padding: 11px 22px !important;
      border-radius: 999px;
      font-weight: 500;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .nav-cta:hover {
      background: var(--green);
      color: white !important;
      transform: translateY(-1px);
    }

    .nav-cta-arrow { transition: transform 0.3s ease; }
    .nav-cta:hover .nav-cta-arrow { transform: translateX(4px); }

    .mobile-menu {
      display: none;
      background: none;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      padding: 10px 14px;
      color: var(--dark);
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
    }

    /* Mobile Drawer: rutscht von rechts ein wenn der Hamburger geklickt wird.
       Liegt ueber dem Hero, hat eigenen Backdrop. */
    .mobile-drawer {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 86%;
      max-width: 360px;
      background: var(--bg);
      box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
      transform: translateX(100%);
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1001;
      display: flex;
      flex-direction: column;
      padding: 28px 28px 40px;
      overflow-y: auto;
    }
    .mobile-drawer.open { transform: translateX(0); }

    .mobile-drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 15, 15, 0.55);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
      z-index: 1000;
      backdrop-filter: blur(4px);
    }
    .mobile-drawer-backdrop.open {
      opacity: 1;
      visibility: visible;
    }

    .mobile-drawer-head {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 28px;
    }
    .mobile-drawer-close {
      background: none;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--dark);
      font-size: 22px;
      line-height: 1;
      padding: 0;
    }

    .mobile-drawer-links {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-drawer-links a {
      display: block;
      padding: 14px 4px;
      font-size: 18px;
      font-weight: 500;
      color: var(--dark);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
      letter-spacing: -0.01em;
    }
    .mobile-drawer-links a:active {
      color: var(--green-dark);
    }

    .mobile-drawer-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 16px 20px;
      background: var(--green);
      color: white;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 16px;
    }

    .mobile-drawer-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--dark);
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      padding: 14px;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
    }
    .mobile-drawer-phone svg { color: var(--green); }

    body.drawer-locked {
      overflow: hidden;
    }

    /* Sticky Mobile CTA-Bar am unteren Viewport-Rand (nur Mobile) */
    .mobile-sticky-cta {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 99;
      padding: 14px 20px;
      background: var(--green);
      color: white;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      text-align: center;
      box-shadow: 0 14px 36px rgba(58, 147, 101, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
      transform: translateY(120%);
      opacity: 0;
    }
    .mobile-sticky-cta.visible {
      transform: translateY(0);
      opacity: 1;
    }
    @media (max-width: 900px) {
      .mobile-sticky-cta { display: block; }
    }

    /* ====== Hero ====== */
    .hero {
      /* v2.62: Hero-Hoehe reduziert damit auf 16:9 (1366x768) auch die Marquee
         (Benefit-Bar) above-the-fold sichtbar ist. Marquee ist ~60px hoch +
         header ~60px = 120px reserviert. Padding skaliert mit viewport-height
         (vh) damit auf grossen Macbooks/4K Displays mehr Luft entsteht. */
      min-height: calc(100vh - 100px);  /* 100px fuer die zwei Marquee-Reihen */
      padding: clamp(80px, 11vh, 130px) 0 clamp(24px, 4vh, 48px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

    .hero-glow {
      position: absolute;
      width: 800px;
      height: 800px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--gold-soft) 0%, transparent 60%);
      filter: blur(60px);
      top: -200px;
      right: -200px;
      opacity: 0.8;
      animation: float 12s ease-in-out infinite;
    }

    .hero-glow-2 {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--green-glow) 0%, transparent 60%);
      filter: blur(80px);
      bottom: -100px;
      left: -100px;
      animation: float 16s ease-in-out infinite reverse;
    }

    @keyframes float {
      0%, 100% { transform: translate(0, 0); }
      33% { transform: translate(40px, -30px); }
      66% { transform: translate(-30px, 40px); }
    }

    .hero-grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    }

    .hero-content { position: relative; z-index: 1; width: 100%; }

    .hero-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(32px, 4vw, 64px);
      align-items: center;
    }

    /* Hero-Presenters: Avatar-Cluster mit Namen darunter
       Sofortige Wiedererkennung wer hinter der Seite steht.
       v2.62: Avatar groesse + gap skaliert mit vh damit auf kleinen
       16:9-Bildschirmen alles kompakter wird. */
    .hero-presenters {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 20px;
    }

    .hero-presenters-avatars {
      display: flex;
      position: relative;
      flex-shrink: 0;
    }

    .hero-presenters-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: var(--bg-warm);
      border: 3px solid var(--surface);
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .hero-presenters-avatar + .hero-presenters-avatar {
      margin-left: -28px;
    }

    .hero-presenters-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 15%;
      display: block;
    }

    .hero-presenters-text {
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.2;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border-green);
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 13px;
      color: var(--text-soft);
      margin-bottom: 24px;
      font-weight: 500;
    }

    .hero-eyebrow-dot {
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--green);
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.9); }
    }

    .hero h1 {
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 500;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
      line-height: 1.1;
    }

    .hero h1 .line {
      display: block;
      overflow: hidden;
    }

    .hero h1 .serif {
      color: var(--green-dark);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 800;
      font-size: 1.25em;
      letter-spacing: -0.035em;
      display: inline-block;
      vertical-align: baseline;
    }

    .hero-lead {
      font-size: 22px;
      color: var(--text);
      max-width: 560px;
      line-height: 1.45;
      margin-bottom: 28px;
      font-weight: 500;
      letter-spacing: -0.015em;
    }

    .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

    /* Hero Image */
    

    

    

    

    @keyframes floatImg {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }

    /* Hero Video - Hochformat 9:16.
       v2.63: Video bleibt gross (380px wie original), nur Padding wurde reduziert. */
    .hero-video-stack {
      position: relative;
      width: 100%;
      max-width: 380px;
      aspect-ratio: 9/16;
      margin: 0 auto;
    }

    .hero-video-frame {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
      background: var(--dark);
      animation: floatImg 8s ease-in-out infinite;
    }

    .hero-video-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    /* =========================================================
       CUSTOM VIDEO PLAYER (Kuester-Player, abgekuerzt 'kup')
       Eigene HTML5-Video-Elemente mit HLS-Streaming via hls.js,
       komplett eigenes Brand-Design der Steuerelemente.
       ========================================================= */
    .kup {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #000 !important;
      overflow: hidden;
    }

    /* Tap-Highlight-Killer fuer eigene Klick-Elemente (Bunny iframe handlet
       sich selbst, hier nur unsere Container/Phone-Cards/Hover-Bereiche). */
    .reels-phone,
    .reels-phone *,
    .reels-phone-frame,
    .reels-phone-screen,
    .funnel-story-image,
    .funnel-story-image *,
    .hero-video-frame,
    .hero-video-stack,
    .kup {
      -webkit-tap-highlight-color: transparent !important;
      -webkit-touch-callout: none !important;
    }

    /* .kup als Bunny-Iframe-Wrapper (Hero-Video) */
    .kup > iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #000 !important;
    }


    
    

    /* Rotation kombiniert mit Center-Translate, damit der Ring beim Drehen
       in der Mitte bleibt (transform-Origin sonst falsch durch translate). */
    

    /* Haupt-Button-Kreis: Gold-Gradient mit starkem Multi-Layer-Glow.
       Eigene Animation kombiniert Scale-Breathing + Glow-Wachstum.
       Plus: ::before + ::after werden als Sonar-Wellen genutzt die nach
       aussen pulsieren und faden. */
    

    /* Sonar-Wellen die vom Button nach aussen pulsieren (2 versetzte Rings) */
    
    
    

    
    
    

    /* Kombi-Animation: gleichzeitig Scale-Breathing (1.0 -> 1.06)
       UND Glow-Multi-Layer-Wachstum -> sehr lebendig */
    

    /* ====== Top-Right 'Ton an'-Button (nur Hero Desktop, autoplay muted) ====== */
    /* Vollwertiger Gold-Pill mit Pfeil-Hinweis-Pulse, sehr prominent. */
    
    
    
    
    

    /* Starke Aufmerksamkeits-Animation: Skaliert leicht + Glow waechst */
    

    /* ====== Unteres Control-Bar (Play/Progress/Mute/Fullscreen) ====== */
    
    

    /* Round Buttons im Control-Bar */
    
    
    
    

    /* Play/Pause-Button ist die wichtigste Aktion -> deutlich groesser
       und mit Gold-Akzent damit er sofort ins Auge faellt */
    
    
    

    /* Progress-Bar */
    
    
    
    
    
    
    

    

    /* Floating data badges */
    .hero-data-badge {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 18px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      z-index: 4;
      animation: floatBadge 6s ease-in-out infinite;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .hero-data-badge-label {
      color: var(--text-mute);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 4px;
      font-weight: 600;
    }

    .hero-data-badge-value {
      color: var(--gold-dark);
      font-size: 18px;
      font-weight: 600;
    }

    .hero-data-badge.green .hero-data-badge-value { color: var(--green-dark); }

    .hero-data-badge.bd1 { top: 6%; left: -55px; animation-delay: 0s; }
    .hero-data-badge.bd2 { top: 42%; right: -55px; animation-delay: 2s; }
    .hero-data-badge.bd3 { bottom: 6%; left: -35px; animation-delay: 4s; }

    /* Rotator: blendet sanft zwischen Werten um */
    .hero-data-badge-rotator {
      position: relative;
    }

    .hero-data-badge-rotator .hero-data-badge-value {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transform: translateX(-24px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    .hero-data-badge-rotator .hero-data-badge-value.active {
      opacity: 1;
      transform: translateX(0);
    }

    .hero-data-badge-sizer {
      visibility: hidden;
      display: block;
      white-space: nowrap;
      font-size: 18px;
      font-weight: 600;
      line-height: inherit;
    }

    @keyframes floatBadge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    /* ====== Buttons ====== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 18px 28px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      border: none;
      transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      letter-spacing: -0.01em;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--gold);
      color: var(--dark);
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--dark);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
      border-radius: 999px;
    }

    .btn-primary:hover::before { transform: scaleX(1); }
    .btn-primary:hover { color: white; }

    .btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
    .btn-primary svg { transition: transform 0.3s ease; }
    .btn-primary:hover svg { transform: translateX(4px) rotate(-45deg); }

    .btn-gold {
      background: var(--gold);
      color: var(--dark);
    }

    .btn-gold:hover {
      background: var(--gold-dark);
      color: white;
      transform: translateY(-1px);
    }

    .btn-green {
      background: var(--green);
      color: white;
    }

    .btn-green:hover {
      background: var(--green-dark);
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--dark);
      border: 1.5px solid var(--border-strong);
    }

    .btn-ghost:hover {
      background: var(--surface);
      border-color: var(--green);
      color: var(--green-dark);
    }

    /* ====== Marquee ====== */
    .marquee {
      /* v2.62: padding reduziert (28 -> 18) damit Hero + Marquee zusammen
         auf 1366x768 in den Viewport passen. Gesamthoehe ~58px statt 78px. */
      padding: 14px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      background: var(--bg-soft);
    }
    /* v2.64: Doppelreihe - zweite Marquee direkt unter der ersten,
       gegenlaeufige Animation. Mit kleinerer Gap dazwischen damit beide
       als visuelle Einheit wirken (nur 1 Border zwischen beiden). */
    .marquee + .marquee {
      border-top: 0;
    }

    .marquee-track {
      display: flex;
      gap: 60px;
      /* v2.63: 80s statt 40s weil Track jetzt 4 Sets statt 2 hat
         (doppelte Distanz bei translateX(-50%)) - gleicher visueller Speed. */
      animation: marquee 80s linear infinite;
      white-space: nowrap;
    }

    /* Gegenlaeufige Animation fuer die zweite Reihe (rechts -> links wird
       links -> rechts). Startwert ist -50% damit Track schon links rausragt,
       lauft dann zu 0 (Ende = wieder vom Original-Position). */
    .marquee-track-reverse {
      animation-name: marquee-reverse;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @keyframes marquee-reverse {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }

    .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      color: var(--text-soft);
      font-weight: 500;
    }

    .marquee-item svg { color: var(--green); }

    /* Zweite Reihe: Gold-Akzent statt gruenes Haekchen, leicht heller */
    .marquee-secondary .marquee-item {
      color: var(--text-mute);
      font-size: 15px;
    }
    .marquee-secondary .marquee-item svg { color: var(--gold); }

    /* ====== Sections ====== */
    section { position: relative; }
    

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--green-dark);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 24px;
      font-weight: 600;
    }

    .section-label::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--green);
    }

    .section-label.gold {
      color: var(--gold-dark);
    }

    .section-label.gold::before {
      background: var(--gold);
    }

    .section-title {
      font-size: clamp(30px, 4.2vw, 54px);
      margin-bottom: 24px;
      max-width: 900px;
      line-height: 1.1;
      text-wrap: balance;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }

    .section-title em { color: var(--green-dark); }

    .section-lead {
      font-size: 18px;
      color: var(--text-soft);
      max-width: 560px;
      line-height: 1.5;
    }

    /* ====== Animations ====== */
    .anim {
      opacity: 0;
      transform: translateY(60px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim.in { opacity: 1; transform: translateY(0); }

    .anim-left {
      opacity: 0;
      transform: translateX(-80px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-left.in { opacity: 1; transform: translateX(0); }

    .anim-right {
      opacity: 0;
      transform: translateX(80px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-right.in { opacity: 1; transform: translateX(0); }

    .anim-scale {
      opacity: 0;
      transform: scale(0.92);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-scale.in { opacity: 1; transform: scale(1); }

    .anim-blur {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(30px);
      transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
    }

    .anim-blur.in { opacity: 1; filter: blur(0); transform: translateY(0); }

    /* =============================================================
       SCROLL-DRIVEN 3D ANIMATIONS - v2.0 WOW MODE
       Elements rotate, flip and parallax based on viewport entry.
       Performance: only fires once via IntersectionObserver.
       ============================================================= */

    /* 3D-Flip Entry: Element startet 60deg gekippt, klappt beim Eintreten flach */
    .scroll-flip {
      opacity: 0;
      transform: perspective(1200px) rotateX(45deg) translateY(60px) scale(0.92);
      transform-origin: center bottom;
      transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .scroll-flip.in {
      opacity: 1;
      transform: perspective(1200px) rotateX(0) translateY(0) scale(1);
    }

    /* 3D-Rotate Side Entry: kommt aus der Tiefe gedreht rein */
    .scroll-rotate-left {
      opacity: 0;
      transform: perspective(1200px) rotateY(-25deg) translateX(-80px);
      transform-origin: left center;
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .scroll-rotate-left.in {
      opacity: 1;
      transform: perspective(1200px) rotateY(0) translateX(0);
    }

    .scroll-rotate-right {
      opacity: 0;
      transform: perspective(1200px) rotateY(25deg) translateX(80px);
      transform-origin: right center;
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .scroll-rotate-right.in {
      opacity: 1;
      transform: perspective(1200px) rotateY(0) translateX(0);
    }

    /* Soft Pop: Bauschig reinkommen mit Spring */
    .scroll-pop {
      opacity: 0;
      transform: scale(0.6) translateY(50px);
      transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
                  transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .scroll-pop.in {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* Hero-Scroll-Out: Headline schrumpft + fadet als User scrollt
       Wird per JS getrieben (data-scroll-out) */
    [data-scroll-out] {
      will-change: transform, opacity;
    }

    /* Parallax-Container: Inhalt bewegt sich langsamer als der Scroll */
    [data-parallax] {
      will-change: transform;
    }

    .word-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; }
    .word-reveal span { display: inline-block; transform: translateY(110%); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
    .word-reveal.in span { transform: translateY(0); }

    /* Word-Reveal entfernt - hatte einen kritischen Bug der Woerter wie
       "Sebastian" mitten durch brach. */

    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }
    .delay-4 { transition-delay: 0.4s; }
    .delay-5 { transition-delay: 0.5s; }
    .delay-6 { transition-delay: 0.6s; }

    /* ====== Service Categories (4 columns) ====== */
    

    

    

    

    

    /* ====== Founders / About Section ====== */
    .founders-section {
      padding: 120px 0;
    }

    .founders-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-bottom: 80px;
    }

    .founders-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      max-width: 680px;
      margin: 0 auto;
    }

    .founder-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      overflow: hidden;
      transition: all 0.5s ease;
    }

    /* 3D-Tilt: transform-style preserve-3d und will-change.
       Der Tilt wird per JS gesetzt, Hover-Box-Shadow per CSS. */
    .founder-card {
      transform-style: preserve-3d;
      will-change: transform;
    }

    .founder-card:hover {
      box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(198, 171, 124, 0.4),
        0 0 80px rgba(198, 171, 124, 0.15);
      border-color: var(--gold);
    }

    .founder-card .founder-img,
    .founder-card .founder-info {
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .founder-card:hover .founder-img { transform: translateZ(40px); }
    .founder-card:hover .founder-info { transform: translateZ(25px); }

    /* Container mit PADDING-TOP damit der Kopf nicht an der oberen Container-Kante
       klebt (die Original-Photos haben den Kopf direkt am oberen Bildrand).
       Background matched die helle Bild-Background-Farbe, sodass der Uebergang
       Container-zu-Bild nahtlos ist und es genug Luft ueber dem Kopf gibt. */
    .founder-img {
      aspect-ratio: 1/1;
      overflow: hidden;
      background: #F5F5F5;
      padding: 32px 16px 0;
      box-sizing: border-box;
    }

    /* object-fit contain garantiert KEIN Anschnitt, das ganze Bild ist sichtbar.
       Das Padding oben gibt zusaetzliche Luft ueber dem Kopf. */
    .founder-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center top;
      display: block;
      transition: transform 1.5s ease;
    }

    .founder-card:hover .founder-img img { transform: scale(1.04); }

    .founder-info {
      padding: 28px 28px 32px;
    }

    .founder-role {
      font-size: 12px;
      color: var(--green-dark);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .founder-name {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--dark);
      letter-spacing: -0.025em;
    }

    .founder-desc {
      font-size: 15px;
      color: var(--text-soft);
      line-height: 1.6;
    }

    /* ====== Process Section ====== */
    .process-section {
      padding: 120px 0;
      background: var(--bg-soft);
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 64px;
    }

    .process-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 36px 32px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    .process-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s ease;
    }

    .process-card:hover::before { transform: scaleX(1); }
    .process-card:hover { transform: translateY(-6px); border-color: var(--gold); }

    .process-number {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      color: var(--gold-dark);
      letter-spacing: 0.2em;
      margin-bottom: 16px;
      font-weight: 500;
      font-style: normal;
    }

    .process-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--gold-soft);
      color: var(--gold-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      transition: all 0.4s ease;
    }

    .process-card:hover .process-icon {
      background: var(--gold);
      color: var(--dark);
      transform: rotate(-5deg);
    }

    .process-card h3 {
      font-size: 22px;
      margin-bottom: 12px;
      font-weight: 500;
    }

    .process-card p {
      font-size: 15px;
      color: var(--text-soft);
      line-height: 1.6;
    }

    /* ====== Bewertung Section ====== */
    .bewertung-section {
      padding: 120px 0;
    }

    .bewertung-header {
      text-align: center;
      margin-bottom: 64px;
    }

    .bewertung-wrapper {
      max-width: 980px;
      margin: 0 auto;
    }

    .bewertung-tool {
      /* Kein Border, kein Shadow, kein Background - das FlussAI-Tool bringt eigenen. */
      padding: 0;
      margin-bottom: 48px;
      /* min-height reserviert Platz, damit es beim Lazy-Load des FlussAI-Tools
         keinen Layout-Shift gibt (verhindert CLS). */
      min-height: 460px;
    }
    @media (max-width: 500px) {
      .bewertung-tool { min-height: 560px; }
    }

    .bewertung-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 64px;
    }

    .bewertung-feature {
      text-align: center;
    }

    .bewertung-feature-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--gold-soft);
      color: var(--gold-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    .bewertung-feature h4 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
    }

    .bewertung-feature p {
      font-size: 15px;
      color: var(--text-soft);
      line-height: 1.6;
    }

    /* ====================================== */
    /* ====== MARKETING SECTION (FULL-BLEED) */
    /* ====================================== */
    .marketing-section {
      padding: 0;
      background: var(--bg);
      position: relative;
      /* Wichtig: erlaubt dem dunklen Block sich ueber volle Viewport-Breite auszudehnen */
      overflow-x: visible;
    }

    

    

    

    

    /* Dark Marketing Block - FULL BLEED (bricht aus allen Eltern-Containern aus)
       Grosses Padding (240/260px) damit die Multi-Stop-Gradient-Uebergaenge
       KEINEN Content verdecken und der visuelle Boundary unsichtbar wirkt. */
    .marketing-dark {
      /* LIGHT MODE: warmes Off-White als Hintergrund. Padding reduziert auf
         100/100 (war 240/260 fuer alte Gradient-Uebergaenge die jetzt weg sind).
         WICHTIG: overflow visible (statt hidden) damit position: sticky in
         der Reels-Coverflow-Section funktioniert. Horizontal-Clipping
         passiert auf body-Level (siehe html, body overflow-x: clip). */
      background: var(--bg-warm);
      color: var(--text);
      padding: 100px 0 100px;
      position: relative;
      overflow: visible;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      max-width: 100vw;
    }

    .marketing-dark::before,
    .marketing-dark::after {
      display: none;
    }

    /* Glows: im Light-Mode dezenter, sonst zu krass auf Beige */
    .marketing-dark-glow {
      position: absolute;
      width: 800px;
      height: 800px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--gold-glow) 0%, transparent 60%);
      filter: blur(80px);
      top: 10%;
      right: -300px;
      pointer-events: none;
      opacity: 0.5;
    }

    .marketing-dark-glow-2 {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--green-glow) 0%, transparent 60%);
      filter: blur(80px);
      bottom: 10%;
      left: -200px;
      pointer-events: none;
      opacity: 0.45;
    }

    .marketing-dark-content {
      position: relative;
      z-index: 2;
    }

    /* ============================================================
       LIGHT-THEME OVERRIDES fuer den Marketing-Block
       ============================================================
       Konvertiert alle "weiss auf schwarz" Regeln innerhalb von
       .marketing-dark in "dunkel auf hell". Keine Aenderung an
       Struktur, Animationen oder Layout. Nur Farben/Borders/Glows.
       Gold + Green Brand-Akzente bleiben erhalten. */

    /* Headlines + grosse Werte: schwarz */
    .marketing-dark .story-headline,
    .marketing-dark .homestaging-header h2,
    .marketing-dark .funnel-flow-header h2,
    .marketing-dark .reels-showcase-header h2,
    .marketing-dark .platform-bar-title h3,
    .marketing-dark .funnel-success h3,
    .marketing-dark .activity-title,
    .marketing-dark .reach-value,
    .marketing-dark .platform-cell-value,
    .marketing-dark .reach-stage-header h2,
    .marketing-dark .reach-stat-value,
    .marketing-dark .dashboard-text h2,
    .marketing-dark .marketing-feature-content h4 {
      color: var(--dark) !important;
    }

    /* Body-Text + Beschreibungen: weiches Dunkelgrau */
    .marketing-dark .homestaging-header p,
    .marketing-dark .funnel-flow-header p,
    .marketing-dark .reels-showcase-header p,
    .marketing-dark .platform-bar-title p,
    .marketing-dark .funnel-success p,
    .marketing-dark .funnel-story-text p,
    .marketing-dark .story-footnote p,
    .marketing-dark .platform-fact-text,
    .marketing-dark .platform-cell-name,
    .marketing-dark .reach-label,
    .marketing-dark .reach-stage-header p,
    .marketing-dark .reach-stat-label,
    .marketing-dark .dashboard-text p,
    .marketing-dark .marketing-feature-content p {
      color: var(--text-soft) !important;
    }

    /* Story Lead-Paragraph: noch dunkler/kraftvoller weil es ein Statement ist */
    .marketing-dark .funnel-story-text .funnel-story-lead {
      color: var(--dark) !important;
    }

    /* Quote-Decoration auf Light-Theme: gleiche dezente Gold-Opacity, passt schon */
    .marketing-dark .funnel-story-text::before {
      color: rgba(198, 171, 124, 0.28);
    }

    /* Bridge-Paragraph "So entsteht aus einer Social-Media-Werbung..." muss
       auf hellem BG dunkel sein (Default ist var(--bg) = weiss aus dem
       Dark-Theme-Heritage). */
    .marketing-dark .funnel-bridge {
      color: var(--dark) !important;
    }
    .marketing-dark .funnel-bridge em {
      color: var(--gold) !important;
    }

    .marketing-dark .platform-cell-desc {
      color: var(--text-mute) !important;
    }

    /* Headline-em-Tags bleiben im Brand-Gold #C6AB7C (var(--gold)) -
       Brand-Farbe ist fix und darf nicht durch "besseren Kontrast" verfaelscht werden. */
    .marketing-dark .story-headline em,
    .marketing-dark .homestaging-header h2 em,
    .marketing-dark .funnel-flow-header h2 em,
    .marketing-dark .reels-showcase-header h2 em,
    .marketing-dark .reach-stage-header h2 em,
    .marketing-dark .dashboard-text h2 em {
      color: var(--gold);
    }

    /* Reach-Stat-Cards (Instagram/Facebook/Kuester): waren transparent-weiss
       auf dunklem BG. Jetzt: echte weisse Karten mit dezenter Border. */
    .marketing-dark .reach-stat-big {
      background: white;
      border-color: rgba(15, 15, 15, 0.08);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    }
    .marketing-dark .reach-stat-big:hover {
      border-color: rgba(15, 15, 15, 0.15);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }

    /* Marketing-Feature-List Borders zwischen den Features */
    .marketing-dark .marketing-feature-item {
      border-bottom: 1px solid rgba(15, 15, 15, 0.08);
    }
    .marketing-dark .marketing-feature-item:last-child {
      border-bottom: none;
    }

    /* Funnel-Track: helle Background-Linie + Beige/Gold-Trail */
    .marketing-dark .funnel-track::before {
      background: rgba(15, 15, 15, 0.10);
    }
    .marketing-dark .funnel-track::after {
      background: linear-gradient(90deg, rgba(198, 171, 124, 0.7) 0%, var(--gold) 100%);
      box-shadow: 0 0 12px rgba(198, 171, 124, 0.45);
    }
    @media (max-width: 900px) {
      .marketing-dark .funnel-track::after {
        background: linear-gradient(180deg, rgba(198, 171, 124, 0.7) 0%, var(--gold) 100%);
      }
    }

    /* Funnel-Step Circles: weiss bleiben, aber stabile Borders + Shadows */
    .marketing-dark .funnel-step-circle {
      background: white;
      border-color: rgba(198, 171, 124, 0.55);
      color: rgba(15, 15, 15, 0.4);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
    .marketing-dark .funnel-step.active .funnel-step-circle {
      background: white;
      border-color: var(--gold);
      color: var(--dark);
      box-shadow: 0 0 0 6px rgba(198, 171, 124, 0.18),
                  0 0 40px rgba(58, 147, 101, 0.35);
    }
    .marketing-dark .funnel-step-label {
      color: rgba(15, 15, 15, 0.55);
    }
    .marketing-dark .funnel-step.active .funnel-step-label {
      color: var(--dark);
    }

    /* Funnel-Comet (rollende Kugel): schwarz mit Gold-Ring drum.
       Schwarz hebt sich klar von der gruenen Linie und den weissen Step-Circles ab. */
    .marketing-dark .funnel-comet {
      background: var(--dark);
      border-color: var(--gold);
      box-shadow:
        0 0 0 5px rgba(198, 171, 124, 0.25),
        0 0 20px 4px rgba(15, 15, 15, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.25);
    }

    /* Funnel-Success-Karte: weisses Card mit feinem Gold-Border */
    .marketing-dark .funnel-success {
      background: white;
      border: 1px solid rgba(198, 171, 124, 0.45);
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.12),
        0 0 60px rgba(58, 147, 101, 0.15);
    }

    /* Platform-Fact-Pill: heller Gold-Tint */
    .marketing-dark .platform-fact {
      background: rgba(198, 171, 124, 0.12);
      border-color: rgba(198, 171, 124, 0.4);
    }

    /* Platform-Cells: weisse Cards, dezenter Border */
    .marketing-dark .platform-cell {
      background: white;
      border-color: rgba(15, 15, 15, 0.08);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    }
    .marketing-dark .platform-cell:hover {
      background: white;
      border-color: var(--gold);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }

    /* Story-Footnote Divider */
    .marketing-dark .story-footnote-divider {
      background: rgba(198, 171, 124, 0.45);
    }

    /* (v2.59) .funnel-story-image hat keinen eigenen Frame mehr.
       Die iPhone-Huelle macht jetzt .reels-phone-frame mit Aluminium-Bezel
       innendrin (gleicher Look wie die 4 Reels-Phones). */

    /* Reels Phone-Frames im Coverflow: KEIN box-shadow mehr,
       der Phone-Bezel-Look wird durch .reels-phone-front mit Aluminium-Gradient gemacht. */
    .marketing-dark .reels-showcase-frame {
      box-shadow: none;
    }
    .marketing-dark .reels-showcase-frame:hover {
      box-shadow: none;
    }

    /* Homestaging Mini-Video: weichere Shadow */
    .marketing-dark .homestaging-video {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    }

    /* Browser-Window / Activity / Reach / Donut Cards: sind bereits weiss
       (waren designed fuer dunklen BG via visual contrast). Hier reduzieren
       wir nur die massiven Drop-Shadows damit sie nicht zu schwer wirken. */
    .marketing-dark .browser-window,
    .marketing-dark .activity-card,
    .marketing-dark .reach-card,
    .marketing-dark .donut-card {
      box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(15, 15, 15, 0.04);
    }

    /* Storytelling Section */
    

    

    

    

    /* Dashboard Hero Block */
    .dashboard-showcase {
      max-width: 1440px;
      margin: 0 auto 100px;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 80px;
      align-items: center;
    }

    .dashboard-text .section-label {
      color: var(--gold);
    }

    .dashboard-text .section-label::before {
      background: var(--gold);
    }

    .dashboard-text h2 {
      font-size: clamp(32px, 4.5vw, 56px);
      color: var(--bg);
      margin-bottom: 24px;
      line-height: 1.1;
    }

    .dashboard-text h2 em {
      color: var(--gold);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .dashboard-text p {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .marketing-feature-list {
      list-style: none;
    }

    .marketing-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 22px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .marketing-feature-item:last-child { border-bottom: none; }

    .marketing-feature-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 12px;
      background: rgba(198, 171, 124, 0.15);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .marketing-feature-content h4 {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 6px;
      color: var(--bg);
    }

    .marketing-feature-content p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      margin-bottom: 0;
    }

    /* Dashboard Stage */
    .dashboard-stage {
      position: relative;
      height: 640px;
    }

    .browser-window {
      position: absolute;
      top: 40px;
      left: 0;
      width: 78%;
      background: var(--bg);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
      z-index: 1;
      opacity: 0;
      transform: translateY(60px) scale(0.95);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .browser-window.revealed {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation: floatBrowser 8s ease-in-out infinite;
      animation-delay: 1s;
    }

    @keyframes floatBrowser {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .browser-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 14px 18px;
      background: var(--bg-soft);
      border-bottom: 1px solid var(--border);
    }

    .browser-dot { width: 10px; height: 10px; border-radius: 50%; }
    .browser-dot.red { background: #FF5F57; }
    .browser-dot.yellow { background: #FEBC2E; }
    .browser-dot.green { background: #28C840; }

    .browser-url {
      margin-left: 12px;
      flex: 1;
      background: var(--surface);
      border-radius: 6px;
      padding: 6px 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-mute);
    }

    .browser-content { padding: 20px; background: var(--surface); }

    .post-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }

    .post-row:last-child { border-bottom: none; }

    .post-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      background: var(--bg-warm);
    }

    .post-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .post-text { flex: 1; min-width: 0; }
    .post-text-line {
      height: 8px;
      background: var(--bg-warm);
      border-radius: 4px;
      margin-bottom: 6px;
    }
    .post-text-line.short { width: 70%; }
    .post-text-line.long { width: 95%; }

    .post-text-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--dark);
      line-height: 1.35;
      letter-spacing: -0.005em;
    }

    .post-text-label .platform {
      font-weight: 600;
    }

    .post-text-label .platform.insta { color: #D62976; }
    .post-text-label .platform.fb { color: #1877F2; }
    .post-text-label .platform.scout { color: var(--gold-dark); }

    .post-text-time {
      font-size: 10px;
      color: var(--text-mute);
      font-family: 'JetBrains Mono', monospace;
      margin-top: 3px;
      letter-spacing: 0.02em;
    }

    /* Activity Card */
    .activity-card {
      position: absolute;
      top: 80px;
      right: 0;
      width: 56%;
      background: var(--surface);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      z-index: 3;
      opacity: 0;
      transform: translateX(60px) translateY(-30px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: 0.3s;
    }

    .activity-card.revealed {
      opacity: 1;
      transform: translateX(0) translateY(0);
      animation: floatCard 9s ease-in-out infinite;
      animation-delay: 2s;
    }

    @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-14px); }
    }

    .activity-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--dark);
    }

    .activity-chart {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 90px;
      margin-bottom: 8px;
    }

    .chart-bar {
      flex: 1;
      height: 100%;
      background: var(--green-light);
      border-radius: 6px 6px 0 0;
      transform-origin: bottom;
      transform: scaleY(0);
      transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .chart-bar.active {
      background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
      box-shadow: 0 -8px 24px rgba(58, 147, 101, 0.4);
    }

    .chart-bar.grown { transform: scaleY(1); }

    .chart-labels {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

    .chart-label {
      flex: 1;
      text-align: center;
      font-size: 10px;
      color: var(--text-mute);
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .chart-label.today {
      color: var(--green-dark);
      font-weight: 700;
    }

    /* Reach Card */
    .reach-card {
      position: absolute;
      bottom: 60px;
      right: 30px;
      width: 56%;
      background: var(--surface);
      border-radius: 16px;
      padding: 18px 20px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      z-index: 4;
      opacity: 0;
      transform: translateX(60px) translateY(30px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: 0.6s;
    }

    .reach-card.revealed {
      opacity: 1;
      transform: translateX(0) translateY(0);
      animation: floatCard 7s ease-in-out infinite;
      animation-delay: 2.5s;
    }

    .reach-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
    }

    .reach-row + .reach-row { border-top: 1px solid var(--border); }

    .reach-label {
      font-size: 12px;
      color: var(--text-soft);
      font-weight: 500;
    }

    .reach-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      font-weight: 600;
      color: var(--dark);
    }

    .reach-value-sub {
      font-size: 11px;
      color: var(--green-dark);
      margin-top: 2px;
      font-weight: 600;
    }

    /* Donut Card */
    .donut-card {
      position: absolute;
      bottom: 220px;
      right: 0;
      width: 56%;
      background: var(--surface);
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 14px;
      opacity: 0;
      transform: translateY(40px) scale(0.9);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: 0.45s;
    }

    .donut-card.revealed {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation: floatCard 10s ease-in-out infinite;
      animation-delay: 2.2s;
    }

    .donut-svg { width: 70px; height: 70px; flex-shrink: 0; }
    .donut-bg { fill: none; stroke: var(--bg-warm); stroke-width: 8; }
    .donut-fill {
      fill: none;
      stroke: var(--green);
      stroke-width: 8;
      stroke-linecap: round;
      stroke-dasharray: 220;
      stroke-dashoffset: 220;
      transform: rotate(-90deg);
      transform-origin: center;
      transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .donut-card.revealed .donut-fill {
      stroke-dashoffset: 81;
    }

    
    
    .donut-label-line.short { width: 60%; }

    /* Floating Social Icons mit Reveal-Animation */
    .social-icon-float {
      position: absolute;
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
      z-index: 5;
      opacity: 0;
      transform: scale(0.3) rotate(-180deg);
      transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .social-icon-float.revealed {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      animation: floatIcon 6s ease-in-out infinite;
    }

    .social-icon-float svg { width: 28px; height: 28px; color: white; }

    .social-icon-insta {
      top: 50px;
      right: -10px;
      background: linear-gradient(135deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
      animation-delay: 0s;
    }

    .social-icon-facebook {
      bottom: 280px;
      left: 30px;
      background: #1877F2;
      animation-delay: 1.5s;
    }

    @keyframes floatIcon {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(-3deg); }
    }

    /* Vorher/Nachher Slider */
    .homestaging-section {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px 100px;
    }

    .homestaging-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: end;
      margin-bottom: 64px;
    }

    .homestaging-header h2 {
      font-size: clamp(32px, 4.5vw, 56px);
      color: var(--bg);
      line-height: 1.1;
    }

    .homestaging-header h2 em {
      color: var(--gold);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .homestaging-header p {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
    }

    /* Row layout: Mini-Video links, Compare-Slider rechts */
    /* Homestaging-Row mit dramatischen Scroll- und Hover-Effekten */
    .homestaging-row {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 32px;
      align-items: center;
      perspective: 1800px;
      position: relative;
    }

    /* Mini-Video: kommt aus links gekippt rein (Book-Opening Effekt) */
    .homestaging-video {
      position: relative;
      width: 100%;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      background: var(--dark);
      transform: perspective(1800px) rotateY(-35deg) translateX(-60px);
      opacity: 0;
      transform-origin: right center;
      transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
      animation: floatMiniVideo 7s ease-in-out infinite;
    }

    .homestaging-row.book-open .homestaging-video {
      transform: perspective(1800px) rotateY(0) translateX(0);
      opacity: 1;
    }

    @keyframes floatMiniVideo {
      0%, 100% { animation-timing-function: ease-in-out; }
      50% { animation-timing-function: ease-in-out; }
    }

    .homestaging-video img {
      display: block;
      width: 100%;
      height: auto;
    }

    .homestaging-video-label {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(10px);
      color: white;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      pointer-events: none;
    }

    .homestaging-video-label::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 8px var(--gold);
      animation: pulse 1.5s ease-in-out infinite;
    }

    /* Compare-Slider: kommt aus rechts gekippt rein (Buch klappt sich auf)
       und hat eine animierte goldene Comet-Border die endlos um den Rand rotiert. */
    .compare-slider-wrap {
      position: relative;
      padding: 3px;
      border-radius: 27px;
      transform: perspective(1800px) rotateY(35deg) translateX(60px);
      opacity: 0;
      transform-origin: left center;
      transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .homestaging-row.book-open .compare-slider-wrap {
      transform: perspective(1800px) rotateY(0) translateX(0);
      opacity: 1;
    }

    /* ============================================================
       SOCIAL-MEDIA-FUNNEL FLOW - fluss.ai inspirierte Visualisierung
       6 Steps mit reisendem Gold-Dot, am Ende Success-Card
       ============================================================ */
    .funnel-flow {
      max-width: 1280px;
      margin: 100px auto 120px;
      padding: 0 32px;
    }

    .funnel-flow-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }

    .funnel-flow-header h2 {
      /* Groesser und kraftvoller damit es im Verhaeltnis zum Video + Story-Text
         richtig anchorfaehig wirkt. Vorher zu duenn. */
      font-size: clamp(36px, 5.5vw, 64px);
      color: var(--bg);
      margin: 16px 0 0;
      line-height: 1.05;
      font-weight: 600;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    .funnel-flow-header h2 em {
      color: var(--gold);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
    }

    .funnel-flow-header p {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
    }

    /* Bridge-Paragraph: Uebergangssatz zwischen Story-Block und Funnel-Grafik.
       Zentriert, dezenter als die Story-Paragraphen, mit Gold-em fuer Akzent. */
    .funnel-bridge {
      max-width: 1100px;
      margin: 64px auto 48px;
      text-align: center;
      font-size: 19px;
      line-height: 1.5;
      color: var(--bg);
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    /* "In acht Schritten" als Block zusammenhalten - verhindert ungluecklichen
       Zeilenumbruch wo "In" allein in einer Zeile steht. */
    .funnel-bridge .nowrap {
      white-space: nowrap;
    }
    .funnel-bridge em {
      color: var(--gold);
      font-style: normal;
      font-weight: 700;
    }
    @media (max-width: 900px) {
      .funnel-bridge {
        font-size: 16px;
        margin: 48px auto 32px;
        padding: 0 16px;
      }
    }

    /* Stage haelt Track und Success-Overlay zusammen */
    .funnel-stage {
      position: relative;
      min-height: 200px;
    }

    .funnel-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0;
      align-items: start;
      padding: 0 24px;
      transition: opacity 0.6s ease, filter 0.6s ease;
    }

    /* Wenn Success angezeigt wird, dimmt die Track ab und wird leicht unscharf */
    .funnel-stage.completed .funnel-track {
      opacity: 0.25;
      filter: blur(2px);
    }

    /* Verbindungslinie zwischen den Steps - im Hintergrund grau, im Fortschritt gold */
    .funnel-track::before {
      content: '';
      position: absolute;
      top: 40px;
      left: 8%;
      right: 8%;
      height: 2px;
      background: rgba(255, 255, 255, 0.1);
      z-index: 0;
    }

    .funnel-track::after {
      content: '';
      position: absolute;
      top: 40px;
      left: 8%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
      z-index: 1;
    }

    /* Animation 20s gesamt mit Pausen bei jedem der 8 Steps + Travel dazwischen. */
    .funnel-track.activated::after {
      animation: funnelLineGrow 20s linear forwards;
    }

    /* Linie waechst gestaffelt mit dem Comet: ~1s Pause an jedem der 8 Steps,
       dann ~1.7s sanftes Wachsen zum naechsten Step. Total 20s.
       Step-Positionen: 8%, 20%, 32%, 44%, 56%, 68%, 80%, 92%
       Width-Werte (relativ zur Track-Breite, Tail von 8% startend):
       0%, 12%, 24%, 36%, 48%, 60%, 72%, 84% */
    @keyframes funnelLineGrow {
      0%      { width: 0; }
      3%      { width: 0; }     /* Step 1, kein Tail bisher */
      8%      { width: 0; }     /* Pause an Step 1 */
      16.5%   { width: 12%; }   /* Tail bis Step 2 */
      21.5%   { width: 12%; }   /* Pause an Step 2 */
      30%     { width: 24%; }   /* Tail bis Step 3 */
      35%     { width: 24%; }   /* Pause an Step 3 */
      43.5%   { width: 36%; }   /* Tail bis Step 4 */
      48.5%   { width: 36%; }   /* Pause an Step 4 */
      57%     { width: 48%; }   /* Tail bis Step 5 */
      62%     { width: 48%; }   /* Pause an Step 5 */
      70.5%   { width: 60%; }   /* Tail bis Step 6 */
      75.5%   { width: 60%; }   /* Pause an Step 6 */
      84%     { width: 72%; }   /* Tail bis Step 7 */
      89%     { width: 72%; }   /* Pause an Step 7 */
      97.5%   { width: 84%; }   /* Tail bis Step 8 */
      100%    { width: 84%; }
    }

    /* Leuchtender Comet/Ball der vorne am Strahl mitlaeuft.
       z-index 1 = LIEGT HINTER den Step-Circles (z-index 2),
       d.h. die Kugel verschwindet beim Erreichen eines Steps optisch
       hinter dem Kreis und taucht erst beim Weiterwandern wieder auf. */
    .funnel-comet {
      position: absolute;
      top: 40px;
      left: 8%;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
      border: 2px solid var(--gold);
      transform: translate(-50%, -50%);
      opacity: 0;
      /* z-index 2: ueber der Linie (z-index 1), unter den Step-Circles (z-index 3).
         So liegt der Comet IMMER vor dem Linien-Strich (Linie nicht durch den Punkt sichtbar). */
      z-index: 2;
      box-shadow:
        0 0 16px 4px rgba(255, 255, 255, 0.9),
        0 0 32px 8px rgba(58, 147, 101, 0.45),
        0 0 0 6px rgba(198, 171, 124, 0.15);
      pointer-events: none;
    }

    .funnel-track.activated .funnel-comet {
      animation: cometTravel 20s linear forwards;
    }

    /* Stepped Travel: jeweils ca 1s Pause an jedem Step, dann ca 1.7s
       Gleiten zum naechsten. Insgesamt 20s pro Zyklus.
       Step-Positionen (8 gleichmaessig verteilt): 8%, 20%, 32%, 44%, 56%, 68%, 80%, 92% */
    @keyframes cometTravel {
      0%      { left: 8%;  opacity: 0; }
      3%      { left: 8%;  opacity: 1; }   /* Comet erscheint an Step 1 */
      8%      { left: 8%;  opacity: 1; }   /* Pause an Step 1 (1s) */
      16.5%   { left: 20%; opacity: 1; }   /* Wandert zu Step 2 */
      21.5%   { left: 20%; opacity: 1; }   /* Pause an Step 2 (1s) */
      30%     { left: 32%; opacity: 1; }   /* Wandert zu Step 3 */
      35%     { left: 32%; opacity: 1; }   /* Pause an Step 3 (1s) */
      43.5%   { left: 44%; opacity: 1; }   /* Wandert zu Step 4 */
      48.5%   { left: 44%; opacity: 1; }   /* Pause an Step 4 (1s) */
      57%     { left: 56%; opacity: 1; }   /* Wandert zu Step 5 */
      62%     { left: 56%; opacity: 1; }   /* Pause an Step 5 (1s) */
      70.5%   { left: 68%; opacity: 1; }   /* Wandert zu Step 6 */
      75.5%   { left: 68%; opacity: 1; }   /* Pause an Step 6 (1s) */
      84%     { left: 80%; opacity: 1; }   /* Wandert zu Step 7 */
      89%     { left: 80%; opacity: 1; }   /* Pause an Step 7 (1s) */
      97.5%   { left: 92%; opacity: 1; }   /* Wandert zu Step 8 */
      99%     { left: 92%; opacity: 1; }   /* Kurze Pause an Step 8 */
      100%    { left: 92%; opacity: 0; }   /* Ausblenden */
    }

    .funnel-step {
      position: relative;
      text-align: center;
      /* z-index 3: ueber Comet (z-index 2) -> Comet verschwindet beim Erreichen
         des Steps elegant hinter dem weissen Circle. */
      z-index: 3;
    }

    /* Default-State: WEISS innen, BEIGE/GOLD aussen (dezent) */
    .funnel-step-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92);
      border: 2px solid rgba(198, 171, 124, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      color: rgba(15, 15, 15, 0.35);
      transition:
        background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Active-State: WEISS bleibt, GOLD-Border wird kraeftiger, gruener Glow */
    .funnel-step.active .funnel-step-circle {
      background: rgba(255, 255, 255, 1);
      border-color: var(--gold);
      color: var(--dark);
      transform: scale(1.12);
      box-shadow:
        0 0 0 6px rgba(198, 171, 124, 0.18),
        0 0 50px rgba(58, 147, 101, 0.5);
    }

    .funnel-step-circle svg { width: 32px; height: 32px; }

    .funnel-step-label {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: -0.01em;
      line-height: 1.3;
      max-width: 140px;
      margin: 0 auto;
      transition: color 0.5s ease;
    }

    .funnel-step.active .funnel-step-label {
      color: var(--bg);
    }

    /* Success-Overlay: zentriert ueber der Track, blendet auf wenn Animation fertig.
       Sitzt absolut im Stage-Container, schwebt visuell ueber den gedimmten Steps. */
    .funnel-success {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.85);
      max-width: 480px;
      width: calc(100% - 64px);
      padding: 36px 40px;
      background: rgba(15, 15, 15, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(58, 147, 101, 0.5);
      border-radius: 22px;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(58, 147, 101, 0.25);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 10;
    }

    .funnel-success.visible {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }

    .funnel-success-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      box-shadow:
        0 0 0 8px rgba(58, 147, 101, 0.2),
        0 0 32px rgba(58, 147, 101, 0.5);
      animation: successPulse 2s ease-in-out infinite;
    }

    @keyframes successPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .funnel-success-icon svg { width: 28px; height: 28px; }

    .funnel-success h3 {
      font-size: 20px;
      color: var(--bg);
      font-weight: 600;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    .funnel-success p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      margin: 0;
    }

    /* Story-Block als Setup-Szene zwischen Funnel-Header und Funnel-Animation.
       2-Spalten Layout (Mini-Video links 9:16 + Text rechts mit Lead-Paragraph).
       Margins so dass es elegant unter den Header passt und vor die Bridge-P. */
    .funnel-story {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.6fr);
      gap: 48px;
      align-items: center;
      text-align: left;
    }

    /* Funnel-Story-Image: NUR Container (kein Frame mehr!) -
       die iPhone-Huelle macht jetzt .reels-phone-frame innen drin (v2.59 update).
       Container haelt Width/Margin/Aspect-Ratio fuer das Layout.
       v2.69: max-width von 250px auf 320px erhoeht damit das Paerchen-Video
       praesenter wirkt (passt zur "Wow"-Story). */
    .funnel-story-image {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      line-height: 0;
    }

    /* Solo-Phone (Paerchen-Video): selber Hover-Effekt wie die Grid-Phones -
       Maus drueber -> skaliert auf 1.06 + leichter Lift. Da kein Grid drumherum
       ist, werden keine "anderen" Phones gedimmt - nur das Phone selbst skaliert. */
    .reels-phone-solo {
      cursor: pointer;
    }

    /* Falls in Zukunft wieder ein Bild als funnel-story-image verwendet wird */
    .funnel-story-image > img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      object-position: center 55%;
      border-radius: 28px;
    }

    /* ============================================================
       Story-Text Aufwertung: Eyebrow + Quote-Decoration + Lead +
       Em-Highlights + Divider.
       ============================================================ */
    .funnel-story-text {
      position: relative;
      padding-top: 20px; /* Platz fuer Quote-Decoration */
    }

    /* Grosses dekoratives Anfuehrungszeichen oben links als Quote-Marker */
    .funnel-story-text::before {
      content: '\201C';  /* curly double quotation mark */
      position: absolute;
      top: -28px;
      left: -16px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 120px;
      line-height: 1;
      color: rgba(198, 171, 124, 0.22);
      font-weight: 700;
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }

    /* Eyebrow-Label oben mit Gold-Dash (gleicher Stil wie section-label) */
    
    

    /* Lead-Absatz: deutlich groesser, kraftvoller, headline-artig */
    .funnel-story-text .funnel-story-lead {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      line-height: 1.5;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.92);
      letter-spacing: -0.015em;
      margin-bottom: 0;
      position: relative;
      z-index: 1;
    }

    /* Subtile Trennlinie zwischen Lead und Folge-Absatz */
    .funnel-story-divider {
      width: 48px;
      height: 2px;
      background: var(--gold);
      margin: 28px 0;
      border-radius: 2px;
      position: relative;
      z-index: 1;
    }

    /* Normaler Folge-Absatz */
    .funnel-story-text p {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.75;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }

    .funnel-story-text p:last-child {
      margin-bottom: 0;
    }

    /* Em-Highlights: wichtige Schluesselwoerter in Gold mit subtiler Hervorhebung */
    .funnel-story-text em {
      color: var(--gold);
      font-style: normal;
      font-weight: 600;
    }

    /* ====== Funnel-Track auf Mobile = vertikal mit linker Line + Comet ======
       Statt 6 Spalten nebeneinander wird der Funnel zu einer vertikalen Timeline:
       Circles links untereinander, Labels rechts daneben, Line laeuft vertikal,
       Comet wandert von oben nach unten. Genauso stepped wie Desktop, nur vertikal. */
    @media (max-width: 900px) {
      .funnel-track {
        grid-template-columns: 80px 1fr;
        grid-auto-rows: auto;
        gap: 0;
        padding: 0 8px;
        position: relative;
      }

      /* Die horizontale Background-Line + animierte Linie werden ueberschrieben
         und vertikal positioniert. Sitzen vertikal mittig hinter den Circles. */
      .funnel-track::before {
        top: 40px;
        bottom: 40px;
        left: 48px;
        right: auto;
        width: 2px;
        height: auto;
      }
      .funnel-track::after {
        top: 40px;
        left: 48px;
        right: auto;
        width: 2px;
        height: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 100%);
      }
      /* Vertikale Variante der Linien-Animation: height waechst statt width.
         8 Steps, 20s Total, gleiche Timings wie horizontal. */
      .funnel-track.activated::after {
        animation: funnelLineGrowVertical 20s linear forwards;
      }
      @keyframes funnelLineGrowVertical {
        0%, 3%, 8%      { height: 0; }
        16.5%, 21.5%    { height: 12%; }
        30%, 35%        { height: 24%; }
        43.5%, 48.5%    { height: 36%; }
        57%, 62%        { height: 48%; }
        70.5%, 75.5%    { height: 60%; }
        84%, 89%        { height: 72%; }
        97.5%, 100%     { height: 84%; }
      }

      /* Vertikale Comet-Animation: top waechst statt left */
      .funnel-comet {
        top: 40px;
        left: 48px;
      }
      .funnel-track.activated .funnel-comet {
        animation: cometTravelVertical 20s linear forwards;
      }
      @keyframes cometTravelVertical {
        0%      { top: 0%;  opacity: 0; }
        3%      { top: 0%;  opacity: 1; }
        8%      { top: 0%;  opacity: 1; }
        16.5%   { top: 12%; opacity: 1; }
        21.5%   { top: 12%; opacity: 1; }
        30%     { top: 24%; opacity: 1; }
        35%     { top: 24%; opacity: 1; }
        43.5%   { top: 36%; opacity: 1; }
        48.5%   { top: 36%; opacity: 1; }
        57%     { top: 48%; opacity: 1; }
        62%     { top: 48%; opacity: 1; }
        70.5%   { top: 60%; opacity: 1; }
        75.5%   { top: 60%; opacity: 1; }
        84%     { top: 72%; opacity: 1; }
        89%     { top: 72%; opacity: 1; }
        97.5%   { top: 84%; opacity: 1; }
        99%     { top: 84%; opacity: 1; }
        100%    { top: 84%; opacity: 0; }
      }

      /* Step-Layout: Circle in Spalte 1, Label in Spalte 2 daneben (linksbuendig).
         Jede Row = ein Step. Spacing zwischen Steps. */
      .funnel-step {
        display: contents;
      }
      .funnel-step-circle {
        width: 64px;
        height: 64px;
        margin: 0;
        grid-column: 1;
        align-self: start;
        margin-bottom: 32px;
      }
      .funnel-step:last-child .funnel-step-circle { margin-bottom: 0; }
      .funnel-step-circle svg { width: 24px; height: 24px; }

      .funnel-step-label {
        grid-column: 2;
        text-align: left;
        font-size: 14px;
        max-width: none;
        margin: 0 0 32px 16px;
        align-self: center;
        line-height: 1.4;
      }
      .funnel-step:last-child .funnel-step-label { margin-bottom: 0; }

      .funnel-story {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 48px;
        text-align: center;
      }
      .funnel-story-image {
        max-width: 280px;   /* v2.69: leicht breiter auf Tablets/Mobile */
        margin: 0 auto;
        align-self: auto;
      }
      .funnel-story-text {
        padding-top: 16px;
      }
      .funnel-story-text::before {
        font-size: 80px;
        top: -16px;
        left: -4px;
      }
      .funnel-story-eyebrow {
        margin-bottom: 14px;
        justify-content: center;
      }
      .funnel-story-text .funnel-story-lead {
        font-size: 18px;
        line-height: 1.5;
      }
      .funnel-story-divider {
        margin: 20px auto;
      }
      .funnel-story-text p {
        font-size: 15px;
        line-height: 1.7;
      }
    }

    /* @property erlaubt CSS-Variablen-Animation mit echtem Typ (statt String).
       Damit kann der conic-gradient Angle animiert werden, ohne die Form zu rotieren. */
    @property --comet-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    /* Animierte goldene Comet-Border die endlos um die Slider-Kante laeuft */
    .compare-slider-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: conic-gradient(
        from var(--comet-angle, 0deg),
        transparent 0%,
        transparent 60%,
        rgba(198, 171, 124, 0.7) 78%,
        rgba(255, 220, 160, 1) 88%,
        rgba(198, 171, 124, 0.7) 97%,
        transparent 100%
      );
      animation: cometRotate 5s linear infinite;
      z-index: 0;
    }

    @keyframes cometRotate {
      0%   { --comet-angle: 0deg; }
      100% { --comet-angle: 360deg; }
    }

    .compare-slider {
      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 16/9;
      max-height: 600px;
      border-radius: 24px;
      overflow: hidden;
      box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(198, 171, 124, 0.12);
      cursor: ew-resize;
      user-select: none;
      transition: box-shadow 0.5s ease;
      background: var(--dark);
    }

    .compare-slider:hover {
      box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(198, 171, 124, 0.25);
    }

    .compare-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .compare-after {
      clip-path: inset(0 0 0 50%);
      transition: clip-path 0.1s ease;
    }

    .compare-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: white;
      transform: translateX(-50%);
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
      transition: left 0.1s ease;
    }

    .compare-handle::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 56px;
      height: 56px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      animation: handlePulse 2.5s ease-in-out infinite;
    }

    /* Pulsierende Ring-Animation um den Slider-Griff,
       signalisiert dem User dass er schiebbar ist */
    @keyframes handlePulse {
      0%, 100% {
        box-shadow:
          0 8px 24px rgba(0, 0, 0, 0.3),
          0 0 0 0 rgba(255, 255, 255, 0.6);
      }
      50% {
        box-shadow:
          0 8px 24px rgba(0, 0, 0, 0.3),
          0 0 0 16px rgba(255, 255, 255, 0);
      }
    }

    /* Pfeil-Icon im Handle (statt CSS content, das WordPress zerschiesst) */
    .compare-handle-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: var(--dark);
      pointer-events: none;
    }

    .compare-label {
      position: absolute;
      top: 24px;
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(10px);
      color: white;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border-radius: 999px;
    }

    .compare-label-before { left: 24px; }
    .compare-label-after { right: 24px; background: var(--gold); color: var(--dark); }

    /* Platform Bar - over full width */
    .platform-bar-wrapper {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .platform-bar-title {
      text-align: center;
      margin-bottom: 40px;
    }

    .platform-bar-title h3 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(24px, 3vw, 36px);
      color: var(--bg);
      font-weight: 600;
      letter-spacing: -0.025em;
      margin-bottom: 12px;
    }

    .platform-bar-title p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 15px;
    }

    .platform-fact {
      display: flex;
      align-items: center;
      gap: 18px;
      max-width: 760px;
      margin: 0 auto 32px;
      padding: 18px 24px;
      background: rgba(198, 171, 124, 0.08);
      border: 1px solid rgba(198, 171, 124, 0.25);
      border-radius: 999px;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
    }

    .platform-fact-highlight {
      font-family: 'JetBrains Mono', monospace;
      font-size: 28px;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .platform-fact-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.4;
      max-width: 480px;
    }

    /* Reels Showcase: Beispielvideo am Ende der Marketing-Sektion */
    .reels-showcase {
      max-width: 1280px;
      margin: 80px auto 0;          /* kein bottom margin mehr - marketing-dark padding macht den Abstand */
      padding: 0 32px;
      text-align: center;
    }

    .reels-showcase-header {
      max-width: 680px;
      margin: 0 auto 56px;
    }

    .reels-showcase-header h2 {
      font-size: clamp(32px, 4.5vw, 56px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--bg);
      margin: 16px 0 20px;
      line-height: 1.1;
    }

    .reels-showcase-header h2 em {
      color: var(--gold);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .reels-showcase-header p {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
    }

    /* 4 Reels nebeneinander, mehr Atem zwischen ihnen. Echtes iPhone-Format.
       WICHTIG: perspective am GRID (Parent) ist Voraussetzung dafuer dass
       die Tilt-Wraps echte 3D-Tiefe zeigen statt flachem Squash-Effekt. */
    

    @media (max-width: 1024px) {
      .reels-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
      }
    }

    @media (max-width: 640px) {
      .reels-showcase-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        gap: 32px;
      }
    }

    /* ============================================================
       REELS GRID (v2.58 - kompletter Rebuild, simpel + zuverlaessig)
       ============================================================
       Keine Scroll-Hijack, kein Coverflow-Rotation - einfach 4 Phones in
       einer Reihe nebeneinander. Hover auf ein Phone vergroessert es leicht,
       andere werden subtil gedimmt + verkleinert. Mobile -> 2x2 Grid.

       Videos sind HTML5 <video> Tags mit HLS via hls.js (nicht iframes!) -
       dadurch AUTOPLAY 100% reliable, weil wir muted/loop/playsinline direkt
       am video-Element setzen koennen. iframe-Autoplay scheiterte vorher. */

    .reels-grid-wrap {
      width: 100%;
      max-width: 1180px;
      margin: 60px auto 20px;
      padding: 0 32px;
    }

    .reels-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      align-items: start;
    }

    /* Hover-Group: wenn IRGENDEIN Phone gehovered wird, dimmen wir die anderen
       und shrinken sie leicht. Das gehoverede selbst skaliert hoch. */
    .reels-grid:hover .reels-phone:not(:hover) {
      transform: scale(0.94);
      opacity: 0.7;
      filter: brightness(0.85) saturate(0.8);
    }

    .reels-phone {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 2.06; /* iPhone Pro Aspect-Ratio */
      cursor: pointer;
      transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.55s ease,
        filter 0.55s ease;
      will-change: transform, opacity, filter;
    }
    .reels-phone:hover {
      transform: scale(1.06) translateY(-6px);
      z-index: 5;
    }

    /* iPhone-Frame (Aluminium-Bezel + Innenschatten + Outer-Glow).
       v2.60 update: 7px Padding (vorher 11px) -> Bezel deutlich duenner,
       naeher am echten iPhone 16 Pro Look. Border-Radius proportional auf 38px
       reduziert, damit Aussen- und Innen-Radien sauber konzentrisch bleiben. */
    .reels-phone-frame {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 7px;
      box-sizing: border-box;
      border-radius: 38px;
      background: linear-gradient(145deg,
        #050505 0%,
        #242424 19%,
        #080808 43%,
        #343434 55%,
        #090909 73%,
        #1c1c1c 88%,
        #050505 100%);
      box-shadow:
        0 32px 60px rgba(0, 0, 0, 0.30),
        0 8px 20px rgba(0, 0, 0, 0.20),
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.10),
        inset 5px 0 8px rgba(255, 255, 255, 0.05),
        inset -5px 0 10px rgba(0, 0, 0, 0.65);
    }
    .reels-phone-frame::before {
      content: '';
      position: absolute;
      inset: 2.5px;
      border-radius: 35.5px;
      pointer-events: none;
      z-index: 5;
      box-shadow:
        inset 7px 0 11px rgba(255, 255, 255, 0.07),
        inset -7px 0 12px rgba(0, 0, 0, 0.70),
        inset 0 7px 12px rgba(255, 255, 255, 0.04),
        inset 0 -7px 14px rgba(0, 0, 0, 0.55);
    }
    .reels-phone-frame::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 40px;
      pointer-events: none;
      z-index: -1;
      background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.15),
        rgba(0, 0, 0, 0.70),
        rgba(255, 255, 255, 0.10));
      filter: blur(1px);
    }

    /* Bildschirm-Bereich (inside the padded frame). Background:#000 erzeugt
       schwarze Balken oben/unten wenn 9:16 Video in 1:2.05 Display sitzt -
       wirkt wie echter iPhone-Display der ein 9:16 Reel abspielt. */
    .reels-phone-screen {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 31px;
      overflow: hidden;
      background: #000;
      z-index: 2;
      isolation: isolate;
    }

    /* iframe fuellt jetzt 100% des Phone-Screens (kein Scale-Trick mehr!).
       Bunny rendert das Video im Original-Aspect-Ratio, schwarze Balken oben/
       unten entstehen natuerlich wie auf echtem iPhone. compactControls=true
       sorgt fuer kompakte Controls die in schmale Phone-Breite passen.
       v2.69: border-radius:inherit als zusaetzliche Sicherheit damit iframe
       auch in Safari/iOS sauber an den runden Display-Ecken geclippt wird. */
    .reels-phone-screen iframe {
      position: absolute;
      top: 0;
      left: 0;
      right: auto;
      bottom: auto;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
      display: block;
      z-index: 1;
      border-radius: inherit;
    }

    /* (v2.66) Poster-Iframe + Veil + Animierter Gold-Play-Button-Overlay
       entfernt - Bunny's eigener Player ist jetzt brand-konform (Custom CSS
       in Library 666993 + 670115). Bunny rendert sein Thumbnail mit gold
       Center-Play-Button selbst, kein eigener Overlay-Stack mehr noetig.
       Entfernte Klassen: .reels-poster-frame, .reels-poster-veil,
       .reels-play-overlay, .reels-play-circle + alle ::before/::after
       Pseudo-Elemente + @keyframes reelsPlayRotate, reelsPlaySonar,
       reelsPlayPulse. ~150 Zeilen CSS gespart. */

    /* Dynamic Island: pill OBEN AUF dem Phone.
       v2.60 update: top reduziert (12px statt 17px) wegen duennerem Bezel,
       max-width und height leicht reduziert fuer proportional kleineren Notch. */
    .reels-phone-notch {
      position: absolute;
      top: 12px;
      left: 50%;
      width: 36%;
      max-width: 88px;
      height: 21px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(180deg, #111 0%, #000 100%);
      z-index: 8;
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.50),
        inset 0 1px 1px rgba(255, 255, 255, 0.06);
      overflow: hidden;
      pointer-events: none;
    }
    .reels-phone-notch::before {
      content: '';
      position: absolute;
      right: 9px;
      top: 50%;
      width: 7px;
      height: 7px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%,
        #2e2e2e 0%, #080808 55%, #000 100%);
      box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.18);
    }
    .reels-phone-notch::after {
      content: '';
      position: absolute;
      left: 11px;
      top: 50%;
      width: 28px;
      height: 4px;
      transform: translateY(-50%);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
    }

    /* Side-Buttons: schmale Bumps an Phone-Seiten (v2.60: 3px statt 4px).
       Bleiben sichtbar damit das iPhone realistisch wirkt. */
    .reels-phone-btn {
      position: absolute;
      display: block;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(to bottom,
        #090909 0%, #4c4c4c 48%, #090909 100%);
      box-shadow:
        inset 0 0 3px rgba(255, 255, 255, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.40);
      z-index: 7;
      pointer-events: none;
    }
    .reels-phone-btn-mute     { left: -1.5px; top: 16%; height: 4.5%; }
    .reels-phone-btn-vol-up   { left: -1.5px; top: 24%; height: 10%; }
    .reels-phone-btn-vol-down { left: -1.5px; top: 36%; height: 10%; }
    .reels-phone-btn-power    { right: -1.5px; top: 26%; height: 14%; }

    /* Tablet: 2x2 Grid */
    @media (max-width: 900px) {
      .reels-grid-wrap { max-width: 640px; padding: 0 24px; }
      .reels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
    }

    /* Mobile: 2x2 Grid (weniger Scrollen als 1 Spalte) */
    @media (max-width: 500px) {
      .reels-grid-wrap { max-width: 460px; margin-top: 40px; padding: 0 16px; }
      .reels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }
      .reels-phone-frame { padding: 5px; border-radius: 26px; }
      .reels-phone-frame::before { inset: 2px; border-radius: 24px; }
      .reels-phone-screen { border-radius: 20px; }
    }

    /* ============ REELS-LIGHTBOX (Popup fuer grosse Video-Ansicht) ============
       Tippt man ein Reel an, oeffnet das zugehoerige JS (globaler Footer-Code)
       dieses Overlay mit dem Video im echten 9:16, ohne Phone-Rahmen. Die Styles
       tun nichts, solange das JS das Overlay nicht erzeugt -> kein Risiko. */
    .reels-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(8, 12, 10, 0.92);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .reels-lightbox.open { display: flex; }
    .reels-lightbox.visible { opacity: 1; }
    .reels-lightbox-video {
      position: relative;
      aspect-ratio: 9 / 16;
      height: min(88vh, 760px);
      max-width: 94vw;
      border-radius: 20px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    }
    .reels-lightbox-video iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .reels-lightbox-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 0;
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: background 0.2s ease;
    }
    .reels-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }
    body.reels-lightbox-lock { overflow: hidden; }

    /* prefers-reduced-motion: keine Hover-Animationen */
    @media (prefers-reduced-motion: reduce) {
      .reels-phone {
        transition: none !important;
      }
      .reels-grid:hover .reels-phone:not(:hover) {
        transform: none;
        opacity: 1;
        filter: none;
      }
      .reels-phone:hover {
        transform: none;
      }
    }

    /* Reels-Frame mit Phone-Look: Notch oben, Border als Geraetekante,
       Hover-Lift mit Gold-Glow, sanfter Stagger-Entry.
       border-radius bewusst auf 22px reduziert, damit der Bunny-Player-
       Control-Bar unten nicht abgeschnitten wird. */
    

    /* Notch / Lautsprecher-Indikator wie an einem Smartphone */
    

    /* Hover: Reel hebt sich, goldene Glow-Aura erscheint */
    

    

    

    

    

    

    

    

    .platform-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .platform-cell {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 28px 24px;
      border-radius: 16px;
      transition: all 0.4s ease;
    }

    .platform-cell:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: var(--gold);
      transform: translateY(-4px);
    }

    .platform-cell-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .platform-cell-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .platform-cell-icon svg { width: 20px; height: 20px; color: white; }

    .platform-cell-name {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
    }

    .platform-cell-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 32px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }

    .platform-cell-change {
      font-size: 12px;
      color: var(--gold);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .platform-cell-desc {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 6px;
      line-height: 1.5;
    }

    /* Sparkline mini-chart inside platform-cell */
    .platform-cell-sparkline {
      width: 100%;
      height: 36px;
      margin-top: 14px;
      overflow: visible;
    }

    .platform-cell-sparkline polyline {
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 220;
      stroke-dashoffset: 220;
      transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .platform-cell-sparkline polygon {
      fill: currentColor;
      opacity: 0;
      transition: opacity 1s ease 1.2s;
    }

    .platform-cell.in .platform-cell-sparkline polyline { stroke-dashoffset: 0; }
    .platform-cell.in .platform-cell-sparkline polygon { opacity: 0.12; }

    .platform-cell-sparkline circle {
      fill: currentColor;
      opacity: 0;
      transform-origin: center;
      animation: sparkPulse 2s ease-in-out infinite;
      animation-delay: 1.8s;
    }

    .platform-cell.in .platform-cell-sparkline circle { opacity: 1; }

    @keyframes sparkPulse {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 currentColor); }
      50% { transform: scale(1.6); filter: drop-shadow(0 0 8px currentColor); }
    }

    /* ====== REACH STAGE (Marktpotential / Social-Media-Buehne) ====== */
    .reach-stage {
      max-width: 1280px;
      margin: 120px auto 100px;
      padding: 0 32px;
      position: relative;
    }

    .reach-stage-header {
      text-align: center;
      max-width: 920px;
      margin: 0 auto 56px;
    }

    .reach-stage-header h2 {
      font-size: clamp(30px, 4vw, 50px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--bg);
      margin: 0 0 20px;
      line-height: 1.15;
      text-wrap: balance;
    }

    .reach-stage-header h2 em {
      color: var(--gold);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-style: normal;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .reach-stage-header p {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
    }

    .live-pulse {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(58, 147, 101, 0.12);
      border: 1px solid rgba(58, 147, 101, 0.5);
      border-radius: 999px;
      padding: 7px 16px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.22em;
      color: var(--green);
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 var(--green);
      animation: livePulse 1.6s ease-out infinite;
    }

    @keyframes livePulse {
      0% { box-shadow: 0 0 0 0 rgba(58, 147, 101, 0.7); transform: scale(1); }
      70% { box-shadow: 0 0 0 14px rgba(58, 147, 101, 0); transform: scale(1.15); }
      100% { box-shadow: 0 0 0 0 rgba(58, 147, 101, 0); transform: scale(1); }
    }

    .reach-stage-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .reach-stat-big {
      position: relative;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 22px;
      padding: 40px 32px 36px;
      text-align: center;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      --accent: var(--gold);
    }

    .reach-stat-big::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    }

    .reach-stat-big.in::before { transform: scaleX(1); }

    .reach-stat-big::after {
      content: '';
      position: absolute;
      inset: -1px -1px auto auto;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle at top right, var(--accent) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.6s ease;
      pointer-events: none;
    }

    .reach-stat-big:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.18);
      transform: translateY(-8px);
    }

    .reach-stat-big:hover::after { opacity: 0.15; }

    .reach-stat-big.instagram { --accent: #D62976; }
    .reach-stat-big.facebook { --accent: #1877F2; }
    .reach-stat-big.kuester { --accent: var(--gold); }

    .reach-stat-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      position: relative;
      z-index: 1;
    }

    .reach-stat-big.instagram .reach-stat-icon {
      background: linear-gradient(135deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
    }
    .reach-stat-big.facebook .reach-stat-icon { background: #1877F2; }
    .reach-stat-big.kuester .reach-stat-icon { background: var(--gold); }

    .reach-stat-icon svg { width: 28px; height: 28px; color: white; }
    .reach-stat-big.kuester .reach-stat-icon svg { color: var(--dark); }

    .reach-stat-icon::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 22px;
      border: 1px solid var(--accent);
      opacity: 0;
      animation: ringPulse 2.8s ease-in-out infinite;
    }

    @keyframes ringPulse {
      0%, 100% { opacity: 0; transform: scale(0.85); }
      50% { opacity: 0.55; transform: scale(1.1); }
    }

    .reach-stat-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(40px, 5.5vw, 64px);
      font-weight: 700;
      color: var(--bg);
      letter-spacing: -0.03em;
      line-height: 1;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      margin-bottom: 10px;
    }

    .reach-stat-unit {
      font-size: 0.42em;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .reach-stat-suffix {
      font-size: 0.5em;
      color: var(--accent);
      font-weight: 700;
    }

    .reach-stat-label {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
      max-width: 240px;
      margin: 0 auto;
    }

    .reach-stat-trend {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 18px;
      padding: 6px 12px;
      background: rgba(58, 147, 101, 0.12);
      border-radius: 999px;
      font-size: 11px;
      color: var(--green);
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      letter-spacing: 0.05em;
    }

    /* Donut overlay text */
    .donut-text-overlay {
      flex: 1;
    }
    .donut-text-overlay-value {
      font-size: 11px;
      color: var(--text-mute);
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .donut-text-overlay-label {
      font-size: 13px;
      color: var(--dark);
      font-weight: 600;
      line-height: 1.3;
    }

    /* ====== Reviews-Section (Trustindex) ====== */
    .reviews-section {
      padding: 64px 0 80px;
      position: relative;
    }

    .reviews-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 64px;
    }

    .reviews-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .reviews-widget-wrapper {
      /* v2.60: Card-Optik (Border, Background, Box-Shadow, Padding) raus -
         das Trustindex-Plugin rendert jede einzelne Bewertung schon als eigene
         Karte, ein Wrapper drumherum verdoppelt den Rahmen. */
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      position: relative;
      /* Platz reservieren damit Trustindex beim Nachladen keinen Layout-Shift verursacht */
      min-height: 420px;
    }

    .reviews-google-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 32px;
      position: relative;
      z-index: 1;
    }

    .reviews-google-badge img,
    .reviews-google-badge svg {
      height: 28px;
    }

    .reviews-google-badge-text {
      font-size: 14px;
      color: var(--text-soft);
      font-weight: 500;
    }

    /* ====== Values Section ====== */
    .values-section {
      padding: 120px 0;
      background: var(--bg-warm);
      position: relative;
      overflow: hidden;
    }

    .values-bg-image {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.05;
      background-image: url('https://kuester-immobilien.de/wp-content/uploads/2025/02/Mockup-Kuester-Immobilien.png');
      background-size: cover;
      background-position: center;
    }

    .values-content { position: relative; z-index: 1; }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 64px;
    }

    .value-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 40px 32px;
      transition: all 0.4s ease;
    }

    .value-card {
      transform-style: preserve-3d;
      will-change: transform;
    }

    .value-card:hover {
      box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(198, 171, 124, 0.35),
        0 0 80px rgba(198, 171, 124, 0.15);
      border-color: var(--gold);
    }

    .value-card > * {
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .value-card:hover .value-number { transform: translateZ(40px); }
    .value-card:hover h3 { transform: translateZ(30px); }
    .value-card:hover p { transform: translateZ(15px); }

    .value-number {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 48px;
      font-weight: 700;
      color: var(--green);
      line-height: 1;
      margin-bottom: 20px;
      letter-spacing: -0.04em;
    }

    .value-card h3 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -0.025em;
      margin-bottom: 12px;
      color: var(--dark);
    }

    .value-card p {
      font-size: 15px;
      color: var(--text-soft);
      line-height: 1.6;
    }

    /* ====== Ratgeber-Popup (modernes Lead-Formular) ======
       Glassmorphism, weicher Schatten, smooth Animationen. n8n-Webhook anbindung. */
    .rg-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15, 15, 15, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .rg-modal.open { display: flex; }
    .rg-modal.visible { opacity: 1; }

    .rg-card {
      width: 100%;
      max-width: 480px;
      background: var(--surface);
      border-radius: 24px;
      padding: 40px 36px 36px;
      position: relative;
      box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(198, 171, 124, 0.2);
      transform: translateY(20px) scale(0.96);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .rg-modal.visible .rg-card { transform: translateY(0) scale(1); }

    .rg-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-soft);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.25s ease, transform 0.25s ease;
      color: var(--text);
    }
    .rg-close:hover { background: var(--bg-warm); transform: rotate(90deg); }

    .rg-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--gold-soft);
      color: var(--gold-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
    }

    .rg-title {
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
      color: var(--dark);
    }
    .rg-subtitle {
      font-size: 14px;
      color: var(--text-soft);
      text-align: center;
      line-height: 1.5;
      margin-bottom: 28px;
    }

    .rg-field {
      position: relative;
      margin-bottom: 14px;
    }
    .rg-field input,
    .rg-field select {
      width: 100%;
      padding: 14px 16px;
      font-size: 15px;
      font-family: inherit;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      color: var(--text);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      -webkit-appearance: none;
      appearance: none;
    }
    .rg-field input:focus,
    .rg-field select:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(198, 171, 124, 0.15);
    }
    .rg-field select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 44px;
      cursor: pointer;
    }

    .rg-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 18px 0 22px;
      font-size: 13px;
      color: var(--text-soft);
      line-height: 1.5;
    }
    .rg-consent input { margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
    .rg-consent a { color: var(--gold-dark); text-decoration: underline; }

    .rg-submit {
      width: 100%;
      padding: 16px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      background: var(--gold);
      color: var(--dark);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.25s ease, transform 0.15s ease;
      letter-spacing: -0.01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .rg-submit:hover { background: var(--gold-dark); color: white; }
    .rg-submit:active { transform: scale(0.98); }
    .rg-submit:disabled { opacity: 0.6; cursor: not-allowed; }

    .rg-success {
      text-align: center;
      padding: 40px 0;
      display: none;
    }
    .rg-success.show { display: block; }
    .rg-success-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: rgSuccessPulse 1.5s ease-in-out infinite;
    }
    @keyframes rgSuccessPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(58, 147, 101, 0.4); }
      50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(58, 147, 101, 0); }
    }
    .rg-success h4 {
      font-size: 20px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }
    .rg-success p {
      font-size: 14px;
      color: var(--text-soft);
      line-height: 1.5;
    }

    .rg-error {
      display: none;
      padding: 12px 14px;
      background: rgba(220, 38, 38, 0.08);
      border: 1px solid rgba(220, 38, 38, 0.3);
      color: #b91c1c;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 14px;
    }
    .rg-error.show { display: block; }

    /* ====== Ratgeber Section ====== */
    .ratgeber-section {
      padding: 120px 0;
    }

    .ratgeber-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .ratgeber-image {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: var(--bg-warm);
    }

    .ratgeber-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 20px;
    }

    .ratgeber-list {
      list-style: none;
      margin: 32px 0;
    }

    .ratgeber-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      font-size: 15px;
      color: var(--text);
      line-height: 1.5;
    }

    .ratgeber-check {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--green-light);
      color: var(--green-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }

    /* ====== FAQ ====== */
    .faq-section {
      padding: 120px 0;
      background: var(--bg-soft);
    }

    .faq-layout {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 80px;
      align-items: start;
    }

    .faq-sidebar { position: sticky; top: 120px; }

    .faq-contact {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px;
      margin-top: 32px;
    }

    .faq-contact-label {
      font-size: 12px;
      color: var(--green-dark);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 12px;
      font-weight: 600;
    }

    .faq-contact-phone {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 22px;
      font-weight: 600;
      color: var(--dark);
      text-decoration: none;
      margin-bottom: 20px;
    }

    .faq-contact-phone:hover { color: var(--gold-dark); }

    .faq-contact-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .faq-list { display: flex; flex-direction: column; gap: 8px; }

    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-item:hover, .faq-item.open { border-color: var(--green); }

    .faq-question {
      padding: 24px 28px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 17px;
      font-weight: 500;
      color: var(--dark);
      user-select: none;
      letter-spacing: -0.01em;
    }

    .faq-icon {
      width: 32px;
      height: 32px;
      border: 1.5px solid var(--border-strong);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
      flex-shrink: 0;
      color: var(--dark);
      margin-left: 24px;
    }

    .faq-item.open .faq-icon {
      background: var(--green);
      border-color: var(--green);
      color: white;
      transform: rotate(135deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
      color: var(--text-soft);
      font-size: 15px;
      line-height: 1.7;
    }

    .faq-item.open .faq-answer { max-height: 400px; }
    .faq-answer-inner { padding: 0 28px 24px; }

    /* ====== CTA ====== */
    .cta-section {
      padding: 140px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: var(--dark);
      color: var(--bg);
    }

    /* Animierter Gold-Gradient im CTA-Hintergrund.
       Langsames atmen + leichtes Wandern erzeugt einen fluessigen, lebendigen Look. */
    .cta-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 110%;
      height: 110%;
      background: radial-gradient(ellipse at center, var(--gold-glow) 0%, transparent 60%);
      filter: blur(40px);
      pointer-events: none;
      animation: ctaGlowBreathe 12s ease-in-out infinite;
      transform-origin: center;
    }

    @keyframes ctaGlowBreathe {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.85;
      }
      25% {
        transform: translate(-46%, -54%) scale(1.08);
        opacity: 1;
      }
      50% {
        transform: translate(-52%, -48%) scale(1.12);
        opacity: 0.95;
      }
      75% {
        transform: translate(-48%, -52%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.85;
      }
    }

    .cta-content {
      position: relative;
      z-index: 1;
      max-width: 900px;
      margin: 0 auto;
    }

    .cta-content h2 {
      font-size: clamp(40px, 6vw, 80px);
      margin-bottom: 24px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--bg);
    }

    .cta-content h2 em { color: var(--gold); }

    .cta-content p {
      font-size: 19px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 48px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ====== Footer ====== */
    footer {
      background: var(--bg-soft);
      padding: 80px 0 40px;
      border-top: 1px solid var(--border);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 64px;
      margin-bottom: 40px;
      border-bottom: 1px solid var(--border);
    }

    .footer-about p {
      font-size: 14px;
      color: var(--text-soft);
      margin-top: 20px;
      max-width: 320px;
      line-height: 1.6;
    }

    .footer-about-contact {
      margin-top: 20px;
      font-size: 14px;
      color: var(--text);
      line-height: 1.7;
    }

    .footer-about-contact strong { color: var(--dark); }
    .footer-logos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 4px; }
    .footer-about .logo-img { height: 100px; }
    .footer-ivd-badge { display: inline-flex; line-height: 0; }
    .footer-ivd-badge img { height: 92px; width: auto; display: block; }
    @media (max-width: 768px) {
      .footer-logos { gap: 32px; }
      .footer-about .logo-img { height: 105px; max-height: none; }
      .footer-ivd-badge img { height: 92px; width: auto; }
    }

    .footer-col h4 {
      font-size: 12px;
      font-weight: 600;
      color: var(--green-dark);
      margin-bottom: 20px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 12px; }

    .footer-col a {
      color: var(--text-soft);
      text-decoration: none;
      font-size: 15px;
      transition: color 0.3s ease;
    }

    .footer-col a:hover { color: var(--green-dark); }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 13px;
      color: var(--text-mute);
    }

    /* ====== Responsive ====== */
    @media (max-width: 1024px) {
      .hero-layout { grid-template-columns: 1fr; gap: 40px; }
      .hero-video-stack { max-width: 320px; }
      .hero-image-stack { height: 400px; }
      .founders-intro { grid-template-columns: 1fr; gap: 32px; }
      .process-grid { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: 1fr; }
      .bewertung-features { grid-template-columns: 1fr; gap: 24px; }
      .marketing-intro { grid-template-columns: 1fr; gap: 32px; }
      .dashboard-showcase { grid-template-columns: 1fr; gap: 48px; padding-bottom: 0; }
      .homestaging-header { grid-template-columns: 1fr; gap: 24px; }
      .homestaging-row { grid-template-columns: 1fr; gap: 24px; }
      .homestaging-video { max-width: 100%; margin: 0 auto; }
      .platform-bar { grid-template-columns: 1fr; }
      .reach-stage-grid { grid-template-columns: 1fr; gap: 16px; }
      .reach-stage { margin-bottom: 60px; }
      .ratgeber-layout { grid-template-columns: 1fr; gap: 48px; }
      .faq-layout { grid-template-columns: 1fr; gap: 48px; }
      .faq-sidebar { position: static; }
      .dashboard-stage { height: 560px; }
    }

    @media (max-width: 900px) {
      .container, .container-wide { padding: 0 20px; }
      header { padding: 14px 20px; }
      .nav-links { display: none; }
      .nav-phone { display: none; }
      .nav-cta { display: none; }
      .mobile-menu { display: block; }
      .nav .logo-img { max-height: 40px; width: auto; }

      .hero { padding: 100px 0 48px; min-height: auto; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .founders-grid { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 40px; }

      /* Section-Paddings deutlich reduzieren (120 -> 64) */
      .section-padding, .founders-section, .process-section, .bewertung-section,
      .values-section, .ratgeber-section, .faq-section, .reviews-section {
        padding: 64px 0;
      }
      .marketing-section { padding: 0; }
      .marketing-dark { padding: 80px 0 96px; }
      .story-block { margin-bottom: 48px; }
      .dashboard-showcase { margin-bottom: 48px; padding: 0 20px; }
      .homestaging-section { padding: 0 20px 48px; }
      .cta-section { padding: 72px 0; }
      .botanical-bg { opacity: 0.18; }

      /* Hero-Typografie: serif-em runter von 1.25em (war auf Mobile zu gross
         und sprengte die Zeile) und Lead kompakter */
      .hero h1 { font-size: clamp(28px, 8vw, 40px); margin-bottom: 20px; }
      .hero h1 .serif { font-size: 1em; }
      .hero-lead { font-size: 17px; margin-bottom: 28px; }

      /* Presenter-Avatare deutlich groesser auf Mobile (96 -> 140) */
      .hero-presenters-avatar { width: 140px; height: 140px; border-width: 4px; }
      .hero-presenters-avatar + .hero-presenters-avatar { margin-left: -40px; }
      .hero-presenters-text { font-size: 18px; }
      .hero-presenters { gap: 18px; margin-bottom: 24px; }

      /* Dashboard-Stage Mobile (v2.71): Minimaler Overlap, alles lesbar.
         Browser-Window schmaler (75%) damit Reach-Card RECHTS daneben sitzt
         statt drueber. Reach-Card schmaler (45%) damit sie nur das obere
         rechte ECK ueberlappt, nicht den ganzen rechten Text-Bereich.
         Activity-Card weiter unten (bottom:60), Donut-Card unten rechts. */
      .dashboard-stage {
        height: 680px !important;
        position: relative;
        margin-top: 16px;
        overflow: visible;
      }
      .dashboard-stage > .browser-window {
        position: absolute !important;
        top: 28px !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 75% !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 1 !important;
        animation: none !important;
      }
      .dashboard-stage > .activity-card {
        position: absolute !important;
        top: auto !important;
        bottom: 60px !important;
        left: 4% !important;
        right: auto !important;
        width: 70% !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 3 !important;
        animation: none !important;
      }
      .dashboard-stage > .reach-card {
        position: absolute !important;
        top: -12px !important;
        bottom: auto !important;
        right: -8px !important;
        left: auto !important;
        width: 45% !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 4 !important;
        animation: none !important;
      }
      .dashboard-stage > .donut-card {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 2 !important;
        animation: none !important;
      }
      .social-icon-float { display: none; }

      /* Funnel: Step-Circle muss VOR dem Comet liegen.
         display: contents auf .funnel-step entfernt die parent-z-index,
         deshalb hier explizit position: relative + z-index 3 auf den Circle
         (= ueber Comet z-index 2, ueber Linie z-index 1). */
      .funnel-step-circle {
        position: relative;
        z-index: 3;
        justify-self: center;
      }
      .funnel-step-label {
        position: relative;
        z-index: 3;
      }

      /* Funnel-Story Mini-Video auf Mobile: schmaler Phone-Frame, aspect-ratio
         bleibt 9:16 (vom Desktop-CSS), Iframe fuellt den Frame absolut. */
      .funnel-story { display: flex !important; flex-direction: column; align-items: stretch; }
      .funnel-story-image {
        max-width: 280px !important;
        width: 100% !important;
        margin: 0 auto !important;
      }
      /* (v2.69) iframe/video Overrides ENTFERNT - die hatten das iframe direkt
         in .funnel-story-image positioniert und damit das border-radius Clipping
         von .reels-phone-screen umgangen. Jetzt erbt iframe sauber vom Desktop-CSS
         und sitzt korrekt im .reels-phone-screen Container. */
      .funnel-story-image img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center 55%;
      }

      /* Section-Titel kompakter */
      .section-title { font-size: clamp(26px, 7vw, 36px); margin-bottom: 16px; }
      .section-lead { font-size: 16px; }

      /* Marquee leichter, weniger Gap */
      .marquee { padding: 18px 0; }
      .marquee-track { gap: 32px; animation-duration: 60s; }
      .marquee-item { font-size: 14px; }

      /* Heavy decorative Animationen + Glow auf Mobile deaktivieren (Performance!) */
      .hero-video-frame { animation: none; }
      .hero-data-badge { animation: none; }
      .hero-glow, .hero-glow-2 { display: none; }
      .hero-grid-bg { opacity: 0.4; }
      .browser-window.revealed { animation: none; }

      /* CTA-Button auf Mobile soll volle Breite + bessere Tap-Target */
      .hero-buttons { gap: 10px; }
      .hero-buttons .btn { width: 100%; justify-content: center; padding: 16px 22px; }
    }

    /* prefers-reduced-motion respektieren: alle dekorativen Animationen aus */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .marquee-track { animation: none !important; }
    }

    @media (max-width: 900px) {
      .hero-data-badge {
        padding: 10px 14px;
        border-radius: 12px;
      }
      .hero-data-badge-label { font-size: 9px; }
      .hero-data-badge-value, .hero-data-badge-sizer { font-size: 14px; }
      /* Badges ragen leicht NEGATIV aus dem Video heraus (wie Desktop) -
         so wird klar erkennbar, dass sie nicht Teil des Videos sind.
         bd1: oben links in die Ecke,
         bd2: rechte Mitte,
         bd3: unten links aber ~16% vom Bottom = sicher ueber den Player-Controls. */
      .hero-data-badge.bd1 { top: -2%;  left: -10px; bottom: auto; }
      .hero-data-badge.bd2 { top: 42%;  right: -10px; bottom: auto; }
      .hero-data-badge.bd3 { bottom: 16%; left: -10px; top: auto; }
    }

    @media (max-width: 500px) {
      .footer-top { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      /* Video deutlich groesser: 280 -> 360px (nahezu volle Mobile-Breite) */
      .hero-video-stack { max-width: 360px; }
      .hero-data-badge {
        padding: 8px 12px;
        border-radius: 10px;
      }
      .hero-data-badge-label { font-size: 9px; letter-spacing: 0.08em; }
      .hero-data-badge-value, .hero-data-badge-sizer { font-size: 13px; }
      /* Auf sehr kleinen Phones nur leicht ueberlappend (-8px statt -10px),
         damit nichts aus dem Viewport ragt. */
      .hero-data-badge.bd1 { top: -2%;  left: -8px; bottom: auto; }
      .hero-data-badge.bd2 { top: 44%;  right: -8px; bottom: auto; }
      .hero-data-badge.bd3 { bottom: 16%; left: -8px; top: auto; }

      /* REGION-Badge (bd1) deutlich groesser: prominenter visueller Anchor
         oben links auf dem Hero-Video. Label + Value bekommen mehr Gewicht. */
      .hero-data-badge.bd1 {
        padding: 12px 18px;
        border-radius: 14px;
      }
      .hero-data-badge.bd1 .hero-data-badge-label {
        font-size: 11px;
        letter-spacing: 0.1em;
        margin-bottom: 5px;
      }
      .hero-data-badge.bd1 .hero-data-badge-value,
      .hero-data-badge.bd1 .hero-data-badge-sizer {
        font-size: 17px;
      }
      .hero-image-stack { height: 320px; }
      .dashboard-stage { height: 480px; }
      .compare-handle::before { width: 44px; height: 44px; }
    }