/* 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.woff2") format("woff2")}
@font-face{font-family:"Ubuntu";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/Ubuntu-bold.woff2") format("woff2")}
/* 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);
}

/* Lesefarben statt grellem Weiss (Entscheidung Gero, 31.08.2026). Drei getoente Hellmodi
   nach dem Vorbild der Lesehintergruende in Kindle und Books. Das grelle Weiss entfaellt,
   die Systemvorgabe hell laeuft auf Sepia.

   Alle drei sind nachgerechnet: Tinte und Tinte-2 halten AAA auf allen vier Flaechen,
   ebenso die fuenf Akzente und die Phasenschrift auf ihrem Chip. Die Akzente stehen
   deshalb je Welt bis zu 13 Prozent dunkler als im frueheren Hellmodus, sonst waeren sie
   auf --hoch unter 7:1 gerutscht. Rechenweg und Werte: entwurf/leinwand-handy/. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  color-scheme: light;
  --grund:    #F4E9D4;
  --bogen:    #FCF5E7;
  --einschub: #ECDEC4;
  --hoch:     #E2D2B2;
  --tinte:    #2B1D12;
  --tinte-2:  #4A3C32;
  --linie-hair:    #E0D6C4;
  --linie-tragend: #726854;
  --volt-violett-text: #3F1A5E;
  --volt-hellblau:     #0D445C;
  --volt-gelb:         #503C00;
  --volt-gruen-text:   #084928;
  --volt-rot-text:     #781F09;
  --fehler-text: #781F09;
  --offen-text: #781F09;
  --phase-initiation:  #0D445C; --phase-initiation-chip:  #E9EBE3;
  --phase-formulation: #3F1A5E; --phase-formulation-chip: #F0E5E3;
  --phase-voting:      #503C00; --phase-voting-chip:      #F5EAD0;
  --phase-adoption:    #084928; --phase-adoption-chip:    #E8ECDA;
  --phase-evaluation:  #324053; --phase-evaluation-chip:  #EDE9E1;
  --fokus-innen:  #FCF5E7;
  --fokus-aussen: #2B1D12;
  }
}
[data-theme="sepia"] {
  color-scheme: light;
  --grund:    #F4E9D4;
  --bogen:    #FCF5E7;
  --einschub: #ECDEC4;
  --hoch:     #E2D2B2;
  --tinte:    #2B1D12;
  --tinte-2:  #4A3C32;
  --linie-hair:    #E0D6C4;
  --linie-tragend: #726854;
  --volt-violett-text: #3F1A5E;
  --volt-hellblau:     #0D445C;
  --volt-gelb:         #503C00;
  --volt-gruen-text:   #084928;
  --volt-rot-text:     #781F09;
  --fehler-text: #781F09;
  --offen-text: #781F09;
  --phase-initiation:  #0D445C; --phase-initiation-chip:  #E9EBE3;
  --phase-formulation: #3F1A5E; --phase-formulation-chip: #F0E5E3;
  --phase-voting:      #503C00; --phase-voting-chip:      #F5EAD0;
  --phase-adoption:    #084928; --phase-adoption-chip:    #E8ECDA;
  --phase-evaluation:  #324053; --phase-evaluation-chip:  #EDE9E1;
  --fokus-innen:  #FCF5E7;
  --fokus-aussen: #2B1D12;
}
[data-theme="salbei"] {
  color-scheme: light;
  --grund:    #E1F0E2;
  --bogen:    #F0F9F0;
  --einschub: #D4E6D5;
  --hoch:     #C6DBC6;
  --tinte:    #16241C;
  --tinte-2:  #36433B;
  --linie-hair:    #CFDCCF;
  --linie-tragend: #606D60;
  --volt-violett-text: #3F1A5E;
  --volt-hellblau:     #0D455E;
  --volt-gelb:         #523D00;
  --volt-gruen-text:   #084B29;
  --volt-rot-text:     #7A2009;
  --fehler-text: #7A2009;
  --offen-text: #7A2009;
  --phase-initiation:  #0D455E; --phase-initiation-chip:  #DFEFEB;
  --phase-formulation: #3F1A5E; --phase-formulation-chip: #E5E9EB;
  --phase-voting:      #523D00; --phase-voting-chip:      #EBEED8;
  --phase-adoption:    #084B29; --phase-adoption-chip:    #DDF0E2;
  --phase-evaluation:  #334154; --phase-evaluation-chip:  #E2EDE8;
  --fokus-innen:  #F0F9F0;
  --fokus-aussen: #16241C;
}
[data-theme="warmgrau"] {
  color-scheme: light;
  --grund:    #EEE9E3;
  --bogen:    #F8F5F0;
  --einschub: #E4DED6;
  --hoch:     #D9D2C8;
  --tinte:    #24201B;
  --tinte-2:  #423E3A;
  --linie-hair:    #DBD7D1;
  --linie-tragend: #6D6862;
  --volt-violett-text: #3F1A5E;
  --volt-hellblau:     #0D445C;
  --volt-gelb:         #503C00;
  --volt-gruen-text:   #084928;
  --volt-rot-text:     #781F09;
  --fehler-text: #781F09;
  --offen-text: #781F09;
  --phase-initiation:  #0D445C; --phase-initiation-chip:  #E6EBEC;
  --phase-formulation: #3F1A5E; --phase-formulation-chip: #ECE5EB;
  --phase-voting:      #503C00; --phase-voting-chip:      #F2EAD8;
  --phase-adoption:    #084928; --phase-adoption-chip:    #E5ECE3;
  --phase-evaluation:  #324053; --phase-evaluation-chip:  #EAE9E9;
  --fokus-innen:  #F8F5F0;
  --fokus-aussen: #24201B;
}
[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;
  }
}