/* tokens.css - das Designsystem (uebernommen aus dem bisherigen Programm, Stand 21.09.2026,
   ohne die Notion-Farben). Jeder Wert, den die Oberflaeche braucht, steht hier genau einmal:
   Farben der Marke, Schrift, Raster, Radien, Schatten, Zustaende. Die uebrigen Stildateien
   und Skripte nutzen nur diese Namen; pruefungen/alle.py misst, dass ausserhalb von :root
   keine festen Farben stehen.

   Abbildung Marke -> Token (damit niemand raten muss):
     petrol #1E4F54 -> --petrol           p300 #4E7A7E -> --petrol-hell
     p700 #163C40   -> --petrol-dunkel    tonerde #AF6B52 -> --tonerde
     t600 #95593F   -> --tonerde-dunkel   creme #FAF7F1 -> --creme
     sand #E5DAC6   -> --sand             sand400 #D6C8AE -> --sand-dunkel
     sal200 #DDE3D7 -> --salbei ("salbei" #A9B5A0 ist --salbei-kraeftig)
     Nebel #D7E0DF  -> --nebel
   Kontraste (Text auf Grund, gerechnet nach WCAG): --tinte auf --creme 13,8:1,
   --tinte-leise auf --creme 5,7:1 und auf --nebel 4,5:1, --leiste-text-leise auf --petrol
   4,5:1, --tonerde-text auf --creme 4,6:1 (Tonerde als Schrift nur in dieser dunkleren
   Stufe), --creme auf --petrol 10,4:1, --leiste-text auf --petrol 8,9:1. */

:root {
  /* ── Marke ─────────────────────────────────────────────────────── */
  --petrol: #1E4F54; --petrol-hell: #4E7A7E; --petrol-dunkel: #163C40;
  --tonerde: #AF6B52; --tonerde-dunkel: #95593F; --tonerde-zart: #F0E2DA; --tonerde-text: #8A4E37;
  --creme: #FAF7F1; --sand: #E5DAC6; --sand-dunkel: #D6C8AE; --sand-hell: #F3EEE4;
  --salbei: #DDE3D7; --salbei-kraeftig: #A9B5A0; --nebel: #D7E0DF; --weiss: #FFFFFF;

  /* ── Text und Linien ─────────────────────────────────────────────── */
  --tinte: #1F2A2B; --tinte-leise: #566566; --tinte-ganz-leise: #8A9697;
  --linie: rgba(30,79,84,.14); --linie-zart: rgba(30,79,84,.08); --linie-stark: rgba(30,79,84,.28);

  /* ── Flaechen ───────────────────────────────────────────────────── */
  --grund: #F4F0E9;                 /* der Hintergrund der Software (Porzellan 18.10.2026, vorher Creme) */
  --flaeche: var(--weiss);          /* Tabellen, Karten, Dialoge */
  --flaeche-leise: var(--sand-hell);/* Hover, Gruppenkoepfe */
  --flaeche-an: var(--nebel);       /* gewaehlt, aktiv */
  --schleier: rgba(22,60,64,.32); --glanz: rgba(255,255,255,.1);

  /* ── Dunkle Seitenleiste ─────────────────────────────────────────── */
  --leiste-grund: var(--petrol); --leiste-grund-tief: var(--petrol-dunkel);
  --leiste-text: #DCE7E6; --leiste-text-leise: #A3BDBA; --leiste-text-an: #FFFFFF;
  --leiste-hover: rgba(255,255,255,.08); --leiste-an: rgba(255,255,255,.14); --leiste-linie: rgba(255,255,255,.12);
  --leiste-akzent: #E2B9A2;         /* Tonerde hell auf Petrol, 5,1:1 */

  /* ── Zustaende ──────────────────────────────────────────────────── */
  --ok: #406B4D;   /* eine Stufe dunkler (Liste 009, Punkt 8): auf Sand-Hell 5,3:1 statt 4,3:1 */ --ok-flaeche: #DDE3D7;
  --warnung: var(--tonerde-text); --warnung-flaeche: var(--tonerde-zart);
  --fehler: #A24739; --fehler-flaeche: #F3DAD6;
  --fokus: var(--petrol-hell);
  /* Fokus (Gesamtdurchsicht 17.10.2026, WCAG 2.4.7 und 1.4.11): weisser Abstand und ein voller Petrol-Ring (9:1), auf dunklen
     Flaechen (Seitenleiste, Buehne, Lotse-Kopf) Petrol-dunkel und Tonerde hell (5:1). */
  --fokus-ring: 0 0 0 2px var(--weiss), 0 0 0 4px var(--petrol);
  --fokus-ring-dunkel: 0 0 0 2px var(--petrol-dunkel), 0 0 0 4px var(--leiste-akzent);
  /* Rand von Bedienelementen (Felder, offene Haken, Kaestchen): 3,9:1 auf Weiss, 3,4:1 auf Sand-hell (WCAG 1.4.11). */
  --rand-bedienung: #758485;
  --ok-auf-dunkel: #A8D8B0;
  --schwarz-voll: #000;               /* nur fuer Masken (Ausblenden am Rand), nie als Farbe */          /* Punkt "in Ordnung" auf Petrol (Buehne), 7:1 */

  /* ── Schrift ────────────────────────────────────────────────────── */
  --schrift: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --schrift-kopf: "Fraunces", Georgia, serif;
  --groesse-0: 12px; --groesse-1: 13px; --groesse-2: 14px; --groesse-3: 16px; --groesse-4: 18px;   /* 16 px Text, 14 px Bedienung */
  --groesse-5: 20px; --groesse-6: 24px; --groesse-7: 30px; --groesse-8: 38px;
  --zeile-eng: 1.25; --zeile: 1.55; --zeile-weit: 1.65;
  --fett: 600; --halbfett: 500; --normal: 400;

  /* ── Raster (8 Punkte) und Masse ─────────────────────────────────── */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 24px; --r-6: 32px; --r-7: 48px; --r-8: 64px;
  --hoehe-bedien: 36px; --hoehe-eingabe: 36px; --hoehe-zeile: 44px; --hoehe-kopf: 56px; --hoehe-kopf-handy: 48px;
  --treffer-min: 44px; --groesse-handy-eingabe: 16px; /* unter 16 px zoomt iOS beim Tippen */
  --hoehe-tab-leiste: 64px;         /* Tab-Leiste am Handy; Meldung, Blatt und Bottom Sheet rechnen damit */
  /* Geraeteraender (iPhone als App vom Home-Bildschirm): Statusleiste oben, Home-Balken unten, Kerbe seitlich (14.10.2026) */
  --sicher-oben: env(safe-area-inset-top, 0px); --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-links: env(safe-area-inset-left, 0px); --sicher-rechts: env(safe-area-inset-right, 0px);
  --statusleiste-grund: var(--leiste-grund-tief);   /* hinter der weissen Uhr der Statusleiste */
  --leiste-breite: 248px; --karte-breite: min(52vw, 760px); --panel-breite: clamp(360px, 32vw, 460px); --inhalt-breite: 960px; --inhalt-breite-weit: 1560px;   /* Textseiten schmal, Uebersichten nutzen den Platz */

  /* ── Rundung und Schatten ───────────────────────────────────────── */
  --rundung-klein: 6px; --rundung: 8px; --rundung-gross: 12px; --rundung-pille: 999px;
  --hebung-1: 0 1px 2px rgba(22,60,64,.06), 0 1px 1px rgba(22,60,64,.04);
  --hebung-2: 0 2px 8px rgba(22,60,64,.14);
  --hebung-3: 0 12px 40px rgba(22,60,64,.18), 0 2px 8px rgba(22,60,64,.08);

  /* ── Bewegung ───────────────────────────────────────────────────── */
  --dauer-kurz: .12s; --dauer: .18s; --kurve: cubic-bezier(.2,.7,.2,1);
  /* Sanfte Bewegung (Gesamtdurchsicht 17.10.2026): Seiten blenden ein, Balken fuellen sich, Karten heben sich. Bei
     prefers-reduced-motion schaltet bauteile.css alles ab. */
  --dauer-mittel: .32s; --dauer-lang: .6s; --kurve-weich: cubic-bezier(.16,1,.3,1); --rein-weg: 10px;
  --hebung-hover: 0 14px 30px rgba(22,60,64,.14), 0 2px 6px rgba(22,60,64,.06);

  /* ── Seitenleiste mit Verlauf (Schlussrunde 05.10.2026) ───────────── */
  --leiste-verlauf: linear-gradient(180deg, var(--petrol) 0%, var(--petrol-dunkel) 100%);
  --neu-flaeche: rgba(240,226,218,.45);
  --schatten-akzent: 0 4px 14px rgba(175,107,82,.3);
  --rundung-mittel: 10px;

  /* ── Programm-Look (Feinschliff 05.10.2026): schwebende Leiste, Kopfzeile, Kacheln mit zartem Verlauf ── */
  --app-grund: linear-gradient(180deg, #E9EFEE 0%, var(--creme) 280px);
  --rundung-leiste: 20px; --rundung-panel: 16px; --rundung-symbol: 9px;
  --schatten-leiste: 0 10px 30px rgba(22,60,64,.18);
  --schatten-panel: 0 1px 2px rgba(22,60,64,.04), 0 10px 24px rgba(22,60,64,.05);
  --groesse-titel: 28px; --hoehe-kopfzeile: 60px; --wellen-hoehe: 96px;
  --sym-sand: #9C7F49; --sym-salbei: #5E7A54; --sym-rose: var(--tonerde-dunkel); --sym-nebel: var(--petrol);
  --verlauf-sand: linear-gradient(135deg, #F3ECDD 0%, #FFFFFF 70%); --rand-sand: #E6DBC5;
  --verlauf-salbei: linear-gradient(135deg, #E3EADD 0%, #FFFFFF 70%); --rand-salbei: #D2DCCB;
  --verlauf-rose: linear-gradient(135deg, #F6E7DF 0%, #FFFFFF 70%); --rand-rose: #EBD3C7;
  --verlauf-nebel: linear-gradient(135deg, #DDE7E6 0%, #FFFFFF 70%); --rand-nebel: #CBD9D8;
  --leiste-feld: rgba(255,255,255,.08); --leiste-feld-rand: rgba(255,255,255,.12); --leiste-zahl: rgba(255,255,255,.12);

  /* ── Startseite "Hafen" (Abnahme 06.10.2026): Buehne mit Wellen, schwebende Karte, Bereichskarten mit Bild ── */
  --buehne-verlauf: radial-gradient(120% 140% at 85% 0%, var(--petrol-hell) 0%, var(--petrol) 45%, var(--petrol-dunkel) 100%);
  --schatten-buehne: 0 18px 40px rgba(22,60,64,.25); --schatten-schwebe: 0 20px 40px rgba(22,60,64,.18);
  --schatten-schwebe-hover: 0 24px 44px rgba(22,60,64,.22); --schatten-bild: drop-shadow(0 12px 14px rgba(0,0,0,.2));
  --glanz-funkeln: drop-shadow(0 0 10px rgba(255,255,255,.35)); --weiss-leise: rgba(255,255,255,.88);
  --welle-1: rgba(229,218,198,.25); --welle-2: rgba(221,227,215,.35); --verlauf-bereich: linear-gradient(135deg, var(--nebel), var(--sand-hell));
  --rundung-buehne: 28px; --rundung-schwebe: 22px; --groesse-gruss: 46px; --groesse-gruss-handy: 34px; --groesse-start-h2: 22px;

  /* ── Grundgeruest (06.10.2026): eingeklappte Leiste, Suche oben, Seitenfeld, Inhaltsbreiten ── */
  --leiste-schmal: 72px; --suche-breite: 520px; --inhalt-breite-schmal: 680px; --einst-themen-breite: 240px;
  --seitenfeld-breite: clamp(340px, 30vw, 440px); --rund-knopf: 56px; --glocke-feld-breite: 360px;
  --schublade-hoehe: 82dvh;

  /* ── Aufgaben (Mission Operations Center, Plan 009 Fassung 3 Punkt 8): Status nie Ton in Ton, nie allein (immer mit Wort).
     Kraeftig fuer Flaechen und Marken, -tief fuer Knoepfe mit weisser Schrift (ab 5:1), -text fuer Schrift auf -zart (ab 5:1). */
  --st-offen: #3F7CAC; --st-offen-tief: #376F9C; --st-offen-zart: #E1ECF5; --st-offen-text: #2F6390;
  --st-arbeit: #D0863A; --st-arbeit-tief: #A85A1C; --st-arbeit-zart: #F8E8D6; --st-arbeit-text: #8A4E17;
  --st-wartet: #8A6A9E; --st-wartet-tief: #7A5C8E; --st-wartet-zart: #EEE6F2; --st-wartet-text: #6E5082;
  --st-fertig: #4F8A5B; --st-fertig-tief: #427A4E; --st-fertig-zart: #E0EEDF; --st-fertig-text: #356340;
  /* Farben der Lebensbereiche (Namen wie in mis_lebensbereich.farbe): kraeftig, zart (Chip), Schrift auf zart (ab 4,9:1) */
  --lb-petrol: #1E4F54; --lb-petrol-zart: #DCE7E6; --lb-petrol-text: #1E4F54;
  --lb-rose: #C0677A; --lb-rose-zart: #F6E2E6; --lb-rose-text: #9C4558;
  --lb-sand: #9C7F49; --lb-sand-zart: #F3ECDD; --lb-sand-text: #7A6235;
  --lb-salbei: #5E7A54; --lb-salbei-zart: #E3EADD; --lb-salbei-text: #4C6544;
  --lb-nebel: #4E7A7E; --lb-nebel-zart: #E4ECEB; --lb-nebel-text: #3F6A6E;
  --lb-tonerde: #AF6B52; --lb-tonerde-zart: #F0E2DA; --lb-tonerde-text: #8A4E37;
  /* Arten in "Heute dran" (Gesamtdurchsicht 17.10.2026): jede Art eine eigene Farbe, immer mit Wort */
  --art-einnahme-zart: #E3EADD; --art-einnahme-text: #4C6544; --art-pflege-zart: #E1ECF5; --art-pflege-text: #2F6390;
  --art-termin-zart: #EEE6F2; --art-termin-text: #6E5082; --art-geld-zart: #F3ECDD; --art-geld-text: #6E5A2F;
  --art-aufgabe-zart: #DCE7E6; --art-aufgabe-text: #1E4F54;
  /* Kalender und Fokus */
  --kal-stunde: 40px; --kal-block: #EEEAE2; --fokus-grund: radial-gradient(120% 120% at 50% 0%, #2B6B6E 0%, #173F44 55%, #102E33 100%);
  --fokus-akzent: #F0B27A; --fokus-akzent-text: #3A2410; --fokus-flaeche: rgba(255,255,255,.08); --fokus-linie: rgba(255,255,255,.16);
  --fokus-leise: rgba(255,255,255,.72); --groesse-timer: 72px; --groesse-timer-handy: 52px;
  --seitenfeld-breit: clamp(360px, 40vw, 600px);
  --buehne-feld: rgba(16,46,51,.55); --kal-heute: #EEF3F2;
  /* Mission Log (Bauabschnitt 6, Bild neu3-5): farbige Kennzahl-Karten mit weisser Schrift (jede Stelle des Verlaufs ab 5:1),
     Punkte-Kalender in fuenf Stufen (Schrift auf Stufe 3 und 4 weiss, ab 4,9:1), Linie im Verlauf. */
  --log-gruen: linear-gradient(135deg, #427A4E 0%, #2F5E3A 100%); --log-blau: linear-gradient(135deg, #376F9C 0%, #28567E 100%);
  --log-orange: linear-gradient(135deg, #A85A1C 0%, #864515 100%); --log-petrol: linear-gradient(135deg, #2B6B6E 0%, #163C40 100%);
  --log-linie: rgba(255,255,255,.85); --log-leise: var(--weiss);
  --log-stufe-0: #F3EEE4; --log-stufe-1: #DCE7E6; --log-stufe-2: #A9C6C3; --log-stufe-3: #4E7A7E; --log-stufe-4: #1E4F54;
  --log-punkt: 34px;
  /* BaZi-Tagesfarben (Mission Abschnitt 7): Machen gruen, Leicht gelb, Ruhe blau, Nichts entscheiden rot. Immer mit Wort.
     Kraeftig fuer Raender, -tief fuer weisse Schrift (ab 5:1), -text auf -zart (ab 5,3:1); Gelb als volle Flaeche mit dunkler
     Schrift (-voll, -voll-text, ab 7:1), damit Gelb gelb bleibt. */
  --bazi-gruen: #4F8A5B; --bazi-gruen-tief: #427A4E; --bazi-gruen-zart: #E0EEDF; --bazi-gruen-text: #356340;
  --bazi-gelb: #E3B640; --bazi-gelb-tief: #7D6010; --bazi-gelb-voll: #E3B640; --bazi-gelb-voll-text: #2E2306; --bazi-gelb-zart: #F8EECF; --bazi-gelb-text: #6B5210;
  --bazi-blau: #3F7CAC; --bazi-blau-tief: #376F9C; --bazi-blau-zart: #E1ECF5; --bazi-blau-text: #2F6390;
  --bazi-rot: #C0574A; --bazi-rot-tief: #A24739; --bazi-rot-zart: #F6DEDA; --bazi-rot-text: #8E3A2D;
  --bazi-streifen: repeating-linear-gradient(135deg, rgba(192,87,74,.10) 0 8px, rgba(192,87,74,.04) 8px 16px);

  /* ── Ebenen ─────────────────────────────────────────────────────── */
  --ebene-leiste: 20; --ebene-karte: 30; --ebene-banner: 40; --ebene-menue: 50; --ebene-meldung: 60; --ebene-suche: 70; --ebene-geist: 1000; --ebene-statusleiste: 1100;

  /* ══ Porzellan (Design C, Plan 033, 18.10.2026) ══════════════════════════════════════════════════════════
     Nur Aussehen: Elfenbein mit Licht von oben, Flaechen wie glasiertes Porzellan mit echter Tiefe, schwebende Leiste
     in satiniertem Petrol, Tonerde als Rosegold, grosse Zahlen und Titel in Fraunces (scharf: SOFT 0, WONK 0).
     Die Werte unten ersetzen gleichnamige Werte weiter oben (spaeter im selben :root gewinnt). */
  --app-grund: linear-gradient(180deg, #FAF8F4 0%, #F4F0E9 640px);
  --flaeche-leise: #F6F1E9;
  --porzellan: linear-gradient(180deg, #FFFFFF 0%, #FBF8F4 100%);
  --linie: rgba(120,90,60,.15); --linie-zart: rgba(120,90,60,.09);
  --schatten-panel: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(70,45,25,.05), 0 14px 34px -12px rgba(70,45,25,.16);
  --hebung-1: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(70,45,25,.06), 0 8px 20px -10px rgba(70,45,25,.14);
  --hebung-2: 0 6px 16px -6px rgba(70,45,25,.24);
  --hebung-3: 0 28px 60px -14px rgba(40,30,20,.30), 0 4px 12px rgba(40,30,20,.08);
  --hebung-hover: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(70,45,25,.06), 0 24px 40px -16px rgba(70,45,25,.28);
  --rundung-klein: 10px; --rundung: 12px; --rundung-mittel: 12px; --rundung-gross: 16px;
  --rundung-panel: 22px; --rundung-schwebe: 24px; --rundung-leiste: 28px; --rundung-symbol: 50%;
  /* Seitenleiste: satiniertes Petrol, die gewaehlte Seite als helle Porzellan-Pille mit Rosegold-Symbol */
  --leiste-verlauf: linear-gradient(165deg, #245C61 0%, #1E4F54 38%, #133538 100%);
  --leiste-text-leise: #C3D6D4;   /* auf dem hellsten Leistenton 4,9:1 */
  --schatten-leiste: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 50px -18px rgba(19,53,56,.55);
  --leiste-glanz: radial-gradient(circle, rgba(255,255,255,.12), transparent 65%);
  --leiste-pille: linear-gradient(180deg, #FFFFFF 0%, #F3EFE8 100%);
  --leiste-pille-text: #133538; --leiste-pille-symbol: #9C5539;
  --leiste-pille-schatten: inset 0 1px 0 #FFFFFF, 0 6px 16px -6px rgba(0,0,0,.35);
  /* Petrol mit Tiefe (Hauptknoepfe, Neu, Tab-Leiste am Handy) */
  --petrol-satin: linear-gradient(180deg, #2E7076 0%, #1E4F54 60%, #163C40 100%);
  --satin-schatten: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -8px rgba(19,53,56,.7);
  /* Rosegold (Ringe, Akzente) und plastische Kugeln (Symbole in Kacheln) */
  --rosegold: linear-gradient(135deg, #E7B39C 0%, #C07A5E 55%, #8E4B31 100%); --rose-tief: #9C5539;
  --rosegold-schrift: linear-gradient(135deg, #B86E52 0%, #8E4B31 100%);   /* als Schrift ab 3,7:1 (nur grosse Schrift) */
  --kugel-licht: rgba(255,255,255,.45); --kugel-tiefe: rgba(0,0,0,.18);
  /* Rillen (Balken) und Mulden (Umschalter, Reiter) */
  --rille: #EFE9E0; --rille-schatten: inset 0 1px 2px rgba(70,45,25,.16);
  --mulde: #ECE6DC; --mulde-schatten: inset 0 1px 3px rgba(70,45,25,.12);
  /* Kraeftigere Kachelfarben (aus Entwurf B, rein optisch): Status nie Ton in Ton */
  --verlauf-sand: linear-gradient(160deg, #EFE3CC 0%, #FFFFFF 72%); --rand-sand: #E2D3B6;
  --verlauf-salbei: linear-gradient(160deg, #DCE7D4 0%, #FFFFFF 72%); --rand-salbei: #C9D7BF;
  --verlauf-rose: linear-gradient(160deg, #F4DFD4 0%, #FFFFFF 72%); --rand-rose: #E8C9BA;
  --verlauf-nebel: linear-gradient(160deg, #D4E3E2 0%, #FFFFFF 72%); --rand-nebel: #C2D5D4;
  /* Schriften: Titel in der Markenschrift Fraunces (scharf gestellt), grosse Zahlen zusaetzlich in Gloock (Entwurf C,
     SIL Open Font License, 18.10.2026); Text und Bedienung bleiben Work Sans */
  --schrift-zahl: "Gloock", "Fraunces", Georgia, serif; --zahl-form: "SOFT" 0, "WONK" 0;
  --etikett-weite: .1em;   /* Markenrichtlinie: Etiketten in Work Sans mit Laufweite, nie in Grossbuchstaben gezwungen (0,16 em brach in Kacheln um) */
  /* Abschnitt 2 Kern: Glanz auf der Buehne, Bild-Hintergrund der Bereichskarten, zarter Bildschatten */
  --leiste-glanz-buehne: radial-gradient(520px 300px at 88% -12%, rgba(255,255,255,.16), transparent 70%);
  --verlauf-bereich-porzellan: linear-gradient(160deg, #E2EBEA 0%, #F7F2EB 100%);
  --schatten-bild-zart: drop-shadow(0 6px 8px rgba(0,0,0,.16));
  --satin-licht: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.10) 100%);   /* Glanz auf farbigen Flaechen */
  /* Abschnitt 4 Money: Umschlaege als Kuverts (Papier, Lasche, Falz), Papier fuer knapp und ueberzogen */
  --kuvert-papier: linear-gradient(180deg, #FFFDF9 0%, #F8F2E9 100%);
  --kuvert-papier-knapp: linear-gradient(180deg, #FFFCF6 0%, #F8EAD6 100%);
  --kuvert-papier-rot: linear-gradient(180deg, #FFFBF9 0%, #F6E1DA 100%);
  --kuvert-lasche: 72px;
  --kuvert-lasche-flaeche: linear-gradient(180deg, #F6EEE2 0%, #EFE4D3 100%);
  --kuvert-falz: rgba(120,90,60,.14);
  /* Daily auf Wunsch (18.10.2026): Tagesband und Wachssiegel */
  --tagesband-hoehe: 46px;
  --tagesband-verlauf: linear-gradient(90deg, #E4ECEB 0%, #F5EFE6 55%, #EEE7F2 100%);
  --siegel: radial-gradient(circle at 34% 30%, #E9B39C 0%, #C07A5E 48%, #9C5539 100%);
  --siegel-schatten: inset 0 -3px 6px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.4), 0 4px 8px rgba(110,50,25,.35);
}

/* Schriften, selbst gehostet (keine fremden Server) */
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-kursiv.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("schriften/work-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("schriften/work-sans-kursiv.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("schriften/gloock.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }