/* ============================================================ KaufAudit — Design-Tokens (theme.css) Markenpalette Petrol (#0097b2) auf dunklem Blau-Anthrazit. Diese Datei wird nach der Media-Analyse ggf. regeneriert. ============================================================ */ :root { /* Grundfarben */ --color-background: #0e1417; --color-surface: #151d21; --color-text: #edf4f6; --color-muted: #8fa6ad; --color-accent: #0097b2; --color-accent-soft: #6fcfe0; /* Flächen & Verläufe */ --hero-overlay: linear-gradient( 180deg, rgba(6, 12, 14, 0.35) 0%, rgba(6, 12, 14, 0.12) 40%, rgba(8, 15, 18, 0.65) 100% ); --glass-surface: rgba(13, 21, 24, 0.55); --document-surface: rgba(237, 244, 246, 0.06); --report-surface: rgba(21, 29, 33, 0.85); /* Interaktion */ --button-background: linear-gradient(135deg, #00a8c5, #00778f); --button-text: #f2fbfd; /* Linien & Tiefe */ --border-subtle: rgba(111, 207, 224, 0.16); --shadow-premium: 0 24px 60px -24px rgba(0, 0, 0, 0.65); /* Audit-Semantik */ --audit-risk-color: #d0684d; --audit-success-color: #3fae8c; } /* ============================================================ Light-Mode — NUR Token-Overrides (Dark bleibt Default). Aktiv bei (localStorage "ka_theme", geteilte Konvention der Standalone-Seiten, s. app/static/theme.js). Warm-Weiß passend zur App-Palette (vgl. app/static/liquid.css), Petrol-Akzent bleibt — für Text-Nutzung leicht abgedunkelt (WCAG AA). ============================================================ */ html[data-theme="light"] { --color-background: #f2efe8; --color-surface: #faf8f3; --color-text: #13272e; --color-muted: #4e656d; --color-accent: #00768d; --color-accent-soft: #007c96; --glass-surface: rgba(255, 255, 255, 0.72); --document-surface: rgba(19, 39, 46, 0.06); --report-surface: rgba(255, 255, 255, 0.9); --border-subtle: rgba(0, 118, 141, 0.22); --shadow-premium: 0 24px 60px -24px rgba(19, 39, 46, 0.28); --audit-risk-color: #b34a30; --audit-success-color: #1d8a6b; /* --hero-overlay, --button-background, --button-text bleiben unverändert (Hero ist unten dunkel gescopet; Button-Gradient = Markenfarbe). */ } /* Film-/Canvas-Sektionen zeigen dunkles Bildmaterial — Overlays (Karten, Chips, Rail, Hero-Text) behalten dort die dunklen Token-Werte, damit sie auf dem dunklen Bild lesbar bleiben. Reine Token-Re-Deklaration, keine bestehende Regel wird verändert. */ html[data-theme="light"] .hero, html[data-theme="light"] .process-stage, html[data-theme="light"] .roomtour-panel, html[data-theme="light"] .makler-panel { --color-background: #0e1417; --color-surface: #151d21; --color-text: #edf4f6; --color-muted: #8fa6ad; --color-accent: #0097b2; --color-accent-soft: #6fcfe0; --glass-surface: rgba(13, 21, 24, 0.55); --document-surface: rgba(237, 244, 246, 0.06); --report-surface: rgba(21, 29, 33, 0.85); --border-subtle: rgba(111, 207, 224, 0.16); --shadow-premium: 0 24px 60px -24px rgba(0, 0, 0, 0.65); --audit-risk-color: #d0684d; --audit-success-color: #3fae8c; /* Überschriften (h1/h3) deklarieren keine eigene Farbe und würden sonst die dunkle Body-Farbe des Light-Modes erben — hier hell erzwingen. */ color: var(--color-text); } /* Logo-Variante: auf hellen Flächen die blau-schwarze Wortmarke (app.js setzt per Manifest die helle Variante — hier nur CSS-Swap). */ html[data-theme="light"] #headerLogo, html[data-theme="light"] #footerLogo, html[data-theme="light"] #modalLogo { content: url("logo-blau-schwarz.svg"); }