/* =====================================================
   MarketLeaders Landing — New Genre × Stitch inspired
   Wave-style gradient: dark → light → dark → light
   ===================================================== */

/* =====================================================
   SELF-HOSTED FONTS (DSGVO-konform, keine externen Requests)
   - Geist: Latin-Subset, Variable-Datei deckt 300–800
   - Geist Mono: Latin-Subset, Variable-Datei deckt 400–600
   - Caveat: nur das Subset für „Jan Froboese" (Signatur)
   ===================================================== */
/* ===== TT Norms — primary type system (Regular/Medium/Bold/Heavy + Italic + Bold-Italic) ===== */
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/TT-Norms-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/TT-Norms-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('assets/fonts/TT-Norms-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('assets/fonts/TT-Norms-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: italic;
  font-weight: 700;
  font-display: optional;
  src: url('assets/fonts/TT-Norms-Bold-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('assets/fonts/TT-Norms-Heavy.woff2') format('woff2');
}

/* Legacy Geist Mono — Hinweis: TT Norms ist nicht mono. Mono-Akzente
   (chart-pill, kicker mono-look) bleiben auf Geist Mono. */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/caveat-jan-froboese.woff2?v=4') format('woff2');
  /* Subset-Datei: enthält nur Glyphen für „Jan Froboese" */
}
@font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/parisienne-jan-froboese.woff2') format('woff2'); }
@font-face { font-family: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/sacramento-jan-froboese.woff2') format('woff2'); }

:root {
  --c-ink:        #ffffff;
  --c-ink-soft:   rgba(255,255,255,0.62);
  --c-ink-faint:  rgba(255,255,255,0.30);
  --c-line:       rgba(255,255,255,0.14);
  --c-accent:     #b6e873;          /* Primary accent auf dunklen Flaechen */
  --c-accent-hi:  #c8f08a;          /* Hover/Active fuer Primary Accent */
  --c-accent-light: #e4ee63;        /* Accent auf weissen/hellen Flaechen */
  --c-accent-rgb: 182, 232, 115;
  --c-accent-light-rgb: 228, 238, 99;
  --c-accent-ink: #0c1206;          /* dunkler Text, der AUF Gruen sitzt */
  --c-green:      var(--c-accent);  /* Sterne/Success ziehen jetzt das Brand-Grün */

  /* Dunkle Oberflächen — vorher weiße/creme Cards/Panels. Eine Stellschraube für alle Card-BGs. */
  --c-surface:      #161618;        /* erhöhte dunkle Card */
  --c-surface-2:    #101012;        /* tiefere Fläche / Input */
  --c-surface-line: rgba(255,255,255,0.08);

  /* Header-Zeile: EINE Stellschraube für die Höhe von Logo, Nav-Pill & Login.
     Alle drei sind --nav-h hoch und zentrieren ihren Inhalt per Flexbox →
     bleiben immer auf einer Linie, egal welche Schrift-/Button-Größe sich ändert.
     --nav-top = Abstand der Header-Zeile von oben. */
  --nav-h:        46px;
  --nav-top:      32px;

  /* Mobile-Drawer Parallax:
     --drawer-w     = Breite des Side-Menus (max. 86vw auf schmalen Screens)
     --drawer-shift = wie weit Content + Logo wandern — bewusst NUR ~58% der
                      Drawer-Breite, damit der Drawer „darüber" zu liegen scheint
                      (Parallax). Content/Logo zudem langsamer animiert (s.u.). */
  --drawer-w:      min(320px, 86vw);
  --drawer-shift:  calc(var(--drawer-w) * 0.58);

  /* Wave palette — these flow into each other section by section */
  --c-earth:      #1a0d07;          /* warm dark earth (hero top) */
  --c-navy:       #15122a;          /* deep navy */
  --c-indigo:     #2c2a52;          /* indigo */
  --c-lavender:   #6c6f8c;          /* lavender steel */
  --c-light:      #b4b8d0;          /* powder blue */
  --c-cream:      #ecdfbe;          /* cream */
  --c-black:      #060611;          /* near-black for testimonials valley */

  /* TT Norms für alles — Headlines + Body. Geist Mono nur für Akzente/Labels.
     Überschriften nutzen weight 700-800, Body-Text weight 400. */
  --serif: "TT Norms", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans:  "TT Norms", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  --maxw: 1320px;
  --pad:  clamp(20px, 4vw, 56px);
  --mobile-gutter: clamp(20px, 5vw, 24px);
  --mobile-content: calc(100vw - var(--mobile-gutter) - var(--mobile-gutter));
  --mobile-headline-max: min(12.6ch, var(--mobile-content));
  --mobile-display-size: 44px;
  --mobile-hero-size: 42px;
  --mobile-section-y: 88px;
  --mobile-section-y-tight: 72px;
  --section-pad-top: 140px;   /* einheitlicher Desktop-Section-Abstand oben */
  --section-pad-bottom: 300px; /* einheitlicher Desktop-Section-Abstand unten (testimonials, system, founder, faq) */

  /* ================================================================
     CHART + DASHBOARD THEME (Light) — default
     Bläuliche Grauwerte für homogenen Look mit Site-Palette.
     Wichtigste Typo schwarz (#0a0c12), Mid-Grau für Body,
     Light-Grau für Sub-Info. Charts auf bläulichem Grau-Card.
     ----------------------------------------------------------------
     Zum DARK-Modus-Switch später: <body class="theme--dark"> ergänzen
     — die `body.theme--dark { ... }` Block unten setzt diese Vars
     auf den ehemaligen Dark-Theme zurück (siehe Backup unten).
     ================================================================ */
  /* Conicorn-Style: neutraler/wärmer Grau-Look ohne starken Blau-Cast.
     Weniger saturated, mehr off-white/light-paper Anmutung. */
  --ch-bg:           #ededee;                /* Chart card background — neutral hell */
  --ch-bg-soft:      #e2e2e4;                /* Sidebar / muted Card */
  --ch-bg-elev:      #ffffff;                /* Tiles / elevated surface */
  --ch-bg-input:     rgba(0, 0, 0, 0.045);   /* URL-bar, range-pills, etc */
  --ch-text:         #0d0d0f;                /* wichtigste Typo — leicht warmer schwarz */
  --ch-text-mid:     #5e5e62;                /* Body / Labels — neutraler grau */
  --ch-text-mute:    #9c9ca2;                /* Achsen / Sub-Hints */
  --ch-text-faint:   rgba(0, 0, 0, 0.42);
  --ch-border:       rgba(0, 0, 0, 0.07);
  --ch-divider:      rgba(0, 0, 0, 0.06);
  --ch-accent:       #1a1a1c;                /* Hauptlinie, Bars — subtle warm dark */
  --ch-accent-soft:  #c4c4c8;                /* secondary line — neutraler */
  /* POSITIVE: dunkler Grauwert-Verlauf (statt periwinkle) — Charcoal → Schwarz */
  --ch-positive:        #1a1a1c;             /* dunkles schwarz */
  --ch-positive-light:  #4a4a4e;             /* mid-grau (Gradient-Top) */
  --ch-positive-deep:   #0a0a0c;             /* tiefes schwarz (Gradient-Bottom) */
  --ch-positive-bg:     rgba(26, 26, 28, 0.10);    /* dezenter dark fade */
  /* NEGATIVE: blass helles Grau — unverändert */
  --ch-negative:        #c4c4c8;
  --ch-negative-mute:   #d8d8dc;
  --ch-active-bg:    #ffffff;
}

/* Positive Number-Klassen — solid dark color (statt gradient-text),
   damit Pill-BG sichtbar bleiben kann. */
.chart-stat-num.positive,
.hero-num.positive,
.dash-twin-stat-num.positive,
.dash-tile-stat-num.positive,
.dash-kpi-num.positive,
.mega-num.positive {
  color: var(--ch-positive);
}

/* Wichtige Zahlen — Pill-BG (30px radius, leicht abgedunkelt — wie FAQ-Icon-Kreis).
   Konsistent für Hero-Dashboard, Cream-Band Twin und alle Chart-Cards. */
.chart-stat-num,
.dash-tile-stat-num,
.dash-twin-stat-num,
.dash-kpi-num,
.mega-num,
.donut-center-num {
  display: inline-flex;
  align-items: baseline;
  padding: 4px 14px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 30px;
}

/* Dark-Theme Override — bei <body class="theme--dark"> aktiv
   (komplette ursprüngliche Dark-Werte als Backup für späteren Rollback) */
body.theme--dark {
  --ch-bg:           #333333;
  --ch-bg-soft:      #1f1f2a;
  --ch-bg-elev:      #2a2a3a;
  --ch-bg-input:     rgba(255, 255, 255, 0.05);
  --ch-text:         #ffffff;
  --ch-text-mid:     rgba(255, 255, 255, 0.65);
  --ch-text-mute:    rgba(255, 255, 255, 0.45);
  --ch-text-faint:   rgba(255, 255, 255, 0.3);
  --ch-border:       rgba(255, 255, 255, 0.06);
  --ch-divider:      rgba(255, 255, 255, 0.08);
  --ch-accent:       #f4efe6;
  --ch-accent-soft:  #5a5a5e;
  /* Dark-Mode: positive = hell-weißer Verlauf, kein periwinkle mehr */
  --ch-positive:        #f4efe6;
  --ch-positive-light:  #ffffff;
  --ch-positive-deep:   #d4d4d8;
  --ch-positive-bg:     rgba(244, 239, 230, 0.14);
  --ch-negative:        #5a5a5e;
  --ch-negative-mute:   #4a4a4e;
  --ch-active-bg:    rgba(255, 255, 255, 0.12);
}

/* =====================================================
   SVG ICON SPRITE HELPERS
   .icon       — Font-Awesome ersatz, fließt mit currentColor und font-size
   .brand-logo — Brand-Logos im Tool-Grid und Integration-Strip
   ===================================================== */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  color: inherit;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;        /* offset für fixed nav, damit Anker nicht unter Menü */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--c-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* ============================================================
   PAGE-WIDE GRADIENT — one continuous wave over the whole page
   Keeps the same sequence (dark → cream → dark → cream)
   but stretches transitions as long as possible.
   Sections sit transparent on top.
   ============================================================ */
body {
  background: #000;           /* flaches Schwarz — Sektionen sitzen transparent darauf */
  min-height: 100vh;
}

/* ────────────────────────────────────────────────────────────────────
   ALTERNATIVE — NEW GENRE-Style Earth-Navy-SteelBlue-Gradient (Backup).
   Stop-Positionen identisch, nur Farben in der dark-blue-navy-Welt.
   Aktivieren: den `body { background: linear-gradient(...) }` Block
   oben durch die Werte unten ersetzen.
   ────────────────────────────────────────────────────────────────────
   #1a0d07 0%,         (warm earth)
   #14182e 12%,        (deep navy)
   #1f2645 22%,        (indigo)
   #4e5878 32%,        (steel-blue mid)
   #8b9ab8 38%,        ☀ PEAK 1 hellster steel-blue
   #6e7e9c 46%,        (slowly descending)
   #1f2645 56%,        (back to indigo)
   #14182e 62%,        (navy)
   #060611 68%,        ▼ DEEP BLACK VALLEY
   #060611 73%,        (hold black)
   #1f2645 78%,        (rising)
   #4e5878 84%,        (steel-blue)
   #7484a3 90%,        (steel-blue CTA)
   #6c7e9c 94%,        (mid tone)
   #5a6c8a 97%,        (zum Footer dunkler)
   #4e607e 100%        (dunkler steel-blue Footer)
   ──────────────────────────────────────────────────────────────────── */

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =========== TYPEWRITER REVEAL — pure opacity, scroll-linked ===========
   Jeder Buchstabe ist ein <span class="tw-char">. JS togglet `.is-revealed`
   basierend auf Scroll-Position. Basis: opacity 0.3 — Text ist also immer
   sichtbar, fadet nur auf full opacity rauf. Kein Translate, kein Blur. */
.tw-char {
  display: inline-block;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.tw-char.is-revealed {
  opacity: 1;
}
/* Words gruppieren die einzelnen .tw-char-Spans, damit sie nie mitten im Wort
   umbrechen — Wrappen darf nur an Whitespace zwischen Wörtern passieren. */
.tw-word {
  display: inline-block;
  white-space: nowrap;
}
/* Mobile: stärkerer Kontrast, damit der Letter-by-Letter-Reveal sichtbar wird
   (Desktop bleibt bei 0.3). JS streckt zusätzlich das Reveal-Fenster auf Mobile. */
@media (max-width: 860px) {
  .tw-char { opacity: 0.13; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-char { opacity: 1; transition: none; }
}

/* =========== REVEAL-SYSTEM — dezente, gestaffelte Einblendung (Blickführung) ===========
   .rv-soft  = Nebenelemente: NUR sanftes Einblenden (opacity) — fasst NIE transform an
               (sonst rutschen zentrierte Elemente wie die Nav-Pill beim Reveal zur Seite).
   .rv-rise  = Lead-Elemente: einblenden + langsames, abgebremstes Hochgleiten (elegant).
   .rv-slow  = sanfte, langsame Variante (~2s) für Nebenelemente.
   .rv-2 / .rv-3 / .rv-after = Staffel-Delays → kommen „nach der Reihe" rein.
   app.js setzt .rv-on beim Eintreten (einmalig) und entfernt die Reveal-Klassen danach
   wieder → Element zurück im Naturzustand (Button-Hover bleibt snappy).
   html.rv-js = JS-aktiv-Guard (Inline-Head-Script). Ohne JS bleibt alles sichtbar. */
html.rv-js .rv-soft,
html.rv-js .rv-rise { opacity: 0; }
html.rv-js .rv-soft { transition: opacity 0.9s ease; }                    /* SOFT: nur Fade, kein transform */
html.rv-js .rv-rise {
  transform: translateY(36px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);                /* langsames, abgebremstes Hochgleiten */
}
html.rv-js .rv-slow { transition-duration: 2s; }                          /* sanfte 2s-Variante */
html.rv-js .rv-vslow { transition-duration: 2.6s; }                       /* „richtig langsam" reinfahren (CTA-Quiz-Karte) */
html.rv-js .rv-2 { transition-delay: 0.22s; }
html.rv-js .rv-3 { transition-delay: 0.44s; }
html.rv-js .rv-after { transition-delay: 0.7s; }                          /* kommt nach der Lead-Sequenz */
html.rv-js .rv-soft.rv-on { opacity: 1; }                                 /* SOFT revealed: NUR opacity */
html.rv-js .rv-rise.rv-on { opacity: 1; transform: none; }

/* ABOVE-THE-FOLD (Hero/Chrome): JS-getriggerter Start nach dem ersten Paint.
   Ohne JS bleiben alle Elemente sichtbar; mit html.hero-js werden sie vorbereitet
   und mit html.hero-in sauber eingeblendet. So ist die Hero-Animation nicht schon
   "vorbei", bevor LinkedIn/in-app Browser den ersten sichtbaren Frame malt. */
.rl-rise,
.rl-soft {
  opacity: 1;
  transform: none;
}
html.hero-js .rl-rise {
  opacity: 0.08;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  will-change: opacity, transform;
}
html.hero-js .rl-rise.rl-2 { transition-delay: 0.12s; }
html.hero-js .rl-rise.rl-3 { transition-delay: 0.26s; }
html.hero-js.hero-in .rl-rise {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.hero-js .rl-soft {
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}
html.hero-js .rl-soft.rl-slow { transition-duration: 1.6s; }
html.hero-js .rl-soft.rl-after { transition-delay: 0.95s; }
html.hero-js.hero-in .rl-soft { opacity: 1; }
.hero-seq {
  opacity: 1;
  transform: none;
}
html.hero-js .hero-seq {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.58s ease,
    transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.hero-js .hero-seq-avatars { transition-delay: 0.34s; }
html.hero-js .hero-seq-proof-text { transition-delay: 0.42s; }
html.hero-js .hero-seq-logos { transition-delay: 0.52s; }
html.hero-js .hero-seq-logos-label { transition-delay: 0.60s; }
html.hero-js .hero-seq-statement-portrait { transition-delay: 0.74s; }
html.hero-js .hero-seq-statement-text { transition-delay: 0.84s; }
html.hero-js .hero-seq-statement-sign { transition-delay: 0.94s; }
html.hero-js.hero-in .hero-seq {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.hero-js .rl-rise,
  html.hero-js .rl-soft,
  html.hero-js .hero-seq {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Reine Slide-up-Variante: KEIN Opacity-Fade (sofort voll sichtbar), nur von weiter
   unten über 3s abgebremst an den Platz fahren — sofortiger Start (keine Verzögerung). */
html.rv-js .rv-slideup {
  opacity: 1;
  transform: translateY(200px);                              /* doppelt so weit — gleitet über die (statische) Bullet darunter */
  transition: transform 3.5s cubic-bezier(0.16, 1, 0.22, 1); /* stärker abgebremst, langsam an den Platz */
}
html.rv-js .rv-slideup.rv-on { transform: none; }
/* Mobile: CTA-Card NICHT erst langsam reinsliden — sofort am Platz, sobald die
   Section erreicht ist. Sonst bleibt beim Anker-Sprung („Potenzial-Check") oben
   eine leere Fläche, bis man weiterscrollt und der 3,5s-Slide triggert. */
@media (max-width: 600px) {
  html.rv-js .rv-slideup { transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.rv-js .rv-soft, html.rv-js .rv-rise, html.rv-js .rv-slideup { opacity: 1; transform: none; transition: none; }
}

/* Testimonials-Karten — beim Eintreten der Section gestaffelt von unten einblenden.
   Section-scoped (.cards-in auf dem Track, von app.js einmalig gesetzt), damit ALLE
   Karten gleichzeitig getriggert werden (sonst würde die Marquee sie laufend neu zeigen).
   opacity/translateY beeinflussen die horizontale Marquee-Messung nicht. */
html.rv-js .testimonials-track .testimonial-card {
  opacity: 0; transform: translateY(42px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.rv-js .testimonials-track.cards-in .testimonial-card { opacity: 1; transform: none; }
html.rv-js .testimonials-track.cards-in .testimonial-card:nth-child(2) { transition-delay: 0.12s; }
html.rv-js .testimonials-track.cards-in .testimonial-card:nth-child(3) { transition-delay: 0.24s; }
html.rv-js .testimonials-track.cards-in .testimonial-card:nth-child(4) { transition-delay: 0.36s; }
html.rv-js .testimonials-track.cards-in .testimonial-card:nth-child(5) { transition-delay: 0.48s; }
html.rv-js .testimonials-track.cards-in .testimonial-card:nth-child(n+6) { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  html.rv-js .testimonials-track .testimonial-card { opacity: 1; transform: none; transition: none; }
}

/* Statement-Text + Founder-Quote — KEINE Section-Headline, eigene Klassifizierung.
   Zentriert, größer als Body aber kleiner als Section-Headlines (max 53px). */
.statement-text,
.founder blockquote {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 24ch;                                /* breiter als Headlines, da Fließtext-artig */
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 53px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .statement-text,
  .founder blockquote {
    font-size: clamp(28px, 9vw, 42px);
    max-width: 22ch;
  }
}

/* =========== TYPE =========== */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 6.8vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  font-style: normal;
  color: var(--c-ink);
  max-width: 700px;
}
.display em {
  font-style: normal;
  font-weight: inherit;
  font-feature-settings: normal;
}

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 28px;
}

/* =========== LAYOUT WRAPPER =========== */
/* Sections are now full-bleed (for gradient backgrounds) and use
   an inner .container to keep content centered + width-limited. */
section, .footer {
  padding: var(--section-pad-top) var(--pad) var(--section-pad-bottom);
  position: relative;
}
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* =========== NAV — 1:1 LeaderLogic-Layout ===========
   Drei separate Elemente:
   - .ll-logo-abs:   absolute oben links, scrollt mit der Seite weg
   - .ll-login-abs:  absolute oben rechts, scrollt mit der Seite weg
   - .ll-nav-pill:   FIXED Pill in der Mitte, bleibt beim Scrollen sichtbar

   ⚠️ AUSRICHTUNGS-VERTRAG (fixed vs. absolute):
   Pill = fixed → top zählt ab VIEWPORT. Logo/Login = absolute → top zählt ab
   DOKUMENT-Anfang. Beide fallen NUR bei Scroll-Position 0 zusammen — was hier
   ok ist, weil Logo/Login eh wegscrollen und nur der Pill oben bleibt.
   Damit die drei auf einer Linie bleiben, gelten zwei Regeln:
   1) Logo/Login NICHT in einen positionierten Container (position:relative/
      absolute/fixed/sticky) wickeln — sonst zählt ihr top ab diesem Container.
      Sie müssen direkte <body>-Kinder bleiben.
   2) Der Pill darf KEINEN Vorfahr mit transform/filter/will-change bekommen —
      sonst verankert sich fixed an diesem Vorfahr statt am Viewport.
   Höhe + Position aller drei kommen aus --nav-h / --nav-top (eine Stellschraube).
*/
.ll-logo-abs {
  position: absolute;
  top: var(--nav-top);
  left: clamp(20px, 3vw, 40px);
  z-index: 101;
  height: var(--nav-h);      /* gleiche Höhe wie Pill + Login → Inhalt zentriert auf einer Linie */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;       /* zentriert den Logo-Text vertikal, egal wie groß die Schrift */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.ll-logo-mark strong { font-weight: 500; }

.ll-login-abs {
  position: absolute;
  top: var(--nav-top);
  right: clamp(20px, 3vw, 40px);
  z-index: 101;
  height: var(--nav-h);      /* gleiche Höhe wie Logo + Pill */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;       /* zentriert das Label vertikal innerhalb des Buttons */
  justify-content: center;
  gap: 8px;
  padding: 0 16px 0 18px;    /* nur horizontal — vertikale Zentrierung macht align-items */
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(217, 213, 235, 0.45);
  border-radius: 10px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ll-login-abs .login-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
}
.ll-login-abs:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
}

/* ============ Center-Pill — FIXED ============ */
/* Top-Nav 1:1 wie Vorbild (dark-ai.liquid-themes.com), Ground-Truth gemessen:
   bg rgba(255,255,255,0.11) · radius 10px · blur(10px) · padding 0 10px 4px 20px */
.ll-nav-pill {
  position: fixed;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 102;
  height: var(--nav-h);      /* gleiche Höhe wie Logo + Login → alle drei auf einer Linie */
  box-sizing: border-box;
  display: flex;
  align-items: center;       /* zentriert die Menü-Links/CTA vertikal in der Zeile */
  padding: 0 10px 0 20px;
  background: rgba(255, 255, 255, 0.11);
  border: none;
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ll-nav-pill ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}
.ll-nav-pill li { margin: 0; }
/* Inactive: gedimmt. Active/Hover: voll Cream — wie Dark-AI-Theme */
.ll-nav-link {
  display: inline-block;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-ink-faint);
  line-height: 1.4;
  border-radius: 0;
  background: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.ll-nav-link:hover,
.ll-nav-link.is-current,
.ll-nav-link[aria-current="true"] {
  color: var(--c-ink);
  background: none;
}
/* CTA: kompakter Button wie Referenz-"Join" (radius 6px), Brand-Farbe statt Lila */
.ll-nav-link--cta {
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-accent-ink) !important;
  font-weight: 500;
  margin-left: 0;
  transition: background 0.3s ease, color 0.3s ease;
}
.ll-nav-link--cta:hover,
.ll-nav-link--cta.is-current,
.ll-nav-link--cta[aria-current="true"] {
  background: var(--c-accent-hi) !important;
  color: var(--c-accent-ink) !important;
}

/* ============ STARTER MODAL ============ */
.starter-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.starter-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.starter-modal[hidden] { display: none; }
.starter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 17, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.starter-modal-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-surface-line);
  border-radius: 32px;
  padding: 48px 52px 32px;
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.6);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.starter-modal.is-open .starter-modal-card {
  transform: translateY(0) scale(1);
}
.starter-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--c-surface-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.starter-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
.starter-modal-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 16px;
}
.starter-modal-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin: 0 0 14px;
}
.starter-modal-lead {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 22px;
}
.starter-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.starter-modal-list li {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-ink);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.starter-modal-list i {
  color: var(--c-accent);
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.starter-modal-cta {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 16px 24px;
  border-radius: 14px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.starter-modal-cta:hover {
  background: var(--c-accent-hi);
  transform: translateY(-1px);
}
.starter-modal-foot {
  font-family: var(--sans);
  font-size: 12px;
  text-align: center;
  color: var(--c-ink-faint);
  margin: 14px 0 0;
}

/* Embedded GHL Popup-Form */
.starter-modal-form {
  width: 100%;
  margin: 4px 0 8px;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
}
.starter-modal-form iframe {
  width: 100%;
  height: 578px;
  border: none;
  display: block;
  background: transparent;
}
@media (max-width: 600px) {
  .starter-modal-card { padding: 36px 28px 24px; }
  .starter-modal-title { font-size: 38px; }
  .starter-modal-lead { font-size: 14px; }
}
@media (max-height: 740px) {
  .starter-modal-form iframe { height: 520px; }
  .starter-modal-title { font-size: 38px; }
  .starter-modal-lead { margin-bottom: 14px; }
}

@media (max-width: 1050px) {
  .ll-logo-abs {
    font-size: 24px;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
  }
  .ll-login-abs { display: none; }
  .ll-nav-pill { display: none; }
}

/* =====================================================
   MOBILE BURGER + OFF-CANVAS DRAWER (Uncode-style)
   - Burger: round translucent pill, top-right, fixed
   - Drawer: slides in from right (320px)
   - Page-wrap: pushes left by drawer width when open
   - Smooth 360ms cubic-bezier transition (transform-only)
   ===================================================== */
.m-burger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 110;
  width: 52px;
  height: 52px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  /* Hintergrund 1:1 wie Desktop-Menu (.ll-nav-pill) */
  background: rgba(255, 255, 255, 0.11);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}
.m-burger:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .m-burger:hover {
    background: rgba(255, 255, 255, 0.17);
    transform: scale(1.04);
  }
}

.m-burger-bars {
  position: relative;
  width: 22px;
  height: 14px;
  display: block;
}
.m-burger-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.m-burger-bars span:nth-child(1) { top: 0; }
.m-burger-bars span:nth-child(2) { top: 6px; }
.m-burger-bars span:nth-child(3) { top: 12px; }

/* X state */
body.m-drawer-open .m-burger-bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
body.m-drawer-open .m-burger-bars span:nth-child(2) {
  opacity: 0;
}
body.m-drawer-open .m-burger-bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* ============ Drawer ============ */
.m-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--drawer-w);
  z-index: 105;
  background: var(--c-surface-2);
  /* Sehr softer, kaum bewusst wahrnehmbarer Schatten — nur dezente Tiefe */
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.10);
  transform: translateX(100%);
  /* Langsamer reingleiten + am Ende deutlich abbremsen (starkes Ease-Out) */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}
body.m-drawer-open .m-drawer { transform: translateX(0); }

.m-drawer-nav {
  padding: 86px 40px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100dvh;
  box-sizing: border-box;
}
.m-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.m-drawer-nav ul a {
  display: block;
  padding: 11px 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.m-drawer-nav ul a:hover,
.m-drawer-nav ul a:focus-visible {
  opacity: 0.7;
}
.m-drawer-nav ul a.m-drawer-start {
  color: var(--c-accent);
}

.m-drawer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 0 20px;
}

.m-drawer-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 16px 12px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(217, 213, 235, 0.45);
  border-radius: 10px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.m-drawer-login .login-icon {
  width: 13px;
  height: 13px;
  display: block;
  flex: 0 0 auto;
}
.m-drawer-login:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
}

.m-drawer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: flex-start;
  margin-top: 18px;
  color: #fff;
  text-align: left;
}
.m-drawer-brand-logo,
.m-drawer-brand-name,
.m-drawer-brand-address {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.1px;
}
.m-drawer-brand-logo { color: #fff; }
.m-drawer-brand-logo strong { font-weight: 500; }
.m-drawer-brand-name {
  color: rgba(255, 255, 255, 0.5);
}
.m-drawer-brand-address {
  color: rgba(255, 255, 255, 0.5);
}
.m-drawer-brand-actions {
  display: inline-flex;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 14px;
  margin: 0;
}
.m-drawer-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: var(--c-accent);
  background: #333;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.m-drawer-contact .icon {
  width: 25px;
  height: 25px;
}
.m-drawer-contact:hover {
  background: #3a3a3a;
  transform: translateY(-1px);
}

/* ============ Page-Wrap Push (Parallax) ============ */
/* Content bewegt sich LANGSAMER (0.6s vs. Drawer 0.5s) und WENIGER weit
   (--drawer-shift ≈ 58% der Drawer-Breite) → Drawer „eilt voraus" und wirkt
   wie eine Ebene darüber. Gleiches Ease-Out wie der Drawer (Abbremsen am Ende). */
.page-wrap {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
body.m-drawer-open {
  overflow: hidden;
}
body.m-drawer-open .page-wrap {
  transform: translateX(calc(0px - var(--drawer-shift)));
}

/* ============ Scrim/Overlay ============ */
/* Dimmt den weggeschobenen Content; Klick darauf schließt den Drawer.
   z-index 104 = unter Drawer (105) + Burger (110), über Content + Logo (101). */
.m-overlay {
  position: fixed;
  inset: 0;
  z-index: 104;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
body.m-drawer-open .m-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Hide on desktop */
@media (min-width: 1051px) {
  .m-burger,
  .m-drawer {
    display: none !important;
  }
  body.m-drawer-open .page-wrap { transform: none; }
}

/* Show on mobile */
@media (max-width: 1050px) {
  .m-burger { display: inline-flex; }
  .m-drawer { display: block; }

  /* Logo wandert mit dem Content mit (gleicher Versatz, gleiche Geschwindigkeit) —
     bleibt dabei zentriert (translateX(-50%) erhalten). */
  .ll-logo-abs {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.m-drawer-open .ll-logo-abs {
    transform: translateX(calc(-50% - var(--drawer-shift)));
  }
}

/* =====================================================
   PER-SECTION GRADIENTS — the wave
   ===================================================== */

/* HERO — sits on body gradient (warm earth → deep navy area) */
.hero {
  background: transparent;
  padding-top: clamp(102px, 27vw, 172px);
  padding-bottom: clamp(28px, 3vw, 48px);
}
.hero .container { width: 100%; }
.hero-copy { max-width: 920px; }
.hero .display {
  max-width: 25em;
  /* font-size inherits from .display base — einheitliche Section-Größe */
}
.hero-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin: 28px 0 0;
}
/* =====================================================
   HERO DASHBOARD MOCKUP — browser window, parallax tilt
   ===================================================== */
.hero-dashboard {
  /* Natural Rendering-Größe des Dashboard-Mockups (Browser-Frame + Inhalt) */
  --dash-natural-w: 1180px;
  --dash-natural-h: 640px;
  /* Ziel-Breite: Desktop = 90% Viewport, Mobile = 95% (override unten),
     gecapped auf die natürliche Breite (kein Upscaling über 100%). */
  --dash-target-w: min(var(--dash-natural-w), 90vw);

  /* Container reserviert genau den visuellen Footprint — Layout-Box ist
     exakt target-w breit. Aspect-Ratio sorgt für die Höhe. */
  width: var(--dash-target-w);
  max-width: var(--dash-target-w);
  aspect-ratio: 1180 / 640;

  margin: clamp(48px, 6vw, 90px) auto 0;
  perspective: 2200px;
  transform-style: preserve-3d;

  /* Anchor für absolute .browser — keine Flex/Overflow-Tricks mehr,
     der innere Browser sitzt absolute und wird via translateX(-50%)
     im Tilt-JS zentriert. */
  position: relative;
  overflow: visible;
}
.hero-dashboard .browser {
  /* Aus dem Flow genommen — Layout-Footprint des Browsers ist 0,
     visuell wird er via transform: scale auf target-w gebracht. */
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: var(--dash-natural-w);     /* feste 1180px Layout-Größe */
  height: var(--dash-natural-h);    /* feste 640px Layout-Höhe — matched aspect-ratio Berechnung */
  transform-origin: 50% 0;          /* top-center für sauberes Tilt-Kippen */
  will-change: transform;
  /* Initial-Transform via CSS — verhindert Flash bei JS-Load (Browser würde
     sonst 1180×640 absolute übergroß in nachfolgende Sections reinragen).
     Nach JS-Load überschreibt Tilt-JS die transform mit translateX × rotateX × translateY × scale. */
  transform: translateX(-50%) scale(min(1, calc(var(--dash-target-w) / var(--dash-natural-w))));
}
.hero-dashboard .browser-body { min-height: 0; }

/* Mobile: 95% Viewport-Breite statt 90% */
@media (max-width: 768px) {
  .hero-dashboard {
    --dash-target-w: min(var(--dash-natural-w), 95vw);
  }
}
.browser {
  background: var(--ch-bg);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 60px 140px rgba(10, 12, 18, 0.18), 0 12px 30px rgba(10, 12, 18, 0.12);
  border: 1px solid var(--ch-border);
  transform-origin: 50% 100%;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ch-bg-soft);
  border-bottom: 1px solid var(--ch-divider);
}
.dot-traffic {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
}
.dot-traffic.red    { background: #ff5f57; }
.dot-traffic.yellow { background: #febc2e; }
.dot-traffic.green  { background: #28c840; }
.browser-url {
  margin-left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ch-text-mute);
  background: var(--ch-bg-input);
  padding: 4px 12px;
  border-radius: 999px;
}
.browser-body {
  display: grid;
  grid-template-columns: 184px 1fr;
  background: var(--ch-bg);
  color: var(--ch-text);
  min-height: 580px;
}

/* Sidebar — Labels sichtbar, kompakte Typo */
.dash-side {
  background: var(--ch-bg-soft);
  border-right: 1px solid var(--ch-divider);
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px;
}
.dash-logo-mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--ch-text);
  background: var(--ch-bg-input);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-logo-mark small { font-size: 10px; opacity: 0.8; }
.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ch-text-mid);
  cursor: default;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.01em;
}
.dash-nav-item i,
.dash-nav-item svg.icon { font-size: 11px; width: 13px; height: 13px; text-align: center; opacity: 0.85; flex-shrink: 0; vertical-align: middle; }
.dash-nav-item span { display: inline; }
.dash-nav-item.active {
  background: var(--ch-bg-elev);
  color: var(--ch-text);
}
.dash-nav-item.active i,
.dash-nav-item.active svg.icon { color: var(--ch-text); opacity: 1; }
.dash-nav-item:hover {
  background: var(--ch-bg-input);
  color: var(--ch-text);
}

/* Main area */
.dash-main {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.dash-greet {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ch-text);
}
.dash-sub {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ch-text-mute);
  margin-top: 2px;
}
.dash-range {
  display: inline-flex;
  background: var(--ch-bg-input);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--mono);
  font-size: 10px;
}
.dash-range span {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--ch-text-mute);
}
.dash-range span.active {
  background: var(--ch-bg-elev);
  color: var(--ch-text);
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}
.dash-tile {
  background: var(--ch-bg-elev);
  border: 1px solid var(--ch-border);
  border-radius: 18px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
  overflow: visible;
}
.dash-tile--twin {
  grid-column: 1 / -1;
  min-height: 200px;
}

.dash-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-tile-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ch-text-mid);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.dash-tile-title i,
.dash-tile-title svg.icon { color: var(--ch-text-mid); font-size: 11px; }
.dash-tile-trend {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--ch-text);
  letter-spacing: -0.02em;
}

/* Big stat block (Tile 1 + 2) — Zahl groß, Tag darunter */
.dash-tile-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.dash-tile-stat-num {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 500;
  color: var(--ch-text);
  letter-spacing: -0.025em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.dash-tile-stat-num span {
  font-size: 26px;
  color: var(--ch-text-mute);
  font-weight: 500;
  margin-left: 2px;
}
.dash-tile-stat-tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ch-text-mid);
  line-height: 1.35;
}
.dash-tile-stat-tag small {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ch-text-mute);
  letter-spacing: 0.02em;
}

/* Twin-Layout: Big Stats LINKS, Bars RECHTS */
.dash-twin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: center;
  flex: 1;
}
.dash-twin-stats-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-twin-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-twin-stat-num {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 500;
  color: var(--ch-text);
  letter-spacing: -0.025em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
/* .dash-twin-stat-num.positive Gradient wird zentral in der Gradient-Regel
   am Anfang gesetzt — hier kein color-override, sonst gewinnt der gegen den Gradient */
.dash-twin-stat-num.positive .hero-sign,
.dash-twin-stat-num.positive .hero-unit {
  -webkit-text-fill-color: inherit;          /* Sub-spans erben den parent gradient */
  color: inherit;
}
.dash-twin-stat-num .hero-sign {
  font-size: 0.55em;
  font-weight: 500;
  margin-right: 2px;
  opacity: 0.85;
}
.dash-twin-stat-num .hero-unit {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--ch-text-mute);
  margin-left: 2px;
}
.dash-twin-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ch-text-mid);
  letter-spacing: 0.01em;
}
.dash-twin-stat-label .dot { width: 8px; height: 8px; }
.dash-twin-divider {
  height: 1px;
  background: var(--ch-divider);
  margin: 0;
}
.dash-mini-bars,
.dash-mini-line,
.dash-mini-area {
  width: 100%;
  height: 80px;
  display: block;
  flex: 1;
}
.dash-twin-bars {
  width: 100%;
  height: 100px;
  display: block;
  flex: 1;
}

/* Twin-Pills im Header der Wide-Tile */
.dash-twin-stats { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.dash-twin-pill {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ch-text);
  background: var(--ch-bg-input);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.dash-twin-pill .dot { width: 8px; height: 8px; }

/* Donut — größer */
.dash-donut-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
}
.dash-donut { width: 110px; height: 110px; flex-shrink: 0; }
.dash-donut-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ch-text-mid);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-donut-meta div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash-donut-meta strong { color: var(--ch-text); font-weight: 500; }
.dash-donut-meta .dot { width: 8px; height: 8px; }
.dash-donut-foot {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--ch-divider);
  font-size: 10.5px !important;
  color: var(--ch-text-mute) !important;
  display: block !important;
}

/* KPI-Tile (Pipeline) */
.dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-kpi-num {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 500;
  color: var(--ch-text);
  letter-spacing: -0.025em;
  line-height: 1;
}
.dash-kpi-num span {
  font-size: 20px;
  color: var(--ch-text-mute);
  font-weight: 500;
  margin-left: 2px;
}
.dash-kpi-tag {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ch-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Dashboard: NIE umorganisieren — nur skalieren via transform: scale().
   Desktop-Struktur bleibt auf allen Breakpoints identisch (Sidebar links + Main rechts,
   2x2+1 grid, vertical sidebar, twin-layout 2-col).
   Auf Mobile/sehr schmal bleibt das Dashboard sichtbar als Mini-Dekoration —
   Scaling via clamp() (siehe .hero-dashboard --dash-scale) hält es proportional. */

/* GHL-Form-Pill (.ghl-form) entfernt — war in keinem HTML mehr benutzt.
   Native Umsetzung ersetzt alle GHL-Embeds. */

/* =====================================================
   CENTERED HEADLINES — applies across all sections
   ===================================================== */
.kicker,
.display,
.hero-sub,
.cta-sub,
.signoff {
  text-align: center;
}
.display,
.hero-sub,
.cta-sub {
  margin-left: auto;
  margin-right: auto;
}
.founder blockquote {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.hero-copy {
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.hero .status {
  /* inline-flex, centers via parent text-align */
  justify-content: center;
}
.form-note {
  text-align: center;
}

.status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 12px var(--c-accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* STATEMENT — eigene Section auf body-gradient (navy area).
   150px Top-Padding + relative/z-index damit der Block nicht ins Hero-Dashboard
   reinläuft (auch nicht durch absolute-positioned Hero-Dashboard-Box-Shadow). */
.statement {
  background: transparent;
  padding-top: 150px !important;
  padding-bottom: 80px;
  position: relative;
  z-index: 2;                       /* über das Hero-Dashboard-Stacking-Context */
  isolation: isolate;
}

/* APPROACH — Wettbewerbsvorteil-Vergleich, sits on body gradient */
.approach { background: transparent; }
.approach .display {
  max-width: 12ch;
  margin: 0 auto 18px;
  color: var(--c-ink);
}
/* Approach-Sub als 2-Spalten Grid — matched .vs-grid Layout exakt,
   damit "Alte Methoden" über old-Bars steht und "MarketLeaders.App" über new-Bars.
   `.vs` ist display:none → kein Grid-Item, andere 2 spans füllen die 2 Spalten. */
.approach-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1100px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  color: var(--c-ink-soft);
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.approach-sub-old {
  text-align: right;                           /* rechtsbündig — Richtung Center, über old-Bars */
  padding-right: 28px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-ink-faint);
  color: var(--c-ink-soft);
}
.approach-sub-new {
  text-align: left;                            /* linksbündig — Richtung Center, über new-Bars */
  padding-left: 28px;
  color: #ffffff;
  font-weight: 500;
}
.approach-sub .vs {
  /* "vs." Text aus der Sub-Line ausgeblendet — VS-Badge sitzt jetzt zentral
     zwischen den Bars (siehe .vs-grid::before). display:none entfernt das span
     auch aus dem Grid-Item-Count, sodass old + new exakt die 2 Spalten füllen. */
  display: none;
}

/* USP-Section — Unique Selling Proposition, sitzt visuell auf dem
   cream-peak des Body-Gradients */
.usp {
  padding: clamp(80px, 14vw, 200px) var(--pad);
  background: transparent;
  color: var(--c-ink);
  text-align: center;
}
.usp .kicker {
  color: var(--c-ink-soft);
}
.usp .display {
  color: var(--c-ink);
  max-width: 12ch;
  text-align: center;
  margin: 0 auto;
}
.usp .display em {
  color: var(--c-accent);
  font-style: normal;
  font-weight: inherit;
}
/* Sub-Text unter der USP-Headline */
.usp-sub {
  margin: 16px auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--c-ink-soft);
}
/* Card-Wrap: kein weißer Background mehr — nur die dunkle Chart-Karte ist sichtbar */
.usp-card-wrap {
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 1100px;
  padding: 0 clamp(8px, 2vw, 24px);
  text-align: left;
}
.usp-chart {
  /* Erbt von .chart (dunkler Background, border-radius, padding) — kein zusätzlicher Wrapper */
  margin: 0 auto;
  box-shadow: 0 24px 80px rgba(26, 13, 7, 0.18);
}
/* VS-Vergleich: zwei Spalten Pills mit kompakter Gap + überlappendem VS-Badge */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
  position: relative;                          /* anchor für VS-Badge */
}
/* VS-Badge — schwebend zentral, überlappt minimal in beide Bar-Spalten
   (badge 40px in 20px gap → ragt je 10px in old/new Bars rein, schwebt darüber). */
.vs-grid::before {
  content: 'vs.';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.vs-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vs-col--old { align-items: flex-end; }
.vs-col--new { align-items: flex-start; }

.vs-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 24px);
  color: #ffffff;
  line-height: 2.2;
  white-space: nowrap;
  /* Logische Bar-Länge — kommt aus inline `style="--len: X%"` pro Pill.
     Rechte Pills sind systematisch länger als linke (psychologischer Output).
     min-width: max-content stellt sicher, dass der Text nie clipped wird. */
  width: var(--len, auto);
  min-width: max-content;
  max-width: 100%;
  /* "Aufbau-Animation" — clip-path zugeschnitten → expandiert zum vollen Bereich.
     Längere Dauer (1.8s) mit sehr softer Verlangsamung am Ende für smootheren Look. */
  opacity: 0;
  will-change: clip-path, opacity;
  transition:
    clip-path 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.55s ease-out;
}

/* Linke Spalte: dunkler Gradient — geht NICHT ins voll Transparente, damit die
   Pill-Umrisse links noch schwach erkennbar bleiben (0.30 → 0.90 alpha).
   justify-content: flex-end dockt Text + X-Icon an die rechte Pill-Kante. */
.vs-pill--old {
  justify-content: flex-end;
  background: linear-gradient(90deg,
    rgba(50, 50, 70, 0.30) 0%,
    rgba(55, 55, 80, 0.55) 50%,
    rgba(75, 75, 100, 0.90) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  clip-path: inset(0 0 0 100%);
}
.vs-pill--old .vs-text { opacity: 0.5; }
.vs-pill--old .vs-icon {
  color: #ff6262;
  font-size: 1.3em;
  /* SVG-Stroke macht die X/Check-Linien dicker (FA-Solid-Look) */
  stroke: currentColor;
  stroke-width: 48;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Rechte Spalte: helle Pills mit reinen Grauwert-Verlauf — neutral, premium */
.vs-pill--new {
  background: linear-gradient(90deg, #1d2026 0%, #262a31 100%);
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.45);
  clip-path: inset(0 100% 0 0);
}
/* Check-Icon im Kreis (wie FAQ-Icon — runder BG, dunkler Stroke) */
.vs-pill--new .vs-icon {
  width: 28px;
  height: 28px;
  font-size: 14px;                             /* SVG-Inhalt kleiner als Wrapper */
  padding: 7px;
  box-sizing: border-box;
  background: rgba(182, 232, 115, 0.16);
  border-radius: 50%;
  color: var(--c-accent);
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 52;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Aufbau beim Scroll in den Viewport — clip löst sich auf, Pill wird voll sichtbar */
.approach.is-visible .vs-pill {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.approach.is-visible .vs-col .vs-pill:nth-child(1) { transition-delay: 0.00s; }
.approach.is-visible .vs-col .vs-pill:nth-child(2) { transition-delay: 0.10s; }
.approach.is-visible .vs-col .vs-pill:nth-child(3) { transition-delay: 0.20s; }
.approach.is-visible .vs-col .vs-pill:nth-child(4) { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .vs-pill { opacity: 1; clip-path: inset(0 0 0 0); transition: none; }
}

/* ============================================================
   MOBILE/TABLET (≤880px) — Leaderlogic-Style Stacked Cards mit VS-Badge
   ----------------------------------------------------------------
   Statt 2 horizontaler Pill-Spalten → 2 vertikal gestackte Karten:
   - obere Karte = MarketLeaders.App (good), heller BG, prominent
   - VS-Badge dazwischen (zentriert, kreisförmig)
   - untere Karte = Alte Methoden, dunkler/transparenter BG
   Beide Karten haben eigene Header, Pills volle Breite (keine %-Bars).
   ============================================================ */
@media (max-width: 880px) {
  /* Section-Subheader oben verstecken — Headers wandern in die Cards */
  .approach .approach-sub { display: none; }

  /* vs-grid: stacked + relativ als anchor für die VS-Badge */
  .vs-grid {
    grid-template-columns: 1fr;
    gap: 0;                          /* statt gap → Overlap via negativen margin */
    max-width: 460px;
    position: relative;
    padding: 0 4px;
  }

  /* Beide Cards: Padding, Border, Radius */
  .vs-col {
    align-items: stretch;
    gap: 10px;
    padding: 28px 20px 24px;
    border-radius: 28px;
    position: relative;
  }

  /* ALTE METHODEN = oben, dezenter BG (negativ) */
  .vs-col--old {
    order: -1;
    background: rgba(244, 239, 230, 0.025);
    border: 1px solid rgba(244, 239, 230, 0.08);
    z-index: 1;
  }
  .vs-col--old::before {
    content: 'Alte Methoden';
    display: block;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: rgba(244, 239, 230, 0.45);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
  }

  /* MARKETLEADERS.APP = unten, CREAM-Card im Farb-Look der Capability/System-Cards,
     überlagert die alte Card und lift via z-index + shadow */
  .vs-col--new {
    background: var(--c-surface);
    border: 1px solid var(--c-surface-line);
    margin-top: -40px;                /* Overlap nach oben in die alte Card */
    padding-top: 48px;
    z-index: 2;
    box-shadow:
      0 -8px 24px rgba(0, 0, 0, 0.25),
      0 18px 60px rgba(26, 13, 7, 0.18);
  }
  .vs-col--new::before {
    content: 'MarketLeaders.App';
    display: block;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
  }
  /* Pills innerhalb der hellen Card auf Mobile: gradient-BG mit weißem Text
     (überschreibt Desktop .vs-pill--new cream-BG, damit Pills auf der cream-Card
     sichtbar bleiben — sonst cream-on-cream unlesbar) */
  .vs-col--new .vs-pill,
  .vs-col--new .vs-pill--new {
    background: linear-gradient(90deg,
      var(--c-indigo) 0%,
      var(--c-lavender) 50%,
      var(--c-light) 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(44, 42, 82, 0.28);
  }
  .vs-col--new .vs-pill--new .vs-icon {
    color: #ffffff;
  }

  /* VS-Badge an der Overlap-Stelle zwischen den Karten — absolute zentriert.
     Position berechnet anhand der ersten Karte (Höhe der old-card + halber Overlap). */
  .vs-grid::before {
    content: 'vs.';
    position: absolute;
    /* Top wird durch CSS nicht ganz exakt zwischen Karten gesetzt;
       calc nutzt 50% der Old-Card-Höhe als grober Anker — adjust per JS bei Bedarf */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;                       /* über beiden Karten */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  }

  /* Pills volle Breite, statisch (keine Aufbau-Animation auf Mobile).
     Auf Desktop fade-in via clip-path + opacity, auf Mobile sofort voll sichtbar. */
  .vs-pill {
    width: 100% !important;
    --len: 100% !important;
    white-space: normal;
    font-size: 16px;
    padding: 12px 16px;
    justify-content: space-between;
    border-radius: 999px;
    /* Animation hart deaktivieren — keine clip-path/opacity Transition */
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  .vs-pill .vs-text { flex: 1; }
  /* Auch falls .approach.is-visible aktiv wird — bleibt statisch */
  .approach .vs-pill,
  .approach.is-visible .vs-pill {
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }

  /* ALTE Pills: X-Icon LINKS via row-reverse */
  .vs-pill--old {
    flex-direction: row-reverse;
    justify-content: flex-end;        /* zusammen-gerückt: Icon dann Text */
    gap: 12px;
  }
  .vs-pill--old .vs-text { text-align: left; flex: 1; }

  /* NEUE Pills: Check-Icon links wie gehabt (HTML hat checkmark vor text) */
  .vs-pill--new {
    justify-content: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   CAPABILITIES — 5 Feature-Cards mit code-generierten SVG-Charts.
   Layout-Pattern: 2-Col Card-Grid, weiß, Brand-Farben für Charts.
   ============================================================ */
.capabilities .display {
  color: var(--c-ink);
  max-width: 12ch;
  margin: 0 auto clamp(50px, 6vw, 80px);
}
.capabilities .kicker {
  color: var(--c-ink-soft);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.cap-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,248,252,0.88));
  border-radius: 84px;
  overflow: hidden;
  box-shadow: 0 14px 140px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column-reverse;
  min-height: 580px;
}
.cap-card--wide {
  grid-column: 1 / -1;
  min-height: 460px;
}

/* Visual area = chart (now bottom, after column-reverse) */
.cap-visual {
  padding: 24px;
  background: transparent;
  flex: 1;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cap-card--wide .cap-visual {
  padding: 28px 32px;
}

/* Text area now above visual */
.cap-text {
  padding: 70px 70px 2px;
  background: transparent;
}
.cap-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5870b8;
  margin: 0 0 12px;
}
.cap-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5.2vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ch-text);
  margin: 0 0 16px;
}
.cap-body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ch-text-mid);
  margin: 0;
}

/* ====== Chart shell — Conicorn-style: hellgrau, dezent, max 620px breit ====== */
.chart {
  background: var(--ch-bg);
  border-radius: 36px;                       /* von 66 → 36, weniger pillig, mehr card */
  border: 1px solid var(--ch-border);
  padding: 28px 36px;
  width: 100%;
  max-width: 620px;                          /* Charts werden nicht zu breit, bleiben "card"-Format */
  margin: 0 auto;                            /* zentriert innerhalb cap-visual */
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ch-text);
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chart-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ch-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chart-title i {
  color: var(--ch-text-mid);
  font-size: 13px;
}
.chart-range {
  display: inline-flex;
  background: var(--ch-bg-input);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.chart-range span {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ch-text-mute);
}
.chart-range span.active {
  background: var(--ch-active-bg);
  color: var(--ch-text);
  box-shadow: 0 1px 3px rgba(10, 12, 18, 0.08);
}
.chart-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ch-text-mid);
  background: var(--ch-bg-input);
  padding: 5px 10px;
  border-radius: 999px;
}
.chart-pill.positive {
  background: var(--ch-positive-bg);
  color: var(--ch-positive);
}

.chart-stat {
  margin: 4px 0 6px;
}
.chart-stat--row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.chart-stat-num {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 500;
  color: var(--ch-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.chart-stat-num span {
  font-size: 24px;
  font-weight: 500;
  color: var(--ch-text-mute);
  margin-left: 2px;
}
.chart-stat-tag {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ch-text-mid);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-stat-tag.positive {
  color: var(--ch-positive);
  font-weight: 500;
}

/* Sparkline + line charts */
.chart-sparkline,
.chart-line {
  width: 100%;
  height: 120px;
  display: block;
}
.chart-bars {
  width: 100%;
  height: 130px;
  display: block;
}
.chart-bars--yoy { height: 100px; }
.chart-bars--twin { height: 150px; }
.chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ch-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 4px;
}
.chart-axis--six { padding: 0 2px; }
.chart-axis--twelve { padding: 0 4px; font-size: 9px; letter-spacing: 0.04em; }

/* Hero stats — C-Level Twin */
.chart-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 4px 10px;
  border-bottom: 1px solid var(--ch-divider);
}
.hero-stat { display: flex; flex-direction: column; gap: 6px; }
.hero-num {
  font-family: var(--sans);
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ch-negative);                  /* default = down-trend, blass grau */
  display: inline-flex;
  align-items: baseline;
  /* Wichtige Zahlen in Pill-BG (30px radius, leicht abgedunkelt — wie FAQ-Icon-Kreis) */
  padding: 6px 18px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 30px;
}
/* .hero-num.positive Gradient wird zentral oben gesetzt (background-clip text) —
   hier nur die child-Spans auf inherit, damit der Gradient durchschlägt */
.hero-num.positive .hero-sign,
.hero-num.positive .hero-unit {
  -webkit-text-fill-color: inherit;
  color: inherit;
}
.hero-sign {
  font-size: 0.6em;
  font-weight: 500;
  margin-right: 4px;
  opacity: 0.85;
}
.hero-unit {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--ch-text-mute);
  margin-left: 4px;
}
/* .hero-num.positive .hero-unit override entfernt — inherit gewinnt jetzt */
.hero-tag {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ch-text-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.hero-tag.positive { color: var(--ch-positive); }
.hero-divider {
  width: 1px;
  align-self: stretch;
  background: var(--ch-divider);
}

/* SVG path/rect/circle attribute-overrides für Light-Theme.
   Semantik:
   - Ursprünglich BLAUE Akzente (#d4d8ff / #a8b0f0) = POSITIVE Trends → periwinkle
   - Ursprünglich GRAUBLAUE/dunkle Akzente (#3a3d5a / #5a5f7a / #6c6f8c) = NEGATIVE Trends → blass grau
   Greift in beiden Scopes: .chart (capabilities) + .browser (hero-dashboard). */

/* === POSITIVE (Periwinkle) === */
/* Bars (rect) bekommen einen Verlauf nach unten heller — siehe #ch-bar-positive in index.html */
.chart svg rect[fill="#d4d8ff"], .browser svg rect[fill="#d4d8ff"],
.chart svg rect[fill="#a8b0f0"], .browser svg rect[fill="#a8b0f0"] {
  fill: url(#ch-bar-positive);
}
/* Nicht-Bar-Elemente (Linien-Endpunkte, Pfade) bleiben solid */
.chart svg circle[fill="#d4d8ff"], .browser svg circle[fill="#d4d8ff"],
.chart svg path[fill="#d4d8ff"], .browser svg path[fill="#d4d8ff"],
.chart svg path[fill="#a8b0f0"], .browser svg path[fill="#a8b0f0"] {
  fill: var(--ch-positive);
}
.chart svg path[stroke="#d4d8ff"], .browser svg path[stroke="#d4d8ff"],
.chart svg path[stroke="#a8b0f0"], .browser svg path[stroke="#a8b0f0"],
.chart svg circle[stroke="#d4d8ff"], .browser svg circle[stroke="#d4d8ff"],
.chart svg line[stroke="#d4d8ff"], .browser svg line[stroke="#d4d8ff"] {
  stroke: var(--ch-positive);
}
.chart svg stop[stop-color="#d4d8ff"], .browser svg stop[stop-color="#d4d8ff"],
.chart svg stop[stop-color="#a8b0f0"], .browser svg stop[stop-color="#a8b0f0"] {
  stop-color: var(--ch-positive);
}

/* Area-Fade NACH UNTEN HELLER — gilt für ALLE Charts UND ALLE Hero-Dashboard-SVGs
   (dash-mini-line, dash-mini-area, dash-mini-bars, dash-twin-bars, dash-donut, ...).
   Stop bei 0% (oben): dunkler. Stop bei 100% (unten): weiß-getönt halbtransparent. */
.chart svg linearGradient stop[offset="0%"],
.browser svg linearGradient stop[offset="0%"] {
  stop-opacity: 0.55;
}
.chart svg linearGradient stop[offset="100%"],
.browser svg linearGradient stop[offset="100%"] {
  stop-color: #ffffff !important;
  stop-opacity: 0.5 !important;
}
/* Auch radialGradients (Donut-Charts etc.) konsistent behandeln */
.chart svg radialGradient stop[offset="0%"],
.browser svg radialGradient stop[offset="0%"] {
  stop-opacity: 0.55;
}
.chart svg radialGradient stop[offset="100%"],
.browser svg radialGradient stop[offset="100%"] {
  stop-color: #ffffff !important;
  stop-opacity: 0.5 !important;
}

/* === NEGATIVE (blass helles Grau) === */
.chart svg rect[fill="#3a3d5a"], .browser svg rect[fill="#3a3d5a"],
.chart svg rect[fill="#5a5f7a"], .browser svg rect[fill="#5a5f7a"],
.chart svg path[fill="#3a3d5a"], .browser svg path[fill="#3a3d5a"],
.chart svg circle[fill="#5a5f7a"], .browser svg circle[fill="#5a5f7a"] {
  fill: var(--ch-negative);
}
.chart svg path[stroke="#5a5f7a"], .browser svg path[stroke="#5a5f7a"],
.chart svg path[stroke="#6c6f8c"], .browser svg path[stroke="#6c6f8c"] {
  stroke: var(--ch-negative);
}
.chart svg stop[stop-color="#5a5f7a"], .browser svg stop[stop-color="#5a5f7a"] {
  stop-color: var(--ch-negative);
}

/* Bar chart legend */
.chart-legend {
  display: flex;
  gap: 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ch-text-mid);
  flex-wrap: wrap;
}
.chart-legend--compact { font-size: 11px; gap: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--dark { background: var(--ch-negative); }      /* Legacy-Name: war früher dunkel-blau = "negativer" Trend → blass grau */
.dot--light { background: var(--ch-positive); }     /* Legacy-Name: war früher hell-blau = "positiver" Trend → periwinkle */
.dot--mute { background: var(--ch-border); }

/* Bar chart footer stats */
.chart-foot {
  display: flex;
  gap: 24px;
  padding-top: 6px;
  border-top: 1px solid var(--ch-divider);
}
.chart-foot-num {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--ch-text);
}
.chart-foot-num span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ch-text-mute);
  margin-left: 4px;
}
.chart-foot-num.positive { color: var(--ch-positive); }

/* Star rating */
.rating-stars {
  display: inline-flex;
  gap: 3px;
  font-size: 18px;
  color: var(--ch-positive);
}

/* Ranking chart */
.rank-chart {
  margin-top: 8px;
}
.rank-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-text-mute);
  margin-bottom: 6px;
}
.chart-ranking {
  width: 100%;
  height: 60px;
  display: block;
}
.rank-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ch-text-mid);
  font-weight: 500;
  margin-top: 4px;
}

/* Mega stat (AI Support card) */
.chart-mega {
  text-align: left;
  margin: 4px 0;
}
.mega-num {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ch-text);                       /* neutral schwarz default — Override via .positive Klasse */
}
.mega-num span {
  font-size: 32px;
  font-weight: 500;
  color: var(--ch-text-mute);
  margin-left: 4px;
  /* span erbt nicht den background-clip vom Parent — explizit zurücksetzen */
  -webkit-text-fill-color: var(--ch-text-mute);
  background: none;
}
.mega-tag {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ch-text-mid);
  margin-top: 6px;
}

/* Donut + legend layout (wide card) */
.chart--wide {
  flex: 1;
}
.donut-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding-top: 4px;
}
.chart-donut {
  width: 140px;
  height: 140px;
  display: block;
}
.donut-stack {
  position: relative;
  display: inline-flex;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-center-num {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--ch-text);
  letter-spacing: -0.02em;
}
.donut-center-num span {
  font-size: 18px;
  font-weight: 500;
  color: var(--ch-text-mute);
  margin-left: 1px;
}
.donut-center-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ch-text-mute);
  margin-top: 4px;
}
.dot--midblue { background: #6c6f8c; }
.donut-legend {
  display: grid;
  gap: 10px;
}
.legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ch-text-mid);
}
.legend-label { color: var(--ch-text-mid); }
.legend-val {
  font-weight: 500;
  color: var(--ch-text);
  font-variant-numeric: tabular-nums;
}
.legend-row--sum {
  padding-top: 8px;
  border-top: 1px solid var(--ch-divider);
}
.legend-row--sum .legend-val { font-size: 16px; }

/* Mobile: stack cards — 95vw breite (Viewport-relativ), Text mit 50px padding (0 bottom zum Graph), headline min 30px */
@media (max-width: 880px) {
  /* Container-Padding für Capabilities aufheben, damit Cards 95vw einnehmen können */
  .capabilities { padding-left: 0; padding-right: 0; }
  .capabilities .container { padding-left: 0; padding-right: 0; max-width: 100vw; }
  .capabilities .kicker,
  .capabilities > .container > .display { padding-left: var(--pad); padding-right: var(--pad); }

  .cap-grid { grid-template-columns: 1fr; gap: 20px; max-width: 100%; padding: 0; }
  .cap-card { min-height: 0; width: 95vw; margin: 0 auto; }
  .cap-text { padding: 50px 50px 0; }
  .cap-visual { padding: 18px; }
  .cap-headline { font-size: clamp(38px, 5.2vw, 54px); }
  .mega-num { font-size: 52px; }
  .donut-wrap { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .donut-legend { width: 100%; }
}

/* FEATURES — sits on body gradient (descending from cream back to dark) */
.features {
  background: transparent;
  /* padding-top wird von der section-Regel auf 140px gesetzt — keine Override */
}
.features .feature-grid { margin-top: 0; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-line);
}
.feature-grid article {
  padding: 40px 32px 48px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.feature-grid article:nth-child(3n) { border-right: none; }
.feature-grid .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-ink-faint);
  display: block;
  margin-bottom: 36px;
}
.feature-grid h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  margin: 0 0 12px;
}
.feature-grid p { margin: 0; color: var(--c-ink-soft); font-size: 19px; line-height: 1.5; }

@media (max-width: 960px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid article:nth-child(3n) { border-right: 1px solid var(--c-line); }
  .feature-grid article:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { border-right: none !important; }
}

/* =====================================================
   TESTIMONIALS — Conicorn-style, 1:1 nachgebaut
   Variablen-Werte gemappt aus conicorn.webflow.io (Geist tokens).
   Section sitzt auf dem Body-Gradient (black-valley) — Cards bleiben hell.
   ===================================================== */
.testimonials-conicorn {
  position: relative;
  background: transparent;
  padding: 0; /* eigene Spacing über .tc-layout */
  overflow: hidden;
}
.tc-layout {
  padding-top: 6.25rem;         /* --_spacing---xmedium */
  padding-bottom: 6.25rem;
  display: flex;
  flex-direction: column;
  row-gap: 5rem;                /* --_spacing---medium */
}
.tc-padding-global {
  flex: 1;
  padding-left: 5%;
  padding-right: 5%;
}
.tc-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Heading layout (centered) */
.tc-heading-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 1.5rem;
}
.tc-eye-brow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.6em;
  border-radius: 100vw;          /* --_radius---round */
  background-color: rgba(255,255,255,0.06);
  color: var(--c-ink);
  font-size: 0.75rem;            /* --font-size--body-xs */
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.6em 1em;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}
.tc-eye-brow-number {
  color: var(--c-ink);
}
.tc-eye-brow-text-wrap {
  display: inline-flex;
  align-items: center;
  column-gap: 0.333333em;
}
.tc-eye-brow-dot {
  width: 0.6em;
  height: 0.6em;
  aspect-ratio: 1;
  border-radius: 100vw;
  background-color: var(--c-accent);
  display: inline-block;
}
.tc-heading-h2 {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 80px);     /* einheitliche Section-Headline-Größe */
  line-height: 1em;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--c-ink);
  margin: 0;
  max-width: 25em;                       /* Section-Headline-Breite (Jan: 25em) */
}

/* Cards grid */
.tc-main {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0.5rem;
}

/* Vertical columns — each .tc-col stacks 3 cards */
.tc-col {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
.tc-col--2 {
  padding-top: 5rem;              /* Conicorn-style offset for middle column */
}

/* Slider-Navigation — auf Desktop versteckt, im Mobile-Block ≤991px aktiviert */
.tc-nav {
  display: none;
}
.tc-nav-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 100vw;
  border: 1px solid rgba(244, 239, 230, 0.2);
  background: rgba(244, 239, 230, 0.06);
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tc-nav-btn:hover {
  background: rgba(244, 239, 230, 0.14);
  border-color: rgba(244, 239, 230, 0.45);
}
.tc-nav-btn:active {
  transform: scale(0.94);
}
.tc-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.tc-nav-btn svg {
  display: block;
}

/* Card shell — parallax applied on .tc-col, cards themselves are static */
.tc-card {
  border-radius: 3rem;            /* --_radius---radius-3xl */
  background-color: var(--c-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  color: var(--c-ink);
}

/* Default (text) card */
.tc-default {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  padding: 2.5rem;
}
.tc-default-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.tc-default-avatar {
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1;
  border-radius: 100vw;
  object-fit: cover;
  background-color: var(--tc-avatar-bg, #d4a574);
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  user-select: none;
}
.tc-default-title {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}
.tc-default-name {
  font-weight: 500;
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.3;
}
.tc-default-info {
  color: var(--c-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.tc-default-icon {
  position: absolute;
  inset: 0% 0% auto auto;
  height: 1.5rem;
  width: auto;
  opacity: 0.2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
}
.tc-default-icon svg {
  height: 1.5rem;
  width: auto;
}
.tc-default-text {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
}

/* Video (featured) card */
.tc-card--video {
  background-color: #1a1a1a;       /* --_color---grey--01 */
  color: #fff;
}

/* Photo-background featured card — large, dark gradient overlay over portrait */
.tc-card--photo {
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center top;       /* Default — pro Bild via inline-style überschrieben */
  background-repeat: no-repeat;          /* Wichtig falls inline-size kleiner als Card */
  color: #fff;
  position: relative;
  isolation: isolate;
}
/* Soft top-fade auf dunklen Card-BG damit Bilder mit kleinerer background-size
   (z.B. Jens) am unteren Bildrand nicht hart abreißen */
.tc-card--photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  background: linear-gradient(180deg, transparent 0%, #1a1a1a 100%);
  z-index: 0;
  pointer-events: none;
}
.tc-card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.7) 100%);
  z-index: 0;
  pointer-events: none;
}
.tc-card--photo > * { position: relative; z-index: 1; }
.tc-card--photo .tc-video {
  background-color: transparent;
  /* Großzügiges Top-Padding damit das Gesicht im oberen Bilddrittel frei sichtbar bleibt.
     Bottom + sides: normales card padding (2.5rem ≈ 40px). */
  padding: 2.5rem;
  justify-content: flex-end;
  row-gap: 0;
  min-height: 30rem;
}
.tc-card--photo .tc-video-btn {
  display: none;                         /* Play-Button raus — keine Videos, nur Portraits */
}
.tc-card--photo .tc-video-content {
  row-gap: 10px;                         /* exakt 10px zwischen Headline und Name/Rolle */
  align-items: flex-start;               /* linksbündig */
}
.tc-card--photo .tc-video-logo {
  height: auto;                          /* Override der fix-height von 2rem */
  text-transform: none;                  /* normaler Text statt UPPERCASE */
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.85);
  opacity: 1;
}
.tc-card--photo .tc-video-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.15;
}

/* Avatar that uses an <img> instead of initials */
.tc-default-avatar--img {
  padding: 0;
  background-color: transparent;
}
.tc-default-avatar--img img {
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  object-fit: cover;
  display: block;
}
.tc-video {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 2rem;
  min-height: 30rem;
  padding: 2rem;
  background-color: #1a1a1a;
  color: #fff;
}
.tc-video-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 100vw;
  background-color: rgba(255,255,255,0.4);  /* --_color---white--04 = #fff6 */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 12px #fff;
  align-self: flex-start;
  transition: background-color .2s ease;
}
.tc-video-btn:hover {
  background-color: rgba(255,255,255,0.6); /* --_color---white--03 = #fff9 */
}
.tc-video-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}
.tc-video-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.5rem;
}
.tc-video-logo {
  height: 2rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.tc-video-title {
  font-size: 2rem;                  /* --font-size--title-l */
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  font-family: var(--serif);
}

/* Tablet ≤991px — horizontal scroll snake */
@media screen and (max-width: 991px) {
  .tc-layout {
    padding-top: 5rem;
    padding-bottom: 5rem;
    row-gap: 3rem;
  }
  .tc-main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;          /* Karten oben andocken, eigene Höhe behalten */
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;    /* sanftes Snap — lang gleitend, nicht hart */
    scroll-behavior: smooth;          /* Arrow-Klicks animieren weich */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    gap: 0.75rem;
    cursor: grab;                     /* Hint für Maus-Drag */
    scrollbar-width: none;            /* Firefox: Scrollbar weg */
    -ms-overflow-style: none;         /* IE/Edge legacy */
    touch-action: pan-x;              /* Browser nicht in vertikalen Scroll umlenken */
  }
  .tc-main::-webkit-scrollbar {
    display: none;                    /* Chrome/Safari/Edge: Scrollbar weg */
  }
  .tc-main.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;           /* während Drag kein Snap, sonst zuckt's */
    scroll-behavior: auto;            /* Drag muss instant folgen, nicht easen */
    user-select: none;
  }
  .tc-main.is-dragging * {
    pointer-events: none;             /* Links/Buttons schlucken den Drag nicht */
  }
  .tc-main.tc-padding-global {
    padding-bottom: 1rem;
  }
  /* Spalten auf Mobile auflösen — Cards werden direkte Flex-Kinder von .tc-main,
     damit jede Card ein eigenes Snap-Target ist (Conicorn-Mechanik) */
  .tc-col {
    display: contents;
  }
  /* legacy .tc-row (im HTML nicht mehr benutzt) — defensiv, falls jemals hinzugefügt */
  .tc-row {
    display: contents;
  }
  .tc-card {
    width: 44vw;
    flex: none;
    align-self: flex-start;           /* eigene Höhe, oben andocken */
    scroll-snap-align: start;
    row-gap: 1.5rem;
  }
  /* Slider-Navigation sichtbar nur im Slider-Mode */
  .tc-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .tc-default {
    padding: 1.5rem;
    row-gap: 1.5rem;
  }
  .tc-video {
    padding: 1.5rem;
    min-height: 24rem;
  }
  .tc-video-logo {
    height: 1.5rem;
  }
  .tc-video-title {
    font-size: 1.5rem;
  }
  .tc-video-content {
    row-gap: 1rem;
  }
}

/* Mobile ≤767px — wider cards */
@media screen and (max-width: 767px) {
  .tc-card {
    width: 65vw;
    row-gap: 1rem;
  }
  .tc-default {
    row-gap: 1rem;
  }
  .tc-default-top {
    row-gap: 0.5rem;
  }
  .tc-row {
    padding-top: 0;
    padding-bottom: 0;
  }
  .tc-heading-h2 {
    font-size: clamp(44px, 11vw, 64px);
  }
  .tc-default-avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.25rem;
  }
}

/* =========== FOUNDER — sits on body gradient (rising from black) =========== */
.founder { background: transparent; }

/* =========== SYSTEM vs CHAOS — sits on body gradient (founder → faq übergang) =========== */
.system { background: transparent; }
.system-headline { text-align: center; margin: 0 auto clamp(50px, 6vw, 80px); }
.system-headline strong {
  font-weight: inherit;
  font-style: normal;
}
.system-headline .system-strike {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(244, 239, 230, 0.55);
  color: rgba(244, 239, 230, 0.55);
  display: inline-block;
}

