/* tokens.css – verbindliches Design-Fundament (Farben, Abstände, Radien,
   Schriften, Typo-Stufen). Wird auf jeder Seite VOR layout.css geladen.

   Regeln:
   - --color-accent (Magenta) für genau EINE Primäraktion pro Ansicht,
     aktive Navigation und Chart-Hervorhebung.
   - Die Ampelfarben (--ampel-*) sind EXKLUSIV für Kennzahlen-Urteile
     reserviert (siehe partials/ampel.php) – nirgendwo sonst verwenden.
   - Kanalfarben (Google Gelb, Meta Blau, Microsoft Orange) sind KEINE
     Token; sie bleiben bei den Charts/Legenden der jeweiligen Ansicht.
   - Schriftgewichte: nur 400 (Regular) und 600 (SemiBold). */

/* ---------- Schriften (selbst gehostet, kein CDN) ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/Inter-SemiBold.woff2") format("woff2");
}
/* Exo: nur Hero-Titel und Kicker */
@font-face{
  font-family:"Exo";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/Exo-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Exo";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/Exo-SemiBold.woff2") format("woff2");
}

:root{
  /* ---------- Farben ---------- */
  --color-primary:#29235C;    /* Dunkelblau: Sidebar, Hero, Chart aktuelle Periode */
  --color-accent:#951B81;     /* Magenta: EINE Primäraktion pro Ansicht, aktive Navigation, Chart-Hervorhebung */
  --color-selection:#F6E8F3;  /* aktive Auswahl */
  --color-surface:#F1F0F7;    /* getönte Fläche in Karten */
  --color-page:#F6F6FA;       /* Seitengrund */
  --color-compare:#C7C5DB;    /* Vergleichsperiode (Chart-Rolle "vergleich") */
  --vergleich2:#E0DFEB;       /* Drittserie in Charts (Rolle "vergleich2") – IMMER gestrichelt */
  --blau-mittel:#7A74AE;      /* Zwischenton für Stapelsegmente (zwischen --color-primary und --color-compare) */

  /* Heatmap-Dichteskala (hell → dunkel, 5 Stufen; Chart-Rolle Heatmap).
     STRIKT GETRENNT von den Ampelfarben: die Rampe kodiert Dichte/Menge,
     nie ein Urteil – ein Urteil zeigt ausschließlich der Ampel-Baustein. */
  --hm1:#F1F0F7;
  --hm2:#C7C5DB;
  --hm3:#8B85B8;
  --hm4:#544B92;
  --hm5:#29235C;

  /* Neutraltöne (aus docs/mockup-seite0-v3.html übernommen, U4a):
     Text-Hierarchie, Linien und Kartengrund der Berichts-Bausteine. */
  --text:#23222B;             /* Fließtext, Werte */
  --text-2:#5F5E6B;           /* Sekundärtext, Labels */
  --text-3:#8B8A99;           /* Tertiärtext, Hinweise, Achsen */
  --linie:#E4E3EC;            /* Karten- und Tabellenlinien */
  --karte:#FFFFFF;            /* Kartengrund */

  /* Ampelfarben – EXKLUSIV für Kennzahlen-Urteile (partials/ampel.php).
     Symbol leuchtend (--ampel-*), Urteilswort dunkler (--ampel-*-text),
     damit der Text auf hellen Flächen genug Kontrast hat. */
  --ampel-gut:#1D9E75;
  --ampel-auffaellig:#C77E14;
  --ampel-kritisch:#CC3B3B;
  --ampel-gut-text:#0F6E56;
  --ampel-auffaellig-text:#854F0B;
  --ampel-kritisch-text:#A32D2D;

  /* ---------- Abstände ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* ---------- Radien ---------- */
  --radius-card:12px;
  --radius-control:8px;

  /* ---------- Ebenen (z-index) ----------
     REGEL: Jede Karte (Berichtskarte .bk, Urteils-/Treppen-/Wächter-Karten)
     ist ein eigener Stacking-Kontext (position:relative; isolation:isolate,
     in der jeweiligen Karten-CSS). Ein z-index INNERHALB einer Karte wirkt
     nur innerhalb dieser Karte – kein Kartenelement kann je über dem
     Seiten-Chrome liegen, egal welchen Wert es trägt.
     --z-sticky-inhalt (5):  sticky Elemente INNERHALB einer Karte (sticky
       Tabellenspalten/-köpfe, z. B. die KW-Spalte der Heatmap).
     --z-karte-offen (1):    eine Karte mit geöffnetem Popover wird auf diese
       Stufe gehoben (CSS :has), damit ihr Popover über die Nachbarkarten
       hinausragen darf – bleibt unter dem Chrome.
     --z-sticky-chrome (20): Seiten-Chrome (Reiterleiste, Layout-Kopfzeile,
       Sidebar) – liegt über jeder Karte und über --z-karte-offen.
     --z-popover (30):       Popover-Ebene (Info-Popover, Zeitraum-Popover,
       Marker-Popover). Innerhalb einer Karte über allem, was die Karte
       enthält (auch über --z-sticky-inhalt); außerhalb einer Karte
       (Metazeile) über dem Chrome. Popover liegen nie in einem overflow-
       Container und nie unter --z-popover. */
  --z-sticky-inhalt:5;
  --z-karte-offen:1;
  --z-sticky-chrome:20;
  --z-popover:30;

  /* ---------- Schrift-Stacks ---------- */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Exo",var(--font-sans);
}

