/* ============================================================================
   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

/* 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). */
.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}