/* ==========================================================================
   Webdesign Grimm · Design-Tokens (Owner: wdf-design-system, Aufträge P5-ds, P5-ds2, P5-ds3)
   Quelle: wdf/directions/B/hero.html (Stand P4-B11, ergänzt um die Module P4-B12/B13;
   Startseite vom Kunden komplett freigegeben 2026-11-10, Briefing Nachtrag 15;
   seit P5-ds3 Grundstufe „Mitte“ = :root[data-bg="mitte"] aus P4-B14, Briefing Nachtrag 18)
   Dieselben Werte im W3C-Format: wdf/design-system/tokens.json
   Zuordnung Prototyp-Variable → Token: wdf/design-system/style-lock.md § Zuordnung

   Nur :root-Variablen. Abschnitts-CSS nutzt ausschließlich var(--…).
   Erlaubte freie Werte in Abschnitts-CSS: 0, 1px-Linien, Prozent, fr, ch, cqi im
   Entwurfsmaß der Beispiel-Website (var(--u)) und Seitenverhältnisse.

   Breakpoints (feste Werte in Media Queries, Variablen gehen dort nicht):
     560px   große Telefone: Buttons in natürlicher Breite, Zeitzeile sichtbar, FAQ-Nummern sichtbar
     768px   Tablet hochkant: Story 1 wechselt von Telefon- auf Browser-Hülle
     1024px  Desktop-Layout: Navigation, Kopfzeilen-CTA, Pins, Bühne
     1100px  Nutzen-Band der Bausteine symmetrisch (Für Sie ← Formel → Für Ihre Kunden)
     1280px  Desktop: breite Story-2-Bühne
     1600px  Inhaltsbreite erreicht (--container-max)
   Höhen-Abfragen: (min-width:1024px) and (max-height:820px) kompakter Hero ·
     (min-width:1024px) and (min-height:640px) Bühne gepinnt · Fensterhöhe < 520px: keine Pins
   ========================================================================== */

