/* ============================================================ THEME-SYSTEM – Hell/Dunkel-Umschalter (Standard: dunkel) ------------------------------------------------------------ Steuerung über . - Dunkel = Default (die bestehenden :root-Tokens je Seite). - Hier definieren wir zusätzliche FLÄCHEN-Tokens (Nav/Panels/ Hover/Body-Verlauf/Glow), die bisher hartkodiert dunkel waren, sowie den kompletten LIGHT-Token-Satz. Eingebunden VOR nav.css, damit nav.css die Tokens nutzen kann. ============================================================ */ /* ---- Flächen-Tokens, DUNKEL als Default (ergänzt die Seiten-:root) ---- */ :root { --nav-bg: rgba(5, 9, 20, .9); --nav-bg-scrolled: rgba(5, 9, 20, .95); --drop-bg: rgba(5, 9, 20, .98); --surface: rgba(255, 255, 255, .04); --surface-2: rgba(255, 255, 255, .06); --hover: rgba(255, 255, 255, .04); --body-grad: linear-gradient(180deg, #050914 0%, #0a1426 50%, #050914 100%); --glow-gold: rgba(245, 158, 11, .10); --glow-blue-1: rgba(96, 165, 250, .015); --glow-blue-2: rgba(96, 165, 250, .01); --section-tint: rgba(5, 9, 20, .6); color-scheme: dark; } /* ---- LIGHT-Modus: alle Tokens umdefinieren (höhere Spezifität → gewinnt) ---- */ html[data-theme="light"] { --bg: #f4f6fb; --bg-2: #e7ecf6; --line: rgba(11, 16, 32, .10); --line-2: rgba(11, 16, 32, .17); --ink: #0b1020; --ink-2: #36405a; --ink-3: #5c6678; --ink-4: #828ca2; /* Akzente bleiben markenkonform auf hell+dunkel */ --gold: #d97f06; --gold-2: #f59e0b; --gold-3: #b45309; --blue: #2563eb; --blue-2: #3b82f6; --g: #16a34a; --nav-bg: rgba(255, 255, 255, .86); --nav-bg-scrolled: rgba(255, 255, 255, .94); --drop-bg: rgba(255, 255, 255, .98); --surface: rgba(11, 16, 32, .035); --surface-2: rgba(11, 16, 32, .06); --hover: rgba(11, 16, 32, .055); --body-grad: linear-gradient(180deg, #f4f6fb 0%, #e9eef7 50%, #f4f6fb 100%); --glow-gold: rgba(245, 158, 11, .10); --glow-blue-1: rgba(37, 99, 235, .05); --glow-blue-2: rgba(37, 99, 235, .04); --section-tint: rgba(255, 255, 255, .55); /* installation.html nutzt ein eigenes Token-System – nur der reine Dunkel-Flächen-Ton (--n950) wird hell; --n600..800 bleiben (Blau-Akzent/Text). */ --n950: #f4f6fb; /* installation.html Sekundärtext (--s400 #94a3b8 = ~2,4:1 auf hell) → AA-fest. Alle --s400-Flächen basieren auf --n950 (hellen in Light auf). */ --s400: #64748b; color-scheme: light; } /* ============================================================ LIGHT-MODE LESBARKEIT – Gold-Akzente als VORDERGRUND abdunkeln. --gold (#d97f06) als Text auf hell = ~2,8:1 (unter WCAG-AA). Hier auf --gold-3 (#b45309 ≈ 4,3:1) ziehen. Betrifft NUR Text-/ Icon-Akzente; Gold-FLÄCHEN (background:var(--gold) + dunkler Text, z.B. Buttons/Cart-FAB) bleiben unberührt und voll lesbar. ============================================================ */ html[data-theme="light"] .eyebrow, html[data-theme="light"] .card-eyebrow, html[data-theme="light"] .panel-eyebrow, html[data-theme="light"] .order-head-kicker, html[data-theme="light"] .modell-kicker, html[data-theme="light"] .founder-role, html[data-theme="light"] .footer-col h5, html[data-theme="light"] .hero-story-mark, html[data-theme="light"] .partner-link, html[data-theme="light"] .order-prov-note strong, html[data-theme="light"] .order-prov-note .prov-plus, html[data-theme="light"] .modell-hint a, html[data-theme="light"] .order-table .pt-anfrage, html[data-theme="light"] .cta h2 em, html[data-theme="light"] .order-head h3 em, html[data-theme="light"] .modell.ftc h3 em, html[data-theme="light"] .modell-price strong em, html[data-theme="light"] .hero-stat-num em, html[data-theme="light"] .fact-num em { color: var(--gold-3) !important; -webkit-text-fill-color: var(--gold-3); /* falls als Gradient-Text deklariert */ } /* Gradient-Highlights in Headlines: dunklere Gold-Stops für hellen Grund */ html[data-theme="light"] .display em, html[data-theme="light"] .hero h1 em, html[data-theme="light"] .hero-h1-sub em, html[data-theme="light"] h1 em.grad, html[data-theme="light"] .grad-gold { background: linear-gradient(135deg, #b45309 0%, #c2410c 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Sanfter Übergang beim Umschalten (nur Farben, kein Layout-Ruckeln) */ html.theme-anim, html.theme-anim body, html.theme-anim .nav, html.theme-anim .nav-drop { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* ============================================================ UMSCHALTER-BUTTON (Sonne/Mond) – in der Nav ============================================================ */ .nav-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line, rgba(255, 255, 255, .08)); background: var(--surface, rgba(255, 255, 255, .04)); color: var(--ink-2, #cfd6e4); cursor: pointer; transition: color .25s, background .25s, border-color .25s, transform .25s; flex-shrink: 0; padding: 0; } .nav-theme-toggle:hover { color: var(--gold-2, #fbbf24); border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08); } .nav-theme-toggle:focus-visible { outline: 2px solid rgba(245, 158, 11, .55); outline-offset: 2px; } .nav-theme-toggle svg { width: 19px; height: 19px; display: block; } /* Icon-Umschaltung: im Dunkel-Modus Sonne (→ hell wechseln), im Hell-Modus Mond (→ dunkel wechseln). */ .nav-theme-toggle .ico-moon { display: none; } .nav-theme-toggle .ico-sun { display: block; } html[data-theme="light"] .nav-theme-toggle .ico-sun { display: none; } html[data-theme="light"] .nav-theme-toggle .ico-moon { display: block; } @media (max-width: 480px) { .nav-theme-toggle { width: 36px; height: 36px; } }