/* ==========================================================================
   okapio – Design Tokens
   Besitzer: Agent DESIGN-SYSTEM
   Regel: Alle Farben, Abstände, Radien, Schatten, Schriftgrößen, Easing-Kurven
   und Dauern stehen NUR hier. Andere Dateien verwenden var(--…).
   Kontrastwerte: siehe /docs/design-tokens.md (per tools/contrast.mjs berechnet).
   ========================================================================== */

/* ---------- Schriften (self-hosted, Latin-Subset, OFL) ----------
   Space Grotesk: Überschriften (wght 400–700) – technisch, mit eigenem Charakter.
   Inter: Fließtext und Bedienelemente (wght 400–700).
   JetBrains Mono: technische Labels, Nummern, Kicker (wght 400–600).
   Alle Dateien liegen auf dem eigenen Server; es gibt keine Anfragen an Google oder andere Dritte. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Fallback-Schriften mit Metrik-Anpassung gegen Layoutsprung beim Schriftwechsel
   (Zielwerte mit fontTools gemessen: OS/2-Metriken und buchstabengewichtete Durchschnittsbreite). */
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 109%;
  ascent-override: 90.3%;
  descent-override: 26.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 106.3%;
  ascent-override: 91.1%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;   /* Standard: hell. Dunkelmodus nur per Schalter (html[data-mode="dark"]), gespeichert im Browser. */

  /* ---------- Primitive: Palette „Tiefblau & Frost" ---------- */
  /* Nacht (Tiefblau, dunkle Basis) */
  --night-950: #0a101b;
  --night-900: #0e1522;   /* dunkler Grund (Referenz Lovable) */
  --night-800: #1a202b;
  --night-700: #2b3043;
  --night-600: #3a4058;
  /* Frost (kühles Off-White, helle Basis) */
  --white: #ffffff;       /* Button-Schrift auf Logo-Blau (4,56:1) */
  --frost-50: #fcfdfe;
  --frost-100: #f3f5f8;
  --frost-200: #e7ebf1;
  --frost-300: #d3dae4;
  /* Tinte (Text auf Hell) */
  --ink-900: #001842;
  --ink-700: #3b4a5e;
  --ink-600: #4b5b70;
  /* Nebel (Text/Linien auf Dunkel) */
  --mist-300: #a6b4c7;
  --mist-400: #8a9bb2;
  /* Logo-Blau (Hauptakzent: Handlung, Risiko, Findings) – Basis #0A6CFF */
  --blue-300: #6aa8ff;   /* Akzent-Text auf Dunkel */
  --blue-400: #4d94ff;   /* Grafik auf Dunkel */
  --blue-500: #0a6cff;   /* Logo-Blau: Buttons, Grafik auf Hell */
  --blue-600: #005be6;   /* Akzent-Text auf Hell, Hover */
  /* Logo-Cyan (NUR „erkannt / geschützt" und Hervorhebung auf Dunkel) – Basis #00DAF2 */
  --cyan-100: #b3f4fb;   /* Platzhalter-Markierung */
  --cyan-300: #00daf2;   /* Logo-Cyan: auf Dunkel */
  --cyan-700: #006877;   /* auf Hell (Text/Grafik) */
  /* Fehler (Formular): gedecktes Rot, klar vom Blau unterscheidbar */
  --error-300: #ff9aa6;
  --error-600: #c01f36;
  /* Linien (Grafik, ≥ 3:1 gegen Fläche) */
  --slate-400: #6f86a0;
  --slate-500: #66758a;
  /* Dunst (kühle Tönung: „dark"-Sektionen im hellen Modus) */
  --haze-50: #f7f9fc;
  --haze-100: #e8eef6;
  --haze-200: #d9e3ef;
  --haze-300: #c2cfdf;
  /* Dämmerung (Flächen im Dunkelmodus) */
  --dusk-950: #0a101b;
  --dusk-900: #0e1522;
  --dusk-800: #151b27;
  --dusk-700: #1a202b;
  --dusk-600: #2b3043;
  /* WhatsApp (Kontakt-Button): weißes Symbol auf dieser Fläche ≥ 4,5:1 */
  --wa-green: #14804a;
  --wa-green-hover: #0f6a3d;

  /* ---------- Zustände ---------- */
  --state-error-text: var(--error-600);     /* auf Hell ≥ 5,5:1 */
  --state-error-text-dark: var(--error-300); /* auf Dunkel ≥ 7:1 */
  --state-ok-text: var(--cyan-700);          /* auf Hell 5.3:1 */
  --state-ok-text-dark: var(--cyan-300);
  --placeholder-bg: var(--cyan-100);
  --placeholder-fg: var(--night-900);       /* 14:1 */

  /* ---------- Semantik: HELLES Thema (Standard) ---------- */
  --c-bg: var(--frost-100);
  --c-bg-alt: var(--frost-200);
  --c-surface: var(--frost-50);
  --c-surface-2: var(--frost-200);
  --c-text: var(--ink-900);
  --c-text-muted: var(--ink-700);
  --c-line: var(--frost-300);          /* dekorativ */
  --c-line-strong: var(--slate-500);  /* Grafik/Bedienelemente ≥ 3:1 */
  --c-accent: var(--blue-500);        /* Fläche/Grafik */
  --c-accent-text: var(--blue-600);   /* Text-Akzent */
  --c-safe: var(--cyan-700);
  --c-focus: var(--blue-500);
  --c-btn-bg: var(--blue-500);
  --c-btn-bg-hover: var(--blue-600);
  --c-btn-text: var(--white);       /* 4,6:1 auf blue-500, 5,8:1 auf blue-600 */
  --c-btn-ghost-border: var(--ink-900);
  --c-error: var(--state-error-text);
  --c-ok: var(--state-ok-text);
  --c-stripe: var(--ink-900);
  --c-grad-tint: #b9c9e2;
  --c-grad-start: #ffffff;
  --c-glow: 5%;

  /* Illustrationen (SVGs verwenden ausschließlich diese Variablen) */
  --ill-line: var(--slate-500);       /* Kanten, Konturen */
  --ill-line-soft: var(--frost-300);   /* Raster, Hilfslinien */
  --ill-ink: var(--ink-900);          /* Kontur-Akzent */
  --ill-surface: var(--frost-50);      /* Knoten-/Kartenfüllung */
  --ill-surface-2: var(--frost-200);
  --ill-risk: var(--blue-500);
  --logo-dot: var(--cyan-300);   /* Logo i-Punkt: auf Hell Cyan (White-Mode-Logo) */
  --ill-safe: var(--cyan-700);
  --ill-muted: var(--ink-600);

  /* ---------- Typografie ---------- */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Inter Fallback", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 600;      /* H1/H2 */
  --fw-heading: 600;      /* H3/H4 */

  /* Fluide Skala (rem; min 12 px) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --fs-h4: 1.125rem;
  --fs-h3: clamp(1.3rem, 0.8vw + 1rem, 1.75rem);
  --fs-h2: clamp(2.05rem, 2.5vw + 1rem, 3.75rem);
  --fs-h1: clamp(2.5rem, 3.8vw + 1rem, 5.1rem);
  --fs-num: clamp(3rem, 4.5vw + 1.1rem, 5.75rem);
  --fs-kicker: 0.75rem;
  --fs-mono: 0.8125rem;

  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-text: 1.65;
  --ls-display: -0.035em;
  --ls-heading: -0.018em;
  --ls-kicker: 0.1em;
  --ls-mono: 0;
  --measure: 62ch;

  /* ---------- Abstände (4-px-Basis, rem) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 78rem;
  --container-narrow: 52rem;
  --header-h: 4.75rem;
  --header-h-shrunk: 3.75rem;

  /* ---------- Radien ---------- */
  --r-xs: 0.375rem;
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.75rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  /* ---------- Schatten ---------- */
  --shadow-1: 0 1px 2px rgb(0 24 66 / 0.06), 0 6px 16px -8px rgb(0 24 66 / 0.16);
  --shadow-2: 0 2px 4px rgb(0 24 66 / 0.06), 0 22px 44px -20px rgb(0 24 66 / 0.28);
  --shadow-header: 0 1px 0 rgb(252 253 254 / 0.08);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);        /* weiche, lange Auslaufkurve für Reveals */
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);         /* Wischer/Flächen (Buttons, Masken) */
  --dur-fast: 150ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-draw: 2380ms;
  --dur-loop: 5200ms;
  --dur-check: 680ms;
  --dur-pop: 850ms;
  --dur-el: 1020ms;
  --dur-grow: 1530ms;
  --dur-draw-s: 1700ms;
  --dur-draw-m: 2210ms;
  --dur-draw-l: 3400ms;
  --dur-reveal: 1100ms;
  --stagger: 90ms;
  --reveal-distance: 2rem;

  /* ---------- Linien, Fokus, Größen (Komponenten) ---------- */
  --line-w: 1px;
  --line-w-strong: 2px;
  --line-w-accent: 6px;
  --focus-w: 3px;
  --focus-offset: 3px;
  --blur-header: 14px;
  --offscreen: -10000px;
  --size-touch: 2.75rem;      /* Mindest-Zielgröße (WCAG 2.5.8: ≥ 24 px, hier 44 px) */
  --size-control: 3rem;
  --size-row: 3.5rem;
  --size-icon: 3.5rem;
  --size-divider: 3.5rem;
  --size-brand: 8.5rem;
  --size-brand-footer: 8.25rem;
  --size-team-photo: 16rem;         /* Breite des Team-Porträts */
  --size-sovereign-icon: 3.25rem;   /* Schild im Hosted-in-Germany-Band */
  --size-host-icon: 1rem;           /* Schild im Hosted-in-Germany-Etikett */
  --size-marker: 0.6rem;
  --size-edge: 5rem;
  --pad-card: clamp(1.5rem, 3vw, 2.75rem);
  --measure-lead: 34rem;
  --measure-card: 36rem;
  --measure-note: 60ch;
  --measure-label: 22ch;
  --measure-h2: 20ch;
  --measure-h1: 12em;
  --measure-section: 48rem;
  --w-hero-stripes: min(70vw, 56rem);
  --hero-min: 52rem;
  --col-trust: 14rem;
  --col-num: 4rem;
  --tl-pad-lg: 9rem;
  --lift-sm: -0.125rem;
  --lift: -0.25rem;
  --size-dot: 0.5rem;
  --size-progress: 2px;
  --size-spot: 22rem;         /* Radius des Zeiger-Lichtkegels auf Karten */
  --grid-cell: 3.5rem;        /* Raster-Hintergrund (Werkzeuge) */

  /* ---------- Ebenen ---------- */
  --z-base: 1;
  --z-fab: 90;
  --z-header: 100;
  --z-dropdown: 110;
  --z-skip: 200;
  --size-fab: 3.25rem;

  /* ---------- Streifenmuster (Okapi-Motiv) ----------
     Vertikale Streifen unterschiedlicher Stärke in einer Kachel von 72 px.
     Farbe über --stripe-color (Standard: --c-stripe). Verwendung:
       background-image: var(--stripes);  background-size: var(--stripe-tile) 100%;
     Zwei Dichten: --stripes (normal), --stripes-dense (engere Kachel).
     Auflösen: --stripe-fade-down / --stripe-fade-right als mask-image.        */
  --stripe-tile: 72px;
  --stripe-tile-dense: 36px;
  --stripe-opacity: 0.09;
  --stripe-fade-down: linear-gradient(to bottom, black 0%, transparent 100%);
  --stripe-fade-up: linear-gradient(to top, black 0%, transparent 100%);
  --stripe-fade-right: linear-gradient(to right, black 0%, transparent 100%);
  --stripe-fade-band: linear-gradient(to bottom, transparent 0%, black 45%, black 55%, transparent 100%);
}

