/* ======================================================================
   DAVINA UI-SYSTEM · themen.css · zehn Oberflächendesigns
   ----------------------------------------------------------------------
   Ein Thema setzt ausschließlich Variablen der Schicht 2 (tokens.css) und
   wenige Komponentenvorgaben (Schicht 3). Es gibt KEINE thema-spezifischen
   Selektoren auf Bauteile - was sich je Thema ändern darf, ist eine
   Variable. Das hält zehn Designs mit einem Komponentensatz wartbar.

   Auswahl: <html data-thema="kanzlei">. Ohne Attribut gilt „karten“.
   Kontraste je Thema sind in docs/design/ARCHITEKTUR.md belegt (Skript
   docs/pruefskripte/pruefstand/ui_kontrast.py): Lesetext ≥ 7:1,
   Nebentext ≥ 4.5:1, Text auf Akzent ≥ 4.5:1, Fokusring ≥ 3:1.

   Reihenfolge klassisch → modern:
     1 kanzlei   2 amtsblatt   3 bauhaus   4 raster   5 karten
     6 leitstand 7 glas        8 brutal    9 lesbar 10 zehnfuss
   ====================================================================== */

/* 1 · KANZLEI — klassisch. Papier, Tinte, eine Oxblood-Farbe für das
   Handeln. Serifen im Lesetext, dünne Linien statt Schatten. Für Akten,
   Fristen, Schriftverkehr: wirkt wie ein gut geführtes Register. */
[data-thema="kanzlei"] {
  --jv-grund: #f5f1e8;
  --jv-grund-2: #ebe5d8;
  --jv-flaeche: #fcfaf5;
  --jv-flaeche-2: #fffdf8;
  --jv-schleier: rgba(46, 36, 24, .45);
  --jv-text: #221d17;
  --jv-text-2: #5b5349;
  --jv-text-3: #948a7c;
  --jv-rand: #d6cdbb;
  --jv-rand-2: #857862;
  --jv-strich: 1px;
  --jv-akzent: #7b2a2a;
  --jv-akzent-aktiv: #5e1f1f;
  --jv-auf-akzent: #ffffff;
  --jv-akzent-hauch: #f2e3e1;
  --jv-fokus: #1f4e79;
  --jv-gut: #2f6b3a;
  --jv-gut-hauch: #e1efe0;
  --jv-achtung: #8a5a00;
  --jv-achtung-hauch: #f7ead0;
  --jv-fehler: #a8231b;
  --jv-fehler-hauch: #f8e1de;
  --jv-info: #2d4f7c;
  --jv-info-hauch: #e2e9f3;
  --jv-schrift: var(--jv-schrift-serif);
  --jv-schrift-kopf: var(--jv-schrift-serif);
  --jv-zeile: 1.6;
  --jv-kopf-gewicht: 400;
  --jv-kopf-laufweite: .01em;
  --jv-radius-s: 2px;
  --jv-radius-m: 2px;
  --jv-radius-l: 3px;
  --jv-schatten-1: none;
  --jv-schatten-2: 0 0 0 1px var(--jv-rand);
  --jv-schatten-3: 0 0 0 1px var(--jv-rand-2), 0 12px 32px rgba(46, 36, 24, .18);
  color-scheme: light;
}

/* 2 · AMTSBLATT — klassisch-funktional. Dicht, tabellarisch, Formularblau,
   Zahlen in Festbreite. Für lange Listen (Umsätze, Post, Bestand), wo
   viel auf einen Bildschirm muss und Ordnung vor Stimmung geht. */
