/* ============================================================================ * DESIGN TOKENS — Farben, Schatten, Radien * Herkunft: Con4Mews (wwwroot/css/site.css) * Framework-neutral: reines CSS, keine Bootstrap-/Blazor-Abhaengigkeit. * ==========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); :root { /* Flaechenfarben */ --color-bg: #F1F5F9; --color-surface: #E8EFF7; --color-surface-soft: #FFFFFF; --color-white: #ffffff; /* Marken-/Akzentfarben */ --color-primary: #53B8E8; --color-primary-dark: #1D4ED8; --color-accent: #E31A2F; /* Text */ --color-text: #0F172A; --color-text-muted: #64748B; /* Rahmen */ --color-border: #CBD5E1; /* Semantische Statusfarben */ --color-danger: #EF4444; --color-danger-dark: #DC2626; --color-success: #22C55E; --color-info: #38BDF8; --color-warning: #F97316; /* Neutrales Grau fuer "keine Daten"-Zustaende (Charts, Sparklines) — bewusst kein Blaustich wie --color-border, damit es sich klar von echten Datenwerten (--color-primary) abhebt. */ --color-nodata: #D1D5DB; /* Alert-Varianten (danger) */ --color-alert-danger-bg: #FEF2F2; --color-alert-danger-border: #FECACA; --color-alert-danger-text: #991B1B; /* rgba-Hilfsvariablen fuer Schatten/Hover/Stripes (RGB-Tripel von --color-primary: 83,184,232, bzw. --color-danger: 239,68,68) */ --shadow-primary: rgba(83,184,232,0.15); --shadow-primary-lg: rgba(83,184,232,0.25); --shadow-danger: rgba(239,68,68,0.15); --shadow-danger-lg: rgba(239,68,68,0.25); --shadow-text: rgba(15,23,42,0.06); --shadow-text-lg: rgba(15,23,42,0.12); --stripe-primary: rgba(83,184,232,0.05); --stripe-primary-lg: rgba(83,184,232,0.10); --stripe-primary-focus: rgba(83,184,232,0.18); --stripe-primary-nav-active: rgba(83,184,232,0.2); --hover-accent: rgba(227,26,47,0.08); /* Dringlichkeits-/Fortschritts-Farben (generisches Ampelschema, z. B. fuer To-do-/Aufgabenlisten mit Faelligkeit) */ --color-due: #D97706; --color-due-soft: #FEF3E2; --color-critical-soft: var(--color-alert-danger-bg); --color-waiting-soft: var(--color-surface); /* Radien: zwei bewusst unterschiedliche Stufen statt einer, die zwei optisch verschiedene Elementgroessen ueberladen wuerde. --radius-card gilt fuer kleinteilige Kacheln/Chips (Dashboard-Tiles, .con4-card-grid__item); --radius-lg fuer die groesseren strukturellen Bootstrap-Cards (.card/.card-header). Vorher hart 18px bei .card statt eines Tokens - keine einzige Quelle der Wahrheit, ein kuenftiger Radien-Wechsel haette die Karten uebersehen. 1.125rem ergibt real ~17.1px (nicht exakt 18px), da html/body in 02-base.css die Basis-Schriftgroesse auf 0.95rem statt der Browser-Vorgabe 16px setzt, wodurch auch 1rem fuer alle nachfolgenden Elemente kleiner ausfaellt - visuell nicht wahrnehmbar (per Browser-Verifikation bestaetigt), aber praeziser dokumentiert als "== 18px". */ --radius-card: 0.65rem; --radius-lg: 1.125rem; /* WCAG-2.1-AA-konforme Textvarianten (Kontrastverhaeltnis >=4.5:1 auf hellem Grund/Weiss) der Statusfarben oben. Bootstraps eigene .text-warning/.text-success/.text-danger-Klassen erreichen als Fliesstext auf hellem Grund teils gar nicht (.text-warning #FFC107: ~1.6:1 - eindeutiger Verstoss) bzw. nur hauchduenn (.text-success/.text-danger: ~4.53:1, faktisch Messungenauigkeit) den Mindestkontrast von 4.5:1. Diese drei Farben sind dieselbe Farbfamilie, nur dunkler/kraeftiger gewaehlt, damit sie weiterhin eindeutig als Erfolg/Warnung/Fehler erkennbar bleiben. Con4Mews-Klassen .con4-text-success/-warning/-danger in 04-components.css nutzen diese Tokens statt der Bootstrap-Klassen. */ --color-success-text: #15803D; /* statt Bootstrap .text-success #198754 (~4.53:1) - jetzt ~5.0:1 */ --color-warning-text: #92400E; /* statt Bootstrap .text-warning #FFC107 (~1.6:1) - jetzt ~7.1:1 */ --color-danger-text: #B91C1C; /* statt Bootstrap .text-danger #DC3545 (~4.53:1) - jetzt ~6.5:1 */ } /* ── Severity-Farbschema ───────────────────────────────────────────────── Generisches 3-Stufen-Ampelschema (kritisch / faellig / wartend) fuer Listen-/Karten-Komponenten. Verbraucher lesen nur var(--severity-color) und var(--severity-soft-bg), statt die drei Zustaende selbst aufzulisten. */ .severity-critical { --severity-color: var(--color-danger); --severity-soft-bg: var(--color-critical-soft); } .severity-due { --severity-color: var(--color-due); --severity-soft-bg: var(--color-due-soft); } .severity-waiting { --severity-color: var(--color-text-muted); --severity-soft-bg: var(--color-waiting-soft); } /* ============================================================================ * DARK MODE — UI/UX-Review 21.08.2026: folgt ausschliesslich der Systemeinstellung * des Betriebssystems (prefers-color-scheme) - die Anwendung hat keinen eigenen * manuellen Umschalter. Ueberschreibt nur Tokens aus dem :root-Block oben; jede * Komponente, die bereits konsequent var(--color-*) statt fester Hex-Werte nutzt * (der ganz ueberwiegende Teil des UI), wird dadurch automatisch dunkel, ohne * selbst angefasst zu werden. Reduziert Augenbelastung bei laengerer Nutzung * datendichter Bildschirme (Buchungspruefung, Monatsabschluss) - inzwischen eine * Standarderwartung an Business-Anwendungen, nicht nur an Consumer-Apps. * * Jede hier neu definierte Text-/Hintergrund-Kombination wurde gegen WCAG-AA * (>=4.5:1 Fliesstext) gegengeprueft, analog zu den Light-Mode-Textvarianten * unten im :root-Block. * * Die Sidebar (.sidebar in 03-layout.css) bleibt bewusst in BEIDEN Modi dunkel - * sie ist Marken-/Navigations-Chrome, kein Inhaltselement (analog z. B. * GitHub/Slack, deren Sidebar-Farbe unabhaengig vom Theme der Inhaltsflaeche ist). * ==========================================================================*/ @media (prefers-color-scheme: dark) { :root { /* Flaechenfarben (dunkel -> heller = "erhaben", wie Material-Design-Dark-Elevation) */ --color-bg: #0F172A; --color-surface: #1E293B; --color-surface-soft: #24324A; /* Text */ --color-text: #F1F5F9; --color-text-muted: #94A3B8; /* Rahmen */ --color-border: #334155; /* Linkfarbe: --color-primary-dark (#1D4ED8) faellt auf dunklem Grund unter 4.5:1 - hellere Variante fuer Fliesstext-Links noetig. --color-primary bleibt unveraendert (bereits hell genug) - dadurch bleiben auch die davon abgeleiteten --shadow-primary-*/ --stripe-primary-*-rgba-Werte weiterhin stimmig, ohne sie separat nachfuehren zu muessen. */ --color-primary-dark: #60A5FA; /* Semantische Statusfarben: hellere (400er statt 500er) Tonwerte - auf dunklem Grund sonst zu wenig Leuchtkraft/Kontrast. */ --color-danger: #F87171; --color-success: #4ADE80; --color-warning: #FB923C; --color-nodata: #475569; /* Alert-Varianten (danger): dunkler, gesaettigter Hintergrund statt des hellen Rosatons, helle statt dunkle Textfarbe. */ --color-alert-danger-bg: #451A1A; --color-alert-danger-border: #7F1D1D; --color-alert-danger-text: #FCA5A5; /* Dringlichkeits-Hintergrund (Dashboard-Tiles) - der helle Pfirsichton waere auf dunklem Grund ein grell wirkender Fremdkoerper. */ --color-due: #FB923C; --color-due-soft: #431407; /* WCAG-AA-Textvarianten: im Light-Mode dunklere Tonwerte auf hellem Grund - im Dark-Mode umgekehrt hellere Tonwerte auf dunklem Grund, sonst faellt der Kontrast unter 4.5:1. */ --color-success-text: #86EFAC; --color-warning-text: #FDBA74; --color-danger-text: #FCA5A5; } }