/* HENOS · Design-Tokens — EINZIGE Quelle der Wahrheit für Farben & Schatten.
 *
 * Regeln:
 *  - Komponenten beziehen Farben ausschließlich über diese Tokens (var(--c-…)).
 *  - Keine hartkodierten Hex-/rgba-Werte in Stylesheets, Inline-Styles oder JS.
 *  - Ausnahmen (technisch bedingt, hier dokumentiert):
 *      · <meta name="theme-color"> kann keine CSS-Variablen lesen → #050E3A (= --c-navy-deep)
 *      · Standalone-SVG-Dateien (assets/henos-logo.svg, henos-favicon.svg)
 *      · E-Mail-HTML (api/signup.js) — E-Mail-Clients unterstützen keine CSS-Variablen;
 *        dort sind die Werte dieser Palette inline gespiegelt (Mapping im Kommentar dort).
 *
 * Geladen via @import in assets/henos.css; Seiten ohne henos.css (check.html,
 * companion-demo.html) binden diese Datei direkt per <link> ein. Damit ist dies
 * die einzige Datei, die auf ALLEN Seiten liegt — deshalb steht am Ende
 * zusätzlich die eine Basis-Typo-Regel für <em> in Überschriften.
 */

:root {
  /* ---- Typografie ----
   * EINE Familie für die gesamte Oberfläche (Headlines + Fließtext): Inter.
   * Vereinheitlicht 2026-06-12 (vorher Fraunces-Serif-Headlines — wirkte
   * uneinheitlich). Ausnahme: .doc-preview zeigt bewusst Serif, weil sie
   * das erzeugte PDF (Times) abbildet. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-doc:  Georgia, 'Times New Roman', serif;

  /* ---- Flächen ---- */
  --c-bg:           #F8F9FD;  /* Seitenhintergrund, kühles Off-White */
  --c-surface:      #FFFFFF;  /* Karten / Panels hell */
  --c-surface-soft: #EFF3FB;  /* abgesetzte helle Flächen (Chips, deaktivierte Buttons) */

  /* ---- Marke ---- */
  --c-navy:         #06176F;  /* Primär: dunkle Panels, dunkle Buttons, Logo */
  --c-navy-deep:    #050E3A;  /* Display-Headlines (Serif), Header/Footer, tiefstes Navy */

  /* ---- Akzent / Status ---- */
  --c-green:        #34C270;  /* Primär-CTA, Success, Fortschrittsbalken */
  --c-green-bright: #27D26C;  /* Heller Akzent: kursive Display-Wörter, Akzente auf Navy */
  --c-green-hover:  #2BAD64;  /* Hover-Zustand grüner CTAs */
  --c-amber:        #C29A1E;  /* Warnung / „Update empfohlen" (Flächen, Borders, Dots) */
  --c-red:          #B94A41;  /* Fehler / „fehlt" */

  /* Status-Tints (helle Hintergrundflächen) */
  --c-green-soft:   #E3F7EC;
  --c-amber-soft:   #F7EFD8;
  --c-red-soft:     #F8E6E4;

  /* Textsichere dunkle Status-Varianten (≥ 4.5:1 auch auf den Soft-Tints —
   * WCAG AA). Für TEXT auf hellen Flächen statt --c-green/--c-amber/--c-red. */
  --c-green-deep:   #1E7A47;
  --c-amber-deep:   #8A6C12;
  --c-red-deep:     #9A3A32;

  /* Helle Status-Varianten für Text/Zahlen auf Navy-Panels */
  --c-amber-bright: #E2BC4E;
  --c-red-bright:   #E58B80;

  /* ---- Struktur & Text ---- */
  --c-track:        #E8EFF9;  /* Fortschritts-Track, feine Linien / Borders */
  --c-text:         #13161D;  /* Fließtext, fast schwarz */
  --c-text-muted:   #5C6B82;  /* Eyebrow-Labels, Sekundärtext */

  /* ---- RGB-Kanäle für rgba()-Ableitungen (Alpha-Varianten) ----
   * Verwendung: rgba(var(--c-green-rgb), 0.18) */
  --c-navy-rgb:     6, 23, 111;
  --c-navy-deep-rgb: 5, 14, 58;
  --c-green-rgb:    52, 194, 112;
  --c-white-rgb:    255, 255, 255;
  --c-text-rgb:     19, 22, 29;

  /* ---- Schatten ----
   * Drei Stufen statt Ad-hoc-Werten. --shadow ist die Standard-Kartenebene. */
  --shadow-sm: 0 1px 2px rgba(var(--c-navy-rgb), 0.05), 0 2px 6px rgba(var(--c-navy-rgb), 0.04);
  --shadow: 0 2px 8px rgba(var(--c-navy-rgb), 0.04), 0 12px 40px rgba(var(--c-navy-rgb), 0.08);
  --shadow-lg: 0 4px 12px rgba(var(--c-navy-rgb), 0.06), 0 24px 60px rgba(var(--c-navy-rgb), 0.12);

  /* ---- Typo-Skala ----
   * Feste Stufen. KEINE Zwischenwerte, insbesondere keine halben Pixel
   * (12.5px, 13.8px o. ä.) — die sind das sicherste Zeichen dafür, dass eine
   * Komponente nach Augenmaß statt nach System gebaut wurde. */
  /* Fließtext & UI */
  --text-2xs:  11px;  /* Rechtliches, Micro-Labels */
  --text-xs:   12px;  /* Eyebrow, Captions, Badges */
  --text-sm:   13px;  /* Sekundärtext, dichte UI */
  --text-md:   14px;  /* UI-Standard */
  --text-base: 15px;  /* Fließtext UI */
  --text-lg:   16px;  /* Fließtext Marketing */
  --text-xl:   18px;  /* Lead-Absatz */
  --text-2xl:  20px;  /* Karten-Titel, Fragen */
  /* Überschriften */
  --text-3xl:  24px;
  --text-4xl:  28px;
  --text-5xl:  32px;
  --text-6xl:  40px;
  /* Display — nur Hero und große Kennzahlen */
  --text-7xl:  44px;
  --text-8xl:  56px;
  --text-9xl:  72px;

  /* ---- Radius-Skala ----
   * Vier Stufen + Pille + Kreis. Vorher waren 15 verschiedene Werte im Einsatz
   * (4/6/7/8/9/10/11/12/14/15/16/18/22px) — einzeln unsichtbar, in Summe unruhig. */
  --radius-sm:     6px;   /* Badges, Chips, kleine Marker */
  --radius-md:     10px;  /* Inputs, Buttons, kleine Karten */
  --radius-lg:     14px;  /* Karten, Panels */
  --radius-xl:     20px;  /* Große Flächen, Hero-Panels */
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Button-Größen ----
   * Drei Größen für die ganze Oberfläche. Vorher hatte praktisch jede
   * Button-Variante ihr eigenes Padding (11/22, 16/34, 14/26, 11/20, 16/32) —
   * nebeneinander stehende Buttons waren dadurch unterschiedlich hoch. */
  --btn-pad-sm: 10px 18px;
  --btn-pad-md: 12px 24px;
  --btn-pad-lg: 16px 32px;

  /* ---- Abstands-Skala (4px-Raster) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  /* ---- Heading-Akzent ----
   * Betonte Wörter in Überschriften stehen in Markengrün — aber NICHT kursiv.
   * Kursiv + Signalfarbe zusammen war das, was wie ein generiertes Template
   * aussah; die Farbe allein ist die Handschrift von HENOS.
   *
   * Auf hellem Grund bewusst --c-green-deep und nicht --c-green-bright:
   * das helle Grün kommt auf #F8F9FD nur auf rund 2:1 und ist als Text nicht
   * lesbar. --c-green-deep liegt bei ~5,3:1 (WCAG AA) und sieht in der
   * Überschrift praktisch gleich aus. Auf Navy ist es umgekehrt. */
  --heading-accent:      var(--c-green-deep);
  --heading-accent-dark: var(--c-green-bright);
}

/* ---- Basis-Typografie: Akzent in Überschriften -------------------------
 * Einzige Nicht-Token-Regel in dieser Datei — sie steht hier, weil tokens.css
 * das einzige Stylesheet ist, das auf allen Seiten liegt.
 *
 * Das <em> in einer Überschrift ist die ruhigere Fortsetzung des Satzes, nicht
 * ein hervorgehobenes Wort. Zweistufiges Grau statt kursiv + Signalfarbe:
 * redaktionelle Hierarchie (Zeile + Dachzeile) statt Marker-Optik.
 * Kontrast --c-text-muted auf --c-bg = 5.1:1 → WCAG AA auch als Fließtext. */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: inherit;
  color: var(--heading-accent);
}

/* Auf dunklen Navy-Flächen das helle Grün — dort ist es der lesbare Ton. */
.ld-usp-card h2 em,
.ld-final-card h1 em, .ld-final-card h2 em,
.card-dark h1 em, .card-dark h2 em, .card-dark h3 em {
  color: var(--heading-accent-dark);
}

/* ---- Icons ------------------------------------------------------------
 * Konturicons aus assets/icon-sprite.html. Sie erben Farbe (currentColor)
 * und Größe (1em) vom Text — anders als Emoji, die weder einfärbbar sind
 * noch auf jedem System gleich aussehen.
 *   <svg class="ico" aria-hidden="true"><use href="#i-lock"/></svg> */
.ico {
  width: 1em; height: 1em;
  flex: none;
  vertical-align: -0.135em;   /* sitzt auf der Schriftgrundlinie */
  overflow: visible;
}
.ico-lg { width: 24px; height: 24px; vertical-align: middle; }
.ico-xl { width: 32px; height: 32px; vertical-align: middle; }

/* Erfolgs-/Fehler-/Warnfarben für Statusicons auf hellen Flächen. */
.ico-ok   { color: var(--c-green-deep); }
.ico-warn { color: var(--c-amber-deep); }
.ico-bad  { color: var(--c-red-deep); }