/* Streifenmuster werden je Theme-Scope neu aufgelöst, damit --c-stripe (hell/dunkel) greift.
   (Abgeleitete var()-Werte werden sonst auf :root eingefroren.) */
:root,
[data-theme] {
  /* Abgeleitete Tönungen (je Thema neu berechnet) */
  --c-accent-tint: color-mix(in srgb, var(--c-accent) 12%, transparent);
  --c-accent-glow: color-mix(in srgb, var(--c-accent) 9%, transparent);
  --c-text-tint: color-mix(in srgb, var(--c-text) 6%, transparent);
  --c-grid: color-mix(in srgb, var(--c-text) 7%, transparent);
  --c-glass: color-mix(in srgb, var(--c-bg) 93%, transparent);
  /* Hintergrund-Verlauf je Sektion: von der Grundfarbe zu einem Tönungston, dazu weiches Leuchten oben rechts.
     --c-grad-tint und --c-glow setzt jedes Thema; Text-Kontraste bleiben, weil der Verlauf eng um --c-bg liegt. */
  --c-bg-image:
    radial-gradient(70rem 45rem at 92% -8%, color-mix(in srgb, var(--blue-500) var(--c-glow), transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c-bg) 90%, var(--c-grad-start)) 0%, var(--c-bg) 40%, color-mix(in srgb, var(--c-bg) 72%, var(--c-grad-tint)) 100%);
  --stripe-color: var(--c-stripe);
  --stripes: repeating-linear-gradient(
    90deg,
    var(--stripe-color) 0 2px, transparent 2px 10px,
    var(--stripe-color) 10px 15px, transparent 15px 20px,
    var(--stripe-color) 20px 21px, transparent 21px 34px,
    var(--stripe-color) 34px 42px, transparent 42px 47px,
    var(--stripe-color) 47px 49px, transparent 49px 60px,
    var(--stripe-color) 60px 63px, transparent 63px 72px
  );
  --stripes-dense: repeating-linear-gradient(
    90deg,
    var(--stripe-color) 0 1px, transparent 1px 5px,
    var(--stripe-color) 5px 8px, transparent 8px 11px,
    var(--stripe-color) 11px 12px, transparent 12px 20px,
    var(--stripe-color) 20px 24px, transparent 24px 30px,
    var(--stripe-color) 30px 31px, transparent 31px 36px
  );
}

