/* ============================================================================ * DESI Kundenportal — Osmium Design Tokens (Single Source of Truth) * ============================================================================ * Erstellt: 2026-05-14 * Status: Production (CLAUDE.md Regel 38) * * Architektur: * 1. Osmium-Namespace (--color-*, --space-N, --text-*, --motion-*, --easing-*) * — primäre API für neue Komponenten + Views ab 2026-05-14 * 2. Legacy-Aliases (--primary, --gray-*, --space-xs/sm/md/lg/xl/2xl, etc.) * — vollständig erhalten zur Backward-Compat mit ~84 konsumierenden CSS-Dateien. * Inkrementelle Migration in Folge-Chats; KEIN Big-Bang-Refactor. * * Pflicht-Lektüre: CLAUDE.md Regel 13 + 19 + 34 + 36 + 37 + 38 * Referenz: docs/OSMIUM-DESIGN-MANIFESTO.md (folgt im Manifesto-Chat) * * NIE in dieser Datei: hardcoded Layout-Werte ohne Token, Tailwind, generic * System-Fonts, CDN-Referenzen. * ============================================================================ */ :root { /* ========================================================================= * 1) OSMIUM-NAMESPACE — primäre API für Manifesto-konforme Komponenten * ========================================================================= */ /* --- DESIGNSTUUV CD-FARBEN -------------------------------------------- */ --color-primary: #233645; /* Dark Navy — Headlines, Header */ --color-primary-light: #2d4456; --color-primary-dark: #1a2733; --color-secondary: #e5b7ba; /* Rose — Akzente, CTAs */ --color-secondary-light: #f0d4d7; --color-secondary-dark: #d1a5a8; --color-accent: #FFEF00; /* Sparsam für Highlights */ --color-bg: #f9fafb; --color-bg-elevated: #ffffff; --color-white: #ffffff; /* Text/Flaeche auf dunklem Grund (Hero/Footer) */ --color-bg-subtle: #f3f4f6; --color-bg-overlay: rgba(35, 54, 69, 0.55); --color-text: #374151; --color-text-strong: #1f2937; --color-text-muted: #6b7280; --color-text-disabled: #9ca3af; /* --color-heading: Überschriften/Labels/aktive-Nav-Texte. In Light identisch mit --color-primary (Navy) → value-preserving. In Dark wird NUR dieser Token auf hell gekippt (STAFFSET-S6) — KEIN Anfassen von --color-primary, das weiterhin Navy-Flächen/Buttons/Heroes treibt (dual-use, vgl. CLAUDE.md R38). */ --color-heading: var(--color-primary); --color-text-on-primary: rgba(255, 255, 255, 0.95); --color-text-on-dark: rgba(255, 255, 255, 0.95); --color-text-on-dark-muted: rgba(255, 255, 255, 0.78); --color-border: #e5e7eb; --color-border-subtle: #f3f4f6; --color-border-strong: #d1d5db; --color-border-on-dark: rgba(255, 255, 255, 0.12); /* --- STATUS-FARBEN ---------------------------------------------------- */ --color-success: #10b981; --color-success-soft: #d1fae5; --color-success-strong: #065f46; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-warning-strong: #92400e; --color-danger: #ef4444; --color-danger-soft: #fee2e2; --color-danger-strong: #991b1b; --color-info: #3b82f6; --color-info-soft: #dbeafe; --color-info-strong: #1e40af; /* --- DUNNING-STAGE-COLORS (P3-S4 Phase 4b 2026-05-26) ----------------- * Eskalationsstufen für Mahn-/Workflow-Pills. * L1=Erinnerung (gray-blue) → L5=Inkasso (dark-red). * Wiederverwendbar in Sales-Dashboard, Mgmt-Finance, Audit-Reports. */ --color-stage-l1: #94a3b8; /* Slate-400 — Erinnerung */ --color-stage-l2: var(--color-warning); /* Amber-500 — 1. Mahnung */ --color-stage-l3: #f97316; /* Orange-500 — 2. Mahnung */ --color-stage-l4: var(--color-danger); /* Red-500 — Letzte Mahnung */ --color-stage-l5: var(--color-danger-strong); /* Red-900 — Inkasso */ /* --- GLASSMORPHISM (Concierge-Cards, Premium-Overlays) --------------- */ --color-glass-bg: rgba(255, 255, 255, 0.08); --color-glass-border: rgba(255, 255, 255, 0.12); --color-glass-bg-strong: rgba(255, 255, 255, 0.16); /* --- TYPOGRAFIE — DESIGNSTUUV CD (KEINE generischen Fonts!) ---------- */ --font-headline: 'Cabrito Didone Cond Book', 'Cabrito Didone', Georgia, 'Times New Roman', serif; --font-body: 'Ingra Light', 'Ingra', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: 'Lust Script Display', cursive; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Type-Skala (px-basiert für deterministisches Rendering) */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 60px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-base: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- PAGE-HEADER — Single Source of Truth (2026-05-20) ---------------- * Bis 2026-05-20 hatten 18 Page-CSS-Files .page-title/.page-subtitle * jeweils EIGENSTÄNDIG definiert → 1 driftendes File (sepa 2.5rem statt * 2.25rem) + neue Pages haben das Pattern oft vergessen. * Diese Tokens + canonical .page-title/.page-subtitle in _components.css * sind ab jetzt die einzige Quelle. Pages dürfen Modifier-Klassen * (.page-title--lg, .page-title--compact) ergänzen, aber NICHT die * Basis-Definition überschreiben. * ------------------------------------------------------------------- */ --page-title-font: var(--font-headline); --page-title-size: clamp(1.8rem, 4vw, 2.25rem); /* 28.8px → 36px */ --page-title-weight: var(--weight-bold); /* 700 */ --page-title-color: var(--color-primary); /* Navy #233645 */ --page-title-line-height: var(--leading-tight); /* 1.25 */ --page-title-margin-bottom: var(--space-2); /* 8px ≈ --space-xs */ --page-subtitle-font: var(--font-body); --page-subtitle-size: var(--text-md); /* 16px */ --page-subtitle-color: #4b5563; /* Gray-600 (Status-quo aller Pages 2026-05) */ --page-subtitle-line-height: var(--leading-base); /* 1.55 */ /* --- SPACING — 8px-Grid (Atomic Design-Standard) --------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- BORDER-RADIUS — abgestufte Skala (Cards ≠ Buttons) ------------- */ --radius-xs: 2px; /* Hairline-Akzente */ --radius-sm: 4px; /* Inputs, Badges */ --radius-md: 8px; /* Buttons, Compact Cards */ --radius-lg: 16px; /* Cards, Modals */ --radius-xl: 24px; /* Hero-Cards, Premium-Surfaces */ --radius-pill: 9999px; /* Pills, Chips, Avatar-Stack */ --radius-full: 9999px; /* Alias */ /* --- SHADOW-SKALA — Navy-getönt für DESI-CD ------------------------- */ --shadow-xs: 0 1px 2px rgba(35, 54, 69, 0.04); --shadow-sm: 0 2px 4px rgba(35, 54, 69, 0.08), 0 1px 2px rgba(35, 54, 69, 0.04); --shadow-md: 0 4px 12px rgba(35, 54, 69, 0.10), 0 2px 4px rgba(35, 54, 69, 0.06); --shadow-lg: 0 8px 24px rgba(35, 54, 69, 0.14), 0 4px 8px rgba(35, 54, 69, 0.08); --shadow-xl: 0 16px 48px rgba(35, 54, 69, 0.18), 0 8px 16px rgba(35, 54, 69, 0.10); --shadow-2xl: 0 24px 64px rgba(35, 54, 69, 0.22), 0 12px 24px rgba(35, 54, 69, 0.12); /* Premium-Glow-Effekte (sparsam!) */ --shadow-rose-glow: 0 4px 20px rgba(229, 183, 186, 0.25); --shadow-navy-deep: 0 12px 32px rgba(35, 54, 69, 0.18); /* --- BENTO Dashboard-Designsystem (Bento Premium, 2026-06-07) ------- Single Source of Truth fuer das Bento-Mein-Dashboard. rgba/px NUR hier (Token-Datei) erlaubt — .osm-bento* in _components.css nutzt ausschliesslich var(--*). CD-treu: Navy-Hero + Rose-Glow. */ --bento-radius: 20px; /* Tiles — weicher als --radius-lg, edler als Card-8px */ --bento-gap: 16px; /* Grid-Abstand zwischen Tiles */ --bento-pad: 24px; /* Innen-Padding Standard-Tile */ --bento-surface: var(--color-bg-elevated); /* #fff */ --bento-surface-soft: #f6f8fa; /* Quick-Action-Felder, Chat-Blasen */ --bento-shadow: 0 4px 16px rgba(35, 54, 69, 0.07); --bento-shadow-hover: 0 16px 44px rgba(35, 54, 69, 0.13); --bento-border-ghost: 1.5px dashed #c2cad4; --bento-grad-navy: linear-gradient(150deg, #233645, #2d4456 70%, #34506a); --bento-grad-rose: linear-gradient(150deg, #f3d8db, #fae8ea); --bento-glow-rose: radial-gradient(circle, rgba(229, 183, 186, 0.40), transparent 70%); --bento-trend-up-bg: #dcfce7; --bento-trend-up-fg: #15803d; --bento-trend-down-bg: #fee2e2; --bento-trend-down-fg: #b91c1c; --bento-trend-flat-bg: #f1f4f7; --bento-trend-flat-fg: #6b7280; --bento-on-navy: rgba(255, 255, 255, 0.74); --bento-on-navy-soft: rgba(255, 255, 255, 0.55); --bento-glass-bg: rgba(255, 255, 255, 0.10); --bento-glass-border: rgba(255, 255, 255, 0.16); --bento-on-navy-faint: rgba(255, 255, 255, 0.25); --bento-on-navy-dim: rgba(255, 255, 255, 0.40); --bento-spark-navy: linear-gradient(rgba(229, 183, 186, 0.95), rgba(229, 183, 186, 0.35)); /* Topbar Light-Redesign (BENTO-S2 Teil B, 2026-06-07) — helle Staff/Mgmt-Topbar */ --topbar-light-bg: var(--color-bg-elevated); /* #fff */ --topbar-pill-bg: #f1f4f7; /* Welt-Switch-Pille (Spur) */ --topbar-icon-bg: #f6f8fa; /* Icon-Buttons (Rounded Squares) */ --topbar-icon-radius: 11px; --topbar-on-light: var(--color-primary); /* Icon/Logo-Farbe Navy */ --topbar-seg-muted: #6b7280; /* inaktive Welt-Segmente */ --topbar-shadow: 0 2px 12px rgba(35, 54, 69, 0.08); /* BENTO-S2/S3 — Personalisierbares Grid (Muuri). Generische osm-grid-Tokens sind die Single Source; die --td-grid-* Aliase bleiben für Alt-Referenzen. */ --osm-grid-cols: 12; /* Spalten lg — JS überschreibt pro Breakpoint */ --osm-grid-row: 88px; /* Höhe einer Grid-Zeile (h=1) */ --osm-grid-edit-accent: #5b7895; /* Edit-Modus Outline (Navy-Tint) */ --osm-grid-edit-bg: rgba(35, 54, 69, 0.045); /* Edit-Modus Drop-Fläche */ --td-grid-cols: var(--osm-grid-cols); /* @deprecated BENTO-S3 Alias */ --td-grid-row: var(--osm-grid-row); /* @deprecated BENTO-S3 Alias */ --td-grid-edit-accent: var(--osm-grid-edit-accent); /* @deprecated */ --td-grid-edit-bg: var(--osm-grid-edit-bg); /* @deprecated */ /* Focus-Ring — DESI-Rose, accessibility-konform */ --shadow-focus: 0 0 0 3px rgba(229, 183, 186, 0.45); --shadow-focus-strong: 0 0 0 4px rgba(229, 183, 186, 0.55); --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.35); /* --- MOTION — cubic-bezier + Timings für Awork-Plus-Feel ----------- */ --motion-instant: 0ms; --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; --motion-slower: 600ms; --motion-glacial: 1000ms; --easing-linear: linear; --easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* iOS-style decel */ --easing-in: cubic-bezier(0.7, 0, 0.84, 0); --easing-inout: cubic-bezier(0.65, 0, 0.35, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Subtle overshoot */ --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material-Std */ /* --- Z-INDEX-SKALA — deterministisch geschichtet -------------------- */ --z-base: 0; --z-elevated: 10; --z-sticky: 100; --z-dropdown: 1000; --z-overlay: 1100; --z-drawer: 1150; --z-modal: 1200; --z-toast: 1300; --z-tooltip: 1400; --z-skiplink: 9999; /* --- LAYOUT-CONSTRAINTS --------------------------------------------- */ /* Container-Hierarchie (Workspace-Default seit 2026-05-15 revidiert): */ /* - --max-width-workspace: DEFAULT-Container fuer Staff/Management-Views */ /* (Awork-UX: alle Seiten fluid, kein Springen) */ /* - --max-width-page: Sub-Container fuer breite Lese-Inhalte (1440) */ /* - --max-width-content: Modal-Bodies, Concierge-Karten (1280) */ /* - --max-width-prose: Reine Text-Spalten Blog/Artikel/Impressum */ /* - --max-width-form: Single-Column-Forms (Login, Reset) */ /* - --max-width-fluid: Echte Vollbreite, Sonderfall (Jahresheatmap) */ --max-width-workspace: min(1920px, calc(100vw - var(--space-8) * 2)); --max-width-page: 1440px; --max-width-content: 1280px; --max-width-prose: 720px; --max-width-form: 480px; --max-width-fluid: 100%; --header-height: 72px; /* Customer-Header (Mega-Menue) — UNANGETASTET */ --topbar-height: 68px; /* OSMIUM Brand-Strip (Staff/Mgmt) — 2026-05-15; 60→68 BENTO-S2 (mehr Luft, Pillen kleben nicht am Rand) */ --sidebar-width: 260px; /* NAV-OSMIUM S3 (T1): Single Source fuer .osm-sidebar. Kompromiss 240↔280 — mehr Atmung fuer Sektions-Header. Legacy .staff-sidebar (280px hardcoded) bleibt additiv bis Cleanup-Phase (Regel 37, Bestands-Erhalt bei Flag=0). */ --sidebar-width-collapsed: 64px; /* --- NAV-OSMIUM S1 (Awork-Layout-Overhaul 2026-06-07) --- */ --card-border-rose: rgba(229, 183, 186, 0.65); /* CD-Rose Card-Rand, kraeftiger (Folge-Feedback P2) */ --sidebar-bg: #fbf5f6; /* leichter CD-Rose-Tint (awork-artig, abgeleitet von #e5b7ba) */ --sidebar-border: transparent; /* KEIN rechter Trennstrich (Aufgabe 6) */ --logo-height: 48px; /* Sidebar-Brand-Logo (groesser, Aufgabe 11/Folge-Feedback) */ --content-pad-x: var(--space-10); /* 40px — Card-Abstand zur Nav leicht erhoeht (Aufgabe 10; war ~32px) */ --topbar-border: transparent; /* untere Topbar-Linie weiss statt Rose (Aufgabe 9) */ /* --- NAV-OSMIUM S3: Touch / Z-Index / Glass / Surface (T2/T3/T4) --- */ --touch-target-min: 44px; /* WCAG Min-Touch-Target (T4) */ --z-sidebar: 90; /* unter Topbar (T2) */ --z-topbar: 100; /* == --z-sticky, jetzt explizit (T2) */ --z-bottomnav: 95; /* Mobile-Bottom-Nav, unter Drawer/Modal (T2) */ --color-surface: var(--color-bg-elevated); /* Karten-/Panel-Flaeche (#fff) */ --color-surface-sunken: var(--color-surface-navy-100); /* Sidebar-Flaeche (Navy-Tint) */ --color-hover: var(--color-surface-navy-100); /* Nav-Item-Hover */ --color-on-primary: #ffffff; /* Text auf Navy (Active-Item Management) */ --color-overlay-dark: rgba(0, 0, 0, 0.50); /* Mobile-Drawer/Overlay-Backdrop (T3) */ --border-glass: 1px solid rgba(255, 255, 255, 0.18); /* weiche Borders „felt not seen" (T3) */ --border-glass-hover: 1px solid rgba(255, 255, 255, 0.30); /* --- BORDER-WIDTH --------------------------------------------------- */ --border-width-thin: 1px; --border-width-base: 2px; --border-width-thick: 3px; /* ========================================================================= * 2) LEGACY-ALIASES — Backward-Compat für ~84 konsumierende CSS-Dateien * NICHT entfernen ohne Repo-weiten Refactor. Migration siehe Manifesto. * ========================================================================= */ /* Farben (legacy) → Osmium-Namespace */ --primary: var(--color-primary); --primary-light: var(--color-primary-light); --primary-dark: var(--color-primary-dark); --secondary: var(--color-secondary); --secondary-light: var(--color-secondary-light); --secondary-dark: var(--color-secondary-dark); --accent: var(--color-accent); --white: #ffffff; /* Graustufen (legacy) — bleiben als eigene Konstanten */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Status (legacy) → Osmium-Namespace */ --success: var(--color-success); --success-light: var(--color-success-soft); --success-dark: var(--color-success-strong); --warning: var(--color-warning); --warning-light: var(--color-warning-soft); --warning-dark: var(--color-warning-strong); --error: var(--color-danger); --error-light: var(--color-danger-soft); --error-dark: var(--color-danger-strong); --info: var(--color-info); --info-light: var(--color-info-soft); --info-dark: var(--color-info-strong); /* Inactive (legacy) */ --inactive: var(--gray-400); --inactive-light: var(--gray-100); --inactive-dark: var(--gray-600); /* Spacing (legacy rem-basiert) — bleibt parallel zur Osmium-px-Skala */ --space-2xs: 0.25rem; /* 4px ≈ --space-1 (S2-FOLGE 2026-05-26: pre-existing Token-Gap repariert) */ --space-xs: 0.5rem; /* 8px ≈ --space-2 */ --space-sm: 1rem; /* 16px ≈ --space-4 */ --space-md: 1.5rem; /* 24px ≈ --space-6 */ --space-lg: 2rem; /* 32px ≈ --space-8 */ --space-xl: 3rem; /* 48px ≈ --space-12 */ --space-2xl: 4rem; /* 64px ≈ --space-16 */ /* Radius-Aliases (alte Skala hatte sm=8px; Osmium sm=4px, md=8px). Beide bleiben gültig. Konsumenten von --radius-sm bekommen weiter 8px. */ /* Osmium-Namespace überschreibt absichtlich NICHT die Legacy-Werte */ /* Transitions (legacy) → Osmium-Namespace */ --transition-fast: var(--motion-fast) var(--easing-standard); --transition-base: var(--motion-base) var(--easing-standard); --transition-slow: var(--motion-slow) var(--easing-standard); /* Z-Index (legacy) → Osmium-Namespace */ --z-fixed: 1030; /* Legacy-only; in Osmium über --z-sticky/--z-drawer abgebildet */ } /* ============================================================================ * Legacy-Radius-Skala beibehalten (Konsumenten erwarten --radius-sm = 8px) * Wir definieren die Legacy-Werte AFTER :root damit sie nicht überschrieben werden. * ============================================================================ */ :root { /* Legacy-Radius — bewusst überschrieben gegenüber Osmium (Osmium nutzt --radius-md=8px) */ --radius-sm-legacy: 8px; --radius-md-legacy: 12px; --radius-lg-legacy: 16px; --radius-xl-legacy: 24px; --radius-full-legacy: 9999px; } /* ============================================================================ * 3) EXTENDED PALETTE (SPEC-P4-S0, 2026-06-02) * ---------------------------------------------------------------------------- * Value-preserving Tokens für die Bestands-Migration der Mgmt/Team-Views. * Decken Off-Palette-Hex ab, die in Legacy-Page-CSS hardcodiert waren: * Status-Ramps (rot/grün/amber/blau), Indigo/Violet/Teal (Kategorie-/Abteilungs- * Farben), Navy-Gradient-Stops, Rose-Tints, generische Neutral-Grautöne. * KEINE visuelle Änderung — jeder Token trägt exakt den vorherigen Hex-Wert * (CLAUDE.md Regel 38 + Regel 45 F10-1). * BACKLOG: Folge-Konsolidierungs-Sprint kann nahe Duplikat-Shades (z.B. mehrere * Rose-Near-Whites, Amber-50-Varianten) auf kanonische Werte reduzieren. * ============================================================================ */ :root { /* Neutrals-Extension (generische Grautöne aus Legacy-Code) */ --color-black: #000; --color-neutral-700: #333; --color-neutral-600: #555; --color-neutral-550: #666; --color-neutral-450: #808080; --color-neutral-400: #888; --color-neutral-350: #b0b0b0; --color-neutral-300: #ccc; --color-neutral-250: #d8d8d8; --color-neutral-150: #f0f0f0; --color-neutral-100: #f5f5f5; --color-neutral-50: #fafafa; --color-neutral-25: #fbfafa; /* Navy/Slate-Surfaces (Navy-getönte Hintergründe + Gradient-Stops) */ --color-navy-950: #0f1a22; --color-navy-900: #1c2c39; --color-navy-700: #35506a; --color-navy-600: #3b5267; --color-surface-navy-50: #fafbfc; --color-surface-navy-100: #f4f6f8; --color-surface-navy-150: #f1f4f7; --color-surface-navy-200: #dde4eb; --color-slate-300: #cbd5e1; /* Status-Ramps (Tailwind-Pendants, value-preserving) */ --color-red-700: #b91c1c; --color-red-600: #dc2626; --color-red-300: #fca5a5; --color-red-200: #fecaca; --color-red-50: #fef2f2; --color-green-600: #059669; --color-green-700: #047857; --color-green-800: #166534; --color-green-900: #064e3b; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-50: #f0fdf4; --color-emerald-50: #ecfdf5; --color-amber-600: #d97706; --color-amber-650: #a15c00; --color-amber-700: #b45309; --color-amber-800: #9a3412; --color-amber-900: #78350f; --color-amber-400: #fbbf24; --color-amber-300: #fcd34d; --color-amber-200: #fde68a; --color-amber-100: #fed7aa; --color-amber-50: #fffbeb; --color-orange-50: #fff7ed; --color-orange-100: #fee7d2; --color-blue-900: #1e3a8a; --color-blue-50: #eff6ff; /* Mid-Ramp Akzente (Abwesenheits-/Kategorie-Farben — P4-S3 Kapazität) */ --color-pink-500: #ec4899; /* Elternzeit-Heatmap */ --color-violet-500: #8b5cf6; /* Sonderurlaub-Heatmap */ /* Indigo / Violet (Kategorie-/Badge-Akzente) */ --color-indigo-800: #3730a3; --color-indigo-700: #4338ca; --color-indigo-100: #e0e7ff; --color-indigo-50: #eef2ff; --color-violet-800: #6b21a8; --color-violet-700: #5b21b6; --color-violet-650: #6d28d9; /* Offer-Status "konvertiert" (P3-FINANZEN-AUDIT) */ --color-violet-600: #7c3aed; --color-violet-200: #ddd6fe; --color-violet-100: #ede9fe; --color-violet-50: #f3e8ff; /* Pastell-Akzente (dekorative Mikro-Gradients, z.B. Payment-Modal-Header) */ --color-pastel-slate: #ecf0f4; /* P3-FINANZEN-AUDIT */ --color-pastel-rose: #fbeff0; /* P3-FINANZEN-AUDIT */ /* Teal (Abteilung Development) */ --color-teal-600: #0d9488; --color-teal-700: #0d6960; --color-teal-900: #0d4f49; --color-teal-200: #a7f0e6; --color-teal-100: #d1faf5; /* Rose-Tints (Sekundärfarbe-Abstufungen) */ --color-rose-700: #8a3540; --color-rose-400: #c89598; --color-rose-300: #d29ea2; --color-rose-200: #f3c8cd; --color-rose-100: #fbe5e7; --color-rose-50: #fdf5f6; --color-rose-25: #fef7f7; --color-rose-25b: #fef7f8; } /* ============================================================================ * 4) GHOST-TOKEN-ALIASE (STAFFSET-S6, 2026-06-09) * ---------------------------------------------------------------------------- * Diese semantischen Namen wurden quer durch die Staff/Team-CSS referenziert, * waren aber NIE definiert → sie fielen auf ihren (hellen) Inline-Fallback * zurück und brachen dadurch in Dark. Hier als Alias auf die existierenden * OSMIUM-Tokens definiert: in Light wertgleich zum bisherigen Fallback, in Dark * kaskadieren sie automatisch (referenzieren --color-*, die html[data-theme= * "dark"] überschreibt). KEINE neue Optik in Light. * ============================================================================ */ :root { --color-bg-base: var(--color-bg); --color-bg-card: var(--color-bg-elevated); --color-bg-hover: var(--color-hover); --color-bg-muted: var(--color-bg-subtle); --color-surface-hover: var(--color-hover); --color-surface-inset: var(--color-bg-subtle); --color-surface-muted: var(--color-bg-subtle); --color-widget: var(--color-bg-elevated); --color-primary-bg: var(--color-surface-navy-100); --color-text-subtle: var(--color-text-muted); --color-text-on-secondary: var(--color-primary); --color-shadow-card: var(--shadow-md); --shadow-card: var(--shadow-md); /* Status-Hintergründe/-Text (kaskadieren dark über die Soft/Strong-Tokens) */ --color-success-bg: var(--color-success-soft); --color-success-border: var(--color-success); --color-success-text: var(--color-success-strong); --color-success-light: var(--color-success-soft); --color-danger-bg: var(--color-danger-soft); --color-danger-bg-subtle: var(--color-danger-soft); --color-danger-tint: var(--color-danger-soft); --color-danger-border: var(--color-danger); --color-danger-text: var(--color-danger-strong); --color-warning-bg: var(--color-warning-soft); --color-warning-border: var(--color-warning); --color-warning-text: var(--color-warning-strong); --color-info-bg: var(--color-info-soft); --color-info-border: var(--color-info); /* Sekundär-(Rose)-Varianten */ --color-secondary-soft: var(--color-rose-100); --color-secondary-tint: var(--color-rose-100); --color-secondary-strong: var(--color-secondary-dark); /* Falsch-herum benannte Aliase (Legacy-Tippfehler) */ --primary-color: var(--color-primary); --primary-color-dark: var(--color-primary-dark); } /* ============================================================================ * Print-Stylesheet-Tokens (für PDF-Export + Druckansichten) * ============================================================================ */ @media print { :root { --color-bg: #ffffff; --color-bg-elevated: #ffffff; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; } } /* ============================================================================ * Reduced-Motion — barrierefrei + iOS-konform * ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-instant: 0ms; --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-slower: 0ms; --motion-glacial: 0ms; } } /* ============================================================================ * DARK MODE — STAFFSET-S6 (2026-06-09) · Geltungsbereich: NUR Staff/Management * ---------------------------------------------------------------------------- * Aktiv über (gesetzt vom Pre-Paint-Script in * staff.php). Kundenportal (default.php) + Admin (admin.php) tragen weiter * data-theme="designstuuv" und bleiben hell. * * ARCHITEKTUR (CLAUDE.md Regel 38 — Dark Mode IST die Belohnung der Token-Disziplin): * - NUR LEAF-Tokens (hardcodierte Hex) werden überschrieben. Tokens, die per * var(--other) referenzieren (z.B. --color-surface = var(--color-bg-elevated)), * kaskadieren automatisch auf die Dark-Werte → KEINE Duplikate. * - --color-primary (Navy) bleibt UNVERÄNDERT → Navy-Flächen/Buttons/Heroes * funktionieren in Dark unverändert (Navy auf dunklem Grund = gewollt). * - --color-heading kippt auf hell (Headings/Labels, vorher color:var(--primary)). * - Legacy --gray-* werden invertiert → deckt ~84 Legacy-CSS automatisch ab. * - --color-white bleibt #fff (rein Text-auf-Dunkel). --white bleibt #fff * (Text/Border/Icons auf Navy); Karten-Backgrounds wurden mechanisch auf * var(--color-bg-elevated) umgestellt (kaskadiert dunkel). * * CD-Identität: Navy + Rose bleiben erkennbar (awork-Dark-Vorbild). * * WICHTIG — Selektor-Spezifität: `html[data-theme="dark"]` (0,1,1) statt nur * `[data-theme="dark"]` (0,1,0). Grund: layout.css (lädt NACH _tokens.css) * re-definiert Legacy-Tokens (--gray-*, --shadow-*) in einem eigenen `:root`. * Bei gleicher Spezifität würde dieser spätere `:root` unsere Dark-Werte per * Source-Order schlagen. `html[...]` gewinnt über JEDEN `:root` per Spezifität. * ============================================================================ */ html[data-theme="dark"] { /* --- FLÄCHEN ------------------------------------------------------------ */ --color-bg: #0f1722; /* Seiten-Hintergrund (deep navy-black) */ --color-bg-elevated: #1a2531; /* Karten / Panels */ --color-bg-subtle: #161f29; /* eingesenkte Flächen, Tabellen-Zebra */ --color-bg-overlay: rgba(0, 0, 0, 0.62); /* --color-white BLEIBT #fff (Text/Icons auf Navy) — NICHT überschreiben. */ /* --- TEXT --------------------------------------------------------------- */ --color-text: #d4dae1; --color-text-strong: #f3f5f7; --color-text-muted: #98a3af; --color-text-disabled: #687482; --color-heading: #eef2f6; /* vorher color:var(--primary) — jetzt hell */ /* Text-auf-Dunkel-Tokens bleiben gültig (waren schon für dunklen Grund gedacht) */ /* --- BORDERS (weiche, „felt not seen") --------------------------------- */ --color-border: rgba(255, 255, 255, 0.11); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.20); /* --- PAGE-HEADER (Regel 42 — eigene Tokens, hier hell kippen) ----------- */ --page-title-color: #f3f5f7; --page-subtitle-color: #98a3af; /* --- NAVY-SURFACE-TINTS (Sidebar/Hover/eingesenkte Karten) ------------- */ --color-surface-navy-50: #131c25; --color-surface-navy-100: #18222d; /* treibt --color-surface-sunken + --color-hover */ --color-surface-navy-150: #1c2733; --color-surface-navy-200: #2a3744; --color-slate-300: #3a4856; /* --- LEGACY GRAY-SKALA invertiert (deckt Legacy-CSS automatisch) ------- */ --gray-50: #161f29; /* war hellste Fläche → jetzt dunkle Fläche */ --gray-100: #1b2530; --gray-200: #28333f; /* Hairlines/Borders */ --gray-300: #38454f; /* kräftigere Borders */ --gray-400: #828d9b; /* Mikro-Labels / Placeholder (lesbar auf Dunkel, AA) */ --gray-500: #98a3af; /* muted text */ --gray-600: #b3bcc6; --gray-700: #d4dae1; /* Body-Text (war #374151) */ --gray-800: #e8ebef; --gray-900: #f3f5f7; /* Strong-Text (war #111827) */ /* --- NEUTRALS-EXTENSION (near-white → dunkel; dunkle-Text → hell) ------ */ --color-neutral-25: #18222d; --color-neutral-50: #161f29; --color-neutral-100: #1b2530; --color-neutral-150: #222d39; --color-neutral-250: #38454f; --color-neutral-300: #45525e; --color-neutral-350: #6b7682; --color-neutral-400: #8a95a1; --color-neutral-450: #98a3af; --color-neutral-550: #c3cbd4; --color-neutral-600: #d4dae1; --color-neutral-700: #e8ebef; --color-black: #f3f5f7; /* hardcodiertes color:#000 → hell */ /* --- STATUS-SOFT (helle Pills → dunkle Tints) + STRONG (dunkel → hell) - */ --color-success-soft: rgba(16, 185, 129, 0.18); --color-success-strong: #6ee7b7; --color-warning-soft: rgba(245, 158, 11, 0.18); --color-warning-strong: #fcd34d; --color-danger-soft: rgba(239, 68, 68, 0.18); --color-danger-strong: #fca5a5; --color-info-soft: rgba(59, 130, 246, 0.18); --color-info-strong: #93c5fd; /* Status-Ramp Light-Backings → dunkle Tints (Tailwind-50/100 Pendants) */ --color-red-50: rgba(239, 68, 68, 0.14); --color-red-200: rgba(239, 68, 68, 0.30); --color-red-300: #fca5a5; --color-red-600: #f87171; --color-red-700: #fca5a5; --color-green-50: rgba(16, 185, 129, 0.12); --color-green-100: rgba(16, 185, 129, 0.18); --color-green-200: rgba(16, 185, 129, 0.28); --color-green-600: #34d399; --color-green-700: #6ee7b7; --color-green-800: #a7f3d0; --color-green-900: #d1fae5; --color-emerald-50: rgba(16, 185, 129, 0.12); --color-amber-50: rgba(245, 158, 11, 0.12); --color-amber-100: rgba(245, 158, 11, 0.18); --color-amber-200: rgba(245, 158, 11, 0.26); --color-amber-600: #fbbf24; --color-amber-650: #fcd34d; --color-amber-700: #fcd34d; --color-amber-800: #fde68a; --color-amber-900: #fef3c7; --color-orange-50: rgba(249, 115, 22, 0.12); --color-orange-100: rgba(249, 115, 22, 0.18); --color-blue-50: rgba(59, 130, 246, 0.12); --color-blue-900: #bfdbfe; --color-indigo-50: rgba(99, 102, 241, 0.14); --color-indigo-100: rgba(99, 102, 241, 0.22); --color-indigo-700: #a5b4fc; --color-indigo-800: #c7d2fe; --color-violet-50: rgba(139, 92, 246, 0.14); --color-violet-100: rgba(139, 92, 246, 0.20); --color-violet-200: rgba(139, 92, 246, 0.30); --color-violet-600: #a78bfa; --color-violet-650: #b39bf5; --color-violet-700: #c4b5fd; --color-violet-800: #ddd6fe; --color-teal-100: rgba(13, 148, 136, 0.20); --color-teal-200: rgba(13, 148, 136, 0.30); --color-teal-600: #2dd4bf; --color-teal-700: #5eead4; --color-teal-900: #99f6e4; /* --- ROSE-TINTS (near-white Rose → dunkle Rose-Tints; CD-Akzent bleibt) - */ --color-rose-25: #1d161a; --color-rose-25b: #1d161a; --color-rose-50: #221a1e; --color-rose-100: rgba(229, 183, 186, 0.16); --color-rose-200: rgba(229, 183, 186, 0.26); --color-rose-300: #d29ea2; --color-rose-400: #e5b7ba; --color-rose-700: #f0d4d7; /* --- PASTELL-MICRO-GRADIENTS -------------------------------------------- */ --color-pastel-slate: #1c2733; --color-pastel-rose: #221a1e; /* --- SIDEBAR / TOPBAR --------------------------------------------------- */ --sidebar-bg: #141d27; /* war Rose-Tint #fbf5f6 */ --card-border-rose: rgba(229, 183, 186, 0.30); --topbar-pill-bg: #1b2530; --topbar-icon-bg: #18222d; --topbar-on-light: #e8ebef; /* Icons/Logo hell (war Navy) */ --topbar-seg-muted: #98a3af; /* --- BENTO Dashboard-Surfaces ------------------------------------------ */ --bento-surface-soft: #18222d; --bento-trend-up-bg: rgba(16, 185, 129, 0.18); --bento-trend-up-fg: #6ee7b7; --bento-trend-down-bg: rgba(239, 68, 68, 0.18); --bento-trend-down-fg: #fca5a5; --bento-trend-flat-bg: #222d39; --bento-trend-flat-fg: #98a3af; --bento-grad-rose: linear-gradient(150deg, #2a2024, #1d161a); --bento-border-ghost: 1.5px dashed #38454f; /* --- TOPBAR (heller Brand-Strip → dunkel) ------------------------------ */ --topbar-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); /* --- SHADOWS (Navy-getönt = unsichtbar auf Dunkel → schwarz + stärker) - */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.32); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.36); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.40); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.62), 0 12px 24px rgba(0, 0, 0, 0.45); --bento-shadow: 0 4px 16px rgba(0, 0, 0, 0.40); --bento-shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.55); --shadow-navy-deep: 0 12px 32px rgba(0, 0, 0, 0.55); /* --- GLASSMORPHISM (auf Dunkel: leicht heller Glas-Layer) -------------- */ --color-glass-bg: rgba(255, 255, 255, 0.05); --color-glass-border: rgba(255, 255, 255, 0.10); --color-glass-bg-strong: rgba(255, 255, 255, 0.09); /* --- EDIT-MODUS (Bento-Grid) ------------------------------------------- */ --osm-grid-edit-bg: rgba(229, 183, 186, 0.07); /* === 5) S6c KUNDENPORTAL-GHOST-ALIASE ================================== * Im Kundenportal-CSS referenzierte, global UNdefinierte Tokens mit hellem * Inline-Fallback (z.B. var(--text, #374151)). In Light greift der Fallback * (unverändert), hier in Dark wird der invertierte Wert gesetzt → kein * Light-Leak. Property-Usage je Token ist konsistent (Text vs. Fläche), * daher ein einzelner Dark-Wert je Token sicher. (Landmine 4, S6c) */ --bg-secondary: var(--color-bg-subtle); /* war #f9fafb */ --bg-tertiary: var(--gray-100); /* war #f3f4f6 */ --border-color: var(--color-border); /* war #e5e7eb */ --color-text-secondary: var(--gray-600); /* war #4b5563 */ --text-secondary: var(--color-text-muted); /* war #6b7280 */ --text: var(--color-text); /* war #374151 */ --text-light: var(--color-text-muted); /* war #6b7280 */ --color-subtle: var(--color-text-muted); /* war #6b7280 */ --info-bg: rgba(59, 130, 246, 0.14); /* war #eef4fb */ --info-text: #93c5fd; /* war #1f4060 */ --info-icon: #93c5fd; /* war #4a78a8 */ --amber-50: rgba(245, 158, 11, 0.14); /* war #fffbeb */ --amber-200: rgba(245, 158, 11, 0.30); /* war #fde68a (Border) */ --amber-800: #fcd34d; /* war #92400e (Text) */ --red-50: rgba(239, 68, 68, 0.14); /* war #fef2f2 */ --red-300: rgba(239, 68, 68, 0.30); /* war #fca5a5 (Border) */ --red-600: #fca5a5; /* war #dc2626 (Text) */ /* --color-on-accent (#fff Text auf Accent), --brand-rose (Rose), --brand-success * (Grün) bleiben in Dark unverändert lesbar → bewusst KEIN Override. * --brand-navy (gallery.css, Dual bg+text) + --danger-dark/-light (ohne * Fallback, pre-existing) → siehe gallery/website_reports Dark-Overrides. */ } /* System-Modus (theme=system): Pre-Paint-Script setzt data-theme bereits auf * den aufgelösten Wert (dark/designstuuv) → diese Media-Query ist NUR ein * Noscript-Fallback für [data-theme="system"]. Die Dark-Werte werden via * gemeinsamer Selektor-Liste oben mit-getragen, daher hier nur der Verweis- * Selektor (gleiche Deklarationen, DRY über die Selektor-Gruppe). */ @media (prefers-color-scheme: dark) { html[data-theme="system"] { --color-bg: #0f1722; --color-bg-elevated: #1a2531; --color-bg-subtle: #161f29; --color-bg-overlay: rgba(0, 0, 0, 0.62); --color-text: #d4dae1; --color-text-strong: #f3f5f7; --color-text-muted: #98a3af; --color-text-disabled: #687482; --color-heading: #eef2f6; --color-border: rgba(255, 255, 255, 0.11); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.20); --page-title-color: #f3f5f7; --page-subtitle-color: #98a3af; --color-surface-navy-50: #131c25; --color-surface-navy-100: #18222d; --color-surface-navy-150: #1c2733; --color-surface-navy-200: #2a3744; --gray-50: #161f29; --gray-100: #1b2530; --gray-200: #28333f; --gray-300: #38454f; --gray-400: #828d9b; --gray-500: #98a3af; --gray-600: #b3bcc6; --gray-700: #d4dae1; --gray-800: #e8ebef; --gray-900: #f3f5f7; --color-neutral-25: #18222d; --color-neutral-50: #161f29; --color-neutral-100: #1b2530; --color-neutral-150: #222d39; --color-neutral-700: #e8ebef; --color-black: #f3f5f7; --color-success-soft: rgba(16,185,129,0.18); --color-success-strong: #6ee7b7; --color-warning-soft: rgba(245,158,11,0.18); --color-warning-strong: #fcd34d; --color-danger-soft: rgba(239,68,68,0.18); --color-danger-strong: #fca5a5; --color-info-soft: rgba(59,130,246,0.18); --color-info-strong: #93c5fd; --sidebar-bg: #141d27; --topbar-pill-bg: #1b2530; --topbar-icon-bg: #18222d; --topbar-on-light: #e8ebef; --topbar-seg-muted: #98a3af; --bento-surface-soft: #18222d; --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-sm: 0 2px 4px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.32); --shadow-lg: 0 8px 24px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.36); --shadow-xl: 0 16px 48px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.40); } }