/* =====================================================
   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: swap;
  src: url('assets/fonts/TT-Norms-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/TT-Norms-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/TT-Norms-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/TT-Norms-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  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: swap;
  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') format('woff2');
  /* Subset-Datei: enthält nur Glyphen für „Jan Froboese" */
}

/* Geist — Variable Font (100–900), selbst-gehostet. Haupt-Font der Seite. */
@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-ink:        #f4efe6;
  --c-ink-soft:   rgba(244,239,230,0.62);
  --c-ink-faint:  rgba(244,239,230,0.30);
  --c-line:       rgba(244,239,230,0.14);
  --c-accent:        #4700ff;   /* Button-Akzent: klares Electric Violet */
  --c-accent-hover:  #3900cc;
  --c-accent-2:      #b4b8d0;   /* Secondary accent: softer powder blue for supporting UI states */
  --c-accent-3:      rgba(71, 0, 255, 0.12); /* Soft tint zur Button-Akzentfarbe */
  --c-green:      #d4d8ff;          /* legacy var — repurposed to light blue for homogenous palette */
  --dash-blue:       #13095f;
  --dash-blue-mid:   #251983;
  --dash-blue-deep:  #07003f;
  --dash-blue-text:  #13095f;
  --dash-blue-tint:  rgba(19, 9, 95, 0.96);

  /* 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;
  --nav-center-y: calc(var(--nav-top) + (var(--nav-h) / 2));

  /* 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: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans:  "Geist", -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);

  /* ================================================================
     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: Brand-Indigo-Akzent — positive Trends, Schlüsselwerte (wie Hero-Dashboard).
     Token-gebunden an --c-accent; die zwei Gradient-Stufen = Indigo hell/dunkel (wie Hero). */
  --ch-positive:        var(--c-accent);     /* Indigo #4f46e5 — Hauptlinie/solid */
  --ch-positive-light:  #8079ec;             /* helleres Indigo — Gradient-Top */
  --ch-positive-deep:   #4338c9;             /* dunkleres Indigo — Gradient-Bottom */
  --ch-positive-bg:     var(--c-accent-3);   /* rgba(79,70,229,.12) — Area-Fade */
  /* NEGATIVE: blass helles Grau — unverändert */
  --ch-negative:        #c4c4c8;
  --ch-negative-mute:   #d8d8dc;
  /* Neutral-Vergleichswert (manuell / alt / Vorjahr): EIN Ton für Segment + Dot + Zahl → klare Zuordnung.
     Bewusst hellgrau/dezent, damit der Indigo-Hauptwert dominiert. */
  --data-neutral:       #9398ab;
  --ch-donut-track:     #e6e6ec;            /* heller Hintergrundring für Donuts */
  --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);
  background: var(--c-accent-3);   /* Indigo-Tint-BG — Schlüsselwerte überall wie im Hero hervorheben */
}

/* 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;
  align-self: flex-start;        /* nicht auf volle Spaltenbreite strecken — Pille hugged die Zahl */
  width: fit-content;
  max-width: 100%;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.05);
  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:           #1a1840;          /* Chart-Card = Navy-Glas (bunch-Look) */
  --ch-bg-soft:      #15132f;
  --ch-bg-elev:      #221f4a;
  --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;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  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: optimizeLegibility;
}

/* ============================================================
   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 {
  /* bunch-Look: tiefes Navy/Indigo durchgehend + Indigo-Glow oben rechts (Hero).
     Kein Hell-Dunkel-Wechsel mehr — durchgängig dunkel wie das Vorbild. */
  /* Flacher dunkler Navy-Grund (KEIN durchziehender Vertikal-Verlauf) +
     verteilte radiale Indigo-Glows wie im Screenshot — Hero kräftig oben,
     subtil verteilt nach unten. Cards/Dashboard bleiben hell. */
  background-color: #000105;
  background-image:
    /* Hero — Sonnenaufgang: kräftiger Kern direkt auf der Dashboard-Oberkante (~5.4%),
       blüht in den 100px-Gap + über die Schultern + die Seiten hinab. Dahinter breiter Halo. */
    radial-gradient(1000px 440px at 50% 5.2%, rgba(49, 101, 213, 0.98) 0%, rgba(45, 97, 209, 0.82) 12%, rgba(34, 74, 195, 0.60) 32%, rgba(17, 41, 165, 0.34) 52%, rgba(3, 15, 117, 0) 72%),
    radial-gradient(132vw 82vh at 50% 7.5%,   rgba(39, 84, 199, 0.60) 0%, rgba(17, 41, 165, 0.36) 38%, rgba(3, 15, 117, 0) 66%),
    radial-gradient(172vw 112vh at 50% 10%,   rgba(11, 32, 151, 0.42) 0%, rgba(5, 16, 121, 0.24) 42%, rgba(3, 15, 117, 0) 70%),
    /* Testimonials — zentrierter Radial, +50% Intensität + größer (~29%) */
    radial-gradient(94vw 56vh at 50% 29%,    rgba(30, 66, 186, 0.56) 0%, rgba(11, 32, 151, 0.38) 34%, rgba(3, 15, 117, 0) 64%),
    /* USP "Der Markt ändert sich" — kleiner Glow hinter der Karte (~41%) */
    radial-gradient(48vw 30vh at 50% 41.5%,  rgba(34, 74, 195, 0.44) 0%, rgba(17, 41, 165, 0.26) 36%, rgba(3, 15, 117, 0) 60%),
    /* (Features-Glow entfernt — wird jetzt statisch via .features.capabilities background-attachment:fixed gesetzt) */
    /* System "All in One" — großer, SEHR softer Radial hinter weißer Karte (~78%) */
    radial-gradient(92vw 58vh at 50% 78%,    rgba(17, 41, 165, 0.34) 0%, rgba(11, 32, 151, 0.22) 38%, rgba(3, 15, 117, 0) 66%),
    /* FAQ — dezenter softer Radial wie System (~88%) */
    radial-gradient(88vw 52vh at 50% 88%,    rgba(17, 41, 165, 0.34) 0%, rgba(11, 32, 151, 0.22) 38%, rgba(3, 15, 117, 0) 66%),
    /* Seitenende — Sonnenaufgang: schmalerer heller Kern (px), langsamer Ausklang */
    radial-gradient(1560px 840px at 50% 99.5%, rgba(49, 101, 213, 0.72) 0%, rgba(45, 97, 209, 0.46) 24%, rgba(17, 41, 165, 0.28) 52%, rgba(3, 15, 117, 0) 82%),
    radial-gradient(324vw 168vh at 50% 103%,  rgba(17, 41, 165, 0.34) 0%, rgba(11, 32, 151, 0.22) 40%, rgba(3, 15, 117, 0) 70%);
  background-attachment: scroll;
  background-repeat: no-repeat;
  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;
}
@media (prefers-reduced-motion: reduce) {
  .tw-char { opacity: 1; 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);
  /* Corporate-Typo (2026-07-17): kleiner + negatives Tracking → seriöser, gesetzter
     Auftritt. Regular-Gewicht (Jans Vorgabe: „nicht mehr Gewicht"), Absetzung über
     Größe + Uppercase-Kicker. */
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 62px);  /* einheitliche Section-Headline-Größe */
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  font-style: normal;
  max-width: 12ch;                       /* einheitliche Section-Headline-Breite */
}
.display em {
  font-style: normal;
  font-weight: inherit;
  font-feature-settings: normal;
}

.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: normal;
  color: #f4efe685;
  padding: 7px 26px;
  border: .5px solid rgb(255 255 255 / 21%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  margin: 0 auto 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: 140px var(--pad);
  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;
  /* -9px: hebt die Wortmarke so, dass der Schriftzug-Text (ohne Stern) vertikal
     exakt auf der Linie von Menüpunkten + Login sitzt. */
  top: calc(var(--nav-center-y) - (var(--nav-h) / 2) - 9px);
  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: 500;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.ll-logo-mark strong { font-weight: 300; }
.ll-logo-img {
  display: block;
  width: clamp(228px, 17.76vw, 290px);
  height: auto;
  max-height: var(--nav-h);
  object-fit: contain;
}

.ll-login-abs {
  position: absolute;
  top: calc(var(--nav-center-y) - (var(--nav-h) / 2));
  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;
  padding: 0 18px;           /* nur horizontal — vertikale Zentrierung macht align-items */
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(217, 213, 235, 0.45);
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.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: calc(var(--nav-center-y) - (var(--nav-h) / 2));
  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: 999px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ll-nav-pill ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  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-flex;
  align-items: center;
  padding: 0;
  height: var(--nav-h);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-ink-faint);
  line-height: 1;
  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;
}
.ll-nav-link:not(.ll-nav-link--cta).is-over-light {
  color: #060611;
}
.ll-nav-link:not(.ll-nav-link--cta).is-over-light:hover,
.ll-nav-link:not(.ll-nav-link--cta).is-over-light.is-current,
.ll-nav-link:not(.ll-nav-link--cta).is-over-light[aria-current="true"] {
  color: #060611;
}
/* CTA: kompakter Button wie Referenz-"Join" (radius 6px), Brand-Farbe statt Lila */
.ll-nav-link--cta {
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff !important;
  font-weight: 400;
  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-hover) !important;
  color: #fff !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(8, 10, 26, 0.5);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}
.starter-modal-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 32px;
  padding: 48px 52px 32px;
  text-align: center;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.38);
  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 rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #1a0d07;
  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: #f5f5f5;
  transform: scale(1.05);
}
.starter-modal-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 13, 7, 0.55);
  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: #1a0d07;
  margin: 0 0 14px;
}
.starter-modal-lead {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: #555;
  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: #1a0d07;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.starter-modal-list i {
  color: #2c2a52;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.starter-modal-cta {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #1a0d07;
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 16px 24px;
  border-radius: 14px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.starter-modal-cta:hover {
  background: #2c2a52;
  transform: translateY(-1px);
}
.starter-modal-foot {
  font-family: var(--sans);
  font-size: 12px;
  text-align: center;
  color: rgba(26, 13, 7, 0.5);
  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: 17px;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
  }
  .ll-logo-img {
    width: clamp(182px, 60vw, 228px);
    max-height: 52px;
  }
  .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: 18px;
  right: 18px;
  z-index: 110;
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
  /* Hintergrund 1:1 wie Desktop-Menu (.ll-nav-pill) */
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.m-burger:hover,
.m-burger:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  outline: none;
}
.m-burger.is-over-light {
  color: #060611;
}
body.m-drawer-open .m-burger {
  color: #ffffff;
}
.m-burger:active { transform: scale(0.94); }

.m-burger-bars {
  position: relative;
  width: 19px;
  height: 13px;
  display: block;
}
.m-burger-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  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),
              background-color 0.2s ease;
}
.m-burger-bars span:nth-child(1) { top: 0; }
.m-burger-bars span:nth-child(2) { top: 5.5px; }
.m-burger-bars span:nth-child(3) { top: 11px; }

/* X state */
body.m-drawer-open .m-burger-bars span:nth-child(1) {
  top: 5.5px;
  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: 5.5px;
  transform: rotate(-45deg);
}

/* ============ Drawer ============ */
.m-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--drawer-w);
  z-index: 105;
  background: #15122a;
  /* Schatten NUR wenn offen (siehe body.m-drawer-open) — sonst blutet der
     Schatten des off-screen Drawers in den rechten Viewport-Rand (fixe Schatten-Kante). */
  box-shadow: none;
  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); box-shadow: -24px 0 70px rgba(0, 0, 0, 0.10); }

.m-drawer-nav {
  padding: 96px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
  box-sizing: border-box;
}
.m-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-drawer-nav ul a {
  display: block;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 28px;
  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-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 8px 0;
}

.m-drawer-login {
  display: inline-block;
  align-self: flex-start;
  padding: 10px 22px 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(217, 213, 235, 0.45);
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.m-drawer-login:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
}

/* ============ 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)));
  }
}

/* (Awwwards-style floating side badge „Site of the Day" entfernt) */

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

/* HERO — sits on body gradient (warm earth → deep navy area) */
.hero {
  /* Alle Section-Glows liegen auf dem body-Layer (durchgehender Canvas) →
     werden NIE von Section-Enden vertikal gecroppt. */
  background: transparent;
  /* Unten kompakter als Standard-Sections: Dashboard → Statement-Text bleibt bei ca. 200px. */
  padding-bottom: clamp(52px, 5vw, 74px);
}
.hero .container { width: 100%; }
.hero-copy { max-width: 920px; }

/* Hero-Proof — Avatar-Stack + Social-Proof (aus LeaderLogic übernommen).
   strong = font-weight 400 (Jans Regel: 400 überall), Betonung über Helligkeit. */
.hero-proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin: clamp(14px, 2.2vh, 26px) auto clamp(22px, 3vh, 34px); flex-wrap: wrap; }
.hero-copy > .hero-proof { margin-bottom: clamp(12px, 1.8vh, 22px); }
.hero-avatars { display: inline-flex; }
.hero-avatars img { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; border: none; margin-left: -14px; }
.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: 30ch; min-width: 0; }
.hero-proof-text strong { color: var(--c-ink); font-weight: 400; }
/* Immer 2 Zeilen: „Zahlreiche begeisterte Kunden" / „profitieren bereits" —
   je Span eine Zeile (nowrap), kein internes Umbrechen. */
.hero-proof-text span { display: block; white-space: nowrap; }
@media (max-width: 600px) {
  .hero-proof { gap: 10px; flex-wrap: nowrap; }
  .hero-copy > .hero-proof { margin-bottom: 5px; }
  .hero-proof-text { flex: 0 1 auto; font-size: 12px; text-align: left; }
}
@media (max-width: 340px) {
  .hero-proof { flex-wrap: wrap; }
  .hero-proof-text { flex: 0 0 100%; text-align: center; max-width: 28ch; }
}
.hero .display {
  max-width: 62ch;
  /* Minimal unter der Section-Basisgröße (62px): „Übersichtlicher. Planbarer.
     Profitabler." muss auf Desktop einzeilig bleiben (bricht ab 62px). */
  font-size: clamp(40px, 6.2vw, 60px);
}
/* H1-Zeilenregie (Hero + Starter-Modal): Desktop = 3 feste Zeilen (je ein Gedanke),
   Mobile = natürlicher Umbruch. Die Pointe „In einer App." bleibt auch mobil eine
   eigene Zeile (bricht sonst mitten im Satz). */
.hero .display .h1-line,
.starter-modal-title .h1-line { display: block; }
@media (max-width: 600px) {
  .hero .display .h1-line,
  .starter-modal-title .h1-line { display: inline; }
  .hero .display .h1-line:last-child,
  .starter-modal-title .h1-line:last-child { display: block; }
  /* Desktop-Umbruch vor „Profitabler." — auf Mobile fließt der Text natürlich */
  .h1-br-desktop { display: none; }
}
.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-sub strong { color: var(--c-ink); font-weight: 400; }   /* „Die All-in-One App" hell/weiß */
/* =====================================================
   HERO DASHBOARD MOCKUP — premium app shell, proportional scale
   ===================================================== */
.hero-dashboard {
  /* Natural Rendering-Größe des Dashboard-Mockups (Browser-Frame + Inhalt) */
  --dash-natural-w: 1180px;
  --dash-natural-h: 860px;           /* kompaktes App-Board ohne Browser-Bar */
  --dash-shrink: 0.9;                /* Gesamt-Dashboard −10% */
  --dash-target-w: calc(min(var(--dash-natural-w), calc(100vw - (var(--pad) * 2))) * var(--dash-shrink));
  --dash-scale: 1;
  --dash-scale: min(1, calc(var(--dash-target-w) / var(--dash-natural-w)));
  --dash-tilt-x: 0deg;         /* animierter rotateX 20°→0° (scroll-gekoppelt, Aceternity 1:1) */
  --dash-tilt-y: 0deg;
  --dash-parallax-y: 0px;
  --tilt-scale: 1;             /* animierter Zusatz-Scale 1.05→1 (Desktop) */

  /* Die Layout-Box ist der echte sichtbare Footprint. Das Dashboard bleibt im
     Dokumentfluss direkt nach der Form; nur der Inhalt skaliert proportional. */
  width: var(--dash-target-w);
  max-width: 100%;
  aspect-ratio: 1180 / 860;

  margin: clamp(24px, 3vw, 42px) auto 0;
  perspective: 1000px;              /* Aceternity 1:1 — kräftige, elegante Perspektive */
  perspective-origin: 50% 50%;      /* horizontal zentriert → symmetrische Kippung, kein Schieflauf */
  transform-style: preserve-3d;

  /* Anchor für absolute .browser — die äußere Box reserviert den skalierten
     Footprint, das innere App-Board bleibt als 1180×860-Canvas zentriert. */
  position: relative;
  overflow: visible;
}
.hero-dashboard .browser {
  /* Fester 1180×860-Canvas, proportional auf die Layout-Box skaliert. */
  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 860px Layout-Höhe — matched aspect-ratio Berechnung */
  transform-origin: 50% 0;          /* Oberkante bleibt direkt unter der CTA-Form verankert. */
  will-change: transform;
  backface-visibility: hidden;      /* 3D-Render-Hint → etwas sauberere Rasterung, ändert die Animation nicht */
  transform:
    translateX(-50%)
    rotateX(var(--dash-tilt-x))
    scale(calc(var(--dash-scale) * var(--tilt-scale, 1)));
  /* Blaue Außenlinie (Indigo-Ring + Cyan-Halo) wieder davor, dazu der tiefe Glow */
  box-shadow:
    0 0 0 2px rgba(63, 56, 230, 0.92),
    0 0 0 7px rgba(117, 205, 255, 0.78),
    0px 90px 350px -100px black;
  /* Scroll-gekoppelt = KEINE transition (direkt am Scroll, wie Aceternity useTransform) */
}
.hero-dashboard.is-tilting .browser {
  transition-duration: 90ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-dashboard .browser-body { min-height: 0; }

/* Mobile: 95% Viewport-Breite statt 90% */
@media (max-width: 768px) {
  .hero-dashboard {
    --dash-target-w: calc(min(var(--dash-natural-w), calc(100vw - 20px)) * var(--dash-shrink));
    margin-top: clamp(22px, 7vw, 34px);
  }
}

/* Mobile (≤600): IDENTISCH zum Desktop-Dashboard. Kein Zoom/Crop mehr — die
   frühere „links verankern + rechts hart abschneiden"-Variante wirkte fehlerhaft/
   verzerrt. Das Dashboard skaliert jetzt (wie auf Desktop) proportional über
   --dash-target-w / --dash-scale auf die Viewport-Breite (siehe ≤768-Regel oben),
   zentriert, vollständig sichtbar, mit demselben Kipp-Effekt. */
.browser {
  position: relative;
  background:
    radial-gradient(120% 120% at 17% 3%, rgba(255, 255, 255, 0.96) 0%, rgba(237, 238, 240, 0.88) 34%, rgba(196, 197, 199, 0.72) 100%),
    linear-gradient(112deg, #f7f7f7 0%, #d1d2d4 48%, #fafafa 100%);
  border-radius: 44px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(63, 56, 230, 0.92),
    0 0 0 7px rgba(117, 205, 255, 0.78),
    inset 0 0 0 14px rgba(255, 255, 255, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -34px 80px rgba(0, 0, 0, 0.08),
    0 58px 140px rgba(7, 9, 28, 0.30),
    0 18px 42px rgba(58, 91, 230, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.72);
  transform-origin: 50% 100%;
}
.browser::after {
  /* Rahmen liegt ÜBER dem Inhalt → die untere Karte wird sauber UNTER dem Rand
     abgeschnitten (statt ihn zu überlagern). Wirkt wie ein Fenster, durch das
     das Board nach unten weiterläuft. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  box-shadow:
    inset 0 0 0 14px rgba(255, 255, 255, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.browser-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(226, 230, 248, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
  border-bottom: 1px solid var(--ch-divider);
}
.dot-traffic {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
}
.dot-traffic.red    { background: #c4c4c8; }
.dot-traffic.yellow { background: #b4b4b8; }
.dot-traffic.green  { background: #a4a4a8; }
.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;
  gap: 32px;
  flex: 1;
  height: 100%;
  background: transparent;
  color: var(--ch-text);
  min-height: 0;
  padding: 54px 58px 24px 48px;
}

/* Sidebar — Labels sichtbar, kompakte Typo */
.dash-side {
  background: transparent;
  border-right: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dash-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 22px 4px;
}
.dash-logo-mark {
  width: 102px;
  height: 102px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(58, 68, 126, 0.9) 0%, rgba(10, 12, 39, 0.98) 50%, #000105 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -10px 20px rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(88, 116, 255, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.20),
    0 4px 14px rgba(44, 96, 206, 0.28);
}
.dash-logo-star {
  display: block;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 3px 7px rgba(48, 47, 224, 0.34));
}
.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: rgba(16, 16, 22, 0.70);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.36) 0%, rgba(211, 212, 214, 0.22) 54%, rgba(255, 255, 255, 0.30) 100%);
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 22px rgba(0, 0, 0, 0.025);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 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:
    linear-gradient(112deg, rgba(255, 255, 255, 0.78) 0%, rgba(227, 228, 230, 0.62) 52%, rgba(255, 255, 255, 0.74) 100%);
  color: #101016;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -12px 24px rgba(0, 0, 0, 0.035),
    0 10px 26px rgba(0, 0, 0, 0.06);
}
.dash-nav-item.active i,
.dash-nav-item.active svg.icon { color: var(--ch-text); opacity: 1; }
.dash-nav-item:hover {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.72) 0%, rgba(224, 225, 227, 0.54) 52%, rgba(255, 255, 255, 0.68) 100%);
  color: #101016;
}
.dash-nav-divider {
  height: 1px;
  margin: 7px 8px;
  background: rgba(16, 16, 22, 0.10);
  flex-shrink: 0;
}
.dash-nav-badge {
  margin-left: auto;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(240, 192, 64, 0.22);
  color: #9a7b1f;
  line-height: 1;
}

/* Main area */
.dash-main {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.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: 400;
  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:
    linear-gradient(112deg, rgba(255, 255, 255, 0.72) 0%, rgba(223, 224, 226, 0.48) 100%);
  border-radius: 999px;
  padding: 4px;
  font-family: var(--mono);
  font-size: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.06);
}
.dash-range span {
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ch-text-mute);
}
.dash-range span.active {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ch-text);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
}
.dash-tile {
  background:
    radial-gradient(95% 120% at 12% 0%, rgba(255, 255, 255, 0.76) 0%, rgba(237, 238, 240, 0.58) 42%, rgba(204, 205, 207, 0.42) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.72) 0%, rgba(205, 206, 208, 0.58) 51%, rgba(255, 255, 255, 0.76) 100%);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 32px;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -28px 55px rgba(0, 0, 0, 0.055),
    0 22px 44px rgba(0, 0, 0, 0.08);
}
.dash-tile--twin,
.dash-tile--full {
  grid-column: 1 / -1;       /* volle Breite über beide Spalten */
}
.dash-tile--twin { 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: 19px;
  font-weight: 400;
  color: #111114;
  background: rgba(238, 238, 238, 0.72);
  padding: 5px 14px 5px 7px;
  border-radius: 18px;
  letter-spacing: 0.2px;
  text-transform: none;            /* kein Uppercase */
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 9px;
  line-height: 1.15;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 10px 22px rgba(0, 0, 0, 0.045);
}
.dash-title-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 20px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.dash-title-check svg.icon {
  width: 16px;
  height: 16px;
  color: #000;
  fill: currentColor;
}
/* Einheitliche %-Pillen im Dashboard: gleicher Radius (14px) + blasse Accent-Farbe.
   18% (manuell) bleibt neutral grau → mappt auf den grauen Donut-Bogen. */
.hero-dashboard .dash-tile-stat-num,
.hero-dashboard .dash-kpi-num,
.hero-dashboard .dash-auto-num--ki {
  background: var(--c-accent-3);
  color: var(--c-accent);
  border-radius: 14px;
}
.hero-dashboard .dash-tile-stat-num span,
.hero-dashboard .dash-kpi-num span,
.hero-dashboard .dash-auto-num--ki span { color: var(--c-accent); opacity: 0.6; }
.hero-dashboard .dash-auto-num--manuell { border-radius: 14px; }
.dash-tile-trend {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  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: 400;
  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: 400;
  margin-left: 2px;
}
.dash-tile-stat-tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  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: 400;
  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: 400;
  margin-right: 2px;
  opacity: 0.85;
}
.dash-twin-stat-num .hero-unit {
  font-size: 0.5em;
  font-weight: 400;
  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: 400;
  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;
  overflow: visible;             /* Endpunkt-Dots + Randbalken nicht clippen */
}
.dash-twin-bars {
  width: 100%;
  height: 100px;
  display: block;
  flex: 1;
  overflow: visible;
}

/* 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: 400;
  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: 176px; height: 176px; flex-shrink: 0; }   /* groß — "starkes Teil" */
/* Tile 2: Automatisierte Aufgaben — Lead (wichtigste Info) + Callout-Pillen mit Spitze */
.dash-auto-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ch-text-mid);
  margin-left: 13px;
}
.dash-auto-lead strong { color: var(--dash-blue-text); font-weight: 400; }
.dash-auto-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  margin-top: 6px;
}
.dash-auto-stats { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash-callout { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.dash-callout-num {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  border-radius: 14px;
}
.dash-callout-num span { font-size: 0.58em; font-weight: 400; opacity: 0.6; margin-left: 1px; }
.dash-auto-stats .dash-callout-num {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  letter-spacing: 0;
}
.dash-auto-stats .dash-callout-num > span {
  opacity: 1;
  margin-left: 0;
}
.dash-auto-stats .dash-callout-num .dash-callout-value {
  display: inline-flex;
  align-items: baseline;
  font-size: inherit;
  line-height: 0.94;
}
.dash-auto-stats .dash-callout-num .dash-callout-value > span {
  font-size: 0.58em;
  opacity: 0.72;
  margin-left: 1px;
}
.dash-auto-stats .dash-callout-num .dash-callout-word {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  opacity: 0.82;
}
/* Donut-Zuordnung: Prozent-Pill zeigt mit Spitze direkt auf das passende Segment. */
.dash-auto-stats .dash-callout-num::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 9px solid currentColor;
}
.dash-callout--ki .dash-callout-num {
  min-width: 126px;
  font-size: 46px;
  color: #fff;
  background: linear-gradient(135deg, var(--dash-blue-deep) 0%, var(--dash-blue) 58%, var(--dash-blue-mid) 100%);
  padding: 9px 17px 10px;
  text-shadow: 0 1px 10px rgba(5, 0, 42, 0.30);
}
.dash-callout--ki .dash-callout-num::after {
  top: 64%;
  border-right-color: var(--dash-blue-deep);
}
.dash-callout--manuell .dash-callout-num {
  min-width: 106px;
  font-size: 33px;
  color: #101016;
  background: #ffffff;
  padding: 8px 14px 9px;
  box-shadow: 0 6px 16px rgba(10, 12, 18, 0.12);
}
.dash-callout--manuell .dash-callout-num::after { border-right-color: #ffffff; }
.dash-callout-label {
  font-family: var(--sans);
  font-size: 14px;                 /* größer — deutlich */
  color: var(--ch-text-mute);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Legend-Dot = exakt die Donut-Segmentfarbe → eindeutige Zuordnung Zahl ↔ Bogen */
.dash-callout-label::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--data-neutral);
}
.dash-callout--ki .dash-callout-label::before { background: var(--c-accent); }
/* Tile 1: Balken-Chart-Wrap + +96%-Callout am letzten (Accent-)Balken */
.dash-bars-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 118px;
  padding-top: 40px;      /* Balken rutschen runter (SVG=flex-end) → Bubble (top:2px) steht frei darüber */
}
.dash-bars-wrap .dash-mini-bars {
  height: 166px;
  flex: 0 0 auto;
}
.dash-bar-callout {
  position: absolute;
  top: 2px;
  left: 75.8%;                                  /* mittig über dem letzten Balken (Dez, ~76%) */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.dash-bar-callout .dash-callout-num {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 52px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--dash-blue-deep) 0%, var(--dash-blue) 58%, var(--dash-blue-mid) 100%);
  border-radius: 14px;
  padding: 7px 18px;
  text-shadow: 0 1px 10px rgba(5, 0, 42, 0.30);
}
.dash-bar-callout .dash-callout-num span { font-size: 0.58em; opacity: 0.6; margin-left: 1px; }
.dash-bar-callout .dash-callout-num::before { display: none; }
.dash-bar-callout .dash-callout-num::after {   /* Spitze nach unten, mittig unter der Bubble */
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-width: 9px;
  border-top-color: var(--dash-blue);
}
/* Monats-Legende (Jul–Dez) — 6 gleiche Spalten, je Label mittig unter einem Bar */
.dash-bars-legend {
  display: flex;
  width: 62%;                 /* zentriert-kompakt, gleiche Spalten wie die Bars */
  margin: -15px auto 0;       /* zieht die Legende bis ~5px an die Balken-Unterkante (Tile-Gap 14px + 6px SVG-Leerraum) */
}
.dash-bars-legend span {
  flex: 1 1 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(10, 12, 30, 0.42);
}
/* Tile 3: Profit-Chart-Wrap + Callouts an den Kurvenenden */
.dash-profit-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dash-profit-callout {
  position: absolute;
  right: -12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.96;
  text-align: center;
  border-radius: 14px;
  z-index: 2;
}
.dash-profit-callout-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}
.dash-profit-callout-value span {
  font-size: 0.58em;
  opacity: 0.62;
  margin-left: 1px;
}
.dash-profit-callout-label {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  opacity: 0.84;
  white-space: nowrap;
  text-align: center;
}
.dash-profit-callout::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
}
.dash-profit-callout--profit {
  top: -50px;
  font-size: 38px;
  color: #fff;
  background: linear-gradient(135deg, var(--dash-blue-deep) 0%, var(--dash-blue) 58%, var(--dash-blue-mid) 100%);
  padding: 9px 18px 11px;
  min-width: 168px;
  text-shadow: 0 1px 10px rgba(5, 0, 42, 0.30);
}
.dash-profit-callout--profit .dash-profit-callout-label {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.9;
}
.dash-profit-callout--profit::after {
  right: 14px;
  bottom: -9px;
  background: var(--dash-blue);
  clip-path: polygon(100% 100%, 0 0, 100% 0);
}
.dash-profit-callout--kosten {
  bottom: 2px;
  right: 8px;
  font-size: 30px;
  color: var(--ch-text-mid);
  background: #ffffff;
  border: 1px solid var(--ch-border);
  box-shadow: 0 8px 20px rgba(10, 12, 18, 0.12);
  padding: 7px 14px 8px;
  min-width: 132px;
  border-radius: 12px;
  gap: 2px;
}
.dash-profit-callout--kosten .dash-profit-callout-label {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.74;
  letter-spacing: -0.005em;
}
.dash-profit-callout--kosten::after {   /* Spitze nach rechts → zeigt auf das Ende der Kosten-Linie */
  right: -7px;
  top: 7px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.dash-donut-meta {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ch-text-mid);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dash-donut-meta div {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.dash-donut-meta strong { color: var(--ch-text); font-weight: 400; font-size: 16px; }
.dash-donut-meta .dot { width: 10px; height: 10px; }
.dash-donut-foot {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ch-divider);
  font-size: 12px !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: 44px;                 /* = .dash-tile-stat-num (+96%) — große %-Zahlen einheitlich */
  font-weight: 400;
  color: var(--ch-text);
  letter-spacing: -0.025em;
  line-height: 1;
}
.dash-kpi-num span {
  font-size: 26px;
  color: var(--ch-text-mute);
  font-weight: 400;
  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;
}

/* Profit-vs-Kosten-Chart (Tile 3, volle Breite): 2 Linien (Profit ↑ / Kosten ↓) + Grid */
.dash-profit-chart {
  width: 100%;
  height: 168px;
  display: block;
  flex: 1;
  overflow: visible;
  margin-top: 6px;
}
.dash-profit-legend {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ch-text-mid);
}
.dash-profit-legend .legend-item { display: inline-flex; align-items: center; gap: 7px; }
.dash-profit-legend .dot { width: 10px; height: 10px; }
.dot--profit { background: var(--dash-blue); }
.dot--kosten { background: #aeb4c4; }
/* X-Achse — Monatslabels unter dem Chart */
.dash-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ch-text-mute);
  margin-top: 8px;
  padding: 0 2px;
}
/* 6-Monats-Achse: gleiche Spalten → Label mittig unter der jeweiligen Grid-Linie */
.dash-axis--six {
  justify-content: normal;
  padding: 0;
}
.dash-axis--six span {
  flex: 1 1 0;
  text-align: center;
}

/* Dashboard: NIE umorganisieren — nur proportional skalieren via transform: scale().
   Desktop-Struktur bleibt auf allen Breakpoints identisch (Sidebar links + Main rechts,
   2x2+1 grid, vertical sidebar, twin-layout 2-col). Die äußere .hero-dashboard-Box
   reserviert dabei exakt den proportional skalierten Footprint. */

/* =====================================================
   GHL FORM CONTAINER — white pill wrapper around iframe.
   Inner form styled via Custom CSS in GHL Form Builder.
   ===================================================== */
/* OUTER pill — sized so the dark button has exactly 4px white border on all sides.
   Math: iframe body 98px tall, button at iframe-y=17, button height 64.
   With wrapper padding:4px and iframe margin-top:-17, button-top sits at
   wrapper-outer-y = 4 + (-17) + 17 = 4 ✓, button-bottom at 4 + (-17) + 81 = 68.
   Wrapper outer height = 68 + 4 = 72px. */
.ghl-form {
  width: 100%;
  max-width: 860px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 4px;                       /* 4px weißer Rand zum Button */
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: relative;
  z-index: 3;
  height: 72px;                       /* 64 (button) + 2×4 (border) = 72 */
}
.ghl-form iframe {
  width: 100%;
  /* Shift iframe up by 17px so the button-top (at iframe-y=17) lands exactly
     at wrapper-outer-y=4. Bottom shift is symmetric so total height stays consistent. */
  margin-top: -17px;
  margin-bottom: -17px;
  height: calc(100% + 34px);
  border: none;
  display: block;
  background: transparent;
}
/* 641-850px: GHL Form stackt NICHT intern (form_embed.js erzwingt iframe-height:103px
   bei jeder Breite — bestätigt durch Test mit 272px). Wir reduzieren also nur die
   Wrapper-max-width und runden das Pill etwas weniger, damit die Form proportional
   bleibt. Single-Row-Pill bleibt erhalten, Höhe konstant 72px. */
@media (max-width: 850px) {
  .ghl-form {
    max-width: 520px;
    height: 72px;
    border-radius: 36px;
  }
  .ghl-form iframe {
    margin-top: -17px;
    margin-bottom: -17px;
    height: calc(100% + 34px);
  }
}
/* ≤640px: schmaler Container, kleineres Pill-Radius */
@media (max-width: 640px) {
  .ghl-form {
    max-width: 100%;
    border-radius: 28px;
    padding: 4px;
    height: 72px;
  }
  .ghl-form iframe {
    margin-top: -17px;
    margin-bottom: -17px;
    height: calc(100% + 34px);
  }
}
/* ≤480px: Form vertikal gestackt — verhindert, dass der Button-Text
   ("Infos erhalten") zweizeilig wird. GHL muss intern via Custom CSS auch
   stacken (siehe GHL Form-Editor → Custom CSS). Container wächst auf
   ca. 3-Zeilen-Höhe, Pill wird zur runden Card statt zur Pill-Form. */
@media (max-width: 480px) {
  .ghl-form {
    height: auto;
    min-height: 260px;
    border-radius: 24px;
    padding: 8px;
  }
  .ghl-form iframe {
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
    min-height: 240px;
  }
}
/* Hero-Form: zusätzlich soften 200px-Schatten nach unten aufs Dashboard */
.ghl-form--hero {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.22),
    0 80px 200px 40px rgba(0, 0, 0, 0.55);
  margin-bottom: clamp(0px, 2vw, 10px);
}
.ghl-form--test-hidden {
  display: none;
}
.cta .ghl-form {
  margin-top: 32px;
  box-shadow: 0 14px 40px rgba(26, 13, 7, 0.16);
}

/* =====================================================
   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).
   Zusammen mit dem Hero-Bottom-Padding ergibt sich vom Dashboard bis zum Text
   ein Abstand um 200px, ohne harte Korrektur gegen das Mockup. */
.statement {
  background: transparent;
  padding-top: clamp(84px, 8vw, 112px);
  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: min(100%, 760px);
  margin: 0 auto 30px;
  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. */
/* Intro-Text unter der Approach-Headline — Größe/Spacing kommt aus der gemeinsamen
   SUB-TEXTS-Regel (.hero-sub/.int-sub/…, clamp 18–24px), hier nur Zentrierung + Farbe. */
.approach-lead {
  margin-left: auto;
  margin-right: auto;
  color: var(--c-ink-soft);
  text-align: center;
}
.approach-sub {
  /* Exakt dasselbe 2-Spalten-Raster wie .vs-grid (1fr 1fr, 20px gap, max 1100, auto),
     damit "Alte Methoden" über den linken Bars und "MarketLeaders.App" über den
     rechten Bars sitzt — und "vs." absolut auf 50% = exakt auf dem Bar-Split. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;          /* vertikale Mitte — Text "Alte Methoden", "vs." & Wortmarke auf einer Linie */
  max-width: 1100px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  color: var(--c-ink-soft);
  position: relative;
  margin: 0 auto 15px;
}
.approach-sub-old {
  grid-column: 1;                 /* über der linken (alten) Bar-Spalte */
  text-align: right;
  padding-right: 19px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-ink-faint);
  color: var(--c-ink-soft);
}
.approach-sub-new {
  grid-column: 2;                 /* über der rechten (neuen) Bar-Spalte */
  text-align: left;
  padding-left: 16px;
  font-size: calc(clamp(22px, 2vw, 32px) + 3px);   /* 3px größer als 'Alte Methoden' */
  color: #ffffff;
  font-weight: 400;
}
.approach-sub .vs {
  /* Sitzt absolut auf 50% = exakt die Spalten-Trennlinie, wo sich alte & neue Bars
     teilen. Aus dem Grid genommen → old + new füllen die 2 Spalten sauber.
     Mobile: .approach-sub ist display:none → vs als runde Bubble (.vs-grid::before). */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: calc(clamp(20px, 1.6vw, 24px) + 4px);
  font-weight: 700;
  letter-spacing: -3px;
  color: #ffffff;
  white-space: nowrap;
}

/* 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: rgba(244, 239, 230, 0.55);
}
.usp .display {
  color: var(--c-ink);
  max-width: 12ch;
  text-align: center;
  margin: 0 auto;
}
.usp .display em {
  color: var(--c-ink);
  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: rgba(244, 239, 230, 0.72);
}
/* 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;              /* zwei Hälften — Bars stehen sich gegenüber */
  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: #f4efe6;
  color: #1a0d07;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  display: none;   /* Bubble nur auf Mobile */
  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: 5px;
}
.vs-col--old { align-items: flex-end; }     /* alte Bars docken rechts an (gegenüberstehend) */
.vs-col--new { align-items: flex-start; }    /* neue Bars gehen von der Mitte nach rechts auf */
/* Wrapper um die Pills: auf Desktop transparent (display:contents → Pills bleiben
   direkte Flex-Kinder der Spalte), auf Mobile zentrierter content-breiter Block. */
.vs-list { display: contents; }

.vs-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 10px;
  box-sizing: border-box;
  /* Einheitliche Zeilenhöhe für beide Spalten — sonst sind die rechten Pills
     wegen des größeren Check-Kreis-Icons höher und die Zeilen stehen sich nicht
     mehr exakt gegenüber. */
  min-height: 56px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 19px);
  color: #ffffff;
  line-height: 1.16;
  white-space: nowrap;
  /* Bar-Länge aus inline `--len` (Graph-Look). min-width verhindert Text-Clipping. */
  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;
  /* 20% länger + weicheres Abbremsen (easeOutQuint) → Aufbau bleibt länger sichtbar, eleganter */
  transition:
    clip-path 2.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.7s ease-out;
}

/* Linke Spalte: linksbündig wie die rechte — X-Icon links, Text links daneben.
   Gradient jetzt von links (kräftig, unter Icon+Text) nach rechts auslaufend. */
.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: #9b2226;                                /* dunkles Rot für das X der alten Methoden */
  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, #ededee 0%, #c8c8cc 100%);
  color: #1a0d07;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 28px rgba(0, 0, 0, 0.18);
  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: 17px;                             /* SVG-Inhalt kleiner als Wrapper */
  padding: 7px;
  box-sizing: border-box;
  background: var(--c-accent);
  border-radius: 50%;
  color: #ffffff;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 52;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Aufbau erst wenn die .vs-grid SELBST im Viewport ist (nicht schon beim Section-Anfang).
   clip löst sich auf, Pill wird voll sichtbar. Beim Verlassen baut es sich wieder ab. */
.vs-grid.is-visible .vs-pill {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.vs-grid.is-visible .vs-col .vs-pill:nth-child(1) { transition-delay: 0.00s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(2) { transition-delay: 0.12s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(3) { transition-delay: 0.24s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(4) { transition-delay: 0.36s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(5) { transition-delay: 0.48s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(6) { transition-delay: 0.60s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(7) { transition-delay: 0.72s; }
.vs-grid.is-visible .vs-col .vs-pill:nth-child(8) { transition-delay: 0.84s; }

@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; }
  .approach .display {
    max-width: calc(100vw - 48px);
    font-size: clamp(34px, 9.8vw, 50px);
  }

  /* 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: 12px;
    padding: 30px 24px 68px;
    border-radius: 28px;
    position: relative;
    /* Grid-Item darf NIE breiter werden als sein Track (min-width:0 + max-width:100%);
       Horizontal-Rest fängt der Body (overflow-x:clip). WICHTIG: overflow bleibt
       visible — sonst wird overflow-y (bei overflow-x:clip) zu auto berechnet und
       klippt die vs-Badge oben ab („abgekratzt"). */
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  /* ALTE METHODEN = oben, dezenter BG (negativ) */
  .vs-col--old {
    order: -1;
    /* Jans Werte, „etwas heller" umgesetzt: 17 % → 22 % (vorher nur 2,5 %). */
    background: rgb(244 239 230 / 22%);
    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: 28px;
    font-weight: 400;
    line-height: 1;
    color: rgba(244, 239, 230, 0.45);
    text-align: center;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(244, 239, 230, 0.45);
    margin-bottom: 20px;
    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: #ffffff;
    border: 1px solid rgba(26, 13, 7, 0.08);
    margin-top: -48px;
    padding-top: 52px;                 /* Logo etwas weiter nach oben */
    z-index: 2;
    box-shadow:
      0 -96px 180px rgba(0, 0, 0, 0.9),
      0 18px 60px rgba(26, 13, 7, 0.18);
  }
  .vs-col--new::before {
    content: '';
    display: block;
    width: min(176px, 61%);            /* MarketLeaders-Logo −20% */
    height: 42px;
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
    background: url("assets/brand/current/logo-black.png") center / contain no-repeat;
  }
  .vs-col--new::after {
    content: 'vs.';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;                       /* vs-Badge inkl. Kreis +20% */
    height: 70px;
    border-radius: 50%;
    background: #ffffff;
    font-family: var(--mono);
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
    color: #1a0d07;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    z-index: 4;
  }

  /* 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: #f4efe6;
    color: #1a0d07;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    display: none;
    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;
    line-height: 1.35;
    padding: 6px 0;
    justify-content: flex-start;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none;
    min-width: 0;
    /* 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;
  }

  /* Pills-Block: so breit wie der längste Eintrag, in der Karte mittig.
     → Icons docken links an und stehen exakt untereinander, Text linksbündig,
     der Gesamtblock sitzt zentriert (kein „Kraut und Rüben"). */
  .vs-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }

  /* ALTE Pills: X-Icon LINKS, Text linksbündig */
  .vs-pill--old {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
    font-style: italic;
    color: rgba(244, 239, 230, 0.62);
  }
  .vs-pill--old .vs-icon { order: -1; }
  .vs-pill--old .vs-text { text-align: left; flex: 1; opacity: 1; }

  /* NEUE Pills: Check-Icon links, Text linksbündig */
  .vs-pill--new {
    justify-content: flex-start;
    gap: 12px;
    color: #1a0d07;
  }
  .vs-pill--new .vs-text {
    flex: 0 1 auto;
    text-align: left;
  }
  .vs-pill--new .vs-icon {
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--c-accent);
  }
}

/* ============================================================
   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: min(100%, 860px);
  margin: 0 auto clamp(50px, 6vw, 80px);
}
/* Top-Intro der Features-Section: Haupt-Headline zentriert über BEIDE Spalten.
   (Sticky-Panel rechts hat zusätzlich eine eigene kleinere Headline.) */
.cap-intro {
  text-align: center;
}
.capabilities .kicker {
  color: #f4efe640;
}

.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.84), rgba(244,245,252,0.76));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  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;
}
.capabilities .cap-cards .cap-kicker {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  background: #eeeeeedd;
  padding: 5px 15px;
  border-radius: 20px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  color: #6f7077;
  margin: 0 0 12px;
}
.cap-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #0d0d0f;
  margin: 0 0 16px;
}
.cap-body {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ch-text-mid);
  margin: 0;
}

/* ============================================================
   Features-Layout: links scrollende Cards, rechts sticky Panel
   mit kleiner Überschrift + Popup-Form-CTA.
   ============================================================ */
.cap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 4vw, 72px);
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.cap-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  align-items: end;                /* Cards rechtsbündig (Richtung Sticky-Panel) */
}
/* Gestapelte Cards: flacher + schmaler (max 600px), rechtsbündig — alle gleich breit */
.cap-cards .cap-card { min-height: 480px; max-width: 600px; }
.cap-cards .cap-card.cap-card--wide { max-width: 600px; }

/* Sticky-Panel rechts — bleibt beim Durchscrollen der Cards stehen */
.capabilities .cap-sticky {
  position: sticky;
  top: calc(var(--nav-top) + var(--nav-h) + 28px);
  align-self: start;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 40px 40px 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
.capabilities .cap-sticky-kicker {
  margin: 0 0 18px;
  color: var(--c-ink-soft);
}
.capabilities .cap-sticky-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.capabilities .cap-sticky-sub {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-ink-soft);
  margin: 0 0 25px;
}
/* „kostenlos & unverbindlich" weiß hervorgehoben */
.capabilities .cap-sub-hl { color: var(--c-ink); }
.capabilities .cap-sticky-form {
  width: 100%;
  max-width: none;
  margin: 0;
}
.capabilities .cap-sticky-form .pill {
  align-items: stretch;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
}
.capabilities .cap-sticky-form .pill input,
.capabilities .cap-sticky-form .pill-field,
.capabilities .cap-sticky-form .pill button {
  width: 100%;
  height: 52px;
}
.capabilities .cap-sticky-form .pill-field {
  flex: 0 0 52px;
}
.capabilities .cap-sticky-form .pill input {
  font-size: 17px;
}
.capabilities .cap-sticky-form .pill button {
  padding: 0 18px;
}
.capabilities .cap-sticky-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink-soft);
  opacity: 0.7;
  margin: 16px 0 0;
}
/* Trust-Line unter dem Sticky-Formular entfernen (schwarzes Überbleibsel) */
.capabilities .cap-sticky-form .pill-form-note {
  display: none;
}

/* Tablet/Mobile: einspaltig — erst Cards, danach die CTA-Box; Sticky wäre hier kein Gewinn. */
@media (max-width: 1050px) {
  .cap-layout { grid-template-columns: 1fr; gap: 32px; }
  .cap-cards {
    align-items: center;
  }
  .capabilities .cap-sticky {
    position: static;
    top: auto;
    order: 0;
    align-items: center;
    width: min(600px, 95vw);
    margin: 8px auto 0;
    text-align: center;
  }
  .capabilities .cap-sticky-title { font-size: clamp(39px, 6vw, 40px); }
}

@media (max-width: 640px) {
  .capabilities .cap-sticky {
    width: 95vw;
    padding: 48px 36px 48px;
    border-radius: clamp(42px, 10vw, 64px);   /* identisch zu .cap-card (Features-Karten) auf Mobile */
  }
}

/* ====== Chart shell — Conicorn-style: hellgrau, dezent, max 620px breit ====== */
.chart {
  background: var(--ch-bg);
  border-radius: 86px;
  border: 1px solid var(--ch-border);
  padding: 68px 66px;
  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-head--right {
  justify-content: flex-end;
}
.chart-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  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: 400;
}
.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: 400;
  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: 400;
  color: var(--ch-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.chart-stat-num span {
  font-size: 24px;
  font-weight: 400;
  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: 400;
}

/* ===== Lead-Flow: Multi-Touch-Akquise → Neukunde (animierte Vernetzungsgrafik) ===== */
.leadflow { width: 100%; height: auto; display: block; margin: 6px 0 2px; overflow: visible; }
.leadflow-base { stroke: rgba(26, 13, 7, 0.22); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
.leadflow-base--dash { stroke: rgba(26, 13, 7, 0.22); stroke-width: 1.15; stroke-dasharray: 3.6 4.4; opacity: 1; }
.leadflow-base--vertical { stroke: rgba(26, 13, 7, 0.27); stroke-dasharray: 3.2 3.8; }
.leadflow-base--lower { stroke: rgba(26, 13, 7, 0.25); stroke-width: 1.15; opacity: 1; }
.leadflow-packet {
  fill: var(--c-accent);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(66, 62, 230, 0.42));
}
.leadflow-packet--strong {
  fill: #423ee6;
}
.leadflow-packet--soft {
  fill: #7c7ea8;
}
.leadflow-box {
  fill: #ffffff;
  stroke: none;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.96))
    drop-shadow(0 14px 32px rgba(17, 19, 28, 0.10));
}
.leadflow-ico { color: var(--ch-text-mid); }
.leadflow-label { fill: var(--ch-text-mid); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.leadflow-ring { fill: none; stroke: var(--c-accent); stroke-width: 2; opacity: 0.32; }
.leadflow-core { fill: var(--c-accent-3); stroke: var(--c-accent); stroke-width: 1.5; }
.leadflow-hub use { color: var(--c-accent); }
.leadflow-hublabel { fill: var(--c-accent); font-family: var(--sans); font-size: 14px; font-weight: 600; text-anchor: middle; }
/* Pixeden Filled-Glyphs: kompakt, dunkel, mit leichtem Relief. */
.fic {
  fill: currentColor;
  stroke: none;
  color: #3c4148;
  opacity: 0.98;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.36))
    drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.12));
}
.leadflow .fic { filter: url(#marketleaders-leadflow-icon-metal); }
.leadflow-tp { color: #3c4148; }            /* Touchpoint-Icons neutral, dezent */
.leadflow--v { max-width: 540px; margin: 4px auto 0; }
.cap-cards > .cap-card:first-child .chart {
  padding-left: 51px;
  padding-right: 51px;
}
/* MarketLeaders App-Ziel: alle Touchpoints laufen in die Marke statt in generische Profile. */
.leadflow-brand-app {
  filter: drop-shadow(0 20px 28px rgba(44, 96, 206, 0.30));
}
.leadflow-app-shadow {
  fill: rgba(44, 96, 206, 0.12);
}
.leadflow-app-bg {
  fill: url(#marketleaders-leadflow-app-grad);
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.2;
}
.leadflow-app-star {
  fill: url(#marketleaders-leadflow-star-grad);
  opacity: 1;
  filter: drop-shadow(0 6px 9px rgba(48, 47, 224, 0.34));
}
@media (max-width: 600px) {
  .cap-cards > .cap-card:first-child .chart {
    padding-left: 38px;
    padding-right: 38px;
  }
  .cap-cards > .cap-card:first-child .leadflow--v {
    max-width: 310px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leadflow-packet {
    opacity: 0 !important;
  }
  .leadflow-packet animate,
  .leadflow-packet animateMotion {
    display: none;
  }
}

/* ===== Automation-Workflow: ruhig sequenziell, ein aktives Element je Schritt ===== */
.chart--automation {
  max-width: 780px;
  padding: clamp(54px, 5vw, 68px) clamp(24px, 4.4vw, 58px);
}
.autoflow {
  --auto-line: #d2d2d8;
  --auto-icon-idle: #666a73;
  --auto-icon-active: #343941;
  display: flex;
  flex-direction: column;
  width: min(100%, 850px);
  gap: clamp(26px, 3vw, 34px);
  padding: clamp(22px, 2vw, 28px) 0 clamp(14px, 2vw, 20px);
  margin: 0 auto;
}
.autoflow-row { display: flex; align-items: center; width: 100%; min-width: 0; }
.autoflow-task {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: clamp(48px, 6.2vw, 68px); aspect-ratio: 1;
  border-radius: clamp(16px, 2vw, 22px);
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(145deg, rgba(247, 247, 249, 0.96) 0%, rgba(215, 217, 223, 0.96) 48%, rgba(180, 184, 194, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -10px 18px rgba(24, 25, 30, 0.08),
    0 14px 28px rgba(20, 21, 28, 0.1);
  color: var(--auto-icon-idle);
}
.autoflow-ico {
  width: 50%;
  height: 50%;
  fill: url(#autoflow-icon-fill);
  stroke: none;
  overflow: visible;
  opacity: 0.3;                 /* inaktiv stark gedimmt — leuchtet bei Aktivierung auf 1 */
  color: var(--auto-icon-idle);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38))
    drop-shadow(0 5px 8px rgba(32, 35, 43, 0.08));
  transition: color 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
}
.autoflow-ico use {
  fill: url(#autoflow-icon-fill);
}
.autoflow-task.is-active {
  color: var(--auto-icon-active);
}
.autoflow-task.is-active .autoflow-ico {
  opacity: 1;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.34))
    drop-shadow(0 8px 10px rgba(18, 21, 30, 0.12))
    brightness(0.9)
    contrast(1.05);
}
.autoflow-check {
  position: absolute; top: -6px; right: -6px; width: 17px; height: 17px;
  box-sizing: border-box; padding: 2.5px;
  border-radius: 50%; background: #dbd8ee;   /* heller Lila-Tint */
  fill: none; stroke: #006cff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(0.3);
  transition: opacity 0.5s ease;             /* blendet erst beim Reset (alles auf Anfang) weg */
}
/* Verbindung: graue Basislinie bleibt immer, Indigo-Punkte nur im aktiven Schritt */
.autoflow-link { position: relative; flex: 1 1 0; height: 12px; min-width: 8px; }
.autoflow-link::before {
  content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px;
  transform: translateY(-50%); background: var(--auto-line);
}
.autoflow-stream {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background-image: radial-gradient(circle, var(--c-accent) 0 1.05px, transparent 1.25px);
  background-size: 8px 4px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  --flow-shift: 16px;        /* MUSS ein Vielfaches der Punkt-Periode (background-size-x) sein → ruckelfreier Loop */
  opacity: 0;
  transition: opacity 0.2s ease;
}
.autoflow-link.is-active .autoflow-stream {
  opacity: 0.62;
  will-change: background-position;
  animation: auto-streamflow 1.55s linear infinite;
}
.autoflow-task.is-active .autoflow-check {
  animation: auto-check-pop 0.4s ease-out 1 both;   /* poppt beim Aktivieren, bleibt bis Reset */
}
@keyframes auto-check-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes auto-streamflow { to { background-position-x: var(--flow-shift, 16px); } }
@media (max-width: 600px) {
  .chart--automation {
    padding-inline: 24px;
  }
  .autoflow {
    gap: 20px;
  }
  .autoflow-task {
    width: clamp(42px, 12.5vw, 48px);
    border-radius: 16px;
  }
  .autoflow-link {
    min-width: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .autoflow-task,
  .autoflow-check,
  .autoflow-stream {
    animation: none !important;
  }
  .autoflow-check,
  .autoflow-stream {
    opacity: 0;
  }
}
/* Größere Eyebrow (z.B. Automation-Card) */
.cap-kicker--lg {
  font-size: inherit;
  letter-spacing: inherit;
}

/* ===== Reputation: Google-SERP mit Top-Platzierung + Sternen ===== */
.serp { background: #cdcdcd; padding: 5px; border-radius: 20px; max-width: 384px; margin: 0 auto; overflow: visible; }
.serp-rating-num { fill: #1a0d07; font-family: var(--sans); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.serp svg { width: 100%; height: auto; display: block; overflow: visible; }
.serp-bar { fill: #f0f1f4; }
.serp-search { fill: var(--c-accent); }
.serp-lupe { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.serp-top { fill: #fff; stroke: var(--c-accent); stroke-width: 1px; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.224)); }
.serp-title { fill: var(--c-accent); }
.serp-text { fill: #d6d8df; }
.serp-stars { color: var(--c-accent); }
.serp-star-half { opacity: 0.4; }
.serp-cursor { fill: #fff; stroke: #3a3a42; stroke-width: 1.4; stroke-linejoin: round; }
.serp-r2title { fill: #9a9fb1; }   /* Google-Ergebnisse: „dunkle" Zeile (Titel) */
.serp-r2text { fill: #c8cbd6; }    /* „helle" Zeile (Beschreibung) — klarer Kontrast zur dunklen */

/* Live-Indikator (pulsierender Akzent-Punkt) */
.chart-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent);
  display: inline-block; margin-right: 6px; vertical-align: middle;
  animation: chart-live-pulse 1.7s ease-out infinite;
}
@keyframes chart-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); }
  100% { box-shadow: 0 0 0 7px rgba(79, 70, 229, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chart-live-dot { animation: none; }
}

/* 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-bars--six-month { height: 170px; }
.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; }
.chart--automation .chart-head {
  justify-content: flex-end;
}
.chart--automation .chart-axis--six {
  padding: 0;
}
.chart--automation .automation-grid line {
  stroke: rgba(13, 13, 15, 0.08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 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: 400;
  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: 400;
  margin-right: 4px;
  opacity: 0.85;
}
.hero-unit {
  font-size: 0.45em;
  font-weight: 400;
  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: 400;
  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);
}
.chart--automation .hero-stat:first-child .hero-num {
  color: var(--ch-text);
}
.chart--automation .chart-hero {
  border-bottom: 0;
  padding-bottom: 8px;
}
.chart--automation .hero-tag {
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.16;
}
.chart--automation .hero-tag .icon {
  flex: 0 0 auto;
  margin-top: 2px;
}
.chart--automation .hero-tag span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart--automation .hero-tag small {
  font-size: 12px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ch-text-mute);
}
.chart--automation .hero-tag.positive small {
  color: var(--ch-text-mute);
}
@media (max-width: 600px) {
  .chart--automation .chart-hero {
    gap: 12px;
    padding-inline: 0;
  }
  .chart--automation .hero-stat {
    min-width: 0;
  }
  .chart--automation .hero-num {
    font-size: clamp(34px, 10.8vw, 44px);
    padding: 5px 12px;
  }
  .chart--automation .hero-sign {
    margin-right: 2px;
  }
  .chart--automation .hero-unit {
    margin-left: 2px;
  }
  .chart--automation .hero-tag {
    gap: 5px;
    font-size: 13px;
  }
  .chart--automation .hero-tag small {
    font-size: 10.5px;
  }
}

/* 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: 400;
  color: var(--ch-text);
}
.chart-foot-num span {
  font-size: 12px;
  font-weight: 400;
  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: 25px;
  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: 400;
  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: 400;
  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: 400;
  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;
}
.chart--ai-support {
  justify-content: center;
  min-height: 320px;
  padding: clamp(46px, 5vw, 68px) clamp(28px, 4.8vw, 56px);
}
.ai-support-kpi {
  display: grid;
  grid-template-columns: auto minmax(146px, 1fr);
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 26px);
  width: min(100%, 450px);
  margin: 0 auto;
}
.ai-support-donut {
  justify-self: end;
  width: clamp(184px, 18vw, 212px);
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 32px rgba(20, 21, 28, 0.08));
}
.chart--ai-support .chart-donut {
  width: 100%;
  height: auto;
}
.chart--ai-support .donut-center {
  grid-template-rows: auto auto;
  align-content: center;
  gap: 8px;
}
.chart--ai-support .donut-center-num {
  display: block;
  align-self: center;
  width: auto;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.045em;
}
.chart--ai-support .donut-center-num span {
  font-size: 0.48em;
  color: var(--ch-text-mid);
  margin-left: 2px;
}
.chart--ai-support .donut-center-tag {
  position: static;
  transform: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ch-text-mid);
}
.ai-support-bubble {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 146px;
  padding: 18px 20px 17px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  /* Dunkelblau wie die Hero-Dashboard-Automation-Bubble (gleiche --dash-blue-Farben) */
  background:
    linear-gradient(135deg, var(--dash-blue-deep) 0%, var(--dash-blue) 58%, var(--dash-blue-mid) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 42px rgba(5, 0, 42, 0.30);
  color: #fff;
  text-shadow: 0 1px 10px rgba(5, 0, 42, 0.30);
}
.ai-support-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--dash-blue-deep);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 3px;
}
.ai-support-bubble strong {
  display: block;
  font-family: var(--sans);
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: #fff;
}
.ai-support-bubble strong span {
  font-size: 0.46em;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.68);
  margin-left: 2px;
}
.ai-support-bubble small {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
}
.donut-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding-top: 4px;
}
.chart-donut {
  width: 172px;
  height: 172px;
  display: block;
}
.donut-stack {
  position: relative;
  display: inline-flex;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.donut-center-num {
  align-self: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--ch-text);
  letter-spacing: -0.02em;
}
.donut-center-num span {
  font-size: 18px;
  font-weight: 400;
  color: var(--ch-text-mute);
  margin-left: 1px;
}
.donut-center-tag {
  position: absolute;
  top: calc(50% + 23px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ch-text-mute);
  margin-top: 0;
}
.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: 400;
  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 > .container > .display { padding-left: var(--pad); padding-right: var(--pad); }
  .capabilities .kicker { margin-left: auto; margin-right: auto; }

  .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%; }
  .chart--ai-support {
    padding-inline: clamp(24px, 7vw, 44px);
  }
  .ai-support-kpi {
    grid-template-columns: auto minmax(118px, 1fr);
    gap: clamp(10px, 3vw, 18px);
    width: 100%;
  }
  .ai-support-donut {
    width: clamp(136px, 38vw, 156px);
  }
  .chart--ai-support .donut-center-num {
    font-size: clamp(34px, 10vw, 46px);
  }
  .chart--ai-support .donut-center-tag {
    font-size: 12px;
  }
  .ai-support-bubble {
    min-width: 112px;
    padding: 15px 15px 14px;
    border-radius: 24px;
  }
  .ai-support-bubble strong {
    font-size: clamp(34px, 9.6vw, 44px);
  }
  .ai-support-bubble small {
    font-size: 11.5px;
  }
}

/* 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 — deep valley, marquee rows
   ===================================================== */
.testimonials {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(92,255,161,0.06), transparent 60%);
  /* base color from body gradient (deepest black valley) */
  padding-bottom: clamp(80px, 12vw, 140px);
  overflow: hidden;
}
.testimonials .display {
  max-width: 12ch;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  /* edge fade so cards drift in/out smoothly */
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.marquee + .marquee { margin-top: 20px; }

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
.marquee-track-reverse { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.testimonial {
  flex: 0 0 auto;
  width: clamp(360px, 38vw, 520px);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(244,239,230,0.08);
  border-radius: 14px;
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.testimonial:hover {
  border-color: rgba(92,255,161,0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(92,255,161,0.08);
}

.testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.person strong {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: var(--c-ink);
}
.person span {
  display: block;
  font-size: 13px;
  color: var(--c-ink-soft);
  margin-top: 2px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--avatar-bg, #888);
  color: rgba(0,0,0,0.65);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.company-mark {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  text-align: right;
  white-space: nowrap;
  text-transform: uppercase;
}
.stars {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--c-green);
  line-height: 1;
}
.testimonial p {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-ink);
}

@media (max-width: 600px) {
  .testimonial { width: 320px; padding: 22px 22px 24px; }
  .testimonial p { font-size: 17px; }
}

/* =====================================================
   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-heading-layout .kicker {
  margin-bottom: 0;
}
.tc-eye-brow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.6em;
  border-radius: 100vw;          /* --_radius---round */
  background-color: rgba(0,0,0,0.04);  /* on dark-bg readable; Conicorn uses var(--_color---black--07) = #00000008 — wir nutzen leicht mehr Kontrast für unsere dunkle Section */
  color: #f4efe6;
  font-size: 0.75rem;            /* --font-size--body-xs */
  font-weight: 400;
  text-transform: uppercase;
  padding: 0.6em 1em;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}
.tc-eye-brow-number {
  color: #f4efe6;
}
.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: #f4efe6;
  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: 400;
  letter-spacing: -0.05em;
  color: #f4efe6;
  margin: 0;
  max-width: 12ch;                        /* einheitliche Section-Headline-Breite */
}

/* 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: #f4efe6;
  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: #f2f2f2;      /* --_color---grey--08 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  color: #1a1a1a;
}

/* 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: 6rem;
  height: 6rem;
  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: 400;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  user-select: none;
}
.tc-default-title {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}
.tc-default-name {
  font-weight: 400;
  color: #1a1a1a;
  font-size: 1rem;
  line-height: 1.3;
}
.tc-default-info {
  color: rgba(0,0,0,0.6);          /* --_color---black--03 = #0009 — Conicorn nutzt etwas dunkler */
  font-size: 0.9375rem;
  line-height: 1.3;
}
.tc-default-icon {
  position: absolute;
  inset: 0% 0% auto auto;
  height: 1.8rem;
  width: auto;
  opacity: 0.2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}
.tc-default-icon svg {
  height: 1.8rem;
  width: auto;
}
.testimonials-conicorn .tc-default-text {
  font-size: 28.8px;
  line-height: 1.2;
  font-weight: 400;
  color: #1a1a1a;
  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--marcus {
  background-position: center center;
}
.tc-card--marcus::before {
  background:
    radial-gradient(80% 70% at 50% 28%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28) 62%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.34) 56%, rgba(0, 0, 0, 0.78) 100%);
}
.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: 400;
  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: 400;
  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: 400;
  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: none;           /* freier nativer Lauf wie vertikales Scrollen */
    scroll-behavior: auto;            /* Arrow-Klicks animieren explizit per JS */
    scroll-padding-inline: 5%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    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: auto;               /* Touch bleibt nativ, vertikal und horizontal */
  }
  .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: none;
    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;
  }
  .testimonials-conicorn .tc-default {
    padding: 2.5rem;
    row-gap: 1.5rem;
  }
  .testimonials-conicorn .tc-default-text {
    font-size: 28.8px;
    line-height: 1.25;
  }
  .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;
  }
  .testimonials-conicorn .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: 4.8rem;
    height: 4.8rem;
    font-size: 1.5rem;
  }
}

