/* * Equinora — gemeinsame Theme-/Token-Datei für die Marketing-Site. * EINZIGE Quelle für Farb-Tokens + Dark Mode ("Stall-Laterne") + den Header- * Utility-Cluster (Dark-Toggle + Sprach-Switcher). * * WICHTIG: Die LIGHT-Werte sind byte-genau die bisher in den Seiten hartcodierten * Farben — Light Mode sieht damit unverändert aus; Dark Mode ist rein additiv. * * Mechanik (gesetzt vom Anti-Flash-Snippet im jeder Seite): * -> erzwingt Dark * -> erzwingt Light * kein Attribut -> folgt prefers-color-scheme (siehe @media unten) */ :root { color-scheme: light; /* Flächen */ --bg: #FBF7F0; /* Seitenhintergrund */ --surface: #ffffff; /* Karten, Leisten, Modals (war #fff) */ --offwhite: #F8F2DA; /* dezente Off-White-Box (z. B. konto-loeschen) */ --border: #eee3d2; /* Hairlines/Rahmen */ /* Text */ --text: #3A3A3A; /* Fließtext */ --muted: #6B6B6B; /* Sekundärtext */ --faint: #999999; /* sehr dezent (Footer-Copy) */ /* Marke */ --brown: #6B4F3B; /* Marke als TEXT: Überschriften, Links, Nav */ --brand-solid: #6B4F3B; /* Marke als FLÄCHE: Buttons, CTA-Box, Promo */ --on-brand: #ffffff; /* Text auf --brand-solid */ --on-brand-muted: #f0e6da;/* dezenter Text auf --brand-solid (CTA-Untertitel) */ /* Akzent (Creme-Chips/Badges) */ --cream: #F4E3C7; --on-cream: #5a4630; /* Text auf --cream */ /* Chrome/Effekte */ --header-bg: rgba(251,247,240,.92); /* Sticky-Header-Backdrop (= bg + alpha) */ --overlay: rgba(0,0,0,.5); /* Modal-Hintergrund */ --shadow-sm: rgba(0,0,0,.08); --shadow-md: rgba(0,0,0,.12); --shadow-lg: rgba(0,0,0,.15); --switch-off: #cbb89a; /* Consent-Switch (aus) */ --phone-frame: #2b2b2b; /* Telefon-Rahmen der Screenshots (in beiden Modi dunkel) */ --btn-dark: #1b1b1b; /* dunkle Store-/Submit-Buttons (App-Store-Badge etc.) */ --btn-dark-bd: transparent;/* Rahmen nur im Dark Mode sichtbar (gegen Verschmelzen mit dem BG) */ --notice: #6b541a; /* dezenter Hinweis-/Notiz-Text (Rechtsseiten) */ --cream-bd: #e7d6bb; /* Rahmen auf Creme-Chips */ --cream-2: #ecd9b6; /* etwas dunkleres Creme (Hover/Count-Pill) */ } /* ── Dark Mode "Stall-Laterne": warmes Dunkelbraun + Laternen-Amber ──────── */ :root[data-theme="dark"] { color-scheme: dark; --bg: #17130f; --surface: #221c16; --offwhite: #2a2218; --border: #3a3026; --text: #ece3d4; --muted: #b3a691; --faint: #8a7f6e; --brown: #e3ba84; /* Marke als Text -> warmes Amber (kontraststark) */ --brand-solid: #d39a52; /* Marke als Fläche -> Laternen-Amber */ --on-brand: #211910; /* dunkler Text auf Amber-Flächen */ --on-brand-muted: #4d3c25; --cream: #322617; /* Akzent-Chip dunkel */ --on-cream: #ecd9b6; /* heller Text auf dunklem Akzent */ --header-bg: rgba(23,19,15,.88); --overlay: rgba(0,0,0,.62); --shadow-sm: rgba(0,0,0,.35); --shadow-md: rgba(0,0,0,.45); --shadow-lg: rgba(0,0,0,.55); --switch-off: #5a4a36; --btn-dark: #2c261e; --btn-dark-bd: rgba(236,227,212,.18); --notice: #d8b878; --cream-bd: #463a2a; --cream-2: #3a2d1c; } /* Ohne explizite Wahl der OS-Einstellung folgen (No-JS-Fallback inkl.). Das * Anti-Flash-Snippet setzt sonst data-theme; data-theme="light" sticht hier * bewusst NICHT (Selektor schließt es aus). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #17130f; --surface: #221c16; --offwhite: #2a2218; --border: #3a3026; --text: #ece3d4; --muted: #b3a691; --faint: #8a7f6e; --brown: #e3ba84; --brand-solid: #d39a52; --on-brand: #211910; --on-brand-muted: #4d3c25; --cream: #322617; --on-cream: #ecd9b6; --header-bg: rgba(23,19,15,.88); --overlay: rgba(0,0,0,.62); --shadow-sm: rgba(0,0,0,.35); --shadow-md: rgba(0,0,0,.45); --shadow-lg: rgba(0,0,0,.55); --switch-off: #5a4a36; --btn-dark: #2c261e; --btn-dark-bd: rgba(236,227,212,.18); --notice: #d8b878; --cream-bd: #463a2a; --cream-2: #3a2d1c; } } /* Sanfter, aber dezenter Wechsel (nur Flächen/Text, kein Layout/Transform). */ html[data-theme] body, html[data-theme] header, html[data-theme] footer { transition: background-color .25s ease, color .25s ease; } /* ── Header-Utility-Cluster: Dark-Toggle + Sprach-Switcher gruppiert ─────── */ .eq-utils { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .eq-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; cursor: pointer; background: transparent; border: 1px solid rgba(107,79,59,.28); border-radius: 999px; color: var(--brown); line-height: 0; } .eq-theme-btn:hover { background: rgba(107,79,59,.10); } .eq-theme-btn svg { width: 18px; height: 18px; display: block; } .eq-theme-btn .eq-sun { display: none; } .eq-theme-btn .eq-moon { display: block; } :root[data-theme="dark"] .eq-theme-btn { border-color: rgba(227,186,132,.32); } :root[data-theme="dark"] .eq-theme-btn:hover { background: rgba(227,186,132,.12); } :root[data-theme="dark"] .eq-theme-btn .eq-sun { display: block; } :root[data-theme="dark"] .eq-theme-btn .eq-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eq-theme-btn .eq-sun { display: block; } :root:not([data-theme="light"]) .eq-theme-btn .eq-moon { display: none; } } /* ── Dark-Overrides für JS-injizierte, seitenübergreifende Komponenten ───── * (Consent-Bar/Modal, Announcement-/Promo-Banner, Lightbox). Diese Styles * werden per Inline-JS mit hartcodierten Farben erzeugt; hier zentral für ALLE * Seiten auf die Tokens umgebogen — nur im Dark Mode, Light bleibt unberührt. */ :root[data-theme="dark"] .eq-cc-bar { background: var(--surface); border-top-color: var(--border); } :root[data-theme="dark"] .eq-cc-in { color: var(--text); } :root[data-theme="dark"] .eq-cc-in a { color: var(--brown); } :root[data-theme="dark"] .eq-cc-primary { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); } :root[data-theme="dark"] .eq-cc-outline { background: var(--surface); color: var(--brown); border-color: var(--brown); } :root[data-theme="dark"] .eq-cc-text { color: var(--brown); } :root[data-theme="dark"] .eq-cc-ovl { background: var(--overlay); } :root[data-theme="dark"] .eq-cc-modal { background: var(--surface); color: var(--text); } :root[data-theme="dark"] .eq-cc-modal h2 { color: var(--brown); } :root[data-theme="dark"] .eq-cc-modal p.sub, :root[data-theme="dark"] .eq-cc-row small { color: var(--muted); } :root[data-theme="dark"] .eq-cc-row { border-top-color: var(--border); } :root[data-theme="dark"] .eq-cc-row strong { color: var(--text); } :root[data-theme="dark"] .eq-cc-sl { background: var(--switch-off); } :root[data-theme="dark"] .eq-cc-sw input:checked + .eq-cc-sl { background: var(--brand-solid); } :root[data-theme="dark"] .eq-ann-info { background: var(--cream); color: var(--on-cream); } :root[data-theme="dark"] .eq-ann-maintenance { background: var(--brand-solid); color: var(--on-brand); } /* warning (gelb) bleibt bewusst signalfarben in beiden Modi */ :root[data-theme="dark"] .eq-promo { background: var(--brand-solid); color: var(--on-brand); } :root[data-theme="dark"] .eq-promo-badge { background: var(--cream); color: var(--on-cream); } :root[data-theme="dark"] .eq-promo a.eq-promo-cta { color: var(--on-brand); } :root[data-theme="dark"] .eq-lb-ovl, :root[data-theme="dark"] .eq-lb { background: rgba(0,0,0,.85); } /* Dasselbe für No-JS-OS-Dark (prefers-color-scheme), damit die Banner auch dort * mitziehen. Gespiegelt, da CSS Selektor+@media nicht kombinieren kann. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eq-cc-bar { background: var(--surface); border-top-color: var(--border); } :root:not([data-theme="light"]) .eq-cc-in { color: var(--text); } :root:not([data-theme="light"]) .eq-cc-in a { color: var(--brown); } :root:not([data-theme="light"]) .eq-cc-primary { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); } :root:not([data-theme="light"]) .eq-cc-outline { background: var(--surface); color: var(--brown); border-color: var(--brown); } :root:not([data-theme="light"]) .eq-cc-text { color: var(--brown); } :root:not([data-theme="light"]) .eq-cc-ovl { background: var(--overlay); } :root:not([data-theme="light"]) .eq-cc-modal { background: var(--surface); color: var(--text); } :root:not([data-theme="light"]) .eq-cc-modal h2 { color: var(--brown); } :root:not([data-theme="light"]) .eq-cc-modal p.sub, :root:not([data-theme="light"]) .eq-cc-row small { color: var(--muted); } :root:not([data-theme="light"]) .eq-cc-row { border-top-color: var(--border); } :root:not([data-theme="light"]) .eq-cc-row strong { color: var(--text); } :root:not([data-theme="light"]) .eq-cc-sl { background: var(--switch-off); } :root:not([data-theme="light"]) .eq-cc-sw input:checked + .eq-cc-sl { background: var(--brand-solid); } :root:not([data-theme="light"]) .eq-ann-info { background: var(--cream); color: var(--on-cream); } :root:not([data-theme="light"]) .eq-ann-maintenance { background: var(--brand-solid); color: var(--on-brand); } :root:not([data-theme="light"]) .eq-promo { background: var(--brand-solid); color: var(--on-brand); } :root:not([data-theme="light"]) .eq-promo-badge { background: var(--cream); color: var(--on-cream); } :root:not([data-theme="light"]) .eq-promo a.eq-promo-cta { color: var(--on-brand); } :root:not([data-theme="light"]) .eq-lb-ovl, :root:not([data-theme="light"]) .eq-lb { background: rgba(0,0,0,.85); } }