/* ===================================================================== HELL/DUNKEL-MODUS — Token-Overrides + Umschalter Lädt als LETZTES Stylesheet. Standard = Systemeinstellung, die Wahl über den Umschalter (data-theme auf ) gewinnt. ===================================================================== */ :root { color-scheme: light; /* Neue Tokens für vorher fest verdrahtete Stellen */ --header-glass: rgba(251, 247, 240, 0.92); --eyebrow-ink: var(--gold-deep); --scroll-thumb: var(--navy-800); } /* ---------- Dunkle Palette (1× für data-theme, 1× für System) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0E1626; --bg-soft: #121D31; --paper: #17233B; --ink: #EFE9DC; --muted: #A3ADC0; --terra: #C86B39; --terra-deep: #A9532A; --terra-text: #E1935F; --amber: #DDA45C; --amber-soft: rgba(221, 164, 92, 0.14); --sand-line: rgba(239, 233, 220, 0.16); --card-line: rgba(239, 233, 220, 0.14); --error: #F2B8B5; --error-bg: rgba(179, 38, 30, 0.28); --shadow-sm: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --shadow-md: 0 18px 45px -18px rgba(0, 0, 0, 0.6); --header-glass: rgba(12, 19, 34, 0.88); --eyebrow-ink: var(--gold-light); --scroll-thumb: #34425F; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0E1626; --bg-soft: #121D31; --paper: #17233B; --ink: #EFE9DC; --muted: #A3ADC0; --terra: #C86B39; --terra-deep: #A9532A; --terra-text: #E1935F; --amber: #DDA45C; --amber-soft: rgba(221, 164, 92, 0.14); --sand-line: rgba(239, 233, 220, 0.16); --card-line: rgba(239, 233, 220, 0.14); --error: #F2B8B5; --error-bg: rgba(179, 38, 30, 0.28); --shadow-sm: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --shadow-md: 0 18px 45px -18px rgba(0, 0, 0, 0.6); --header-glass: rgba(12, 19, 34, 0.88); --eyebrow-ink: var(--gold-light); --scroll-thumb: #34425F; } } /* ---------- Vorher fest verdrahtete Stellen auf Tokens umstellen ---------- */ .site-header.scrolled { background: var(--header-glass); } .eyebrow { color: var(--eyebrow-ink); } .field input:focus, .field textarea:focus { background: var(--paper); } @media (min-width: 900px) { ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-color: var(--bg); } } /* ---------- Umschalter-Button ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; border: 1px solid rgba(247, 241, 230, 0.3); background: transparent; color: var(--on-dark); cursor: pointer; transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease); } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--gold); } .theme-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; } .theme-toggle svg { width: 19px; height: 19px; } .site-header.scrolled .theme-toggle { border-color: var(--sand-line); color: var(--ink); } .page-header .theme-toggle { border-color: var(--dark-line); } /* Icon-Logik: hell → Mond anbieten, dunkel → Sonne anbieten */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } }