/* ══════════════════════════════════════════════════════════════ Design-Tokens — einzige Quelle für Farbe/Abstand/Radius/Type/ Control-Größe. main.css und die Styleguide-Referenzseite (wireframes/designkonzept/styleguide.html) lesen ausschließlich diese Variablen, keine eigenen Werte. Aktuelle Farbpalette: "Feinschliff" (Design 1 aus dem Look-Vergleichsmockup, wireframes/designkonzept/looksmaxing.html). Wird bei einer künftigen Design-Entscheidung hier zentral getauscht. ══════════════════════════════════════════════════════════════ */ :root { /* Native Browser-Widgets (Select-Dropdown-Popup, Kalender-Popup von input[type=date], Scrollbar) folgen NICHT automatisch unseren Tokens - sie sind Betriebssystem-/Browser-Chrome außerhalb des CSS-Zugriffs. color-scheme sagt dem Browser, welche Systempalette für genau diese Chrome-Elemente passt, sonst bleiben sie im Dark Mode oft weiß mit hellem Text (unlesbar), selbst wenn das Control drumherum korrekt eingefärbt ist. */ color-scheme: light; /* Farbe */ --primary: #24506e; --accent: #c0392b; --gold: #ab7f2c; --bg: #f3f2ee; --surface: #ffffff; --text: #1c2126; --muted: #6b7280; --border: #e1ded4; --green: #2f9d5c; --yellow: #e0a530; --orange: #dd7a2e; --red: #cf4a41; /* Farbstatus GRAU (kein laufender Timer) - eigenes Token statt der bisherigen Rohwerte #9ca3af in main.css/karte.html. Bewusst nicht --muted (das ist eine andere, dunklere Graustufe für Fließtext/Meta-Infos, keine Statusfarbe). */ --gray: #9ca3af; /* Farbstatus UNBEKANNT (nie gepflegt, siehe Pflegeobjekt.nieGepflegt) - eigenes Token statt Wiederverwendung von --info-text: --info-text ist für Text auf Info-Flächen gedacht, ein Status-Punkt/Kartenfüllung ist ein anderer Verwendungszweck - sonst müsste eine künftige Änderung von --info-text (Text-Kontrast) versehentlich auch die Kartenfarbe mitziehen. Aktuell derselbe Hellblau-Ton wie --info-text, aber unabhängig änderbar. */ --unknown: #1d4ed8; /* Schutzflächen-Akzent (Kartenmarker .badge-schutz + Schutz-Box-Rahmen im Dark Mode, Pflegeobjekt-Detail) - bisher zweimal unabhängig als identischer Rohwert #475569 hartkodiert, passt zu keinem bestehenden Grauton (weder --border noch --muted, in keinem Modus). */ --slate: #475569; /* Schrift/Icon auf gesättigtem Farbgrund (Buttons, Admin-Bar, Topbar) - bleibt in beiden Modi Weiß, da sich --primary selbst nicht mit dem Theme ändert. Bisher an vielen main.css-Stellen roh als #fff notiert statt als Token - hier nur im Styleguide selbst schon umgestellt. */ --text-inverse: #fff; /* Info-Akzent (helle Blau-Tönung für "aktiv/ausgewählt/hervorgehoben", z.B. Filter-Chips, ausgewählter Navigationspunkt) - bisher an mehreren Stellen unabhängig mit identischem Hex-Wert hartkodiert statt Token. */ --info-bg: #eff6ff; --info-border: #bfdbfe; --info-text: #1d4ed8; /* Warn-Akzent (Hinweis-/Erinnerungsboxen: Nacharbeit, Wartungsmodus- Hinweis, Pflegeintervall-Löschen, Reminder-Karten) - eigene Farbe, bewusst getrennt von --yellow (Ampel-Status). War vorher an neun Stellen in main.css + dreimal inline in _pflegeart_karte.html mit leicht schwankenden Amber-Tönen (#fffbeb/#fefce8/#fff8e1 usw.) nachgebaut. */ --warn-bg: #fffbeb; --warn-border: #fde68a; --warn-border-strong: #f59e0b; --warn-text: #92400e; /* Für Flächen mit fest weißer Schrift (Dashboard-Zähler-Badges) - bewusst NICHT --warn-text/--warn-border-strong wiederverwendet: --warn-text ist eine Text-auf-Seitenhintergrund-Farbe und wird im Dark Mode absichtlich hell gespiegelt, --warn-border-strong ist als Randfarbe kalibriert (siehe .reminder-section/ .tp-fa-block.warn) und hat mit weißer Schrift nur ~2,1:1 Kontrast - beides unlesbar als Badge-Fläche (Cornelius-Feedback 2026-07-14). Theme-invariant wie --violet/ --info-blue. -strong ist die dunklere Stufe für die dringendere Erinnerungs-Variante (Pflegearten-Erinnerungen-Badge, Konfiguration-Tab-Zähler), sonst identisches Muster. */ --warn-solid: #b45309; --warn-solid-strong: #92400e; /* Interaktions-Blau (aktiver Admin-Tab-Unterstrich im Dark Mode, Drag&Drop- Zieleinblendung) - bisher zweimal unabhängig als identischer Rohwert hartkodiert, passt zu keinem Status-/Marken-Token. */ --focus-blue: #3b82f6; /* Helles Slate-Grau - bisher dreimal unabhängig als identischer Rohwert hartkodiert (Drag-Handle-Grundzustand, sowie als Dark-Mode-Sekundärtext bei Schutz-Box/Badge-Neutral, heller als --muted im Dark Mode, aber kein voller --text-Kontrast). */ --slate-light: #cbd5e1; /* Neutrale Chip-/Badge-Rezeptur (z.B. Pflegeart-Zuordnungs-Chip ohne Aktiv-Zustand) - bisher zweimal unabhängig als identische Rohwerte hartkodiert. Dark-Mode nutzt bereits vorhandene Tokens (--surface/ --border/--slate-light), kein eigener Dark-Wert nötig. */ --neutral-bg: #f3f4f6; --neutral-text: #374151; /* Auch als Toggle-Switch-Track-Farbe (Aus-Zustand) wiederverwendet - ein neutraler Rand-/Inaktiv-Grauton, unabhängig ob als Rand oder Fläche eingesetzt. */ --inactive: #d1d5db; /* Erfolg/Fehler-Pastellflächen (Badges "aktiv"/"inaktiv", Fehlermeldungen) - bisher an vier Stellen unabhängig mit identischem Hex-Wert hartkodiert statt Token (main.css .badge-aktiv/.imp-badge-ok, .badge-inaktiv/ .imp-badge-missing/.alert-error/#error-banner). Text bleibt --green/--red, nur die Pastellfläche drumherum bekommt einen Namen. */ --success-bg: #f0fdf4; --danger-bg: #fef2f2; --danger-border: #fecaca; /* Violet-Akzent - bisher 4-5x roh als #7c3aed dupliziert für zwei zufällig gleichfarbige Bedeutungen (Prioritäts-Stern/-Auswahlkarte, Standpunktmeldungen-Kennfarbe inkl. Ungesehen-Punkt). Ein gemeinsamer Token, solange beide Bedeutungen tatsächlich denselben Ton teilen sollen. */ --violet: #7c3aed; --violet-bg: #faf5ff; /* Dashboard-Einmalaufgaben-Kennfarbe - eigenständiger vierter Akzent neben Warn (Nacharbeiten/Erinnerungen) und Violet (Standpunktmeldungen). */ --info-blue: #0369a1; /* Spacing-Skala — --space-1-5/-2-5 nachträglich ergänzt (Design-Overhaul, Tier-2-Abstimmung): 6px/10px kamen in main.css bereits 30+ mal konsistent vor, ohne bisher eine Skalenstufe zu treffen - faktisch längst etablierte Zwischenwerte, jetzt auch benannt. */ --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Radius-Skala */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Randstärke - zwei etablierte, bereits vielfach wiederverwendete Werte (main.css: ~31× 1.5px für Controls/Cards, ~27× 1px für dünne Trenner wie Tabellenzeilen/Sidebar), bisher beide roh notiert statt als Token. */ --border-width: 1.5px; --border-width-thin: 1px; /* Type-Scale — --fs-13 nachträglich ergänzt (Design-Overhaul, Tier-2- Abstimmung): 13px kam in main.css bereits 35+ mal konsistent vor, zwischen --fs-sm und --fs-md, ohne bisher eine Stufe zu treffen. */ --fs-xs: 11px; --fs-sm: 12px; --fs-13: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Control-Größe — Feld-Kontext ist der Default (großzügig, siehe Karte/Fläche-Detail für Mitarbeiter im Außeneinsatz). Der .admin-Wrapper (Verwaltung, Desktop) überschreibt kompakter. */ --control-pad-y: 13px; --control-pad-x: 18px; --control-fs: 15px; --control-radius: var(--radius-lg); } html.dark { color-scheme: dark; --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --border: #334155; --info-bg: #1e3a5f; --info-border: #1d4ed8; --info-text: #93c5fd; --warn-bg: #1c1200; --warn-border: #92400e; --warn-border-strong: #92400e; --warn-text: #fde68a; --success-bg: #052e16; --danger-bg: #450a0a; --danger-border: #7f1d1d; --violet-bg: #2e1065; } /* Admin-Bereich: einheitlich kompaktere Controls (Desktop-Nutzung, viele dichte Listen/Formulare) statt der Feld-Default-Größe. */ .admin { --control-pad-y: 9px; --control-pad-x: 16px; --control-fs: 14px; --control-radius: var(--radius-md); }