[data-thema="amtsblatt"] {
  --jv-dichte: .85;
  --jv-grund: #eef0f2;
  --jv-grund-2: #e2e5e9;
  --jv-flaeche: #ffffff;
  --jv-flaeche-2: #ffffff;
  --jv-schleier: rgba(18, 20, 23, .5);
  --jv-text: #121417;
  --jv-text-2: #454b54;
  --jv-text-3: #8a9099;
  --jv-rand: #c3c8cf;
  --jv-rand-2: #7d8590;
  --jv-strich: 1px;
  --jv-akzent: #0b4fa8;
  --jv-akzent-aktiv: #083a7c;
  --jv-auf-akzent: #ffffff;
  --jv-akzent-hauch: #dde8f7;
  --jv-fokus: #b4360a;
  --jv-gut: #176b3a;
  --jv-gut-hauch: #dbefe2;
  --jv-achtung: #8a5200;
  --jv-achtung-hauch: #f8ecd0;
  --jv-fehler: #b00020;
  --jv-fehler-hauch: #fadcde;
  --jv-info: #0b4fa8;
  --jv-info-hauch: #dde8f7;
  --jv-schrift-kopf: var(--jv-schrift);
  --jv-kopf-gewicht: 700;
  --jv-zeile: 1.4;
  --jv-radius-s: 0px;
  --jv-radius-m: 0px;
  --jv-radius-l: 0px;
  --jv-schatten-1: none;
  --jv-schatten-2: none;
  --jv-schatten-3: 0 0 0 1px var(--jv-rand-2);
  color-scheme: light;
}

/* 3 · BAUHAUS — klassische Moderne. Schwarze 2-px-Linien, geometrische
   Formen, Blau fürs Handeln, Rot und Gelb nur mit Bedeutung. Versalien
   mit Laufweite in Überschriften. Für die Kommandozentrale, wenn sie
   mehr Werkstatt als Cockpit sein soll. */
[data-thema="bauhaus"] {
  --jv-grund: #f4f2ed;
  --jv-grund-2: #e9e6de;
  --jv-flaeche: #fbfaf7;
  --jv-flaeche-2: #ffffff;
  --jv-schleier: rgba(17, 17, 17, .5);
  --jv-text: #111111;
  --jv-text-2: #4a4a4a;
  --jv-text-3: #8c8c8c;
  --jv-rand: #111111;
  --jv-rand-2: #111111;
  --jv-strich: 2px;
  --jv-akzent: #1f45b5;
  --jv-akzent-aktiv: #163587;
  --jv-auf-akzent: #ffffff;
  --jv-akzent-hauch: #e4e9f8;
  --jv-fokus: #d7261e;
  --jv-gut: #1e7a3c;
  --jv-gut-hauch: #ddf0e2;
  --jv-achtung: #7a5a00;
  --jv-achtung-hauch: #f8e9a8;
  --jv-fehler: #bd1b1b;
  --jv-fehler-hauch: #fadada;
  --jv-info: #1f45b5;
  --jv-info-hauch: #e4e9f8;
  --jv-schrift-kopf: 'Quicksand', 'Inter', system-ui, sans-serif;
  --jv-kopf-gewicht: 700;
  --jv-kopf-laufweite: .06em;
  --jv-kopf-versal: uppercase;
  --jv-radius-s: 0px;
  --jv-radius-m: 0px;
  --jv-radius-l: 0px;
  --jv-schatten-1: none;
  --jv-schatten-2: none;
  --jv-schatten-3: 0 0 0 2px #111111;
  color-scheme: light;
}

/* 4 · RASTER — Schweizer Stil. Weiß, Schwarz, viel Luft, strenge Spalten,
   ein Rot für das Handeln. Große, enge Überschriften. Für Übersichten,
   die ruhig und sortiert wirken sollen (Tagesblatt, Berichte). */
[data-thema="raster"] {
  --jv-dichte: 1.1;
  --jv-grund: #ffffff;
  --jv-grund-2: #f2f2f2;
  --jv-flaeche: #ffffff;
  --jv-flaeche-2: #ffffff;
  --jv-schleier: rgba(0, 0, 0, .55);
  --jv-text: #0a0a0a;
  --jv-text-2: #555555;
  --jv-text-3: #9a9a9a;
  --jv-rand: #dcdcdc;
  --jv-rand-2: #0a0a0a;
  --jv-strich: 1px;
  --jv-akzent: #d90429;
  --jv-akzent-aktiv: #a30320;
  --jv-auf-akzent: #ffffff;
  --jv-akzent-hauch: #fde7eb;
  --jv-fokus: #0a0a0a;
  --jv-gut: #177335;
  --jv-gut-hauch: #e3f3e8;
  --jv-achtung: #9a5b00;
  --jv-achtung-hauch: #fbefd5;
  --jv-fehler: #8b1a1a;
  --jv-fehler-hauch: #f9e3e3;
  --jv-info: #1f3a93;
  --jv-info-hauch: #e4e8f7;
  --jv-schrift-kopf: var(--jv-schrift);
  --jv-kopf-gewicht: 700;
  --jv-kopf-laufweite: -.02em;
  --jv-radius-s: 0px;
  --jv-radius-m: 0px;
  --jv-radius-l: 0px;
  --jv-schatten-1: none;
  --jv-schatten-2: none;
  --jv-schatten-3: 0 0 0 1px var(--jv-rand-2);
  color-scheme: light;
}

