/* Author: bertram.fritz@outlook.com * Created: 2026-08-04 * Updated: 2026-08-04 * Version: 1.0 * Description: CSS Custom Properties fuer Day/Night-Theme. Day Mode: weiche * Braun-/Nude-/Erdtoene (Inspiration vollneutral.ch), warm und * hell. Night Mode: elegantes, TIEFES Dunkelbraun/-grau statt * hartem Schwarz, damit das warme Farbschema erhalten bleibt. * * Aufloesung der Rangfolge (siehe assets/js/theme-init.js fuer * die flick-freie Anwendung VOR dem ersten Rendering): * 1. [data-theme="dark"] / [data-theme="light"] auf * (manuelle Nutzer-Wahl, in localStorage gemerkt) gewinnt * IMMER, wenn gesetzt. * 2. Ohne manuelle Wahl greift die OS-Praeferenz * (prefers-color-scheme). * 3. Fallback: Day Mode (:root-Basiswerte). * Usage: * (vor main.css einbinden) */ :root { /* --- Day Mode (Basis-/Fallback-Werte) --------------------------------- */ --color-bg: #faf6f1; --color-bg-elevated: #ffffff; --color-surface: #f2e9df; --color-surface-hover: #ece0d1; --color-text: #3d332a; --color-text-muted: #7a6c5d; --color-heading: #2c241d; --color-accent: #b3785a; --color-accent-hover: #9c6448; --color-accent-contrast: #ffffff; --color-border: #e4d9cc; --color-link: #8a5a3b; --color-link-hover: #6e4730; --color-overlay: rgb(44 36 29 / 55%); --color-danger: #b3392c; --color-success: #4c7a52; --shadow-soft: 0 2px 12px rgb(61 51 42 / 8%); --shadow-elevated: 0 8px 30px rgb(61 51 42 / 14%); /* --- Typografie --------------------------------------------------------- */ --font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-base: 1rem; --line-height-base: 1.6; /* --- Layout / sonstige Tokens -------------------------------------------- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --content-max-width: 1200px; --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* --- OS-Praeferenz: greift nur, wenn KEINE manuelle Wahl getroffen wurde --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #241f1a; --color-bg-elevated: #2e2822; --color-surface: #332c25; --color-surface-hover: #3d352c; --color-text: #ede4d9; --color-text-muted: #b3a696; --color-heading: #f5efe6; --color-accent: #d9a273; --color-accent-hover: #e6b488; --color-accent-contrast: #241f1a; --color-border: #453b31; --color-link: #e0b78e; --color-link-hover: #edcba7; --color-overlay: rgb(20 16 13 / 65%); --color-danger: #e0796b; --color-success: #8fbf95; --shadow-soft: 0 2px 12px rgb(0 0 0 / 30%); --shadow-elevated: 0 8px 30px rgb(0 0 0 / 45%); } } /* --- Manuelle Wahl (Toggle-Button, siehe theme-switch.js) ------------------ */ /* Gewinnt IMMER, unabhaengig von der OS-Praeferenz. */ :root[data-theme="dark"] { --color-bg: #241f1a; --color-bg-elevated: #2e2822; --color-surface: #332c25; --color-surface-hover: #3d352c; --color-text: #ede4d9; --color-text-muted: #b3a696; --color-heading: #f5efe6; --color-accent: #d9a273; --color-accent-hover: #e6b488; --color-accent-contrast: #241f1a; --color-border: #453b31; --color-link: #e0b78e; --color-link-hover: #edcba7; --color-overlay: rgb(20 16 13 / 65%); --color-danger: #e0796b; --color-success: #8fbf95; --shadow-soft: 0 2px 12px rgb(0 0 0 / 30%); --shadow-elevated: 0 8px 30px rgb(0 0 0 / 45%); } :root[data-theme="light"] { --color-bg: #faf6f1; --color-bg-elevated: #ffffff; --color-surface: #f2e9df; --color-surface-hover: #ece0d1; --color-text: #3d332a; --color-text-muted: #7a6c5d; --color-heading: #2c241d; --color-accent: #b3785a; --color-accent-hover: #9c6448; --color-accent-contrast: #ffffff; --color-border: #e4d9cc; --color-link: #8a5a3b; --color-link-hover: #6e4730; --color-overlay: rgb(44 36 29 / 55%); --color-danger: #b3392c; --color-success: #4c7a52; --shadow-soft: 0 2px 12px rgb(61 51 42 / 8%); --shadow-elevated: 0 8px 30px rgb(61 51 42 / 14%); } /* Erst NACH der initialen Theme-Anwendung (siehe theme-init.js, setzt diese Klasse per rAF/Timeout kurz nach dem Setzen von data-theme) werden Farbuebergaenge aktiviert - verhindert ein sichtbares "Durchblenden" beim allerersten Laden. */ .theme-transitions-enabled, .theme-transitions-enabled * { transition: var(--transition-theme); }