/* ---------- Semantik: HELLES Thema explizit (für helle Blöcke in dunklen Sektionen) ---------- */
[data-theme="light"] {
  color-scheme: light;
  --c-bg: var(--frost-100);
  --c-bg-alt: var(--frost-200);
  --c-surface: var(--frost-50);
  --c-surface-2: var(--frost-200);
  --c-text: var(--ink-900);
  --c-text-muted: var(--ink-700);
  --c-line: var(--frost-300);
  --c-line-strong: var(--slate-500);
  --c-accent: var(--blue-500);
  --c-accent-text: var(--blue-600);
  --c-safe: var(--cyan-700);
  --c-focus: var(--blue-500);
  --c-btn-bg: var(--blue-500);
  --c-btn-bg-hover: var(--blue-600);
  --c-btn-text: var(--white);
  --c-btn-ghost-border: var(--ink-900);
  --c-error: var(--state-error-text);
  --c-ok: var(--state-ok-text);
  --c-stripe: var(--ink-900);
  --c-grad-tint: #b9c9e2;
  --c-grad-start: #ffffff;
  --c-glow: 5%;
  --ill-line: var(--slate-500);
  --ill-line-soft: var(--frost-300);
  --ill-ink: var(--ink-900);
  --ill-surface: var(--frost-50);
  --ill-surface-2: var(--frost-200);
  --ill-risk: var(--blue-500);
  --logo-dot: var(--cyan-300);   /* Logo i-Punkt: auf Hell Cyan (White-Mode-Logo) */
  --ill-safe: var(--cyan-700);
  --ill-muted: var(--ink-600);
  --shadow-1: 0 1px 2px rgb(0 24 66 / 0.06), 0 6px 16px -8px rgb(0 24 66 / 0.16);
  --shadow-2: 0 2px 4px rgb(0 24 66 / 0.06), 0 22px 44px -20px rgb(0 24 66 / 0.28);
}

/* ---------- Semantik: DUNKLES Thema ----------
   „night" nutzt dieselben Werte, wird aber im hellen Modus NICHT zu Dunst aufgehellt:
   bewusst dunkle Bänder (Werkzeuge, Footer) für einen klaren Rhythmus. Kontraste = dunkles Thema (siehe Doku). */
[data-theme="dark"],
[data-theme="night"] {
  color-scheme: dark;
  --c-bg: var(--night-900);
  --c-bg-alt: var(--night-950);
  --c-surface: var(--night-800);
  --c-surface-2: var(--night-700);
  --c-text: var(--frost-50);
  --c-text-muted: var(--mist-300);
  --c-line: var(--night-600);
  --c-line-strong: var(--slate-400);
  --c-accent: var(--blue-400);
  --c-accent-text: var(--blue-300);
  --c-safe: var(--cyan-300);
  --c-focus: var(--cyan-300);
  --c-btn-bg: var(--blue-500);
  --c-btn-bg-hover: var(--blue-600);
  --c-btn-text: var(--white);
  --c-btn-ghost-border: var(--frost-50);
  --c-error: var(--state-error-text-dark);
  --c-ok: var(--state-ok-text-dark);
  --c-stripe: var(--frost-50);
  --c-grad-tint: #40436d;
  --c-grad-start: #000000;
  --c-glow: 7%;

  --ill-line: var(--slate-400);
  --ill-line-soft: var(--night-600);
  --ill-ink: var(--frost-50);
  --ill-surface: var(--night-800);
  --ill-surface-2: var(--night-700);
  --ill-risk: var(--blue-400);
  --logo-dot: var(--blue-500);   /* Logo i-Punkt: auf Dunkel Blau (Darkmode-Logo) */
  --ill-safe: var(--cyan-300);
  --ill-muted: var(--mist-300);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 22px 44px -20px rgb(0 0 0 / 0.7);
}

/* ---------- HELLER MODUS (Standard): „dark"-Sektionen werden zu kühl getönten Flächen ----------
   Gemischter Grundton: Header, Hero, Werkzeuge, Kontakt und Footer tragen „night" und bleiben dunkel;
   „dark" bedeutet im hellen Modus: kühle Tönung (Dunst). Höhere Spezifität als [data-theme="dark"]. */
:root:not([data-mode="dark"]) [data-theme="dark"] {
  color-scheme: light;
  --c-bg: var(--haze-100);
  --c-bg-alt: var(--haze-200);
  --c-surface: var(--haze-50);
  --c-surface-2: var(--haze-200);
  --c-text: var(--ink-900);
  --c-text-muted: var(--ink-700);
  --c-line: var(--haze-300);
  --c-line-strong: var(--slate-500);
  --c-accent: var(--blue-500);
  --c-accent-text: var(--blue-600);
  --c-safe: var(--cyan-700);
  --c-focus: var(--blue-500);
  --c-btn-bg: var(--blue-500);
  --c-btn-bg-hover: var(--blue-600);
  --c-btn-text: var(--white);
  --c-btn-ghost-border: var(--ink-900);
  --c-error: var(--state-error-text);
  --c-ok: var(--state-ok-text);
  --c-stripe: var(--ink-900);
  --c-grad-tint: #b9c9e2;
  --c-grad-start: #ffffff;
  --c-glow: 5%;

  --ill-line: var(--slate-500);
  --ill-line-soft: var(--haze-300);
  --ill-ink: var(--ink-900);
  --ill-surface: var(--haze-50);
  --ill-surface-2: var(--haze-200);
  --ill-risk: var(--blue-500);
  --logo-dot: var(--cyan-300);   /* Logo i-Punkt: auf Hell Cyan (White-Mode-Logo) */
  --ill-safe: var(--cyan-700);
  --ill-muted: var(--ink-600);

  --shadow-1: 0 1px 2px rgb(0 24 66 / 0.06), 0 6px 16px -8px rgb(0 24 66 / 0.16);
  --shadow-2: 0 2px 4px rgb(0 24 66 / 0.06), 0 22px 44px -20px rgb(0 24 66 / 0.28);
  --shadow-header: 0 1px 0 rgb(0 24 66 / 0.08);
}

