/* ============================================================ TOKENS — einzige Quelle der Wahrheit für Farbe/Typografie ------------------------------------------------------------ Das Theme wird in JS aufgelöst (assets/js/theme.js) und noch vor dem ersten Rendering nach geschrieben. Deshalb braucht das CSS nur EINEN dunklen Block — [data-theme="dark"]. Zustand "system" = data-theme stammt aus prefers-color-scheme und hängt an einem matchMedia-Listener. ============================================================ */ :root { /* ---- Typografie ---- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; /* ---- Marke (themeunabhängig) ---- */ --accent: #E30613; --accent-hover: #C50510; --accent-ink: #FFFFFF; --accent-soft: rgba(227, 6, 19, 0.10); --accent-glow: rgba(227, 6, 19, 0.22); /* ---- Geometrie ---- */ --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --container: 1280px; --gutter: 24px; --header-h: 68px; /* ---- Bewegung ---- */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-fast: .22s; --dur: .5s; --dur-slow: .9s; /* ---- Rhythmus der Sektionen ---- */ --pad-loud: 96px; --pad-quiet: 72px; } /* ============ HELLES THEME (Basis) ============ */ :root, :root[data-theme='light'] { color-scheme: light; --bg: #F7F6F2; --bg-alt: #F7F6F2; --bg-sunken: #F7F6F2; --surface: #F7F6F2; --surface-2: #F7F6F2; --ink: #111111; --muted: rgba(17, 17, 17, 0.62); --faint: rgba(17, 17, 17, 0.38); --border: rgba(17, 17, 17, 0.10); --border-strong: rgba(17, 17, 17, 0.18); --shadow-card: 0 4px 24px rgba(17, 17, 17, 0.04); --shadow-lift: 0 20px 60px rgba(17, 17, 17, 0.12); --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.18); /* Kartenkacheln für das helle Theme */ --map-bg: #F7F6F2; } /* ============ DUNKLES THEME ============ */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0E0E0E; --bg-alt: #151515; --bg-sunken: #0A0A0A; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --ink: #FFFFFF; --muted: rgba(255, 255, 255, 0.62); --faint: rgba(255, 255, 255, 0.38); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --shadow-card: none; --shadow-lift: 0 20px 60px rgba(0, 0, 0, 0.55); --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5); --map-bg: #141414; } /* ============================================================ INVERTIERTER KONTEXT Sektionen, die IMMER dunkel sind (hero, Prinzip, footer). Sie überschreiben die Tokens lokal — die Komponenten darin müssen davon nichts wissen. ============================================================ */ .on-dark { --bg: #111111; --bg-alt: #151515; --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.08); --ink: #FFFFFF; --muted: rgba(255, 255, 255, 0.60); --faint: rgba(255, 255, 255, 0.35); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.25); --shadow-card: none; color-scheme: dark; } :root[data-theme='dark'] .on-dark { --bg: #0E0E0E; }