/* ---------- Typografie-Stufen (Gewichte nur 400/600) ---------- */
/* Basis: Fließtext/Tabellen 15px – gesetzt vom Layout (layout.css) */
.t-page{font-size:24px;font-weight:600;line-height:1.25}    /* Seitentitel */
.t-card{font-size:18px;font-weight:600;line-height:1.3}     /* Kartentitel */
.t-sec{font-size:13px;line-height:1.4}                      /* Sekundär/Labels */
.t-kicker{                                                  /* Kicker/Eyebrow */
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.3;
}

/* ---------- Zahlen: Tabellenziffern (gleiche Ziffernbreite) ---------- */
td,th{font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------- Ampel-Baustein (partials/ampel.php) ----------
   Formen + Farben EXKLUSIV für Kennzahlen-Urteile reserviert. */
.ampel{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.ampel .ampel-ic{flex:none}
/* Wortfarbe = dunkle -text-Variante; das SVG-Symbol behält die
   leuchtende Ampelfarbe (fill direkt auf --ampel-*) */
.ampel-gut{color:var(--ampel-gut-text,var(--ampel-gut))}
.ampel-auffaellig{color:var(--ampel-auffaellig-text,var(--ampel-auffaellig))}
.ampel-kritisch{color:var(--ampel-kritisch-text,var(--ampel-kritisch))}
.ampel-kein{color:var(--ampel-neutral,var(--text-3))}
.ampel-beta{color:var(--ampel-neutral,var(--text-3));border:1.5px dashed currentColor;border-radius:999px;padding:2px 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}

/* Trägerpille: weiße Pille für Ampel-Urteile auf dunklen Flächen
   (partials/ampel.php, Option 'traeger'). Auf dunklen Flächen steht
   die Ampel NIE direkt, immer auf der Trägerpille.
   SYSTEMREGEL: Symbol, Urteilswort UND Kurzbeleg sitzen gemeinsam IN der
   Pille (Beleg in --text-2). Auf dunklem Grund steht außerhalb der Pille
   kein ampelbezogener Text. Ein langer Beleg bricht INNERHALB der Pille
   um (Fließtext), die Pille wird nie zur Zeile darunter aufgelöst.
   Referenz: Wirksamkeits-Karte in docs/mockup-seite0-v3.html. */
.ampel-traeger{display:inline-block;background:var(--karte);border-radius:999px;
  padding:6px 14px 6px 12px;line-height:1.35;box-shadow:0 1px 3px rgba(35,26,51,.18)}
.ampel-traeger .ampel{vertical-align:middle;line-height:1.35}
.ampel-traeger .ampel-beleg{display:inline;margin-left:8px;font-size:13px;font-weight:400;line-height:1.35;
  color:var(--text-2);white-space:normal;vertical-align:middle}