/*
  Gestaltungswerte der Website. Das ist der EINZIGE Ort mit Farb- und Schriftwerten.
  site.css und die HTML-Dateien verwenden nur var(--…).

  Es gibt genau EINEN Wertesatz (seit 21.10.2026): heller, warmer Kopf- und Einstiegsbereich,
  helle Inhaltsflächen, dunkle Bereiche nur für Kennzahlen, Video und Fuß, dazu GENAU EINE gedeckte
  Akzentfarbe (Stahlblau, seit CC-4301). Begründung steht in docs/ENTSCHEIDUNGEN.md.

  Regel für den Akzent: Auf hellem Grund darf er Text, Linie und Fläche sein. Auf dunklem Grund ist er
  NIE Text (nur Fläche, Linie oder Dekoration, Text darauf ist weiß), weil er dort nur 2,98 : 1 bzw.
  2,68 : 1 erreicht.

  Bilddateien tragen feste Farben und sind bei einer Änderung von --accent von Hand nachzuziehen:
  assets/img/illu/*.svg (Akzent #41607f, Anthrazit #2a2c30, Weiß, Grautöne #e6e4e0 und #c9ccd1),
  video-poster.jpg, og.jpg.

  Kontrast (WCAG, gerechnet am 21.10.2026 mit der relativen Luminanz; Text mindestens 4,5 : 1,
  große Schrift ab 24 px bzw. 19 px fett und Bedienelemente mindestens 3 : 1):

    Vordergrund            Hintergrund            Verhältnis   Verwendung
    --text                 --bg                    17,92       Fließtext, Überschriften
    --text                 --surface               16,13       Fließtext auf hellen Flächen
    --text                 --head-bg               16,32       Wortmarke, Navigation hover, Kopfzeile
    --text                 --hero-bg-from          14,55       Überschrift im Einstieg (dunkelste Stelle)
    --muted                --bg                     7,48       Nebentext
    --muted                --surface                6,74       Nebentext auf hellen Flächen
    --muted                --head-bg                6,81       Navigation im Kopf
    --muted                --hero-bg-from           6,08       Nebentext im Einstieg (dunkelste Stelle)
    --accent               --bg                     6,55       Links, Kennungen, Zahlen auf Weiß
    --accent               --surface                5,90       Links, Kennungen auf hellen Flächen
    --accent               --head-bg                5,97       Link, Fokusring im Kopf
    --accent               --hero-bg-from           5,32       Link, Fokusring im Einstieg (dunkelste Stelle)
    --on-accent            --accent                 6,55       Text auf Akzentfläche (Laufschrift, Kontakt, Schnellauswahl hover, Knopfmitte)
    --on-accent            --accent-hi              5,17       Knopftext auf der hellsten Stelle des Verlaufs
    --on-accent            --accent-lo              8,08       Knopftext gedrückt (:active)
    --text                 --surface               16,13       Text im Sekundärknopf (hellster Verlauf --bg: 17,92)
    --accent               --surface                5,90       Text im Knopf auf der Kontaktfläche (hellster Verlauf --bg: 6,55)
    --muted                --bg                     7,48       Rand des Sekundärknopfs (Bedienelement, mind. 3 : 1)
    --accent               --on-accent              6,55       gedrückter Pause-Knopf der Laufschrift
    --dark-text            --dark-bg               17,95       Text im Fuß
    --dark-muted           --dark-bg                9,52       Nebentext im Fuß
    --dark-text            --dark-surface          16,15       Text in Kennzahlen und Video
    --dark-muted           --dark-surface           8,57       Nebentext in Kennzahlen und Video
    --ph-text              --ph-bg                 13,58       gelbe Platzhalter
    --accent               --dark-bg                2,98       NUR Fläche/Dekoration, nie Text
    --accent               --dark-surface           2,68       NUR Fläche/Dekoration, nie Text
    --dark-text            --dark-bg               17,95       Fokusring in dunklen Bereichen (Rand, mind. 3 : 1)
    --accent               --bg                     6,55       Fokusring in hellen Bereichen
    --accent               --head-bg                5,97       Fokusring im Kopf
    --accent               --hero-bg-from           5,32       Fokusring im Einstieg
    --on-accent            --accent                 6,55       Fokusring auf Akzentfläche

  Linien (--line, --dark-line, --head-line) sind reine Trenner ohne Informationsgehalt und fallen nicht
  unter 1.4.11 (--head-line auf --head-bg: 1,34 : 1).
*/

:root {
  /* dunkle Bereiche: Kennzahlen, Video, Fuß */
  --dark-bg: #0c0c0d;
  --dark-surface: #18191b;
  --dark-text: #f5f5f6;
  --dark-muted: #b3b5b9;
  --dark-line: #3a3c40;

  /* helle Inhaltsflächen */
  --bg: #ffffff;
  --surface: #f2f3f4;
  --text: #16171a;
  --muted: #52555a;
  --line: #d5d7da;

  /* heller, warmer Kopf- und Einstiegsbereich */
  --head-bg: #f6f4f0;
  --head-line: #d9d4cc;
  --hero-bg-from: #ebe7e1;
  --hero-bg-to: var(--bg);

  /* die eine Akzentfarbe (Stahlblau) und die Stufen für plastische Knöpfe */
  --accent: #41607f;
  --accent-hi: #4f7092;
  --accent-lo: #365270;
  --on-accent: #ffffff;

  /* Knöpfe: Lichtkante oben, weicher Schatten, Schatten bei Hover/Fokus, gedrückt (Transparenzen nur hier) */
  --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --btn-shadow: 0 1px 2px rgba(22, 23, 26, 0.25), 0 4px 10px rgba(30, 45, 65, 0.18);
  --btn-shadow-hover: 0 2px 4px rgba(22, 23, 26, 0.28), 0 10px 20px rgba(30, 45, 65, 0.25);
  --btn-shadow-active: inset 0 2px 5px rgba(22, 23, 26, 0.38);

  /* gelbe Platzhalter */
  --ph-bg: #fff1a8;
  --ph-line: #d9b600;
  --ph-text: #2b2400;

  /* Schriften */
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --head-weight: 680;
  --head-tracking: -0.02em;
}