/* MARKEN-TOKENS todayislife.de -- alles, was bei einer anderen Marke (z.B. guardlane.de) anders waere: Farbpaletten, die sechs Themenvarianten, Schriftfamilien, markentragende Semantik (Links, Fokusring, Schatten-Farbton). Quelle: 001-todayislife.de/resources/css/app.css (@theme-Block, live Aurora-Hintergruende) und resources/views/layouts/app.blade.php (Font-Links: Instrument Sans, Fraunces, Caveat -- selbst gehostet, nicht Google Fonts). Hex -> oklch() ist reine Umrechnung, keine Neuinterpretation der Farben. Ein zweites Projekt bekommt eine zweite marke-.css mit denselben Token-Namen und eigenen Werten -- sonst nichts. design/tokens/system.css und alle component.css bleiben unangetastet. Standort (seit 2026-08-27, Kapitel C in docs/entscheidungen/design-lib-extraktion.md, Guido-Freigabe): bewusst HIER in eleventy-src/marke/, nicht in design/tokens/ -- design/ ist eine markenneutrale Bibliothek in einem eigenen Repo (Submodule), kennt keine Markenwerte mehr. Eingebunden per eigenem in eleventy-src/_includes/layout.mustache, kopiert per Eleventy-Passthrough (eleventy.config.js) nach dist//marke/. Die url()-Pfade unten zu design/assets/fonts/lora/ sind entsprechend relativ zu /marke/ (../design/...), NICHT mehr relativ zu design/tokens/ -- bei einem erneuten Umzug immer mitpruefen. Wird aktuell von BEIDEN Sites geladen (todayislife.de UND guardlane.de) -- es gibt keine marke-guardlane.css (verifiziert 2026-08-27). Guardlane erbt damit heute die todayislife-Markenfarben/-Schriften unveraendert; nur Logo/Favicon kommen aus sites/guardlane/site.json (brandAssets) separat. Das ist ein bestehender Platzhalter-Zustand (Peters Plan kennt ihn), keine neue Entscheidung dieser Verschiebung -- eine eigene marke-guardlane.css anzulegen ist eine Produktentscheidung, die Guido trifft, nicht diese Verschiebung. */:root{/* ---- Schriftfamilien ---- */--font-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;--font-script:'Caveat',cursive;/* ---- Marke: Kobalt / Ink / Papier (näher an Animshelf) ---- */--color-brand-50:oklch(98.2% 0.006 85);--color-brand-100:oklch(95.9% 0.01 85);--color-brand-200:oklch(91.6% 0.022 255);--color-brand-300:oklch(82.4% 0.065 258);--color-brand-400:oklch(71.2% 0.118 262);--color-brand-500:oklch(61.4% 0.186 266);--color-brand-600:oklch(56.3% 0.217 268);--color-brand-700:oklch(48.9% 0.181 269);--color-brand-800:oklch(30.2% 0.061 258);--color-brand-900:oklch(22.6% 0.03 270);--color-brand-950:oklch(16.8% 0.018 272);/* ---- Kontrast: Sonnenuntergang / Orangegold (secondary) ---- */--color-secondary-50:oklch(98.1% 0.026 80);--color-secondary-100:oklch(95.2% 0.058 77);--color-secondary-200:oklch(90.4% 0.097 72);--color-secondary-300:oklch(84.1% 0.132 66);--color-secondary-400:oklch(77.1% 0.158 58);--color-secondary-500:oklch(69.2% 0.166 48);--color-secondary-600:oklch(60.8% 0.151 41);--color-secondary-700:oklch(50.4% 0.124 37);--color-secondary-800:oklch(42.1% 0.096 35);--color-secondary-900:oklch(35.8% 0.075 33);--color-secondary-950:oklch(24.6% 0.051 31);/* ---- Vier Intelligenzen: Akzentfarbe je Themenbereich ---- */--color-ai:oklch(54.1% 0.247 293);/* violett, Legacy-Basis #7c3aed */--color-ai-light:oklch(89.4% 0.055 293);/* Legacy-Basis #ddd6fe */--color-bi:oklch(68.5% 0.148 237);/* himmelblau, Legacy-Basis #0ea5e9 */--color-bi-light:oklch(90.1% 0.055 231);/* Legacy-Basis #bae6fd */--color-hi:oklch(76.9% 0.165 70);/* bernstein, Legacy-Basis #f59e0b */--color-hi-light:oklch(92.4% 0.115 96);/* Legacy-Basis #fde68a */--color-si:oklch(69.6% 0.149 162);/* smaragd, Legacy-Basis #10b981 */--color-si-light:oklch(90.5% 0.089 164);/* Legacy-Basis #a7f3d0 *//* ---- Fuenfte Kategorie: "Ueber uns" -- keine Legacy-Referenzfarbe (Guido, 2026-08-18: gegengeprueft, keine vorhanden), daher direkt in oklch gewaehlt. Warmes Terrakotta/Rose bei Hue 20: hebt sich klar von Violett/ai (293), Himmelblau/bi (237), Bernstein/hi (70), Smaragd/si (162) und Petrol/brand (~218) ab, liegt auf demselben Helligkeits-/Saettigungs-Niveau (L ca. 70/90%, C ca. 0.15/0.08) wie die anderen vier fuer konsistente Kontrastwerte in Light/Dark. ---- */--color-ueber-uns:oklch(70.5% 0.155 20);--color-ueber-uns-light:oklch(90.8% 0.078 20);/* ---- Sechste Kategorie: "Kreta" (Blog-Rubrik) -- 2026-08-19, gleiches Muster wie --color-ueber-uns: kein Legacy-Referenzwert, direkt in oklch gewaehlt. Aegaeis-Blaugruen bei Hue 195: liegt klar zwischen bi/Himmelblau (237) und si/Smaragd (162), aber deutlich genug Abstand zu beiden (>40 Hue-Grad), um auf einer Seite mit BI-Cards nicht verwechselt zu werden. Gleiches L/C-Niveau (L ca. 70/90%, C ca. 0.13/0.06) wie ai/bi/si/hi/ueber-uns fuer konsistente Kontrastwerte in Light/Dark. ---- */--color-kreta:oklch(70% 0.135 195);--color-kreta-light:oklch(90.6% 0.06 195);/* ---- Rollen-Ausgabe der Marke (helle Grundstimmung, Default-Ebene auf :root) ---- Diese sechs Rollen ergaenzen die neutralen Rollen aus system.css um alles, was tatsaechlich Markenfarbe braucht. Komponenten-CSS referenziert NUR diese Namen, nie --color-brand-600 direkt. */--farbe-grund:oklch(96.7% 0.008 85);--farbe-flaeche:oklch(99% 0.004 85);--farbe-text:oklch(17.8% 0.015 272);--farbe-text-gedaempft:oklch(43.5% 0.014 272);--farbe-text-dezent:oklch(49% 0.014 272);--farbe-akzent:var(--color-brand-600);--farbe-auf-akzent:var(--color-white);--farbe-link:var(--color-brand-600);--farbe-link-hover:var(--color-brand-700);--farbe-fokus:var(--color-brand-500);--farbe-schatten-tonwert:10 10 11;/* Animshelf-Ink statt petrolgrauer Standard *//* ---- Dekorative Glanzlicht-Tokens (Guido/Achilles, 2026-08-27) ---- Architektur-Fix: design/components/{footer,bildbuehne,team-sektion, collage-block,cta-section,page-guide,hero}.css hatten bisher direkt --color-bi/--color-si/(-light)/--color-hi (+ -light) fuer rein dekorative Verlaufs-"Lichtflecken" hartkodiert -- Produkt-Vertikalen- Tokens in einer Komponenten-Bibliothek, die markenneutral sein soll (design/-Submodule). marke-guardlane.css definiert diese Vertikalen gar nicht, Folge: color-mix() mit undefinierter Variable macht die GESAMTE background-Deklaration ungueltig -- sichtbarster Fall: CTA-Sections weisse Schrift auf weissem Grund. Fix: die sieben Komponenten referenzieren jetzt --farbe-glanz-a/-b/-c (+ -light), die JEDE Marke definiert -- hier 1:1 auf die alten --color-bi/--color-si/--color-hi gemappt, damit sich an der todayislife-Optik NICHTS aendert (identischer var()-Wert, nur eine Indirektionsebene mehr). */--farbe-glanz-a:var(--color-bi);--farbe-glanz-a-light:var(--color-bi-light);--farbe-glanz-b:var(--color-si);--farbe-glanz-b-light:var(--color-si-light);--farbe-glanz-c:var(--color-hi);--farbe-glanz-c-light:var(--color-hi-light);/* ---- Vier Intelligenzen als Fliesstext-Farbe (Guido, 2026-08-18) ---- Fuer die eigenstaendigen AI/BI/HI/SI-Hauptmenuepunkte in der Nav: Text direkt auf --farbe-grund, nicht Icon auf getoentem Badge-Grund wie --color-ai/bi/hi/si. bi/hi/si sind in ihrer Rohform (L 68-77%) auf hellem Grund zu blass fuer AA-Textkontrast (bi/si ~2.5:1, hi/Bernstein sogar ~2:1) -- hier dunklere Geschwister derselben Hue/Chroma-Familie. ai bleibt unveraendert, seine Rohform (L 54%) traegt bereits als Text. Hell-Default hier, Dunkel-Override direkt darunter -- selber Drei-Wege-Mechanismus wie --farbe-grund in system.css. */--farbe-ai-text:var(--color-ai);--farbe-bi-text:oklch(46% 0.135 237);--farbe-hi-text:oklch(40% 0.13 70);--farbe-si-text:oklch(42% 0.11 162);/* Kreta-Rubrik-Text: gleiche Herleitung wie bi/hi/si-text oben -- Rohform (L 70%) zu blass fuer AA auf hellem Grund, dunkleres Geschwister derselben Hue/Chroma-Familie (195). */--farbe-kreta-text:oklch(44% 0.115 195);/* ---- Zeitungsstil-Fliesstext (Blog-Artikel, TEIL B) -- 2026-08-19. Eigene Lese-Serife statt Fraunces (das ist die Display-/Ueberschriften-Serife, bei Fliesstextgroesse zu quirky/eng), damit der "Zeitungs"-Charakter klar von der sonstigen Sans-Serif (Instrument Sans) UND von der Display-Serife unterscheidbar bleibt. Lora: kalligrafische Wurzeln, fuer Lesetext optimiert, traegt deutsche Umlaute/Hyphenation gut. Papierfarbe: warmer Off-White statt --farbe-grund (neutral) -- separater Token, weil er NUR den Blog-Artikel- Textbereich faerbt, nie die Seite. */--font-serif-lesend:'Lora',var(--font-display),Georgia,'Times New Roman',serif;--farbe-papier:oklch(97.6% 0.014 75)}/* Lora self-hosted (Guido 2026-08-19, rechtliches Risiko): Google Fonts per haette bei jedem Seitenaufruf die Besucher-IP an Google geschickt, ohne Einwilligung -- bekanntes Abmahnungsrisiko in Deutschland (LG Muenchen 2022). Lokale @font-face-Dateien statt externem CDN-Link, kein Tracking- Request mehr. Nur die tatsaechlich genutzten Schnitte (rich-text.css: 400 normal Fliesstext, 600 normal fuer , 400 italic fuer Blockquote) -- kein 700er/Variable-Font-Overhead fuer ungenutzte Gewichte. latin + latin-ext deckt deutschen Text (inkl. Umlaute/ß/Anfuehrungszeichen) vollstaendig ab -- cyrillic/vietnamese/math/symbols-Subsets von Google Fonts bewusst weggelassen (kein deutscher Content braucht sie); Lora selbst hat kein Griechisch, siehe Literata (greek) weiter unten. */@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../design/assets/fonts/lora/lora-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../design/assets/fonts/lora/lora-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('../design/assets/fonts/lora/lora-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('../design/assets/fonts/lora/lora-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../design/assets/fonts/lora/lora-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../design/assets/fonts/lora/lora-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}/* Griechisch (Uebersetzung el, P3 2026-10-15): Lora hat kein Griechisch (Google-Fonts-Subsets: nur Latin, Latin-Ext, Cyrillic, Vietnamese), die Lese-Serife fiele sonst auf eine beliebige Systemschrift zurueck. Ergaenzung: Literata (The Literata Project Authors, SIL OFL 1.1; Lizenztext design/assets/fonts/literata/OFL.txt), kalligrafisches Skelett und Strichstaerke nah an Lora, ausgewaehlt per Sichtvergleich mit Source Serif 4 und Noto Serif. Nur Subset "greek" (U+0370-03FF, monotonisches Griechisch inkl. Tonos und Dialytika), je Datei rund 8 KB, dieselben drei Schnitte wie Lora. Die Dateien werden nur geladen, wenn die Seite griechische Zeichen enthaelt (unicode-range) -- deutsche und englische Seiten laden sie nie, daher auch kein Preload. */@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('../design/assets/fonts/literata/literata-400-normal-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url('../design/assets/fonts/literata/literata-600-normal-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('../design/assets/fonts/literata/literata-400-italic-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}/* Seiten mit lang="el": Lora bleibt fuer lateinische Zeichen (Markennamen, AI, Zahlen) die erste Familie, griechische Zeichen kommen aus Literata. */:root:lang(el){--font-serif-lesend:'Lora','Literata',var(--font-display),Georgia,'Times New Roman',serif}:root{/* ---- Gefahren-Rolle (Button-Variante "danger": destruktive Aktionen wie "Daten loeschen") -- neu, 2026-08-18. Kein Legacy-Referenzwert vorhanden (Legacy kennt nur ein einziges btn-danger auf Tailwind-red-600), daher direkt in oklch gewaehlt: Hue 25 (klassisches Warnrot) auf demselben L/C-Niveau wie --color-brand-600 (L ca. 52%, C ca. 0.08-0.1), damit primary/danger im gefuellten Button gleich "schwer" wirken, nicht eine Variante blasser. */--farbe-gefahr:oklch(52% 0.19 25);--farbe-gefahr-hover:oklch(45% 0.19 25);--farbe-auf-gefahr:var(--color-white)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){/* Dunkler Grund: die ohnehin vorhandenen hellen -light-Geschwister tragen dort reichlich Kontrast, kein weiterer eigener Wert noetig. */--farbe-ai-text:var(--color-ai-light);--farbe-bi-text:var(--color-bi-light);--farbe-hi-text:var(--color-hi-light);--farbe-si-text:var(--color-si-light);--farbe-kreta-text:var(--color-kreta-light);/* Papier auf dunklem Grund: kein grelles Weiss, sondern gedaempftes warmes Dunkelbraun -- bleibt "Papier"-Anmutung, ohne den Rest der dunklen Seite zu sprengen. Gleiches L/C-Niveau wie --nacht-flaeche (system.css), nur mit der warmen Hue 75 statt neutralem Grau. */--farbe-papier:oklch(23% 0.018 75);/* Gefahren-Rolle auf dunklem Grund: heller und entsaettigter als der Light-Wert, sonst wirkt das Warnrot auf --nacht-grund/--nacht-flaeche zu grell. */--farbe-gefahr:oklch(68% 0.16 25);--farbe-gefahr-hover:oklch(75% 0.15 25);/* Korrekturpaket 2026-10-13 (Lena M1, Vera 6): Links und gedaempfte Zusatztexte auf dunklem Grund heller (Marken-Blau 56 % Helligkeit war auf Fast-Schwarz zu matt). */--farbe-link:var(--color-brand-300);--farbe-link-hover:var(--color-brand-200);--farbe-text-dezent:oklch(67% 0.013 272)}}:root[data-theme="dark"]{--farbe-ai-text:var(--color-ai-light);--farbe-bi-text:var(--color-bi-light);--farbe-hi-text:var(--color-hi-light);--farbe-si-text:var(--color-si-light);--farbe-kreta-text:var(--color-kreta-light);--farbe-papier:oklch(23% 0.018 75);--farbe-gefahr:oklch(68% 0.16 25);--farbe-gefahr-hover:oklch(75% 0.15 25);--farbe-link:var(--color-brand-300);--farbe-link-hover:var(--color-brand-200);--farbe-text-dezent:oklch(67% 0.013 272)}/* data-akzent -- punktueller Farbtupfer (Card-Badge, -Leiste). Flaeche/Text der Komponente bleiben unveraendert, nur --farbe-akzent wird lokal ueberschrieben. *//* ai/bi/si/hi lesen bewusst --farbe-*-text (oben) statt --color-ai/bi/si/hi direkt: dieselben Tokens tragen bereits eine Light/Dark-kalibrierte Kontrastkorrektur (a11y-Audit Finding 2, Lena 2026-08-19 -- bi/hi/si waren als --farbe-akzent auf hellem Grund bei 2.1-2.8:1 statt 4.5:1). Ein zweiter, separat zu pflegender Kontrastwert waere hier Doppelarbeit. */[data-akzent="brand"]{--farbe-akzent:var(--color-brand-600)}[data-akzent="ai"]{--farbe-akzent:var(--farbe-ai-text)}[data-akzent="bi"]{--farbe-akzent:var(--farbe-bi-text)}[data-akzent="si"]{--farbe-akzent:var(--farbe-si-text)}[data-akzent="hi"]{--farbe-akzent:var(--farbe-hi-text)}[data-akzent="kreta"]{--farbe-akzent:var(--farbe-kreta-text)}[data-akzent="ueber-uns"]{--farbe-akzent:var(--color-ueber-uns)}[data-akzent="neutral"]{--farbe-akzent:var(--color-gray-500)}/* data-thema -- volle Sektions-Umfaerbung (Hero). Exakt derselbe Mechanismus wie [data-tonwert="dunkel"] in system.css (lokale Rollen-Ueberschreibung), nur mit Markenfarbe statt neutralem Grau. Vier der sechs Werte sind dunkel-auf-Farbe (ai/bi/si/hi), zwei sind hell (default/brand) -- die Rollen tragen beides gleich, das ist der Beweis, dass ein Mechanismus fuer Light-Mode, Dark-Mode UND farbige Sektionen reicht. *//* data-thema="default" bewusst OHNE eigenen Block: "default" heisst "keine eigene Farbwelt", die Rollen bleiben, was die Seite (hell/dunkel) ohnehin schon gesetzt hat. Ein eigener Block wuerde hier faelschlich Hell erzwingen, auch wenn die Seite gerade im Dark Mode steht -- genau der Fehler, der beim Dark-Mode-Test aufgefallen ist. */[data-thema="brand"]{--farbe-grund:color-mix(in oklch, var(--color-brand-50) 82%, var(--color-secondary-50) 18%);--farbe-flaeche:color-mix(in oklch, var(--color-brand-100) 72%, var(--color-white) 28%);--farbe-text:oklch(17.8% 0.015 272);--farbe-text-gedaempft:oklch(43.5% 0.014 272);--farbe-text-dezent:oklch(49% 0.014 272);--farbe-akzent:var(--color-brand-600);--farbe-auf-akzent:var(--color-white)}[data-thema="papier"]{--farbe-grund:oklch(97.6% 0.008 85);--farbe-flaeche:oklch(99.1% 0.004 85);--farbe-text:oklch(17.8% 0.015 272);--farbe-text-gedaempft:oklch(43.5% 0.014 272);--farbe-text-dezent:oklch(49% 0.014 272);--farbe-akzent:var(--color-brand-600);--farbe-auf-akzent:var(--color-white)}[data-thema="sand"]{--farbe-grund:oklch(94.8% 0.026 75);--farbe-flaeche:oklch(97.1% 0.014 78);--farbe-text:oklch(19.2% 0.018 272);--farbe-text-gedaempft:oklch(44.8% 0.016 272);--farbe-text-dezent:oklch(50% 0.014 272);--farbe-akzent:var(--color-secondary-500);--farbe-auf-akzent:var(--color-white)}[data-thema="kobalt-hell"]{--farbe-grund:oklch(93.8% 0.024 255);--farbe-flaeche:oklch(97.8% 0.01 255);--farbe-text:oklch(18.4% 0.018 272);--farbe-text-gedaempft:oklch(42.6% 0.016 272);--farbe-text-dezent:oklch(49% 0.014 272);--farbe-akzent:var(--color-brand-600);--farbe-auf-akzent:var(--color-white)}/* Dark-Mode-Fix (Guido/Achilles, 2026-08-20): [data-thema="brand"] war fest auf Hell verdrahtet (brand-50-Grund, gray-900-Text) -- ohne eigenen Dark-Block blieb jede so gefaerbte Section (Hero, "Was wir tun") im Dark Mode unveraendert hell, der Theme-Toggle wirkte dort sichtbar nicht. Fix: exakt dieselben Rollenwerte wie [data-thema="brand-dunkel"] (satteres, dunkleres Petrol) -- kein neuer Farbwert, nur derselbe bereits vorhandene dunkle Gegenpol, den die Seite fuer "brand" im Dark Mode ohnehin bräuchte. Gleicher Doppel-Selektor-Mechanismus wie system.css/weiter oben in dieser Datei (@media-Query fuer System-Praeferenz + [data-theme="dark"] fuer den expliziten Toggle) -- :not([data-theme="light"]) haelt einen manuell auf Hell gestellten Toggle von dieser Regel fern, exakt wie beim globalen Root-Override oben. */@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-thema="brand"]{--farbe-grund:oklch(17.2% 0.014 272);--farbe-flaeche:oklch(22% 0.016 272);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(66% 0.014 272);--farbe-akzent:var(--color-secondary-400);--farbe-auf-akzent:oklch(17.2% 0.014 272);--farbe-text-dezent:oklch(67% 0.013 272)}:root:not([data-theme="light"]) [data-thema="papier"]{--farbe-grund:oklch(15.4% 0.012 272);--farbe-flaeche:oklch(20.1% 0.014 272);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(66% 0.014 272);--farbe-akzent:var(--color-brand-300);--farbe-auf-akzent:oklch(15.4% 0.012 272);--farbe-text-dezent:oklch(67% 0.013 272)}:root:not([data-theme="light"]) [data-thema="sand"]{--farbe-grund:oklch(18.2% 0.018 46);--farbe-flaeche:oklch(22.4% 0.018 38);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(74% 0.022 68);--farbe-akzent:var(--color-secondary-300);--farbe-auf-akzent:oklch(18.2% 0.018 46);--farbe-text-dezent:oklch(70% 0.018 56)}:root:not([data-theme="light"]) [data-thema="kobalt-hell"]{--farbe-grund:oklch(18.1% 0.028 262);--farbe-flaeche:oklch(22.8% 0.024 260);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(70% 0.02 250);--farbe-akzent:var(--color-brand-300);--farbe-auf-akzent:oklch(18.1% 0.028 262);--farbe-text-dezent:oklch(68% 0.018 252)}}:root[data-theme="dark"] [data-thema="brand"]{--farbe-grund:oklch(17.2% 0.014 272);--farbe-flaeche:oklch(22% 0.016 272);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(66% 0.014 272);--farbe-akzent:var(--color-secondary-400);--farbe-auf-akzent:oklch(17.2% 0.014 272);--farbe-text-dezent:oklch(67% 0.013 272)}:root[data-theme="dark"] [data-thema="papier"]{--farbe-grund:oklch(15.4% 0.012 272);--farbe-flaeche:oklch(20.1% 0.014 272);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(66% 0.014 272);--farbe-akzent:var(--color-brand-300);--farbe-auf-akzent:oklch(15.4% 0.012 272);--farbe-text-dezent:oklch(67% 0.013 272)}:root[data-theme="dark"] [data-thema="sand"]{--farbe-grund:oklch(18.2% 0.018 46);--farbe-flaeche:oklch(22.4% 0.018 38);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(74% 0.022 68);--farbe-akzent:var(--color-secondary-300);--farbe-auf-akzent:oklch(18.2% 0.018 46);--farbe-text-dezent:oklch(70% 0.018 56)}:root[data-theme="dark"] [data-thema="kobalt-hell"]{--farbe-grund:oklch(18.1% 0.028 262);--farbe-flaeche:oklch(22.8% 0.024 260);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(70% 0.02 250);--farbe-akzent:var(--color-brand-300);--farbe-auf-akzent:oklch(18.1% 0.028 262);--farbe-text-dezent:oklch(68% 0.018 252)}/* Dunkler Gegenpol zu "brand" -- selbe Markenfarbe (Petrol), nur satter/dunkler statt fast-weiss. Fuer Abschnitte, die sich bewusst gegen eine sonst helle Seite absetzen sollen (Lotti/Guido, 2026-08-18: Footer als "dunkler Gegenpol", mehr Tiefe im Gesamtbild). Akzent bewusst Kupfer/Sekundaerfarbe statt nochmal Petrol -- auf dunklem Petrol wuerde ein Petrol-Akzent kaum auffallen, Kupfer greift ausserdem die warmen Bluetenfarben im echten Logo auf. */[data-thema="brand-dunkel"]{--farbe-grund:oklch(15.8% 0.014 272);--farbe-flaeche:oklch(21.2% 0.016 272);--farbe-text:oklch(95.4% 0.01 85);--farbe-text-gedaempft:oklch(66% 0.014 272);--farbe-akzent:var(--color-secondary-400);--farbe-auf-akzent:oklch(17.2% 0.014 272);/* --farbe-text-dezent (system.css) bleibt sonst --color-gray-500 -- im Light Mode ein Grauton fuer HELLEN Grund, hier aber auf dem erzwungen dunklen Footer-Hintergrund (a11y-Audit Finding 2, Betroffenes Element .footer__since: 2.94:1 statt 4.5:1). Selber Grauton wie --farbe-text-gedaempft oben, nur ohne dessen Deckkraft-Reduktion. */--farbe-text-dezent:oklch(67% 0.013 272)}[data-thema="ai"]{--farbe-grund:oklch(25% 0.10 286);--farbe-flaeche:oklch(18% 0.08 278);--farbe-text:var(--color-white);--farbe-text-gedaempft:oklch(85% 0.04 292 / 0.85);--farbe-akzent:var(--color-ai-light);--farbe-auf-akzent:var(--color-gray-900)}[data-thema="bi"]{--farbe-grund:oklch(33% 0.10 238);--farbe-flaeche:oklch(22% 0.08 232);--farbe-text:var(--color-white);--farbe-text-gedaempft:oklch(85% 0.03 246 / 0.85);--farbe-akzent:var(--color-bi-light);--farbe-auf-akzent:var(--color-gray-900)}[data-thema="si"]{--farbe-grund:oklch(34% 0.09 168);--farbe-flaeche:oklch(22% 0.07 176);--farbe-text:var(--color-white);--farbe-text-gedaempft:oklch(85% 0.04 172 / 0.85);--farbe-akzent:var(--color-si-light);--farbe-auf-akzent:var(--color-gray-900)}[data-thema="hi"]{--farbe-grund:oklch(51% 0.15 58);--farbe-flaeche:oklch(37% 0.14 36);--farbe-text:var(--color-white);--farbe-text-gedaempft:oklch(95% 0.03 60);--farbe-akzent:var(--color-hi-light);--farbe-auf-akzent:var(--color-gray-900)}