/* =========== 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 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 80px);     /* einheitliche Section-Headline-Größe */
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-align: center;
  margin: 0 auto clamp(50px, 6vw, 80px);
  max-width: 12ch;                        /* einheitliche Section-Headline-Breite */
}
.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 132px 72px 68px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px 2px;
  position: relative;
  z-index: 1;
  min-height: 500px;
  /* 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: center;
  row-gap: 8px;
  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--skool {
  padding: 8px 5px;
}
.tool-icon:hover { transform: scale(1.15); }
.tool-icon img,
.tool-icon .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: 50% 50%;
}
.tool-mark {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-weight: 850;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.tool-mark--skool {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.12em;
  transform: translateX(-1px);
}
.tool-mark--skool span:nth-child(1) { color: #263aa4; }
.tool-mark--skool span:nth-child(2) { color: #db4638; }
.tool-mark--skool span:nth-child(3) { color: #c7a13f; }
.tool-mark--skool span:nth-child(4) { color: #57aeda; }
.tool-mark--skool span:nth-child(5) { color: #d9594f; }
.tool-mark--teachable {
  color: #1d6f56;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.tool-icon .brand-logo--badge { transform: scale(0.96); }
.tool-icon .brand-logo--glyph { transform: scale(0.9); }
.tool-icon .brand-logo--meta { transform: scale(0.96); }
.tool-icon .brand-logo--ads { transform: scale(0.82); }
.tool-icon .brand-logo--analytics { transform: scale(0.82); }
.tool-icon .brand-logo--paypal { transform: scale(0.88); }
.tool-icon .brand-logo--wordmark { transform: scale(0.78); }
.tool-icon .brand-logo--shopify { transform: scale(0.86); }
.tool-icon .brand-logo--card { transform: scale(0.92); }
.tool-icon .brand-logo--snapchat { transform: scale(0.82); }
.tool-icon .brand-logo--typeform-full { transform: scale(1.08); }
.tool-icon .brand-logo--pipedrive-full { transform: scale(1.2); }
.tool-icon .brand-logo--pipedrive-icon { transform: scale(1.28); }
.tool-icon .brand-logo--tool-pipedrive {
  transform: scale(1.22);
  border-radius: 5px;
}
.tool-icon .brand-logo--tool-kajabi { transform: scale(1.28); }
.tool-icon .brand-logo--tool-thinkific { transform: scale(1.22); }
.tool-icon .brand-logo--tool-typeform { transform: scale(1.18); }
.tool-icon .brand-logo--tool-brevo { transform: scale(1.18); }
.tool-icon .brand-logo--tool-docusign { transform: scale(1.28); }

/* Rechte Karte: All in One — 111px radius, überlappt chaos card (-90px),
   starker Schatten der nach links zieht (Vorbild-Werte) */
.system-card--all {
  /* Indent-Maße zentral: Liste UND „Alle Features"-Toggle richten sich daran aus.
     Text-Start einer Listenzeile = list-pad + check-size + check-gap.
     Der Toggle nutzt exakt dieselbe Summe als padding-left → erster Buchstabe
     liegt auf derselben vertikalen Linie wie der Listen-Text (Mobile & Desktop). */
  --system-check-size: 24px;
  --system-check-gap: 10px;
  --system-list-pad: 8px;
  background: #ffffff;
  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-app-icon {
  width: 104px;
  height: 104px;
  border-radius: 26px;
  margin: -112px auto 24px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(58, 68, 126, 0.9) 0%, rgba(10, 12, 39, 0.98) 50%, #000105 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -22px 42px rgba(255, 255, 255, 0.09),
    inset 0 0 34px rgba(88, 116, 255, 0.20),
    0 18px 34px rgba(0, 0, 0, 0.24),
    0 8px 24px rgba(44, 96, 206, 0.32);
}
.system-app-star {
  display: block;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 7px 12px rgba(48, 47, 224, 0.34));
}
.system-all-title {
  font-family: var(--serif);              /* einheitliche Headline-Font (Geist Sans) */
  font-weight: 400;
  font-size: clamp(48px, 10.5vw, 96px);
  line-height: 1;
  letter-spacing: -2px !important;
  color: #000;
  margin: 0 0 32px;
  text-align: center;
}
.system-features {
  /* --system-check-size / --system-check-gap / --system-list-pad von .system-card--all geerbt */
  list-style: none;
  padding: 0 0 0 var(--system-list-pad, 8px);
  margin: 0;
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
.system-card--all .system-features,
.system-card--all .system-features-extra,
.system-card--all .system-features-toggle-row {
  width: min(100%, 392px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.system-features li {
  font-family: var(--sans);
  font-size: 19px;                 /* Laptop/Desktop — Mobile bleibt 17px (siehe ≤600px-Block) */
  font-weight: 400;
  color: #000;
  line-height: 1.4;
  display: grid;
  grid-template-columns: var(--system-check-size) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--system-check-gap);
  max-width: 100%;
}
/* Check-Icon im Kreis (FAQ-Icon-Pattern) — passend zur kompakten Feature-Liste */
.system-features li svg.icon {
  color: #1a0d07;
  flex: 0 0 var(--system-check-size);
  width: var(--system-check-size);
  height: var(--system-check-size);
  justify-self: start;
  align-self: start;
  font-size: 11px;                    /* Symbol-Größe innen (kleiner als Wrapper) */
  padding: 7px;
  box-sizing: border-box;
  background: rgba(26, 13, 7, 0.08);
  border-radius: 50%;
  stroke: currentColor;
  stroke-width: 52;
  stroke-linejoin: round;
  paint-order: stroke fill;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}
.system-features.is-check-sequence li svg.icon {
  opacity: 0;
  transform: translateY(-5px) scale(0.48);
  filter: blur(0.35px);
}
.system-features.is-check-sequence.is-checks-on li svg.icon {
  animation: systemCheckPop 420ms cubic-bezier(0.2, 0.9, 0.22, 1.18) both;
  animation-delay: var(--system-check-delay, 0ms);
}
@keyframes systemCheckPop {
  0% {
    opacity: 0;
    transform: translateY(-5px) scale(0.48);
    filter: blur(0.35px);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(1.14);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.system-features-toggle-row {
  margin-top: 8px;
  max-width: max-content;
}
.system-features-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  /* erster Buchstabe genau auf der Text-Linie der Listen-Items (nicht auf Icon-Höhe) */
  padding: 0 0 0 calc(var(--system-list-pad, 8px) + var(--system-check-size, 24px) + var(--system-check-gap, 10px));
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.46);
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.system-features-toggle:hover {
  color: rgba(0, 0, 0, 0.72);
}
.system-features-toggle:focus-visible {
  outline: 2px solid rgba(48, 47, 224, 0.36);
  outline-offset: 4px;
  border-radius: 999px;
}
.system-features-chevron {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  opacity: 0.76;
  transform-origin: 50% 50%;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.system-features-toggle[aria-expanded="true"] .system-features-chevron {
  transform: rotate(180deg);
}
.system-features-extra {
  margin-top: 5px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition:
    height 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height, opacity, transform;
}
.system-features-extra.is-open {
  opacity: 1;
  transform: translateY(0);
}
.system-features-extra[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .system-features-chevron,
  .system-features-extra {
    transition: none;
  }
  .system-features.is-check-sequence li svg.icon,
  .system-features.is-check-sequence.is-checks-on li svg.icon {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* 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: #fff;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  align-self: center;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.system-cta:hover {
  background: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow: none;
}
.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) {
  .system {
    overflow-x: clip;
  }

  /* Mobile/Tablet: Container bleibt innerhalb des Section-Paddings, damit die
     Karten links und rechts exakt gleich viel Luft haben. */
  .system > .container {
    max-width: 820px;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .system-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    width: 100%;
    gap: 0;            /* gap 0, damit überlappendes margin-top sauber wirkt */
    justify-items: center;
  }
  .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 */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  /* Logo-Grid: 6 Spalten statt 4 — weniger Reihen, kompaktere Card */
  .tool-grid {
    grid-template-columns: repeat(6, 28px);
    grid-auto-rows: 28px;
    column-gap: 0;
    row-gap: 8px;
  }
  .tool-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  .tool-icon--skool {
    padding: 4px 2px;
  }
  .tool-mark--skool {
    font-size: 8.5px;
  }
  .tool-mark--teachable {
    font-size: 14px;
  }
  /* 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 + langer Shadow nach oben */
  .system-card--all {
    --system-list-pad: 0px;          /* kein Listen-Einzug ab Tablet → Toggle zieht via calc mit */
    width: 100%;
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -30px;
    border-radius: 44px;
    padding: 60px clamp(24px, 7vw, 32px) 40px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    box-shadow: 0 -80px 280px 10px rgba(0, 0, 0, 0.9);
  }

  .system-card--all .system-features,
  .system-card--all .system-features-extra,
  .system-card--all .system-features-toggle-row {
    width: 100%;
    max-width: 100%;
  }

  .system-card--all .system-features {
    padding-left: 0;
  }

  .system-card--all .system-features li {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .system-card--all .system-cta {
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

@media (min-width: 601px) and (max-width: 880px) {
  .system > .container {
    width: 100%;
    max-width: 820px;
  }

  .system-grid {
    max-width: 760px;
  }

  .system-card--chaos {
    width: min(72vw, 580px);
    min-height: 340px;
    padding: 2px 38px 36px;
  }

  .tool-grid {
    grid-template-columns: repeat(6, 44px);
    grid-auto-rows: 44px;
    column-gap: 0;
    row-gap: 8px;
  }

  .tool-icon {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  .tool-icon--skool {
    padding: 7px 4px;
  }
  .tool-mark--skool {
    font-size: 13.5px;
  }
  .tool-mark--teachable {
    font-size: 19px;
  }
}

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

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

.faq-item {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 13, 7, 0.08);
  border-radius: 22px;
  overflow: hidden;
  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.88); }
.faq-item.is-open {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 14px 40px rgba(26, 13, 7, 0.10);
}
/* 3px Border-Ring beim aktiven Item — nutzt die Brand-Wave-Farben. */
.faq-item.is-open::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 25px;
  padding: 3px;
  background: linear-gradient(135deg,
    var(--c-indigo)   0%,
    var(--c-lavender) 50%,
    var(--c-light)    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;
}

/* 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: 21px;
  font-weight: 400;
  line-height: 1.1;
  color: #1a0d07;
  text-align: left;
  user-select: none;
}

.faq-num {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(26, 13, 7, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  color: rgba(26, 13, 7, 0.65);
}
.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: var(--c-accent);
  color: #fff;
  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: var(--c-accent);
  color: #ffffff;
  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: 0 68px 26px 72px;        /* mehr rechts (~+40px) für Lesbarkeit auf Desktop */
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  color: rgba(26, 13, 7, 0.7);
}
.faq-inner strong { color: #1a0d07; font-weight: 400; }

/* 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(20px, 6vw, 40px) auto 0;
  font-family: var(--sans);
  font-size: 17px;
  color: rgba(244, 239, 230, 0.65);
}
/* „Noch eine Frage offen?" in Zeile 1, Link in Zeile 2 */
.faq-contact > span { display: block; margin-bottom: 0px; }
.faq-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  color: var(--c-ink);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 0;
}
/* FAQ-CTA bewusst ohne Unterstreichung */
.faq-contact-text {
  display: inline-block;
  border-bottom: 0;
  padding-bottom: 0;
}
.faq-contact a:hover .faq-contact-text { border-color: transparent; }
/* Pfeil im weißen Kreis, Pfeil blau */
.faq-contact .faq-arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--c-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-contact .faq-arrow svg {
  display: block;
  width: 17px;
  height: 17px;
}
.faq-contact a:hover .faq-arrow { transform: translateX(2px); }

@media (max-width: 600px) {
  .faq-trigger { padding: 20px 18px 20px 30px; 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 (30px) */
  .faq-inner p, .faq-answer { padding: 10px 62px 33px 30px; font-size: 16px; }
  .faq-item.is-open .faq-trigger { padding-bottom: 6px; }
}

/* =========== ROI CALCULATOR — savings potential through systems, automation, AI =========== */
.roi-calculator {
  background: transparent;
  padding-top: clamp(50px, 7vw, 100px);
}

.roi-calculator .container {
  max-width: 1120px;
}

.roi-head {
  text-align: center;
  margin: 0 auto clamp(42px, 6vw, 70px);
}

.roi-head .kicker {
  color: rgba(244, 239, 230, 0.58);
}

.roi-head .display {
  color: var(--c-ink);
  max-width: 18ch;
  margin: 0 auto;
}

.roi-sub {
  max-width: 62ch;
  margin: 28px auto 0;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.72);
}

.roi-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  align-items: stretch;
}

.roi-controls,
.roi-results {
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-radius: 64px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.roi-controls {
  --roi-controls-bg: rgb(255 255 255 / 33%);
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 0;
  box-shadow: none;
  background: var(--roi-controls-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.roi-controls::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -18px;
  width: 20px;
  height: 34px;
  transform: translateY(-50%);
  background: var(--roi-controls-bg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}

.roi-field {
  display: grid;
  gap: 4px;
  padding: 32px 30px;
  border-radius: 38px;
  background: #ffffff;
  color: #1a0d07;
}

.roi-field-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 22px);
}

.roi-field label {
  display: block;
  min-width: 0;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  color: #1a0d07;
}

.roi-label-nowrap {
  display: inline-block;
  white-space: nowrap;
}

.roi-field-help {
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(26, 13, 7, 0.58);
}

.roi-field output {
  min-width: 110px;
  text-align: right;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  color: #1a0d07;
  white-space: nowrap;
}

.roi-number {
  font: inherit;
}

.roi-unit {
  font-size: 0.7em;
  line-height: 1;
  vertical-align: 0.08em;
}

.roi-field-hours .roi-field-top {
  gap: 10px;
}

.roi-field-hours output {
  min-width: 82px;
}

.roi-field input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent-2) 0%, var(--c-accent-2) var(--roi-progress, 0%), rgba(26, 13, 7, 0.10) var(--roi-progress, 0%), rgba(26, 13, 7, 0.10) 100%);
  cursor: pointer;
  outline: none;
}

.roi-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: var(--c-accent);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.roi-field input[type="range"]::-moz-range-thumb {
  width: 38px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: var(--c-accent);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.roi-field input[type="range"]::-moz-range-track {
  height: 22px;
  border-radius: 999px;
  background: transparent;
}

.roi-field input[type="range"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
}

.roi-results {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(28px, 5vw, 74px);
  background: #ffffff;
  color: #1a0d07;
}

.roi-results-main {
  text-align: center;
}

.roi-results-kicker {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: #1a0d07;
}

.roi-results h3 {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  font-size: 47px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.5px;
  text-align: center;
  color: var(--c-accent);
}

.roi-results h3 > span {
  display: inline-block;
  max-width: 100%;
  padding: 24px 40px 26px;
  border-radius: 58px;
  background: var(--c-accent-3);
  color: var(--c-accent);
  overflow-wrap: anywhere;
}

.roi-results-copy {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.48;
  color: rgba(26, 13, 7, 0.68);
}

.roi-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: clamp(30px, 4vw, 46px) 0 0;
}

.roi-metrics div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px;
  border-radius: 14px;
  border: 0;
  background: #f2f2f4;
}

.roi-metrics div > span {
  display: block;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: #1a0d07;
}

.roi-metrics strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: #1a0d07;
  text-align: right;
}

