/* ============================================================================ * 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); --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); --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); /* Redesign 01.09.2026 (Nutzerwunsch: "Layout zentral schöner und angenehmer gestalten, Con4Mews-Vorgaben dafür bewusst außer Acht lassen, blaue Grundfarbe muss bleiben") - ab hier weicht dieses Stylesheet erstmals absichtlich vom ursprünglich unverändert übernommenen Con4Mews-System ab. Marken-/Statusfarben oben BLEIBEN unverändert (Nutzervorgabe: blaue Grundfarbe muss bleiben) - das Redesign wirkt stattdessen über die Struktur-Tokens unten (Radien, Abstände, Schatten, Bewegung) sowie die darauf aufbauenden Komponenten in 02-04.css. */ /* Radien: drei Stufen mit runden, leicht merkbaren Werten statt der vorherigen krummen 0.65rem/1.125rem - --radius-sm für kleinteilige Elemente (Badges, Icon-Buttons), --radius-card für Kacheln/Chips, --radius-lg für Cards/Modals. Leicht reduziert gegenüber vorher (Cards vorher ~18px, jetzt 16px) - ein gemäßigterer, weniger "verspielter" Rundungsgrad passt besser zu einer Buchhaltungsanwendung als maximal abgerundete Ecken (vgl. Material Design 3 "Shape"-Leitfaden: kleinere Rundung wirkt präziser/seriöser, größere Rundung verspielter/freundlicher - hier bewusst näher an "präzise", da Zahlen/Tabellen im Vordergrund stehen). */ --radius-sm: 0.5rem; --radius-card: 0.75rem; --radius-lg: 1rem; /* Abstands-Skala (8-Point-Grid-Konvention, siehe u. a. Material Design "Layout" und IBM Carbon Design System "2x Grid" - https://m3.material.io/foundations/layout/understanding-layout/spacing, https://carbondesignsystem.com/guidelines/spacing/overview): ergänzt die bisher verstreuten Ad-hoc-rem-Werte im Markup (0.6rem, 0.75rem, 1.25rem, ...) um eine gemeinsame, benannte Quelle der Wahrheit für neue/überarbeitete Stellen. Bestehende Ad-hoc-Werte werden nicht rückwirkend ersetzt (kein Big-Bang-Umbau), neue Redesign-Regeln in diesem Durchgang nutzen aber konsequent diese Skala. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; /* Elevation-Schatten: weich, groß-blurrig, neutral-dunkel statt der vorherigen einzelnen, enger geschnittenen --shadow-text-Stufe - zeitgemäßer "schwebender" Look statt harter Schlagschatten (zwei überlagerte Schatten pro Stufe: ein enger "Kontakt"-Schatten + ein weiter, diffuser "Umgebungs"-Schatten, Konvention aus Material Design/Tailwind "elevation"). Ersetzt --shadow-text/--shadow-text-lg (siehe Git-Historie) - deren einzige drei Verwendungsstellen sind mit umgestellt. Farbige Schatten für interaktive Elemente (--shadow-primary-*/--shadow-danger-* oben) bleiben davon unberührt. */ --shadow-elevation-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05); --shadow-elevation-md: 0 2px 4px rgba(15,23,42,0.04), 0 6px 16px rgba(15,23,42,0.07); --shadow-elevation-lg: 0 4px 8px rgba(15,23,42,0.05), 0 16px 32px rgba(15,23,42,0.12); /* Bewegungsdauer: eine gemeinsame, benannte Quelle statt der bisher verstreuten 0.15s/0.18s- Einzelwerte je Regel - Konsistenz-Heuristik (Nielsen #4). */ --motion-fast: 150ms ease; --motion-base: 200ms ease; /* 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; } }