/* ========================================================================= ANGOFIX · DESIGN-TOKENS (css/tokens.css) Leitfarbe Violett #5F33E1 (aus Figma "Task Management UI Kit"). Struktur/Schatten von Sneat (ThemeSelection, MIT) inspiriert. Vanilla CSS, WCAG, Mobile-first. Wird VOR global.css / mobile.css / desktop.css eingebunden. Schrifteinbindung (Figma-Look, in jedem , VOR dieser Datei): Liefert Plus Jakarta Sans seit Paket P2 (docs/pwa-plan.md) selbst aus (css/fonts.css, Dateien unter fonts/) statt von fonts.googleapis.com. ========================================================================= */ :root{ /* ---- Marke (Violett #5F33E1) ---------------------------------------- */ /* Weißer Text auf #5F33E1 = 6,76:1 → AA für alle Größen. Kein -strong-Split nötig. */ --c-primary: #5F33E1; /* Buttons, Links, aktive Zustände, FAB */ --c-primary-press: #4E27C4; /* Hover / aktiv */ --c-primary-tint: #EEE9FC; /* helle Flächen, aktiver Menüpunkt, Standort-Chip */ --c-on-primary: #FFFFFF; --grad-primary: linear-gradient(135deg,#7150E8 0%,#5F33E1 100%); /* Hero-Card / FAB */ /* ---- Status (-tint = Hintergrund/Pill · Basis = Text, WCAG ≥4,5:1) -- */ --c-st-offen-tint: #E6EEFF; --c-st-offen: #2456C9; /* offen */ --c-st-zug-tint: #EEE9FC; --c-st-zug: #5F33E1; /* zugewiesen */ --c-st-bear-tint: #FFE7D6; --c-st-bear: #BC4B12; /* in_bearbeitung */ --c-st-mat-tint: #FFF1D6; --c-st-mat: #8A6300; /* wartet_material */ --c-st-erl-tint: #E3F7E9; --c-st-erl: #1F7A3D; /* erledigt */ /* ---- Dringlichkeit (Punkt/Akzent; Label bleibt immer als Text sichtbar) */ --c-u-krit: #E5484D; --c-u-hoch: #E8730C; --c-u-mittel: #C99700; --c-u-niedrig: #9AA0AE; /* ---- Dringlichkeit als Badge (Fläche + Text, WCAG-geprüfte Paare) ------ Werte sind Aliase, damit es genau eine Quelle für Rot und Amber gibt. Genutzt u. a. im Detail-Modal und im aria-label der Karte. */ --c-u-krit-tint: var(--c-danger-tint); /* #FCE9E8 */ --c-u-krit-text: var(--c-danger); /* #B4231F – 6,3:1 auf dem Tint */ --c-u-hoch-tint: var(--c-warning-tint); /* #FFF1D6 */ --c-u-hoch-text: var(--c-warning); /* #8A6300 – 5,4:1 auf dem Tint */ /* ---- Dringlichkeit als Kachelfläche (Kanban-Karte 2.0) ----------------- Deutlich heller als die Badge-Tints oben: die Fläche liegt unter Text, Icons und Status-Chip der ganzen Karte – bei Tint-Sättigung wäre das zu laut. Nur kritisch/hoch bekommen eine Fläche, mittel/niedrig bleiben neutral weiß. */ --c-u-krit-flaeche: #FEF5F4; --c-u-krit-flaeche-rand: #F3D2D0; --c-u-hoch-flaeche: #FFFAF0; --c-u-hoch-flaeche-rand: #F0E0BE; /* ---- Kategorie-Kacheln (Pastell-Hintergrund + Icon-Farbe) ------------ */ --c-kat-heizung-bg: #FCE7F0; --c-kat-heizung: #C32C66; --c-kat-elektro-bg: #FEF3D7; --c-kat-elektro: #A77B0A; --c-kat-sanitaer-bg: #E3F0FF; --c-kat-sanitaer: #2563EB; --c-kat-mobiliar-bg: #E6F6EC; --c-kat-mobiliar: #1F8A4C; --c-kat-rufanlage-bg:#EEE9FC; --c-kat-rufanlage:#5F33E1; /* ---- Feedback / Alerts ----------------------------------------------- */ --c-success: #1F7A3D; --c-success-tint: #E3F7E9; --c-danger: #B4231F; --c-danger-tint: #FCE9E8; --c-warning: #8A6300; --c-warning-tint: #FFF1D6; --c-info: #2456C9; --c-info-tint: #E6EEFF; /* ---- Neutralwerte / Text --------------------------------------------- */ --c-heading: #24252C; /* Überschriften (Figma "Black") */ --c-body: #646B7A; /* Fließtext + Hilfetexte (AA auf Weiß) */ --c-placeholder: #9AA0AE; /* nur Platzhalter/Deko – NICHT essentieller Text */ --c-bg: #F6F7FB; /* App-Hintergrund (zartes neutrales Grau) */ --c-surface: #FFFFFF; /* Cards, Felder */ --c-divider: #ECEAF3; /* feine Trennlinien */ --c-border: #E0DEEC; /* dezenter Rahmen */ --c-input-border:#8C8AA0; /* Feldrahmen: erfüllt WCAG 1.4.11 (≥3:1) */ /* ---- Typografie -------------------------------------------------------- */ --font: "Plus Jakarta Sans", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-root: 16px; /* Basis 16px (Mobile-A11y) */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px; --fs-display: var(--fs-4xl); --fs-h1: var(--fs-3xl); --fs-h2: var(--fs-2xl); --fs-body: var(--fs-base); --fs-caption: var(--fs-xs); --fs-mono: var(--font-mono); --lh-body: 1.55; --lh-tight: 1.2; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* ---- Abstände (4/8-Raster) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-12: 48px; /* ---- Radien (Figma-Look: runder als Sneat-Standard) ------------------- */ /* Mobile: Cards --r-lg, Felder/Buttons --r. Desktop-Tabellen dürfen --r-sm nutzen. */ --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-pill: 999px; /* ---- Schatten (weich, violett getönt) --------------------------------- */ --shadow-xs: 0 2px 8px rgba(95,51,225,.05); --shadow-sm: 0 4px 14px rgba(95,51,225,.07); --shadow: 0 10px 28px rgba(95,51,225,.12); --shadow-lg: 0 18px 40px rgba(36,37,44,.18); /* ---- Interaktion ------------------------------------------------------- */ --tap: 48px; /* Mindest-Touch-Target (Desktop: 42px ok) */ --ring: 0 0 0 3px rgba(95,51,225,.30); --ring-strong:0 0 0 4px rgba(95,51,225,.40); /* ---- Z-Index ---------------------------------------------------------- */ --z-sticky: 20; --z-overlay: 40; --z-modal: 100; --z-lightbox: 500; --z-toast: 1000; /* ---- Layout (Admin-Desktop) ------------------------------------------- */ --sidebar-w: 260px; --topbar-h: 64px; /* ---- Layout (Mobil) ---------------------------------------------------- */ /* Höhe eines Eintrags der unteren Navigationsleiste. Zwei Nutzer: die Leiste selbst (Tippziel, mindestens 44px laut UI-Regeln) und das untere Polster von .app-content, damit der Primärknopf eines Screens nicht hinter der Leiste verschwindet (Befund G8 der Browser-Abnahme vom 11.09.2026). Ein zweiter Hartwert an einer der beiden Stellen bringt beides auseinander. */ --bnav-h: 56px; /* ========================================================================= ANGOFIX 2.0 – additive Tokens (Redesign, Phase 0) Bestehende Tokens oben bleiben unverändert; Bereinigung erst in Phase 7. ========================================================================= */ /* ---- Radius 2.0 -------------------------------------------------------- */ --r-2xl: 24px; /* Karten 2.0 (Melder/Hausmeister/Admin) */ /* ---- Abstände 2.0 (ergänzt 4/8-Raster) --------------------------------- */ --sp-10: 40px; /* ---- Typografie 2.0 ----------------------------------------------------- */ --fs-4xl: 40px; /* Display-Größe für Erfolgsscreens/Dashboard-Kennzahlen */ --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace; /* ---- Schatten-Aliase 2.0 (Konzept-Sprache "Level 1-3") ----------------- */ --shadow-1: var(--shadow-xs); --shadow-2: var(--shadow-sm); --shadow-3: var(--shadow); /* ---- Dashboard-Akzente (weich) – nur für dekorative Flächen (Donut-Ring, Balken, Akzentrand der KPI-Karten), NICHT für Text/Badges verwenden. Dort bleiben die satten Status-/Feedback-Tokens wegen WCAG-Kontrast. --- */ --c-soft-rot: #E8A19E; /* kritisch/danger */ --c-soft-orange: #F2B77E; /* hoch */ --c-soft-gelb: #E8CE8A; /* mittel */ --c-soft-gruen: #8FCBA3; /* erledigt/success */ --c-soft-blau: #8FB0E8; /* offen */ --c-soft-violett: #B7A0EF; /* zugewiesen / primary-basiert */ --c-soft-terra: #E3A57E; /* in_bearbeitung */ --c-soft-oliv: #D0B96A; /* wartet_material */ /* ========================================================================= ANGOFIX 2.5 – Token-Fundament (Paket U1, additiv) ========================================================================= */ /* ---- Easing/Dauer getrennt (--tt/--tt-2 bleiben als Aliase) ------------ */ /* Drei echte Kurven (Nachzug zu U8): U1 legte die Namen additiv an, ohne die Werte zu ändern – alle drei standen auf `ease` und unterschieden sich in nichts. Jetzt tragen sie den Unterschied, den STYLEGUIDE.md §9 beschreibt: Erscheinendes bremst aus, Verschwindendes zieht an, laufende Zustandsänderungen bleiben symmetrisch. */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* Hover, Zustandswechsel */ --ease-eintritt: cubic-bezier(0, 0, .2, 1); /* erscheint: schnell rein, weich aus */ --ease-austritt: cubic-bezier(.4, 0, 1, 1); /* verschwindet: weich an, zügig weg */ --dur-schnell: 170ms; --dur: 170ms; --dur-langsam: 250ms; /* ---- Breakpoints (dokumentiert, nicht tokenisiert – wirken in @media nicht) Kanonisch: 420 / 640 / 768 / 900 / 1100. Konsolidierung in U13 und dessen Nachzug abgeschlossen (11.09.2026): 520 → 420 · 720 → 640 · 859/860 → 900. Die Abbildung gilt für max-width-Grenzen. Bei einer mobile-first-Regel (min-width) ist der nächste kanonische Wert *oberhalb* des alten richtig, sonst wandert Layout in ein Band, das es vorher nicht hatte: deshalb .anteil-donut in components.css min-width 720 → 768, nicht → 640. --- */ /* ---- Rahmenstärken ------------------------------------------------------ */ --bw: 1px; --bw-stark: 1.5px; --bw-prio: 4px; /* ---- Icon-Größen --------------------------------------------------------- */ --icon-sm: 16px; --icon: 20px; --icon-lg: 24px; /* ---- Opazität ------------------------------------------------------------ */ --op-disabled: .5; --op-deko: .12; /* ---- Semantische Farb-Aliase (keine neuen Werte, nur Sprache für U5–U8) - */ --c-text: var(--c-body); --c-text-stark: var(--c-heading); --c-text-schwach: var(--c-placeholder); --c-flaeche: var(--c-surface); --c-flaeche-alt: var(--c-bg); /* ---- Backdrop (bisher dreifach als Literal: desktop.css, components.css, js/foto.js). U1 verdrahtet components.css (im eigenen Dateibesitz); desktop.css und js/foto.js sind TABU (Dateibesitz U2a/U2c). ------------- */ --c-backdrop: rgba(36,37,44,.45); /* ---- Hex-Tilgung (Paket U1): ersetzt rohe Werte, keine neuen Farben ----- */ --c-primary-tint-stark: #E2DAFA; /* Hover-Fläche sekundärer Button/Scan-Button */ --c-danger-press: #8F1C18; /* Hover-Fläche Danger-Button 2.0 */ /* --tt/--tt-2 bleiben als Aliase auf die getrennten Easing-/Dauer-Tokens – kein Aufrufer muss angefasst werden. */ --tt: var(--dur) var(--ease-standard); --tt-2: var(--dur-langsam) var(--ease-standard); } /* ========================================================================= ANGOFIX 2.0 – globale Reduced-Motion-Basis (Phase 6.1) Greift zusätzlich zu den bestehenden Einzel-Media-Queries in components.css/shell.css (die bleiben als gezielte Zustands-Overrides bestehen). Diese Basisregel fängt alles ab, was noch keine eigene Reduced-Motion-Behandlung hat (z. B. qr-scan-anim in mobile.css). ========================================================================= */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }