/* * Fuenf Themes, je ein festes Set aus Farbpalette und Schriftpaarung — * keine freie Kombination, siehe SPEC.md Abschnitt 6 und 6a. * * Ausgewaehlt ueber [data-theme-name] (wald|meer|glut|stein|nebel) und * [data-color-mode] (light|dark) auf , gesetzt vom Einstellungs- * Skript aus dem localStorage — nie vom Server, keine Kontosynchronisation. * Ohne gesetztes data-color-mode entscheidet prefers-color-scheme. * * Jedes Ink/Paper-, Muted/Paper- und Accent-Paar ist gegen WCAG 2.2 AA * geprueft (mindestens 4.5:1) — siehe LOG-Eintrag zum Bau vom * 2026-09-05, die Werte stehen nicht zur freien Verhandlung, ohne die * Pruefung zu wiederholen. * * Kerze, Icons und Stockfotos bleiben von dieser Datei unberuehrt — sie * ist reine Farbe und Schrift, keine Bildauswahl. */ :root { --font-heading: "Work Sans", sans-serif; --font-body: "Work Sans", sans-serif; } /* Wald — Braun-Pastell und Gruen-Pastell gemischt, ruhige Serifenschrift. Grund und Akzent tragen die Mischung getrennt statt als ein verwaschener Zwischenton: Pastellgruen als Grund (Waldboden, Licht durchs Blaetterdach), warmes Braun als Akzent (Rinde, Erde) — beide Farben bleiben lesbar, wo ein einzelner Mischton stumpf würde. */ :root[data-theme-name="wald"] { --font-heading: "Source Serif 4", serif; --font-body: "Work Sans", sans-serif; --paper: #eef1e6; --surface: #e2e8d3; --ink: #33281c; --muted: #5f5138; --line: #cdd3b8; --accent: #5b6b42; --accent-ink: #f5f7ee; } :root[data-theme-name="wald"][data-color-mode="dark"] { --paper: #1c2015; --surface: #262b1c; --ink: #e8ecd9; --muted: #b9c19e; --line: #3d4530; --accent: #9db06e; --accent-ink: #1c2015; } /* Meer — kuehle, gedeckte Blau-/Grautoene, klare serifenlose Schrift */ :root[data-theme-name="meer"] { --font-heading: "Work Sans", sans-serif; --font-body: "Work Sans", sans-serif; --paper: #eef2f4; --surface: #e0e8eb; --ink: #1c2b33; --muted: #4d6672; --line: #c3d2d7; --accent: #2f5d62; --accent-ink: #f5fbfb; } :root[data-theme-name="meer"][data-color-mode="dark"] { --paper: #121b1f; --surface: #1a2529; --ink: #e7eff0; --muted: #a8c0c8; --line: #2f4247; --accent: #5fa3aa; --accent-ink: #0d1417; } /* Glut — gedeckte Rostrot-/Orangetoene, bewusst nicht knallig */ :root[data-theme-name="glut"] { --font-heading: "Work Sans", sans-serif; --font-body: "Work Sans", sans-serif; --paper: #f7ece3; --surface: #efdccb; --ink: #3a2418; --muted: #7a5140; --line: #dcbfa4; --accent: #8a4a2f; --accent-ink: #fdf3ea; } :root[data-theme-name="glut"][data-color-mode="dark"] { --paper: #20140d; --surface: #2a1c13; --ink: #f2e2d6; --muted: #cf9d82; --line: #4a3324; --accent: #c97a4c; --accent-ink: #20140d; } /* Stein — neutrale Grau-/Beigetoene */ :root[data-theme-name="stein"] { --font-heading: "Work Sans", sans-serif; --font-body: "Work Sans", sans-serif; --paper: #f0ede7; --surface: #e4dfd6; --ink: #2c2a26; --muted: #5c584f; --line: #cfc7ba; --accent: #55524a; --accent-ink: #f7f5f0; } :root[data-theme-name="stein"][data-color-mode="dark"] { --paper: #1e1c19; --surface: #29261f; --ink: #ece8e0; --muted: #b3ac9e; --line: #43403a; --accent: #a39a88; --accent-ink: #1e1c19; } /* Nebel — helle Silber-/Grautoene */ :root[data-theme-name="nebel"] { --font-heading: "Work Sans", sans-serif; --font-body: "Work Sans", sans-serif; --paper: #f5f6f7; --surface: #e9ebec; --ink: #26282b; --muted: #585c60; --line: #d3d6d8; --accent: #3f4750; --accent-ink: #f7f8f9; } :root[data-theme-name="nebel"][data-color-mode="dark"] { --paper: #1b1d1f; --surface: #242628; --ink: #eceeef; --muted: #a8adb2; --line: #3a3d40; --accent: #8b95a0; --accent-ink: #1b1d1f; } /* Ohne getroffene Wahl: Stein als Vorgabe, Systempraeferenz fuer hell/dunkel. */ :root:not([data-theme-name]) { --font-heading: "Work Sans", sans-serif; --font-body: "Work Sans", sans-serif; --paper: #f0ede7; --surface: #e4dfd6; --ink: #2c2a26; --muted: #5c584f; --line: #cfc7ba; --accent: #55524a; --accent-ink: #f7f5f0; } @media (prefers-color-scheme: dark) { :root:not([data-theme-name]):not([data-color-mode="light"]) { --paper: #1e1c19; --surface: #29261f; --ink: #ece8e0; --muted: #b3ac9e; --line: #43403a; --accent: #a39a88; --accent-ink: #1e1c19; } }