:root {
  /* ---------- Farbe · Grundflächen (Dark Mode, Stufe „Mitte“: OKLCH h 264, Ableitung direction.md § Hintergrund-Vergleich) ---------- */
  --color-bg: #0D121C;                 /* Seite */
  --color-bg-rgb: 13, 18, 28;          /* = --color-bg als RGB-Tripel für halbtransparente Ebenen */
  --color-bg-deep: #0D111A;            /* tiefste Ebene: Schleier über der Website (Prototyp --tief) */
  --color-bg-deep-rgb: 13, 17, 26;
  --color-bg-raised: #121823;          /* leicht abgesetzte Seitenfläche */
  --color-surface: #171D29;            /* Karten, Ring um Telefon-Screens */
  --color-surface-2: #1D2433;          /* Felder, Werkstück-Platzhalter, Icon-Grund */
  --color-surface-2-rgb: 29, 36, 51;   /* für Mitteilung (Milchglas) und Karten-Verläufe */
  --color-surface-3: #222B3D;          /* eigene Chat-Blase, aktiver Umschalter */
  --color-line: rgba(255, 255, 255, .07);         /* Haarlinie, dekorativ */
  --color-line-strong: rgba(255, 255, 255, .13);  /* Haarlinie betont, Chip-Rand, dekorativ */
  --color-border-field: #68748C;       /* Rand von Formularfeldern, trägt Zustand (≥ 3 : 1); Stufe „Mitte“: Grundverschiebung in OKLCH */
  --color-field-bg: #111724;           /* Grund der Eingabefelder (P4-B12, eingelassen), URL-Feld im Browser (Prototyp --feld) */

  /* ---------- Farbe · Text ---------- */
  --color-text: #F7FAFF;
  --color-text-secondary: #B3BAC9;
  --color-text-tertiary: #8D96A7;      /* Meta, Mikrotext; hält ≥ 4,5 : 1 auch über der Lichtwolke */
  --color-text-disabled: #5E6370;      /* Beschriftung/Icon „aus“ (deaktiviert, von der Kontrastpflicht ausgenommen); ersetzt opacity .35/.45, damit der Zustand ohne Deckkraft-Trick lesbar bleibt (P9-3) */
  --color-text-on-scrim: rgba(238, 242, 247, .8);  /* Titel über abgedunkelter Website (Posteingang); im Prototyp fest, auch bei „Mitte“ */
  --color-white: #FFFFFF;              /* nur Icons auf CI-Fläche */

  /* ---------- Farbe · CI-Blau (unverändert #2A92F3) ---------- */
  --color-accent: #2A92F3;
  --color-accent-hover: #4BA4F6;
  --color-on-accent: #04111F;          /* Schrift auf CI-Fläche */
  --color-accent-soft: #8CC4FA;        /* CI hell als Schrift auf Dunkel */
  --color-accent-on-light: #1667B7;    /* CI als Schrift auf hellen Karten */
  --color-accent-a06: rgba(42, 146, 243, .06);   /* Verweis-Karte */
  --color-accent-a08: rgba(42, 146, 243, .08);   /* Antwort-Chips in Oberflächen */
  --color-accent-a10: rgba(42, 146, 243, .10);
  --color-accent-a12: rgba(42, 146, 243, .12);
  --color-accent-a14: rgba(42, 146, 243, .14);
  --color-accent-a16: rgba(42, 146, 243, .16);
  --color-accent-a24: rgba(42, 146, 243, .24);
  --color-accent-a40: rgba(42, 146, 243, .40);
  --color-accent-soft-a50: rgba(140, 196, 250, .5);   /* Unterstrich Mono-Link beim Zeigen */
  --color-accent-soft-a30: rgba(140, 196, 250, .3);   /* Unterstrich Neben-Link (Mono) */
  --color-accent-soft-a40: rgba(140, 196, 250, .4);   /* Unterstrich Text-Button */
  --color-track-accent: rgba(140, 196, 250, .18);     /* leere Bahn der Zeitzeile */
  --color-track-route: rgba(140, 196, 250, .2);       /* Bahn des Routing-Lichtpunkts */
  --color-flow-from: rgba(140, 196, 250, .7);         /* Lichtlinie im Nutzen-Band, Ursprung */
  --color-flow-to: rgba(140, 196, 250, .15);          /* Lichtlinie im Nutzen-Band, Ende */
  --color-focus: #8CC6FA;              /* Fokus-Ring auf Dunkel */
  --color-focus-on-light: #1667B7;     /* Fokus-Ring auf hellen Flächen */

  /* ---------- Farbe · Bernstein-Kupfer (Warm-Akzent, sparsam: Auditor, Freigabe, Bildwelt) ---------- */
  --color-warm: #E39A3B;
  --color-warm-soft: #F2C48A;          /* Schrift auf warmer Tönung */
  --color-on-warm: #1C1206;            /* Haken auf Bernstein */
  --color-warm-a10: rgba(227, 154, 59, .10);
  --color-warm-a14: rgba(227, 154, 59, .14);
  --color-glow-warm: rgba(233, 168, 98, .16);  /* Fensterlicht hinter dem Hero-Creative */

  /* ---------- Farbe · Status ---------- */
  --color-success: #58C27D;            /* „Online“, Erfolgsmeldung */
  --color-danger: #FF8F87;             /* Formularfehler (wie P4-B12 --fehler, gemessen) */
  --color-danger-a12: rgba(255, 143, 135, .12);

  /* ---------- Farbe · Ebenen und Füllungen ---------- */
  --color-overlay-header: rgba(var(--color-bg-rgb), .82);   /* Kopfzeile beim Scrollen, Label „vereinfacht“ */
  --color-overlay-bar: rgba(var(--color-bg-rgb), .9);       /* mobile Aktionsleiste */
  --color-overlay-toast: rgba(var(--color-surface-2-rgb), .86);  /* Mitteilung (Milchglas) */
  --color-scrim: rgba(var(--color-bg-deep-rgb), .7);             /* Website abgedunkelt unter dem Posteingang */
  --color-scrim-strong: rgba(var(--color-bg-deep-rgb), .92);
  --color-scrim-mid: rgba(var(--color-bg-deep-rgb), .74);
  --color-fill-hover: rgba(255, 255, 255, .04);  /* Navigation beim Zeigen */
  --color-fill-subtle: rgba(255, 255, 255, .03); /* Monatskachel */
  --color-fill-column: rgba(255, 255, 255, .035);/* Spalte im Kundenmanager */
  --color-fill-track: rgba(255, 255, 255, .06);  /* leerer Kalendertag */
  --color-fill-step: rgba(255, 255, 255, .1);    /* offene Etappe */
  --color-text-outline: rgba(255, 255, 255, .1); /* Kontur der großen Projektnummer */
  --color-fill-option: rgba(255, 255, 255, .025);       /* Paket-Option in Ruhe */
  --color-fill-option-hover: rgba(255, 255, 255, .045); /* Paket-Option beim Zeigen */
  --color-fill-bar: rgba(255, 255, 255, .08);           /* leere Fortschrittsleiste */

  /* ---------- Farbe · Mitteilungskarten (Posteingang des Betriebs, hell) ---------- */
  --color-notice-bg: #F5F7FA;
  --color-notice-text: #10151C;
  --color-notice-text-secondary: #4D5764;
  --color-notice-icon-bg: #E4E9EF;
  --color-notice-icon: #3A4452;
  --color-notice-icon-warm-bg: #F3E2D4;
  --color-notice-icon-warm: #8E431E;
  --color-notice-done-bg: #1B2333;     /* fertige Anfrage (dunkel, mit CI-Schein; Prototyp --fertig) */

  /* ---------- Farbe · Geräte-Hüllen und App-Oberflächen ---------- */
  --color-device-screen: #151B27;      /* Gerät, Bildschirm, Tab, untere Kante der Karten-Verläufe (Prototyp --geraet) */
  --color-device-screen-rgb: 21, 27, 39;
  --color-device-chrome: #1A2232;      /* Browserleiste (Prototyp --chrome) */
  --color-device-chrome-text: #97A2B2;
  --color-device-dot: #2A323D;
  --color-device-tab-text: #C9D1DC;
  --color-device-url-bg: var(--color-field-bg);  /* Prototyp --feld */
  --color-device-url-text: #6F7A8A;
  --color-device-url-text-strong: #778292;  /* URL als Schrift im Feld (statt Balken): 4,6 : 1 auf --color-field-bg (P9-3) */
  --color-device-url-bar: #252D3E;     /* Platzhalter-Balken im URL-Feld (Prototyp --url) */
  --color-device-photo-ground: #11161C;
  --color-scene-ground: #1E2533;       /* Grund der Querformat-Bilder (kein heller Blitz beim Laden; Prototyp --szene) */
  --color-app-bg: rgba(var(--color-app-rgb), .97);
  --color-app-solid: #171E2B;          /* App-Karten, Oberflächen, Kundenmanager (Prototyp --app) */
  --color-app-rgb: 23, 30, 43;
  --color-app-panel: rgba(var(--color-app-rgb), .92);  /* App-Fläche innerhalb einer Modul-Karte (Festpreisangebot, Paketwahl) */
  --color-app-side: #121925;           /* Seitenleiste im Kundenmanager (Prototyp --km-seite) */
  --color-app-ticket: #232B3C;         /* Ticket, Mini-Mitteilung (Prototyp --ticket) */
  --color-app-icon-from: #2B3440;
  --color-app-icon-to: #151B23;
  --color-label-simplified: #C3CAD4;   /* Label „Darstellung vereinfacht“ */
  --color-runner-core: #DCEEFF;        /* Lichtpunkt in der Agenten-Kette */

  /* ---------- Farbe · Projektfarben (Markenfarbe je Kundenprojekt, gemessen live; P7-ref-farbe, Nachtrag 42/62) ----------
     Nur als Bühnengrund der Projektkarten (--pf per [data-projekt], base.css). Keine Textfarbe. */
  --color-projekt-hautarzt-pawlowska: #559940;
  --color-projekt-physiotherapie-mocker: #31BDAC;
  --color-projekt-immobilien-kraemer: #C29A5C;            /* Gold aus Logo und Knöpfen (Nachtrag 42) */
  --color-projekt-edelstahlbau-tannroda-projekt-iris: #F36B21;
  --color-projekt-steuerberater-sieger: #69A238;
  --color-projekt-redesign-ines-zu-castel: #FFEFFD;
  --color-projekt-neue-website-markus-kortschak: #F8C3C2;
  --color-projekt-arbeitsmedizin-weiss: #C0EBEA;
  --color-projekt-hubert-haustechnik: #3EAA34;            /* Grün der Kunden-Site (Nachtrag 62) */
  --color-projekt-mf-immobilien: #DA6E00;                 /* Orange der Kunden-Site (Nachtrag 79) */

  /* ---------- Farbe · fiktive Beispiel-Website „Wärme & Haus“ (eigene Marke, nur in der Hülle) ---------- */
  --example-creme: #F3EDE4;
  --example-paper: #FFFDF9;
  --example-ink: #1F1A16;
  --example-ink-secondary: #5E544B;
  --example-line: rgba(31, 26, 22, .13);
  --example-accent: #9E4C24;           /* P9-3 K-PRJ-01: war #B65A2C; als Schrift auf Hell 5,1–5,9 : 1, als Grund unter heller Schrift 5,3 : 1 */
  --example-light: #F6F1EA;
  --example-light-a70: rgba(246, 241, 234, .7);
  --example-light-a82: rgba(246, 241, 234, .82);
  --example-light-a86: rgba(246, 241, 234, .86);
  --example-light-a90: rgba(246, 241, 234, .9);
  --example-paper-a95: rgba(255, 253, 249, .95);
  --example-ink-a12: rgba(31, 26, 22, .12);
  --example-ink-a20: rgba(31, 26, 22, .2);
  --example-placeholder: #8A8077;
  --example-button-muted: #6B7480;
  --example-success: #497645;          /* P9-3 K-PRJ-01: war #5E8F5A; ≥ 4,56 : 1 auf #F3EDE4/#F6F1EA/#FFFDF9 (Vorgabe #4A7746 ergab 4,49 auf #F3EDE4)  */
  --example-shadow: rgba(0, 0, 0, .55);
  --example-veil-before: rgba(24, 22, 20, .5);
  --example-veil-after: linear-gradient(90deg, rgba(10, 9, 8, .8) 0%, rgba(10, 9, 8, .52) 30%, rgba(10, 9, 8, 0) 56%), linear-gradient(180deg, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, 0) 18%);
  --example-veil-after-phone: linear-gradient(180deg, rgba(10, 9, 8, .66) 0%, rgba(10, 9, 8, .3) 32%, rgba(10, 9, 8, .08) 52%, rgba(10, 9, 8, .5) 100%);
  --example-orb: radial-gradient(circle at 35% 35%, #FFD9B0, #C76B35 72%);  /* Bildmarke der Beispiel-Marke, auch Tab- und App-Icon */

  /* ---------- Verläufe ---------- */
  --gradient-time-track: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent));
  --gradient-screen-glint: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  --gradient-card-voice: linear-gradient(180deg, rgba(var(--color-surface-2-rgb), .72), rgba(var(--color-device-screen-rgb), .72));
  --gradient-card-module: linear-gradient(180deg, rgba(var(--color-surface-2-rgb), .78), rgba(var(--color-device-screen-rgb), .78));  /* Modul-Karte (Preise, Bausteine, Team) */
  --gradient-divider-h: linear-gradient(90deg, transparent, var(--color-line-strong) 30%, var(--color-line-strong) 70%, transparent);
  --gradient-divider-v: linear-gradient(180deg, transparent, var(--color-line-strong) 30%, var(--color-line-strong) 70%, transparent);
  --gradient-flow-down: linear-gradient(180deg, var(--color-flow-from), var(--color-flow-to));
  --gradient-flow-left: linear-gradient(270deg, var(--color-flow-from), var(--color-flow-to));
  --gradient-flow-right: linear-gradient(90deg, var(--color-flow-from), var(--color-flow-to));
  --gradient-range: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));        /* Preisspanne */
  --gradient-photo-fade-soft: linear-gradient(180deg, rgba(var(--color-bg-rgb), 0) 60%, rgba(var(--color-bg-rgb), .45));/* Team-Fotos */
  --gradient-faq-open: linear-gradient(90deg, rgba(42, 146, 243, .06), rgba(42, 146, 243, 0) 70%);
  --gradient-app-icon: linear-gradient(160deg, var(--color-app-icon-from), var(--color-app-icon-to));
  --gradient-portrait-fade: linear-gradient(180deg, rgba(var(--color-bg-rgb), 0) 55%, rgba(var(--color-bg-rgb), .85) 100%);
  --gradient-creative-glow: radial-gradient(closest-side, var(--color-glow-warm), rgba(233, 168, 98, 0) 70%);
  --gradient-scrim-phone: linear-gradient(180deg, var(--color-scrim-strong) 0, var(--color-scrim-mid) 22%);

  /* ---------- Lichtwolke (feste Ebene hinter allem; Bewegung: motion.js) ---------- */
  --wolke-hof-w: min(1500px, 170vw);
  --wolke-hof-h: min(1060px, 120vw);
  --wolke-hof: radial-gradient(closest-side, rgba(42, 146, 243, .08), rgba(42, 146, 243, .045) 42%, rgba(42, 146, 243, .016) 72%, rgba(42, 146, 243, 0));
  --wolke-glut-w: min(960px, 116vw);
  --wolke-glut-h: min(660px, 80vw);
  --wolke-glut: radial-gradient(closest-side, rgba(233, 168, 98, .05), rgba(233, 168, 98, .026) 48%, rgba(233, 168, 98, 0));
  --wolke-kern-w: min(660px, 94vw);
  --wolke-kern-h: min(440px, 64vw);
  --wolke-kern: radial-gradient(closest-side, rgba(42, 146, 243, .10), rgba(42, 146, 243, .05) 44%, rgba(42, 146, 243, .012) 78%, rgba(42, 146, 243, 0));
  --wolke-lag-kern: 1000ms;            /* Nachlauf je Fläche (gsap.quickTo) */
  --wolke-lag-glut: 1700ms;
  --wolke-lag-hof: 2600ms;
  --wolke-scale-min: .72;
  --wolke-scale-max: 1.3;
  --wolke-warm-kern: .45;              /* Kern-Deckkraft an warmen Stationen (Glut dann 1) */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture-grain-opacity: .035;

  /* ---------- Licht-Scan (Story 1, Variante a „Lichtkante“, Kundenwahl 2026-11-10) ---------- */
  --scan-mask: linear-gradient(90deg, transparent 0, #000 var(--scan-overhang), #000 calc(100% - var(--scan-overhang)), transparent 100%);  /* Maske: Kante läuft seitlich aus */
  --scan-overhang: clamp(16px, 2cqi, 24px);
  --scan-halo: clamp(48px, 8.6cqi, 96px);
  --scan-core: clamp(16px, 2.6cqi, 28px);
  --scan-halo-fill:
    radial-gradient(50% 50% at 50% 50%, rgba(42, 146, 243, .12), rgba(42, 146, 243, 0)),
    linear-gradient(180deg, rgba(100, 169, 243, 0) 32%, rgba(100, 169, 243, .025) 35%, rgba(100, 169, 243, .116) 40%, rgba(100, 169, 243, .294) 45%, rgba(100, 169, 243, .4) 50%, rgba(100, 169, 243, .294) 55%, rgba(100, 169, 243, .116) 60%, rgba(100, 169, 243, .025) 65%, rgba(100, 169, 243, 0) 68%),
    linear-gradient(180deg, rgba(42, 146, 243, 0) 0%, rgba(42, 146, 243, .005) 5%, rgba(42, 146, 243, .011) 10%, rgba(42, 146, 243, .024) 15%, rgba(42, 146, 243, .047) 20%, rgba(42, 146, 243, .082) 25%, rgba(42, 146, 243, .131) 30%, rgba(42, 146, 243, .188) 35%, rgba(42, 146, 243, .244) 40%, rgba(42, 146, 243, .285) 45%, rgba(42, 146, 243, .3) 50%, rgba(42, 146, 243, .285) 55%, rgba(42, 146, 243, .244) 60%, rgba(42, 146, 243, .188) 65%, rgba(42, 146, 243, .131) 70%, rgba(42, 146, 243, .082) 75%, rgba(42, 146, 243, .047) 80%, rgba(42, 146, 243, .024) 85%, rgba(42, 146, 243, .011) 90%, rgba(42, 146, 243, .005) 95%, rgba(42, 146, 243, 0) 100%);
  --scan-core-fill: linear-gradient(180deg, rgba(111, 175, 244, 0) 0%, rgba(111, 175, 244, .08) 8%, rgba(111, 175, 244, .26) 16%, rgba(111, 175, 244, .55) 24%, rgba(111, 175, 244, .85) 30%, #6FAFF4 35%, #88BCF2 42%, #94C2F3 50%, #88BCF2 58%, #6FAFF4 65%, rgba(111, 175, 244, .85) 70%, rgba(111, 175, 244, .55) 76%, rgba(111, 175, 244, .26) 84%, rgba(111, 175, 244, .08) 92%, rgba(111, 175, 244, 0) 100%);

  /* ---------- Schrift · Familien (Variante A · Geist) ----------
     Wechsel nur hier (und in head.html die Schriftdateien):
       alt:      --font-display/--font-text: "Schibsted Grotesk", …; --tracking-h1: -.04em; --tracking-h2: -.03em
       original: --font-display: "Space Grotesk", …; --font-text: "Inter", …; --tracking-h1: -.04em; --tracking-h2: -.03em */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-display: 600;          /* Überschriften, Buttons, Titel */
  --font-weight-mono: 500;             /* Mindestgewicht jeder Großbuchstaben-Mono (F-mono-lesbar; vorher 400 an .mono) */

  /* ---------- Schrift · Größen je Stil ---------- */
  --font-size-h1: clamp(2rem, 1.1rem + 3.3vw, 4.5rem);          /* 32 → 72 px, im Hero zusätzlich ≤ --h1-height-cap */
  --h1-height-cap: 7.4svh;
  --font-size-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem);     /* 28 → 42 px (≤ 65 % der H1) */
  --font-size-story: clamp(1.3125rem, .95rem + 1.25vw, 2.25rem);/* Story-Zeile im Film 21 → 36 px */
  --font-size-story-phone: 1.25rem;                             /* Story-Zeile im Film mobil 20 px */
  --font-size-station: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);   /* Stationstitel Story 2: 24 → 34 px */
  --font-size-price: clamp(2.75rem, 2.2rem + 2.2vw, 3.75rem);   /* Preiszahl 44 → 60 px */
  --font-size-h3: clamp(1.25rem, 1.1rem + .5vw, 1.625rem);      /* Projekttitel, Karten: 20 → 26 px */
  --font-size-benefit: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); /* Kernsatz im Nutzen-Band 20 → 26 px */
  --font-size-question: clamp(1.0625rem, 1rem + .3vw, 1.25rem); /* FAQ-Frage 17 → 20 px */
  --font-size-menu: 1.5rem;                                     /* Einträge im Mobilmenü 24 px */
  --font-size-statement: clamp(1.0625rem, 1rem + .3vw, 1.25rem);/* Zeitzeile im Hero 17 → 20 px */
  --font-size-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* 17 → 19 px */
  --font-size-body-lg: 1.0625rem;      /* 17 px: Stimme, App-Titel, Kartentitel Desktop */
  --font-size-body: 1rem;              /* 16 px */
  --font-size-ui: .9375rem;            /* 15 px: Navigation, Buttons klein, Mitteilungstitel */
  --font-size-ui-lg: .90625rem;        /* 14,5 px: Oberflächen der Bausteine ab 1024 px, Namen im Team */
  --font-size-small: .875rem;          /* 14 px */
  --font-size-ui-sm: .84375rem;        /* 13,5 px: Zeilen in App-Karten */
  --font-size-caption: .8125rem;       /* 13 px: Bildunterschrift, Zähler, Mono-Links */
  --font-size-caption-sm: .78125rem;   /* 12,5 px: Chips, Badges, Personenzeile */
  --font-size-micro: .75rem;           /* 12 px Fließschrift (nicht Mono): Oberflächen, Routing-Person */
  --font-size-mono: .8125rem;          /* 13 px: Kicker, Stempel, Beschriftung unter großen Zahlen (F-mono-lesbar: 12 → 13 px) */
  --font-size-mono-md: .78125rem;      /* 12,5 px: Kopf der Baustein-Oberflächen ab 1024 px (vorher 11,5 px) */
  --font-size-mono-sm: .75rem;         /* 12 px: Tags, App-Kopf, Zeitwerte (vorher 11 px) */
  --font-size-mono-xs: .71875rem;      /* 11,5 px: Hinweis-Labels (nur Großbuchstaben-Mono; vorher 10,5 px) */
  --font-size-mono-2xs: .6875rem;      /* 11 px: Monatsnamen in der Jour-fixe-Kachel; Untergrenze für Mono (vorher 10 px) */
  --font-size-ui-value: 1.75rem;       /* 28 px: Wert in einer Oberfläche (Preisspanne) */
  --font-size-ui-value-lg: 2.75rem;    /* 44 px: dasselbe ab 1024 px */
  --font-size-rating: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);      /* „5,0“ */
  --font-size-index: clamp(88px, 10vw, 160px);                  /* Kontur-Nummer der Werkstücke */

  --font-size-benefit-sm: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);   /* Nutzen-Satz der Add-on-Karte (P5: war Rückfallwert) */
  --font-size-ui-value-md: 2.25rem;                                     /* Wert in der Baustein-Oberfläche (P5: war Rückfallwert) */

  /* ---------- Schrift · Zeilenhöhen ---------- */
  --leading-rating: .9;
  --leading-none: 1;
  --leading-h1: 1.02;
  --leading-h2-close: 1.04;            /* Abschluss */
  --leading-price: 1.05;               /* Preiszahl */
  --leading-h2: 1.05;                  /* Kapitelköpfe */
  --leading-h2-story: 1.08;            /* Story 1 statisch */
  --leading-station: 1.1;
  --leading-story: 1.12;               /* Story-Zeile im Film */
  --leading-h3: 1.15;
  --leading-mono: 1.2;
  --leading-title: 1.25;
  --leading-snug: 1.3;
  --leading-ui: 1.35;
  --leading-compact: 1.4;
  --leading-caption: 1.45;
  --leading-text: 1.5;
  --leading-body: 1.55;
  --leading-loose: 1.6;                /* Kontaktzeile unter dem FAQ-Kopf */

  /* ---------- Schrift · Laufweiten ---------- */
  --tracking-index: -.06em;
  --tracking-rating: -.05em;
  --tracking-h1: -.045em;
  --tracking-h2: -.035em;
  --tracking-station: -.03em;
  --tracking-h3: -.02em;
  --tracking-title: -.01em;
  --tracking-mono: .07em;              /* Großbuchstaben-Mono (vorher .06em) */
  --tracking-mono-tag: .06em;         /* vorher .05em */
  --tracking-mono-wide: .07em;         /* „Fiktive Beispiel-Website“ */
  --tracking-mono-loose: .08em;        /* „oder“ zwischen den Preis-Karten */
  --tracking-mono-tight: .03em;
  --tracking-mono-ui: .04em;           /* enge Oberflächen-Köpfe (App-Kopf, Mitteilung): hält die Zeile trotz 12 px / 500 (F-mono-lesbar) */

  --tracking-benefit: -.015em;              /* Nutzen-Satz der Add-on-Karte (P5: war Rückfallwert) */
  --tracking-example-button: .02em;         /* Button der Beispiel-Website (P5: war Rückfallwert) */
  --tracking-example-welcome: -.015em;      /* Begrüßung der Beispiel-Website (P5: war Rückfallwert) */

  /* ---------- Abstände (4-pt-Hauptraster; Feinstufen nur im Inneren von Komponenten, 1:1 Prototyp) ---------- */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;      /* Prototyp --s1 */
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;      /* --s2 */
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;    /* --s3 */
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;    /* --s4 */
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;    /* Innenabstand Baustein-Oberfläche, FAQ-Frage ab 1024 px */
  --space-24: 24px;    /* --s5 */
  --space-32: 32px;    /* --s6 */
  --space-40: 40px;
  --space-48: 48px;    /* --s7 */
  --space-56: 56px;    /* Abstand Projektwand (Referenzen-Hero ab 768 px); P5: war undefiniert */
  --space-64: 64px;    /* --s8 */
  --space-80: 80px;    /* Abstand der Projekt-Einträge (.rf-liste); P5: war undefiniert */
  --space-96: 96px;    /* --s9 */
  --space-112: 112px;
  --space-128: 128px;  /* --s10 */
  --space-section: var(--space-96);        /* Abschnittsabstand oben/unten */
  --space-section-end: var(--space-128);   /* letzter Abschnitt vor der Fußzeile */
  --gap-hero: clamp(40px, 5vw, 96px);      /* Spalten im Hero */
  --gap-story2: clamp(48px, 6vw, 112px);   /* Spalten Story 2 */

  /* ---------- Raster ---------- */
  --container-max: 1600px;
  --rand: clamp(24px, 5vw, 48px);          /* Seitenrand, beidseitig gleich */
  --kopf-h: 64px;                          /* Höhe der Kopfzeile */
  --leiste-h: 84px;                        /* Platz, den die mobile Aktionsleiste unten braucht */

  /* ---------- Größen ---------- */
  --size-target: 44px;                     /* Klickfläche Hauptaktionen, Icon-Buttons */
  --size-target-min: 24px;
  --size-button: 52px;
  --size-button-sm: 44px;
  --size-icon-xs: 13px;
  --size-icon-sm: 15px;
  --size-icon: 18px;
  --size-icon-lg: 22px;
  --size-avatar: 36px;
  --size-avatar-lg: 44px;
  --size-person: 34px;
  --size-notice-icon: 36px;
  --size-notice-icon-lg: 40px;
  --size-chain-icon: 30px;
  --size-kicker-line: 28px;
  --size-logo: 26px;                       /* Kopfzeile; ab 1024 px 31 px (Kunde 2026-11-10: ca. 20 % größer, vorher 22/26) */
  --size-logo-footer: 22px;                /* Fußzeile; ab 1024 px 26 px (unverändert) */
  --size-toast: 400px;
  --size-notice: 460px;
  --size-app-card: 420px;
  --size-side-label: 330px;                /* Textspalte der Werkstücke ab 1024 px */
  --size-portrait-final: 420px;
  --size-textarea: 144px;                  /* Mindesthöhe mehrzeiliges Feld */
  --size-check: 20px;                      /* Kontrollkästchen, Haken-Kreis der Routing-Oberfläche ab 1024 px */
  --size-check-sm: 16px;                   /* Haken-Kreis der Routing-Oberfläche */
  --size-radio: 18px;                      /* Auswahlpunkt der Paket-Option, Listen-Icon der Preis-Karte */
  --size-dot: 8px;                         /* Punkt im gewählten Radio, Leuchtpunkt der Mini-Mitteilung */
  --size-control: 48px;                    /* Paket-Option, Werkzeug-Button der Diagnose */
  --size-target-sm: 36px;                  /* Text-Button „Andere Adresse eingeben“ */
  --size-link-icon: 40px;                  /* CI-Kreis der Verweis-Karte */
  --size-chip-lg: 34px;                    /* Formel-Chip im Nutzen-Band */
  --size-plus: 26px;                       /* „+“ zwischen den Formel-Chips */
  --size-flow: 28px;                       /* Lichtlinie im Nutzen-Band mobil (senkrecht) */
  --size-flow-min: 40px;                   /* Lichtlinie ab 1100 px (waagrecht), min. */
  --size-flow-max: 88px;                   /* … max. */
  --size-runner-sm: 7px;                   /* Lichtpunkt am Ende der Linie */
  --size-runner: 10px;                     /* Lichtpunkt der Routing-Bahn */
  --size-handle: 14px;                     /* Griff der Preisspanne */
  --size-handle-lg: 16px;
  --size-range-handle: 28px;               /* sichtbarer Griff des Bewertungsreglers (Erstkontakt), Klickfläche 44 px */
  --size-range-track: 6px;                 /* Bahn des Bewertungsreglers */
  --size-bar: 4px;                         /* Fortschritts-/Spannenbalken */
  --size-bar-lg: 5px;
  --size-icon-3xs: 10px;                   /* Haken im Kreis 16 px */
  --size-icon-2xs: 12px;                   /* Agenten-Icons im Team, Haken im Kreis 20 px */
  --size-ui-preview: 184px;                /* Höhe der Baustein-Oberfläche */
  --size-ui-preview-lg: 244px;             /* … ab 1024 px */
  --size-route-label: 64px;                /* Spalte „Region/Thema/Volumen“ */
  --size-route-label-lg: 76px;
  --size-lead-avatar: 38px;                /* Bernd vor der Werkzeugkette im Team */
  --size-chain-icon-sm: 24px;              /* Agent in der kleinen Kette */
  --size-chain-mini: 300px;                /* Breite der kleinen Kette */
  --size-team-card: 540px;                 /* Team-Karte ab 1024 px */
  --size-tool-card: 460px;                 /* Diagnose-Karte */
  --size-demo-card: 400px;                 /* Spalte der Verweis-Karte neben dem Kapitelkopf (Bausteine, ab 1024 px) */
  --size-price-divider: 72px;              /* Spalte „oder“ zwischen den Preis-Karten ab 1024 px */
  --size-faq-nr: 20px;                     /* Spalte der Fragenummer */
  --size-faq-toggle: 32px;                 /* Plus/Minus-Kreis */
  --size-faq-row: 64px;                    /* Mindesthöhe einer Frage */
  --size-faq-row-lg: 72px;
  /* P5: bisher nur als Rückfallwert im Abschnitts-CSS, Werte unverändert übernommen */
  --size-plate: 560px;                     /* Werkstück-Platte der Referenzen-Bühne */
  --size-plate-lg: 1180px;                 /* … ab 1024 px (begrenzt auf 80vw) */
  --size-stage-card: 400px;                /* UI-Karte in der Ablauf-Szene */
  --size-stage-card-chain: 620px;          /* Werkzeugkette in der Ablauf-Szene */
  --size-stage-card-doc: 600px;            /* Dokument-Karte in der Waage-Szene (Leistungen, Bausteine) */
  --size-stage-card-doc-wide: 660px;       /* Pflichtenheft in der Ablauf-Szene (Startseite) */
  --size-stage-doc-h: 400px;               /* Höhe der Dokument-Szene */
  --size-stage-doc-h-md: 380px;
  --size-stage-doc-h-sm: 345px;
  --size-addon-card: 300px;                /* Add-on-Karte (Bausteine) */
  --size-addon-card-md: 360px;
  --size-addon-card-lg: 380px;
  --size-demo-col: 380px;                  /* Demo-Spalte (Bausteine) */
  --gap-addons: clamp(96px, 8vw, 136px);   /* Abstand der Add-on-Reihen */
  --gap-addon-cols: clamp(48px, 6vw, 104px);
  --size-time-line: 30rem;                 /* Zeitzeile im Hero-Creative */
  --perspective-creative: 1800px;          /* Perspektive des Hero-Creatives */
  --tilt-creative-x: 3deg;                 /* Grundneigung des Hero-Creatives (CSS und motion.js) */
  --tilt-creative-y: -8deg;
  --stroke-bold: 1.5px;                    /* Menü-Striche, Zeitbahn, Feldrand im Fokus, Plus/Minus */
  --stroke-focus: 2px;                     /* Fokus-Ring */
  --stroke-strong: 2px;                    /* CI-Kante der offenen Frage, Lade-Kreis */

  /* ---------- Radien ---------- */
  --radius-hairline: 2px;                  /* Balken, Kalendertage */
  --radius-focus: 4px;                     /* Fokus-Ring, Logo */
  --radius-bar: 4px;                       /* Fortschritts- und Spannenbalken */
  --radius-sm: 6px;                        /* Buttons, Navigation, Skip-Link */
  --radius-stamp: 8px;                     /* Stempel, PDF-Plakette */
  --radius-status: 9px;                    /* Status-Plakette, Dokumentzeile, App-Icon */
  --radius-md: 10px;                       /* Menü-Button, Desktop-Screens, Entscheidung, Kachel */
  --radius-device: 12px;                   /* Browser-Hülle */
  --radius-control: 12px;                  /* Eingabefeld, Paket-Option, Erfolgsblock, Mini-Mitteilung */
  --radius-lg: 14px;                       /* Mitteilungskarte mobil, Querformat-Bild, Stimme, Telefon-Screen, Chat-Blase */
  --radius-card: 16px;                     /* App-Karte, Mitteilungskarte Desktop */
  --radius-toast: 18px;
  --radius-xl: 20px;                       /* Porträt am Abschluss */
  --radius-phone: 9% / 5.06%;              /* Telefon-Hülle 9:16 */
  --radius-pill: 99px;
  --radius-round: 50%;

  /* ---------- Schatten und Ringe ---------- */
  --shadow-button: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 30px -12px rgba(42, 146, 243, .7);
  --shadow-device: 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .05), 0 60px 120px -60px rgba(0, 0, 0, .95), 0 30px 70px -40px rgba(0, 0, 0, .85);
  --shadow-toast: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(42, 146, 243, .35);
  --shadow-notice: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 36px -18px rgba(0, 0, 0, .85), 0 4px 10px -4px rgba(0, 0, 0, .45);
  --shadow-notice-done: 0 0 0 1px rgba(140, 196, 250, .3), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 44px -10px rgba(42, 146, 243, .55);
  --shadow-screen: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 18px 40px -20px rgba(0, 0, 0, .7);
  --shadow-screen-phone: 0 0 0 1px rgba(255, 255, 255, .13), 0 0 0 5px var(--color-surface), 0 0 0 6px rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 0, 0, .9);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -50px rgba(0, 0, 0, .9);
  --shadow-scene: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -60px rgba(0, 0, 0, .95);
  --shadow-app-card: 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .95);
  --shadow-app-window: 0 0 0 1px rgba(255, 255, 255, .12), 0 4cqi 8cqi -3cqi rgba(var(--color-bg-rgb), .75);
  --shadow-portrait-final: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 120px -60px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(42, 146, 243, .35);
  --shadow-card-module: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 100px -60px rgba(0, 0, 0, .95);
  --shadow-panel: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .05);   /* App-Fläche in der Karte, Baustein-Oberfläche */
  --shadow-handle: 0 0 0 3px rgba(42, 146, 243, .35), 0 2px 6px rgba(0, 0, 0, .6);              /* Griff der Preisspanne */
  --shadow-mini-toast: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 24px -12px rgba(0, 0, 0, .9);
  --ring-hairline: inset 0 0 0 1px var(--color-line-strong);
  --ring-hairline-disabled: inset 0 0 0 1px var(--color-line);   /* Rand „aus“ (P9-3) */
  --ring-accent: inset 0 0 0 1px var(--color-accent);
  --ring-secondary: inset 0 0 0 1px var(--color-border-field);
  --ring-field: inset 0 0 0 1px var(--color-border-field);
  --ring-field-hover: inset 0 0 0 1px var(--color-text-tertiary);
  --ring-field-focus: inset 0 0 0 1.5px var(--color-accent);
  --ring-field-error: inset 0 0 0 1.5px var(--color-danger);
  --ring-field-focus-glow: inset 0 0 0 1.5px var(--color-focus), 0 0 0 4px rgba(42, 146, 243, .18);  /* Feld im Fokus (P4-B12) */
  --ring-field-error-focus: inset 0 0 0 1.5px var(--color-danger), 0 0 0 4px rgba(255, 143, 135, .18);  /* Feld mit Fehler im Fokus */
  --ring-field-done: inset 0 0 0 1px rgba(42, 146, 243, .7);        /* Feld, wenn die Eingabe angenommen ist (Prototyp .5 → .7 für 3 : 1) */
  --ring-danger-soft: inset 0 0 0 1px rgba(255, 143, 135, .45);     /* Fehlermeldung als Kasten */
  --ring-panel-accent: inset 0 0 0 1px rgba(42, 146, 243, .45);     /* Erfolgsblock */
  --ring-button-tool: inset 0 0 0 1.5px rgba(140, 196, 250, .7);    /* Werkzeug-Button (Diagnose starten) */
  --ring-spinner-track: inset 0 0 0 2px rgba(140, 196, 250, .25);   /* Bahn des Lade-Kreises */
  --ring-option: inset 0 0 0 1px rgba(255, 255, 255, .08);          /* Paket-Option in Ruhe */
  --ring-option-checked: inset 0 0 0 1px rgba(42, 146, 243, .6);    /* Paket-Option gewählt (ergänzend, Zustand trägt der Punkt) */
  --ring-radio: inset 0 0 0 1.5px var(--color-text-tertiary);
  --ring-radio-checked: inset 0 0 0 1.5px var(--color-accent);
  --ring-hint: inset 0 0 0 1px rgba(42, 146, 243, .3);              /* Verweis-Karte */
  --ring-hint-hover: inset 0 0 0 1px rgba(140, 196, 250, .6);
  --ring-chip-auto: inset 0 0 0 1px rgba(42, 146, 243, .55), 0 0 24px -6px rgba(42, 146, 243, .7);  /* Formel-Chip „Automatisierung“ */
  --ring-answer: inset 0 0 0 1px rgba(140, 196, 250, .32);          /* Antwort-Chip in Oberflächen */
  --ring-route-target: inset 0 0 0 1px rgba(140, 196, 250, .6), 0 0 22px -6px rgba(42, 146, 243, .7);  /* Ziel-Person im Routing */
  --ring-tab-active: inset 0 -2px 0 var(--color-accent);
  --ring-photo: 0 0 0 1px rgba(255, 255, 255, .1);                  /* Team-Foto */
  --ring-chain-mini: inset 0 0 0 1px rgba(140, 196, 250, .55), 0 0 10px rgba(42, 146, 243, .3);
  --ring-chain-auditor-mini: inset 0 0 0 1px rgba(227, 154, 59, .85), 0 0 12px rgba(227, 154, 59, .4);
  --ring-tag: inset 0 0 0 1px rgba(42, 146, 243, .32);
  --ring-decision: inset 0 0 0 1px rgba(42, 146, 243, .35);
  --ring-badge: inset 0 0 0 1px rgba(42, 146, 243, .38);
  --ring-bubble: inset 0 0 0 1px rgba(42, 146, 243, .4);
  --ring-status: inset 0 0 0 1px rgba(42, 146, 243, .42);
  --ring-stamp: inset 0 0 0 1px rgba(42, 146, 243, .45);
  --ring-active: inset 0 0 0 1px rgba(42, 146, 243, .55);
  --ring-agent: inset 0 0 0 1px rgba(140, 196, 250, .6);
  --ring-stamp-warm: inset 0 0 0 1px rgba(227, 154, 59, .5);
  --ring-app-icon: inset 0 0 0 1px rgba(255, 255, 255, .08);
  --ring-tile: inset 0 0 0 1px rgba(255, 255, 255, .06);
  --ring-column: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --ring-ticket: inset 0 0 0 1px rgba(255, 255, 255, .07);
  --ring-ticket-active: inset 0 0 0 1px rgba(42, 146, 243, .65), 0 0 2.4cqi -.6cqi rgba(42, 146, 243, .75);
  --ring-time-dot: inset 0 0 0 1.5px var(--color-accent);
  --ring-avatar: 0 0 0 2px var(--color-bg), 0 0 0 3px rgba(42, 146, 243, .5);
  --ring-person: 0 0 0 2px var(--color-bg), 0 0 0 3px rgba(42, 146, 243, .45);
  --ring-portrait: 0 0 0 1px var(--color-line-strong), 0 0 0 4px var(--color-bg), 0 0 0 5px rgba(42, 146, 243, .45);
  --ring-lead: 0 0 0 1px rgba(140, 196, 250, .85), 0 0 16px rgba(42, 146, 243, .55);  /* CI-Ring um Bernds Porträt in der Kette */
  --ring-chain-on: inset 0 0 0 1px rgba(140, 196, 250, .8), 0 0 14px rgba(42, 146, 243, .5);
  --ring-chain-auditor: inset 0 0 0 1px rgba(227, 154, 59, .85), 0 0 14px rgba(227, 154, 59, .42);
  --ring-highlight: inset 0 0 0 1px rgba(140, 196, 250, .95), 0 0 24px rgba(42, 146, 243, .55);
  --ring-cutout: 0 0 0 2px var(--color-app-solid);
  --glow-dot: 0 0 .6em var(--color-accent);
  --glow-pulse: 0 0 10px var(--color-accent);
  --glow-target: 0 0 0 3px rgba(42, 146, 243, .2), 0 0 14px rgba(42, 146, 243, .8);
  --glow-calendar: 0 0 8px rgba(42, 146, 243, .8);
  --glow-status: 0 0 8px rgba(42, 146, 243, .9);
  --glow-runner: 0 0 0 3px rgba(42, 146, 243, .38), 0 0 18px 5px rgba(42, 146, 243, .6);
  --glow-live: 0 0 10px rgba(88, 194, 125, .8);
  --glow-icon: 0 0 18px -2px rgba(42, 146, 243, .7);                /* CI-Kreis der Verweis-Karte */
  --glow-runner-sm: 0 0 0 3px rgba(42, 146, 243, .3), 0 0 12px 3px rgba(42, 146, 243, .55);
  --glow-runner-md: 0 0 0 3px rgba(42, 146, 243, .38), 0 0 14px 4px rgba(42, 146, 243, .6);
  --glow-warm-dot: 0 0 10px rgba(227, 154, 59, .8);

  /* ---------- Unschärfe (nur feste Ebenen, nie animiert) ---------- */
  --blur-header: blur(14px) saturate(140%);
  --blur-toast: blur(16px) saturate(140%);
  --blur-bar: blur(14px);
  --blur-glow: blur(20px);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* GSAP CustomEase „wdgOut“: alles, was ankommt */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* GSAP CustomEase „wdgIo“: Linien, Bahnen, Wechsel */
  --ease-gsap-mask: expo.out;          /* H1-Wörter aus der Maske (GSAP-Name) */
  --ease-gsap-follow: power3.out;      /* Nachlauf (Lichtwolke, Neigung des Creatives) */
  --ease-gsap-stagger: power1.in;      /* Verteilung im Wort-Versatz */
  --ease-gsap-snap: power2.inOut;      /* Einrasten der Bühne */
  --ease-gsap-pop: back.out(1.8);      /* kleine Marken treten auf: „oder“, Formel-Chips, Agenten (Module) */
  --ease-gsap-follow-soft: power2.out; /* weicher Nachlauf: Hof der Wolke, Foto im Hero (P8-core) */
  --ease-gsap-crossfade: power1.inOut; /* Deckkraft Kern/Glut der Wolke (P8-core) */
  --ease-gsap-exit: power2.in;         /* Wörter und Karten verlassen die Story-Bühne (P8-020) */
  --ease-gsap-fade: power1.out;        /* neue Headline blendet im FLIP auf (P8-020) */
  --ease-linear: linear;               /* nur Lade-Kreis (gleichmäßige Drehung) */
  --dur-press: 100ms;                  /* Druckrückmeldung (translateY 1px) */
  --dur-fast: 180ms;                   /* Hover, Farbe, Unterstrich */
  --dur-fade-fast: 300ms;              /* FAQ-Antwort: Deckkraft */
  --dur-state: 350ms;                  /* Fehlermeldung erscheint */
  --dur-base: 420ms;                   /* Kopfzeile, Menü-Icon, Leiste, Pfeil im Button, FAQ-Plus, Radio-Punkt */
  --dur-state-long: 450ms;             /* Erfolgsblock erscheint, FAQ-Antwort: Weg */
  --dur-fade: 500ms;                   /* Werkstück aktiv/inaktiv, FAQ-Höhe, Preis-Wechsel der Paketwahl */
  --dur-glint: 600ms;                  /* Lichtkante über dem aktiven Screen, Szenenwechsel */
  --dur-reveal-short: 700ms;           /* Kicker, kleine Auftritte */
  --dur-reveal: 900ms;                 /* Standard-Auftritt (gsap.defaults) */
  --dur-reveal-long: 1100ms;           /* Creative, Zeitbahn, Zähler */
  --dur-spin: 900ms;                   /* eine Drehung des Lade-Kreises (läuft nur während „wird vorbereitet“) */
  --dur-pulse: 1400ms;                 /* Puls-Ring der Mitteilung (2 Durchläufe, kein Loop) */
  --dur-queue: 2400ms;                 /* Prüfpunkte der Diagnose reihen sich ein */
  --dur-demo-diagnose: 6.4s;           /* Demo-Analyse im Erstkontakt (8 Prüfpunkte × 0,8 s; live ≈ 30 s) */
  --dur-redirect-pause: 1200ms;        /* „Gleich öffnet sich …“ vor der Weiterleitung zur Diagnose (ui.js) */
  --delay-content: 80ms;               /* FAQ-Antwort startet nach der Höhe */
  --dur-film-sicher: 1500ms;           /* Sicherheitsnetz film-vor: Hero-Teile spätestens nach 1,5 s sichtbar (Motion, K-MOT-06, P9-3) */
  --dur-font-wait: 300ms;              /* Wartezeit auf die Schrift vor dem Intro (Motion, Lauf 4) */
  --dur-intro: 3000ms;                 /* Hero-Intro gesamt; Inhalt ab 0 ms bedienbar */
  --motion-distance-digit: .28em;      /* neuer Preis steigt beim Paketwechsel auf */
  --motion-distance-2xs: 4px;          /* Fehlermeldung/Erfolgsblock fallen ein */
  --motion-distance-xs: 6px;           /* FAQ-Antwort, Prüfpunkte */
  --motion-distance-sm: 14px;          /* Hero-Elemente, FAQ-Fragen */
  --motion-distance: 18px;             /* Standard-Auftritt */
  --motion-distance-md: 20px;          /* Kapitelköpfe */
  --motion-distance-lg: 24px;          /* Bilder, Szenen mobil */
  --motion-distance-card: 28px;        /* Baustein-Karten (paarweise) */
  --motion-distance-card-lg: 32px;     /* Preis-Karten */
  --motion-distance-xl: 36px;          /* Creative im Hero */
  --motion-distance-rise: 70px;        /* Website steigt in Story 1 auf (gescrubbt) */
  --motion-stagger-words-tight: 40ms;
  --motion-stagger-words: 45ms;        /* H1 Wort für Wort */
  --motion-stagger-words-loose: 50ms;  /* Story-Zeilen */
  --motion-stagger-tight: 70ms;
  --motion-stagger: 80ms;              /* Gruppen */
  --motion-stagger-list: 50ms;         /* Listen: FAQ-Fragen, Preis-Listen, Prüfpunkte */
  --motion-stagger-queue: 120ms;       /* Prüfpunkte im Erfolg, Team-Fotos */
  --motion-stagger-pair: 140ms;        /* zweite Karte einer Baustein-Reihe */
  --motion-stagger-card: 160ms;        /* zweite Preis-Karte */
  --motion-stagger-slow: 280ms;        /* langsame Folge (Motion, Lauf 4) */
  --motion-word-dim: .25;              /* gedämpfte Wörter vor dem Satz-Reveal (.le-satz .w.aus, Lauf 4; war .28) */
  --motion-opacity-start: .01;         /* Startdeckkraft für Auftritte, die messbar „gerendert“ bleiben sollen (Motion, Lauf 4) */
  --scrub-story: .8;                   /* Story 1, gepinnt */
  --scrub-stage: .9;                   /* Referenzen-Bühne, gepinnt */
  --pin-story-vh: 3.9;                 /* Story 1: Scrollweg in Bildschirmhöhen */
  --pin-stage-vh-per-item: .78;        /* Bühne: Scrollweg je Werkstück (× 7 Übergänge) */
  --snap-stage-min: 250ms;             /* Einrasten der Referenzen-Bühne: kürzeste Dauer (P8-030) */
  --snap-stage-max: 700ms;             /* … längste Dauer */
  --snap-stage-delay: 100ms;           /* … Wartezeit nach dem Scrollen */
  --motion-distance-parallax: 90px;    /* Parallaxe der Lichtwolke (P8-core) */
  --wolke-fade-hof: 1600ms;            /* Hof der Lichtwolke blendet auf (P8-core) */
  --motion-scale-agent-focus: 1.75;    /* Agent bei der Arbeit (Über, Workflow) */
  --dur-agent-clip: 2000ms;            /* Zeitfenster je Agenten-Clip (Über, Workflow) */
  --motion-agent-clip-rate: 1.5;       /* Wiedergabe-Tempo der Agenten-Clips (≈ 3 s Material je Clip) */
  --lenis-lerp: .09;
  --lenis-wheel: .9;
  --lenis-anchor-offset: 0px;         /* P5: Lenis rechnet scroll-padding-top (base.css) und scroll-margin-top selbst ein; vorher -88px → Sprungziele ~88 px zu tief */

  /* ---------- Ebenen ---------- */
  --z-wolke: 0;
  --z-content: 1;
  --z-raised: 2;                       /* lokal: Karte über Bild */
  --z-label: 3;                        /* lokal: Label über Karte und Bild */
  --z-device-chrome: 5;
  --z-device-overlay: 7;
  --z-device-scan: 8;
  --z-bar: 45;
  --z-menu: 49;
  --z-header: 50;
  --z-grain: 60;
  --z-skip: 100;
}

@media (min-width: 1024px) {
  :root {
    --rand: clamp(68px, 6.8vw, 108px);
    --kopf-h: 76px;
    --size-logo: 31px;
    --size-logo-footer: 26px;
  }
}