/* ---------- Header vom Hero abheben ----------
   Header und Hero tragen beide „night". Damit sie sich trennen, liegt der Header einen Ton daneben:
   heller Modus eine Stufe dunkler (Hero night-900), Dunkelmodus eine Stufe heller (Hero night-950).
   Text auf night-950 19,5:1, gedämpft 8,9:1; auf night-900 siehe Kontrasttabelle. */
.site-header[data-theme] { --c-bg: var(--night-950); --c-line: var(--night-700); }
:root[data-mode="dark"] .site-header[data-theme] { --c-bg: var(--night-900); --c-line: var(--night-600); }

/* ---------- DUNKELMODUS (Schalter): alle drei Themen werden dunkle Dämmerungs-Töne ----------
   Gemeinsame Basis für root, light, sand und dark; danach Abstufung je Thema. */
:root[data-mode="dark"],
:root[data-mode="dark"] [data-theme="light"],
:root[data-mode="dark"] [data-theme="sand"],
:root[data-mode="dark"] [data-theme="dark"] {
  color-scheme: dark;
  --c-bg: var(--dusk-900);
  --c-bg-alt: var(--dusk-950);
  --c-surface: var(--dusk-800);
  --c-surface-2: var(--dusk-700);
  --c-text: var(--frost-50);
  --c-text-muted: var(--mist-300);
  --c-line: var(--dusk-600);
  --c-line-strong: var(--mist-400);   /* ≥ 4:1 auf dusk-700 … dusk-950 */
  --c-accent: var(--blue-400);
  --c-accent-text: var(--blue-300);
  --c-safe: var(--cyan-300);
  --c-focus: var(--cyan-300);
  --c-btn-bg: var(--blue-500);
  --c-btn-bg-hover: var(--blue-600);
  --c-btn-text: var(--white);
  --c-btn-ghost-border: var(--frost-50);
  --c-error: var(--state-error-text-dark);
  --c-ok: var(--state-ok-text-dark);
  --c-stripe: var(--frost-50);
  --c-grad-tint: #40436d;
  --c-grad-start: #000000;
  --c-glow: 7%;

  --ill-line: var(--mist-400);
  --ill-line-soft: var(--dusk-600);
  --ill-ink: var(--frost-50);
  --ill-surface: var(--dusk-800);
  --ill-surface-2: var(--dusk-700);
  --ill-risk: var(--blue-400);
  --logo-dot: var(--blue-500);   /* Logo i-Punkt: auf Dunkel Blau (Darkmode-Logo) */
  --ill-safe: var(--cyan-300);
  --ill-muted: var(--mist-300);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 22px 44px -20px rgb(0 0 0 / 0.7);
  --shadow-header: 0 1px 0 rgb(252 253 254 / 0.08);
}
:root[data-mode="dark"] [data-theme="sand"] {
  --c-bg: var(--dusk-800);
  --c-bg-alt: var(--dusk-900);
  --c-surface: var(--dusk-700);
  --c-surface-2: var(--dusk-600);
  --ill-surface: var(--dusk-700);
  --ill-surface-2: var(--dusk-600);
  --ill-line-soft: var(--dusk-600);
}
:root[data-mode="dark"] [data-theme="dark"] {
  --c-bg: var(--dusk-950);
  --c-bg-alt: var(--night-950);
  --c-surface: var(--dusk-800);
  --c-surface-2: var(--dusk-700);
}
/* Im Dunkelmodus liegt „night" eine Stufe tiefer als die Dämmerungs-Sektionen */
:root[data-mode="dark"] [data-theme="night"] {
  --c-bg: var(--night-950);
  --c-bg-alt: var(--night-950);
  --c-surface: var(--night-800);
  --c-surface-2: var(--night-700);
}

/* „sand": zweite helle Fläche (kühles Grau, Name aus historischen Gründen) für Sektionswechsel ohne Dunkel */
[data-theme="sand"] {
  --c-bg: var(--frost-200);
  --c-bg-alt: var(--frost-100);
  --c-surface: var(--frost-50);
  --c-line: var(--frost-300);
  --c-line-strong: var(--slate-500);
  --c-text-muted: var(--ink-700);
  --ill-surface: var(--frost-50);
  --ill-surface-2: var(--frost-100);
  --ill-line-soft: var(--frost-300);
}