/* =========================================================================
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 ):
========================================================================= */
: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;
/* ---- 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) */
--tt: 170ms ease;
--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;
/* =========================================================================
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;
/* ---- Transition 2.0 (Microinteractions, 250ms lt. Konzept) ------------- */
--tt-2: 250ms ease;
/* ---- 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.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;
}
}