/* =====================================================
IT-CCS — Design Tokens
=====================================================
Erstellt: 2026-04-28
Quellen: _designs/BrandGuide.pdf (autoritativ Brand + Typo)
_context/redesign/01_token_inventory.md (Skalen + Cluster)
assets/css/style.css :root (bestehende Tokens, kompatibel)
Naming: Variante B — T-Shirt-Groessen (xs/sm/md/lg/xl/2xl/3xl)
Dark-Mode: ja, ueber :root[data-theme="dark"]. Semantische Tokens
werden ueberschrieben. Brand-Identitaet bleibt
theme-stabil (Logo, --color-accent), aber Brand-
Tokens die als Text verwendet werden (--color-primary,
--color-error, --link-color) werden im Dark-Theme
aufgehellt damit WCAG-AA gewaehrleistet bleibt
(siehe Block 3-Override unten und _context/redesign/
06_wcag_audit.md Frage 4 / Variante A).
STATUS: Definition only — diese Datei ist NICHT in header.php
eingebunden. Aktivierung + Migration sind separate Schritte.
--------------------------------------------------------
Inter-Font (BrandGuide-Pflicht) — Einbindung in spaeterem Schritt:
1) WOFF2-Files nach assets/fonts/inter/ ablegen
(latin-Subset reicht fuer DE; Weights 400/500/600/700)
2) @font-face-Definitionen in eigene Datei
assets/css/fonts.css schreiben
3) fonts.css und design-tokens.css in includes/header.php
VOR style.css einbinden
--------------------------------------------------------
WAS HIER NICHT DEFINIERT IST (bewusst):
- Status-Farben (Admin-konfigurierbar zur Laufzeit ueber
--status-color)
- Komponenten-Tokens (--btn-*, --card-*) — kommt erst nach
der Token-Migration
- Vergessene Hex-Werte aus dem Bestand (#1abc9c, #2ecc71, #e74c3c,
#2c3e50 als Brand-Doppel) — werden in der Migration einzeln
entschieden, NICHT hier doppelt gefuehrt
Migrations-Hinweis: Bestehende Tokens in style.css :root (Z. 29-50)
bleiben kompatibel — Brand-Farben sind 1:1 identisch mit BrandGuide.
Die Migration wird die alten Tokens entweder durch die neuen ersetzen
oder als Aliase belassen.
===================================================== */
:root {
/* Native Form-Controls (time/date-Picker, Scrollbars, Auto-Fill,
Default-Buttons) folgen dem aktiven Theme. Im Dark-Mode wird
--color-scheme: dark gesetzt (siehe :root[data-theme="dark"] unten),
damit z.B. das Uhr-Symbol in nicht schwarz
auf dunklem BG verschwindet. */
color-scheme: light;
/* ==================================================
1. BRAND-FARBEN (autoritativ aus BrandGuide.pdf)
Bleiben in Light- UND Dark-Theme gleich.
================================================== */
--color-primary: #2176D0;
--color-accent: #4045E5;
--color-success: #84D369;
--color-warning: #F5A623;
--color-error: #D0021B;
--color-dark: #121210;
--color-light: #FFFFFF;
/* Hover-Varianten (uebernommen aus style.css :root) */
--color-primary-hover: #1a5fb4;
--color-accent-hover: #3438c4;
--color-success-hover: #6ab84f;
--color-error-hover: #a80016;
/* Theme-stabile Spezialfarben (RM-45 Phase 2)
Bewusst eigene Tokens statt Wiederverwendung von Brand-Tokens —
dienen technisch-funktionalen Zwecken, nicht Brand-Identitaet.
Loader-Track: Hellgrau-Cool fuer Spinner-Ring (kontrastiert mit
brand-blau-Mitte, gleicher Grauton in Light + Dark).
Text-on-Nav: Header-Text-Farbe auf --bg-nav (theme-stabil weil
Header in Light + Dark immer dunkel-blau ist). 6.27:1 vs.
Dark-Variante des bg-nav (RM-44 Cluster 2). */
--color-loader-track: #d0d6dc;
--color-text-on-nav: #ecf0f1;
--color-text-on-nav-soft: rgba(255, 255, 255, 0.7);
/* Maintenance-Identitaet (RM-22, theme-stabil)
Bewusst KEIN ganzer Custom-Block tokenisiert — die geschlossene
Schwarz-Gelb-Streifen-Optik bleibt als Warning-Affordance erhalten.
Nur die wiederverwendeten Hauptfarben als Tokens fuer Wartbarkeit.
Konsolidiert 30.04.2026: Warnbalken-Streifen + Login-Wartungs-
hinweis-Border nutzen denselben Gelbton (--color-maintenance-yellow,
#ffd400). Frueher waren das 2 verschiedene Werte (#ffd400 vs #f0c419).
Brand-Differenz zu --color-warning (#F5A623) bleibt bewusst — RM-22
Maintenance-Identitaet ist intensiver als Brand-Warning-Akzent. */
--color-maintenance-stripe-dark: #111;
--color-maintenance-yellow: #ffd400;
/* Git-Diff-Konvention (RM-45 Phase 3 Gruppe B)
Bewusst NICHT --color-success/--color-error, weil Diff-Semantik
ein eigenes Affordance-Pattern ist (Hinzufuegen/Loeschen, nicht
Erfolg/Fehler). User-Spec wollte theme-stabil, aber WCAG-Check
hat ergeben dass theme-stabile Werte AA-konform nicht funktionieren
(#27ae60 schlaegt Light AA-Body, #c0392b schlaegt Dark AA-Body).
Loesung: theme-aware mit Diff-Konvention erhalten, Helligkeit pro
Theme an AA angepasst. Light-Werte = klassische GitHub-Diff-Toene
in dunkler Variante; Dark-Werte = aufgehellt.
30.04.2026 eingefuehrt fuer admin/audit_log. */
--color-diff-add: #1a7438; /* Light: 5.51:1 auf #fff = AA pass */
--color-diff-del: #c0392b; /* Light: 5.31:1 auf #fff = AA pass */
/* Link-Farben (App-Default fuer alle -Elemente).
Wichtig: :visited braucht expliziten Farbwert — Browser ignorieren
Privacy-bedingt inherit/currentColor und fallen auf User-Agent-
Default-Lila zurueck. Daher fester Wert via Token. */
--link-color: var(--color-accent); /* #4045E5 */
--link-color-hover: var(--color-accent-hover); /* #3438c4 */
/* Soft-Varianten fuer outline-style Buttons (.btn-save, .btn-danger):
Heller Hintergrund + etwas dunklere Outline. Beim Hover wechselt
der Hintergrund auf die Outline-Farbe.
Beim Gruen sind Brand-Werte (#84D369 / #6ab84f) als Text-Farbe zu
hell — daher eigene "dark"-Variante mit klarem Kontrast. Beim
Rot reicht das Brand-Rot (#D0021B) als Text auf hellrosa direkt. */
--color-success-soft: #d4edda; /* hellgruen — bg im Normalzustand */
--color-success-soft-border: #a3d3ad; /* mittelgruen — outline + hover-bg */
--color-success-dark: #2d6e0f; /* dunkelgruen — Text auf success-soft (WCAG AAA) */
--color-error-soft: #fbeaea; /* hellrosa — bg im Normalzustand */
--color-error-soft-border: #f5c6cb; /* rosa — outline + hover-bg */
/* --color-warning-soft / -dark sind aktuell vorbereitet aber im
Code unbenutzt (Stand 29.04.2026) — analog zu --text-inverse.
Vorgesehenes Pattern: Soft-Button mit `background: var(--color-warning-soft)`
und `color: var(--color-warning-dark)` (analog success-soft/-dark).
--color-warning bleibt fuer dekorative Border (z.B. .info-box-warning,
Brand-Konsistenz mit success/error-Boxen) und Warnbalken-Hintergruende. */
--color-warning-soft: #fff3df; /* hellgelb-creme — bg fuer Warning-Soft-Buttons */
--color-warning-soft-border: #f5d090; /* mid-orange — Outline + Hover-bg (RM-45 Phase 4) */
--color-warning-dark: #8a5d10; /* dunkelorange — Text auf weiss (5.75:1) und auf warning-soft (5.74:1) */
/* Info-Familie (RM-45 Phase 4 — eingefuehrt 30.04.2026)
Hellblau-Pastell als Brand-Akzent fuer "Information"-Affordance,
analog zu success/error/warning. Theme-stabil (kein Dark-Override),
--color-info-dark ist Color-Pendant fuer Kontrast-Sicherheit auch
im Dark-Theme.
WCAG: --color-info-dark #1a5276 auf --color-info-soft #e8f4fd:
~6.78:1 = AA pass (auch AAA fuer non-text). */
--color-info-soft: #e8f4fd; /* hellblau-pastell */
--color-info-soft-border: #c4dcf4; /* mid-blue — Outline + Hover-bg */
--color-info-dark: #1a5276; /* dunkelblau — Text auf info-soft */
/* Neutral-Familie (eingefuehrt 02.05.2026)
Pastell-Grau analog zu success/warning/error/info — fuer Status-
Pills, deren Zustand semantisch "neutral" ist (z.B. Vertrag im
Entwurfs-Status). Theme-aware (Dark-Override unten).
WCAG (Body-Text 4.5:1):
--color-neutral-dark #4a5560 auf --color-neutral-soft #eef0f3:
~7.5:1 = AAA. */
--color-neutral-soft: #eef0f3; /* hellgrau-pastell — bg fuer Status-Pills */
--color-neutral-soft-border: #d4d8de; /* mid-grau — Outline */
--color-neutral-dark: #4a5560; /* dunkelgrau — Text auf neutral-soft */
/* HINWEIS — kein --color-error-dark.
--color-error ist bereits theme-aware (Light #D0021B / Dark #FF5959)
und erreicht in beiden Themes AA-Kontrast gegen die jeweilige
--color-error-soft-Variante (Light #fbeaea: 5.04:1; Dark #3A1E1E: 5.06:1).
Stellen die ein Color-Pendant zu error-soft brauchen nutzen direkt
var(--color-error). Asymmetrie zu success/warning bewusst. */
/* ==================================================
2. SURFACE-FARBEN
Sekundaere Brand-Surfaces, die ausserhalb der Brand-
Hauptpalette gebraucht werden (z.B. Logo-Hintergrund,
dunkle Header). NICHT als zweites Primary missbrauchen.
================================================== */
--surface-dark: #2c3e50; /* fuer dunkle Header / Logo-BG-Style */
/* ==================================================
3. SEMANTISCHE FARB-TOKENS (Light-Theme)
Werden im Dark-Theme komplett ueberschrieben.
Ueber diese Tokens findet die Theme-Trennung statt —
in Komponenten-CSS NIE direkt #fff / #888 etc. nutzen.
================================================== */
/* Hintergruende */
--bg-page: #fafbfc; /* Body / Page-Background */
--bg-card: #ffffff; /* Cards, Boxes, content-box */
--bg-input: #ffffff; /* Form-Controls */
--bg-hover: #f5f5f5; /* Hover-Background fuer Listen-Eintraege */
--bg-table-head: #f4f6f8; /* Tabellenkoepfe */
--bg-table-stripe: #fafafa; /* Zebra / Hover-Stripe */
--bg-overlay: rgba(0, 0, 0, 0.5); /* Modal/Dialog-Backdrop */
--bg-tile-soft: #f0f4f8; /* Pastell-Hellblau fuer Launchpad-Tile-
Decoration (Icon-Wrapper, KPI-Badge).
Brand-Akzent ohne starke Farbgewalt.
RM-44 Cluster 3 DF-6. */
--bg-internal-notes: color-mix(in srgb, var(--color-error) 10%, transparent);
/* Sanfte rosa-Faerbung fuer interne
Notizen-Boxen (.internal-notes-box,
.ticket-desc-row-internal). Light:
10% auf weissem Card-BG. Dark:
siehe :root[data-theme="dark"] (25%). */
/* RM-53: Faelligkeits-Tints fuer Listen-/Karten-/Header-Einfaerbung.
Siehe getDueState() in config/due_date.php — Klassen
row-due-warning/-critical, wt-due-warning/-critical, content-box-due-*
greifen darauf zu. */
--bg-due-warning: color-mix(in srgb, var(--color-warning) 12%, transparent);
--bg-due-critical: color-mix(in srgb, var(--color-error) 12%, transparent);
--bg-focus-page: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
/* Page-BG fuer .focus-mode (auth/twofa_setup,
alle $focusMode=true Pages) — kein Card-/
Hover-Token weil Gradient mit eigener Optik. */
--bg-nav: #1f6cc4; /* Header-Bar (.main-nav, .focus-header,
.widget-header, Slide-Transition-Backdrop).
Light = Brand-Primary, Dark = gedaempfter
Brand-Blau.
13.05.2026 abends (Path X WCAG-Sanierung):
Light von #2176D0 -> #1f6cc4 verschoben.
Kontrast Text #ecf0f1 darauf: 4.11:1
(FAIL) -> 4.56:1 (AA pass). Hue bleibt
in der Brand-Familie (~210°), visuell
minimal dunkler. */
--bg-avatar-fallback: #0f172a; /* Avatar-Bubble-BG wenn kein Profilbild vorliegt.
13.05.2026: vorher --color-accent (#4045E5
Indigo) — verschwand optisch im Brand-Blau-
Top-Nav (Bubble vs. Nav-BG Light 1.34:1,
Dark 1.08:1). Jetzt theme-aware Slate, sticht
in beiden Themes klar gegen die Top-Nav-BG
heraus. Light: very-dark-slate, vs.
--bg-nav Light = 3.23:1 UI. */
--text-avatar-fallback: #ffffff; /* Initialen auf dem Avatar-BG (theme-aware). */
--bg-nav-secondary: #ffffff; /* Sub-Nav-Surface (.workspace-subnav) — RM-62
Follow-Up: eigene Surface zwischen Top-Nav
und CCB, damit die Workspace-Routing-Ebene
visuell als Card erscheint und nicht mit
der CCB-Filter-Bar verschmilzt. Light = weiss
wie Card; Dark eigener Tonwert (#252525)
heller als CCB (#1f1f1f), aber dunkler als
Body-Hover (#2a2a2a). NICHT --bg-card reusen
— im Dark waere bg-card dunkler als der
Page-Hintergrund, was die Hierarchie
invertiert. */
--bg-nav-hover: #185fa3; /* Hover-BG fuer .workspace-tab in der Top-Nav.
13.05.2026 abends: von #1d6abe -> #185fa3
nachgezogen, weil nach Path X (--bg-nav Light
auf #1f6cc4) der Hover-Sprung zu klein war
(nur 6 Hex-Pixel Differenz, Hover-Affordance
im Light kaum wahrnehmbar). Jetzt klare Stufe
zwischen Default (L=0.15) und Active (L=0.08):
Hover L=0.113, ΔL = 0.037 sichtbar. Kontrast
Text #ecf0f1 darauf: 5.60:1 AA pass. Bleibt
in Brand-Hue (~210°). */
--bg-nav-active: #155189; /* Active-BG fuer .workspace-tab.active — tiefes
Brand-Blau, +Sprung 2.40 vs. --bg-nav (#2176D0).
Text #ecf0f1 darauf = ~7.0:1 (AA+). Ersetzt
--color-accent als Tab-Active-BG, weil dieser
Indigo (Hue 237°) eine Hue-Familie weg von
Brand-Blau (210°) ist und visuell „springt".
--color-accent bleibt erhalten als 3px-Indikator-
Strich (Brand-Tropfen, BrandGuide-konform). */
--nav-content-offset: 71px; /* Linker Inset fuer .workspace-subnav, damit
der erste Sub-Nav-Item-Text auf gleicher
x-Position startet wie das Icon des ersten
Workspace-Tabs in der Top-Nav. Berechnung:
space-xl (20) + Logo (45) + Logo-margin-right
space-sm (8) + nav-left-gap (2) + tab-padding-left
space-sm-plus (10) - subnav-item-padding-left
space-md-plus (14) = 71px.
Aktualisiert 13.05.2026 nach Vereinheitlichung
Frontend/Admin-Sub-Nav: Item-Padding-Left
12->14, daher Inset 73->71. */
/* Text-Hierarchie
--text-muted und --text-subtle sind WCAG-AA Body-konform
(#707070 = 5.05:1, #767676 = 4.54:1 auf #ffffff). Vorher
waren #888 / #aaa Body-FAIL. Stand: WCAG-Audit 29.04.2026,
_context/redesign/06_wcag_audit.md Sektion 6.1. */
--text-primary: #121210; /* Body-Text */
--text-secondary: #333333; /* Sub-Text */
--text-muted: #707070; /* Labels, Hints (5.05:1 PASS) */
--text-subtle: #767676; /* Empty-States, dekorative Tags, Disabled (4.54:1 PASS) */
--text-inverse: #ffffff; /* Text auf dunklen Surfaces (z.B. --surface-dark, dark-Buttons).
WICHTIG: NICHT auf --bg-card verwenden — bg-card ist im Dark-
Theme dunkel, und im Dark-Block bekommt --text-inverse den
Wert #121210 (= dunkel auf dunkel = unsichtbar, 1.08:1).
Korrekt: nur auf Surfaces, die in BEIDEN Themes dunkel
sind (--surface-dark bleibt theme-stabil). */
/* Borders & Trenner */
--border-color: #dddddd; /* Standard-Border */
--border-light: #eeeeee; /* Subtile Trenner */
--border-strong: #cccccc; /* Markante Border (Disabled-Inputs) */
/* Shadows / Overlays */
--shadow-color: rgba(0, 0, 0, 0.1); /* Basis-Schatten-RGBA, fuer Custom-Shadows */
/* Overlay-/Backdrop-Familie (RM-45 Phase 2)
--bg-overlay bleibt Default fuer Modal-Backdrops (rgba(0,0,0,0.5))
--bg-overlay-soft subtile Hover-Tints / dezente Borders (z.B.
input-clear-btn:hover, status-badge-border)
--bg-overlay-light helle Backdrops (fullscreen-overlay,
widget-overlay) — Light = weiss-translucent,
Dark = schwarz-translucent
--bg-overlay-medium dezenter Backdrop (component-dialog)
--border-status-badge subtile Status-Badge-Border, vorher manuell
Light/Dark-Override im Komponenten-CSS */
--bg-overlay-soft: rgba(0, 0, 0, 0.08);
--bg-overlay-light: rgba(255, 255, 255, 0.7);
--bg-overlay-medium: rgba(0, 0, 0, 0.4);
--border-status-badge: rgba(0, 0, 0, 0.15);
/* ==================================================
4. TYPOGRAPHIE
Inter als Primaerschrift (BrandGuide). Self-hosted, KEIN
Google-Fonts-CDN (DSGVO + SaaS-Tauglichkeit).
Fallback-Stack: System-UI, damit ohne geladenes Inter die
Optik nicht voellig verfaellt.
================================================== */
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--font-family-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono',
'Roboto Mono', Consolas, 'Courier New', monospace;
/* Font-Sizes (8 Stufen — abgeleitet aus Inventur Top-Frequenzen) */
--font-size-xs: 11px; /* Mini, Tags, Badges */
--font-size-sm: 12px; /* Sub-Hint, kleine Labels */
--font-size-md: 13px; /* Hint-Standard, secondary text */
--font-size-base: 14px; /* Projekt-Standard (CLAUDE.md) */
--font-size-lg: 16px; /* Section-Subtitle */
--font-size-xl: 18px; /* h3 / Mid-Heading */
--font-size-2xl: 22px; /* h2 */
--font-size-3xl: 32px; /* h1 / Page-Title */
/* Font-Weights (4 Stufen reichen — kein "bold" als Keyword) */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600; /* Top-Wert im Bestand (61x) */
--font-weight-bold: 700;
/* Line-Heights (alle unitless ausser explizit dokumentiert) */
--line-height-tight: 1.2; /* Heading-eng */
--line-height-snug: 1.3; /* Heading-normal */
--line-height-base: 1.4; /* Body-Default */
--line-height-relaxed: 1.5; /* lange Texte */
--line-height-loose: 1.6; /* Beschreibungen */
/* ==================================================
5. SPACING (T-Shirt + Bridge-Tokens)
Hauptskala 7 Stufen + 3 Bridges (xs-plus / sm-plus /
md-plus) fuer gewachsene Zwischenwerte (6/10/14 px),
die im Bestand sehr haeufig sind. Bei NEUEM Code nur die
T-Shirt-Stufen verwenden — Bridges sind Migrations-Krueck.
================================================== */
--space-2xs: 2px; /* Mini-Paddings (Pills, Border-Adjustments) */
--space-xs: 4px; /* Default-Mini */
--space-xs-plus: 6px; /* Bridge — Bestand 70+ Vorkommen */
--space-sm: 8px; /* Default-Klein (.user-form-control padding-y) */
--space-sm-plus: 10px; /* Bridge — Bestand 100+ Vorkommen */
--space-md: 12px; /* Default-Mittel */
--space-md-plus: 14px; /* Bridge — Bestand 50+ Vorkommen */
--space-lg: 16px; /* Default-Gross (Container-Innen) */
--space-lg-plus: 18px; /* Bridge — Bestand 32 Vorkommen (Etappe 2 Vorbereitung) */
--space-xl: 20px; /* Container-Padding */
--space-2xl: 24px; /* Section-Spacing */
--space-3xl-minus: 28px; /* Bridge — Bestand 13 Vorkommen (Etappe 2 Vorbereitung) */
--space-3xl: 32px; /* Block-Trennung */
--space-4xl: 40px; /* Empty-States, grosse Header */
/* ==================================================
6. BORDER-RADIUS
Aus Inventur: 6px ist Top (57x), 4px folgt (39x), 8px
dritter (22x). Realitaet hat das alte --radius:8px ueberholt.
--radius-md (6px) wird neuer Default fuer Standard-Boxen.
--radius bleibt aus Kompatibilitaet (=8px wie bisher).
================================================== */
--radius-sm: 4px; /* Pills, Buttons, kleine Tags */
--radius-md: 6px; /* Cards, Inputs (neuer Default) */
--radius-lg: 8px; /* grosse Container, Dialoge */
--radius-xl: 12px; /* Hero-Cards, prominente Boxen */
--radius-full: 50%; /* Avatare, runde Icons */
/* --radius Legacy-Alias entfernt am 28.04.2026 (Etappe 3) —
alle Verwendungen sind auf --radius-lg migriert. */
/* ==================================================
7. BORDERS
Default 1px solid, 2px fuer Focus / aktive States.
Werte ab 3px sind Sonderfaelle (Status-Bars in Karten,
Warnbalken-Streifen) — kein Token noetig.
================================================== */
--border-width: 1px;
--border-width-thick: 2px;
/* ==================================================
8. SHADOWS (4 Stufen)
Aus 20+ Variationen im Bestand zu 4 Tokens reduziert.
Bei Migration: minimale optische Abweichungen werden
bewusst akzeptiert — Konsistenz schlaegt 100%-Treue.
================================================== */
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05); /* Cards, content-box */
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); /* Dropdowns, Hover */
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2); /* Modals, Dialoge */
--shadow-focus: 0 0 0 3px rgba(64, 69, 229, 0.12); /* Focus-Ring (Accent @ 12%) */
/* ==================================================
9. Z-INDEX (5-Schichten-Skala)
Ersetzt das Bestand-Chaos (0/1/10/50/100/101/120/900/
1000/1100/9999). Komponenten-CSS soll AUSSCHLIESSLICH
diese Tokens nutzen, keine harten Zahlen mehr.
================================================== */
--z-base: 1; /* Lokaler Stacking-Context */
--z-dropdown: 100; /* Selects, Dropdowns */
--z-sticky: 200; /* Sticky-Header, Maintenance-Warnbalken */
--z-modal: 1000; /* Dialoge, Overlays */
--z-tooltip: 9999; /* Tooltips, Hover-Hints (immer ganz oben) */
/* ==================================================
10. TRANSITIONS
Aus 8 Dauer-Werten im Bestand zu 3 Tokens kondensiert.
Werte 0.1s/0.12s gehen in --transition-fast auf,
0.3s in --transition-base, 0.4s in --transition-slow.
--ease-standard fuer Material-style Easing-Kurven
(Slider, Toggle, prominente Animationen).
================================================== */
--transition-fast: 0.15s ease; /* Hover, Color-Wechsel */
--transition-base: 0.25s ease; /* Layout, Resize */
--transition-slow: 0.4s ease; /* Modal-Open, Slide-Animationen */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
/* ==================================================
11. BREAKPOINTS (Doku-Werte fuer JS / Container-Queries)
Aktualisiert RM-49a (02.05.2026): 6-Stufen-Skala
passend zu _context/redesign/09_responsive_audit.md
Sektion 4. Werte sind Untergrenzen des jeweiligen
Bereichs (mobile-first Denken). CSS-@media-Werte
muessen 1:1 hierzu passen — Custom-Properties sind in
@media nicht nutzbar, daher hardcoded in Modul-CSS.
Konvention: @media (max-width: - 1px) fuer
max-width-Queries.
================================================== */
--bp-xs: 0; /* < 600 — Mobile, out-of-scope */
--bp-s: 600px; /* Surface Hochformat / Smartphone-quer */
--bp-m: 960px; /* Tablet quer / kleines Notebook */
--bp-l: 1440px; /* Standard-Desktop, Soll-Ziel */
--bp-xl: 1920px; /* Full-HD und drueber (Primaerziel) */
--bp-xxl: 2560px; /* WQHD / Ultrawide / 4K */
/* Backwards-compat-Aliase (alte Doku-Tokens, kein
var(--bp-...) im Repo, aber falls extern referenziert). */
--bp-sm: var(--bp-s);
--bp-md: var(--bp-m);
--bp-lg: var(--bp-l);
/* ==================================================
12. CONTAINER-BREITEN (RM-49a, 02.05.2026)
Zentrale Tokens fuer alle Page-Container statt
hardcoded 1400/1500/1600px-Streuung. Werte aus
_context/redesign/09_responsive_audit.md Sektion 4.
Migration konservativ: --container-max-default trifft
genau den heutigen 1400er-Default (Customers, Dashboard,
Tickets), --container-max-wide den 1600er. RM-49b kann
pro Modul auf wide oder xwide hochstufen, ohne in
Modul-CSS Hex-Pixel zu jagen.
Container schrumpfen automatisch ueber width: 100%
auf schmalen Viewports. Ab >= --bp-xxl wird der
Default NICHT auf xwide gezogen — Auge soll nicht
ueber halbe Meter wandern muessen.
================================================== */
--container-max-narrow: 960px; /* Forms, Profile, Login */
--container-max-default: 1400px; /* Standard fuer Pages (heutiger 1400er) */
--container-max-wide: 1600px; /* Listen mit vielen Spalten (heutiger .page-container-wide) */
--container-max-xwide: 1800px; /* Wide-Screen-Push (RM-49b optional) */
--container-max-admin: 1380px; /* Admin-Layout-Innenteil neben Sidebar */
/* Standard-Side-Padding fuer .container-Helper-Klassen.
Alte Container-Klassen ohne eigenes Padding bleiben
unveraendert — Padding-Migration ist Modul-Pass-Arbeit. */
--container-padding-inline: var(--space-md);
}
/* =====================================================
DARK THEME OVERRIDE
=====================================================
Aktiviert via (Toggle in Profil
oder Header). Brand-Farben aus Block 1 bleiben unveraendert.
Surface-Token --surface-dark bleibt ebenfalls gleich (ist
bewusst dunkel — im Dark-Theme erscheint er weiterhin als
Akzent-Surface, nicht „heller").
Status: konzipiert, noch nicht im UI freigeschaltet.
===================================================== */
:root[data-theme="dark"] {
/* Native Form-Controls auf Dark stellen — siehe Kommentar im :root-Block. */
color-scheme: dark;
/* Hintergruende — invertiert / abgedunkelt */
--bg-page: #0d0d0d;
--bg-card: #1a1a1a;
--bg-input: #242424;
--bg-hover: #2a2a2a;
--bg-table-head: #1f1f1f;
--bg-table-stripe: #161616;
--bg-overlay: rgba(0, 0, 0, 0.7);
--bg-tile-soft: #2A3540; /* gedaempftes Pastell-Hellblau, Brand-Akzent
ohne grelle Insel im Dark-Layout. */
--bg-internal-notes: color-mix(in srgb, var(--color-error) 25%, transparent);
/* Dark-Override: 4% sind auf dunklem
Card-BG nicht sichtbar — 25% sorgt
fuer erkennbaren rosa-Tint, ohne den
Lesefluss zu stoeren. */
/* RM-53 Dark-Override: gleiche Logik wie --bg-internal-notes — niedrige
Prozente sind im Dark-Mode unsichtbar, daher kraeftiger gemischt.
Body-Text bleibt im Vordergrund-Helligkeit klar lesbar. */
--bg-due-warning: color-mix(in srgb, var(--color-warning) 28%, transparent);
--bg-due-critical: color-mix(in srgb, var(--color-error) 28%, transparent);
--bg-focus-page: linear-gradient(180deg, #1a1a1a 0%, #222222 100%);
--bg-nav: #2C5A8C; /* RM-44 Variante α: 6.27:1 vs. Header-Text
#ecf0f1 = WCAG AA. */
--bg-avatar-fallback: #dbe2eb; /* Avatar-Bubble-BG Dark — helles Slate, vs.
--bg-nav Dark (#2C5A8C) = 5.33:1 UI ✓.
Inverse-Pattern zum Light (heller Bubble
auf dunkler Top-Nav, mit dunklem Text). */
--text-avatar-fallback: #0f172a; /* Initialen Dark: very-dark-slate auf hellem
Bubble = 12.9:1 ✓ AAA. */
--bg-nav-secondary: #252525; /* Sub-Nav-Surface Dark — heller als CCB
(#1f1f1f), dunkler als bg-hover (#2a2a2a).
Stufung: Top-Nav blau -> Sub-Nav #252525
-> CCB #1f1f1f -> Body #0d0d0d. Siehe Light-
Block fuer ausfuehrlichen Begruendungs-
Kommentar. */
--bg-nav-hover: #35689E; /* Tab-Hover-BG Dark.
13.05.2026 abends (Path X WCAG-Sanierung):
von #3D7AB8 -> #35689E verschoben. Kontrast
Text #ecf0f1 darauf: 3.91:1 (FAIL) -> 5.04:1
(AA pass). Frueher angenommen 4.55:1 hatte
sich bei Nachrechnung als zu optimistisch
erwiesen. Bleibt in Brand-Hue (~210°). */
--bg-nav-active: #2E70B6; /* Tab-Active-BG Dark.
13.05.2026 abends (Path X WCAG-Sanierung):
von #4D8CCC -> #2E70B6 verschoben. Kontrast
Text #FFFFFF darauf: 3.54:1 (FAIL) -> 5.11:1
(AA pass). Pill wird weniger Cyan-haft, bleibt
aber Brand-Blau. Sprung 1.55 vs --bg-nav
(#2C5A8C, L=0.1002) — gut wahrnehmbar. */
/* Text — invertierte Hierarchie. --text-muted/-subtle haben
hier eigene Werte (Light-Variante #707070/#767676 waere auf
dunklem BG zu dunkel). --text-ghost wurde 29.04.2026 entfernt
und mit --text-subtle zusammengefuehrt. */
--text-primary: #e8e8e8;
--text-secondary: #c0c0c0;
--text-muted: #888888; /* 4.91:1 auf bg-card dark — PASS */
--text-subtle: #6c6c6c; /* 3.31:1 auf bg-card dark — Large-PASS, Body-FAIL (Disabled-Use) */
--text-inverse: #121210; /* Text auf hellen Surfaces im Dark-Theme */
/* Brand-Texte aufgehellt fuer WCAG-AA auf dunklem BG.
--color-accent bleibt theme-stabil (keine Text-Verwendung
die Body-FAIL waere — 6.56:1 auf weiss, OK). Stand:
_context/redesign/06_wcag_audit.md Sektion 6.2, Frage 4
(Variante A). Hover-Werte folgen analog. */
--link-color: #8b8efb; /* 6.10:1 auf bg-card dark */
--color-primary: #66ADF7; /* 7.36:1 auf bg-card dark */
--color-primary-hover: #7CBAF7; /* 8.47:1 — heller fuer Hover-State */
--color-error: #FF5959; /* 5.66:1 auf bg-card dark */
--color-error-hover: #FF7B7B;
/* State-Soft-Variants: gedaempfte Pastell-Werte fuer Save-/Danger-
Buttons im Dark-Mode. Pastell-Charakter erhalten (Affordance-
Indikator gruen=Save, rot=Loeschen), nicht als heller Light-
Pastell-Insel auf dunklem Layout, sondern dunkles Pastell mit
hellerem Brand-Text. RM-44 Cluster 3 DF-1 + DF-2. */
--color-success-soft: #1E3A26; /* dunkles Pastell-Gruen */
--color-success-soft-border: #2D5A3A; /* mittelgruen — Hover-bg */
--color-success-dark: #84D369; /* Brand-Gruen, Text auf success-soft Dark — 7.95:1 = AAA */
--color-error-soft: #3A1E1E; /* dunkles Pastell-Rot */
--color-error-soft-border: #5A2D2D; /* mittelrot — Hover-bg */
/* --color-error als Text auf error-soft Dark: 5.06:1 = AA. */
/* Warning + Info Dark-Override (RM-45 Phase 4 Architektur-Korrektur, 30.04.2026)
Analog zu RM-44 Cluster 3 DF-1/DF-2 Pattern: gedaempft-dunkel-Pastell-BGs
statt heller Insel-Effekte im Dark-Layout, theme-aware Brand-Werte als
Color-Pendants fuer Kontrast-Sicherheit.
WCAG (Body-Text 4.5:1):
--color-warning-dark #F5A623 auf --color-warning-soft #3A2D18: 6.37:1 = AA pass
--color-info-dark #66ADF7 auf --color-info-soft #1A2D3D: 6.18:1 = AA pass
--color-info-dark #66ADF7 auf --color-info-soft-border #1F3D5C: 4.68:1 = AA pass */
--color-warning-soft: #3A2D18; /* dunkel-cream-pastell */
--color-warning-soft-border: #5A4520; /* mid-dark-orange — Hover-bg */
--color-warning-dark: #F5A623; /* Brand-Warning, Text auf warning-soft Dark */
--color-info-soft: #1A2D3D; /* dunkel-blau-pastell */
--color-info-soft-border: #1F3D5C; /* mid-dark-blue — Hover-bg */
/* Neutral-Soft Dark-Override (eingefuehrt 02.05.2026, analog zu
warning/info-Dark-Pattern). Etwas heller als --bg-card (#1a1a1a),
damit Status-Pills sich vom Body abheben.
WCAG (Body-Text 4.5:1):
--color-neutral-dark #c5c9d0 auf --color-neutral-soft #2a2d33:
~7:1 = AAA. */
--color-neutral-soft: #2a2d33; /* dunkles Pastell-Grau */
--color-neutral-soft-border: #454952; /* mid-grau — Outline */
--color-neutral-dark: #c5c9d0; /* helleres Grau, Text auf neutral-soft Dark */
--color-info-dark: #66ADF7; /* Brand-primary-Dark, Text auf info-soft Dark */
/* Borders — gedaempfter im Dark-Theme */
--border-color: #333333;
--border-light: #2a2a2a;
--border-strong: #444444;
/* Shadows — staerker, weil sie auf dunklem BG sonst untergehen */
--shadow-color: rgba(0, 0, 0, 0.6);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
/* --shadow-focus bleibt gleich (Accent-Ring funktioniert in beiden) */
/* Overlay-/Backdrop-Familie Dark-Override (RM-45 Phase 2)
Hover-Tints und subtile Borders invertieren — auf dunklem BG
muss die Aufhellung weisslich sein. --bg-overlay-medium bleibt
schwarz-translucent (Backdrop-Charakter, dunkler-auf-dunkel funktioniert). */
--bg-overlay-soft: rgba(255, 255, 255, 0.08);
--bg-overlay-light: rgba(0, 0, 0, 0.7);
/* --bg-overlay-medium 0.4 bleibt unveraendert */
--border-status-badge: rgba(255, 255, 255, 0.15);
/* Diff-Tokens Dark-Override (RM-45 Phase 3 Gruppe B)
Aufgehellt fuer AA auf bg-card dark (#1a1a1a). */
--color-diff-add: #27ae60; /* Dark: 6.35:1 auf #1a1a1a = AA pass */
--color-diff-del: #FF5959; /* Dark: ~7.2:1 auf #1a1a1a = AA pass (= --color-error Dark-Wert) */
}