/* theme.css — EINZIGE Quelle fuer Farben/Branding (Baustein-Vertrag §3.3). Host-Shell-faehig: jede --bs-*-Variable erbt zuerst die passende Host-Variable (--host-*); nur wenn der Host keine setzt, greift der Standalone-Fallback dahinter. Templates/JS referenzieren ausschliesslich --bs-* — nie hartkodierte Farben. Light/Dark (Baustein-Standard): der Umschalt-Button (theme.js) setzt data-theme="light|dark" auf und merkt die Wahl. Ohne Wahl folgt der Baustein dem System (prefers-color-scheme). --bs-on-primary (Text auf Primary) bleibt in beiden Modi hell. --bs-stern = Sternefarbe des Review-Funnels. */ :root { /* Grundfarben */ --bs-primary: var(--host-primary, #0f766e); --bs-primary-hell: var(--host-primary-hell, #d5f0ec); --bs-bg: var(--host-bg, #ffffff); --bs-bg-alt: var(--host-bg-alt, #f6f7f8); --bs-text: var(--host-text, #1a1a1a); --bs-muted: var(--host-muted, #6b7280); --bs-border: var(--host-border, #d1d5db); --bs-on-primary: var(--host-on-primary, #ffffff); /* Text auf Primary-Flaechen */ /* Statusfarben */ --bs-ok: var(--host-ok, #15803d); --bs-warnung: var(--host-warnung, #b45309); --bs-fehler: var(--host-fehler, #b91c1c); /* Review-Funnel */ --bs-stern: var(--host-stern, #f59e0b); /* aktive Sterne */ --bs-stern-leer: var(--host-stern-leer, #d1d5db); /* leere Sterne */ --bs-positiv: var(--host-positiv, #15803d); --bs-negativ: var(--host-negativ, #b45309); /* Branding */ --bs-logo-url: var(--host-logo-url, url("")); --bs-font: var(--host-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color-scheme: light dark; } /* Dark-Mode-Werte (Host-Variablen --host-* gewinnen weiterhin; hier aendern sich nur die Standalone-Fallbacks). Ausloeser: manuelle Wahl data-theme="dark". */ :root[data-theme="dark"] { --bs-primary: var(--host-primary, #14b8a6); --bs-primary-hell: var(--host-primary-hell, #123330); --bs-bg: var(--host-bg, #1e2126); --bs-bg-alt: var(--host-bg-alt, #141619); --bs-text: var(--host-text, #e6e8eb); --bs-muted: var(--host-muted, #9aa3af); --bs-border: var(--host-border, #333a44); --bs-on-primary: var(--host-on-primary, #ffffff); --bs-ok: var(--host-ok, #34d399); --bs-warnung: var(--host-warnung, #f59e0b); --bs-fehler: var(--host-fehler, #f87171); --bs-stern: var(--host-stern, #fbbf24); --bs-stern-leer: var(--host-stern-leer, #3a414b); --bs-positiv: var(--host-positiv, #34d399); --bs-negativ: var(--host-negativ, #f59e0b); } /* Kein data-theme gesetzt (z. B. JS aus) -> System entscheidet, ausser der Nutzer hat ausdruecklich hell gewaehlt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bs-primary: var(--host-primary, #14b8a6); --bs-primary-hell: var(--host-primary-hell, #123330); --bs-bg: var(--host-bg, #1e2126); --bs-bg-alt: var(--host-bg-alt, #141619); --bs-text: var(--host-text, #e6e8eb); --bs-muted: var(--host-muted, #9aa3af); --bs-border: var(--host-border, #333a44); --bs-on-primary: var(--host-on-primary, #ffffff); --bs-ok: var(--host-ok, #34d399); --bs-warnung: var(--host-warnung, #f59e0b); --bs-fehler: var(--host-fehler, #f87171); --bs-stern: var(--host-stern, #fbbf24); --bs-stern-leer: var(--host-stern-leer, #3a414b); --bs-positiv: var(--host-positiv, #34d399); --bs-negativ: var(--host-negativ, #f59e0b); } }