/* ============================================================================
   DWKS Design-Tokens
   ----------------------------------------------------------------------------
   Zentrale CSS-Custom-Properties für die DWKS-Prüfanalyse-Webseite.

   Hierarchie:
     1. Live-Aliase           (für Backward-Compatibility während Migration)
     2. Primitive Tokens      (rohe Werte, Farb-Paletten, Spacing, Schrift)
     3. Semantische Tokens    (Funktion: --bg-body, --text-on-light, ...)
     4. Komponenten-Tokens    (Konkrete UI-Komponenten)

   Verwendung in Stylesheets:
     - Neue Komponenten:        var(--bg-body), var(--accent), ...
     - Bestehende Stylesheets:  var(--bg), var(--gold), ... bleiben gültig
     - Direkte Hex-Codes:       NICHT verwenden

   Stand: nach Live-Inventur Mai 2026, V20-Strukturen plus Live-Farben.
   Drift bei Grautönen konsolidiert (siehe Mapping in tokens-doku.md).
   ========================================================================== */

:root {

  /* ==========================================================================
     1. LIVE-ALIASE (Backward-Compatibility)
     -------------------------------------------------------------------------
     Diese Variablen entsprechen den im Live-Stand der DWKS-Seite verwendeten
     Variablen. Sie bleiben stabil, damit existierende HTML-Dateien während
     der Migration weiter funktionieren.
     ========================================================================== */

  --bg:   #0c1e2f;   /* Body */
  --bg2:  #13293d;   /* sekundär dunkler Grund */
  --bg3:  #1a3650;   /* dritter dunkler Grund (Karten) */
  --bg4:  #234a68;   /* hellster dunkler Grund (Akzent-Hintergrund) */

  --gold: #d4af5a;   /* Akzent-Gold */
  --crit: #b91c1c;   /* Kritik-Rot */
  --org:  #1a5e8c;   /* Organisations-Blau */

  --s2:   #8b1a1a;   /* Sekundär-Rot (Nav-CTA) */
  --s2h:  #a62c2c;   /* Sekundär-Rot Hover */

  --r:    10px;      /* Standard-Border-Radius */

  /* K-A-T-S-Skalen aus Live-Stand */

  /* Kritikqualität (5-stufig, niedrig=gut, hoch=schlecht) */
  --ka-0: #2d6a4f;
  --ka-1: #588157;
  --ka-2: #d4af5a;
  --ka-3: #cc8b00;
  --ka-4: #c0522a;
  --ka-5: #b91c1c;

  /* Antwortqualität (5-stufig, hoch=gut) — Spiegel der K-Skala */
  --kb-0: #b91c1c;
  --kb-1: #c0522a;
  --kb-2: #cc8b00;
  --kb-3: #d4af5a;
  --kb-4: #588157;
  --kb-5: #2d6a4f;

  /* Tragweite (5-stufig) */
  --kc-1: #c8d6e5;
  --kc-2: #94a3b8;
  --kc-3: #d4af5a;
  --kc-4: #cc8b00;
  --kc-5: #b91c1c;

  /* Sicherheit (3-stufig) */
  --ks-1: #c0522a;
  --ks-2: #d4af5a;
  --ks-3: #588157;


  /* ==========================================================================
     2. PRIMITIVE TOKENS
     -------------------------------------------------------------------------
     Rohe Werte. Werden nicht direkt in Komponenten verwendet, sondern nur
     von semantischen Tokens und Komponenten-Tokens referenziert.
     ========================================================================== */

  /* -- 2.1 Farb-Paletten ----------------------------------------------------- */

  /* Dunkelblau (Backgrounds, Karten) */
  --color-blue-950: var(--bg);     /* #0c1e2f — Body */
  --color-blue-900: var(--bg2);    /* #13293d — sekundärer Grund */
  --color-blue-850: #1a3550;       /* Header (eigener, mittlerer Ton) */
  --color-blue-800: var(--bg3);    /* #1a3650 — Karten dunkel */
  --color-blue-700: var(--bg4);    /* #234a68 — Akzent-Hintergrund */
  --color-blue-text-1: #c8d6e5;    /* heller Text auf Dunkel */
  --color-blue-text-2: #8899aa;    /* sekundärer Text auf Dunkel */
  --color-blue-text-3: #7a8fa5;    /* Tertiärtext blau-grau */
  --color-blue-text-4: #cfd8e3;    /* hellblau-grau */

  /* Gold (Akzent) */
  --color-gold-500: var(--gold);   /* #d4af5a */
  --color-gold-400: #ffd56b;       /* Gold-Hover/heller */
  --color-gold-700: #b88a1a;       /* dunkleres Gold (Status) */
  --color-gold-800: #b8860b;       /* dunkles Gold-Olive */
  --color-gold-900: #a06a00;       /* sehr dunkles Gold */

  /* Rot (Kritik, Nav-CTA) */
  --color-red-500: var(--crit);    /* #b91c1c — Kritik primary */
  --color-red-600: var(--s2);      /* #8b1a1a — Nav-CTA */
  --color-red-700: var(--s2h);     /* #a62c2c — Hover */
  --color-red-50:  #fde8e0;        /* sehr helles Rot (Soft-Card) */

  /* Bernstein / Orange (Status, Antwort) */
  --color-amber-400: #f59e0b;      /* helleres Bernstein */
  --color-amber-500: #d97706;      /* Standard-Bernstein (Status warning) */
  --color-amber-600: #cc8b00;      /* dunkleres Bernstein (= K3-Wert) */
  --color-amber-700: #c0522a;      /* dunkleres Orange-Braun */
  --color-amber-800: #8C4A1E;      /* sehr dunkles Orange-Braun */
  --color-amber-50:  #fdf0da;      /* sehr helles Bernstein (Soft-Card) */

  /* Grün (Status, Sicherheit) */
  --color-green-400: #588157;      /* helleres Grün */
  --color-green-500: #2d6a4f;      /* dunkleres Grün */
  --color-green-600: #1E6B4A;      /* sehr dunkles Grün (Status) */
  --color-green-light: #1a8c4a;    /* leuchtendes Grün */
  --color-green-50:  #d4ead0;      /* sehr helles Grün (Soft-Card, abgeleitet) */

  /* Blau (Organisation, Status info) */
  --color-status-blue-500: var(--org); /* #1a5e8c */
  --color-status-blue-700: #1E4A8C;    /* dunkles Status-Blau */
  --color-status-blue-50:  #dbeafe;    /* helles Blau (Soft-Card) */
  --color-status-blue-100: #e8edf2;    /* sehr helles Blau-Grau */

  /* Lila (Suchergebnis-Akzent, Marker) */
  --color-purple-500: #5B2D8C;     /* Such-Akzent primary */
  --color-purple-700: #4338ca;     /* dunkles Lila */
  --color-purple-50:  #d4c4ff;     /* helles Lila */
  --color-purple-100: #ddd6ff;     /* helleres Lila */

  /* Pink (Status accent, selten) */
  --color-pink-500: #8C1E4A;       /* dunkles Pink (Status) */

  /* Oliv (Status, selten) */
  --color-olive-500: #8C7A1E;      /* oliv (Status) */

  /* Weiß und Grau-Skala (konsolidiert) */
  --color-white:    #ffffff;
  --color-gray-50:  #f8f8f8;       /* fast weiß */
  --color-gray-100: #f0f0f0;       /* sehr heller Hintergrund */
  --color-gray-150: #e8e8e8;       /* sehr helle Border */
  --color-gray-200: #eeeeee;       /* heller Border */
  --color-gray-300: #cccccc;       /* hellgrauer Border (konsolidiert: #ccc, #ddd) */
  --color-gray-400: #888888;       /* mittelgrau (konsolidiert: #888, #999) */
  --color-gray-700: #555555;       /* dunkelgrau Text (konsolidiert: #444, #555) */
  --color-gray-800: #333333;       /* sehr dunkelgrau Text */
  --color-gray-900: #1a1a18;       /* nahezu schwarz (Primärtext auf Hell) */

  /* Status-Soft-Cards (helle Hintergrund-Töne) */
  --color-soft-yellow: #fff3cd;    /* helles Gelb */
  --color-soft-amber:  #fdf0da;    /* helles Bernstein */
  --color-soft-red:    #fde8e0;    /* helles Rot */
  --color-soft-blue:   #dbeafe;    /* helles Blau */
  --color-soft-purple: #ddd6ff;    /* helles Lila */
  --color-soft-purple-2: #d4c4ff;  /* helleres Lila */

  /* -- 2.2 Schrift-Skala ----------------------------------------------------- */

  --font-family-sans: 'Segoe UI', system-ui, -apple-system,
                      BlinkMacSystemFont, 'Anthropic Sans', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-family-serif: Georgia, 'Times New Roman', serif;

  --font-size-xxs:  9.5px;
  --font-size-xs:  10px;
  --font-size-sm:  11px;
  --font-size-sm2: 11.5px;
  --font-size-md:  12px;
  --font-size-md2: 12.5px;
  --font-size-base: 13px;
  --font-size-body: 16px;       /* Live-Body-Schriftgröße */
  --font-size-lg:  14px;
  --font-size-xl:  17px;
  --font-size-h2:  18px;
  --font-size-xxl: 20px;
  --font-size-display: 22px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-extra:   800;

  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.6;

  /* -- 2.3 Abstände (Spacing-Skala) ----------------------------------------- */

  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 22px;
  --space-12: 28px;

  /* -- 2.4 Border-Radius ---------------------------------------------------- */

  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  var(--r);   /* 10px — Live-Standard */
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* -- 2.5 Border ----------------------------------------------------------- */

  --border-1-on-dark:    1px solid rgba(255, 255, 255, 0.12);
  --border-1-on-dark-2:  1px solid rgba(255, 255, 255, 0.20);
  --border-1-on-light:   1px solid rgba(0, 0, 0, 0.15);
  --border-1-divider-light: 1px solid #ddd;

  /* -- 2.6 Schatten --------------------------------------------------------- */

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.18);
  --shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.40);

  /* -- 2.7 Z-Index --------------------------------------------------------- */

  --z-base:     1;
  --z-tooltip: 50;
  --z-modal:  100;
  --z-nav:   9000;


  /* ==========================================================================
     3. SEMANTISCHE TOKENS
     -------------------------------------------------------------------------
     Funktionale Tokens, die in Komponenten verwendet werden.
     ========================================================================== */

  /* -- 3.1 Hintergründe ---------------------------------------------------- */

  --bg-body:        var(--bg);          /* Body-Hintergrund (alle Seiten) */
  --bg-frame:       var(--color-blue-850); /* P-Page-Frame, Header-Bereiche */
  --bg-frame-2:     var(--bg2);         /* sekundäre dunkle Karten */
  --bg-card-dark:   var(--bg3);         /* Karten-Hintergrund dunkel */
  --bg-card-dark-2: var(--bg4);         /* helleres Karten-Hintergrund */
  --bg-panel:       var(--color-white); /* helle Karten / Inhaltsboxen */
  --bg-panel-soft:  var(--color-gray-50); /* sekundäre helle Karten */
  --bg-tooltip:     var(--color-white); /* Tooltip-Hintergrund */
  --bg-search-result: var(--color-white); /* Such-Karte */

  /* -- 3.2 Text ------------------------------------------------------------ */

  --text-on-dark:        var(--color-white);
  --text-on-dark-muted:  var(--color-blue-text-1);
  --text-on-dark-faint:  var(--color-blue-text-2);
  --text-on-dark-tertiary: var(--color-blue-text-3);

  --text-on-light:       var(--color-gray-900);
  --text-on-light-muted: var(--color-gray-700);
  --text-label:          var(--color-gray-400);
  --text-on-accent:      var(--color-blue-950);

  /* -- 3.3 Akzent ---------------------------------------------------------- */

  --accent:        var(--gold);
  --accent-hover:  var(--color-gold-400);
  --accent-strong: var(--color-gold-700);
  --accent-soft:   rgba(212, 175, 90, 0.22);

  /* -- 3.4 Status (Klärungsband, Ampel-Logik) ----------------------------- */

  --status-poor:  var(--crit);
  --status-mid:   var(--color-amber-500);
  --status-good:  var(--color-green-light);

  /* -- 3.5 K-A-T-S-Bewertung ---------------------------------------------- */

  --kats-k-bg:    var(--color-soft-red);
  --kats-k-text:  var(--color-red-500);
  --kats-k-deep:  var(--color-red-700);
  --kats-k-mid:   var(--color-red-500);

  --kats-a-bg:    var(--color-soft-amber);
  --kats-a-text:  var(--color-amber-800);
  --kats-a-deep:  var(--color-amber-800);
  --kats-a-mid:   var(--color-amber-500);

  --kats-t-bg:    var(--color-status-blue-50);
  --kats-t-text:  var(--color-status-blue-700);
  --kats-t-deep:  var(--color-status-blue-700);
  --kats-t-mid:   var(--color-status-blue-500);

  --kats-s-bg:    var(--color-green-50);
  --kats-s-text:  var(--color-green-600);
  --kats-s-deep:  var(--color-green-600);
  --kats-s-mid:   var(--color-green-400);

  /* -- 3.6 Block-Typen ---------------------------------------------------- */

  --block-criticism: var(--crit);
  --block-response:  var(--org);
  --block-resolved:  var(--color-green-600);
  --block-pending:   var(--color-amber-500);

  /* -- 3.7 Border --------------------------------------------------------- */

  --border-divider-on-light: 1px solid var(--color-gray-300);
  --border-divider-on-dark:  1px solid rgba(255, 255, 255, 0.20);
  --border-card:             1px solid var(--color-gray-300);
  --border-tooltip:          1px solid rgba(0, 0, 0, 0.18);
  --border-accent:           2px solid var(--gold);
  --border-accent-soft:      1px solid var(--accent-soft);
  --border-nav-bottom:       2px solid var(--gold);


  /* ==========================================================================
     4. KOMPONENTEN-TOKENS
     ========================================================================== */

  /* -- 4.1 Page (Seiten-Layout) ------------------------------------------ */

  --page-bg:           var(--bg-body);
  --page-text:         var(--text-on-dark);
  --page-font-family:  var(--font-family-sans);
  --page-font-size:    var(--font-size-body);
  --page-line-height:  var(--line-height-relaxed);
  --page-max-width:    1060px;
  --page-padding:      var(--space-12) var(--space-10) 64px;

  /* -- 4.2 Navigation (Sticky-Top) --------------------------------------- */

  --nav-bg:            var(--bg);
  --nav-height:        76px;
  --nav-border-bottom: var(--border-nav-bottom);
  --nav-shadow:        var(--shadow-nav);
  --nav-z:             var(--z-nav);
  --nav-link-color:    var(--color-blue-text-1);
  --nav-link-active-bg:    var(--s2);
  --nav-link-active-color: var(--color-white);
  --nav-link-hover-bg:     var(--s2);

  /* -- 4.3 Page-Header (Titel-Streifen) ---------------------------------- */

  --ph-bg:        var(--color-blue-850);
  --ph-radius:    var(--radius-lg);
  --ph-padding:   var(--space-7) var(--space-10);
  --ph-border:    1px solid rgba(255, 255, 255, 0.12);
  --ph-title-size: var(--font-size-h2);
  --ph-title-color: var(--color-white);

  /* -- 4.4 Card (Inhalt
   ------------------------------------------------------------------------
   HIER BRICHT DIE DATEI SEIT DEM 06.05.2026 AB. Der Abschnitt 4.4 ist
   unvollstaendig: Die Ueberschrift steht da, die Tokens dazu fehlen, und das
   `/*` wurde nie geschlossen. Gefunden am 20.09.2026 durch
   Claude-Web-Stilpruefung.py; die Live-Fassung auf dem Server ist
   byte-identisch (14.789 Bytes), der Schaden stand also gut vier Monate
   unbemerkt online.

   WIRKUNG, gemessen: Alles ab dieser Zeile galt dem Browser als Kommentar --
   auch der unten stehende `.info-i`-Block. Und die schliessende Klammer des
   `:root` fehlte, was Parser stillschweigend nachholen.

   WAS HIER REPARIERT WURDE, und was bewusst NICHT: Der Kommentar ist jetzt
   geschlossen und `:root` ebenfalls -- die Datei ist strukturell heil. Die
   FEHLENDEN Card-Tokens sind NICHT erfunden worden; es gibt keine heile
   Vorfassung, aus der sie stammen koennten (Z-Spiegel und Live-Stand sind
   beide byte-gleich mit diesem Stand).
   ------------------------------------------------------------------------ */
}

/* Glossar-Info-Icon — zentral in tokens.css ergänzt am 2026-05-06,
   damit alle Hauptseiten denselben goldenen Hintergrundkreis zeigen.
   Quelle: dwks-styles.css §479 (P/GB-Detailseiten).

   SCHARFGESCHALTET AM 20.09.2026 AUF UWES ENTSCHEIDUNG "gold-hell".
   Vorgeschichte: Dieser Block lag seit dem 06.05.2026 im offenen Kommentar
   darueber und hat nie gewirkt. Die Wahl zwischen Gold-hell (hier) und Rot
   (dwks-styles.css §480) war eine Gestaltungsfrage und gehoerte Uwe; er hat
   sie entschieden. Der Hover in dwks-styles.css ist im selben Zug auf
   dieselbe Farbe gezogen, damit es nicht wieder zwei Wahrheiten gibt.

   06.10.2026 (Uwe-Entscheidung C21 "Gold", bestaetigt): Die gleichgezogene
   Zweitfassung in dwks-styles.css ist ENTFERNT. Dieser Block ist seither die
   einzige Definition von .info-i im ganzen Auftritt -- jede Seite mit
   dwks-styles.css laedt tokens.css davor [gemessen ▸ 314 von 314 Seiten].

   GEMESSENER BEFUND, der die Frage groesser machte als sie aussah: Die fuenf
   Seiten grundthesen / konvergenz / offeneFragen / themen / tragweite tragen
   `.info-i` im Markup, laden aber NUR tokens.css und ihr eigenes Stilblatt --
   dwks-styles.css laden sie nicht. Solange dieser Block im Kommentar lag,
   hatten ihre Icons ueberhaupt KEINE Grunddefinition, waren also kein rotes
   und kein goldenes Kaestchen, sondern ein nackter Buchstabe. Nicht der
   Hover war dort vier Monate falsch, sondern das ganze Icon fehlte. */

.info-i{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:#d4af5a;color:#1a1a18;
  font-size:11px;font-weight:800;font-style:italic;font-family:Georgia,serif;
  text-decoration:none;margin-left:6px;vertical-align:1px;
  transition:background .14s,color .14s,transform .12s}
.info-i:hover{background:#ffd56b;color:#1a3550;transform:scale(1.08)}
.ph-t-line .info-i{margin-left:0;vertical-align:middle}