/* 5 · KARTEN — modern, vertraut. Helle Fläche, weiße Karten mit weichem
   Schatten, Indigo fürs Handeln, runde Ecken. Nahe an dem, was man von
   Handy-Anwendungen kennt - für Davids Handy-Ansicht und Neulinge. */
[data-thema="karten"] {
  --jv-rand-2: #767c94;
  --jv-gut: #1b7343;
  --jv-radius-s: 6px;
  --jv-radius-m: 8px;
  --jv-radius-l: 16px;
  --jv-hover-hebt: 1;
  color-scheme: light;
}

/* 6 · LEITSTAND — modern-technisch. Dunkle Konsole, Cyan fürs Handeln,
   Festbreite für Werte, Statusleuchten. Nachfolger des heutigen HUD
   (reaktor), aber mit belegtem Kontrast und ruhiger Fläche. */
[data-thema="leitstand"] {
  --jv-grund: #0c1118;
  --jv-grund-2: #080c11;
  --jv-flaeche: #121a24;
  --jv-flaeche-2: #18222e;
  --jv-schleier: rgba(2, 6, 12, .7);
  --jv-text: #e6edf3;
  --jv-text-2: #a3b3c3;
  --jv-text-3: #667788;
  --jv-rand: #243140;
  --jv-rand-2: #5a7391;
  --jv-strich: 1px;
  --jv-akzent: #35c7f0;
  --jv-akzent-aktiv: #6ad6f5;
  --jv-auf-akzent: #06202a;
  --jv-akzent-hauch: #0f2a36;
  --jv-fokus: #ffd166;
  --jv-gut: #4ade80;
  --jv-gut-hauch: #0f2b1c;
  --jv-achtung: #fbbf24;
  --jv-achtung-hauch: #332a0a;
  --jv-fehler: #ff7b72;
  --jv-fehler-hauch: #3a1515;
  --jv-info: #7cc4ff;
  --jv-info-hauch: #10283f;
  --jv-schrift-kopf: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --jv-kopf-gewicht: 600;
  --jv-kopf-laufweite: .06em;
  --jv-kopf-versal: uppercase;
  --jv-radius-s: 3px;
  --jv-radius-m: 4px;
  --jv-radius-l: 6px;
  --jv-schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
  --jv-schatten-2: 0 4px 14px rgba(0, 0, 0, .45);
  --jv-schatten-3: 0 0 0 1px var(--jv-rand-2), 0 24px 48px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* 7 · GLAS — modern, ambient. Tiefer Verlauf, durchscheinende Flächen mit
   Unschärfe, weiche Ränder, Himmelblau fürs Handeln. Für die Ambient-
   Seite und den Orb; ohne backdrop-filter werden die Flächen deckend. */
[data-thema="glas"] {
  --jv-grund: #0f172a;
  --jv-grund-2: #0b1222;
  --jv-flaeche: rgba(255, 255, 255, .07);
  --jv-flaeche-2: rgba(24, 32, 54, .92);
  --jv-flaeche-fest: rgba(15, 23, 42, .88);
  --jv-schleier: rgba(5, 10, 24, .6);
  --jv-text: #f1f5f9;
  --jv-text-2: #b6c2d6;
  --jv-text-3: #7f8ca5;
  --jv-rand: rgba(255, 255, 255, .14);
  --jv-rand-2: rgba(255, 255, 255, .38);
  --jv-strich: 1px;
  --jv-akzent: #7dd3fc;
  --jv-akzent-aktiv: #a8e4ff;
  --jv-auf-akzent: #06202a;
  --jv-akzent-hauch: rgba(125, 211, 252, .16);
  --jv-fokus: #fde68a;
  --jv-gut: #86efac;
  --jv-gut-hauch: rgba(134, 239, 172, .16);
  --jv-achtung: #fcd34d;
  --jv-achtung-hauch: rgba(252, 211, 77, .16);
  --jv-fehler: #fca5a5;
  --jv-fehler-hauch: rgba(252, 165, 165, .18);
  --jv-info: #a5b4fc;
  --jv-info-hauch: rgba(165, 180, 252, .16);
  --jv-schrift-kopf: 'Rajdhani', 'Inter', system-ui, sans-serif;
  --jv-kopf-gewicht: 600;
  --jv-kopf-laufweite: .02em;
  --jv-radius-s: 8px;
  --jv-radius-m: 12px;
  --jv-radius-l: 22px;
  --jv-schatten-1: 0 1px 2px rgba(0, 0, 0, .25);
  --jv-schatten-2: 0 10px 30px rgba(0, 0, 0, .35);
  --jv-schatten-3: 0 30px 80px rgba(0, 0, 0, .55);
  --jv-glas: 1;
  color-scheme: dark;
}
[data-thema="glas"] body {
  background-image: radial-gradient(1200px 600px at 10% -10%, rgba(125, 211, 252, .18), transparent 60%),
                    radial-gradient(900px 500px at 100% 100%, rgba(165, 180, 252, .16), transparent 60%);
  background-attachment: fixed;
}
@media (prefers-reduced-transparency: reduce) {
  [data-thema="glas"] { --jv-flaeche: rgba(24, 32, 54, .96); --jv-glas: 0; }
}

/* 8 · BRUTAL — Neo-Brutalismus. Schwarze 3-px-Ränder, harte versetzte
   Schatten, Pink fürs Handeln, keine Rundung, Bewegung nur unter der
   Maus. Für Spielerisches (Lebensrad, Spiele-Tafel) und für David,
   wenn er Lust auf laut hat. */
[data-thema="brutal"] {
  --jv-grund: #f3efff;
  --jv-grund-2: #e6dfff;
  --jv-flaeche: #ffffff;
  --jv-flaeche-2: #ffffff;
  --jv-schleier: rgba(0, 0, 0, .55);
  --jv-text: #000000;
  --jv-text-2: #3a3a3a;
  --jv-text-3: #707070;
  --jv-rand: #000000;
  --jv-rand-2: #000000;
  --jv-strich: 3px;
  --jv-akzent: #ff3d8d;
  --jv-akzent-aktiv: #ff6aa8;
  --jv-auf-akzent: #000000;
  --jv-akzent-hauch: #ffd6e7;
  --jv-verweis: #0033cc;
  --jv-fokus: #1d00ff;
  --jv-gut: #007a4a;
  --jv-gut-hauch: #c8ffe6;
  --jv-achtung: #7a5200;
  --jv-achtung-hauch: #ffe8a3;
  --jv-fehler: #c40000;
  --jv-fehler-hauch: #ffd1d1;
  --jv-info: #0033cc;
  --jv-info-hauch: #d6e0ff;
  --jv-schrift-kopf: 'Tektur', 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --jv-kopf-gewicht: 700;
  --jv-kopf-laufweite: 0;
  --jv-radius-s: 0px;
  --jv-radius-m: 0px;
  --jv-radius-l: 0px;
  --jv-schatten-1: 3px 3px 0 #000000;
  --jv-schatten-2: 6px 6px 0 #000000;
  --jv-schatten-3: 10px 10px 0 #000000;
  --jv-hover-hebt: 1;
  color-scheme: light;
}

/* 9 · LESBAR — Hochkontrast, auf Lesbarkeit ausgelegt (WCAG AAA).
   Dunkelblauer Grund statt Schwarz (keine Halos), Schrift fast weiß
   (≥ 15:1), Nebentext ≥ 9:1, 18 px Grundschrift, Zeilenabstand 1.6,
   Gelb fürs Handeln, weißer 3-px-Fokusring, Links unterstrichen.
   Für müde Augen, Tageslicht, lange Sitzungen. */
[data-thema="lesbar"] {
  --jv-grundgroesse: 18px;
  --jv-dichte: 1.1;
  --jv-grund: #0e1726;
  --jv-grund-2: #0a1220;
  --jv-flaeche: #152238;
  --jv-flaeche-2: #1b2c47;
  --jv-schleier: rgba(0, 0, 0, .7);
  --jv-text: #f4f7fb;
  --jv-text-2: #c3cfdf;
  --jv-text-3: #93a3ba;
  --jv-rand: #3a4b66;
  --jv-rand-2: #7d90ad;
  --jv-strich: 2px;
  --jv-akzent: #ffd60a;
  --jv-akzent-aktiv: #ffe766;
  --jv-auf-akzent: #0e1726;
  --jv-akzent-hauch: #3a3620;
  --jv-fokus: #ffffff;
  --jv-fokus-breite: 3px;
  --jv-gut: #7ee2a8;
  --jv-gut-hauch: #16352a;
  --jv-achtung: #ffc857;
  --jv-achtung-hauch: #3a2d10;
  --jv-fehler: #ff8a80;
  --jv-fehler-hauch: #3d1b1a;
  --jv-info: #9ad0ff;
  --jv-info-hauch: #15304a;
  --jv-schrift-kopf: var(--jv-schrift);
  --jv-zeile: 1.6;
  --jv-kopf-gewicht: 700;
  --jv-radius-s: 4px;
  --jv-radius-m: 4px;
  --jv-radius-l: 6px;
  --jv-schatten-1: none;
  --jv-schatten-2: 0 0 0 2px var(--jv-rand);
  --jv-schatten-3: 0 0 0 2px var(--jv-rand-2);
  color-scheme: dark;
}

/* 10 · ZEHNFUSS — Fernseher, drei Meter Abstand, Fernbedienung. 28 px
   Grundschrift, große Zielflächen, Fokus = weißer 4-px-Ring plus leichte
   Vergrößerung, keine Maus-Zustände, wenige Farben, Schutzrand 5 %.
   Für das Terminal am NUC (web/fernseher.html). */
[data-thema="zehnfuss"] {
  --jv-grundgroesse: 28px;
  --jv-dichte: 1.6;
  --jv-grund: #05070a;
  --jv-grund-2: #000000;
  --jv-flaeche: #141922;
  --jv-flaeche-2: #1c2330;
  --jv-schleier: rgba(0, 0, 0, .75);
  --jv-text: #f5f7fa;
  --jv-text-2: #b9c2d0;
  --jv-text-3: #7f8a9b;
  --jv-rand: #2a3342;
  --jv-rand-2: #5a6a82;
  --jv-strich: 2px;
  --jv-akzent: #4cc9f0;
  --jv-akzent-aktiv: #86dbf6;
  --jv-auf-akzent: #04111a;
  --jv-akzent-hauch: #0f2a38;
  --jv-fokus: #ffffff;
  --jv-fokus-breite: 4px;
  --jv-fokus-abstand: 4px;
  --jv-gut: #5ad48e;
  --jv-gut-hauch: #10301e;
  --jv-achtung: #f7c948;
  --jv-achtung-hauch: #332a0a;
  --jv-fehler: #ff7a7a;
  --jv-fehler-hauch: #3a1515;
  --jv-info: #8ec5ff;
  --jv-info-hauch: #10283f;
  --jv-schrift-kopf: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --jv-kopf-gewicht: 500;
  --jv-kopf-laufweite: .04em;
  --jv-zeile: 1.35;
  --jv-radius-s: 8px;
  --jv-radius-m: 12px;
  --jv-radius-l: 18px;
  --jv-hoehe-s: 56px;
  --jv-hoehe-m: 68px;
  --jv-hoehe-l: 84px;
  --jv-rinne: 5vw;
  --jv-schatten-1: none;
  --jv-schatten-2: none;
  --jv-schatten-3: 0 0 0 2px var(--jv-rand-2);
  color-scheme: dark;
}