/* Grid: 1fr 1fr, ABER white card überlappt chaos via negative margin (Vorbild-Maß) */
.system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

/* Linke Karte: Chaos — solid dark, 77px radius (Vorbild) */
.system-card--chaos {
  background: rgb(21, 21, 21);
  border-radius: 77px;
  padding: 72px 68px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px 2px;
  position: relative;
  z-index: 1;
  min-height: 540px;
  /* flex column damit das Grid via flex:1 die volle Padding-Fläche füllt */
  display: flex;
  flex-direction: column;
}
.tool-grid {
  /* Grid füllt die gesamte Inner-Padding-Fläche der Chaos-Card.
     space-between auf beiden Achsen verteilt die Icons gleichmäßig —
     Gaps wachsen/schrumpfen automatisch mit der Card-Größe. */
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 52px);
  grid-auto-rows: 52px;
  justify-content: space-between;
  align-content: space-between;
  opacity: 0.3;
}
.tool-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: transform 0.3s ease;
}
.tool-icon:hover { transform: scale(1.15); }
.tool-icon:hover { transform: scale(1.15); }
.tool-icon img,
.tool-icon .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Rechte Karte: All in One — 111px radius, überlappt chaos card (-90px),
   starker Schatten der nach links zieht (Vorbild-Werte) */
.system-card--all {
  background: var(--c-surface);
  border: 1px solid var(--c-surface-line);
  border-radius: 111px;
  padding: 60px 56px 56px;
  margin-left: -90px;
  box-shadow: rgba(0, 0, 0, 0.5) -60px 20px 112px 0px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.system-m {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: -52px auto 24px;
  display: block;
  box-shadow: 0 8px 24px rgba(106, 92, 255, 0.4);
}
.system-all-title {
  font-family: var(--serif);              /* einheitliche Headline-Font (Geist Sans) */
  font-weight: 500;
  font-size: clamp(48px, 5.5vw, 76px);
  line-height: 1;
  color: var(--c-ink);
  margin: 0 0 32px;
  text-align: center;
}
.system-features {
  list-style: none;
  padding: 0 0 0 8px;
  margin: 0;
  display: grid;
  gap: 3px;
  max-width: max-content;
}
.system-features li {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Check-Icon im Kreis (FAQ-Icon-Pattern) — etwas größer als die Typo (26px Text → 36px Kreis) */
.system-features li svg.icon {
  color: var(--c-accent);
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  font-size: 16px;                    /* Symbol-Größe innen (kleiner als Wrapper) */
  padding: 10px;
  box-sizing: border-box;
  background: rgba(182, 232, 115, 0.16);
  border-radius: 50%;
  stroke: currentColor;
  stroke-width: 52;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.system-features-more {
  color: var(--c-ink-faint);
  font-size: 24px !important;
  padding-left: 36px;
  letter-spacing: 0.25em;
}

/* CTA-Button unter All-in-One Feature-Liste — dunkler Pill mit Pfeil,
   scrollt smooth zum Footer-CTA (href="#cta") */
.system-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 32px auto 0;
  padding: 16px 30px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  align-self: center;
  box-shadow: 0 8px 24px rgba(15, 15, 26, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.system-cta:hover {
  background: var(--c-accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 15, 26, 0.4);
}
.system-cta:active {
  transform: translateY(0);
}
.system-cta svg {
  transition: transform 0.25s ease;
}
.system-cta:hover svg {
  transform: translateX(4px);
}

/* Mobile: Stack mit Überlappung (untere weiße Karte überlagert obere schwarze) */
@media (max-width: 880px) {
  /* Section füllt 95% Viewport-Breite — durchbricht container-padding */
  .system > .container {
    max-width: none;
    width: 95vw;
    padding-left: 0;
    padding-right: 0;
  }
  .system-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    width: 100%;
    gap: 0;            /* gap 0, damit überlappendes margin-top sauber wirkt */
  }
  .system-card--chaos {
    border-radius: 36px;
    min-height: 280px;             /* niedriger weil 6 Cols ⇒ weniger Reihen */
    position: relative;
    z-index: 1;
    padding: 32px 24px 28px;
    width: 70%;                    /* nur 70% Viewport-Breite */
    margin-left: auto;
    margin-right: auto;
  }
  /* Logo-Grid: 6 Spalten statt 4 — weniger Reihen, kompaktere Card */
  .tool-grid {
    grid-template-columns: repeat(6, 28px);
    grid-auto-rows: 28px;
  }
  .tool-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  /* Mobile CTA-Button: kompakter, full-width-friendly */
  .system-cta {
    margin-top: 24px;
    padding: 14px 24px;
    font-size: 18px;
  }
  /* Untere weiße Karte überlappt obere schwarze + 200px weicher Shadow nach oben */
  .system-card--all {
    margin-left: 0;
    margin-top: -60px;
    border-radius: 44px;
    padding: 60px 32px 40px;
    position: relative;
    z-index: 2;
    box-shadow: 0 -80px 200px 0 rgba(0, 0, 0, 0.5);
  }
}

/* =========== FAQ — sits on body gradient (rising to cream peak 2) =========== */
.faq { background: transparent; }
.faq .kicker { color: var(--c-ink-soft); }
.faq .display {
  color: var(--c-ink);
  max-width: 12ch;
  margin: 0 auto clamp(60px, 8vw, 100px);
}

.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.faq-item {
  position: relative;
  background: rgb(255 255 255 / 10%);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(6px);
}
.faq-item:hover { background: rgba(255, 255, 255, 0.08); }
.faq-item.is-open {
  background: var(--c-surface);
  border-color: transparent;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
/* 3px Border-Ring beim aktiven Item — nutzt die Brand-Wave-Farben. */
.faq-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--c-accent)            0%,
    rgba(182, 232, 115, 0.45) 50%,
    rgba(182, 232, 115, 0.12)  100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.faq-item.is-open::before { opacity: 1; }

/* Trigger button — replaces <summary> */
.faq-trigger {
  width: 100%;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--c-ink);
  text-align: left;
  user-select: none;
}

.faq-num {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-surface-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.faq-question { flex: 1; }

/* Icon: rotates 45° from + to ✕ on open. Background + color shift simultaneously. */
.faq-icon {
  flex: 0 0 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-accent);
  position: relative;            /* Containing-Block für die Plus-Balken */
  transition:
    background 0.45s ease,
    color 0.45s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Filigranes Plus aus zwei dünnen Balken — rein CSS, kein SVG (leichter +
   skaliert sauber). Rotiert mit .faq-icon → wird im offenen Zustand zum ×.
   Größe = Balken-Länge, Strichstärke = Balken-Dicke. */
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;      /* folgt color: dunkel → weiß (offen) */
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 24px; height: 1.6px; }   /* horizontaler Balken */
.faq-icon::after  { width: 1.6px; height: 24px; }   /* vertikaler Balken */

.faq-item.is-open .faq-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-ink);
  transform: rotate(45deg);   /* + → ✕ */
}

/* Smooth open/close via grid-template-rows: 0fr → 1fr. Modern, GPU-friendly. */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-content {
  grid-template-rows: 1fr;
}
/* Wenn offen: kompletter Content-Bereich ist klickbar zum Schließen */
.faq-item.is-open .faq-inner {
  cursor: pointer;
}
.faq-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-answer,
.faq-inner p {
  margin: 0;
  padding: 14px 68px 26px 72px;
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--c-ink-soft);
}
.faq-inner strong { color: var(--c-ink); font-weight: 500; }
.faq-inner p + p { padding-top: 0; }
.faq-inner p:not(:last-child) { padding-bottom: 12px; }

/* Wenn offen: Abstand zwischen Frage und Antwort enger ziehen */
.faq-item.is-open .faq-trigger {
  padding-bottom: 0px;
  transition: padding-bottom 0.4s ease;
}
.faq-trigger { transition: padding-bottom 0.4s ease; }

.faq-contact {
  text-align: center;
  margin: clamp(50px, 6vw, 80px) auto 0;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--c-ink-soft);
}
.faq-contact a {
  color: var(--c-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.faq-contact a:hover { border-color: var(--c-ink); }

@media (max-width: 600px) {
  .faq-trigger { padding: 20px 10px 20px 20px; font-size: 18px; gap: 14px; }
  .faq-num { display: none; }                      /* Nummer auf Mobile ausblenden */
  .faq-icon { flex: 0 0 36px; height: 36px; }
  /* Antwort-Text bündig mit der Frage — gleiches Links-Padding (20px) */
  .faq-inner p, .faq-answer { padding: 10px 32px 43px 20px; font-size: 18px; }
  .faq-inner p + p { padding-top: 0; }
  .faq-inner p:not(:last-child) { padding-bottom: 10px; }
  .faq-item.is-open .faq-trigger { padding-bottom: 6px; }
}
.founder { text-align: center; }
.founder .container {
  max-width: 1100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.founder .container > * {
  margin-left: auto;
  margin-right: auto;
}
.founder .kicker,
.founder blockquote,
.founder .founder-signature,
.founder .signoff {
  text-align: center;
}
.founder-portrait {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 32px;
  background: linear-gradient(135deg, #2c2a52, #6c6f8c);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-portrait-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 44px;
  color: #d4d8ff;
  letter-spacing: -0.02em;
}
.founder-portrait--fallback .founder-portrait-fallback { display: flex; }
.founder blockquote {
  margin: 0 0 28px;
  font-style: normal;
  max-width: 24ch;
}
.founder blockquote em { font-style: normal; font-weight: inherit; color: var(--c-accent); }
.founder-signature {
  /* Inline-SVG mit handgeschriebenem "Jan Froboese" via Caveat Webfont.
     Höhe wird über clamp gesteuert, width:auto behält das SVG-Aspect-Ratio. */
  display: block;
  width: clamp(220px, 22vw, 320px);
  height: clamp(54px, 5.5vw, 78px);
  color: var(--c-ink);
  margin: 0 auto 12px;
  overflow: visible;
}
.founder-signature text {
  letter-spacing: -3px;
}
.signoff {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.signoff strong { color: var(--c-ink); font-weight: 500; }

/* Founder Quote — ein durchgehender Solid-Block ohne Absatzbruch.
   Behält Display-Typo (clamp(38px, 4vw, 48px) / line-height 1.2) wie zuvor,
   max-width passend für ein zusammenhängender Block. */
.founder-quote {
  max-width: 31ch !important;
  font-size: clamp(34px, 3vw, 40px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.03em !important;
}
@media (max-width: 600px) {
  .founder-quote {
    max-width: 92vw !important;
    font-size: clamp(38px, 6.5vw, 42px) !important;
  }
}

/* Referenzen-Bar unterhalb des Founder-Signoffs */
.founder-refs {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
  max-width: none !important;     /* override .founder .container > * inheritance */
}
.founder-refs-logos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 6vw, 96px);    /* mehr Abstand, da Logos jetzt 3× so groß */
  flex-wrap: wrap;
}
/* Echte Marken-Logos (n-tv / ZDF / Sky) — weiß auf transparent.
   Symbole sind nativ weiß (kein Filter mehr nötig). */
.ref-logo {
  width: auto;
  display: block;
}
.ref-logo--ntv { height: 68px; width: 68px; }          /* −40% von 114 */
.ref-logo--zdf { height: 50px; width: 90px; }          /* −40% von 84/150 */
.ref-logo--sky { height: 47px; width: auto; aspect-ratio: 88.7 / 53.16; }  /* −40% von 78, neue Ratio */
.founder-refs-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.5;                   /* dezent darunter */
  margin: 24px 0 0;               /* steht jetzt UNTER den Logos */
}

/* =========== CTA — sits on body gradient (cream plateau) =========== */
.cta { background: transparent; }
.cta .container { max-width: 1180px; }
.cta .display { max-width: 700px; color: var(--c-ink); }
.cta .kicker  { color: var(--c-ink-soft); }
.cta-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin: 32px auto 16px;
}

/* CTA-section override: pill form lives on the lighter gradient stop */
.cta .pill-form { margin-top: 32px; max-width: 560px; }

.form-note {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-ink-faint);
}

/* =====================================================
   PILL FORM — stacked pills (name + email/button)
   ===================================================== */
.pill-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pill {
  display: flex;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-surface-line);
  border-radius: 999px;
  padding: 7px;
  gap: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.26);
}
.pill input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 20px;
  height: 56px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--c-ink);
}
.pill input::placeholder {
  color: var(--c-ink-faint);
}
.pill button {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  cursor: pointer;
  background: #0f0f1a;
  color: #ffffff;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 0 28px;
  height: 56px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pill button:hover { background: #000; transform: translateY(-1px); }
.pill button:active { transform: translateY(0); }

.pill-form.is-submitting .pill button { opacity: 0.6; cursor: progress; }
.pill-form.is-success .pill { display: none; }

.pill-form-status {
  margin: 8px 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  min-height: 1.2em;
}
.pill-form-status.is-error   { color: #ff8c8c; }
.pill-form-status.is-success { color: var(--c-green); }
.pill-form.is-success .pill-form-status {
  margin: 0;
  padding: 22px 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--c-ink);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0;
  text-align: center;
  min-height: auto;
}

/* On tiny screens: tighter padding, slightly smaller height */
@media (max-width: 560px) {
  .pill { padding: 6px; }
  .pill input  { padding: 0 14px; height: 52px; }
  .pill button { padding: 0 20px; height: 52px; }
}

/* CTA variant — adjust shadow + status colors for cream background */
.cta .pill {
  box-shadow: 0 14px 40px rgba(26, 13, 7, 0.16);
}
.cta .pill-form-status { color: rgba(26, 13, 7, 0.55); }
.cta .pill-form.is-success .pill-form-status {
  background: rgba(26, 13, 7, 0.04);
  border-color: rgba(26, 13, 7, 0.10);
  color: #1a0d07;
}

/* =========== FOOTER — Logo mittig, Legal-Links unten =========== */
.footer {
  background: transparent;
  color: var(--c-ink);
  padding: clamp(80px, 10vw, 140px) var(--pad) 40px;
  text-align: center;
}
.footer .container { text-align: center; }

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 64px;
}
.footer-logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(33px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
}
.footer-logo strong { font-weight: inherit; font-style: normal; }
.footer-sub {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--c-ink-soft);
  margin: 0;
  max-width: 48ch;
  line-height: 1.5;
}

.footer-legal {
  padding-top: 28px;
  border-top: 1px solid var(--c-surface-line);
  /* Copyright + Legal-Links in einer Zeile, wrappt nur bei Platzmangel */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 10px;
}
.footer-copyright {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--c-ink-soft);
  letter-spacing: 0.01em;
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.footer-legal-links {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
}
/* Bullet-Separator zwischen Copyright und Legal-Links — passt zum
   bestehenden "·" im Copyright-Text */
.footer-legal-links::before {
  content: "·";
  color: var(--c-ink-faint);
  margin-right: 4px;
}
.footer-legal-links a {
  color: var(--c-ink-soft);
  transition: color 0.15s ease;
}
.footer-legal-links a:hover { color: var(--c-ink); }
.footer-legal-links span { color: var(--c-ink-faint); }

@media (max-width: 600px) {
  .footer-copyright { font-size: 12px; }
  /* Bei wenig Platz darf der Bullet zwischen Block-Wrap-Zeilen ausgeblendet
     werden — sieht sonst hängend aus. */
  .footer-legal-links::before { display: none; }
}

/* =====================================================
   INTEGRATIONS — slow dual marquee + parallax scroll boost
   Sits between .capabilities (#features) and #testimonials.
   Two rows, opposite directions, very slow drift (~100s),
   plus a soft scroll-linked horizontal offset (set via JS).

   Structure:
     .int-row              (overflow hidden, edge fade mask)
       .int-track          (parallax-offset transform from JS)
         .int-strip × 2    (CSS marquee animation)
           .int-item ×N    (single logo wrapper)
             .int-circle   (white round chip)
               img         (logo asset)
   ===================================================== */
.integrations {
  position: relative;
  background: transparent;
  padding: clamp(60px, 9vw, 120px) 0;
  overflow: hidden;
}
.integrations .container {
  max-width: var(--maxw);
  padding-left: var(--pad);
  padding-right: var(--pad);
  margin: 0 auto;
}

.int-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.int-kicker {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: #8ea3ff;            /* soft blue accent matches the page palette */
  margin: 0;
}
.int-title.display {
  /* serif rule: .display stays serif — matches user preference for landing pages */
  max-width: 12ch;
  margin: 0;
}
.int-sub {
  max-width: 56ch;
  margin: 0;
  color: var(--c-ink-soft);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}

/* Row: viewport with edge fade */
.int-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.int-row + .int-row { margin-top: clamp(18px, 2vw, 28px); }

/* Outer track: gets a JS-driven horizontal offset (scroll parallax) */
.int-track {
  display: flex;
  width: max-content;
  transform: translate3d(var(--int-parallax, 0), 0, 0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Inner strip: CSS marquee animation. Two strips per row create seamless loop. */
.int-strip {
  display: flex;
  flex-shrink: 0;
  gap: 24px;
  padding-right: 24px;       /* keep gap rhythm across the seam */
  animation: int-marquee 200s linear infinite;
  will-change: transform;
}
.int-strip--reverse {
  animation-direction: reverse;
}

@keyframes int-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .int-strip { animation: none; }
  .int-track { transition: none; transform: none; }
}

/* Logo chip: white circle, subtle shadow */
.int-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.int-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(240, 250, 249, 0.3);
  filter: saturate(0.7);
  box-shadow: none;
  padding: 16px;
  transition: transform 0.35s ease;
}
.int-circle img,
.int-circle .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.int-circle--icon {
  color: #2c2a52;            /* indigo, matches palette */
  font-size: 26px;
}
.int-circle--icon i { line-height: 1; }

.int-item:hover .int-circle {
  transform: scale(1.12);
}

/* Mobile: smaller chips, tighter spacing */
@media (max-width: 720px) {
  .int-circle { width: 56px; height: 56px; padding: 14px; }
  .int-circle--icon { font-size: 22px; }
  .int-strip { gap: 16px; padding-right: 16px; }
  .int-sub { font-size: 14px; }
}
@media (max-width: 480px) {
  .integrations { padding: clamp(48px, 14vw, 72px) 0; }
  .int-circle { width: 48px; height: 48px; padding: 12px; }
  .int-strip { gap: 12px; padding-right: 12px; }
  .int-row { padding: 10px 0; }
}

/* =====================================================
   HEADLINE NORMALIZATION — central rule, must come last
   ALL Headlines:
     - kein Italic (font-style: normal)
     - Inner em/strong/i: gleiches Weight (inherit), kein Italic
     - keine Stylistic-Sets (ss01 etc.)
   Color-Akzente auf Inner-Elements bleiben erhalten (z.B. .founder blockquote em).
   ===================================================== */
.display,
.cap-headline,
.system-headline,
.system-all-title,
.tc-heading-h2,
.starter-modal-title,
.founder blockquote,
.footer-logo,
.statement-text,
.usp .display,
.approach .display,
.capabilities .display,
.testimonials .display,
.faq .display,
.cta .display,
.hero .display,
.int-title.display {
  font-style: normal;
  font-weight: 500;                 /* Section-Headlines: Weight 500 (zentraler Hebel) */
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-feature-settings: normal;
}
.display em, .display strong, .display i, .display b,
.cap-headline em, .cap-headline strong, .cap-headline i, .cap-headline b,
.system-headline em, .system-headline strong, .system-headline i, .system-headline b,
.system-all-title em, .system-all-title strong, .system-all-title i, .system-all-title b,
.tc-heading-h2 em, .tc-heading-h2 strong, .tc-heading-h2 i, .tc-heading-h2 b,
.starter-modal-title em, .starter-modal-title strong, .starter-modal-title i, .starter-modal-title b,
.founder blockquote strong, .founder blockquote i, .founder blockquote b,
.footer-logo em, .footer-logo strong, .footer-logo i, .footer-logo b {
  font-style: normal;
  font-weight: inherit;
  font-feature-settings: normal;
  color: inherit;
}
/* Founder em darf Farbe behalten (Color-Akzent ist erlaubt) */
.founder blockquote em {
  font-style: normal;
  font-weight: inherit;
  font-feature-settings: normal;
}

/* Headline-Hervorhebung (em) trägt den grünen Akzent — wie im Screenshot
   (das hervorgehobene Wort der Überschrift ist grün, z.B. Hero "planbare & skalierbare"). */
.display em,
.statement-text em,
.tc-heading-h2 em { color: var(--c-accent); }

/* =====================================================
   SUB-TEXTS — direkt unter Headlines
   Min 19px, Desktop bis 22px, 10px Abstand, line-height 1.5.
   Card-Body-Texte (.cap-body, .tc-default-text, .faq-inner p,
   .starter-modal-list li) bleiben unverändert.
   ===================================================== */
.hero-sub,
.cta-sub,
.approach-sub,
.int-sub,
.starter-modal-lead,
.tc-sub {
  margin-top: 10px;
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.2;
  max-width: 600px;
}
/* Headlines: 10px Bottom-Abstand sicherstellen (falls Sub-Text margin verhindert) */
.hero .display,
.cta .display,
.approach .display,
.integrations .int-title,
.starter-modal-title {
  margin-bottom: 10px;
}

/* Card-Body-Texte: Min 19px (kein clamp auf 22 — bleibt bei 19) */
.cap-body,
.tc-default-text,
.faq-inner p,
.faq-answer,
.starter-modal-list li {
  font-size: 21px;
  line-height: 1.55;
}
/* ============================================================
   REFERENZEN — Kundenstimmen-Marquee
   Layout 1:1 von leaderlogic.de übernommen, in Dark übersetzt.
   Reine CSS-Marquee (kein Scroll-JS), pausiert bei Hover,
   respektiert prefers-reduced-motion. Schlank + GPU-freundlich.
   --ref-speed = eine Stellschraube für das Marquee-Tempo.
   ============================================================ */
.testimonials {
  --ref-speed: 90s;
  background: transparent;
  padding: var(--section-pad-top) 0 var(--section-pad-bottom);
  overflow: hidden;
}

