/* ══════════════════════════════════════════════════════════════════════════ theme.css — Farb-Token der BI-Suite (Single Source of Truth) ══════════════════════════════════════════════════════════════════════════ ZWEI GETRENNTE ACHSEN — bitte nicht vermischen: 1. THEME hell | dunkel → Flächen-, Schrift- und Randfarben. 2. HINTERGRUND schlicht | weinberg → reine Deko hinter dem Inhalt. Siehe backgrounds.css — funktioniert in BEIDEN Themes. Umgeschaltet wird über static/js/theme-manager.js (Header-Menü „Ansicht" oder Shift+B / Shift+V). Der Zustand liegt in localStorage. ── Wie man Farben benutzt ──────────────────────────────────────────────── NIE harte Neutralfarben (#fff, #333, #6c757d, #dee2e6 …) in neuem CSS. Immer die Rollen-Token unten verwenden — sie kippen im Dark Mode von selbst: background: var(--vs-surface); statt background: #fff; color: var(--vs-text-muted); statt color: #6c757d; border: 1px solid var(--vs-border); Marken- und Signalfarben (Grün, Gold, Rot) sind dagegen bewusst KEINE Neutralfarben — sie behalten ihre Bedeutung und werden im Dark Mode nur aufgehellt, damit sie auf dunklem Grund den Kontrast halten. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Marke (konstant, themeunabhängig) ──────────────────────────────── Für Stellen, die IMMER das echte Markengrün brauchen (Logo-Umfeld, Exporte, PDF-Vorschauen). Für normales UI stattdessen --vs-primary. */ --vs-brand: #1A4E3A; --vs-brand-light: #00BA39; /* ── Signalfarben (Rolle, im Dark Mode aufgehellt) ───────────────────── WICHTIG — --vs-primary hat ZWEI unvereinbare Jobs, sobald es dunkel wird: als FÜLLUNG muss es dunkel genug für weiße Schrift darauf sein, als SCHRIFT muss es hell genug für den dunklen Untergrund sein. Beides gleichzeitig ist rechnerisch unmöglich (weiß-auf-X braucht Luminanz ≤ 0.18, X-auf-Karte braucht ≥ 0.25). Deshalb zwei Token: --vs-primary → Flächen, Rahmen, Icons --vs-primary-text → Schrift in Markengrün Im Hellmodus sind beide identisch, es ändert sich also nichts. */ --vs-primary: #1A4E3A; /* Dunkelgrün — Kopfzeile, Primäraktionen */ --vs-primary-text: #1A4E3A; /* Markengrün als Schriftfarbe */ --vs-success: #00BA39; /* Hellgrün */ --vs-warning: #FFBC05; /* Gelb */ --vs-danger: #dc3545; /* Rot — NUR Fehler/Destruktives (Füllung) */ --vs-danger-text: #b02a37; /* dasselbe Rot als SCHRIFT — #dc3545 fällt auf hellgrauen Flächen unter 4.5:1 */ --vs-gold: #c8a96e; --vs-highlight: #FFBC05; /* ── Flächen ───────────────────────────────────────────────────────── page-bg = Seitenhintergrund (hinter allem) bg = Beige Ruhefläche der Marke (Alt-Token, 20 Fundstellen) surface = Karten, Modals, Dropdowns, Tabellenkörper surface-2 = Karten-Kopf, Tabellenkopf, eingelassene Bereiche surface-3 = Hover, Chips, Zebra-Streifen */ --vs-page-bg: #f2f2f2; --vs-bg: #F5F5F1; --vs-surface: #ffffff; --vs-surface-2: #f8f9fa; --vs-surface-3: #f1f3f5; /* ── Marken-Tönungen ───────────────────────────────────────────────── Grün eingefärbte Flächen für Zustände an auswählbaren Elementen (Chips, Tabs, Toggles): -tint = Hover, -tint-strong = ausgewählt. Träger dieser Flächen ist IMMER Text in --vs-text, nie weißer Text — dafür sind sie zu hell. Wer eine satte grüne Fläche mit weißer Schrift braucht, nimmt --vs-primary. */ --vs-primary-tint: #f4faf6; --vs-primary-tint-strong: #e9f5ee; /* ── Karo-Fläche für freigestellte Bilder (.checkerboard-bg) ────────── Das Schachbrett sagt "hier ist das Bild transparent". Es ist damit die ehrlichere Alternative zu --vs-image-backdrop weiter unten: Letzteres BEHAUPTET einen weißen Bildhintergrund, das Karo zeigt, dass keiner da ist. Beide bleiben aus demselben Grund hell — freigestellte Flaschen bekämen auf Dunkel einen schwarzen Saum. */ --vs-image-checker-bg: #f1f3f5; --vs-image-checker-square: #e0e0e0; /* ── Ränder ──────────────────────────────────────────────────────────── */ --vs-border: #dee2e6; --vs-border-soft: #e9ecef; /* ── Schrift ─────────────────────────────────────────────────────────── */ --vs-text: #333333; --vs-text-soft: #495057; /* Bewusst eine Spur dunkler als Bootstraps #6c757d: das erreicht 4.5:1 nur auf reinem Weiß und fällt auf jeder unserer anderen hellen Flächen durch (Seitengrund #f2f2f2 → 4.19:1). #656d75 hält auf allen vieren. */ --vs-text-muted: #656d75; --vs-text-invert: #ffffff; /* Schrift auf farbiger Füllung */ /* ── Schrift auf themeunabhängig HELLER Füllung ─────────────────────── Gelb, Cyan und Gold sind in beiden Themes gleich hell — eine Schrift darauf darf deshalb NICHT mitkippen. `var(--vs-text)` wäre hier falsch: im Dark Mode würde es hell und stünde hell auf hell. Gilt für .badge.bg-warning/.bg-info, den Entwurf-Status und das Gold-Badge. */ --vs-text-on-light-fill: #212529; /* ── Bildhintergrund ───────────────────────────────────────────────── Bleibt in BEIDEN Themes weiß und ist deshalb absichtlich kein --vs-surface: Produktfotos sind freigestellte PNGs mit transparentem Rand. Auf dunklem Grund bekämen Flaschen einen schwarzen Saum und Etiketten würden falsch gelesen. Nur für Bildflächen verwenden. */ --vs-image-backdrop: #ffffff; /* ── Schleier über wartenden Flächen ───────────────────────────────── Die halbtransparente Decke unter Lade-Spinnern. Muss die Fläche DÄMPFEN, nicht aufhellen — als hartes rgba(255,255,255,.7) legt sie im Dark Mode ein milchiges Weiß über die Seite, auf dem die Beschriftung daneben verschwindet. */ --vs-scrim: rgba(255, 255, 255, 0.7); /* ── Fokus-Schleier hinter Erklärungs-Tooltips ─────────────────────── Nicht dasselbe wie --vs-scrim darüber: der ist die Lade-Decke und darf kräftig sein, weil dahinter ohnehin nichts zu lesen ist. Dieser hier liegt unter einem Flyout, dessen Bezugselement drumherum sichtbar bleiben soll — deshalb dämpfend statt deckend. */ --vs-tooltip-scrim: rgba(9, 20, 16, 0.32); /* ── Kopfzeile ───────────────────────────────────────────────────────── */ --vs-header-bg: var(--vs-primary); /* ── Schatten (im Dark Mode kräftiger, sonst sieht man nichts) ───────── */ --vs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075); --vs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1); /* ══════════════════════════════════════════════════════════════════════ DIAGRAMME — gelesen von theme-manager.js (window.vsChart) ══════════════════════════════════════════════════════════════════════ Chart.js zeichnet in ein und erbt KEIN CSS. Alle Farben müssen deshalb als Werte übergeben werden; die Token hier sind die Quelle. KATEGORIEN-PALETTE (--vs-chart-1 … -8) Feste Reihenfolge, NIEMALS zyklisch weiterzählen: eine 9. Serie wird zu „Sonstige" zusammengefasst oder auf mehrere Diagramme aufgeteilt. Die Reihenfolge ist das Sicherheitsmerkmal für Farbfehlsichtigkeit, nicht Kosmetik — benachbarte Slots sind gezielt weit auseinander. Geprüft mit dem Validator der dataviz-Skill gegen unsere echten Kartenflächen (hell #ffffff, dunkel #17291f) — beide Modi bestehen alle Checks: Helligkeitsband, Chroma-Untergrenze, CVD-Abstand (schlechtestes Nachbarpaar ΔE 9.1 hell / 8.4 dunkel) und Normalsicht-Abstand (19.6 / 19.3). EINSCHRÄNKUNG hell: Slots 6–8 (#1baf7a, #eda100, #e87ba4) liegen auf Weiß unter 3:1. Ab sechs Serien braucht das Diagramm deshalb sichtbare Beschriftungen an den Marken oder eine Tabellenansicht — Farbe allein trägt dort nicht. Slots 1–5 sind unkritisch. Die dunklen Werte sind KEINE automatische Umkehrung, sondern dieselben acht Farbtöne, neu für den dunklen Grund abgestuft. */ --vs-chart-1: #008300; /* Grün — Markennähe, führt die Reihenfolge an */ --vs-chart-2: #4a3aa7; /* Violett */ --vs-chart-3: #e34948; /* Rot */ --vs-chart-4: #2a78d6; /* Blau */ --vs-chart-5: #eb6834; /* Orange */ --vs-chart-6: #1baf7a; /* Aqua — ab hier Beschriftung nötig (hell) */ --vs-chart-7: #eda100; /* Gelb */ --vs-chart-8: #e87ba4; /* Magenta */ /* Sammelfarbe für alles jenseits von Slot 8 („Sonstige"). */ --vs-chart-other: #8a938f; /* STATUSFARBEN — bewusst NICHT themenabhängig und bewusst von der Kategorien-Palette verschieden, damit ein Statuston nie wie eine Serie aussieht. Gelb und Orange liegen auf Weiß unter 3:1; das ist so vorgesehen und wird über Symbol + Beschriftung aufgefangen, nie über die Farbe allein. */ --vs-chart-good: #0ca30c; --vs-chart-warning: #fab219; --vs-chart-serious: #ec835a; --vs-chart-critical: #d03b3b; /* CHROME — Achsen, Gitter, Tooltip */ --vs-chart-grid: rgba(0, 0, 0, .08); --vs-chart-text: #656d75; --vs-chart-axis: #c3c2b7; --vs-chart-tooltip-bg: rgba(28, 32, 30, .94); --vs-chart-tooltip-fg: #ffffff; } /* ══════════════════════════════════════════════════════════════════════════ DARK MODE — grün getönt, damit BI und Weinberg-Hintergrund eine Welt sind ══════════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { /* Marke bleibt Marke — nur die Rollen darunter hellen auf. --vs-primary bleibt bewusst SATT (weiße Schrift darauf ≥ 4.5:1), --vs-primary-text geht dafür deutlich heller (auf Karte ≈ 6:1). */ --vs-primary: #2c7d5c; --vs-primary-text: #6cc79b; --vs-success: #35d167; --vs-warning: #FFBC05; --vs-danger: #ff6b6b; --vs-danger-text: #ff8a8a; --vs-gold: #d9bd85; --vs-highlight: #FFBC05; /* Auf dunklem Grund ist der Helligkeitsabstand zwischen Seite und Karte zwangsläufig kleiner als im Hellmodus (weiß auf grau ist ein grosser Sprung, zwei Dunkeltöne sind es nie). Die Stufen sind deshalb bewusst gespreizt: die Karte ist gut dreimal so hell wie die Seite, statt knapp doppelt. Zusätzlich bekommt eine rahmenlose Karte in theme-dark.css eine Haarlinie — ohne die verschwimmt die Kante trotz Spreizung. */ --vs-page-bg: #091410; --vs-bg: #132019; --vs-surface: #17291f; --vs-surface-2: #1e3427; --vs-surface-3: #26402f; /* Dieselbe Rolle, andere Richtung: im Light Mode hellt die Tönung die weiße Fläche grün an, hier dunkelt sie die Karte grün ab. Beide liegen je eine Stufe über --vs-surface, damit der Zustand sichtbar wird. */ --vs-primary-tint: #1d3a2c; --vs-primary-tint-strong: #24503a; /* Hier liegt der eigentliche Dark-Mode-Gewinn: Das Karo bleibt hell (Saum!), geht aber von Weiß auf ein gedämpftes Grau herunter. Eine reinweiße Platte neben dunklen Karten blendet — ein mattes Hellgrau nicht, und die Flasche steht immer noch sauber frei. Deshalb ist das Karo hier die bessere Wahl als --vs-image-backdrop: dessen Weiß lässt sich nicht dämpfen, ohne die Farbtreue zum Shop aufzugeben. */ --vs-image-checker-bg: #dcdcd7; --vs-image-checker-square: #c9c9c3; --vs-border: #2e4b3c; --vs-border-soft: #24382e; --vs-text: #e6efe9; --vs-text-soft: #c2d4c9; --vs-text-muted: #9db3a7; --vs-text-invert: #ffffff; /* --vs-image-backdrop wird hier BEWUSST NICHT überschrieben — siehe oben. */ /* Der Schleier dagegen MUSS mitkippen — sonst milchiges Weiß über der dunklen Seite. Basis ist die Seitenfarbe, nicht Schwarz. */ --vs-scrim: rgba(9, 20, 16, 0.72); /* Kräftiger als im Light Mode: auf einer ohnehin dunklen Seite bewirken 32% Abdunklung fast nichts mehr. */ --vs-tooltip-scrim: rgba(0, 0, 0, 0.5); /* Kopfzeile bleibt dunkel — ein aufgehelltes Grün würde oben knallen. */ --vs-header-bg: #10281f; --vs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .45); --vs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .55); /* Diagramme: dieselben acht Farbtöne, für den dunklen Grund neu abgestuft. Hier bestehen ALLE acht Slots 3:1 — die Einschränkung aus dem Hellmodus gilt im Dark Mode also nicht. Statusfarben bleiben unverändert. */ --vs-chart-1: #008300; --vs-chart-2: #9085e9; --vs-chart-3: #e66767; --vs-chart-4: #3987e5; --vs-chart-5: #d95926; --vs-chart-6: #199e70; --vs-chart-7: #c98500; --vs-chart-8: #d55181; --vs-chart-other: #7d918a; --vs-chart-grid: rgba(255, 255, 255, .1); --vs-chart-text: #9db3a7; --vs-chart-axis: #3a4f45; --vs-chart-tooltip-bg: rgba(8, 18, 14, .95); --vs-chart-tooltip-fg: #e6efe9; /* ── Bootstrap 5.3 auf unsere Palette umbiegen ───────────────────────── Bootstrap bringt einen eigenen Dark Mode mit (blaugraues #212529). Wir überschreiben dessen Token, damit Karten, Tabellen, Modals, Dropdowns und Formulare automatisch in unserem Grün landen — ohne dass wir jede Komponente einzeln anfassen müssen. */ --bs-body-bg: var(--vs-page-bg); --bs-body-bg-rgb: 9, 20, 16; --bs-body-color: var(--vs-text); --bs-body-color-rgb: 230, 239, 233; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: var(--vs-text-muted); --bs-secondary-color-rgb: 157, 179, 167; --bs-secondary-bg: var(--vs-surface-2); --bs-secondary-bg-rgb: 30, 52, 39; --bs-tertiary-color: var(--vs-text-muted); --bs-tertiary-bg: var(--vs-surface-3); --bs-tertiary-bg-rgb: 38, 64, 47; --bs-heading-color: var(--vs-text); --bs-border-color: var(--vs-border); --bs-border-color-translucent: rgba(255, 255, 255, .12); --bs-link-color: #6cc79b; --bs-link-color-rgb: 108, 199, 155; --bs-link-hover-color: #8fd9b5; --bs-link-hover-color-rgb: 143, 217, 181; /* Farb-Emphasis-Paare (text-*-emphasis / bg-*-subtle / border-*-subtle) */ --bs-primary-text-emphasis: #7fc9a6; --bs-success-text-emphasis: #7fe0a3; --bs-warning-text-emphasis: #ffd766; --bs-danger-text-emphasis: #ff9b9b; --bs-info-text-emphasis: #8fd3e8; --bs-secondary-text-emphasis: var(--vs-text-muted); --bs-primary-bg-subtle: #123326; --bs-success-bg-subtle: #103524; --bs-warning-bg-subtle: #3a2f0c; --bs-danger-bg-subtle: #3a1a1c; --bs-info-bg-subtle: #10303a; --bs-secondary-bg-subtle: var(--vs-surface-2); --bs-light-bg-subtle: var(--vs-surface-2); --bs-dark-bg-subtle: #0a1510; --bs-primary-border-subtle: #1d4f3b; --bs-success-border-subtle: #1a5735; --bs-warning-border-subtle: #5c4a12; --bs-danger-border-subtle: #5c2a2e; --bs-info-border-subtle: #1a4c5c; --bs-secondary-border-subtle: var(--vs-border); /* Formular-Rückmeldungen dürfen nicht dunkel-auf-dunkel bleiben. */ --bs-form-valid-color: #7fe0a3; --bs-form-invalid-color: #ff9b9b; }