.roi-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 68px;
  margin-top: clamp(26px, 4vw, 40px);
  padding: 0 30px;
  border-radius: 999px;
  background: var(--c-accent);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.roi-cta:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .roi-metrics {
    gap: 8px;
    margin-top: clamp(24px, 3vw, 34px);
  }
  .roi-metrics div {
    gap: 12px;
    padding: 14px 15px;
  }
  .roi-metrics div > span {
    font-size: 18px;
  }
  .roi-metrics strong {
    font-size: 19px;
  }
  .roi-results-copy {
    font-size: 17px;
  }
}

@media (max-width: 900px) {
  .roi-shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .roi-controls::after {
    top: auto;
    right: 50%;
    bottom: -18px;
    width: 36px;
    height: 20px;
    transform: translateX(50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .roi-results h3 {
    font-size: 47px;
  }
}

@media (max-width: 600px) {
  .roi-calculator {
    padding-top: 40px;
  }
  .roi-shell {
    gap: 34px;
  }
  .roi-controls {
    gap: 12px;
    padding: 18px;
  }
  .roi-controls,
  .roi-results {
    border-radius: 20px;
  }
  .roi-results {
    padding: 22px 18px 24px;
  }
  .roi-field {
    border-radius: 16px;
    gap: 4px;
    padding: 18px 16px;
  }
  .roi-field label {
    font-size: 19px;
  }
  .roi-field-help {
    font-size: 12.5px;
    line-height: 1.32;
  }
  .roi-sub {
    font-size: 18px;
  }
  .roi-field-top {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .roi-field output {
    min-width: 0;
    text-align: left;
    font-size: 19px;
  }
  .roi-field input[type="range"] {
    height: 18px;
  }
  .roi-field input[type="range"]::-webkit-slider-thumb {
    width: 34px;
    height: 24px;
    border-radius: 8px;
  }
  .roi-field input[type="range"]::-moz-range-thumb {
    width: 34px;
    height: 24px;
    border-radius: 8px;
  }
  .roi-results h3 {
    font-size: 44px;
  }
  .roi-results h3 > span {
    padding: 18px 24px 20px;
    border-radius: 42px;
  }
  .roi-results-kicker {
    margin-bottom: 10px;
    font-size: 21px;
  }
  .roi-results-copy {
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.42;
  }
  .roi-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
  }
  .roi-metrics div {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
    padding: 13px 14px;
  }
  .roi-metrics div > span {
    font-size: 16px;
  }
  .roi-metrics strong {
    font-size: 17px;
    text-align: right;
  }
  .roi-cta {
    min-height: 56px;
    margin-top: 20px;
    font-size: 16px;
  }
}
.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: 400; }

/* 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 */
}

/* =========== Founder Build — compact proof section under All-in-One =========== */
.founder-build {
  background: transparent;
  padding: clamp(110px, 12vw, 190px) var(--pad) clamp(120px, 14vw, 210px);
}
.founder-build .container {
  max-width: 980px;
}
.founder-build-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 4vw, 50px);
  text-align: left;
}
.founder-build-head {
  display: grid;
  justify-items: center;
  text-align: center;
  width: 100%;
}
/* Glass-Panel um Copy + Foto — dezent heller als der Hintergrund, transparent */
.founder-build-panel {
  position: relative;                  /* Anker für die Social-Tab oben */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 3vw, 52px);
  width: 100%;
  max-width: 1000px;
  padding: clamp(26px, 4vw, 64px) clamp(48px, 6.6vw, 82px) clamp(26px, 5.4vw, 44px);
  border-radius: 34px;
  background: #000000;        /* solide Hintergrundfarbe der beiden Flächen, keine Transparenz, kein Border */
  border: none;
  box-shadow: 0 0 300px rgb(15 28 65 / 65%);
}
.founder-build-photo {
  justify-self: end;
  align-self: center;
  position: relative;
  width: 210px;
  height: 210px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #0b1226;        /* Bühnen-Dunkelblau → blendet die Seitenstreifen des Hochformats */
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.founder-build-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* komplette Person sichtbar, kein Crop */
  object-position: 50% 50%;
}
.founder-build-photo::after {
  /* Streulicht oben (Gesicht) + dezente Abdunklung unten (Arme/Gestik weniger hell) */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(78% 58% at 50% 24%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%),
    linear-gradient(to bottom, rgba(13, 10, 40, 0) 52%, rgba(13, 10, 40, 0.24) 100%);
}
.founder-build-copy {
  align-self: center;
  display: grid;
  justify-items: start;
  text-align: left;
  max-width: 820px;
}
.founder-build-kicker {
  margin: 0 0 18px;
  justify-self: center;
  text-align: center;
}
.founder-build-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.3vw, 54px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  max-width: 820px;
  margin: 0 0 12px;
  justify-self: center;
  text-align: center;
}
/* Name + Rolle unter „Meet the Founder" — Entity-Signal „Jan Froboese" */
.founder-build-name {
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-ink-soft);
  margin: 0;
  justify-self: center;
  text-align: center;
}
.founder-build-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(244, 239, 230, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
.founder-build-link:hover {
  color: var(--c-ink);
  text-decoration-color: currentColor;
}
/* Social-Tab: dieselbe Pillen-Form wie ursprünglich, oben-mittig, überlappt das Panel.
   EXAKT gleiche solide Farbe wie das Panel + kein Border → verschmilzt nahtlos. */
.founder-build-social {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);      /* sitzt mittig auf der Panel-Oberkante */
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 15px 28px;
  border-radius: 26px;
  background: black;                      /* gleiche solide Farbe wie das Panel */
  border: none;
}
/* Social als monochrome Icons in der gleichen Farbe (currentColor) */
.founder-build-social a {
  display: inline-flex;
  color: #fff;                                   /* weiß */
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 0;
  transition: opacity 0.18s ease;
}
.founder-build-social a svg {
  width: 30px;                                    /* +20 % (war 25px) */
  height: 30px;
  display: block;
}
.founder-build-social a:hover {
  opacity: 1;
}
.founder-build-copy p:not(.kicker) {
  max-width: 790px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.42;
  color: rgba(244, 239, 230, 0.72);
}
.founder-build-copy p:not(.kicker) + p:not(.kicker) {
  margin-top: 14px;
}
.founder-build-proof {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 0;   /* sitzt unter dem Panel; Abstand kommt aus dem Flex-Gap des Layouts */
}
.founder-build-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(26px, 3.4vw, 44px);
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.founder-build-logo {
  display: block;
  object-fit: contain;
  color: #ffffff;
  fill: currentColor;
}
.founder-build-logo--ntv {
  height: 59px;
  width: 95px;
}
.founder-build-logo--zdf {
  height: 49px;
  width: 84px;
}
.founder-build-logo--vox {
  height: 33px;
  width: 103px;
}
.founder-build-reference {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--c-ink);
  opacity: 0.3;
  text-align: center;
}

/* Stacking erst auf dem Smartphone (≤600) — auf Tablet bleibt Bild + Text nebeneinander */
@media (max-width: 600px) {
  .founder-build {
    --founder-mobile-photo-size: 170px;
    padding-top: 110px;
    padding-bottom: 130px;
  }
  .founder-build-layout {
    gap: 30px;
    text-align: center;
  }
  .founder-build-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 20px;
    /* Das Foto steht mit seiner oberen Hälfte über die Panel-Oberkante hinaus.
       margin-top = halbe Fotohöhe → diese überstehende Hälfte sitzt IN diesem Margin,
       sodass der Layout-Gap darüber als Luft zwischen „Meet the Founder" und Foto bleibt
       (vorher überlappte das Foto die Headline um ~43px). */
    margin-top: calc(var(--founder-mobile-photo-size) * 0.5);
    /* Platz oben für die untere Hälfte des Fotos (sitzt halb über der Oberkante),
       plus Innenabstand seitlich/unten (Jans Werte). */
    padding: 110px 50px 60px;
  }
  /* Foto oben an den Rand — halb über der Panel-Oberkante (wie zuvor die Social-Tab) */
  .founder-build-photo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    order: 0;
    width: var(--founder-mobile-photo-size);
    height: var(--founder-mobile-photo-size);
    max-width: 100%;
    aspect-ratio: auto;
    margin: 0;
    z-index: 2;
  }
  /* Social-Icons in den Fluss, direkt UNTER das Foto (statt absolute Top-Tab) */
  .founder-build-social {
    position: static;
    transform: none;
    order: 1;
    margin: 0 auto;
    justify-content: center;
  }
  .founder-build-social a {
    color: rgb(255 255 255 / 90%);
    opacity: 0.88;
  }
  .founder-build-social a:hover {
    opacity: 1;
  }
  .founder-build-copy {
    order: 2;
    justify-items: start;       /* Inhalt-Text linksbündig (Header bleibt zentriert) */
    text-align: left;
    align-self: stretch;
  }
  .founder-build-kicker,
  .founder-build-title {
    margin-left: auto;
    margin-right: auto;
  }
  .founder-build-copy p {
    margin-left: 0;
    margin-right: 0;
  }
  .founder-build-proof {
    justify-content: center;
    justify-items: center;
    margin-top: 8px;            /* Foto sitzt jetzt oben → kein Bottom-Überstand mehr */
  }
}

@media (max-width: 560px) {
  .founder-build-photo {
    width: var(--founder-mobile-photo-size);
    height: var(--founder-mobile-photo-size);
  }
  .founder-build-title {
    font-size: clamp(40px, 11vw, 54px);
  }
  .founder-build-proof,
  .founder-build-logos {
    justify-content: center;
  }
}

/* =========== CTA — sits on body gradient (cream plateau) =========== */
.cta { background: transparent; padding-bottom: 20px; }
.cta .container { max-width: 1180px; }
.cta .display {
  max-width: min(100%, 1180px);
  color: var(--c-ink);
  font-size: clamp(32px, 5.2vw, 52px);   /* ~18% kleiner als die globale .display */
  line-height: 1.08;
}
/* Mobile: 4-Benefit-Staccato — jede Zeile MUSS eine Zeile bleiben (kein Umbruch
   mitten im Benefit wie „Kürzere Sales / Cycles."). 7.2vw ≈ 27px @375 = längste
   Zeile („Planbare Kundenanfragen.") passt exakt; skaliert mit der Gerätebreite. */
@media (max-width: 600px) {
  .cta .display { font-size: clamp(20px, 6.4vw, 36px); }   /* mit Check-Icons: 24px @375 → „Bekanntheitsgrad steigern" bleibt 1 Zeile */
  /* „Markttransformation" (19 Buchstaben) läuft bei voller .display-Größe über den Rand */
  .approach .display { font-size: clamp(28px, 9vw, 36px); }
}
/* 4-Benefit-Liste: jede Zeile eigener Block mit Check-Icon davor, luftigere Zeilen */
.cta .display.cta-benefits { line-height: 1.3; }
.cta .cta-benefit { display: block; }
.cta .cta-benefit-check {
  display: inline-block;      /* globale svg{display:block}-Regel überschreiben */
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.38em;
  color: var(--c-accent);
  vertical-align: baseline;
}
.cta .kicker  { color: var(--c-ink); }
.cta-app-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
  border-radius: 20px;
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(58, 68, 126, 0.9) 0%, rgba(10, 12, 39, 0.98) 50%, #000105 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -18px 34px rgba(255, 255, 255, 0.09),
    inset 0 0 26px rgba(88, 116, 255, 0.20),
    0 14px 26px rgba(0, 0, 0, 0.24),
    0 6px 20px rgba(44, 96, 206, 0.28);
}
.cta-app-star {
  display: block;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 6px 10px rgba(48, 47, 224, 0.34));
}
.cta-sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.75);
  max-width: 56ch;
  margin: 32px auto 16px;
}
.cta-sub-highlight {
  color: #fff;
}
/* Großer Pfeil zwischen Sub-Text und Formular — lenkt aufs CTA-Formular */
/* CTA-section override: pill form lives on the lighter gradient stop */
.cta .pill-form { margin-top: 32px; max-width: 760px; }

.form-note {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 230, 0.55);
}

/* =====================================================
   PILL FORM — stacked pills (name + email/button)
   ===================================================== */
.pill-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pill-form--hero {
  width: 100%;
  max-width: 860px;
  margin: 20px auto 0;          /* enger an den Text darüber → alles rückt höher */
  position: relative;
  z-index: 3;
}
.pill-form--compact {
  width: 100%;
  max-width: 760px;
  margin: 32px auto 0;
}
.starter-modal-form .pill-form--compact {
  max-width: 100%;
  margin-top: 0;
}
.pill {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 7px;
  gap: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.26);
}
.pill-form--hero .pill {
  min-height: 72px;
  padding: 4px;
  gap: 4px;
  /* sehr weicher, schwarzer Schatten der nach unten aufs Dashboard fällt
     → das Formular wirkt, als schwebe es über allem */
  box-shadow: 0px 70px 130px 20px #0a0e1d;
}
.pill-field {
  flex: 1 1 0;
  min-width: 132px;
  height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 0 16px;
  color: rgba(26, 13, 7, 0.44);
  background: rgba(26, 13, 7, 0.025);
}
.pill-field-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: rgba(26, 13, 7, 0.30);
}
.pill-field:not(.pill-field--email) .pill-field-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}
.pill-field--email .pill-field-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  transform: translateY(-1px);
}
.pill input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  height: 100%;
  font-family: var(--sans);
  font-size: 17px;
  color: #1a0d07;
}
.pill-field:focus-within {
  color: #1a0d07;
  background: #ffffff;
}
.pill-field.is-invalid {
  background: rgba(239, 68, 68, 0.07);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.72);
}
.pill-field:focus-within .pill-field-icon {
  color: #1a0d07;
}
.pill-form--hero .pill input {
  height: 100%;
}
.pill-form--hero .pill-field {
  height: 64px;
}
.pill input::placeholder {
  color: rgba(26, 13, 7, 0.42);
}
.pill-field:has(input:-webkit-autofill) {
  background: #ffffff;
}
.pill input:-webkit-autofill,
.pill input:-webkit-autofill:hover,
.pill input:-webkit-autofill:focus,
.pill input:-webkit-autofill:active {
  -webkit-text-fill-color: #1a0d07 !important;
  caret-color: #1a0d07;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 9999s ease-out 0s;
}
.pill input:-moz-autofill {
  color: #1a0d07 !important;
  background-color: #ffffff !important;
}
.pill button {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  position: relative;
  cursor: pointer;
  background: var(--c-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.5px;
  line-height: 1;
  padding: 0 28px;
  height: 56px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pill button span {
  display: block;
}
.pill-button-spinner {
  display: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.36);
  border-top-color: #ffffff;
  animation: pill-button-spin 0.75s linear infinite;
}
@keyframes pill-button-spin {
  to { transform: rotate(360deg); }
}
.pill-button-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: currentColor;
  transform: translateY(1px);
}
/* CTA-Pfeil: dezenter periodischer Doppel-Nudge nach rechts (→→) mit langer Pause.
   Best Practice: Bewegung zieht den Blick + rechts-Pfeil impliziert „vorwärts/weiter",
   nicht aufdringlich dank Rest-Phase. translateY(1px) bleibt für die Ausrichtung erhalten. */
@keyframes ml-cta-arrow-nudge {
  0%, 60%, 100% { transform: translateY(1px) translateX(0); }
  68%          { transform: translateY(1px) translateX(6px); }
  76%          { transform: translateY(1px) translateX(0); }
  83%          { transform: translateY(1px) translateX(3px); }
  90%          { transform: translateY(1px) translateX(0); }
}
/* Pfeil-Nudge NUR im Footer-CTA (Jans Vorgabe): dort ist es der finale
   Handlungsaufruf. Im Hero/Sticky-Formular bleibt der Pfeil ruhig. */
.cta .pill-button-icon {
  animation: ml-cta-arrow-nudge 4s ease-in-out 1.8s infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cta .pill-button-icon { animation: none; }
}
.pill-form--hero .pill button {
  height: 64px;
  padding: 0 34px;
}
.pill button:hover { background: var(--c-accent-hover); transform: translateY(-1px); }
.pill button:active { transform: translateY(0); }

.pill-form.is-submitting .pill button { cursor: default; }
.pill-form.is-submitting .pill button .pill-button-icon {
  display: none;
}
.pill-form.is-submitting .pill-button-spinner {
  display: block;
}
.pill button:disabled {
  cursor: default;
}

.pill-form-note {
  margin: 10px 4px 0;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: rgba(244, 239, 230, 0.66);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.pill-form-note-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: currentColor;
}

.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:empty {
  display: none;
}
.pill-form-status.is-error   { color: #ff8c8c; }
.pill-form--hero .pill-form-status:empty {
  display: none;
}
.pill-form-status.is-success {
  position: absolute;
  left: var(--bubble-left, 50%);
  top: var(--bubble-top, -64px);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: max-content;
  max-width: min(400px, calc(100vw - 28px));
  margin: 0;
  padding: 16px 18px 16px 20px;
  background: #ffffff;
  border: 1px solid rgba(26, 13, 7, 0.08);
  border-radius: 16px;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.20),
    0 10px 28px rgba(26, 13, 7, 0.11);
  color: #1a0d07;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: 0;
  text-align: left;
  min-height: auto;
  overflow: visible;
}
.pill-form-status.is-success::after {
  content: "";
  position: absolute;
  left: var(--bubble-arrow-left, 50%);
  top: calc(100% - 8px);
  z-index: 0;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-right: 1px solid rgba(26, 13, 7, 0.08);
  border-bottom: 1px solid rgba(26, 13, 7, 0.08);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.pill-form-status.is-success > span,
.pill-success-close {
  position: relative;
  z-index: 1;
}
.pill-success-close {
  appearance: none;
  border: 0;
  background: rgba(26, 13, 7, 0.06);
  color: #1a0d07;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.pill-success-close:hover {
  background: rgba(26, 13, 7, 0.10);
}
.starter-modal-card .pill-form-status {
  color: rgba(26, 13, 7, 0.55);
}
.starter-modal-card .pill-form-note,
.capabilities .cap-sticky .pill-form-note {
  color: rgba(26, 13, 7, 0.58);
}
/* CTA sitzt auf dunklem Hintergrund → Trust-Zeile hell, sonst unsichtbar */
.cta .pill-form-note { color: rgba(244, 239, 230, 0.72); }
.starter-modal-card .pill-form.is-success .pill-form-status {
  background: #ffffff;
  border-color: rgba(26, 13, 7, 0.08);
  color: #1a0d07;
}
.starter-modal-form .pill {
  flex-direction: column;
  align-items: stretch;
  border-radius: 24px;
  padding: 0;
  gap: 10px;
  background: transparent;
  box-shadow: none;        /* „komischer" Schatten hinterm Formular entfernt */
}
.starter-modal-form .pill-field,
.starter-modal-form .pill button {
  width: 100%;
  height: 52px;
}
.starter-modal-form .pill-field {
  flex: 0 0 52px;
  background: #f6f6f9;     /* dezentes Feld statt Schatten-Abgrenzung */
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* On tiny screens: tighter padding, slightly smaller height */
@media (max-width: 560px) {
  .pill { padding: 6px; }
  .pill-field { flex: 0 0 52px; height: 52px; padding: 0 14px; }
  .pill input  { height: 100%; font-size: 17px; }
  .pill button { padding: 0 20px; height: 52px; }
  .pill-form-note { font-size: 12.5px; }
  .pill-form--hero {
    margin-top: 34px;
  }
  .pill-form--hero .pill {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 8px;
    border-radius: 24px;
  }
  .pill-form--hero .pill-field,
  .pill-form--hero .pill button {
    width: 100%;
    height: 52px;
  }
}
@media (max-width: 680px) {
  .pill-form--compact .pill {
    flex-direction: column;
    align-items: stretch;
    border-radius: 24px;
    padding: 8px;
  }
  .pill-form--compact .pill-field,
  .pill-form--compact .pill button {
    width: 100%;
    height: 52px;
  }
  .pill-form--compact .pill-field {
    flex: 0 0 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: #ffffff;
  border-color: rgba(26, 13, 7, 0.08);
  color: #1a0d07;
}

/* =========== FOOTER — Logo mittig, Legal-Links unten =========== */
.footer {
  background: transparent;
  color: var(--c-ink);
  padding: clamp(20px, 4vw, 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(27px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
}
.footer-logo strong { font-weight: inherit; font-style: normal; }
.footer-logo-img {
  display: block;
  width: clamp(230px, 24vw, 340px);
  height: auto;
}
.footer-sub {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(244, 239, 230, 0.6);
  margin: 0;
  max-width: 48ch;
  line-height: 1.5;
}

.footer-legal {
  padding-top: 22px;
  /* Desktop: Copyright + Legal-Links in EINER Zeile (Mobile stapelt, s. ≤600px) */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 4px 14px;
  line-height: 1.2;
}
.footer-copyright {
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(244, 239, 230, 0.4);     /* dezenter — nicht so wichtig */
  letter-spacing: 0.01em;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}
.footer-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 5px;                          /* eng wie die Adress-Punkte */
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.2;
}
.footer-legal-links::before { display: none; }   /* eigene Zeile → kein Trenn-Bullet nötig */
.footer-legal-links a {
  color: rgba(244, 239, 230, 0.4);
  transition: color 0.15s ease;
}
.footer-legal-links a:hover { color: var(--c-ink); }
.footer-legal-links span { color: rgba(244, 239, 230, 0.4); }

@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 {
  margin: 0;
}
.int-title.display {
  /* serif rule: .display stays serif — matches user preference for landing pages */
  max-width: min(100%, 900px);
  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;
  transform-origin: 50% 50%;
}
.int-circle.int-circle--instagram { filter: none; }
.int-circle .brand-logo--badge { transform: scale(0.96); }
.int-circle .brand-logo--glyph { transform: scale(0.9); }
.int-circle .brand-logo--meta { transform: scale(0.96); }
.int-circle .brand-logo--ads { transform: scale(0.94); }
.int-circle .brand-logo--analytics { transform: scale(0.82); }
.int-circle .brand-logo--paypal { transform: scale(1.06); }
.int-circle .brand-logo--wordmark { transform: scale(1.12); }
.int-circle .brand-logo--shopify { transform: scale(0.86); }
.int-circle .brand-logo--card { transform: scale(1.06); }
.int-circle .brand-logo--mastercard { transform: scale(1.22); }
.int-circle .brand-logo--snapchat { transform: scale(0.78); }
.int-circle .brand-logo--instagram { transform: scale(0.9); }
.int-circle .brand-logo--tiktok { transform: scale(0.94); }
.int-circle .brand-logo--slack { transform: scale(0.9); }
.int-circle .brand-logo--monday { transform: scale(0.98); }
.int-circle .brand-logo--apple-pay { transform: scale(1.18); }
.int-circle .brand-logo--chatgpt { transform: scale(1.12); }
.int-circle .brand-logo--claude { transform: scale(0.98); }
.int-circle .brand-logo--messenger { transform: scale(0.92); }
.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;
  /* Corporate-Typo: line-height/tracking kommen aus der .display-Basis (1.05 / −0.025em) */
  line-height: 1.05;
  letter-spacing: -0.025em;
  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: 300;
  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;
}

/* =====================================================
   SUB-TEXTS — direkt unter Headlines
   Min 19px, Desktop bis 22px, 10px Abstand, line-height 1.5.
   Feature-Card-Bodies (.cap-body) bleiben separat bei 18px.
   ===================================================== */
.hero-sub,
.cta-sub,
.int-sub,
.approach-lead,
.starter-modal-lead,
.tc-sub {
  margin-top: 10px;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.35;
  max-width: 600px;
}
/* Approach-Intro: minimal breiter, damit auf Desktop kein einzelnes Wort
   („sein.") allein in die letzte Zeile fällt — bei 760px bricht der Text in
   3 Zeilen mit vollwertiger Schlusszeile. */
.approach-lead { max-width: 760px; }
/* Headlines: 10px Bottom-Abstand sicherstellen (falls Sub-Text margin verhindert) */
.hero .display,
.cta .display,
.integrations .int-title,
.starter-modal-title {
  margin-bottom: 10px;
}

/* Standard-Textgroessen fuer groessere Content-Bloecke. Feature-Card-Bodies bleiben separat bei 18px. */
.faq-inner p,
.faq-answer,
.starter-modal-list li {
  font-size: 19px;
  line-height: 1.55;
}
@media screen and (max-width: 991px) {
  .testimonials-conicorn .tc-default {
    padding: 2.5rem;
  }
  .testimonials-conicorn .tc-default-text {
    font-size: 24px;
    line-height: 1.25;
  }
}
/* Mobile override for faq: keep readable */
@media (max-width: 600px) {
  .faq-inner p, .faq-answer { font-size: 17px; }
}

/* =====================================================
   MOBILE-OPTIMIERUNG (Batch 1) — Hero-Top, Statement, Modal, Form→Button, Footer
   ===================================================== */
/* Mobile-CTA-Button (öffnet das Starter-Modal) — auf Desktop versteckt */
.mobile-cta-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Kompakter auf Mobile (Jans Vorgabe): Breite nach Inhalt statt 100%, flacheres
     Padding, leicht asymmetrisch (rechts weniger) → der Pfeil sitzt optisch mittig. */
  width: auto;
  max-width: 440px;
  margin: 10px auto 0;
  padding: 8px 26px 8px 32px;
  /* Breite = Inhalt + Padding, IMMER einzeilig (kein Umbruch bei breiteren
     Font-Fallbacks oder schmalen Geräten). */
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  /* Kräftiger, dunkler Schlagschatten (Jans Werte) → der Button hebt sich deutlich
     vom darunterliegenden Hero-Dashboard ab. */
  box-shadow: 0 54px 116px 30px rgb(2 11 29 / 93%);
  transition: background 0.2s ease, transform 0.15s ease;
}
.mobile-cta-btn:hover { background: var(--c-accent-hover); }
.mobile-cta-btn:active { transform: translateY(1px); }
.mobile-cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Trust-Zeile unter Buttons: dezent, zentriert, hell (Buttons sitzen auf dunklem BG). */
.button-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 9px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.2;
  color: rgba(244, 239, 230, 0.62);
}
.button-trust-note .pill-form-note-icon { width: 15px; height: 15px; flex-shrink: 0; }
/* mobile-cta-trust gehört zum Mobile-Button → auf Desktop verstecken, sonst doppelt
   über dem Formular (das Formular hat bereits seine eigene Trust-Note). */
.mobile-cta-trust { display: none; }

@media (max-width: 600px) {
  /* Headline +20% (alle .display gleich, skaliert mit Bildschirmbreite) */
  /* Section-Headlines kleiner (~Größe der „All-in-One System"-Headline), nicht H1-groß */
  .display { font-size: clamp(38px, 11vw, 46px); }
  /* Nur die Hero-H1 bleibt groß */
  /* Mobile-H1 in Popup-Typo (Jans Vorgabe): ~31px @375 wie der Modal-Titel */
  .hero .display { font-size: clamp(28px, 8.3vw, 40px); }

  /* Abstand Logo → Bullets auf Mobile ~40% kleiner (Section-Standard 140px → 88px) */
  .hero { padding-top: 88px; }

  /* Proof-Bullets (Avatare) -30% */
  .hero-avatars img { width: 42px; height: 42px; margin-left: -12px; }

  /* Statement -10% */
  .statement-text,
  .founder blockquote { font-size: clamp(25px, 8vw, 38px); }

  /* Mobile: Hero + Sticky-CTA als Button; Footer-CTA bleibt direktes Formular. */
  .pill-form--hero,
  .capabilities .cap-sticky-form { display: none !important; }
  .mobile-cta-btn {
    display: flex !important;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    /* Wie auf Desktop (.pill-form--hero): über dem Dashboard liegen, damit der
       Button-Schatten sichtbar darauf fällt. */
    position: relative;
    z-index: 3;
  }
  /* Dashboard näher an den Button heranrücken (10px) */
  .hero-dashboard { margin-top: 10px; }
  .mobile-cta-trust { display: flex; }            /* Trust-Zeile mit dem Mobile-Button zeigen */
  .cta .mobile-cta-btn { display: none !important; }
  .cta .mobile-cta-trust { display: none; }       /* CTA zeigt auf Mobile das Formular (eigene Note) */
  .cta .pill-form--compact { display: flex !important; }
  /* Footer-CTA: Trust-Zeile unter Formular, Testimonial-Bullet darunter. */
  .cta .hero-proof {
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
  }
  .cta .hero-avatars img {
    width: 55px;
    height: 55px;
    margin-left: -15px;
  }
  .cta .hero-avatars img:first-child {
    margin-left: 0;
  }
  .cta .hero-proof-text {
    flex: 0 0 auto;
    max-width: 30ch;
    font-size: 14.5px;
    line-height: 1.35;
    text-align: center;
  }
  .capabilities .cap-sticky .cap-sticky-mobile-btn {
    margin-top: 24px;
  }

  /* Starter-Modal: NICHT Vollbild — mittig & kompakter, auf Mobile deutlich flacher */
  .starter-modal { padding: 18px; }
  .starter-modal-card {
    max-width: 400px;
    padding: 18px 22px 20px;          /* weniger Top-Padding → App-Icon rückt hoch, auf Höhe des Schließen-X */
    border-radius: 26px;
    max-height: 86vh;
  }
  .starter-modal-card .cta-app-icon { width: 50px; height: 50px; margin: 0 auto 20px; }  /* Icon oben, Headline 20px darunter */
  .starter-modal-card .cta-app-star { width: 36px; height: 36px; }
  .starter-modal-title { font-size: 27px; max-width: 100%; }        /* -2px, so breit wie das Formular */
  .starter-modal-lead { font-size: 13.5px; max-width: 100%; margin-bottom: 6px; }  /* Lead = Formularbreite + näher dran */
  .starter-modal-form { margin-top: 8px; }                          /* Formular näher an den Lead */
  .starter-modal-form .pill-field,
  .starter-modal-form .pill button { height: 46px; }                /* Felder etwas flacher */
  .starter-modal-form .pill-field { flex-basis: 46px; }
  .starter-modal-card .pill-form-note { margin-top: 5px; }          /* „100 % Klarheit" 5px an den Button */

  /* Footer-Legal: Links gleiche Größe wie Copyright, zentriert eingereiht, kein Border */
  .footer-legal { flex-direction: column; gap: 3px; align-items: center; text-align: center; }
  .footer-legal-links { font-size: 12px; flex-wrap: wrap; justify-content: center; }
}
/* Sehr schmale Geräte (< 340px): Button bleibt einzeilig, muss aber in den
   Viewport passen → Schrift/Padding minimal reduzieren statt umbrechen. */
@media (max-width: 339px) {
  .mobile-cta-btn { font-size: 18px; padding: 8px 20px 8px 24px; }
}

/* Vergleich-Subheader: Wortmarke statt Text. Der Stern ragt oben aus dem Bild,
   daher liegt die Bild-Box-Mitte höher als der Textzug. Mit align-items:center wird
   die Box zentriert; translateY hebt das Bild zusätzlich, sodass die TEXT-Mitte (ohne
   Stern) exakt auf der Zeile von "Alte Methoden" & "vs." liegt. (Mobile: em=0 → kein Shift.) */
.approach-sub-logo {
  height: 1.9em;
  width: auto;
  vertical-align: middle;
  transform: translateY(-0.39em);
}

/* =====================================================
   MOBILE-OPTIMIERUNG (Batch 2) — Vergleich, Testimonials, Integrations, System, Founder
   ===================================================== */

/* Vergleich: Headers sitzen auf Mobile in den Cards, kein separates Logo darüber */
@media (max-width: 880px) {
  .approach .approach-sub {
    display: none;
  }
}

@media (max-width: 600px) {
  /* ---- Global: kein horizontaler Seiten-Scroll (Marquees/Carousel bluten sonst aus) ---- */
  html, body { overflow-x: clip; }

  /* ---- Vergleich: Checklist-Punkte enger ---- */
  .vs-col { gap: 8px; }
  .vs-pill { margin: 0; }

  /* ---- Vergleich: Karten fast randlos (nur 5px neben den Karten) ---- */
  /* Full-Bleed unabhängig vom Section-Padding: Grid = Viewport − 10px, mittig.
     left:50% + translateX(-50%) zentriert exakt auf die Viewport-Mitte. */
  .vs-grid {
    max-width: none;
    width: calc(100vw - 10px);
    margin: 0;
    padding: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  /* Alte-Methoden-Karte: 90% Breite der weißen Karte, horizontal zentriert */
  .vs-col--old {
    width: 90%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Testimonials: Boxen kompakter, Typo responsiv, kein Wort-Overflow ---- */
  .testimonials-conicorn .tc-default { padding: 24px; row-gap: 14px; }
  .testimonials-conicorn .tc-default-text {
    font-size: 26.4px;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  .tc-card { width: 82vw; }
  .tc-default-name { font-size: 16px; }
  .tc-default-info { font-size: 13px; }

  /* ---- Integrations: Kreise +20%, Reihen enger, randlos bis zur Kante ---- */
  .int-row {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .int-row + .int-row { margin-top: 8px; }
  .int-circle { width: 86px; height: 86px; padding: 18px; }

  /* ---- System: Karten zentriert, kein Viewport-Überstand auf schmalen Screens ---- */
  .system-card--chaos {
    width: min(82%, 320px);
    min-height: 270px;
    padding: 30px 30px 28px;
  }
  .tool-grid {
    --tool-mobile-icon: clamp(23px, 7vw, 28px);
    grid-template-columns: repeat(6, var(--tool-mobile-icon));
    grid-auto-rows: var(--tool-mobile-icon);
    row-gap: 7px;
  }
  .tool-icon {
    width: var(--tool-mobile-icon);
    height: var(--tool-mobile-icon);
    padding: clamp(4px, 1.55vw, 6px);
  }
  .tool-mark--skool { font-size: clamp(7.2px, 2.45vw, 8.5px); }
  .tool-mark--teachable { font-size: clamp(12px, 3.8vw, 14px); }
  .system-card--all {
    /* Mobile-Indent-Maße zentral (Liste + Toggle teilen sie) */
    --system-check-size: 20px;
    --system-check-gap: 7px;
    --system-list-pad: 0px;
    padding: 58px 5px 38px;
  }
  .system-all-title {
    font-size: clamp(48px, 15vw, 62px);
    margin-bottom: 24px;
  }
  /* Checkliste auf Mobile: max. 80% der Karte, zentriert.
     Reicht der Platz nicht, brechen Einträge 2-zeilig um (line-height 1.1em).
     Toggle-Row teilt EXAKT dieselbe Breite/Zentrierung → gleiche linke Kante. */
  .system-card--all .system-features,
  .system-card--all .system-features-extra,
  .system-card--all .system-features-toggle-row {
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .system-features {
    gap: 4px;
  }
  .system-features li {
    font-size: clamp(15.2px, 4.35vw, 16.4px);
    line-height: 1.1em;
    column-gap: var(--system-check-gap);
  }
  .system-features li svg.icon {
    flex-basis: var(--system-check-size);
    width: var(--system-check-size);
    height: var(--system-check-size);
    padding: 5.5px;
    font-size: 9px;
  }
  .system-features-more,
  .system-features-toggle {
    font-size: clamp(15.2px, 4.35vw, 16.4px) !important;
  }
  /* padding-left kommt aus dem calc() (list-pad + check-size + check-gap) → bleibt synchron */
  .system-cta {
    font-size: 16px;
    gap: 9px;
    padding: 13px 20px;
  }

  /* ---- Founder: Bild halbiert zentriert, Logos -40%, Proof enger.
     (Titel-Größe an Corporate-Typo angeglichen — vorher „+40%" clamp(48,16vw,64) = zu laut) ---- */
  .founder-build-title { font-size: clamp(36px, 11vw, 46px); }
  .founder-build-photo {
    justify-self: center;
    width: var(--founder-mobile-photo-size);
    height: var(--founder-mobile-photo-size);
    margin-left: auto;
    margin-right: auto;
  }
  .founder-build-logo--ntv { height: 35px; width: 57px; }
  .founder-build-logo--zdf { height: 29px; width: 50px; }
  .founder-build-logo--vox { height: 20px; width: 62px; }
  .founder-build-logos { gap: 22px; }
  /* Medien-Logos ca. 40px unter dem Founder-Block (vorher ~121px = zu weit weg).
     Der Layout-Gap steuert bereits 30px bei → 10px Margin ergibt die gewünschten 40px. */
  .founder-build-proof { gap: 6px; margin-top: 10px; }
  .founder-build-reference { font-size: 13px; margin-top: 7px; }
}

/* =====================================================
   Referenzen Mobile — LeaderLogic-native scroll behavior
   ===================================================== */
@media (max-width: 768px) {
  .testimonials-conicorn {
    overflow: hidden;
  }
  .testimonials-conicorn .tc-layout {
    position: relative;
    row-gap: 2.25rem;
    padding-top: 5rem;
    padding-bottom: 4.75rem;
  }
  .testimonials-conicorn .tc-main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: auto;
    scrollbar-width: none;
    gap: 16px;
    padding: 34px var(--pad) 16px;
    cursor: default;
  }
  .testimonials-conicorn .tc-main::-webkit-scrollbar {
    display: none;
  }
  .testimonials-conicorn .tc-col {
    display: contents;
  }
  .testimonials-conicorn .tc-card {
    flex: 0 0 auto;
    width: min(80vw, 360px);
    max-width: 360px;
    min-height: 0;
    scroll-snap-align: none;
    border-radius: 26px;
  }
  .testimonials-conicorn .tc-default {
    padding: 30px 22px 28px;
    row-gap: 1rem;
  }
  .testimonials-conicorn .tc-default-text {
    font-size: 22.8px;
    line-height: 1.28;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  .testimonials-conicorn .tc-default-avatar {
    width: 4.8rem;
    height: 4.8rem;
    font-size: 1.5rem;
  }
  .testimonials-conicorn .tc-card--photo {
    aspect-ratio: 4.4 / 5.5;
  }
  .testimonials-conicorn .tc-card--photo .tc-video {
    min-height: 0;
    height: 100%;
    padding: 30px 24px;
  }
  .testimonials-conicorn .tc-card--photo .tc-video-title {
    font-size: clamp(22px, 6.4vw, 32px);
    line-height: 1.1;
  }
  .testimonials-conicorn .tc-nav {
    position: absolute;
    top: clamp(250px, 54vw, 320px);
    left: 10px;                       /* links statt rechts → keine Überlagerung mit dem Burger-Menü */
    z-index: 5;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    padding: 0;
    margin: 0;
    pointer-events: auto;
  }
  .testimonials-conicorn .tc-nav-btn {
    width: 56px;
    height: 56px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #f4efe6;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .testimonials-conicorn .tc-nav-btn svg {
    width: 34px;
    height: 34px;
  }
  .testimonials-conicorn .tc-nav-btn--prev {
    display: none;
  }
}

/* =====================================================
   Integrationen Mobile — kleinere Logos + softer Edge-Dim
   ===================================================== */
@media (max-width: 600px) {
  .integrations .int-row {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .integrations .int-row::before,
  .integrations .int-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
  }
  .integrations .int-row::before {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 1, 5, 0.52), rgba(0, 1, 5, 0));
  }
  .integrations .int-row::after {
    right: 0;
    background: linear-gradient(270deg, rgba(0, 1, 5, 0.52), rgba(0, 1, 5, 0));
  }
  .integrations .int-circle {
    width: 60px;
    height: 60px;
    padding: 13px;
  }
  .integrations .int-strip {
    gap: 14px;
    padding-right: 14px;
  }
}

/* =====================================================
   Mobile Header Fine-Tuning — Logo/Burger Kollisionsschutz
   ===================================================== */
@media (max-width: 1050px) {
  .ll-logo-abs {
    top: 22px;
    width: clamp(182px, 60vw, 228px);
    height: auto;
  }
  .ll-logo-img {
    width: 100%;
    max-height: none;
  }
  .m-burger {
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
  }
  .m-burger-bars {
    width: 17px;
    height: 12px;
  }
  .m-burger-bars span:nth-child(2) { top: 5px; }
  .m-burger-bars span:nth-child(3) { top: 10px; }
}

@media (max-width: 600px) {
  .ll-logo-abs {
    top: 16px;                          /* Logo etwas höher */
    width: clamp(176px, 50vw, 196px);   /* …und etwas kleiner */
  }
  .m-burger {
    top: 30px;                          /* exakt auf Höhe des „MarketLeaders"-Schriftzugs (ohne Stern) */
    right: 20px;
    width: 36px;                        /* etwas kleiner */
    height: 36px;
    opacity: 0.6;                       /* dezenter, nicht so weiß */
  }
  .m-burger-bars {
    width: 16px;
    height: 12px;
  }
  .hero-copy > .hero-proof {
    transform: none;
    margin-bottom: 20px;
  }
}

@media (max-width: 340px) {
  .ll-logo-abs {
    width: clamp(176px, 55vw, 182px);
  }
  .m-burger {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
  }
  .hero-copy > .hero-proof {
    transform: none;
    margin-bottom: 20px;
  }
}

@media (max-width: 600px) {
  .founder-build-logo--ntv {
    height: 49px;
    width: 72px;
  }
  .founder-build-logos {
    gap: 26px;
  }
  .founder-build-logo--zdf {
    height: 43px;
    width: 64px;
  }
  .founder-build-logo--vox {
    height: 24px;
    width: 68px;
  }
}

/* =====================================================
   Feature Cards — kompakteres Padding + robuste Headlines
   ===================================================== */
.capabilities .cap-card {
  border-radius: clamp(48px, 6vw, 74px);
}
.capabilities .cap-text {
  padding: clamp(48px, 5.2vw, 58px) clamp(38px, 5.4vw, 56px) 4px;
}
.capabilities .cap-headline {
  max-width: 100%;
  font-size: clamp(35px, 4.6vw, 50px);
  line-height: 1.05;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
}
.capabilities .cap-visual {
  padding: clamp(16px, 2vw, 20px);
}
.capabilities .cap-card--wide .cap-visual {
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 26px);
}
.capabilities .chart {
  border-radius: clamp(52px, 5.5vw, 74px);
  padding: clamp(46px, 4.6vw, 54px) clamp(38px, 4.8vw, 50px);
}
.capabilities .chart--automation {
  padding: clamp(40px, 4.4vw, 56px) clamp(20px, 4vw, 46px);
}
.capabilities .chart--ai-support {
  padding: clamp(38px, 4.2vw, 52px) clamp(22px, 4vw, 44px);
}
.capabilities .cap-cards > .cap-card:first-child .chart {
  /* weniger Padding → Lead-Pipeline-Diagramm nutzt den Platz links/rechts deutlich mehr */
  padding: clamp(26px, 3vw, 36px) clamp(14px, 1.8vw, 22px);
}

@media (max-width: 880px) {
  .capabilities .cap-card {
    border-radius: clamp(42px, 10vw, 64px);
  }
  .capabilities .cap-text {
    padding: clamp(36px, 8vw, 44px) clamp(24px, 6vw, 34px) 2px;
  }
  .capabilities .cap-headline {
    font-size: clamp(32px, 8.8vw, 44px);
    line-height: 1.04;
  }
  .capabilities .cap-visual,
  .capabilities .cap-card--wide .cap-visual {
    padding: clamp(12px, 3.6vw, 16px);
  }
  .capabilities .chart {
    border-radius: clamp(32px, 9vw, 58px);
    padding: clamp(34px, 8vw, 46px) clamp(22px, 6vw, 34px);
  }
  .capabilities .chart--automation {
    padding: clamp(30px, 7vw, 42px) clamp(16px, 5.5vw, 28px);
  }
  .capabilities .chart--ai-support {
    padding: clamp(30px, 8vw, 42px) clamp(16px, 5.8vw, 30px);
  }
  /* Leadflow bleibt auf Tablet/Mobile maximal so gross wie auf Desktop. */
  .capabilities .cap-cards > .cap-card:first-child .cap-visual {
    padding-left: clamp(12px, 3.6vw, 16px);
    padding-right: clamp(12px, 3.6vw, 16px);
  }
  .capabilities .cap-cards > .cap-card:first-child .chart {
    padding-left: clamp(22px, 6vw, 34px);
    padding-right: clamp(22px, 6vw, 34px);
  }
  .capabilities .cap-cards > .cap-card:first-child .leadflow {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .capabilities .cap-cards > .cap-card:first-child .chart { overflow: hidden; }
}

@media (max-width: 600px) {
  .capabilities .cap-cards > .cap-card:first-child .chart {
    padding-left: clamp(8px, 2.6vw, 12px);
    padding-right: clamp(8px, 2.6vw, 12px);
  }
  .capabilities .cap-cards > .cap-card:first-child .leadflow {
    --leadflow-mobile-bleed: clamp(76px, 24vw, 94px);
    width: calc(100% + var(--leadflow-mobile-bleed));
    max-width: none;
    margin-left: calc(var(--leadflow-mobile-bleed) / -2);
    margin-right: calc(var(--leadflow-mobile-bleed) / -2);
  }
}

@media (max-width: 380px) {
  .capabilities .cap-text {
    padding-inline: 22px;
  }
  .capabilities .cap-headline {
    font-size: clamp(30px, 8.8vw, 34px);
  }
}

/* =====================================================
   Starter Modal — dark oiled-glass finish
   ===================================================== */
.starter-modal-backdrop {
  background:
    radial-gradient(760px 520px at 50% 35%, rgba(79, 70, 229, 0.24), rgba(3, 5, 18, 0) 66%),
    linear-gradient(135deg, rgba(0, 1, 5, 0.72), rgba(8, 10, 30, 0.86));
  backdrop-filter: blur(26px) saturate(1.22);
  -webkit-backdrop-filter: blur(26px) saturate(1.22);
}
.starter-modal-card {
  isolation: isolate;
  max-width: 590px;
  background: #ffffff;                     /* weißer Hintergrund */
  border: 1px solid rgba(26, 13, 7, 0.08);
  border-radius: 34px;
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.45),
    0 0 90px rgba(79, 70, 229, 0.10);
  color: #1a0d07;
}
.starter-modal-card::before {
  content: none;                           /* Glas-Licht-Overlay auf Weiß nicht nötig */
}
.starter-modal-close {
  border-color: rgba(26, 13, 7, 0.10);
  background: rgba(26, 13, 7, 0.04);
  color: #1a0d07;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.starter-modal-close:hover {
  background: rgba(26, 13, 7, 0.09);
}
.starter-modal-kicker {
  color: rgba(26, 13, 7, 0.55);
}
.starter-modal-title {
  /* 3-Zeilen-Regie (wie Hero-H1): kein em-Cap mehr (schrumpfte mit der Schrift und
     erzwang bei JEDER Größe einen Umbruch in Zeile 1); 40px = „Dein Vertrieb &
     Marketing." bleibt in der 590px-Karte einzeilig (44px bricht). */
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  color: #1a0d07;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.starter-modal-lead {
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  color: rgba(26, 13, 7, 0.62);
  font-size: clamp(15.5px, 1.45vw, 18px);
  font-weight: 300;
  line-height: 1.38;
  text-wrap: balance;
}
.starter-modal-form {
  margin-top: 22px;
}
.starter-modal-form .pill-field {
  background: rgba(26, 13, 7, 0.045);
  border-color: rgba(26, 13, 7, 0.10);
  color: rgba(26, 13, 7, 0.60);
}
.starter-modal-form .pill-field:focus-within {
  background: rgba(26, 13, 7, 0.07);
  border-color: rgba(26, 13, 7, 0.20);
  color: rgba(26, 13, 7, 0.85);
}
.starter-modal-form .pill-field-icon,
.starter-modal-form .pill-field--email .pill-field-icon {
  color: rgba(26, 13, 7, 0.40);
}
.starter-modal-form .pill input {
  color: #1a0d07;
}
.starter-modal-form .pill input::placeholder {
  color: rgba(26, 13, 7, 0.42);
}
.starter-modal-form .pill button {
  box-shadow: 0 16px 36px rgba(79, 70, 229, 0.30);
}
.starter-modal-card .pill-form-note {
  color: rgba(26, 13, 7, 0.60);
}
.starter-modal-card .pill-form-status {
  color: rgba(26, 13, 7, 0.70);
}
.starter-modal-card .pill-form-status.is-error {
  color: #ff9a9a;
}
.starter-modal-card .pill-form.is-success .pill-form-status {
  background: #ffffff;
  border-color: rgba(26, 13, 7, 0.08);
  color: #1a0d07;
}

@media (max-width: 600px) {
  .starter-modal-card {
    border-radius: 28px;
  }
  /* Mobile-Höhe möglichst kompakt: Icon kleiner, Abstände enger */
  .starter-modal .cta-app-icon { width: 58px; height: 58px; margin-bottom: 12px; }
  .starter-modal-title {
    max-width: 10.6em;
    font-size: clamp(31px, 8.3vw, 38px);
    line-height: 1.03;
    margin-bottom: 8px;
  }
  .starter-modal-lead {
    font-size: 14.5px;
    line-height: 1.34;
    margin-bottom: 12px;
  }
  .starter-modal-form { margin-top: 12px; }
}

/* Vergleich — MarketLeaders-Wortmarke (−20% ggü. vorher) */
@media (max-width: 880px) {
  .vs-col--new::before {
    width: min(288px, 74%);
    height: 74px;
    margin-bottom: 18px;
  }
}

@media (max-width: 480px) {
  .vs-col--new::before {
    width: min(256px, 75%);
    height: 62px;
  }
}

/* Automation feature card — calmer 4-column flow */
.capabilities .chart--automation {
  max-width: 840px;
}
.capabilities .autoflow {
  width: min(100%, 800px);
  gap: clamp(30px, 3.5vw, 40px);
}
.capabilities .autoflow-task {
  background: #ffffff;
  border: 1px solid rgba(18, 20, 28, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -12px 22px rgba(23, 24, 30, 0.035),
    0 14px 32px rgba(17, 19, 28, 0.10);
}
.capabilities .autoflow-link {
  /* niedrige min-width: flex-grow füllt den Platz, aber zwingt die Reihe nie über die
     gedeckelte Karte (600px) hinaus → Icons bleiben auf Tablet innerhalb der Karte. */
  min-width: clamp(16px, 3.5vw, 44px);
}
.capabilities .autoflow-stream {
  height: 6px;
  background-image: radial-gradient(circle, var(--c-accent) 0 1.55px, transparent 1.9px);
  background-size: 10px 6px;
  --flow-shift: 20px;        /* 2× Punkt-Periode (10px) → ruckelfreier Loop */
}
.capabilities .autoflow-link.is-active .autoflow-stream {
  opacity: 0.78;
  animation-duration: 1.7s;
}

@media (max-width: 600px) {
  .capabilities .autoflow {
    gap: 22px;
  }
  .capabilities .autoflow-link {
    min-width: clamp(18px, 5.6vw, 38px);
  }
  .capabilities .autoflow-stream {
    height: 5px;
    background-image: radial-gradient(circle, var(--c-accent) 0 1.35px, transparent 1.7px);
    background-size: 9px 5px;
    --flow-shift: 18px;       /* 2× Punkt-Periode (9px) → ruckelfreier Loop */
  }
}

/* AI Automation feature card — dashboard-matched donut + count-up callout */
.capabilities .chart--ai-support {
  --ai-support-blue: var(--dash-blue);
  --ai-support-blue-deep: var(--dash-blue-deep);
  --ai-support-blue-mid: var(--dash-blue-mid);
}
.capabilities .ai-support-kpi {
  grid-template-columns: auto minmax(132px, 0.72fr);
  gap: clamp(16px, 2vw, 24px);
  width: min(100%, 520px);
}
.capabilities .ai-support-donut {
  width: clamp(220px, 21vw, 254px);
  filter: drop-shadow(0 20px 34px rgba(7, 0, 63, 0.12));
}
/* Grauer Rest-Bogen → weiß (blendet in die weiße Fläche, reine blaue Progress-Ring-Optik) */
.capabilities .ai-support-donut-ring--rest { stroke: #ffffff; }
.capabilities .chart--ai-support .donut-center-num {
  color: var(--ai-support-blue);
  font-size: clamp(54px, 13vw, 64px);     /* „82" deutlich größer */
  font-weight: 400;
}
.capabilities .chart--ai-support .donut-center-num span {
  color: var(--ai-support-blue);
  opacity: 0.62;
}
.capabilities .ai-support-bubble {
  min-width: 0;
  width: fit-content;                 /* nur so breit wie der Inhalt + Padding */
  padding: 21px 23px 20px;            /* +5px Padding */
  border: 0;
  /* Dunkelblau, aber LINKS hell → RECHTS dunkel (inkl. Dreieck, siehe ::before) */
  background: linear-gradient(90deg, #423982 0%, var(--dash-blue) 55%, var(--dash-blue-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 20px 44px rgba(7, 0, 63, 0.34);
  color: #fff;
  text-shadow: 0 1px 10px rgba(5, 0, 42, 0.30);
  justify-items: center;              /* Text zentriert */
  text-align: center;
}
/* (Dreieck-Definitionen siehe min-width:601 Desktop-Block + max-width:600 Mobile-Block) */
.capabilities .ai-support-bubble strong {
  color: #fff;
  font-size: clamp(44px, 3.2vw, 52px);
  text-shadow: none;
}
.capabilities .ai-support-bubble strong span,
.capabilities .ai-support-bubble small {
  color: rgba(255, 255, 255, 0.72);
}
.capabilities .ai-support-bubble .ai-support-count {
  color: #fff;
  font-size: 1em;
  letter-spacing: inherit;
  line-height: inherit;
  margin-left: 0;
  /* Zahl darf die Bubble beim Hochzählen NICHT breiter/schmaler machen:
     tabular-nums = alle Ziffern gleich breit, min-width reserviert Platz für die
     maximale Stelligkeit (3 Ziffern, „122"), rechtsbündig für ruhigen Lauf. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}
.capabilities .ai-support-bubble small {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.12;
}
/* Ring wird per JS in EINER durchgehenden rAF-Bewegung gezeichnet (blau → nahtlos weiß,
   kein Versatz/keine Pause). CSS hält die Ringe nur initial versteckt. */
.capabilities .ai-support-donut-ring {
  stroke-dasharray: 0 295.31;
}
.capabilities .ai-support-kpi.is-active .donut-center {
  animation: ai-support-pop 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* 122h-Bubble: erst versteckt, ploppt per .is-popped (JS, nach dem 82%-Counter)
   mit leichtem Overshoot rein — KEIN Hochzählen. */
.capabilities .ai-support-kpi.is-active .ai-support-bubble {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: left bottom;
}
.capabilities .ai-support-kpi.is-active .ai-support-bubble.is-popped {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.28s ease;
}

@keyframes ai-support-donut-main {
  from { stroke-dasharray: 0 295.31; }
  to { stroke-dasharray: 242.2 295.31; }
}
@keyframes ai-support-donut-rest {
  from { stroke-dasharray: 0 295.31; }
  to { stroke-dasharray: 53.16 295.31; }
}
@keyframes ai-support-pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 880px) {
  .capabilities .ai-support-kpi {
    width: min(100%, 500px);
  }
  .capabilities .ai-support-donut {
    width: clamp(178px, 45vw, 218px);
  }
}

@media (max-width: 600px) {
  .capabilities .ai-support-kpi {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .capabilities .ai-support-donut {
    justify-self: center;
    width: clamp(176px, 58vw, 204px);
  }
  .capabilities .ai-support-bubble {
    justify-self: center;
    min-width: 0;
    width: min(190px, 72vw);
    padding: 11px 14px 12px;
    border-radius: 20px;
    gap: 4px;
    text-align: center;
  }
  .capabilities .ai-support-bubble::before {
    left: 50%;
    top: -9px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 10px solid var(--ai-support-blue-deep);
    border-top: 0;
    background: none;
    transform: translateX(-50%);
    border-radius: 0;
  }
  .capabilities .ai-support-bubble strong {
    font-size: clamp(32px, 10vw, 40px);
  }
  .capabilities .ai-support-bubble small {
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capabilities .ai-support-kpi.is-active .ai-support-donut-ring,
  .capabilities .ai-support-kpi.is-active .donut-center,
  .capabilities .ai-support-kpi.is-active .ai-support-bubble {
    animation: none !important;
  }
}

/* ============================================================
   POST-DEPLOY LOCAL OVERRIDES — 2026-06-28
   ============================================================ */

/* AI Automation: hidden until viewport entry, smoother rebuild sequence */
.capabilities .ai-support-donut {
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.34s ease,
    transform 0.5s cubic-bezier(0.16, 0.88, 0.18, 1);
}
.capabilities .ai-support-kpi.is-active .ai-support-donut {
  opacity: 1;
  transform: scale(1);
}
.capabilities .ai-support-donut-ring {
  stroke-dasharray: 0 295.31;
}
.capabilities .chart--ai-support .donut-center {
  opacity: 0;
  transform: scale(0.94);
}
.capabilities .chart--ai-support .donut-center-num {
  font-size: clamp(58px, 5.7vw, 73px);    /* 82% — nochmal ~10% kleiner */
  font-weight: 300;                        /* dünner */
  letter-spacing: -0.08em;
  line-height: 0.88;
}
.capabilities .chart--ai-support .donut-center-num span {
  font-size: 0.36em;
  font-weight: 300;
  margin-left: 1px;
}
.capabilities .chart--ai-support .donut-center-num .donut-center-val {
  font-size: 1em;
  opacity: 1;
  margin-left: 0;
}
.capabilities .chart--ai-support .donut-center-tag {
  margin-top: 2px;
  font-size: 17.5px;                        /* KI-Quote — 3px größer */
}
.capabilities .ai-support-bubble,
.capabilities .ai-support-kpi.is-active .ai-support-bubble {
  opacity: 0;
  transform: scale(0.64);
  transform-origin: left center;
}
/* DESKTOP (>600px): Bubble sitzt rechts vom Donut → echtes Dreieck mit Spitze nach LINKS.
   Nur min-width:601 — sonst würde es ins Mobile leaken und die Up-Triangle zerstören. */
@media (min-width: 601px) {
  .capabilities .ai-support-bubble::before {
    left: -12px;
    top: 50%;
    width: 0;
    height: 0;
    border: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 13px solid var(--dash-blue-mid);
    border-left: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(-50%);
  }
}
/* Ring-Animation: siehe verketteten Block oben (main linear → rest soft ease-out).
   Der frühere „beide Ringe gleichzeitig"-Block ist entfernt — er erzeugte eine Lücke
   zwischen blauem Bogen-Front und weißem Segment (die „Zäsur"). */
.capabilities .ai-support-kpi.is-active:not(.is-counting) .donut-center {
  animation: none !important;
  opacity: 0;
  transform: scale(0.94);
}
.capabilities .ai-support-kpi.is-counting .donut-center {
  animation: ai-support-pop 0.7s cubic-bezier(0.18, 0.86, 0.2, 1) both;
}
.capabilities .ai-support-bubble.is-popped,
.capabilities .ai-support-kpi.is-active .ai-support-bubble.is-popped {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.58s cubic-bezier(0.18, 1.34, 0.28, 1),
    opacity 0.24s ease;
}

@keyframes ai-support-donut-main {
  0% { stroke-dasharray: 0 295.31; }
  82% { stroke-dasharray: 242.2 295.31; }
  100% { stroke-dasharray: 242.2 295.31; }
}
@keyframes ai-support-donut-rest {
  0%, 82% { stroke-dasharray: 0 295.31; }
  100% { stroke-dasharray: 53.16 295.31; }
}

/* AI Automation: calm progress-only reveal */
.capabilities .chart--ai-support {
  --ai-support-track: #ffffff;          /* helle Fläche des Donuts weiß */
}

/* ===== Konus-Verlauf-Bogen (AI-Automation-Donut) — folgt echt dem Kreis =====
   Ein linearer SVG-Verlauf ergibt über ~volle Kreise zwangsläufig hell→dunkel→hell.
   Deshalb: CSS-conic-gradient (0° = oben, im Uhrzeigersinn). Dunkel am Anfang (oben +
   Bubble-Höhe rechts) → am hellsten (bläulich-grau, nicht weiß) am Ende (82% ≈ 295°). */
.capabilities .chart--ai-support .ai-support-donut { position: relative; }
.capabilities .chart--ai-support .ai-support-donut-ring--main { display: none; }  /* durch Conic-Overlay ersetzt */
.capabilities .ai-arc-clip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* progressiver Reveal von oben bis --ai-arc (Fallback 295° = voll, falls kein JS) */
  -webkit-mask: conic-gradient(from 0deg, #000 0 var(--ai-arc, 295deg), transparent var(--ai-arc, 295deg) 360deg);
          mask: conic-gradient(from 0deg, #000 0 var(--ai-arc, 295deg), transparent var(--ai-arc, 295deg) 360deg);
}
.capabilities .ai-arc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #07003f 0deg,
    #1a1470 74deg,
    #33308f 150deg,
    #5a5fa8 226deg,
    #9aa0c2 295deg,
    transparent 295deg 360deg);
  /* Ringbreite passend zum SVG (r47, stroke18 in 120er Box → 63.3 %–93.3 % des Radius) */
  -webkit-mask: radial-gradient(farthest-side, transparent 0 63.3%, #000 64% 93.3%, transparent 94% 100%);
          mask: radial-gradient(farthest-side, transparent 0 63.3%, #000 64% 93.3%, transparent 94% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .capabilities .ai-arc-clip { --ai-arc: 295deg; }
}
.capabilities .ai-support-kpi {
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.capabilities .chart--ai-support .chart-donut > circle:first-of-type {
  stroke: var(--ai-support-track);
}
.capabilities .ai-support-donut-ring--rest {
  display: none;
}
.capabilities .ai-support-donut,
.capabilities .ai-support-kpi.is-active .ai-support-donut,
.capabilities .chart--ai-support .donut-center,
.capabilities .ai-support-kpi.is-active:not(.is-counting) .donut-center,
.capabilities .ai-support-kpi.is-counting .donut-center,
.capabilities .ai-support-bubble,
.capabilities .ai-support-kpi.is-active .ai-support-bubble,
.capabilities .ai-support-bubble.is-popped,
.capabilities .ai-support-kpi.is-active .ai-support-bubble.is-popped {
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none;
}
.capabilities .ai-support-bubble {
  justify-self: start;
}

@media (max-width: 600px) {
  .capabilities .ai-support-kpi {
    grid-template-columns: 1fr;
    width: min(100%, 500px);
  }
  .capabilities .ai-support-bubble {
    justify-self: center;
  }
}

/* Kundenzufriedenheit: Article-style review result with real half-star rendering */
.capabilities .chart--satisfaction .serp {
  background: #dedfe5;
  padding: 5px 5px 30px;      /* Browser-Panel unten 30px Padding */
}
.serp-stars {
  color: var(--c-accent);
  --star-fill: var(--c-accent);
  --star-empty: #d2d5df;
}
.serp-star-half { opacity: 1; }
.capabilities .chart--satisfaction .serp-rating-num {
  font-weight: 500;
  text-anchor: start;
  font-size: 30px;          /* zum kompakteren Popup */
  fill: #000;               /* 4,9 schwarz */
}
.capabilities .chart--satisfaction .serp-title {
  opacity: 0.86;
}
.capabilities .chart--satisfaction .serp-article-line {
  fill: #c4c7d0;
  opacity: 0.5;
}
.rating-star-half {
  --star-fill: var(--ch-positive);
  --star-empty: #d6d8df;
}
.capabilities .chart--satisfaction .chart-head {
  flex-direction: column;
  align-items: center;        /* Pill „+72 Reviews · 90 Tage" horizontal zentriert */
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
}
.capabilities .chart--satisfaction .chart-title,
.capabilities .chart--satisfaction .chart-pill {
  margin-inline: auto;
}
.capabilities .chart--satisfaction .chart-title {
  justify-content: center;
}
.capabilities .chart--satisfaction .chart-pill {
  width: fit-content;
  font-family: var(--sans);
  font-size: 13.2px;
  letter-spacing: 0;
}
.capabilities .chart-stat--satisfaction {
  justify-content: center;
  gap: 8px;
  text-align: center;
  margin-top: 0;
}
.capabilities .chart-stat--satisfaction .chart-stat-num {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.capabilities .chart-stat--satisfaction .chart-stat-num span {
  margin-left: 0;
}
.capabilities .chart--satisfaction .rating-stars {
  gap: 2px;
  color: var(--c-accent);
  --star-fill: var(--c-accent);
  --star-empty: #d6d8df;
}

/* Verkaufspsychologie: stripped chart header, centered 200% KPI */
.capabilities .chart--psychology .chart-stat--psychology {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  margin: 0 auto 8px;
}
.capabilities .chart--psychology .chart-stat-num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  color: var(--dash-blue);        /* 200% in Dashboard-Dunkelblau (#13095f) */
}
.capabilities .chart--psychology .psychology-count-value {
  min-width: 2.46ch;
  margin-left: 0;
  color: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: right;
}
.capabilities .chart--psychology .psychology-count-unit {
  margin-left: 3px;
}
.capabilities .chart--psychology .chart-stat-tag {
  margin: 0;
  text-align: center;
}
.capabilities .chart--psychology .psychology-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 18px rgba(79, 70, 229, 0.18));
}
.capabilities .chart--psychology.is-ready .psychology-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.capabilities .chart--psychology.is-active .psychology-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.64s cubic-bezier(0.12, 0.92, 0.14, 1);   /* 2× länger + stärker abgebremst */
}
.capabilities .chart--psychology.is-ready .psychology-area {
  opacity: 0;
}
.capabilities .chart--psychology.is-active .psychology-area {
  opacity: 1;
  transition: opacity 1.5s ease 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .capabilities .chart--psychology.is-ready .psychology-line {
    stroke-dashoffset: 0;
  }
  .capabilities .chart--psychology.is-active .psychology-line,
  .capabilities .chart--psychology.is-active .psychology-area {
    transition: none;
  }
  .capabilities .chart--psychology.is-ready .psychology-area {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .capabilities .chart--ai-support .donut-center-num {
    font-size: clamp(56px, 16vw, 70px);
  }
  .capabilities .chart--ai-support .donut-center-tag {
    font-size: 13.5px;
  }
  .capabilities .ai-support-bubble {
    width: max-content;
    max-width: calc(100vw - 96px);
    padding: 20px;
    transform-origin: top center;
  }
  .capabilities .ai-support-bubble::before {
    border-bottom-color: var(--dash-blue-mid) !important;
  }
  .vs-list {
    gap: 10px;
  }
  .vs-pill {
    min-height: 0 !important;
    line-height: 1.1 !important;
    padding-block: 0 !important;
  }
  .vs-pill .vs-text {
    line-height: 1.1;
  }
}

@media (min-width: 881px) {
  .approach .vs-pill {
    height: 56px;
    min-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capabilities .ai-support-kpi.is-active .ai-support-donut-ring,
  .capabilities .ai-support-kpi.is-counting .donut-center,
  .capabilities .ai-support-kpi.is-active .ai-support-donut,
  .capabilities .ai-support-bubble.is-popped {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .capabilities .ai-support-kpi.is-active .ai-support-donut-ring--main {
    stroke-dasharray: 242.2 295.31;
  }
  .capabilities .ai-support-kpi.is-active .ai-support-donut-ring--rest {
    stroke-dasharray: 53.16 295.31;
  }
}

/* Pixeden Stroke 7 + Filled 7 original glyph subsets */
.fic.fic-stroke {
  fill: currentColor;
  stroke: none;
  color: #3b4148;
}
.fic.fic-filled {
  fill: currentColor;
  stroke: none;
  color: #343840;
}
.leadflow .fic.fic-stroke,
.leadflow .fic.fic-filled {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.46))
    drop-shadow(0 5px 10px rgba(26, 28, 36, 0.10));
}
.autoflow-ico.autoflow-ico--stroke {
  width: 54%;
  height: 54%;
  fill: currentColor;
  stroke: none;
  color: #555b64;
  opacity: 0.94;
}
.autoflow-ico.autoflow-ico--stroke use {
  fill: currentColor;
  stroke: none;
}
.autoflow-task.is-active .autoflow-ico.autoflow-ico--stroke {
  color: #30343b;
  opacity: 1;
}
.autoflow-ico.autoflow-ico--filled {
  width: 50%;
  height: 50%;
  fill: currentColor;
  stroke: none;
  color: #4b5058;
  opacity: 0.3;          /* inaktiv stark gedimmt — aktiv springt auf 1 */
}
.autoflow-ico.autoflow-ico--filled use {
  fill: currentColor;
  stroke: none;
}
.autoflow-task.is-active .autoflow-ico.autoflow-ico--filled {
  color: #2f333a;
  opacity: 1;
}
.autoflow-ico.autoflow-ico--contract-sign {
  width: 56%;
  height: 56%;
}
.autoflow-ico.autoflow-ico--shopbag {
  width: 58%;
  height: 58%;
}
.pill-field-icon use {
  fill: currentColor;
  stroke: none;
}

/* ============================================================
   Section-Reveals (Founder / FAQ / CTA) — triggern via [data-animate]
   → .is-visible (IntersectionObserver, re-triggert bei Viewport-Eintritt).
   ============================================================ */

/* --- Founder: PRO ELEMENT — Karte von unten, Header + Proof nur Transparenz --- */
.founder-build-panel[data-animate] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.founder-build-panel[data-animate].is-visible { opacity: 1; transform: none; }
.founder-build-head[data-animate],
.founder-build-proof[data-animate] {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.founder-build-head[data-animate].is-visible,
.founder-build-proof[data-animate].is-visible { opacity: 1; }

/* --- FAQ: jede Zeile einzeln, sehr dezent (~halb so stark wie Testimonials) --- */
.faq-item[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.faq-item[data-animate].is-visible { opacity: 1; transform: none; }

/* --- CTA-Footer: PRO ELEMENT — jedes triggert, wenn es SELBST den Viewport erreicht.
   Re-triggert bei Verlassen/Wieder-Eintritt (kein data-animate-once). --- */
.cta .display[data-animate],
.cta .cta-sub[data-animate],
.cta .pill-form[data-animate],
.cta .mobile-cta-btn[data-animate] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.cta .display[data-animate].is-visible,
.cta .cta-sub[data-animate].is-visible,
.cta .pill-form[data-animate].is-visible,
.cta .mobile-cta-btn[data-animate].is-visible { opacity: 1; transform: none; }

.cta .hero-proof[data-animate],
.cta .button-trust-note[data-animate] {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.cta .hero-proof[data-animate].is-visible,
.cta .button-trust-note[data-animate].is-visible { opacity: 1; }

/* Stern: ploppt klein → groß mit Overshoot + kurzer Highlight-Glow */
.cta .cta-app-icon[data-animate] {
  opacity: 0;
  transform: scale(0.35);
  transition: opacity 0.35s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cta .cta-app-icon[data-animate].is-visible {
  opacity: 1;
  transform: none;
  animation: cta-star-glow 1.1s ease 0.4s 1;
}
@keyframes cta-star-glow {
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1.5) drop-shadow(0 0 16px rgba(120, 122, 255, 0.7)); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .founder-build-panel[data-animate],
  .founder-build-head[data-animate],
  .founder-build-proof[data-animate],
  .faq-item[data-animate],
  .cta .display[data-animate],
  .cta .cta-sub[data-animate],
  .cta .pill-form[data-animate],
  .cta .hero-proof[data-animate],
  .cta .cta-app-icon[data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Hero-Load-Reveal — feste Reihenfolge, getriggert per .hero-in (einmal, bei DOMContentLoaded).
   Ohne .hero-js (kein JS) ist alles sofort sichtbar (kein Hidden-State) → kein Risiko.
   1. Logo → 2. Menü → 3. Bullets (alle nur Fade, keine Bewegung) → 4. H1 → 5. Sub → 6. Formular
   (aus unsichtbar + von unten sanft abgebremst) → 7. Dashboard (von unten, sehr sanft). ===== */

/* Logo + Menü: NUR einblenden (keine Bewegung), SOFORT */
html.hero-js .rl-soft { opacity: 0; transition: opacity 0.2s ease; }
html.hero-js .rl-soft.rl-after { transition-delay: 0.02s; }        /* Menü knapp nach dem Logo */
html.hero-js.hero-in .rl-soft { opacity: 1; }

/* Bullets (Personen-Proof): NUR einblenden, als 2. — keine Bewegung */
html.hero-js #top .hero-proof { opacity: 0; transition: opacity 0.2s ease; transition-delay: 0.04s; }
html.hero-js.hero-in #top .hero-proof { opacity: 1; }

/* H1 / Sub / Formular: aus opacity 0 + minimal von unten reingleiten — SOFORT da,
   nur ein Hauch Bewegung (Ease-Out landet zu ~90 % schon nach ~0,15 s). */
html.hero-js .rl-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.03s;                                          /* H1 = 3. sichtbares Element */
  will-change: transform, opacity;
  backface-visibility: hidden;
}
html.hero-js .rl-rise.rl-2 { transition-delay: 0.07s; }            /* Sub */
html.hero-js .rl-rise.rl-3 { transition-delay: 0.11s; }            /* Formular */
html.hero-js.hero-in .rl-rise { opacity: 1; transform: none; }

/* Dashboard: minimal von unten reingleiten — schnell, nur kurz abgebremst. */
html.hero-js .hero-dashboard {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.06s;
  will-change: transform, opacity;
}
html.hero-js.hero-in .hero-dashboard { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.hero-js .rl-soft,
  html.hero-js #top .hero-proof,
  html.hero-js .rl-rise,
  html.hero-js .hero-dashboard,
  html.hero-js .m-burger {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Mobile (Phones): das Burger-Menü gleitet zuletzt von rechts rein — aber SOFORT,
   nur minimal nach dem Rest (0,18 s). Tablet/Desktop unberührt. */
@media (max-width: 600px) {
  html.hero-js .m-burger {
    opacity: 0;
    transform: translateX(40px);                       /* startet rechts außerhalb */
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);  /* sanft abgebremst */
    transition-delay: 0.18s;
    will-change: transform;
  }
  html.hero-js.hero-in .m-burger { opacity: 1; transform: none; }
}

/* ===== Testimonial-Karten — elegant von unten einblenden, zeitversetzt (Stagger).
   Re-triggert bei JEDEM Viewport-Eintritt: der [data-animate]-Observer toggelt
   .is-visible auf der Section (add bei Eintritt, remove bei Austritt).
   .tc-anim wird per JS gesetzt → ohne JS bleiben die Karten sichtbar (kein Broken-State).
   --tc-i (JS, DOM-Reihenfolge) staffelt die Karten; soft abgebremst via ease-out-quint. ===== */
.testimonials-conicorn.tc-anim .tc-card {
  /* NUR gleiten (keine Transparenz), sanft abbremsend, minimal länger */
  transform: translateY(44px);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--tc-col, 0) * 90ms);
  will-change: transform;
}
.testimonials-conicorn.tc-anim .tc-card.tc-in {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-conicorn.tc-anim .tc-card {
    transform: none !important;
    transition: none !important;
  }
}
/* ≤991px (Slider-Mode): KEINE Per-Card-Reveal — die verursacht das komische Hoch-/Runter-
   Rutschen beim Wischen/Scrollen. Stattdessen gleitet der Slider als Ganzes EINMAL von
   unten rein (Section hat data-animate-once → bleibt danach sichtbar, kein Flackern). */
@media (max-width: 991px) {
  .testimonials-conicorn.tc-anim .tc-card,
  .testimonials-conicorn.tc-anim .tc-card.tc-in {
    transform: none !important;
    transition: none !important;
  }
  .testimonials-conicorn[data-animate] .tc-main {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .testimonials-conicorn[data-animate].is-visible .tc-main {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-conicorn[data-animate] .tc-main { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Testimonial-Card-Texte in deutsche Anführungszeichen setzen (Zitat-Look, alle Cards).
   Die Foto-/Video-Titel (.tc-video-title) sind bereits im Markup gequotet. */
.testimonials-conicorn .tc-default-text::before { content: '„'; }
.testimonials-conicorn .tc-default-text::after  { content: '“'; }

/* ===== Capabilities („Entwickelt für B2B Unternehmen") — blauer Glow wirkt STATISCH
   (background-attachment: fixed → fix im Viewport), ist aber auf die Section-Fläche
   geclippt: wandert NICHT mit den Cards und blutet NICHT in die Integrations-Section. ===== */
.features.capabilities {
  position: relative;
  background-image:
    radial-gradient(120vw 62vh at 50% 42%,
      rgba(45, 97, 209, 0.44) 0%,
      rgba(34, 74, 195, 0.28) 28%,
      rgba(17, 41, 165, 0.15) 48%,
      rgba(3, 15, 117, 0) 66%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ============================================================================
   PERFORMANCE — Below-the-fold-Sektionen erst rendern, wenn sie in Viewport-Nähe
   scrollen (content-visibility:auto). Die Seite trägt 206 inline-SVGs; allein
   Integrations (46) + System (50) = ~die Hälfte. Off-screen überspringt der Browser
   deren Layout/Style/Paint → deutlich schnellerer First Paint + Interaktivität.
   contain-intrinsic-size reserviert die gemessene Höhe (auto = merkt sich die echte
   Größe nach dem 1. Render) → kein Scrollbar-Springen.
   BEWUSST NICHT: .capabilities (position:sticky bricht bei paint-containment),
   #testimonials (Slider-Interaktion), #approach/.statement (nah am Fold). ===== */
.integrations { content-visibility: auto; contain-intrinsic-size: auto 700px; }
#system       { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
#founder      { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
#faq          { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
#cta          { content-visibility: auto; contain-intrinsic-size: auto 950px; }