/* ---- Kopfbereich ---- */
.testimonials-head { text-align: center; padding: 0 var(--pad); margin-bottom: clamp(0px, 2vw, 70px); }
.testimonials-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--c-ink-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-surface-line);
  border-radius: 999px; padding: 8px 18px; margin: 0 0 28px;
}
.testimonials-badge strong { color: #fff; font-weight: 700; }
.testimonials-title { margin: 0 auto; }
.testimonials-title em { display: block; font-style: normal; color: var(--c-accent); }
.testimonials-proof {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 10px; margin-top: 26px;
}
.testimonials-provenexpert { height: 30px; width: auto; background: #fff; padding: 5px 11px; border-radius: 7px; }
.testimonials-rating {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--sans); font-size: 16px; color: var(--c-ink-soft);
}
.testimonials-rating .testimonials-rating-stars { color: var(--c-accent); letter-spacing: 1px; }
.testimonials-rating strong { color: var(--c-ink); font-weight: 700; }

/* ---- Marquee ---- */
.testimonials-marquee {
  position: relative; width: 100%; padding-bottom: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
}
.testimonials-viewport { display: contents; }   /* Desktop: transparent fürs Layout; ≤768px: nativer Scroll-Container */
.testimonials-track {
  display: flex; align-items: flex-start; gap: 50px; width: max-content;
  padding: 40px 0;                       /* Raum für Card-Shadow */
  cursor: grab; touch-action: pan-y; user-select: none;
  will-change: transform;
}
.testimonials-track.is-grabbing { cursor: grabbing; }
.testimonials-track img { -webkit-user-drag: none; pointer-events: none; }

/* Hover-Pfeile (prev/next) — mittig unter der Marquee, erscheinen bei Hover */
.testimonials-nav {
  position: absolute; top: 284px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 752px; z-index: 5;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.testimonials-marquee:hover .testimonials-nav { opacity: 1; pointer-events: auto; }   /* rein Hover: sichtbar solange Maus über den Karten ist, sonst weg */
.testimonials-nav-btn {
  width: 74px; height: 74px; border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1); color: var(--c-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.testimonials-nav-btn:hover { background: rgba(0, 0, 0, 0.42); color: var(--c-ink); }
.testimonials-nav-btn:active { background: rgba(0, 0, 0, 0.55); transform: scale(0.92); }
.testimonials-nav-btn:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.testimonials-nav-btn svg { width: 30px; height: 30px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .testimonials-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---- Karte (Basis) ---- */
.testimonial-card {
  flex: 0 0 auto; width: 423px; box-sizing: border-box;
  border-radius: 30px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 110% 75% at 30% -20%, #585858 0%, #222222 55%, #151515 100%);
  border: none;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column;
}
.testimonial-quote { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.3px; }
.testimonial-name { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -0.3px; margin: 0; color: #fff; opacity: 0.6; }
.testimonial-role { font-family: var(--sans); font-size: 14px; line-height: 1em; font-weight: 500; letter-spacing: -0.3px; margin: 0; color: #fff; opacity: 0.4; }
.testimonial-stars { display: none; }

/* ---- Text-Karte (Maße 1:1 Live) ---- */
.testimonial-card--text { padding: 40px 31px; min-height: 463px; }
.testimonial-card--text .testimonial-quote { font-size: 32px; line-height: 1.2; color: var(--c-ink); }
.testimonial-result { font-family: var(--sans); font-size: 16px; line-height: 1.3; letter-spacing: -0.3px; color: var(--c-ink-soft); margin: 6px 0 0; }
.testimonial-result b { color: var(--c-ink); font-weight: 700; }
.testimonial-avatar {
  width: 117px; height: 117px; border-radius: 50%; object-fit: cover;
  display: block; margin: 45px auto 10px;
}
.testimonial-card--text .testimonial-name, .testimonial-card--text .testimonial-role { text-align: center; }

/* ---- Foto-Karte (Vollbild-Portrait + Verlauf + weißer Text unten) ---- */
.testimonial-card--photo { min-height: 535px; justify-content: flex-end; padding: 36px 31px; color: #fff; }
.testimonial-card--photo::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--p); background-size: cover; background-position: center top;
}
.testimonial-card--photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 26%) 0%, rgb(0 0 0 / 33%) 42%, rgb(0 0 0 / 67%) 76%, rgb(0 0 0 / 61%) 100%);
}
.testimonial-card--photo > * { position: relative; z-index: 2; }
.testimonial-card--photo .testimonial-quote { font-size: 36px; line-height: 1.1; color: #fff; }
.testimonial-card--photo .testimonial-name { color: #fff; margin-top: 8px; opacity: 0.4; }
.testimonial-card--photo .testimonial-role { color: #fff; }

/* ---- Mobile-Slider (≤768px): nativer horizontaler Scroll mit Snap ---- */
@media (max-width: 768px) {
  .testimonials-marquee {
    padding-bottom: 92px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .testimonials-viewport {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;            /* kein Snap -> freier, ungebremster Momentum-Scroll wie native vertikal */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: auto;
  }
  .testimonials-viewport::-webkit-scrollbar { display: none; }
  .testimonials-track {
    animation: none;
    cursor: default;
    touch-action: auto;
    gap: 16px;
    padding: 34px var(--mobile-gutter) 16px;
  }
  .testimonials-track .testimonial-card { scroll-snap-align: none; }
  .testimonials-nav {
    left: auto;
    right: 10px;
    top: 192px;
    bottom: auto;            /* überschreibt das Basis-bottom, sonst wird die Nav gestreckt */
    transform: none;
    opacity: 1;
    pointer-events: auto;
    gap: 10px;
  }
  .testimonials-nav .prev { display: none; }   /* Mobile: nur der rechte Pfeil */
  .testimonials-nav-btn {
    width: 56px;
    height: 56px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
  }
  .testimonials-nav-btn svg {
    width: 34px;
    height: 34px;
  }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  /* Karten an den Inhalt anpassen statt feste Höhe: Text-Karten wachsen mit dem
     Zitat, Foto-Karten behalten ein Portrait-Verhältnis (Bild braucht Höhe). */
  .testimonial-card { width: 80vw; max-width: 360px; min-height: 0; border-radius: 26px; }
  .testimonial-card--text { min-height: 0; padding: 30px 22px 28px; }
  .testimonial-card--text .testimonial-quote { font-size: 26px; line-height: 1.13; }
  .testimonial-result { font-size: 15px; line-height: 1.25; margin-top: 8px; }
  .testimonial-avatar { width: 112px; height: 112px; margin: 18px auto 10px; opacity: 0.7; }
  .testimonial-card--photo { min-height: 0; aspect-ratio: 4.4 / 5.5; padding: 30px 24px; }
  .testimonial-card--photo .testimonial-quote { font-size: clamp(22px, 6.4vw, 32px); }
  .testimonials-title { letter-spacing: -1px; }
  .testimonials-track { gap: 16px; }
}

/* ============================================================
   DAS SYSTEM — 3 Module (Layout 1:1 von leaderlogic.de).
   Modul-Card = großer dunkler Radial-Gradient; innere Visual-Spalte
   behält ihre dunklen Gradients/Glows 1:1; Text-Spalte in Dark.
   ============================================================ */
.system { background: transparent; padding: var(--section-pad-top) 0 var(--section-pad-bottom); overflow: hidden; }

.system-intro { text-align: center; padding: 0 var(--pad); margin: 0 auto clamp(50px, 6vw, 84px); }
.system-eyebrow {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--c-ink-soft); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-surface-line); border-radius: 999px; padding: 8px 20px; margin: 0 0 26px;
}
.system-headline { margin: 0 auto; }
.system-sub { font-family: var(--sans); font-size: clamp(17px, 2vw, 24px); letter-spacing: 0.1px; line-height: 1.3; color: var(--c-ink-soft); max-width: 700px; margin: 16px auto 0; }

/* Modul-Card */
.sys-module {
  display: grid; grid-template-columns: 42% 58%; gap: 0;
  align-items: stretch; max-width: 1170px; margin: 40px auto;
  padding: 20px 20px 30px;
  background: radial-gradient(ellipse 120% 180% at 28% 5%, #ffffff33 0%, #1b1b1bb0 32%, #090909 100%);
  border-radius: clamp(48px, 10vw, 150px);
  opacity: 0; transform: translateY(80px);
  transition: opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1), transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);  /* etwas langsamerer Modul-Aufbau */
}
.sys-module.is-visible { opacity: 1; transform: none; }

/* Visual-Spalte (DUNKEL — 1:1) */
.sys-visual {
  position: relative; border-radius: clamp(44px, 9vw, 140px);
  min-height: 770px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 20px 28px 10px;
}
.sys-visual--m1 { background: radial-gradient(circle, #000000 52%, #1a1a1a 80%, #cccccc3d 91%); box-shadow: 110px 2px 99px -120px rgb(255 255 255 / 78%), 2px 2px 49px 4px rgb(251 251 251 / 30%) inset; }
.sys-visual--m2 { background: radial-gradient(circle, #000000 52%, #1a1a1a 80%, #cccccc3d 91%); box-shadow: 40px 52px 129px rgb(61 61 61 / 78%), 2px 2px 29px 14px rgb(251 251 251 / 30%) inset; }
.sys-visual--m3 { background: radial-gradient(circle, #696969c4 0%, #161616 42%, #000000 73%, #1919196e 100%); box-shadow: inset 0px 0px 50px -29px; }
.sys-visual-img { max-width: 76%; height: auto; position: relative; z-index: 1; }
.sys-visual-funnel { max-width: 64%; }

/* ============ Modul 1 — Relevance: Kugel-Raster (8x8) + dezenter Scroll-Parallax ============
   Nachbau des PNG aus echten Elementen, damit jede Kugel einzeln animierbar ist.
   Performance: alle 48 Kugel-Transforms laufen rein per CSS-calc, getrieben von EINER
   Custom-Property --p (0..1) am Container. Das JS schreibt pro Frame nur --p (1 Style-Write).
   --p wird via Momentum-Lerp weich nachgezogen ("wie Wasser"). Reine transform/opacity. */
.m1-grid {
  position: relative; z-index: 1;
  width: 84%; aspect-ratio: 1;
  /* Scroll-Parallax treibt nur noch den weißen Relevanzpunkt. Das Feld bleibt ruhig. */
}
.m1-ball {
  position: absolute;
  width: 9%; aspect-ratio: 1;
  border-radius: 50%;
  /* Beleuchtung kommt vom ICP: Highlight zeigt zum weißen Punkt (--hx/--hy), starke Schattenseite gegenüber */
  background:
    radial-gradient(circle at calc(50% + var(--hx, -16%) * 0.8) calc(50% + var(--hy, -22%) * 0.8),
      #aeb0b8 0%, #686a72 17%, #33343c 42%, #171821 64%, #050508 100%);   /* Highlight-Versatz ×0.8 -> ~20% weniger Licht-3D */
  box-shadow: 0 2px 5px rgba(0,0,0,0.65);
  transform-origin: center center;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}
/* ICP-Kugel: glüht mit --p, ohne dass das Feld ausweicht */
.m1-ball--icp {
  width: 11.7%;
  z-index: 2;
  background: radial-gradient(circle at 40% 37%, #c4e381 0%, #aece78 26%, #89a565 52%, #4c5b39 74%, #1a2210 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.35),
    0 0 calc(var(--p, 0) * 104px) calc(var(--p, 0) * 31px) rgba(255,251,235, calc(var(--p, 0) * 0.70));   /* Glow weiß (Kugel bleibt akzent) */
  will-change: transform, box-shadow;
  transform: translate(-50%, -50%);
  opacity: 1;
}
/* Weicher Aura-Glow um den ICP — getrennte Ebene, blendet/wächst mit --p (kein Layout) */
.m1-ball--icp::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 320%; height: 320%;
  transform: translate(-50%, -50%) scale(calc(0.68 + var(--p, 0) * 3.05));
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,250,232,0.42) 0%, rgba(255,250,232,0.13) 36%, rgba(255,250,232,0) 72%);   /* Aura weiß */
  opacity: calc(var(--p, 0) * 0.88);
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  /* Effekt aus: Raster statisch wie das PNG (--p faktisch 0, kein Glow/keine Verschiebung) */
  .m1-grid { --p: 0 !important; }
  .m1-ball, .m1-ball--icp { will-change: auto; }
  .m1-ball--icp::after { opacity: 0; }
}

.sys-badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--sans); font-weight: 500; font-size: 35px; color: var(--c-ink);
  background: rgba(255,255,255,0.1); border-radius: 0 0 16px 16px; padding: 10px 26px;
}

/* Text-Spalte (war hell → Dark) */
.sys-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 6vw, 80px) clamp(24px, 7vw, 104px) clamp(20px, 6vw, 80px) clamp(24px, 3vw, 44px); }  /* oben/unten-Padding skaliert jetzt mit der Breite runter (war 12vw/102 & 43vw/110, am Desktop fix gedeckelt) → Textspalte bleibt bei schmalem 2-Spalten ≤ Visual-Höhe, damit .sys-visual nicht gestreckt wird */
.sys-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 19px; font-weight: 500; color: #999;
  background: #000; border: none;
  border-radius: 999px; padding: 8px 20px; margin: 0 0 20px;
}
.sys-pill svg { width: 19px; height: 19px; color: #bbb; flex-shrink: 0; }
.sys-title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.2vw, 54px);  /* vw-Koeffizient gesenkt (war 6.2vw): Headline skaliert bei schmalem Desktop runter (weniger Zeilenumbrüche → niedrigere Textspalte), erreicht 54px erst am breiten Desktop */
  line-height: 1.2; letter-spacing: -0.1px; color: var(--c-ink); margin: 0 0 18px;
}
.sys-body, .sys-result { font-family: var(--sans); font-size: 22px; line-height: 1.4; letter-spacing: 0.2px; color: var(--c-ink-soft); margin: 0 0 0; }
.sys-result { margin-bottom: 24px; }
.sys-result strong { color: var(--c-ink-soft); font-weight: 400; }
.sys-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: 0.2px;
  color: var(--c-ink-soft); background: none; border: none; border-radius: 0; padding: 0; margin: 2px 0 0;
  transition: color 0.2s ease;
}
.sys-cta:hover { color: var(--c-ink); }

/* Modul 2 — vertikale Logo-Marquee */
.sys-logos {
  position: absolute; right: 9%; top: 0; bottom: 0; width: 56px; overflow: hidden; z-index: 1;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.sys-logos-track { display: flex; flex-direction: column; align-items: center; gap: 30px; animation: sys-logos 18s linear infinite; }
.sys-logos-track img { width: 40px; height: 40px; opacity: 0.92; }
@keyframes sys-logos { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Modul 3 — diverging Balkendiagramm (1:1 Live: 9 Reihen, dunkel links / hell rechts) */
.sys-chart { position: relative; z-index: 1; width: 300px; max-width: 100%; display: flex; flex-direction: column; }
.sys-visual--m3::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgb(226 226 226 / 9%) 2.5px, transparent 2.6px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 45% 50%, #000 46%, transparent 86%);
          mask-image: radial-gradient(ellipse 68% 75% at 52% 41%, #000 10%, transparent 72%); }
.sys-bars { display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; }
.sys-barrow { position: relative; width: 340px; max-width: 100%; height: 36px; }
.sys-fill { position: absolute; top: 0; height: 35px; border-radius: 15px; width: 0; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.sys-fill--dark  { left: 0; z-index: 1; background: linear-gradient(to left, rgb(45 45 45), rgb(120 120 120 / 14%)); }
.sys-fill--light { left: 0; z-index: 2; background: linear-gradient(to right, rgb(255 255 255 / 0%), rgb(255 255 255 / 75%)); }
/* Wechsel ab Reihe 5: dunkle (kürzere) Bars nach VORNE, helle (längere) nach HINTEN */
.sys-barrow:nth-child(n+5) .sys-fill--dark  { z-index: 2; }
.sys-barrow:nth-child(n+5) .sys-fill--light { z-index: 1; }
.sys-module.bars-run .sys-fill { width: var(--w); }
.sys-module.bars-run .sys-barrow:nth-child(2) .sys-fill { transition-delay: .07s; }
.sys-module.bars-run .sys-barrow:nth-child(3) .sys-fill { transition-delay: .14s; }
.sys-module.bars-run .sys-barrow:nth-child(4) .sys-fill { transition-delay: .21s; }
.sys-module.bars-run .sys-barrow:nth-child(5) .sys-fill { transition-delay: .28s; }
.sys-module.bars-run .sys-barrow:nth-child(6) .sys-fill { transition-delay: .35s; }
.sys-module.bars-run .sys-barrow:nth-child(7) .sys-fill { transition-delay: .42s; }
.sys-module.bars-run .sys-barrow:nth-child(8) .sys-fill { transition-delay: .49s; }
.sys-module.bars-run .sys-barrow:nth-child(9) .sys-fill { transition-delay: .56s; }
.sys-chart-label { font-family: var(--sans); font-weight: 400; }
.sys-chart-label .sys-chart-arrow { font-size: 1.6em; line-height: 0; vertical-align: -0.12em; color: inherit; }
.sys-chart-label--down { color: #999; font-size: 18px; letter-spacing: -0.2px; align-self: flex-end; margin: 0px 0 10px; }
.sys-chart-label--up { color: #d9d5eb; font-size: 23px; align-self: flex-end; margin: 10px 0 0; letter-spacing: -0.2px; }

@media (prefers-reduced-motion: reduce) {
  .sys-logos-track { animation: none; }
  .sys-module { opacity: 1; transform: none; transition: none; }
  .system .sys-fill { transition: none; width: var(--w); }
}

/* Mobile — Spalten stapeln (Dark-Visual oben) */
@media (max-width: 860px) {
  .system { padding: 10px !important; }
  .sys-module { grid-template-columns: 1fr; gap: 0; }
  .sys-visual { min-height: 433px; }
  .sys-visual.sys-visual--m3 { min-height: 500px; }
  .sys-chart { width: 300px; max-width: 72%; }
  .m1-grid {
    width: 77%;
    max-width: 300px;
  }
  .sys-module,
  .sys-visual {
    width: 100%;
    max-width: 610px;
    border-radius: 100px;
  }
  .sys-text { padding: 28px 22px 8px; }
  .sys-body { font-size: 20px; }
  .sys-cta { font-size: 20px; }
  .sys-chart-labels { position: static; justify-content: center; gap: 28px; margin-top: 16px; padding: 0; }
}

/* ============ MARKT-TRANSFORMATION — Statement-Section ============ */
.markt { background: transparent; padding: clamp(90px,14vw,170px) var(--pad); text-align: center; }
.markt-inner { max-width: 1000px; margin: 0 auto; }
.markt-kicker, .decision-kicker { display:inline-block; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--c-ink-soft); background:rgba(255,255,255,0.05); border:1px solid var(--c-surface-line); border-radius:999px; padding:8px 20px; margin:0 0 28px; }
.markt-headline, .decision-headline { margin:0 auto; }
.markt-sub, .decision-sub { font-family: var(--sans); font-size: clamp(17px, 2vw, 24px); letter-spacing: 0.1px; line-height: 1.3; color: var(--c-ink-soft); max-width: 700px; margin: 16px auto 0; }

/* Modul 2 — Funnel + rotierte Logos + Glow-Sphere */
.sys-funnel { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; }
.sys-funnel-logos { display: flex; gap: 64px; margin-bottom: -4px; position: relative; z-index: 3; }
.sys-flogo { width: 38px; height: 38px; }
.sys-flogo--l { transform: rotate(-6deg); }
.sys-flogo--r { width: 33px; height: 33px; transform: rotate(6deg); }
.sys-visual--m2 .sys-visual-funnel { max-width: 64%; margin: -16px 0 0; position: relative; z-index: 2; }
.sys-sphere {
  width: 116px; height: 116px; border-radius: 50%; margin-top: -34px; position: relative; z-index: 1;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.40), rgba(255,255,255,0.10) 30%, transparent 60%),
    radial-gradient(circle at 65% 65%, rgba(0,0,0,0.80), transparent 50%),
    #161616;
  box-shadow: 0 -78px 78px -18px rgba(255,255,255,0.82);
}
.sys-cta { display: inline-flex; align-items: center; }
.sys-cta-arrow { width: 29px; height: 29px; flex-shrink: 0; color: var(--c-accent); }


/* ============================================================
   HERO (1:1 Live-Struktur: Badge · H1 · 3 Bullets · CTA · Social-Proof · Logo-Leiste) — Dark
   ============================================================ */
.hero-badge {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--c-ink-soft); background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-surface-line); border-radius: 999px; padding: 8px 20px; margin: 0 0 26px;
}
.hero .hero-h1 { margin: 0 auto; font-size: clamp(34px, 5.6vw, 70px); max-width: 14em; }
.hero-bullets {
  list-style: none; margin: 30px auto 0; padding: 0; max-width: 780px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
}
.hero-bullets li {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; color: var(--c-ink);
}
.hero-check { width: 22px; height: 22px; flex-shrink: 0; color: var(--c-accent); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px; margin: 26px auto 0;
  font-family: var(--sans); font-size: 25px; letter-spacing: -0.5px; font-weight: 600; color: var(--c-accent-ink);
  background: var(--c-accent); border-radius: 999px; padding: 11px 18px 11px 50px;
  box-shadow: 0 14px 40px -12px rgba(182,232,115,0.5);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hero-cta:hover { background: var(--c-accent-hi); transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgba(182,232,115,0.62); }
.hero-cta-check { width: 40px; height: 40px; flex-shrink: 0; }
.hero-proof { display: flex; align-items: center; justify-content: center; gap: 15px; margin: clamp(18px, 2.8vh, 40px) auto 0; flex-wrap: wrap; }
.hero-avatars { display: inline-flex; }
.hero-avatars img { width: 75px; height: 75px; filter: brightness(0.8); border-radius: 50%; object-fit: cover; border: 2px solid #444; margin-left: -12px; }
.hero-avatars img:first-child { margin-left: 0; }
.hero-proof-text { font-family: var(--sans); font-size: 15px; line-height: 1.35; color: var(--c-ink-soft); margin: 0; text-align: left; max-width: 24ch; }
.hero-proof-text strong { color: var(--c-ink); font-weight: 700; }
.hero-logos { margin: clamp(20px, 3vh, 50px) auto 0; }
.hero-logos-row { display: flex; align-items: center; justify-content: center; gap: clamp(26px, 4.5vw, 58px); flex-wrap: wrap; }
.hero-logos-row img { height: 26px; width: auto; max-width: 130px; opacity: 0.6; filter: brightness(0) invert(1); transition: opacity .2s ease; }
.hero-logos-row img:hover { opacity: 0.9; }
.hero-logos-label { display: block; text-align: center; margin: 18px 0 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em; color: var(--c-ink-faint); }

@media (max-width: 600px) {
  .hero-proof { gap: 4px; }
  .hero-proof-text {
    text-align: center;
    line-height: 1.1em;
    margin-top: 5px;
  }
  .hero-logos-row { gap: 22px 30px; }
  .hero-logos-row img { height: 22px; }
}

/* ============================================================
   STATEMENT (Portrait · Typewriter · Signatur) — 1:1 Live, Dark
   ============================================================ */
.statement-portrait {
  display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 6px;
}
.statement .statement-text {
  max-width: 700px; font-family: var(--sans); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.5px; color: var(--c-ink);
}
.statement-sign { text-align: center; margin: 7px auto 0; }
.statement-name { font-family: 'Caveat', cursive; font-size: clamp(64px, 4.6vw, 62px); font-weight: 400; letter-spacing: -6px; line-height: 1.1; color: var(--c-ink); margin: 0 0 10px; }
.statement-role, .statement-cred { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.3px; color: #555; margin: 0px 0 0; }
@media (max-width: 600px) {
  .statement .statement-text { font-size: clamp(23px, 7vw, 34px); max-width: 98%; text-align: left; padding-left: 10px !important; box-sizing: border-box; }
  .statement-portrait { width: 122px; height: 122px; }
}


/* ============================================================
   MARKT — Gegenüberstellung "Alte Methoden" vs "Der neue Weg" (1:1 Live-Struktur, Dark)
   Desktop: 3-Spalten-Flex (alt | vs | neu), neu überlappt + elevated.
   Mobile ≤768: vertikal gestapelt (alt → vs → neu).
   ============================================================ */
.markt-compare {
  max-width: 1080px; margin: clamp(23px, 6vw, 46px) auto 0;
  display: flex; align-items: center; justify-content: center; text-align: left;
  position: relative;
}
.mc-card { border-radius: 25px; box-sizing: border-box; position: relative; }
.mc-content { width: min(81%, var(--mc-content-max, 350px)); margin: 0 auto; text-align: center; }

/* OLD — gedämpft, kleiner, hinten */
.mc-card--old {
  --mc-content-max: 340px;
  width: auto; flex: 0 1 44%; min-width: 0;
  padding: 84px clamp(36px, 5vw, 72px) 74px clamp(36px, 4vw, 64px);
  margin: -50px -42px 40px 6vw;              /* horizontale Überlappung mit NEW */
  background: linear-gradient(108deg, rgb(255 255 255 / 12%) 22%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
.mc-title-old {
  font-family: var(--sans); font-size: 27px; font-weight: 400; line-height: 1; letter-spacing: -0.3px;
  text-align: left; min-width: 0 !important;
  text-decoration: line-through; color: rgb(255 255 255 / 17%); margin: 0 0 13px;
}
.mc-list--old { max-width: none; list-style: none; margin: 0; padding: 0; }
.mc-list--old li {
  text-align: left; position: relative; padding: 0; margin: 0 0 22px;
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans); font-style: italic; font-size: 16px; line-height: 1em; font-weight: 500; letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.3);
}
.mc-list--old li::before {
  content: none;
}
.mc-item-icon {
  display: inline-flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin-top: -3px;
}
.mc-item-icon--old {
  width: 21px;
  height: 21px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.62);
}

/* NEW — elevated, größer, vorne (Jans Card-Radial-Gradient) */
.mc-card--new {
  --mc-content-max: 450px;
  width: auto; flex: 0 1 60%; min-width: 0;
  padding: 66px 20px 94px;
  background: radial-gradient(ellipse 110% 115% at 20% -13%, #ffffff -10%, #6f6a5f99 85%, #2a2a2abf 130%);
  border: none;
  box-shadow: 0 60px 130px -55px rgba(0, 0, 0, 0.9), inset 0 0 28px 6px rgba(119, 118, 118, 0.04);
  z-index: 3;
}
.mc-eyebrow { position: static; top: auto; left: auto; z-index: 2; margin: 20px 0 0; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 19px; line-height: 1; letter-spacing: 0.2px; text-transform: none; color: black; background: rgb(0 0 0 / 8%); border: 1px solid var(--c-surface-line); padding: 8px 20px; border-radius: 999px; }
.mc-title-new { font-family: var(--serif); font-size: 47px; font-weight: 600; line-height: 1.05; letter-spacing: -2px !important; color: black; margin: 0 0 26px; }
.mc-list--new { list-style: none; margin: 0 0 0 3% !important; padding: 0 0 0 1px !important; text-align: left; }
.mc-list--new li {
  position: relative; padding: 0; margin: 0 0 26px;
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: -0.1px; line-height: 1.15; color: var(--c-ink);
}
.mc-list--new li::before {
  content: none;
}
.mc-item-icon--new {
  width: 24px;
  height: 24px;
  color: var(--c-accent);
}

/* vs.-Kreis in der Überlappung */
.mc-vs {
  position: relative; z-index: 5; flex: 0 0 auto;
  width: 80px; height: 80px; border-radius: 50%; margin: 0 -38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #c4c2c2; color: black;
  box-shadow: 0 21px 70px 18px rgb(0 0 0 / 10%);
  font-family: var(--serif); font-size: 51px; padding-bottom: 8px; padding-left: 5px; font-weight: 500; letter-spacing: -1.5px;
}

/* Reveal — gestaffelt wie Live (alt 1.8s/80px, neu 3.6s/160px) */
.fadein-up1 { opacity: 0; transform: translateY(80px); transition: opacity 1.8s cubic-bezier(0.16,1,0.3,1), transform 1.8s cubic-bezier(0.16,1,0.3,1); }
.fadein-up2 { opacity: 0; transform: translateY(160px); transition: opacity 3.6s cubic-bezier(0.16,1,0.3,1), transform 3.6s cubic-bezier(0.16,1,0.3,1); }
.markt-compare.is-visible .fadein-up1, .markt-compare.is-visible .fadein-up2 { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fadein-up1, .fadein-up2 { opacity: 1; transform: none; transition: none; }
}

/* Tablet/Mobile ≤1000: vertikal stapeln — alt oben, vs, neu unten */
@media (max-width: 1000px) {
  .markt-compare { flex-direction: column; max-width: 640px; }
  .mc-card--old { width: 91%; flex: none; margin: 0; padding: 50px 10px 40px 10px; }
  .mc-card--new { text-align: center; width: 100%; flex: none; padding: 68px 30px 52px 30px; }
  .mc-card--new .mc-content { width: min(100%, 450px); margin: 0 auto; text-align: center; }
  .mc-vs { margin: -50px 0; }                 /* vertikale Überlappung zwischen gestapelten Karten */
  .mc-title-new { font-size: 40px; letter-spacing: -2px; }
  .mc-list--new li {
    position: relative;
    padding: 0;
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 1;
    color: #ddd;
  }
}


/* ============================================================
   CTA — Potential-Check von leaderlogic.de, als statischer Eigenbau
   ============================================================ */
.cta {
  --cta-paper: #050505;
  --cta-ink: #f7f7f2;
  --cta-muted: rgba(247, 247, 242, 0.72);
  --cta-lilac: #050505;
  position: relative;
  contain: layout paint;
  overflow: hidden;
  padding: var(--section-pad-top) var(--pad) var(--section-pad-bottom);
  background:
    radial-gradient(62% 36% at 50% 96%, rgba(255,255,255,0.09), transparent 72%),
    linear-gradient(180deg, var(--cta-paper) 0%, var(--cta-paper) 66%, var(--cta-lilac) 100%);
  background-color: var(--cta-paper);
  color: var(--cta-ink);
  text-align: center;
}
#cta { padding-bottom: 30px; }   /* CTA-Section unten auf allen Geräten nur 30px */
.cta::before {
  content: "";
  position: absolute;
  inset: 12% 0 20%;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(58% 45% at 50% 52%, #000 28%, transparent 78%);
          mask-image: radial-gradient(58% 45% at 50% 52%, #000 28%, transparent 78%);
  opacity: 0.22;
}
.cta > .container {
  max-width: 1170px;
  position: relative;
  z-index: 1;
  padding-top: 20px;
  padding-bottom: 10px;   /* nur 10px unter den Testimonial-Bullets */
}
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin: 0 0 10px;
  padding: 8px 20px;
  border: 0;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cta-ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 22.1px;
}
.cta-eyebrow svg {
  width: 17px;
  height: 17px;
  color: var(--cta-ink);
  flex-shrink: 0;
}
.cta .cta-headline {
  max-width: 620px;
  margin: 0 auto;
  color: var(--cta-ink);
  font-size: 68px;
  font-weight: 500;
  line-height: 72px;
  letter-spacing: -0.3px;
}
.cta-sub {
  max-width: 580px;
  margin: 10px auto 0;
  color: var(--cta-muted);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.3px;
}
.cta-arrow {
  display: block;
  position: relative;
  z-index: 5;
  width: 63px;
  height: 72px;
  margin: 10px auto 40px;
  color: var(--c-accent);
}
.cta-survey {
  position: relative;
  z-index: 3;                     /* gleitet beim Reinfahren ÜBER die statische Proof-Bullet darunter */
  contain: layout paint;
  display: flex;                 /* Inhalte vertikal zentrieren */
  flex-direction: column;
  justify-content: center;
  width: min(630px, 100%);
  height: auto;
  min-height: 0;   /* Card nur so hoch wie nötig (Inhalt = höchster Slide: Kontakt) */
  margin: 0 auto;
  padding: 20px 20px;
  border: 0px solid #ffffff;
  border-radius: 150px;
  background:
    radial-gradient(circle, #d4d4d4 0%, #1d1d1d 42%, #000000 73%, #1919196e 99%);
  box-shadow:
    inset 2px 2px 29px 14px rgb(251 251 251 / 74%),
    inset 0 -42px 90px rgb(44 44 44 / 72%),
    2px 50px 90px 0 rgb(61 61 61 / 62%),
    1px -225px 250px -14px rgb(251 251 251 / 57%),
    1px -225px 140px -164px rgb(251 251 251 / 84%),
    1px 145px 120px -124px rgb(251 251 251 / 64%);
}
.cta-survey::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgb(255 255 255 / 9%) 2.8px, #3e3e3e08 2.6px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 45% 50%, #000 46%, transparent 86%);
          mask-image: radial-gradient(ellipse 68% 75% at 52% 41%, #000 10%, transparent 72%);
  opacity: 1;
  pointer-events: none;
}
.cta-survey::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 86% 68% at 50% 4%, rgba(255,255,255,0.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 38%, rgba(0,0,0,0.22));
  pointer-events: none;
}
.cta-survey-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-top: 25px;
  padding-bottom: 64px;   /* reservierter Platz für den fix unten sitzenden Progress */
  min-height: 0;       /* inhaltsgesteuert statt fixer Höhe */
}
.cta-survey-question {
  max-width: 528px;
  min-height: 62px;          /* 2 Zeilen reserviert -> alle Fragen gleich hoch */
  margin: 0 auto 20px;
  color: rgb(255 255 255 / 51%);
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 31px;
  letter-spacing: -1px;
  white-space: pre-line;     /* fester Umbruch (\n) in der Frage -> immer 2 Zeilen */
}
.cta-options {
  display: grid;
  gap: 5px;
  width: min(528px, 100%);
  margin: 0 auto;
}
.cta-option {
  display: flex;
  align-items: center;
  position: relative;
  width: min(420px, 100%);
  min-height: 50px;
  margin: 0 auto;
  padding: 2px 0 0;
  border-radius: 19px;
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.7));
  color: #060606;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 43.2px;
  letter-spacing: -0.5px;
  text-align: left;
  text-decoration: none;
  box-shadow: -40px 30px 100px -7px rgba(0,0,0,0.33);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.cta-option::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0 8px;
  border: 0;
  border-radius: 50%;
  /* Ausgangszustand: schwarzer Kreis + großes, dickes Häkchen in Accent-Grün */
  background: #0c1206 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 12.6l4.4 4.4L19.5 6.4' stroke='%23b6e873' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 23px no-repeat;
  box-sizing: border-box;
}
/* altes Border-Häkchen entfällt — der Haken sitzt jetzt zentriert im Kreis (::before) */
.cta-option::after { content: none; }
.cta-option:hover {
  transform: translateY(-1px);
  background: #0c1206;            /* Hover = gleiches Schema wie Auswahl: Pill schwarz */
  color: #fff;                    /* Text weiß */
  box-shadow: -40px 30px 100px -7px rgba(0,0,0,0.4);
}
.cta-progress {
  position: absolute;        /* fixe Position unten im Card */
  left: 0;
  right: 0;
  bottom: 40px;              /* ~40px von unten, bewegt sich nicht beim Wechsel */
  width: 200px;
  height: 20px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(8, 0, 0, 0.12);
}
.cta-progress-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.76);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transition: width 0.5s cubic-bezier(.22,.61,.36,1); /* animiert beim Seitenwechsel */
}
.cta-proof {
  position: relative;
  z-index: 2;
}

/* Footer — leaderlogic.de Layout, farblich in die lokale CTA-Fläche integriert */
.footer {
  margin-top: 0;
  contain: layout paint;
  min-height: 247px;
  padding: 5px var(--pad) 5px;
  background: #050505;
  color: var(--cta-ink, #f7f7f2);
  text-align: center;
}
.footer .container {
  max-width: 1170px;
  text-align: center;
}
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
}
.footer-logo {
  margin: 0;
  color: var(--cta-ink, #f7f7f2);
  font-family: var(--sans);
  font-size: 42px;
  font-weight: 500;
  line-height: 37.8px;
  letter-spacing: -2px;
}
.footer-logo strong {
  font-weight: 700;
  font-style: normal;
}
.footer-sub {
  margin: 10px 0 0;
  color: rgba(247,247,242,0.54);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 17.6px;
  letter-spacing: -0.3px;
}
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 45px 0 0;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.005);
  color: rgb(255 255 255 / 40%);
  box-shadow: inset 0 0 20px 2px rgb(255 255 255 / 11%);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.footer-social svg {
  width: 30px;
  height: 30px;
  display: block;
}
.footer-social:hover {
  transform: translateY(-1px);
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin: 25px auto 28px;
  padding: 0;
  border: 0;
}
.footer-copyright,
.footer-address,
.footer-legal-links,
.footer-legal-links a,
.footer-legal-links span {
  color: rgb(247 247 242 / 26%);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1em;
  letter-spacing: -0.05px;
}
/* Adresse = Google-Maps-Link, optisch wie der Rest */
.footer-address { text-decoration: none; transition: color 0.16s ease; }
.footer-address:hover { color: rgb(247 247 242 / 60%); }
.footer-address::before { content: "·"; margin-right: 4px; }   /* Trenner „Name · Adresse" (Desktop) */
/* Desktop: Name · Adresse = Zeile 1, Rechtliches = Zeile 2 */
@media (min-width: 761px) {
  .footer-legal-links { flex-basis: 100%; justify-content: center; }
}
/* Mobile/Tablet: drei gestapelte Zeilen mit gleichem vertikalen Abstand */
@media (max-width: 760px) {
  .footer-legal { flex-direction: column; align-items: center; gap: 0px; }
  .footer-copyright { flex-basis: auto; }     /* hebt früheres flex-basis:100% auf (sonst Höhe gestreckt) */
  .footer-address::before { content: none; }   /* gestapelt: kein Trenner */
}
.footer-copyright {
  margin: 0;
}
.footer-legal-links {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.footer-legal-links::before {
  content: none;
}
.footer-legal-links a {
  text-decoration: none;
  transition: color 0.16s ease;
}
.footer-legal-links a:hover {
  color: var(--cta-ink, #f7f7f2);
}

@media (max-width: 760px) {
  .cta {
    padding-top: 88px;
    padding-bottom: var(--section-pad-bottom);
  }
  .cta > .container {
    padding-top: 0;
  }
  .cta-eyebrow {
    min-height: 38px;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 12px;
  }
  .cta .cta-headline {
    max-width: 350px;
    font-size: clamp(40px, 12vw, 48px);
    line-height: 1;
  }
  .cta-sub {
    max-width: 340px;
    font-size: 17px;
    line-height: 22px;
  }
  .cta-arrow {
    width: 58px;
    height: 66px;
    margin: 12px auto 34px;
  }
  .cta-survey {
    height: auto;
    min-height: 0;
    width: min(430px, 100%);
    padding: 44px 16px 34px;
    border-radius: 96px;
  }
  .cta-survey-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    min-height: auto;
    padding-top: 14px;
    padding-bottom: 52px;
  }
  .cta-quiz-slide {
    justify-content: center;
    min-height: 100%;
  }
  .cta-survey-question {
    font-size: clamp(24px, 6vw, 28px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
  }
  .cta-options {
    gap: 6px;
  }
  .cta-option {
    min-height: 44px;
    padding: 1px 12px 0 8px;
    font-size: 16px;
    line-height: 1.12;
    border-radius: 16px;
  }
  .cta-option::before {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    margin-left: 0;
    margin-right: 7px;
  }
  .cta-option::after {
    left: 17px;
  }
  .cta-progress {
    width: 160px;
    bottom: 30px;
  }
  .cta-quiz-slide--contact {
    gap: 0;
  }
  .cta-contact-check {
    width: 68px;
    height: 68px;
    margin-bottom: 6px;
  }
  .cta-quiz-slide--contact .cta-survey-question {
    max-width: 310px;
    margin-bottom: 12px;
    font-size: clamp(23px, 6.1vw, 25px);
    line-height: 1.02;
    letter-spacing: -0.35px;
  }
  .cta-quiz-form {
    gap: 7px;
    width: min(318px, 100%);
  }
  .cta-field input {
    padding: 11px 16px;
    font-size: 17px;
  }
  .cta-field-label {
    left: 17px;
    font-size: 17px;
  }
  .cta-field input:focus,
  .cta-field input:not(:placeholder-shown) {
    padding-top: 18px;
    padding-bottom: 5px;
  }
  .cta-field--tel .iti__tel-input {
    padding-inline-start: 54px !important;
  }
  .cta-field--tel .cta-field-label {
    left: 54px;
  }
  .cta-quiz-submit {
    max-width: 100%;
    min-height: 54px;
    margin-top: 7px;
    gap: 8px;
    padding: 6px 7px 6px 28px;
    font-size: clamp(20px, 5.5vw, 22px);
    white-space: nowrap;
  }
  .cta-quiz-submit::after {
    width: 40px;
    height: 40px;
    background-size: 27px;
  }
  .cta-quiz-consent {
    max-width: 300px;
    font-size: 11px;
    line-height: 1.08 !important;
  }
  .cta-quiz-back {
    margin-top: 10px;
  }
  .footer {
    padding-top: 5px;
    min-height: 247px;
  }
  .footer-logo {
    font-size: 40px;
    line-height: 36px;
  }
  .footer-socials {
    margin-top: 38px;
  }
  .footer-social {
    width: 45px;
    height: 45px;
  }
  .footer-social svg {
    width: 20px;
    height: 20px;
  }
  .footer-legal {
    max-width: 310px;
    line-height: 1.4;
  }
}


/* ============================================================
   MODUL 2 — Parallax-Social-Logos + Kundenregen (1:1 Live, performance-optimiert)
   Parallax: JS scroll → translateY (factor 0.0931/0.1349). Rain: reines CSS marquee_y.
   ============================================================ */
.m2-scene {
  position: relative;
  width: 100%;
  height: 100%;
  --m2-scene-min: 660px;
  --m2-funnel-bottom: 334px;
  --m2-funnel-max: 300px;
  --m2-rain-bottom: 140px;
  --m2-rain-height: 200px;
  --m2-rain-width: 156px;
  --m2-rain-fade-end: 90%;
  --m2-sphere-bottom: 15px;
  --m2-glow-bottom: -75px;
  --m2-logo-pull: 0.22;
  --m2-logo-entry-scale: 0.80;
  --m2-logo-rot-limit: 18;
  min-height: var(--m2-scene-min);
}
.m2-defs { position: absolute; }

/* Funnel — vorne, mittig (z 3); Desktop-Werte sind Basis, Mobile überschreibt nur die Variablen. */
.m2-funnel { position: absolute; bottom: var(--m2-funnel-bottom); left: 50%; transform: translateX(-50%); width: 90%; max-width: var(--m2-funnel-max); height: auto; z-index: 3; }

/* Social-Logos ÜBER dem Funnel, HINTER ihm (z 1) — Parallax zieht sie nach unten dahinter */
.m2-logos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.m2-logo { position: absolute; width: 30px; height: auto; filter: brightness(0) invert(0.62); transform-origin: 50% 50%; will-change: transform; }
.m2-logo--1a { top: 6%; left: 25%; width: 42px; }
.m2-logo--1b { top: 10%; left: 39%; width: 33px; }
.m2-logo--1c { top: 12%; left: 59%; width: 45px; }
.m2-logo--1d { top: 5%; left: 74%; width: 35px; }
.m2-logo--2a { top: 19%; left: 26%; width: 30px; }
.m2-logo--2b { top: 20%; left: 50%; width: 28px; }
.m2-logo--2c { top: 19%; left: 74%; width: 28px; }
.m2-logo--3a { top: 26%; left: 34%; width: 47px; height: 47px; object-fit: contain; filter: none; box-shadow: none; }
.m2-logo--3b { top: 25%; left: 51%; width: 27px; }
.m2-logo--3c { top: 25%; left: 66%; width: 29px; }

/* Kundenregen — HINTER Funnel & Kugel (z 2), nahtloser Loop */
.m2-rain { position: absolute; z-index: 2; bottom: var(--m2-rain-bottom); left: 50%; transform: translateX(-50%); width: var(--m2-rain-width); height: var(--m2-rain-height); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 var(--m2-rain-fade-end), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 var(--m2-rain-fade-end), transparent 100%); }
.m2-rain-track { display: flex; flex-direction: column; align-items: center; animation: m2-rain 13s linear infinite; will-change: transform; }
.m2-drop { display: block; fill: #ffffff; height: auto; flex-shrink: 0; opacity: 0.95; }
@keyframes m2-rain { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Schwarze 3D-Kugel unten — Regen fällt hinein (vorne, z 4) */
.m2-sphere { position: absolute; z-index: 4; bottom: var(--m2-sphere-bottom); left: 50%; transform: translateX(-50%); width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #5c5c63 0%, #2c2c31 33%, #141416 64%, #050506 100%);
  box-shadow: inset -10px -16px 34px rgba(0, 0, 0, 0.72), inset 9px 11px 26px rgba(255, 255, 255, 0.12), 0 32px 54px -20px rgba(0, 0, 0, 0.85), 0px -94px 100px -5px, 0px -44px 40px -25px; }
.m2-glow { position: absolute; left: 50%; bottom: var(--m2-glow-bottom); transform: translateX(-50%); width: 344px; height: 344px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.60) 16%, rgba(255,255,255,0.32) 32%, rgba(255,255,255,0.12) 50%, transparent 70%); z-index: 3; pointer-events: none; filter: blur(2px); }

@media (max-width: 860px) {
  .sys-visual--m2 .m2-scene {
    --m2-scene-min: 570px;
    --m2-funnel-bottom: 242px;
    --m2-funnel-max: 330px;
    --m2-rain-bottom: 104px;
    --m2-rain-height: 176px;
    --m2-rain-width: 128px;
    --m2-rain-fade-end: 72%;
    --m2-sphere-bottom: 5px;
    --m2-glow-bottom: -7px;
    --m2-logo-pull: 0.24;
  }
  /* Social-Icons: Desktop bewusst größer, auf Tablet/Mobile wieder kleiner */
  .sys-visual--m2 .m2-logo--1a { width: 36px; }   /* chatgpt */
  .sys-visual--m2 .m2-logo--1b { width: 29px; }   /* google */
  .sys-visual--m2 .m2-logo--1c { width: 39px; }   /* youtube */
  .sys-visual--m2 .m2-logo--1d { width: 31px; }   /* instagram */
  .sys-visual--m2 .m2-logo--2a { width: 26px; }   /* linkedin */
  .sys-visual--m2 .m2-logo--2b { width: 25px; }   /* whatsapp */
  .sys-visual--m2 .m2-logo--2c { width: 25px; }   /* ai */
  .sys-visual--m2 .m2-logo--3a { width: 41px; }   /* tiktok */
  .sys-visual--m2 .m2-logo--3b { width: 24px; }   /* email */
  .sys-visual--m2 .m2-logo--3c { width: 26px; }   /* facebook */
  /* Kugel auf Mobile: kleiner (112px) + hellerer Verlauf */
  .sys-visual--m2 .m2-sphere {
    width: 112px;
    height: 112px;
    background: radial-gradient(circle at 40% 30%, #717171 0%, #343434 33%, #353535 64%, #9e9ea4 100%);
    box-shadow: inset -10px -16px 34px rgba(0, 0, 0, 0.72), inset 9px 11px 26px rgba(255, 255, 255, 0.12), 0 32px 54px -20px rgb(0 0 0 / 85%), 0px -94px 100px -5px, 0px -44px 40px -25px;
  }
}
@media (prefers-reduced-motion: reduce) { .m2-rain-track { animation: none; } .m2-logo { transform: none !important; } }


/* Hero-Logo-Leiste: Desktop-Marquee (links→rechts) / Mobile statisches Pill-Grid (1:1 Live) */
.hero-logos-marquee { width: 100%; max-width: 920px; margin: 0 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
.hero-logos-track { display: flex; align-items: center; width: max-content; animation: hero-logos-marquee 171s linear infinite; will-change: transform; }
/* Abstand als margin-right (NICHT gap): gleichmäßiger 100px-Rhythmus zwischen allen Logos,
   auch über die Set-Grenze hinweg. Der exakte Loop-Versatz wird in app.js gemessen (s.u.). */
.hero-logos-track img { max-height: 39px; max-width: 130px; width: auto; height: auto; object-fit: contain; flex-shrink: 0; opacity: 1; filter: brightness(0) invert(1); margin-right: 100px; }
/* Per-Logo Optical-Sizing — Höhe/Breite einzeln getunt für homogene Wirkung (gilt für Marquee + Grid) */
.hero-logos-track img[src*="logo-1.png"], .hero-logos-grid img[src*="logo-1.png"] { max-height: 29px; max-width: none; } /* ntv (getrimmt) — Desktop kleiner (36→29) */
.hero-logos-track img[src*="logo-2.png"], .hero-logos-grid img[src*="logo-2.png"] { max-height: 41px; max-width: none; } /* IP (hochkant/gestapelt) */
.hero-logos-track img[src*="logo-7.svg"] { max-height: 24px; max-width: none; } /* ARD (Wortmarke + Kreis, nur Desktop-Marquee) — 8px kleiner */
.hero-logos-track img[src*="logo-3.svg"], .hero-logos-grid img[src*="logo-3.svg"] { max-height: 37px; max-width: none; } /* ZDF (Bildmarke) */
.hero-logos-track img[src*="logo-4.svg"], .hero-logos-grid img[src*="logo-4.svg"] { max-height: 43px; max-width: none; } /* sky — viewBox-Padding ausgeglichen, Desktop 3px kleiner (46→43) */
.hero-logos-track img[src*="logo-5.svg"], .hero-logos-grid img[src*="logo-5.svg"] { max-height: none; max-width: 165px; } /* Bertelsmann (breit) — Schrift war zu klein */
.hero-logos-track img[src*="logo-6.png"], .hero-logos-grid img[src*="logo-6.png"] { max-height: none; max-width: 145px; } /* AdAlliance (breit) */
.hero-logos-track img[src*="logo-3"], .hero-logos-grid img[src*="logo-3"] { filter: none; } /* ZDF ist bereits korrekt gefärbt (weisser Kreis, schwarzes Z) — kein Weiss-Filter */
/* Optische Vertikal-Zentrierung der Marquee: Boxen sind via align-items:center schon zentriert,
   aber bei sky/Bertelsmann sitzt das Ink innerhalb der SVG-viewBox leicht daneben. Ausgleich nur
   im Desktop-Track (Grid hat eigene Mobile-Regeln). */
.hero-logos-track img[src*="logo-4.svg"] { transform: translateY(-1.3px); } /* sky: Ink saß 1,3px zu tief */
.hero-logos-track img[src*="logo-5.svg"] { transform: translateY(0.8px); }  /* Bertelsmann: Ink saß 0,8px zu hoch */
/* Versatz = exakt eine Set-Breite, in px von app.js gemessen (--marq-shift).
   Grund: Flex/max-content löst die Spurbreite bei höhenskalierten Bildern in
   manchen Engines falsch auf → ein %-basierter Loop ruckt einmal pro Durchlauf.
   Fallback 33.333% nur, falls JS nicht lädt. Richtung wie zuvor (nach rechts).
   --marq-parallax (von app.js, scroll-abhängig) wird auf BEIDE Endpunkte addiert →
   verschiebt die ganze Marquee, ohne den Loop-Abstand (--marq-shift) zu verändern. */
@keyframes hero-logos-marquee { from { transform: translate3d(calc(-1 * var(--marq-shift, 33.333%) + var(--marq-parallax, 0px)),0,0); } to { transform: translate3d(var(--marq-parallax, 0px),0,0); } }
.hero-logos-grid { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-logos-track { animation: none; } }
@media (max-width: 768px) {
  .hero-logos-marquee { display: none; }
  .hero-logos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 372px; margin: 0 auto; }  /* Boxen 6px breiter: +12px (2 Spalten) */
  .hero-logos-pill { height: 63px; border: 1px solid #333; border-radius: 55px; display: flex; align-items: center; justify-content: center; }
  .hero-logos-pill img { height: 32px; width: auto; max-width: 70%; opacity: 1; filter: brightness(0) invert(1); }
  .hero-logos-grid img[src*="logo-1.png"] { height: 22px; max-height: 22px; transform: translateY(-3px); }  /* ntv: 4px kleiner (26→22) + 3px hoch */
  .hero-logos-grid img[src*="logo-2.png"] { height: 43px; max-height: 43px; }  /* IP: 2px größer (41→43) */
  .hero-logos-grid img[src*="logo-3.svg"] { height: 33px; max-height: 33px; }  /* ZDF: 2px kleiner (35→33) */
  .hero-logos-grid img[src*="logo-4.svg"] { height: 37px; max-height: 37px; }  /* sky: 2px kleiner (39→37) */
  .hero-logos-grid img[src*="logo-5.svg"] { height: 28px; max-height: 28px; }  /* Bertelsmann: 2px kleiner (30→28) */
  .hero-logos-grid img[src*="logo-6.png"] { height: auto; max-width: 110px; margin-top: -7px; }  /* AdAlliance: height:auto verhindert Verzerrung (erbte sonst 32px Pill-Höhe), max-width 119→110 = ~2px kleiner */
}


/* Hero-Positionierungssatz (ersetzt die Checkpoints, benennt den ICP) */
.hero-positioning { font-family: var(--sans); font-size: clamp(18px, 2.7vw, 25px); line-height: 1.3; letter-spacing: 0.2px; color: var(--c-ink-soft); max-width: 800px; margin: 16px auto 0px; }
.hero-positioning strong { color: var(--c-ink); font-weight: 500; }


/* ============================================================
   DIE ENTSCHEIDUNG — 2 Graph-Cards (Aufwärts accent + Counter/Scroll-Draw · Abwärts rot getiltet)
   ============================================================ */
.decision { padding: clamp(72px,9vw,134px) var(--pad); text-align: center; }
.decision-inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* Bühne mit gefächerten Karten dahinter */
.decision-stage { position: relative; width: 100%; max-width: 840px; margin: clamp(48px,6vw,84px) auto 0; }
.dc-ghost { position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(180deg,#19191b,#0f0f11); border: 0; pointer-events: none; }
.dc-ghost--1 { transform: translate(15px,17px); opacity: 0.7; z-index: 1; }
.dc-ghost--2 { transform: translate(30px,34px); opacity: 0.45; z-index: 0; }
.dc-ghost--3 { transform: translate(45px,51px); opacity: 0.24; z-index: 0; }

.dc-card { --dc-grid-left: 8.71%; --dc-grid-right: 8.71%; position: relative; z-index: 2; text-align: left; border-radius: 100px; padding: clamp(42px,5.2vw,60px) clamp(32px,4vw,46px);
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(130% 120% at 50% -15%, #ffffff 0%, #998e8e 50%, #282827 100%);
  border: 0;
  box-shadow: 0 46px 110px -54px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Kopf: Pfeil-Badge + Titel, darunter dezente graue Zeitwahl (nicht interaktiv) */
.dc-card-head { position: absolute; left: var(--dc-grid-left); right: var(--dc-grid-right); top: 20px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-sizing: border-box; }
.dc-title { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(22px,2.4vw,29px); font-weight: 500; color: #000000; letter-spacing: 0.1px; line-height: 1.05; }
.dc-title-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-accent); background: rgba(0,0,0,0.82); flex-shrink: 0; box-shadow: 0 14px 30px -22px rgba(0,0,0,0.9); }
.dc-title-ico svg { width: 24px; height: 24px; }
.dc-timeframe { display: flex; gap: 16px; padding-left: 56px; }
.dc-tf { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--c-ink-faint); letter-spacing: 0.2px; }
.dc-tf.is-active { color: var(--c-ink-soft); }

/* Plot */
.dc-plot { position: relative; }
.dc-graph { display: block; width: 100%; height: auto; overflow: visible; }
.dc-gl-v, .dc-gl-h { stroke: rgba(255,255,255,0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dc-gl-vs, .dc-gl-hs { stroke: rgba(255,255,255,0.04); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.dc-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: normal; }
.dc-line--new { stroke: #b6e873; }
.dc-line--old { stroke: rgba(255,255,255,0.52); }
.dc-area--new { fill: url(#dcAreaNew); opacity: 0; transition: opacity .6s ease .35s; }
.is-drawn .dc-area--new { opacity: 1; }
.dc-dots circle { opacity: 0; transition: opacity .4s ease; }
.dc-dots--new circle { fill: var(--c-accent); }
.dc-dots--old circle { fill: rgba(255,255,255,0.42); }
.dc-diverge { fill: var(--c-accent); opacity: 0; transition: opacity .45s ease .15s; }
.is-drawn .dc-dots circle, .is-drawn .dc-diverge { opacity: 1; }

/* Werte als Sprechblasen am Linienpunkt (JS-positioniert) */
.dc-callout { position: absolute; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; white-space: nowrap; z-index: 3; }
.dc-callout::before { content: ""; position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; }
.dc-callout--new { min-width: 0; padding: 13px 10px 14px; color: #050505; background: var(--c-accent); border: 0; border-radius: 14px; transform: translate(-50%, calc(-100% - 15px)); box-shadow: 0 20px 42px -28px rgba(182,232,115,0.68), 0 12px 24px -22px rgba(0,0,0,0.9); }
.dc-callout--new::before { bottom: -9px; border-top: 10px solid var(--c-accent); }
.dc-callout--new .dc-co-label { color: rgba(0,0,0,0.72); }
.dc-callout--old { min-width: 0; padding: 11px 12px 12px; color: rgba(255,255,255,0.68); background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transform: translate(-50%, 15px); }
.dc-callout--old::before { top: -9px; border-bottom: 10px solid #111; }
.dc-pct { font-family: var(--sans); font-variant-numeric: tabular-nums; line-height: 1; }
.dc-pct--new { display: block; font-size: clamp(25px,2.95vw,34px); font-weight: 500; letter-spacing: -0.7px; color: inherit; }
.dc-pct--old { display: block; font-size: 25px; font-weight: 500; letter-spacing: -0.4px; color: inherit; }
.dc-co-label { position: static; font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.1; letter-spacing: 0.1px; color: rgba(0,0,0,0.72); white-space: nowrap; }
.dc-callout--old .dc-co-label { font-size: 14.5px; font-weight: 400; color: rgba(255,255,255,0.56); }

/* Monatsachse — exakt unter den Datenpunkten */
.dc-axis { position: relative; height: 16px; margin-top: 9px; }
.dc-axis span { position: absolute; transform: translateX(-50%); font-family: var(--sans); font-size: 12px; color: var(--c-ink-faint); }

.dc-foot { margin-top: 14px; padding-left: var(--dc-grid-left); padding-right: var(--dc-grid-right); box-sizing: border-box; }
.dc-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--c-ink-soft); }
.dc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }

@media (max-width: 600px){
  .decision-headline { width: 100%; max-width: var(--mobile-content, calc(100vw - 40px)); font-size: var(--mobile-display-size, 44px); }
  .dc-card { min-height: auto; padding: 38px 22px 54px; border-radius: 38px; justify-content: center; }
  .dc-ghost { border-radius: 38px; }
  .dc-card-head { position: static; width: 100%; margin-bottom: 18px; gap: 5px; }
  .dc-plot { width: 100%; }
  .dc-graph { aspect-ratio: 620 / 442; height: auto; }
  .dc-title { font-size: 22px; }
  .dc-title-ico { width: 34px; height: 34px; }
  .dc-title-ico svg { width: 19px; height: 19px; }
  .dc-timeframe { padding-left: 44px; gap: 12px; }
  .dc-callout { gap: 3px; width: max-content; max-width: calc(100% - 24px); }
  .dc-callout::before { border-left-width: 6px; border-right-width: 6px; }
  .dc-callout--new { min-width: 0; padding: 7px 5px 8px; border-radius: 11px; transform: translate(-50%, calc(-100% - 10px)); }
  .dc-callout--new::before { bottom: -7px; border-top-width: 8px; }
  .dc-callout--old { min-width: 0; padding: 7px 10px 8px; border-radius: 11px; transform: translate(-50%, 10px); }
  .dc-callout--old::before { top: -7px; border-bottom-width: 8px; }
  .dc-pct--new { font-size: 26px; letter-spacing: -0.25px; }
  .dc-pct--old { font-size: 18px; }
  .dc-co-label { font-size: 10px; }
  .dc-callout--old .dc-co-label { font-size: 10.5px; }
  .dc-axis span { font-size: 11px; }
  .dc-ghost--1 { transform: translate(9px,11px); }
  .dc-ghost--2 { transform: translate(18px,22px); }
  .dc-ghost--3 { transform: translate(27px,33px); }
}


/* Pfeil zwischen den System-Modulen (dunkelgrau, Parallax-Drift nach unten) */
.sys-arrow { display: flex; justify-content: center; margin: clamp(12px, 2vw, 26px) 0; color: rgba(255,255,255,0.30); }
.sys-arrow svg { width: clamp(30px, 3.4vw, 42px); height: auto; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .sys-arrow svg { transform: none !important; } }


/* ============================================================
   WAS KUNDEN SAGEN — Caveat-Zitat-Slider (Crossfade, Dots, kein Autoplay) — 1:1 dark
   ============================================================ */
.ks-quotes { background: var(--c-black, #07070d); padding: clamp(72px,9vw,104px) 0 clamp(84px,10vw,112px); overflow: hidden; }

/* Desktop/Tablet (≥601px): Section-Abstände vereinheitlichen (oben 140 / unten 300).
   markt/decision/ks-quotes/statement haben eigenes Padding -> hier überschreiben.
   ≤600px bleibt bei den Mobile-Regeln (oben 40 / unten 300). */
@media (min-width: 601px) {
  .markt,
  .decision,
  .ks-quotes {
    padding-top: 140px;
    padding-bottom: 300px;
  }
  .statement {
    padding-top: 140px !important;   /* schlägt das frühere padding-top:150px !important */
    padding-bottom: 300px;
  }
}
.ks-quotes .container { max-width: 1170px; margin: 0 auto; padding: 0 var(--pad); }
.ks-quotes__eyebrow { font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; text-align: center; color: var(--c-ink-soft); margin: 0 0 clamp(28px,4vw,44px); }
.ks-quotes__slider { max-width: 570px; margin: 0 auto; outline: none; }
.ks-quotes__viewport { display: grid; position: relative; }
.ks-quote { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; pointer-events: none; }
.ks-quote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; pointer-events: auto; }
.ks-quote__text { font-family: 'Caveat', var(--serif); font-weight: 400; font-size: clamp(38px,5.4vw,52px); line-height: 1.0; letter-spacing: -1px; color: var(--c-ink); margin: 0 0 30px; max-width: 550px; }
.ks-quote__meta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 26px; }
.ks-quote__name { font-family: var(--sans); font-size: 18px; font-weight: 400; letter-spacing: -0.2px; color: var(--c-ink-soft); }
.ks-quote__role { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: -0.2px; color: var(--c-ink-soft); }
.ks-quote__photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-surface-line); background: var(--c-surface); }
.ks-quotes__dots { display: flex; justify-content: center; gap: 8px; margin-top: 38px; }
.ks-quotes__dot { width: 10px; height: 3px; padding: 0; border: 0; cursor: pointer; background: var(--c-ink-faint); border-radius: 0; transition: background .25s ease, width .25s ease; }
.ks-quotes__dot:hover { background: var(--c-ink-soft); }
.ks-quotes__dot.is-active { background: var(--c-accent); width: 22px; }
.ks-quotes__dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (max-width: 560px) { .ks-quote__photo { width: 132px; height: 132px; } }
@media (prefers-reduced-motion: reduce) { .ks-quote { transition: opacity .2s linear, visibility 0s; transform: none; } }

/* ============================================================
   FOUNDER — „Über den Founder" / Jan Froboese — 1:1 dark
   ============================================================ */
.founder { background: transparent; }
.founder-inner { max-width: 1180px; }
.founder-head { margin: 0 0 clamp(16px,2vw,24px); text-align: left; }
.founder-eyebrow { display: inline-block; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1; color: var(--c-ink-soft); background: rgba(255,255,255,0.05); border: 1px solid var(--c-surface-line); border-radius: 999px; padding: 8px 20px; margin: 0 0 22px; }
.founder-title { font-size: clamp(34px,4.4vw,50px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; max-width: none; text-align: left; }
.founder-grid { display: grid; grid-template-columns: 504px 1fr; gap: clamp(30px,4vw,54px); align-items: center; }
.founder-body { display: flex; flex-direction: column; }
.founder-photo { position: relative; margin: 0; width: 504px; aspect-ratio: 1050 / 1400; border-radius: 70px; overflow: hidden; background: var(--c-surface); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: brightness(0.7) contrast(1.1) saturate(0.8); }
.founder-socials { position: absolute; left: 50%; bottom: 98px; transform: translateX(-50%); display: flex; gap: 12px; z-index: 2; }
.founder-social { width: 66px; height: 66px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgb(255 255 255 / 40%); background: rgba(255, 255, 255, 0.005); box-shadow: inset 0 0 20px 2px rgb(255 255 255 / 11%); transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; }
.founder-social svg { width: 30px; height: 30px; }
.founder-social:hover { width: 66px; height: 66px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-accent); background: rgba(255, 255, 255, 0.005); box-shadow: inset 0 0 16px -2px rgb(255 255 255 / 26%); transform: translateY(-1px); }
.founder-bio { display: flex; flex-direction: column; text-align: left; }
.founder-bio p { font-family: var(--sans); font-weight: 400; font-size: clamp(17px, 2vw, 24px); line-height: 1.5; letter-spacing: -0.01em; color: var(--c-ink-soft); margin: 0; }
.founder-bio p:last-child { margin-bottom: 0; }
/* founder-bio: ein Fließtext, keine Hervorhebungen */
@media (max-width: 760px) { .founder-grid { grid-template-columns: 1fr; gap: 28px; justify-items: start; } .founder-photo { width: min(504px, 82%); } }

/* Audit-Fix: dc-ghost--3 ragt bei Tablet 11px über den Rand -> clippen ohne Scroll */
#entscheidung { overflow-x: clip; }

/* Globale Seitenfläche: alle echten Seiten-Sections + Footer bleiben hart schwarz. */
body,
body > section,
body > section[class],
body > footer.footer,
.hero,
.statement,
.markt,
.testimonials,
.decision,
.system,
  .ks-quotes,
.founder,
.faq,
.cta,
.footer {
  background: #000 !important;
  background-color: #000 !important;
}

.cta::before {
  display: none;
}

/* === Headline-Akzent: <em> in Headlines = Akzentfarbe === */
.display em, .sys-title em { color: var(--c-accent); font-style: normal; font-weight: inherit; }

/* === Eyebrow-Pills site-weit vereinheitlicht (grau, dezent, gleiche Pill) — Hero ausgenommen === */
.markt-kicker, .decision-kicker, .system-eyebrow, .testimonials-badge,
.ks-quotes__eyebrow, .founder-eyebrow, .cta-eyebrow, .mc-eyebrow, .sys-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1;
  letter-spacing: 0.2px; text-transform: none; font-style: normal;
  color: var(--c-ink-soft);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-surface-line);
  border-radius: 999px;
  padding: 8px 20px;
}
.mc-eyebrow {
  position: static;
  top: auto;
  left: auto;
  margin: 20px 0 0;
  gap: 7px;
  color: black;
  background: rgb(0 0 0 / 8%);
}
.sys-badge {
  top: 0px;
  gap: 0;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -1px;
  color: #ffffff;
  background: rgb(255 255 255 / 34%);
  border: 1px solid var(--c-surface-line);
  border-radius: 38px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 28px 20px;
}

/* "Was Kunden sagen"-Eyebrow zentrieren (Pill mittig) */
.ks-quotes__eyebrow { display: flex; width: -moz-fit-content; width: fit-content; margin: 0 auto clamp(28px,4vw,44px); }

/* GHL-Survey-iframe in der Orb-Card */
.cta-survey iframe { position: relative; z-index: 2; width: 100%; min-height: 511px; border: 0; display: block; background: transparent; }

/* ============================================================================
   NATIVES QUIZ — Zustände, die das CSS-Gerüst (.cta-survey-card/.cta-options/
   .cta-option/.cta-progress) für den interaktiven Betrieb ergänzt.
   Gerendert von quiz.js aus quiz.schema.json. Aktiv nur im nativen Modus.
   ========================================================================== */
/* [hidden] muss die display:block-Regeln von iframe/card schlagen (Flag-Umschaltung) */
.cta-survey [hidden] { display: none !important; }
.cta-quiz-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* Überschrift + Radios vertikal mittig in der Card */
  flex: 1 1 auto;            /* Slide füllt die fixe Card-Höhe -> echtes Zentrieren */
  min-height: 360px;
  animation: ctaQuizIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.cta-quiz-slide.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
@keyframes ctaQuizIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Optionen: Button-Reset + gestaffeltes Einschweben */
.cta-option { appearance: none; border: 0; cursor: pointer; width: min(420px, 100%); }
.cta-option-label { display: block; flex: 1 1 auto; padding-right: 3px; }

@media (max-width: 760px) {
  .cta-survey { padding: 44px 26px 34px; }
}
.cta-options .cta-option {
  animation: ctaOptIn 4.05s cubic-bezier(.16,1,.3,1) both;   /* nochmal 50% langsamer, stark abbremsend */
  animation-delay: calc(30ms + var(--i, 0) * 24ms);           /* 20% mehr Versatz */
}
@keyframes ctaOptIn { from { transform: translateY(9.4px); } to { transform: none; } }

/* Check-Indikator: schwarzer Kreis + grünes Häkchen — IMMER gleich (auch Hover/Selected).
   Nur das Pill wechselt bei Hover/Auswahl auf Accent-Grün. */
.cta-option::before { opacity: 1; transition: background .18s ease; }
/* Auswahl UND Hover: gleiches Schema -> Pill schwarz, Text weiß, Icon-Kreis Accent + schwarzes Häkchen */
.cta-option.is-selected { background: #0c1206; color: #fff; }
.cta-option:hover::before,
.cta-option.is-selected::before {
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 12.6l4.4 4.4L19.5 6.4' stroke='%230c1206' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 23px no-repeat;
}

/* Kontakt-Slide */
.cta-quiz-form { display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); margin: 0 auto; position: relative; }
.cta-field { display: block; position: relative; }
/* Submit-Karte: rundes Check-Icon + kompaktere Überschrift */
.cta-contact-check {
  width: 90px;
  height: 90px;
  margin: 0 auto 10px;
  transform-origin: center;
  animation: ctaCheckPop 2.2s cubic-bezier(.16,1,.3,1) both;
}
.cta-contact-check svg { width: 100%; height: 100%; display: block; }
.cta-contact-check circle { fill: #0000001f; }    /* halbtransparent schwarzer Kreis */
.cta-contact-check path {
  stroke: var(--c-accent);                        /* Haken in Accent-Grün */
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;                           /* zeichnet sich ein */
  animation: ctaChartDraw 2s .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ctaChartDraw { to { stroke-dashoffset: 0; } }
@keyframes ctaCheckPop { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cta-quiz-slide--contact .cta-survey-question {
  min-height: 0;
  max-width: 460px;
  font-size: 30px;                                /* gleiche Größe wie die anderen Überschriften */
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.5px;
}
.cta-field input {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 13px 18px;
  font: 400 19px var(--sans);
  color: #0c1206;
  background: rgba(255,255,255,.52);            /* leer: halbtransparent */
  box-shadow: -40px 30px 100px -7px rgba(0,0,0,.25);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, padding .15s ease;
}
.cta-field input::placeholder { color: transparent; }   /* Space-Placeholder unsichtbar (Floating-Label übernimmt) */
.cta-field input:not(:placeholder-shown) { background: rgba(255,255,255,.1); }  /* ausgefüllt + verlassen */
.cta-field input:hover { background: rgba(255,255,255,1); }                      /* Mouseover: voll weiß */

/* Floating-Label: liegt mittig als Platzhalter, wandert beim Fokus/Inhalt mini nach oben */
.cta-field-label {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(12,18,6,.45);
  font: 400 19px var(--sans);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, transform .15s ease, color .15s ease;
}
.cta-field input:focus + .cta-field-label,
.cta-field input:not(:placeholder-shown) + .cta-field-label {
  top: 5px;
  transform: none;
  font-size: 10px;
  font-weight: 600;
  color: rgba(12,18,6,.55);
}
/* Wert nach unten schieben, sobald das Label oben sitzt (ALLE Felder, auch Telefon) */
.cta-field input:focus,
.cta-field input:not(:placeholder-shown) { padding-top: 20px; padding-bottom: 6px; }

/* intl-tel-input ans Feld-Design anpassen: gleiche Box/Höhe wie die anderen Felder */
.cta-field--tel .iti { width: 100%; display: block; margin: 0; }
.cta-field--tel .iti > input,
.cta-field--tel .iti input[type="tel"] { width: 100%; }
/* Flagge auf dieselbe Startlinie (18px) wie die Platzhalter der Felder darüber */
.cta-field--tel .iti__country-container { padding-inline-start: 10px; display: flex; align-items: center; }
.cta-field--tel .iti__selected-country { display: flex; align-items: center; height: 100%; }
.cta-field--tel .iti__selected-country-primary { display: flex; align-items: center; }
.cta-field--tel .iti__tel-input { padding-inline-start: 58px !important; }
/* Floating-Label fürs Telefon (input steckt im .iti-Wrapper -> via :has() statt + steuern).
   Liegt rechts neben der Flagge und wandert beim Fokus/Inhalt mini nach oben. */
.cta-field--tel .cta-field-label { left: 58px; }

/* ---- Länder-Dropdown: kompakt, klappt IMMER nach oben über die Felder darüber ---- */
.cta-field--tel .iti__dropdown-content {
  position: absolute;
  top: auto;
  bottom: calc(100% + 8px);       /* nach oben statt nach unten */
  left: 0;
  width: max-content;             /* nur so breit wie nötig */
  min-width: 230px;
  max-width: 320px;
  z-index: 99999;                 /* über Karte + Nav */
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px -10px rgba(0,0,0,.45);
  overflow: hidden;
  font-family: var(--sans);
}
/* Suchfeld: kein Rahmen/Fokus-Ring, leicht graue Pille */
.cta-field--tel .iti__search-input {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 9px 12px;
  font: 400 14px var(--sans);
  color: #0c1206;
  border: none !important;
  outline: none !important;
  border-radius: 9px;
  background: rgba(12,18,6,.06);
  box-shadow: none !important;
}
.cta-field--tel .iti__search-input:focus { background: rgba(12,18,6,.09); }
.cta-field--tel .iti__search-input::placeholder { color: rgba(12,18,6,.4); }
.cta-field--tel .iti__country-list { max-height: 226px; }
.cta-field--tel .iti__country {
  padding: 8px 13px;
  font: 400 15px var(--sans);
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 9px;
}
.cta-field--tel .iti__country .iti__country-name { color: #0c1206; }
.cta-field--tel .iti__country .iti__dial-code { color: rgba(12,18,6,.45); margin-left: auto; padding-left: 14px; }
.cta-field--tel .iti__country.iti__highlight { background: rgba(182,232,115,.28); }  /* Accent-Hover */
.cta-field--tel .iti__flag-box { margin: 0; }
/* gezielt der Telefon-Input — iti fügt zusätzlich einen versteckten Such-Input ein */
.cta-field--tel:has(input[type="tel"]:focus) .cta-field-label,
.cta-field--tel:has(input[type="tel"]:not(:placeholder-shown)) .cta-field-label {
  top: 5px;
  transform: none;
  font-size: 10px;
  font-weight: 600;
  color: rgba(12,18,6,.55);
}
.cta-field input:focus { outline: none; border-color: transparent; background: rgba(255,255,255,1); } /* Klick/Schreiben: nur voll weiß, kein grüner Rahmen */

/* ---- Chrome/Safari-Autofill: kein gelber Hintergrund, gleiche Schrift, kein Überlagern ---- */
.cta-field input:-webkit-autofill,
.cta-field input:-webkit-autofill:hover,
.cta-field input:-webkit-autofill:focus,
.cta-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #0c1206;
  -webkit-box-shadow: 0 0 0 1000px #fff inset, -40px 30px 100px -7px rgba(0,0,0,.25);
  box-shadow: 0 0 0 1000px #fff inset, -40px 30px 100px -7px rgba(0,0,0,.25);
  caret-color: #0c1206;
  font: 400 19px var(--sans);
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
}
/* Wert nach unten, Label hoch — sobald Autofill greift (sonst überlagern sich Label + Wert) */
.cta-field input:-webkit-autofill { padding-top: 20px; padding-bottom: 6px; }
.cta-field input:-webkit-autofill + .cta-field-label,
.cta-field input:autofill + .cta-field-label,
.cta-field--tel:has(input:-webkit-autofill) .cta-field-label,
.cta-field--tel:has(input:autofill) .cta-field-label {
  top: 5px;
  transform: none;
  font-size: 10px;
  font-weight: 600;
  color: rgba(12,18,6,.55);
}
.cta-quiz-submit {
  width: auto;                 /* so breit wie der Inhalt */
  align-self: center;          /* zentriert im flex-column Formular */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 10px auto 0;
  border: 0;
  border-radius: 49px;
  padding: 8px 8px 8px 39px;   /* rechts 8px -> Accent-Kreis sitzt mit Rand */
  font: 600 25px/1 var(--sans);
  color: white;
  background: black;
  cursor: pointer;
  box-shadow: 0 18px 45px -25px rgba(182,232,115,.85);
  transition: transform .15s ease, filter .15s ease;
}
.cta-quiz-submit:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cta-quiz-submit.is-loading { opacity: .7; cursor: progress; }
.cta-quiz-consent { max-width: 380px; margin: 1px auto 0; letter-spacing: -0.1px; color: rgba(255,255,255,.42); font: 400 12px var(--sans); line-height: 1em !important; }
/* Fehlermeldung: schwebende kleine Pille oben mittig über dem Formular (kein Layout-Sprung) */
.cta-quiz-error {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  margin: 0;
  max-width: 90%;
  width: max-content;
  padding: 3px 15px;
  text-align: center;
  color: #bf1622;
  background: rgb(215 215 215 / 97%);
  font: 700 12.5px / 1.3 var(--sans);
  border-radius: 12px;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.cta-quiz-error[hidden] { display: none; }

/* Submit-Karte: Felder / Button / Consent gestaffelt einblenden — wie die Radio-Optionen */
.cta-quiz-slide--contact .cta-field,
.cta-quiz-slide--contact .cta-quiz-submit,
.cta-quiz-slide--contact .cta-quiz-consent {
  animation: ctaOptIn 4.05s cubic-bezier(.16,1,.3,1) both;
}
.cta-quiz-slide--contact .cta-field:nth-of-type(1) { animation-delay: 60ms; }
.cta-quiz-slide--contact .cta-field:nth-of-type(2) { animation-delay: 84ms; }
.cta-quiz-slide--contact .cta-field:nth-of-type(3) { animation-delay: 108ms; }
.cta-quiz-slide--contact .cta-field:nth-of-type(4) { animation-delay: 132ms; }
.cta-quiz-slide--contact .cta-quiz-submit  { animation-delay: 156ms; }
.cta-quiz-slide--contact .cta-quiz-consent { animation-delay: 180ms; }

/* Zurück-Link */
.cta-quiz-back { margin-top: 16px; border: 0; background: none; cursor: pointer; color: rgba(255,255,255,.5); font: 500 14px var(--sans); transition: color .15s ease; }
.cta-quiz-back:hover { color: #fff; }
.cta-quiz-back { display: none !important; }   /* Zurück-Button in allen Quiz-Slides ausgeblendet */

/* Honeypot — für Menschen unsichtbar, aber von Bots ausgefüllt */
.cta-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Danke-State mit gezeichnetem Haken */
.cta-quiz-done { position: relative; top: -20px; justify-content: center; gap: 6px; padding-top: 30px; }
.cta-quiz-done:focus { outline: none; }
.cta-quiz-check svg { width: 76px; height: 76px; margin: 0 auto 10px; display: block; }
.cta-quiz-check circle { stroke: var(--c-accent); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: ctaCheckCircle .5s ease forwards; }
.cta-quiz-check path { stroke: var(--c-accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ctaCheckMark .35s .42s ease forwards; }
@keyframes ctaCheckCircle { to { stroke-dashoffset: 0; } }
@keyframes ctaCheckMark { to { stroke-dashoffset: 0; } }
.cta-quiz-done-head { margin: 0; color: var(--cta-ink, #f7f7f2); font: 600 40px/1 var(--sans); letter-spacing: -1.5px; }
.cta-quiz-done-text { max-width: 440px; margin: 16px auto 0; color: rgba(255,255,255,.66); font: 500 21px var(--sans); letter-spacing: -0.6px; }

/* Done-Icon: eigener SVG-Kreis, kantiges Dokument, feine Linien */
.cta-quiz-done-icon {
  width: 110px; height: 110px; margin: 0 auto 7px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  animation: ctaCheckPop 2.2s cubic-bezier(.16,1,.3,1) both;
}
.cta-quiz-done-icon svg { width: 100%; height: 100%; display: block; color: #fff; fill: none; overflow: visible; }
.cta-quiz-done-icon .done-icon-bg {
  fill: #0000007a;
}
.cta-quiz-done-icon .done-document,
.cta-quiz-done-icon .done-fold {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cta-quiz-done-icon .done-line {
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cta-quiz-done-icon .done-check-bg {
  fill: var(--c-accent);
}
.cta-quiz-done-icon .done-check {
  stroke: #0c1206;
  stroke-width: 3.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ctaCheckMark .42s .36s cubic-bezier(.16,1,.3,1) forwards;
}

/* Progressbar 90% (doppelte Höhe) mit laufenden Diagonal-Streifen — helle, dezente Grautöne */
.cta-quiz-done-bar {
  width: min(280px, 78%); height: 20px; margin: 10px auto 2px;
  background: rgb(0 0 0 / 12%); border: 1px #9b9b9b solid; border-radius: 99px; overflow: hidden;
}
.cta-quiz-done-bar-fill {
  display: block; width: 90%; height: 100%; border-radius: inherit;
  background-color: rgb(175 175 175 / 20%);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.32) 25%, #a9a9a945 25%, transparent 50%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.32) 75%, transparent 75%);
  background-size: 24px 24px;
  animation: ctaBarStripes .8s linear infinite;
}
@keyframes ctaBarStripes { from { background-position: 0 0; } to { background-position: 24px 0; } }

@media (prefers-reduced-motion: reduce) {
  .cta-quiz-slide, .cta-options .cta-option { animation: none !important; }
  .cta-quiz-slide.is-leaving { transition: none; }
  .cta-progress-fill { transition: none; }
  .cta-quiz-check circle, .cta-quiz-check path { animation: none !important; stroke-dashoffset: 0 !important; }
  .cta-contact-check { animation: none !important; transform: none !important; }
  .cta-contact-check path { animation: none !important; stroke-dashoffset: 0 !important; }
  .cta-quiz-done-icon { animation: none !important; }
  .cta-quiz-done-bar-fill { animation: none !important; }
}

/* ===== Quiz Light-Theme — heller Orb + dunkle Texte (nur eigene Klassen) ===== */
/* Heller Orb */
.cta-survey {
  background: radial-gradient(circle, #ffffff 0%, #cecece 52%, #aeaeae 69%, #ffffff6e 99%);
}
/* Alle Headlines/Texte im Survey schwarz/dunkel (lesbar auf hellem Orb) */
.cta-survey-question { color: #0c1206; }
.cta-quiz-done-head  { color: #0c1206; }
.cta-quiz-done-text  { color: black; }
.cta-quiz-consent    { color: rgba(12,18,6,.5); }
.cta-quiz-back       { color: rgba(12,18,6,.55); }
.cta-quiz-back:hover { color: #0c1206; }
/* (Kreis schwarz + grünes Häkchen kommen jetzt aus dem Basis-::before — keine
   Light-Theme-Farb-Overrides mehr nötig.) */
/* Progress: dunkle Füllung + heller Text */
.cta-progress        { background: rgba(0,0,0,.10); }
.cta-progress-fill   { background: rgba(12,18,6,.10); color: #aaa; }
/* Kontakt-Felder (letzte Karte): klarer Radius + Kontur auf hellem Grund */
.cta-field input     { border-radius: 14px; border: 1px solid rgba(0,0,0,.12); }
/* Submit-Button-Icon: Accent-Kreis mit schwarzem Pfeil, als Flex-Item nach dem Text */
.cta-quiz-submit::after {
  content: "";
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 29px no-repeat;
}
.cta-quiz-submit.is-loading::after { opacity: .5; }

@media (max-width: 760px) {
  .cta-quiz-slide--contact {
    gap: 0;
  }
  .cta-contact-check {
    width: 68px;
    height: 68px;
    margin-bottom: 6px;
  }
  .cta-quiz-slide--contact .cta-survey-question {
    max-width: 310px;
    margin-bottom: 12px;
    font-size: clamp(23px, 6.1vw, 25px);
    line-height: 1.02;
    letter-spacing: -0.35px;
  }
  .cta-quiz-form {
    gap: 7px;
    width: min(318px, 100%);
  }
  .cta-field input {
    padding: 11px 16px;
    font-size: 17px;
  }
  .cta-field-label {
    left: 17px;
    font-size: 17px;
  }
  .cta-field input:focus,
  .cta-field input:not(:placeholder-shown) {
    padding-top: 18px;
    padding-bottom: 5px;
  }
  .cta-field--tel .iti__tel-input {
    padding-inline-start: 54px !important;
  }
  .cta-field--tel .cta-field-label {
    left: 54px;
  }
  .cta-quiz-submit {
    max-width: 100%;
    min-height: 54px;
    margin-top: 7px;
    gap: 8px;
    padding: 6px 7px 6px 28px;
    font-size: clamp(20px, 5.5vw, 22px);
    white-space: nowrap;
  }
  .cta-quiz-submit::after {
    width: 40px;
    height: 40px;
    background-size: 27px;
  }
  .cta-quiz-consent {
    max-width: 300px;
    font-size: 11px;
    line-height: 1.08 !important;
  }
  .cta-quiz-back {
    margin-top: 10px;
  }
}


/* ============================================================
   FOUNDER COVERFLOW — Maus-gesteuerter Foto-Coverflow (#founder)
   Fotos mittig über dem Text. Mitte aktiv/scharf, je 2 links/rechts
   unscharf verschachtelt. Maus rechts -> nächstes mittig (umlaufend).
   ============================================================ */
.founder--coverflow .founder-inner{
  display:flex; flex-direction:column; align-items:center;
}
/* Reihenfolge: Fotos, Eyebrow, Headline, Text, Socials */
.founder--coverflow .founder-eyebrow{ margin:0 0 clamp(16px,2vw,24px); }
.founder--coverflow .founder-head{ text-align:center; }
.founder--coverflow .founder-title{ text-align:center; }
.founder--coverflow .cf-text{ max-width:760px; }
.founder--coverflow .founder-bio,
.founder--coverflow .founder-bio p{ text-align:center; }
.founder--coverflow .founder-body{ align-items:center; }
.founder--coverflow .founder-title{ margin:0 0 clamp(14px,2vw,22px); }
.founder--coverflow .founder-media{
  width:100%; display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2vw,24px);
}
.founder--coverflow .founder-socials{
  position:static; transform:none; left:auto; bottom:auto;
  justify-content:center; margin-top:clamp(22px,3vw,34px);
}

/* grüner Brand-Halo hinter der aktiven Karte */
/* ===== DESKTOP (>991px): Hover-Akkordeon. Feste Slots, aktive Karte kommt an ihrer
   Stelle nach vorn (+40px zur Mitte). Steuerbar per Hover ODER Maus-Drag (gleicher
   Effekt). JS setzt --tx/--shift/--s/--blur/--bright/--z. ===== */
.cf-stage-wrap{ position:relative; width:min(1040px,100%); }
.cf-stage-wrap::before{
  content:""; position:absolute; top:46%; left:50%;
  width:min(620px,80vw); aspect-ratio:1/1; transform:translate(-50%,-50%);
  filter:blur(6px); pointer-events:none;
  display:none;   /* grüner Glow hinter den Founder-Fotos entfernt */
}
.coverflow{
  --cw:clamp(266px,31vw,406px); --card-radius:20px;
  --cf-ease:cubic-bezier(.16,1,.3,1); --cf-speed:.78s;
  --cf-build-ease:cubic-bezier(.19,1,.22,1); --cf-build-speed:2.34s;
  position:relative; width:100%;
  height:calc(var(--cw) * 4 / 3 * 1.16);
  touch-action:pan-y; cursor:default; user-select:none;   /* Desktop: hovern + Pfeile (keine Grab-Hand) */
}
.coverflow.is-grabbing{ cursor:grabbing; }
.cf-stage{ position:absolute; inset:0; }
.cf-card{
  position:absolute; top:50%; left:50%;
  width:calc(var(--cw) * var(--card-w, 1)); aspect-ratio:var(--img-ar, 3/4);
  border-radius:var(--card-radius); overflow:hidden;
  background:var(--c-surface,#161618);
  --tx:0; --s:1; --blur:0px; --op:1; --bright:1; --z:50; --shift:0px;
  transform:translate(-50%,-50%) translateX(calc(var(--cw) * var(--tx) + var(--shift))) scale(var(--s));
  z-index:var(--z); opacity:var(--op); filter:blur(var(--blur)) brightness(var(--bright));
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
  transition:transform var(--cf-speed) var(--cf-ease), filter var(--cf-speed) var(--cf-ease),
             opacity var(--cf-speed) var(--cf-ease), box-shadow var(--cf-speed) var(--cf-ease);
  will-change:transform, filter, opacity;
}
.cf-card[data-i="2"]{ --z:80; }
.coverflow.is-building .cf-card{
  transition:transform var(--cf-build-speed) var(--cf-build-ease), filter var(--cf-build-speed) var(--cf-build-ease),
             opacity var(--cf-build-speed) var(--cf-build-ease), box-shadow var(--cf-build-speed) var(--cf-build-ease);
}
.cf-card img{ width:100%; height:100%; object-fit:contain; object-position:center center; -webkit-user-drag:none; }
.cf-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 40%); pointer-events:none; }
.cf-card.is-active{
  box-shadow:0 40px 90px -22px rgba(0,0,0,.8);   /* nur schwarzer Shadow, kein Glow/Ring */
}
.cf-hint{ display:none; }
@media (prefers-reduced-motion: reduce){ .cf-card{ transition:none; } }

/* ===== MOBILE (≤991px): verschachtelter Center-Snap-Coverflow ===== */
@media (max-width: 991px){
  .cf-stage-wrap::before{ display:none; }
  .coverflow.is-slider{
    --cw:min(78vw, 320px);
    height:calc(var(--cw) * 4 / 3 * 1.08);
    display:block;
    overflow:hidden;
    touch-action:pan-y;
    cursor:grab;
    padding:0;
    scrollbar-width:none;
  }
  .coverflow.is-slider.is-grabbing{ cursor:grabbing; }
  .coverflow.is-slider::-webkit-scrollbar{ display:none; }
  .is-slider .cf-stage{ position:absolute; inset:0; display:block; }
  .is-slider .cf-card{
    position:absolute; top:50%; left:50%; width:calc(var(--cw) * var(--card-w, 1));
    aspect-ratio:var(--img-ar, 3/4);
    transform:translate(-50%,-50%) translateX(calc(var(--cw) * var(--tx) + var(--shift))) scale(var(--s));
    opacity:1;
    filter:blur(var(--blur)) brightness(var(--bright));
    transition:transform 2.145s cubic-bezier(.19,1,.22,1), filter 2.145s cubic-bezier(.19,1,.22,1), opacity 1.365s ease;  /* Aufbau: 3x langsamer + staerkerer Ease-Out */
  }
  /* Während des Drags KEINE Transition -> Karten folgen 1:1 dem Finger; nur das Einrasten beim Loslassen animiert */
  .coverflow.is-slider.is-grabbing .cf-card{ transition:none; }
}

/* ============================================================
   MOBILE RASTER — einheitliche Seitenränder + große, sichere Headlines
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --pad: var(--mobile-gutter);
    --mobile-display-size: 44px;
    --mobile-hero-size: 35px;
    --mobile-headline-max: min(12.6ch, var(--mobile-content));
    --section-pad-top: 40px;     /* war 78px — Mobile-Anker landen sauber (weniger Top-Padding) */
    --section-pad-bottom: 100px; /* einheitlicher Section-Abstand unten (system, testimonials) */
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  section,
  .footer,
  .markt,
  .decision,
  .cta {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  /* Mobile-Anker landen sauber: weniger Top-Padding pro Section, der Abstand
     wandert ins Bottom-Padding (Top 40 / Bottom 150). CTA = Ausnahme (s. u.). */
  .markt,
  .decision,
  .ks-quotes,
  .founder,
  .faq {
    padding-top: 40px;
    padding-bottom: 250px;
  }
  .statement { padding-bottom: 250px; }
  /* .system braucht top+bottom !important, weil das frühere
     `.system { padding: 10px !important }` sonst gewinnt. */
  .system { padding-top: 40px !important; padding-bottom: 250px !important; }
  .cta {
    padding-top: 40px;      /* war 88px (≤1000-Block) -> Potenzial-Check-Anker landet sauber */
    padding-bottom: 15px;   /* eng: ~30px cta-proof -> Footer-Logo statt großem Section-Abstand */
  }
  .container,
  .markt-inner,
  .decision-inner,
  .decision-stage,
  .system-intro,
  .testimonials-head,
  .ks-quotes .container,
  .cta > .container,
  .footer .container,
  .founder .container {
    width: 100%;
    max-width: var(--mobile-content);
    margin-left: auto;
    margin-right: auto;
  }

  .system-intro,
  .testimonials-head {
    padding-left: 0;
    padding-right: 0;
  }

  .display,
  .hero .hero-h1,
  .markt-headline,
  .decision-headline,
  .testimonials-title,
  .system-headline,
  .founder-title,
  .cta .cta-headline,
  .tc-heading-h2,
  .starter-modal-title,
  .system-all-title,
  .cap-headline,
  .statement-text,
  .founder-quote,
  .ks-quote__text,
  .sys-title,
  h1,
  h2,
  h3 {
    max-inline-size: var(--mobile-headline-max);
    margin-left: 0;
    margin-right: auto;
    letter-spacing: 0;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    text-wrap: pretty;
  }

  .display,
  .markt-headline,
  .decision-headline,
  .testimonials-title,
  .system-headline,
  .founder-title,
  .cta .cta-headline,
  .tc-heading-h2,
  .system-all-title {
    font-size: var(--mobile-display-size);
    line-height: 1.06;
  }

  .markt-inner,
  .decision-inner,
  .testimonials-head,
  .system-intro,
  .cta > .container {
    text-align: center;
  }

  .markt-headline,
  .decision-headline,
  .testimonials-title,
  .system-headline,
  .cta .cta-headline {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero .hero-h1 {
    max-inline-size: var(--mobile-content);
    font-size: var(--mobile-hero-size);
    line-height: 1.06;
    hyphens: manual;
    letter-spacing: -0.5px;
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 19px auto 0;
    font-family: var(--sans);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--c-accent-ink);
    background: var(--c-accent);
    border-radius: 999px;
    padding: 8px 12px 8px 40px;
  }

  .hero-avatars img {
    width: 55px;
    height: 55px;
  }

  .cta .cta-headline,
  .faq .display {
    max-inline-size: min(11.8ch, var(--mobile-content));
  }

  .decision-headline {
    font-size: 38px;
    line-height: 1.08;
  }

  .statement-text,
  .founder-quote {
    max-inline-size: min(18ch, var(--mobile-content)) !important;
  }

  .sys-title {
    max-inline-size: min(13.2ch, 100%);
    font-size: 37px;
    line-height: 1.1;
  }

  .hero-positioning,
  .markt-sub,
  .decision-sub,
  .system-sub,
  .cta-sub,
  .founder-bio,
  .founder-bio p {
    max-width: min(100%, var(--mobile-content));
  }

  .capabilities {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .capabilities .container,
  .system > .container {
    width: 100%;
    max-width: var(--mobile-content);
    padding-left: 0;
    padding-right: 0;
  }

  .capabilities > .container > .display {
    padding-left: 0;
    padding-right: 0;
  }

  .cap-card,
  .sys-module,
  .faq-list,
  .cta-survey,
  .cf-stage-wrap,
  .founder-body {
    width: 100%;
    max-width: var(--mobile-content);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 860px) {
  .system .sys-module,
  .system .sys-visual {
    width: 100%;
    max-width: 610px;
    border-radius: 100px;
  }

  .system .sys-module {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 6px 90px;
    margin-left: auto;
    margin-right: auto;   /* Card am Umbruch-Punkt (2-Spalten → gestapelt) zentrieren statt linksbündig */
  }

  .system .m1-grid {
    width: 91%;
    max-width: 360px;
  }

  .system .sys-badge {
    top: 0px;
    gap: 0;
    font-size: 21px;
  }

  .system .sys-barrow {
    position: relative;
    width: 340px;
    max-width: 100%;
    height: 22px;
  }

  .system .sys-fill {
    height: 22px;
  }

  .system .sys-chart-label--down {
    color: #777;
    font-size: 15px;
  }

  .system .sys-chart-label--up {
    color: #d9d5eb;
    font-size: 19px;
  }
}

@media (max-width: 991px) {
  .founder--coverflow .cf-stage-wrap {
    align-self: center;
    width: 100vw;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .ks-quotes {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ks-quotes .container,
  .ks-quotes__slider,
  .ks-quotes__viewport,
  .ks-quote {
    width: 100%;
    max-width: 600px;
  }

  .ks-quotes .container {
    padding-left: 0;
    padding-right: 0;
  }

  .ks-quote__text {
    width: 100%;
    max-width: 600px;
    max-inline-size: 600px !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: normal;
  }
}

@media (max-width: 360px) {
  :root {
    --mobile-gutter: 20px;
    --mobile-display-size: 40px;
    --mobile-hero-size: 35px;
    --mobile-headline-max: min(12ch, var(--mobile-content));
  }

  .sys-title {
    font-size: 31px;
  }
}


/* TT Norms: Ligaturen ("Buchstaben-Bruecken") global abschalten */
html, body, button, input, textarea, select,
.cta-quiz-form, [class*="hero"], h1, h2, h3, p,
.iti, .iti *, .iti__dropdown-content, .iti__country, .iti__country-name {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0, "hlig" 0;
}

/* ===== Mobile (≤600px): Eyebrows kompakter + Testimonials-Headline passt in den Viewport ===== */
@media (max-width: 600px) {
  /* Alle Eyebrow-Pills global auf 16px → passen auf Mobile (sys-badge ausgenommen: eigene Größe) */
  .markt-kicker, .decision-kicker, .system-eyebrow, .testimonials-badge,
  .ks-quotes__eyebrow, .founder-eyebrow, .cta-eyebrow, .mc-eyebrow {
    font-size: 16px;
    padding: 7px 15px;
    margin-bottom: 10px;
    border: none;
  }
  /* Founder-Eyebrow hat eine höher-spezifische clamp-Margin (.founder--coverflow ...) — hier überschreiben */
  .founder--coverflow .founder-eyebrow { margin-bottom: 10px; }
  /* „Kunden schreiben Erfolgsgeschichten" — kleiner, damit das lange Wort nicht zerbricht */
  .testimonials-title { font-size: clamp(28px, 9.4vw, 46px); line-height: 1.08; }
}