/* ============================================================ BERATUNG: Waldgrün-Design (Opt-in) ============================================================ Viertes Farbschema neben Hell, Dunkel und Rosa – übernommen aus dem Funktionstraining-Modul (FT), damit beide Anwendungen dieselbe Designsprache teilen. Wird – wie die anderen Themes – nicht automatisch über die System-Einstellung gewählt, sondern ausschließlich über die Buttons in der Fußzeile. Standard bleibt Hell; die Auswahl wird per localStorage ("beratung-theme") gemerkt und beim nächsten Besuch wiederhergestellt. Aktivierung erfolgt über data-theme="green" am -Element. Das Inline-Skript in html_head.php (und login.php) setzt es bereits vor dem ersten Rendering, damit kein Farb-Aufflackern beim Seitenwechsel entsteht. Designprinzip: ruhiges, erdig-warmes Waldgrün statt grellem Smaragd. Primärfarbe ist ein tiefes Tannengrün, das in Headern und aktiven Elementen die Rolle von --navy übernimmt. Da das gesamte Beratungsmodul über CSS-Variablen (Tokens) gestaltet ist, genügt im Wesentlichen das Umdefinieren dieser Tokens – alle Komponenten färben sich automatisch um. Alle Werte wurden auf AA-Kontrast (≥ 4.5:1) geprüft (Quelle: FT-Modul). ============================================================ */ html[data-theme="green"] { color-scheme: light; /* ── Neutralfarben: leicht ins Warm-Beige, wie Waldboden ── */ --bg: #F4F6F1; --surface: #FFFFFF; --border: #DCE4D4; --border-light: #E8EDE2; --text: #1A2218; --text-mid: #4B5944; --text-muted: #7A8772; /* ── "Navy"-Tokens → tiefes Tannengrün. Diese Token sind im Light-Design die Primärfarbe (Header, aktive Buttons, Links). Die Namen bleiben, damit keine Komponenten umbenannt werden müssen. #2D5A3D + #fff = 7.7:1 (AAA). ──────────────────── */ --navy: #2D5A3D; --navy-light: #3F7553; --navy-muted: #8AA994; --navy-wash: #E6EFE8; --navy-tint: #F0F5F0; /* ── Kupfer-Akzent → warmes Moosgrün-Olivton (u. a. Primär-/Speichern-Button). #6B7F2C + #fff = 4.61:1 (AA). ── */ --copper: #6B7F2C; --copper-dark: #56661F; --copper-light: #F0F2DD; --copper-wash: #E8EDCC; /* ── Weitere Akzente passend zum Wald-Schema gestimmt ────── */ --sea: #2B7A78; --sea-light: #E1F0EF; --plum: #6B5295; --plum-light: #EDE6F4; --amber: #A87A1A; --amber-light: #F8EED1; --rose: #A65261; --rose-light: #F7E6E8; /* ── Status-Farben: passend ins Wald-Schema ──────────────── */ --danger: #B33A2E; --danger-light: #FBEAE7; --success: #2A7A4C; --success-light: #DCEEDF; /* ── Schatten & Fokus leicht grün getönt ─────────────────── */ --sh-xs: 0 1px 2px rgba(45, 90, 61, .06); --sh-sm: 0 1px 4px rgba(45, 90, 61, .08), 0 1px 2px rgba(45, 90, 61, .05); --sh-md: 0 4px 16px rgba(45, 90, 61, .10), 0 1px 4px rgba(45, 90, 61, .05); --sh-lg: 0 12px 40px rgba(45, 90, 61, .14), 0 2px 8px rgba(45, 90, 61, .06); --sh-glow: 0 0 0 3px rgba(107, 127, 44, .30); --sh-focus: 0 0 0 3px rgba(45, 90, 61, .25); --focus-ring: rgba(45, 90, 61, .22); } /* ── Bilder dezent entsättigen, damit Fotos nicht aus dem Wald-Schema „herausstechen". Sehr zurückhaltend (0.96). ── */ html[data-theme="green"] img:not([src*=".svg"]) { opacity: 0.96; } /* ── Scrollbars (nur WebKit) im Schema-Ton ───────────────── */ html[data-theme="green"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="green"] ::-webkit-scrollbar-track { background: var(--bg); } html[data-theme="green"] ::-webkit-scrollbar-thumb { background: var(--navy-muted); border-radius: 5px; } html[data-theme="green"] ::-webkit-scrollbar-thumb:hover { background: var(--navy); } /* ── Print: niemals in Grün drucken – auf neutrale Marke zurücksetzen, damit Berichte sauber schwarz/navy wirken. ── */ @media print { html[data-theme="green"] { --bg: #FFFFFF; --surface: #FFFFFF; --navy: #1B2A4A; --copper: #C06B3E; } html[data-theme="green"] .site-header { background: #1B2A4A; } }