/* PLENUM — tokens.css
   Generiert aus /Users/home/Projects/volt/policy-demo/design/tokens.json
   Werte nicht per Augenmass aendern, siehe DESIGN-SPEZ.md Abschnitt 2 und 9. */

@font-face{font-family:"Ubuntu";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Ubuntu-regular.ttf") format("truetype")}
@font-face{font-family:"Ubuntu";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/Ubuntu-bold.ttf") format("truetype")}
/* dsgvo/B1, iso-normen/B6: Ubuntu 500, Ubuntu Mono und Source Serif 4 lagen am 31.08.2026 nicht lokal vor
   und wurden per Google-Fonts-@import nachgeladen, das schickt bei jedem Aufruf die Besucher-IP an Google
   (LG München I, Urteil v. 20.01.2022, Az. 3 O 17493/20). Jetzt lokal wie Ubuntu 400/700, woff2 von
   fonts.gstatic.com am 31.08.2026 einmalig geladen und unter seite/fonts/ abgelegt, kein externer
   Request mehr zur Laufzeit. Source Serif 4 ist eine echte Variable-Font-Datei, daher eine Regel mit
   Gewichtsbereich statt zwei Dateien. */
@font-face{font-family:"Ubuntu";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/Ubuntu-medium.woff2") format("woff2")}
@font-face{font-family:"Ubuntu Mono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/UbuntuMono-regular.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400 600;font-style:normal;font-display:swap;src:url("fonts/SourceSerif4-variable.woff2") format("woff2-variations"), url("fonts/SourceSerif4-variable.woff2") format("woff2")}

:root{
  color-scheme: dark;

  /* GESPERRT als bedeutungstragende Linie: #686F7B 2,69 auf --hoch, #525864 2,42, #424853 1,88
     GESPERRT als Text: #9DAEC6 6,03 auf --hoch, #E63E12 4,17 auf --bogen
     GESPERRT als Vordergrund: #502379 und #582C83 (1,53 auf --bogen) */

  /* Flaechenleiter, Dunkelmodus (Standard) */
  --grund:    #081324; /* oklch(19% .039 259) */
  --bogen:    #0C1B30; /* oklch(22% .046 257) */
  --einschub: #132540; /* oklch(26% .056 258) */
  --hoch:     #1A2E4D; /* oklch(30% .062 259) */

  /* Textleiter */
  --tinte:    #EEF2F8; /* AAA auf allen vier Flaechen */
  --tinte-2:  #B8C6DA; /* AAA auf allen vier Flaechen */

  /* Linien */
  --linie-hair:    #1B2C48; /* rein dekorativ, nur neben einem zweiten Merkmal */
  --linie-tragend: #628AB8; /* SC 1.4.11 auf allen vier Flaechen */

  /* Volt-Akzente, zwei Rollen */
  --volt-violett-flaeche: #502379; /* NUR Flaeche. Weiss darauf 11,30. Immer mit Umriss --volt-violett-text */
  --volt-violett-tief:    #3A1D57; /* grosse ruhige Flaeche, Fuss */
  --volt-violett-text:    #CBB2F2; /* Schrift, Icon, 3px-Kante, Knopfrand */
  --volt-gelb:            #FDC220; /* Frist, Fokusring, Pruefnotiz-Kante */
  --volt-gelb-flaeche:    #FDC220; /* NUR Flaeche, theme-unabhaengig fix: Demo-Banner, Skip-Link. Traegt seine eigene dunkle Schrift (--volt-gelb-schrift) in beiden Modi. */
  --volt-gelb-schrift:    #081324; /* WCAG-01/B2: theme-unabhaengig fix, in keinem Ueberschreibungsblock redefiniert.
    DESIGN-SPEZ 5.3/9.3 meint hier den literalen Hex-Wert #081324, nicht das themenabhaengige --grund.
    --grund kippt im Hellmodus auf #F2F5FA, damit waere Schrift auf Gelb bei 1,49:1 unlesbar. */
  --volt-hellblau:        #82D0F4; /* Verweise, Quellenstufen-Etikett */
  --volt-gruen:           #1BBE6F; /* nur Flaeche, Schrift darauf --grund */
  --volt-gruen-text:      #4BD597;
  --volt-rot:             #E63E12; /* nur Flaeche, Schrift darauf #1A0500 */
  --volt-rot-text:        #FF8F66; /* auf einschub/hoch nur ab 18.5px oder 14px fett */

  /* Phasenfarben */
  --phase-initiation:       #7ACBF1; --phase-initiation-chip:  #0D2433;
  --phase-formulation:      #CBB2F2; --phase-formulation-chip: #1D1531;
  --phase-voting:           #EDBA35; --phase-voting-chip:      #291F07;
  --phase-adoption:         #4BD597; --phase-adoption-chip:    #08281B;
  --phase-evaluation:       #ADBFD4; --phase-evaluation-chip:  #182231;

  /* Semantik */
  --frist-nah:      #FDC220;
  --frist-kritisch-flaeche: #E63E12;
  --frist-kritisch-schrift: #1A0500;
  --erfolg: #4BD597;
  --warnung: #EDBA35;
  --fehler-text: #FF8F66;
  --fehler-kante: #E63E12;
  --offen-text: #FF8F66;

  /* Fokusring, dunkel */
  --fokus-innen:  #081324;
  --fokus-aussen: #FDC220;

  /* Schriften */
  --schrift-ubuntu: "Ubuntu", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-mono: "Ubuntu Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --schrift-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Typo-Skala, mobil (Basis 18px) */
  --t-xs: 13px;   --t-xs-lh: 1.40;
  --t-s: 15px;    --t-s-lh: 1.45;
  --t-m: 16px;    --t-m-lh: 1.50;
  --t-body: 18px; --t-body-lh: 1.60;
  --t-lese: 19px; --t-lese-lh: 1.65;
  --t-h3: 21px;   --t-h3-lh: 1.35;
  --t-h2: 26px;   --t-h2-lh: 1.25;
  --t-h1: 30px;   --t-h1-lh: 1.20;
  --textgroesse-skala: 1;

  /* Radien */
  --r-karte: 4px; --r-dialog: 4px; --r-einschub: 4px;
  --r-knopf: 3px; --r-eingabe: 3px; --r-chip: 3px; --r-etikett: 3px;
  --r-null: 0px;

  /* Abstandsraster */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-96:96px;
  --karte-innen: 20px;
  --abschnitt-abstand: 48px;

  /* Schatten, genau einer, nur fuer schwebende Ebenen */
  --schatten-schwebend: 0 20px 40px rgba(0,0,0,.45);

  /* Bewegung */
  --dur-schnell: 110ms;
  --dur-mittel: 240ms;
  --kurve: cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* Hellmodus, Pflichtteil. Zwei Ueberschreibungsbloecke: Systemvorgabe und expliziter Schalter. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --grund:    #F2F5FA;
    --bogen:    #FFFFFF;
    --einschub: #E9EEF6;
    --hoch:     #DDE4EF;
    --tinte:    #0C1B30;
    --tinte-2:  #3A495F;
    --linie-hair:    #D8DFEA;
    --linie-tragend: #5E7191;
    --volt-violett-text: #3F1A5E;
    --volt-hellblau:     #0D465F;
    --volt-gelb:         #584200;
    --volt-gruen-text:   #09542E;
    --volt-rot-text:     #82220A;
    --fehler-text: #82220A;
    --offen-text: #82220A;
    --phase-initiation:  #0D465F; --phase-initiation-chip:  #DCEDF6;
    --phase-formulation: #3F1A5E; --phase-formulation-chip: #EAE1F5;
    --phase-voting:      #584200; --phase-voting-chip:      #F7EBCB;
    --phase-adoption:    #09542E; --phase-adoption-chip:    #D9EFE2;
    --phase-evaluation:  #334154; --phase-evaluation-chip:  #E4E9F0;
    --fokus-innen:  #FFFFFF;
    --fokus-aussen: #0C1B30;
  }
}
[data-theme="light"] {
  color-scheme: light;
  --grund:    #F2F5FA;
  --bogen:    #FFFFFF;
  --einschub: #E9EEF6;
  --hoch:     #DDE4EF;
  --tinte:    #0C1B30;
  --tinte-2:  #3A495F;
  --linie-hair:    #D8DFEA;
  --linie-tragend: #5E7191;
  --volt-violett-text: #3F1A5E;
  --volt-hellblau:     #0D465F;
  --volt-gelb:         #584200;
  --volt-gruen-text:   #09542E;
  --volt-rot-text:     #82220A;
  --fehler-text: #82220A;
  --offen-text: #82220A;
  --phase-initiation:  #0D465F; --phase-initiation-chip:  #DCEDF6;
  --phase-formulation: #3F1A5E; --phase-formulation-chip: #EAE1F5;
  --phase-voting:      #584200; --phase-voting-chip:      #F7EBCB;
  --phase-adoption:    #09542E; --phase-adoption-chip:    #D9EFE2;
  --phase-evaluation:  #334154; --phase-evaluation-chip:  #E4E9F0;
  --fokus-innen:  #FFFFFF;
  --fokus-aussen: #0C1B30;
}
[data-theme="dark"] {
  color-scheme: dark;
}

@media (min-width: 768px) {
  :root{
    --t-xs: 13px; --t-s: 15px; --t-m: 17px; --t-body: 19px; --t-lese: 20px; --t-h3: 24px; --t-h2: 34px; --t-h1: 40px;
    --karte-innen: 32px;
    --abschnitt-abstand: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}