/* ============================================================================= Design Tokens — SchuhkartonAgent ============================================================================= 3-Layer-Architektur: 1. Palette (raw scales) → palettes/v3-warm-buetten.css (vor dieser Datei geladen). Tauschbar: andere Palette = andere Hex-Werte unter denselben Variable-Namen (--terracotta-*, --fir-*, --amber-*, --bordeaux-*, --ink-*, --paper-*, --slate-*). 2. Semantic Tokens → diese Datei. Zweck-Aliase wie --color-primary, --color-bg-app, --color-text-primary. Komponenten nutzen ausschließlich diese. 3. Component Tokens → in komponentenspezifischen CSS-Files (pruefung.css, slideover.css etc.). Optionale Feintune-Hebel mit Fallback auf Semantic. Dark-Mode: [data-theme="dark"]-Overrides auf Semantic-Ebene am Ende der Datei. ============================================================================= */ :root { /* ── Nicht-Palette-Primitives (Theme-unabhängig) ─────────────── */ --white: #FFFFFF; /* ── 2. Semantic — Farben (FLEXIBEL) ────────────────────────── */ /* Primary ist jetzt Terrakotta. Blau rutscht auf "Info / Link" runter. */ --color-primary: var(--terracotta-600); --color-primary-hover: var(--terracotta-700); /* Helles Marken-Terrakotta = Farbe des BelegAgent-Logos. --color-brand-logo: für Kontext mit hellem Hintergrund (Header). --color-brand-logo-cta: für „Agent" auf dunklem Ink-CTA (slate-800), braucht terracotta-300 für WCAG-AA-Kontrast. */ --color-brand-logo: var(--terracotta-500); --color-brand-logo-cta: var(--terracotta-300); --color-primary-soft: var(--terracotta-50); /* Sekundär / Link / Info — bewusst entsättigt (Slate), damit Terrakotta als einzige Akzent-Farbe wirkt. Kein Blau im Primary-Kontext. */ --color-link: var(--slate-700); --color-link-hover: var(--slate-900); --color-bg-app: var(--paper-50); /* App-Body — fast weiß, ~= Landing #FBF9F5 */ --color-bg-card: var(--paper-50); /* Cards — gleich wie Body; Kontrast via Border */ --color-bg-paper: var(--paper-50); --color-bg-shell: var(--paper-150); /* App-Shell — warme Stufe dunkler */ --color-bg-zebra: var(--paper-150); /* Zeilen-Wechsel — sichtbarer Streifen auf hellem Body */ --color-bg-input: var(--paper-0); /* Eingabefelder — reines Weiß, klarer Fokus-Anker */ --color-bg-hover: var(--paper-200); /* Mandanten-Identitätsfarben — deterministisch je Mandant (mandant_color_idx). Wiederkehrend als Avatar-Fläche, aktiver Nav-Zustand und Breadcrumb-Streifen. Gesättigt genug zum Unterscheiden, dunkel genug für weiße Initiale. */ --mandant-c0: #b45309; --mandant-c1: #047857; --mandant-c2: #1e3a8a; --mandant-c3: #7c3aed; --mandant-c4: #be185d; --mandant-c5: #0f766e; --mandant-c6: #4d7c0f; --mandant-c7: #b91c1c; /* Aktenblatt (Prüfungs-Flyin) — vergilbtes Ordnerblatt im Apple-pre-2012- Skeuomorphismus. Kein Gelb mehr (damit gelbe Post-it-Notizen auffallen): aged-Cream + Linierung + verblasster Heftrand + Blatt-Kante. */ --color-bg-akte-paper: #ECE6D2; /* vergilbtes Ordnerblatt (aged cream) */ --color-akte-rule: #D8D0B8; /* feine waagerechte Linierung (aged) */ --color-akte-margin: #CCA0A0; /* roter Heftrand (verblasst) */ --color-akte-edge: #D9D0B6; /* Blatt-Kante (Rand) */ --color-postit: #FBEE85; /* Post-it-Gelb (Notizen) */ --color-postit-hi: #FEF7AE; /* heller Glanz oben am Post-it */ --color-bg-ink: var(--slate-900); --color-bg-pill: var(--slate-400); /* Schreibtisch-Pad — helle Tan-/Camel-Lederunterlage. Effekt kommt aus Verlauf + Naht + Schatten (NICHT Dunkelheit), damit die farbigen Ordner kontrastreich draufliegen. */ --color-desk-pad: var(--paper-400); --color-desk-pad-edge: var(--paper-500); --color-desk-pad-stitch: var(--terracotta-800); --color-desk-pad-sheen: var(--paper-200); /* oberer Lichtbogen (Leder-Sheen) */ /* Leder-Pad-Schatten: weicher Aufliege-Schatten + Bevel (Innenschatten unten). */ --shadow-desk-pad: var(--shadow-md), inset 0 -14px 24px -10px rgba(var(--slate-900-rgb), 0.16); /* Endlospapier-Streifen (Kontoauszug-Karte sm-bankauszug) — zartes Mint auf Papier-Ton, Tabellierpapier-Anmutung der Nadeldrucker-Ära. Fir-500-Wash in niedriger Deckkraft statt eigenem Hex-Ton; Dark-Block hebt die Deckkraft leicht an (gleiche Alpha wie die übrigen Fir-Softs im Dark-Mode). */ --color-endlospapier-stripe: rgba(var(--fir-500-rgb), 0.08); /* Beleg-Sticker — drei kräftige Tag-Farben (Rot/Gelb/Blau), bewusst getrennt von den Ordnerfarben. -tint = dezenter Zeilen-Hintergrund in der Prüfung (aus der Sticker-Farbe gemischt, bleibt automatisch synchron). */ --marker-rot: var(--bordeaux-500); --marker-gelb: var(--amber-300); --marker-blau: var(--ordner-blau-body); --marker-rot-tint: color-mix(in srgb, var(--marker-rot) 14%, transparent); --marker-gelb-tint: color-mix(in srgb, var(--marker-gelb) 22%, transparent); --marker-blau-tint: color-mix(in srgb, var(--marker-blau) 15%, transparent); /* Textfarbe auf vollflächigem --marker-gelb (z.B. sm-pill--edited): Amber-300 bleibt in Light UND Dark gleich hell (Marker-Farbe ist theme-unabhängig, siehe oben) — die Schrift muss also ebenfalls fix dunkel bleiben statt mit --color-text-primary zu flippen. Gleiches Muster wie --beleg-typ-eigen-fg. */ --marker-gelb-text: var(--ink-900); /* Lesebändchen-Badge (Buchzeiger): Satin-Glanz + Schlagschatten. */ --color-ribbon-sheen: rgba(255, 255, 255, 0.24); --color-ribbon-shadow: rgba(7, 11, 18, 0.45); /* ── Slideover (Fly-in) — alle Tweak-Hebel an einem Ort ────────────── Layout, Bg, Animation, Header, Grid. Alle als CSS-Custom-Properties so dass eine Anpassung hier sofort greift. slideover.css nutzt diese mit Default-Fallback — Werte hier sind die wirksame Wahrheit. */ --slideover-bg: var(--paper-200); /* Derselbe Grund wie die Spalten der Bank-Worklist: dort liegt dieselbe Arbeit (Beleg links, Buchung rechts) auf --color-bg-app. Das kräftige paper-300 davor las sich als eigene Welt — beim Wechsel zwischen Bank und Prüfliste sprang die Fläche merklich dunkler. Der Dark-Zweig hatte den Angleich schon (Zeile ~977). */ --slideover-body-bg: var(--color-bg-app); --slideover-width: min(960px, 95vw); /* Modal-Slideover */ --slideover-width-modern: min(95vw, 1600px); /* Permanent-Pane (Karton-Detail) */ --slideover-backdrop-bg: var(--color-backdrop); --slideover-backdrop-transition-duration: 0.2s; --slideover-backdrop-transition-ease: ease; --slideover-transition-duration: 0.2s; --slideover-transition-ease: ease; --slideover-header-padding-y: var(--spacing-2); --slideover-header-padding-x: var(--spacing-3); --slideover-header-border-color: var(--color-border); --slideover-grid-template-columns: minmax(380px, 5fr) 4fr; --slideover-grid-gap: var(--spacing-3); /* Toolbar-Akzente für Pruefung — zwei klar unterscheidbare Töne. */ --color-toolbar-warm: var(--terracotta-300); /* Anweisungen-Button (legacy) */ --color-toolbar-warm-hover: var(--terracotta-100); --color-toolbar-cool: var(--slate-300); /* Beleg & Infos-Button */ --color-toolbar-cool-hover: var(--slate-200); /* BelegAgent-CTA: dunkle Tinte, nicht ganz schwarz — Slate-800 wirkt als gewählter Akzent, slate-900 wäre zu hart. Die Fläche ist in BEIDEN Modi dunkel, die Schrift darauf darum immer hell — eigenes Token statt --color-on-accent, das im Dark-Mode für helle Success-/Warning-Flächen auf paper-950 dreht. */ --color-cta-ink-bg: var(--slate-800); --color-cta-ink-bg-hover: var(--slate-700); --color-cta-ink-fg: var(--white); --color-text-primary: var(--ink-800); --color-text-secondary: var(--ink-700); /* Etwas dunkler als slate-600 — bessere Lesbarkeit bei Konto-Namen + Meta-Text. */ --color-text-tertiary: var(--slate-400); /* Drittrangiger Text — Metadaten neben primary/secondary, noch lesbar (AA-Large) */ --color-text-muted: color-mix(in srgb, var(--slate-500) 75%, var(--slate-700)); /* WCAG AA ≥4.5 auf Paper-BG (slate-500 allein = 4.42, knapp drunter) */ --color-text-inverted: var(--white); --color-text-accent: var(--terracotta-600); --color-success: var(--fir-500); --color-success-hover: var(--fir-700); --color-success-soft: var(--fir-100); /* Hintergrund für „erledigt"-Pillen, Toast-Light */ /* Wechsel — eigene Klasse für Alternative-Aktionen, klar getrennt vom Notiz-/OK-Grün. Sky-Blue signalisiert „Switch / Wahlmöglichkeit" ohne in Konflikt mit Rot/Gelb/Grün zu kommen. */ --color-wechsel: var(--ink-400); /* gegroundetes Teal — passt zum warmen Body, statt Neon-500 */ --color-wechsel-soft: var(--ink-50); --color-warning: var(--amber-500); --color-warning-dark: var(--amber-700); /* Mono error-code in Cockpit HINWEIS */ --color-on-warning: var(--slate-900); /* Text auf der kräftigen Warning-Fläche (Statusleiste „wartet") — immer dunkel */ --color-error: var(--bordeaux-500); /* v3: Fehler-Signal aus eigener Hue, nicht Terrakotta */ --color-error-hover: var(--bordeaux-600); --color-error-dark: var(--bordeaux-700); /* Mono error-code in Cockpit FEHLER */ --color-in-progress: var(--ink-500); /* "Auf Akzent" — weiße Schrift auf farbigem Chip/Button. Bleibt in beiden Themes #FFF, weil die Akzent-Flächen (Buttons, Marker, Sidebar-Active) auch im Dark-Mode farbig bleiben. */ --color-on-accent: var(--white); --color-on-primary: var(--white); /* Text auf Primary-Flächen (Buttons) — in Dark hell (Dark-Block), getrennt von on-accent (Success/Warning bleiben hell) */ --color-text-accent-strong: var(--terracotta-900); --color-text-accent-emphasis: var(--terracotta-700); --color-primary-tint: var(--terracotta-100); /* Mid-shade fürs Empfehlungs-Card Inner-Bg */ --color-primary-edge: var(--terracotta-500); /* Akzent-Border, Pfeile */ --color-dev-soft: var(--ink-100); /* Entwickler-/Superadmin-Mode Pillen-Bg */ --color-dev-strong: var(--color-in-progress); /* Entwickler-Mode Pillen-Text */ --color-bu-info-fg: var(--ink-700); /* BU 19 % — gegroundetes Teal, passt zur warmen Palette */ --color-border: var(--slate-300); --color-border-hover: var(--slate-500); --color-border-strong: var(--slate-700); /* Border-Focus — Akzent-Border bei :focus-visible. Ergänzend zu --shadow-focus, wenn ein Element auch die Border-Farbe wechseln soll (Input-Felder, Selects). */ --color-border-focus: var(--color-primary); /* ── Tabellen-Kopfzeilen — heller Warmton, dunkler Text; kein Doppelrand. */ --color-bg-table-header: var(--paper-200); --color-fg-table-header: var(--ink-700); --color-border-table-header: var(--color-border); /* ── Checkbox / Radio (App-weit, Brand-Akzent) ─────────────────── */ --checkbox-size: 16px; --checkbox-accent: var(--color-primary); /* Hint-Klassen — fünf disjunkte Farben für Sachverhalt/Notiz/Regel/ Stammdaten/Warnung. Nur Warnung blockiert den Export; die übrigen vier unterscheiden EXTF-Beleginfo-Verhalten und UX-Bedeutung. */ --color-klasse-warnung: var(--bordeaux-500); /* Warn-FLAECHE (Bandzustand „kein Beleg") — im Light identisch mit dem -soft-Tint der Hint-Boxen. Eigener Name, weil eine grosse Flaeche und eine kleine Hint-Box verschiedene Deckung brauchen: der Dark-Mode setzt hier einen kraeftigeren Wert, s. dort. */ --color-klasse-warnung-flaeche: var(--color-klasse-warnung-soft); --color-klasse-warnung-soft: var(--bordeaux-50); --color-klasse-warnung-text: var(--bordeaux-700); /* Body-Text auf -soft, WCAG AA */ /* Sachverhalt/Stammdaten/Regel teilen sich Grün — differenziert per Icon. Notiz bleibt Orange: Notizen sind Interaktions-/Wiedervorlage-Marker und müssen vom rein-informativen Grün-Cluster optisch absetzen. Warnung bleibt eigener (warmer) Akzent. */ --color-klasse-notiz: var(--amber-400); --color-klasse-notiz-soft: var(--amber-100); --color-klasse-notiz-text: var(--amber-800); /* Gefüllte Notiz-Fläche mit heller Schrift (amber-400 ist zu hell für weiße Schrift): dunkleres Amber für lesbaren Kontrast. */ --color-klasse-notiz-strong: var(--amber-600); --color-klasse-sachverhalt: var(--fir-500); --color-klasse-sachverhalt-soft:var(--fir-100); --color-klasse-sachverhalt-text:var(--fir-700); --color-klasse-regel: var(--fir-500); --color-klasse-regel-soft: var(--fir-100); --color-klasse-regel-text: var(--fir-700); --color-klasse-stammdaten: var(--fir-500); --color-klasse-stammdaten-soft: var(--fir-100); --color-klasse-stammdaten-text: var(--fir-700); /* Vorschlag (Track E, Slice E7): BelegAgent hat etwas gefunden — Entscheid des Users, kein Problem, kein Alarm. Slate statt der Ampelfarben (Warnung=bordeaux, Notiz=amber, Sachverhalt/Regel/Stammdaten=fir, Wechsel=ink-teal) — bewusst neutral. */ --color-klasse-vorschlag: var(--slate-500); --color-klasse-vorschlag-soft: var(--slate-100); --color-klasse-vorschlag-text: var(--slate-700); /* Bank-Zustands-Familie (Prüfliste, .pr-bank-pill) — eigene Leitfarbe, bewusst NICHT aus dem Klassen-Set: ein Bank-Symbol muss als „Bank" erkennbar sein, unabhängig vom Zustand. Rosa = dieselbe Identität wie Bank-Kreis-Ordner/-Banderolen (kreis_vorlagen.py: Bank=rosa). */ --color-bank: var(--ordner-rosa-cap); --color-bank-soft: color-mix(in srgb, var(--ordner-rosa-body) 16%, var(--color-bg-card)); --color-bank-text: color-mix(in srgb, var(--ordner-rosa-cap) 72%, black); /* Textmarker für Feld-Edits (.sm-field-mark) und Evidenz-Fundstellen (Bank↔Beleg-Vergleich) — knalliger Neon-Marker wie die Landing-Beispiele, hellste Amber-Gelbstufe mit hoher Deckung. */ --color-marker: rgba(var(--amber-200-rgb), 0.60); /* Card-Bereiche im Slideover — Edge (Pill-Hintergrund) + Soft (Card-Body). */ --color-card-beleg-edge: var(--ink-700); --color-card-beleg-soft: var(--ink-50); --color-card-zugferd-edge: var(--fir-700); --color-card-zugferd-soft: var(--fir-50); --color-card-kreditor-edge: var(--color-konto-kreditor); --color-card-kreditor-soft: color-mix(in srgb, var(--color-konto-kreditor) 20%, var(--color-bg-card)); /* Konto-Typ-Farben — eine Quelle der Wahrheit für alle Stellen, an denen Personenkonten (Kreditor/Debitor) und Sachkonten unterschieden werden. Genutzt von verwaltung.css (Konten-Liste), pruefung.css (Konto-Spalte in der Buchungssatz-Liste) und allen anderen Domain-Indikatoren. */ /* Kontoart-Paar: warm/kühl statt zwei bunte Hues. Der Kreditor sass auf terracotta-800 und damit in der MARKEN-Familie — dieselbe Hue, die Leitaktionen tragen. Solange Terracotta nur noch am gefuellten Knopf sitzt, ist das Papier-Sepia die einzige warme Reihe ohne Zweitbedeutung: sie traegt sonst Flaechen, nie Signale, und kann deshalb kein Signal ueberschreiben. Bordeaux (Warnung), Amber (Notiz) und Fir (Erfolg) sind belegt, Ink ist beim Debitor. Warm = Geld raus, kuehl = Geld rein. */ --color-konto-debitor: var(--color-in-progress); --color-konto-kreditor: var(--pflaume-600); --color-konto-sachkonto: var(--color-success); /* Status-Paare Fg/Bg — FIX, Repo-Wahrheit. Mappen auf Spec §1b Lifecycle. „Offen" ist der Default-Lebenszustand — neutrales Grau, dezent. KEIN warmer Brand-Ton (die slate-Aliase ziehen sonst in die linen/coffee- Achse, was zu hell-beige wirkt). */ --status-offen-fg: var(--color-text-muted); --status-offen-bg: var(--slate-100); --status-in-analyse-fg: var(--ink-500); --status-in-analyse-bg: var(--ink-100); --status-fertig-fg: var(--fir-700); --status-fertig-bg: var(--fir-100); /* „Exportiert" war im Repo blau — wir nutzen Slate-Dark, um Blau komplett aus dem Primary-Kontext rauszunehmen. Lifecycle-Sinn bleibt: neutral-abgeschlossen statt aktiv-warnend. */ --status-exportiert-fg: var(--slate-700); --status-exportiert-bg: var(--slate-200); --status-geaendert-fg: var(--amber-700); --status-geaendert-bg: var(--amber-100); /* Alias, falls Templates die Compound-Form verwenden (exportiert + geändert). */ --status-exportiert-geaendert-fg: var(--amber-700); --status-exportiert-geaendert-bg: var(--amber-100); /* Alert-Paare Fg/Bg. */ --alert-error-fg: var(--bordeaux-700); --alert-error-bg: var(--bordeaux-50); --alert-warning-fg: var(--amber-700); --alert-warning-bg: var(--amber-100); --alert-success-fg: var(--fir-700); --alert-success-bg: var(--fir-100); --alert-neutral-fg: var(--slate-600); --alert-neutral-bg: var(--paper-100); --alert-info-fg: var(--slate-700); --alert-info-bg: var(--paper-100); --alert-error-border: var(--bordeaux-200); --alert-warning-border: var(--amber-200); --alert-success-border: var(--fir-200); --alert-info-border: var(--slate-300); /* GitHub-Style-Alerts (Doku) — NOTE/TIP/IMPORTANT/WARNING/CAUTION. */ --alert-note-fg: var(--slate-700); --alert-note-bg: var(--paper-100); --alert-note-border: var(--slate-400); --alert-tip-fg: var(--fir-700); --alert-tip-bg: var(--fir-100); --alert-tip-border: var(--fir-500); --alert-important-fg: var(--terracotta-700); --alert-important-bg: var(--terracotta-50); --alert-important-border: var(--terracotta-500); --alert-warning-doku-fg: var(--amber-700); --alert-warning-doku-bg: var(--amber-100); --alert-warning-doku-border: var(--amber-500); --alert-caution-fg: var(--terracotta-700); --alert-caution-bg: var(--terracotta-100); --alert-caution-border: var(--terracotta-600); /* Code-Blöcke und Inline-Code (Doku-spezifisch). */ --color-bg-code: var(--white); --color-bg-code-inline: var(--terracotta-50); /* JSON-/Prompt-Syntaxfarben (Flyin-Entwickler-Modus) — gegen --color-bg-code verifiziert auf WCAG-AA (≥4.5:1), NICHT die generischen Success/Warning/ Wechsel-Tokens direkt nehmen: amber-500 (Warning) und ink-400 (Wechsel) unterschreiten 4.5:1 auf hellem bzw. dunklem Code-Grund. */ --color-code-key: var(--terracotta-600); --color-code-string: var(--fir-500); --color-code-number: var(--amber-600); --color-code-bool: var(--ink-400); /* Layout — Content-Padding (Page-Container-innen). */ --content-padding-x: var(--spacing-6); /* Focus-Ring — Terrakotta statt Blau. */ --shadow-focus: 0 0 0 3px var(--terracotta-100); /* Native-select Custom-Arrow — data-URI mit eingebackener Slate-600-Farbe (slate-600 / #475569). data-URIs können keine CSS-Variablen referenzieren, daher Hex hier hartkodiert; Dark-Mode-Override im [data-theme="dark"]-Block. */ --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ── 2. Semantic — Typografie ───────────────────────────────── */ /* Schriften selbst-gehostet im Repo (siehe fonts.css). Switzer (sans/display) + IBM Plex Mono (Mono) sind die Primärschriften für App und Landing. */ --font-body: "Switzer", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Headline-Familie ist heute identisch zur Body-Familie (Switzer für alles). Wenn das DS später eine eigene Display-Schrift bekommt, hier aufsplitten. */ --font-headline: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ss01 raus: substituiert zero → zero.cv76-4 und ueberschreibt cv76 10. Explizite 1-Werte fuer Browser die "tag" ohne Wert nicht zuverlaessig als "tag" 1 lesen. */ --font-feature-mono: "calt" 1, "tnum" 1, "cv76" 10, "NWID" 1; /* Skala — App (kompakt). */ --font-size-display-sm: 40px; /* Help-Hub-Hero, kleinere Display-Größe */ --font-size-h1: 24px; /* App H1 */ --font-size-h2: 18px; /* App H2 + Landing Trust-Card H3 */ --font-size-h3: 16px; --font-size-body: 12px; /* App-Standard: Text, Eingaben, Hinweise, Tabellen */ --font-size-body-lg: 17px; /* Landing body */ --font-size-label: 14px; /* Feld-/UI-Labels — prominenter Anker über dem Standard */ --font-size-read: 16px; /* Lesetext (Hilfe-Modal): erster Grad über --label, bei dem mehrere Absätze am Stück tragen */ --font-size-hint: 12px; --font-size-xs: 11px; --font-size-2xs: 10px; /* Badges, ds-labeled-card__badge, kleinste lesbare Stufe */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.1; --line-height-snug: 1.2; --line-height-display: 1.2; --line-height-heading: 1.3; --line-height-normal: 1.5; --line-height-code: 1.5; --line-height-relaxed: 1.7; --line-height-body: 1.7; /* ── 2. Semantic — Spacing (4px-Grid, FIX) Zwischenwerte 0-5 / 0-75 / 1-5 / 3-5 sind explizite Stufen für Pill-/ Chip-/Badge-Spacing (2/3/6/14 px) — Standard-Skala bleibt 4-px-basiert, die Zwischenwerte sind nur dort einzusetzen, wo das visuelle Ergebnis es fordert (kompakte Inline-Elemente). Nicht für Sections/Cards/Container. */ --spacing-0: 0; --spacing-0-5: 2px; --spacing-0-75: 3px; --spacing-1: 4px; --spacing-1-5: 6px; --spacing-2: 8px; --spacing-3: 12px; --spacing-3-5: 14px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-24: 96px; --spacing-field: var(--spacing-3); --spacing-card: var(--spacing-5); --spacing-section: var(--spacing-4); --spacing-content: var(--spacing-6); /* ── 2. Semantic — Border-Widths ────────────────────────────── */ --border-width-0: 0; --border-width-1: 1px; --border-width-2: 2px; --border-width-3: 3px; --border-width-5: 5px; /* ── 2. Semantic — Radien ───────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 9999px; /* ── 2. Semantic — Schatten RGB-Channel-Tokens aus der Palette (siehe palettes/) — bei Palette-Swap kommen automatisch die neuen RGB-Werte zum Tragen. */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(var(--slate-900-rgb), 0.05); --shadow-inset-sm: inset 0 1px 3px rgba(var(--slate-900-rgb), 0.05); /* eingelassene Flächen (z.B. Schreibtisch-Pad) */ --shadow-sm: 0 1px 3px rgba(var(--slate-900-rgb), 0.08), 0 1px 2px rgba(var(--slate-900-rgb), 0.04); --shadow-md: 0 4px 6px rgba(var(--slate-900-rgb), 0.07), 0 2px 4px rgba(var(--slate-900-rgb), 0.04); --shadow-lg: 0 10px 15px rgba(var(--slate-900-rgb), 0.08), 0 4px 6px rgba(var(--slate-900-rgb), 0.04); --shadow-xl: 0 20px 25px rgba(var(--slate-900-rgb), 0.10), 0 8px 10px rgba(var(--slate-900-rgb), 0.04); /* Shadow-Rollen — Komponenten wählen über die Rolle, nicht über die Größe. Wechselt zentral wenn das Schatten-Vokabular justiert wird. */ --shadow-card: var(--shadow-sm); /* Statische Karten in der Page-Fläche */ --shadow-form-section: var(--shadow-card); /* Form-Section-Block; zentral abschaltbar auf --shadow-none */ --shadow-modal: var(--shadow-xl); /* Modal-Boxen, große Overlays */ /* ── Pop-Layer-Material ──────────────────────────────────────────────────── Was schwebt (Dropdown, Auswahl-Menü, Mouseover), trägt dieses Material statt der Karten-Fläche; was in der Seite liegt, bleibt Karte. Vorbild ist die native Auswahlliste. Die stapelt drei Schichten, und ein Weichzeichner allein baut nur eine davon nach: Illumination --blur-popover was dahinter liegt, wird Farbfläche Highlight --popover-rim Lichtkante an der Oberkante Shadow --shadow-popover hebt die Ebene von der Seite ab Der Kontrast-Anteil im Weichzeichner ist der eigentliche Hebel: nicht das Verwischen macht die Zeile darunter unlesbar, sondern das Zusammenziehen des Kontrasts. Erst dadurch darf die Fläche so weit aufmachen, ohne dass eine Buchungszeile durchschlägt — Deckung und Glas-Wirkung hängen also nicht am selben Regler. Bewusst NICHT nachgebaut: die Lichtbrechung an der Kante (feDisplacementMap als backdrop-filter). Das kann nur Chromium, das Ergebnis rastert sichtbar, und die Verzerrungs-Map müsste bei jeder Größenänderung neu gebaut werden. Für eine Liste, die hundertmal am Tag über Buchungszeilen aufgeht, ist verzerrte Schrift dahinter der falsche Handel. Ohne @supports-Zweig (s.u.) bleibt die Fläche deckend — ein Browser ohne backdrop-filter bekäme sonst Transparenz OHNE Weichzeichner, und der Text der Tabellenzeile schlüge scharf durch. */ --color-bg-popover: var(--color-bg-card); --blur-popover: none; --popover-rim: rgba(var(--paper-50-rgb), 0.85); --radius-popover: 12px; /* runder als --radius-md; Pop-Layer lesen als Fenster */ --shadow-popover: inset 0 1px 0 var(--popover-rim), 0 12px 32px rgba(var(--slate-900-rgb), 0.13), 0 3px 8px rgba(var(--slate-900-rgb), 0.07); /* Der Schleier hinter Modals und Slideovern. Die Abdunklung trennt, der Weichzeichner sagt zusätzlich „das da hinten ist gerade nicht dran" — die Seite bleibt als Form erkennbar, ohne lesbar zu bleiben und den Blick zurückzuziehen. Bewusst schwächer als am Pop-Layer: hier liegt der ganze Viewport darunter, und der Dialog davor braucht keine Milchglas-Fläche, nur Abstand. Ausschalter wie beim Pop-Layer über den @supports-Zweig weiter unten. */ --color-backdrop: rgba(var(--slate-900-rgb), 0.4); --blur-backdrop: none; /* Scroll-Edge-Schatten — radialer Tint für horizontale Scroll-Container (Lea-Verou-Pattern). Genutzt z.B. an .mandanten-table-scroll, damit auf mobile sichtbar ist „rechts kommt mehr". */ --color-scroll-edge: rgba(var(--slate-900-rgb), 0.12); /* PDF-Viewer Dark-Theme. Hex bewusst hardcoded — Werte müssen zur pdf.js-Toolbar-Chrome passen, die selbst nicht über CSS-Vars erreichbar ist (Iframe-Sandbox). Token-Refit wäre kosmetisch ohne Wirkung. */ --color-pdf-viewer-bg: #525659; --color-pdf-viewer-toolbar: #323639; --color-pdf-viewer-border: #333333; /* ── 2. Semantic — Z-Index (FIX, Repo-Wahrheit) ─────────────── */ --z-base: 1; --z-sticky: 100; --z-dropdown: 200; --z-sidebar: 300; --z-tour: 900; /* Tour-Maske+Popover — bewusst UNTER Slideover/Modal: öffnet der Nutzer einen App-Dialog, gewinnt der automatisch */ --z-slideover: 1000; --z-modal-backdrop: 1020; --z-modal: 1030; --z-tooltip: 1040; /* ueber Modal (1030): ein Mouseover kann auch IM Dialog stehen */ --z-hilfe: 1105; /* Hilfe fragen: über jedem Dialog (Regeln-Modal 1100), Fragen entstehen gerade dort */ --z-toast: 1110; /* ── 2. Semantic — Sizes (FIX, Repo-Wahrheit) ───────────────── */ --size-icon-sm: 16px; --size-icon-lg: 24px; --size-icon-xl: 28px; /* Action-Buttons, Belegtyp-Glyphen, größere Touch-Targets */ /* Component-Heights — bilden die drei Steh-Pattern (kompakt/standard/groß) pro Element. Default ist die ungerade Variante (btn=40, input=28, row=48). -lg/-sm sind opt-in über Modifier-Klassen (.btn-lg, .ds-form-input--sm). -dense für Listenzeilen ist für hochdichte Datentabellen (Konten-Liste). */ --btn-height: 40px; --btn-height-sm: 32px; --btn-height-xs: 24px; --btn-height-lg: 48px; --input-height: 28px; --input-font-size: var(--font-size-body); --table-row-height: 48px; --row-height-dense: 32px; --min-click-area: 40px; --sidebar-width: 240px; --sidebar-width-closed: 56px; /* Sidebar-Link-Typo zum Experimentieren — Schriftgröße und vertikales Padding lassen sich isoliert verstellen ohne die Box-Höhe zu erraten. */ --sidebar-link-font-size: var(--font-size-label); --sidebar-link-padding-y: var(--spacing-2); /* Bleibt eine nackte Zahl, kein calc(): workbench.js liest den Wert mit parseInt, und auf einem calc()-Ausdruck ergibt das NaN. Auf der oeffentlichen Demo schiebt eine sticky Banner-Zeile den Header nach unten — dort rechnet demo_akt_leiste.js die Summe aus und schreibt sie als fertige px-Zahl auf :root, zusammen mit --demo-banner-height. */ --header-height: 56px; /* Sichtbare Fensterhöhe, aus der sich Scrollrahmen ihre Höhe holen. CSS-zoom (Ansichtsgröße) rechnet Viewport-Einheiten NICHT heraus: bei 125 % malt `100dvh` das 1,25-fache der Fensterhöhe (gemessen: Viewport 958 px → 1197 px gemalt), und jede daraus berechnete Höhe läuft unten aus dem Bild. `--ansicht-zoom` setzt der Schalter im Kopf; ohne Zoom ist es 1 und der Wert ist genau `100dvh`. Pixel-Abzüge gehören AUSSERHALB der Division — sie sind schon Layout-px: height: calc(var(--viewport-h) - var(--header-height)); Nicht `calc((100dvh - 56px) / var(--ansicht-zoom))`, das schrumpft den Abzug mit und bleibt zu hoch. */ --ansicht-zoom: 1; --viewport-h: calc(100vh / var(--ansicht-zoom)); --viewport-w: calc(100vw / var(--ansicht-zoom)); /* Zebra-Streifen in der Pruefung-Liste — zentrale Stelle für die Tönung jeder zweiten Zeile. Pending-Band (noch nicht analysiert) hat einen eigenen Wert, damit es sich optisch vom analyzed-Block abhebt. */ --pr-zebra-bg: var(--slate-100); /* ── 3. Component — Container-Widths Drei klar getrennte Page-Breiten — Komponenten wählen die passende Stufe als max-width auf dem Page-Wrapper. NICHT als Input-/Field-Breite nutzen (dafür --field-width-* unten). prose: Reading-Width (Doku, längere Text-Seiten, Help) content: App-Default (Settings-Forms, Listen mit komfortabler Breite) app: Breite Daten-Pages (Pruefung-Liste, Konten-Tabelle) */ --max-width-prose: 720px; --max-width-content: 1080px; --max-width-app: 1280px; /* Vertragsvorschau (legal-doc-sheet) — Default ist A4 (210mm); ab großen Screens darf das Blatt bis hierher wachsen statt schmal zu bleiben. */ --max-width-legal-wide: 1100px; --landing-max-width: 1120px; /* Lese-Zeilenlänge für lange Doku-Artikel (Hilfe): breiter als prose (Tabellen + Code-Blöcke brauchen Luft), schmal genug zum Lesen. Gleicher Wert wie --measure-text der Landing (landing-ds.css). */ --measure-text: 800px; /* ── 3. Component — Field-Widths (Input/Select-max-width) Diskrete Stufen für Form-Felder. Default-Cap der ds-form-input/select-Klasse ist --field-width-lg (480px); Modifier ds-form-input--narrow (12rem) und --medium (320px) reduzieren weiter, --wide hebt den Cap auf (volle Cell- oder Container-Breite). Textareas erben --field-width-xl (640px) als Cap. */ --field-width-inline: 12rem; /* Feld in einer waagerechten Leiste (Filter/Sortierung) */ --field-width-md: 320px; /* Standardname, IBAN */ --field-width-lg: 480px; /* Default-Cap für Single-Line-Inputs */ --field-width-xl: 640px; /* Default-Cap für Textareas */ /* ── 3. Component — Auth-Card-Layout (Login, Invite, Magic-Link) Layout-Breite für Stand-Alone-Auth-Karten ohne App-Shell. Bewusst getrennt von --field-width-* (Input-Caps), damit semantisch klar ist: Card-Breite ≠ Input-Cap. */ --login-card-width: 28rem; /* 448px */ /* ── 3. Component — Help-Page-Layout (eigene Topnav-Welt) Help-Pages haben eine eigene Themen-Leiste unter dem App-Header und eine Inhaltsverzeichnis-Spalte rechts. Wann NICHT verwenden: außerhalb der /app/hilfe-Seiten. */ /* Freiraum von der Fensterkante bis unter die Themen-Leiste: App-Header + Leistenhöhe + Weißraum. Wert für den ersten Anstrich; app_hilfe.html misst die Leiste und schreibt den echten Wert, weil CSS die Höhe eines Geschwister-Elements nicht erfragen kann. Die Summe ist die Höhe, auf der die H1 beim Seitenaufruf steht — ein Ankersprung landet damit gleich hoch. */ --topnav-offset: calc(var(--header-height) + 98px + var(--spacing-8)); --toc-width: 220px; /* Spalte rechts für das Inhaltsverzeichnis */ /* ── 3. Component — Form-Stack-Wide Form-Container-Breite zwischen prose (720) und content (1080) — für komplexere Settings-Forms mit 2-Spalten-Layout. */ --max-width-form-wide: 960px; /* Eine Stufe breiter als form-wide — für datenreiche Sektionen (Tabellen), die auf großen Screens mehr Platz vertragen. Opt-in via .form-section--xwide. */ --max-width-form-xwide: 1320px; /* ── 3. Component — Modal-Widths Zwei Stufen für Modal-Box-Breiten. md = Default (Confirm/Form-Modals), lg = Wide (Kreditor-Stamm, Datev-Mapping-Preview). */ --modal-width-md: 520px; --modal-width-lg: 780px; --modal-width-xl: 1120px; /* read = Hilfe-Modal (Lesetext). Breiter als md, damit Begriffslisten zwei Spalten tragen; die Fließtext-Spalte darin bleibt auf Leseweite gedeckelt (--modal-measure-read), der Rest wird Rand. */ --modal-width-read: 640px; --modal-measure-read: 54ch; /* ── 3. Component — Form-Section (Card-Optik) Zentrale Tweak-Hebel der .form-section-Komponente. Ändern hier wirkt auf alle Settings-/Mandant-Formulare (siehe base.css .form-section). row-gap trennt form-rows untereinander, column-gap die beiden Spalten im 2-Spalten-Grid. */ --form-section-bg: var(--color-bg-zebra); --form-section-border-color: var(--color-border); --form-section-border-width: var(--border-width-1); --form-section-border-radius: var(--radius-md); --form-section-padding: var(--spacing-5); --form-section-row-gap: var(--spacing-4); --form-section-column-gap: var(--spacing-5); --form-section-shadow: var(--shadow-form-section); --form-section-title-spacing: var(--spacing-3); /* ── 3. Component — Settings-List (Lexware/Stripe-Style) Listen-Pattern für Settings-Cards: jede Zeile = ein Setting mit Label+Hint links und Control rechts. Trennlinien zwischen Zeilen. Card-Optik erbt von den --form-section-*-Tokens. */ --setting-row-padding-y: var(--spacing-3); --setting-row-gap: var(--spacing-4); --setting-row-divider: var(--border-width-1) solid var(--color-border); /* iOS-Toggle: Switch-Komponente als Alternative zur Standard-Checkbox. "Aus" greift einen Border-Ton, "An" die Primary-Farbe. */ --toggle-width: 36px; --toggle-height: 20px; --toggle-thumb: 16px; --toggle-bg-off: var(--color-border-strong); --toggle-bg-on: var(--color-primary); --toggle-thumb-bg: var(--white); /* ── 2. Semantic — Transitions ──────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* Aufgehen der Pop-Layer. Eigener Name statt --transition-fast direkt, weil genau hier der Ausschalter für reduzierte Bewegung sitzt: fällt der Wert auf 0s, erscheinen alle sieben Flächen hart — ohne dass die Regel selbst nochmal geschrieben werden muss. Siehe components/popover-motion.css. */ --motion-popover: var(--transition-fast); /* ══════════════════════════════════════════════════════════════ Triage-Prüfungs-Ansicht Drei-Band-Layout Fehler/Hinweis/OK — alle auf Palette-Tokens gebunden, damit ein Palette-Swap die Triage-Welt mitnimmt. ══════════════════════════════════════════════════════════════ */ --triage-fehler-bg: var(--bordeaux-50); --triage-fehler-glyph: var(--bordeaux-500); --triage-hinweis-bg: var(--amber-50); --triage-hinweis-glyph: var(--amber-600); --triage-ok-glyph: var(--fir-600); --triage-row-approved: var(--fir-100); --triage-row-focus: var(--amber-50); --triage-neutral-bg: var(--paper-50); /* ══════════════════════════════════════════════════════════════ Karton-Card — Deckel-Effekt (Handoff §2.5) Warme Beige-Skala — gebunden an paper/amber-Achse, damit eine andere Palette die Karton-Optik mit-transformiert. Shadows nutzen terracotta-600 mit Alpha-Layer für den warmen Brand-Schatten. */ --ordner-lid-bg: var(--paper-300); --ordner-lid-border: var(--paper-500); --ordner-body-border: var(--paper-300); --ordner-stitch: var(--amber-700); --ordner-shadow-inset: rgba(var(--terracotta-600-rgb), 0.08); --ordner-shadow-soft: rgba(var(--terracotta-600-rgb), 0.04); --ordner-shadow-hover: rgba(var(--terracotta-600-rgb), 0.18); /* ── Beleg-Typ-Identitäts-Farben ──────────────────────────────────────── Pro Belegtyp eine Brand-Hauptfarbe (Badge-Bg) + Kontrast-Farbe (Badge-Fg). Diese Tokens sind die Single Source of Truth — alle abgeleiteten Werte (Karton-Card-Soft-Bg, Lid-Deckel-Bg, Lid-Border) referenzieren dieselbe Brand-Achse aus der Ramp. Eine Stufe heller = Soft-Bg auf der Card, eine Stufe tiefer = Lid-Streifen. Konsistenz garantiert. Geplante Erweiterung (Folge-Slice): firm-spezifischer Override per Verwaltungs-UI, der diese Tokens für die jeweilige Firm umsetzt. */ /* Richtungs-Farben = Leitz-Familie der Standard-Kreise (ER=grün, AR=blau, kreis_vorlagen.py): EIN/AUS-Deckel, Typ-Badges und Posteingang-Blenden tragen dieselbe Farbe wie der zugehörige Kreis-Ordner — ein Grün, ein Blau, statt fir/ink daneben. Terracotta bleibt der Brand-/CTA-Achse. */ --beleg-typ-eingang-bg: var(--ordner-gruen-cap); --beleg-typ-eingang-fg: var(--paper-50); --beleg-typ-ausgang-bg: var(--ordner-blau-cap); --beleg-typ-ausgang-fg: var(--paper-50); /* Kasse/Bank (Basiskreis KA/BK, gemischt — keine Richtung) tragen dieselbe Leitz-Familie wie ihr Standard-Kreis-Default (kreis_vorlagen.py: Kasse= orange, Bank=rosa), analog zu Eingang=grün/Ausgang=blau oben. */ --beleg-typ-kasse-bg: var(--ordner-orange-cap); --beleg-typ-kasse-fg: var(--paper-50); --beleg-typ-bank-bg: var(--ordner-rosa-cap); --beleg-typ-bank-fg: var(--paper-50); /* Projekt (rolle='buendel', ansicht=buendel&tag_id=) — dieselbe Violett- Identität wie die Projekt-Banderole (_BUENDEL_FARBE, banderole_farben.py). */ --beleg-typ-projekt-bg: var(--ordner-violett-cap); --beleg-typ-projekt-fg: var(--paper-50); /* Eigene Ordner (individual) — bewusst bunt (helles Gold), klar abgesetzt von den periodischen Typ-Farben. Dunkler Text für Kontrast auf Gold. */ --beleg-typ-eigen-bg: var(--amber-400); --beleg-typ-eigen-fg: var(--ink-900); /* Ungeklärt — gedimmtes Blau mit ausreichend Kontrast (WCAG AA) zum Paper-50-Text. */ --beleg-typ-ungeklaert-bg: var(--ink-600); --beleg-typ-ungeklaert-fg: var(--paper-50); /* Email-Belege landen in der Ungeklärt-Box (kein eigener Belegtyp). */ --beleg-typ-email-bg: var(--ink-600); --beleg-typ-email-fg: var(--paper-50); /* Karton-Card-Hülle pro Belegtyp — abgeleitet aus der Badge-Hauptfarbe. Soft-Bg = -50 (dezente Tönung der Card), Lid-Bg = -200 (Deckelstreifen), Lid-Border = -400 (Trennlinie zum Body). Damit hat die Card visuell dieselbe Identität wie die Badge, nur in heller Variante. */ --ordner-typ-eingang-lid-bg: var(--fir-200); --ordner-typ-eingang-lid-border: var(--fir-500); --ordner-typ-eingang-soft-bg: var(--fir-50); --ordner-typ-ausgang-lid-bg: var(--ink-200); --ordner-typ-ausgang-lid-border: var(--ink-400); --ordner-typ-ausgang-soft-bg: var(--ink-50); /* ── Belegordner (Belegboxen-Regal) — Aktenordner-Rücken im Regal. ────── Kraft-Körper, weißes Etikett, farbiger Typ-Deckel, gestanztes Griffloch, EXPORTIERT-Band. Quartals-Tönung über die Kraft-Skala. */ --belegordner-body-bg: var(--paper-400); --belegordner-q1-bg: var(--kraft-q1); --belegordner-q2-bg: var(--kraft-q2); --belegordner-q3-bg: var(--kraft-q3); --belegordner-q4-bg: var(--kraft-q4); --belegordner-border: var(--paper-600); --belegordner-edge-line: var(--paper-500); --belegordner-label-bg: var(--paper-50); --belegordner-label-border: var(--paper-600); --belegordner-name-color: var(--ink-800); --belegordner-stat-label: var(--ink-800); --belegordner-stat-value: var(--ink-700); --belegordner-stat-dash: var(--paper-600); --belegordner-stat-neu: var(--color-primary); --belegordner-hole-bg: var(--paper-500); --belegordner-hole-border: var(--paper-700); --belegordner-hole-highlight: var(--paper-200); --belegordner-export-bg: var(--fir-100); --belegordner-export-fg: var(--fir-700); /* Rücken-Farbe für Ungeklärt + eigene Ordner — dunkle, satte Typ-Töne (wie klassische farbige Leitz-Rücken). Weißes Etikett + heller Deckel heben sich davon ab. Perioden-Ordner nutzen stattdessen die Quartals-Tönung. */ --belegordner-eigen-soft: var(--amber-700); /* Ungeklärt + Fehler = Blocker, echte Warnung → bordeaux-Rücken (nicht die alte Navy-Tinte), damit „roter Ordner" wörtlich stimmt (Andre, Posteingang- als-Ordner-Spec). */ --belegordner-ungeklaert-soft: var(--bordeaux-700); /* Posteingang-Kreis-Ordner (Eingang/Ausgang/Kasse/Bank/eigene): helles Blau — die Leder-Schreibtisch-Unterlage ist hellbraun/tan (--color-desk-pad), ein braun/kraft-getönter Körper verschwindet dort im Hintergrund (Andre, Live-Check). Bewusst das HELLERE „hellblau"-Ordnerfarbe (nicht das dunklere --ordner-blau-body der Ausgang-Banderole) — Körper und AR- Banderole bleiben so unterscheidbar, kein Verschwimmen. */ --belegordner-posteingang-soft: var(--ordner-hellblau-body); /* Jahres-Summe (Ganzjahres-Ordner): dunkelgrauer Rücken, hebt sich von den Perioden ab. */ --belegordner-jahr-soft: var(--slate-700); /* Typ-Deckel spiegeln die Belegtyp-Badges (eine Identität). */ --belegordner-typ-ein-bg: var(--beleg-typ-eingang-bg); --belegordner-typ-aus-bg: var(--beleg-typ-ausgang-bg); /* Eigen-Ordner ohne Kreis → graue Banderole; Ungeklärt/Posteingang → rot. */ --belegordner-typ-eigen-bg: var(--ordnerfarbe-grau-cap); --belegordner-typ-ungeklaert-bg: var(--ordnerfarbe-rot-cap); --belegordner-typ-fg: var(--paper-50); --belegordner-shadow: 0 6px 16px rgba(var(--slate-900-rgb), 0.18); --belegordner-shadow-hover: 0 14px 30px rgba(var(--slate-900-rgb), 0.28); --belegordner-bevel-light: rgba(255, 255, 255, 0.16); --belegordner-bevel-shadow: rgba(var(--slate-900-rgb), 0.16); /* Schuhkarton (kind='karton') — Kraft-Box-Silhouette, aus derselben Kraft- Familie wie der Schreibtisch-Pad (paper-400/500), damit sie farblich passt. Korpus kraft-q2, Deckel + Falzecken eine Stufe dunkler (kraft-q3) für Tiefe, Rand paper-700 (kräftiger Kontrast auf dem dunkleren Kraft-Korpus, analog zum paper-600-Rand der helleren Aktenordner). Etikett = Ordner- Etikett-Tokens (belegordner-label-*), damit Karton + Ordner eine Familie bilden. „Neuer Karton"-Ghostform: Paper-Hintergrund mit Kraft-Bordüre. */ --karton-body-bg: var(--kraft-q2); --karton-body-bg-hover: var(--kraft-q1); --karton-flap-bg: var(--kraft-q3); --karton-lid-bg: var(--kraft-q3); --karton-lid-bg-hover: var(--kraft-q2); --karton-slot-bg: var(--kraft-q3); --karton-line: var(--paper-700); --karton-new-body-bg: var(--paper-200); --karton-new-lid-bg: var(--paper-300); --karton-new-border: var(--paper-500); --karton-text-color: var(--ink-900); --karton-subtext-color: var(--ink-700); --karton-icon-color: var(--ink-600); --karton-header-bg: var(--paper-100); /* Posteingang-Briefkorb (Büro-Schreibtisch) — gleiche Kraft-Familie wie der Karton, damit Korb + Karton + Desk-Pad eine Materialwelt bilden. Die Frontblende trägt die Belegtyp-Farbe (Komponente überschreibt sie). */ --pe-korb-wanne-bg: var(--kraft-q2); --pe-korb-front-bg: var(--kraft-q3); --pe-korb-griff-bg: var(--kraft-q1); --pe-korb-line: var(--paper-700); /* Wählbare Ordner-Farben für individuelle Boxen (DB-Wert `farbe`). Echte Steuerbüro-/Leitz-Töne (kräftig) + dezente Palette-Töne, Rücken (-body) + Deckel (-cap, eine Stufe tiefer). Der Deckeltext (-auf-cap) gehört zur Farbe: helle Deckel tragen dunklen Text, dunkle hellen. Wer eine Fläche nimmt, nimmt den zugehörigen Text mit — sonst steht helle Schrift auf hellem Grund. */ --ordnerfarbe-anthrazit-body: var(--ordner-anthrazit-body); --ordnerfarbe-anthrazit-cap: var(--ordner-anthrazit-cap); --ordnerfarbe-anthrazit-auf-cap: var(--ordner-anthrazit-auf-cap); --ordnerfarbe-bordeaux-body: var(--ordner-bordeaux-body); --ordnerfarbe-bordeaux-cap: var(--ordner-bordeaux-cap); --ordnerfarbe-bordeaux-auf-cap: var(--ordner-bordeaux-auf-cap); --ordnerfarbe-blau-body: var(--ordner-blau-body); --ordnerfarbe-blau-cap: var(--ordner-blau-cap); --ordnerfarbe-blau-auf-cap: var(--ordner-blau-auf-cap); --ordnerfarbe-gruen-body: var(--ordner-gruen-body); --ordnerfarbe-gruen-cap: var(--ordner-gruen-cap); --ordnerfarbe-gruen-auf-cap: var(--ordner-gruen-auf-cap); --ordnerfarbe-gold-body: var(--ordner-gold-body); --ordnerfarbe-gold-cap: var(--ordner-gold-cap); --ordnerfarbe-gold-auf-cap: var(--ordner-gold-auf-cap); --ordnerfarbe-grau-body: var(--ordner-grau-body); --ordnerfarbe-grau-cap: var(--ordner-grau-cap); --ordnerfarbe-grau-auf-cap: var(--ordner-grau-auf-cap); --ordnerfarbe-taupe-body: var(--ordner-taupe-body); --ordnerfarbe-taupe-cap: var(--ordner-taupe-cap); --ordnerfarbe-taupe-auf-cap: var(--ordner-taupe-auf-cap); --ordnerfarbe-oliv-body: var(--ordner-oliv-body); --ordnerfarbe-oliv-cap: var(--ordner-oliv-cap); --ordnerfarbe-oliv-auf-cap: var(--ordner-oliv-auf-cap); --ordnerfarbe-rot-body: var(--ordner-rot-body); --ordnerfarbe-rot-cap: var(--ordner-rot-cap); --ordnerfarbe-rot-auf-cap: var(--ordner-rot-auf-cap); --ordnerfarbe-gelb-body: var(--ordner-gelb-body); --ordnerfarbe-gelb-cap: var(--ordner-gelb-cap); --ordnerfarbe-gelb-auf-cap: var(--ordner-gelb-auf-cap); --ordnerfarbe-orange-body: var(--ordner-orange-body); --ordnerfarbe-orange-cap: var(--ordner-orange-cap); --ordnerfarbe-orange-auf-cap: var(--ordner-orange-auf-cap); --ordnerfarbe-hellblau-body: var(--ordner-hellblau-body); --ordnerfarbe-hellblau-cap: var(--ordner-hellblau-cap); --ordnerfarbe-hellblau-auf-cap: var(--ordner-hellblau-auf-cap); --ordnerfarbe-hellgruen-body: var(--ordner-hellgruen-body); --ordnerfarbe-hellgruen-cap: var(--ordner-hellgruen-cap); --ordnerfarbe-hellgruen-auf-cap: var(--ordner-hellgruen-auf-cap); --ordnerfarbe-rosa-body: var(--ordner-rosa-body); --ordnerfarbe-rosa-cap: var(--ordner-rosa-cap); --ordnerfarbe-rosa-auf-cap: var(--ordner-rosa-auf-cap); --ordnerfarbe-violett-body: var(--ordner-violett-body); --ordnerfarbe-violett-cap: var(--ordner-violett-cap); --ordnerfarbe-violett-auf-cap: var(--ordner-violett-auf-cap); --ordnerfarbe-braun-body: var(--ordner-braun-body); --ordnerfarbe-braun-cap: var(--ordner-braun-cap); --ordnerfarbe-braun-auf-cap: var(--ordner-braun-auf-cap); --ordnerfarbe-schwarz-body: var(--ordner-schwarz-body); --ordnerfarbe-schwarz-cap: var(--ordner-schwarz-cap); --ordnerfarbe-schwarz-auf-cap: var(--ordner-schwarz-auf-cap); --ordnerfarbe-weiss-body: var(--ordner-weiss-body); --ordnerfarbe-weiss-cap: var(--ordner-weiss-cap); --ordnerfarbe-weiss-auf-cap: var(--ordner-weiss-auf-cap); /* Upload-Zone Drag-State: Terrakotta-Soft-BG (Handoff §2.6). */ --upload-drag-bg: var(--color-primary-soft); /* Export-Tabelle: Klärungs-Zeilen (§2.8) dezent amber getönt. */ --export-clarify-row-bg: var(--amber-50); /* Triage-Slideover (Original-Beleg-Panel) */ --slideover-shadow: -6px 0 24px rgba(var(--slate-900-rgb), 0.15); /* Edit-Marker: Stift-Icon + geänderte Zelle nach Inline-Edit (UX: §9.7). Amber signalisiert "von Hand korrigiert" — unterscheidet sich visuell von bestätigt (grün/grau) und Fehler (rot). */ --edit-marker-color: var(--amber-700); --edit-pulse-ring: rgba(var(--amber-500-rgb), 0.35); /* ══════════════════════════════════════════════════════════════ Mode-Chrome — drei Modus-Welten für Hauptmodus / Labor / Demo Hauptmodus nutzt die Default-Semantic-Tokens (kein Modifier). Labor = kühles Blau-Grau, Demo-Vorlage = warmes Amber. Block-Tints für Superadmin/Labor in der Hauptsidebar. ══════════════════════════════════════════════════════════════ */ --mode-superadmin-accent: var(--bordeaux-500); --mode-partner-accent: var(--fir-500); --mode-labor-accent: var(--ink-500); --mode-labor-accent-hover: var(--ink-600); --mode-labor-tint: var(--ink-50); --mode-labor-tint-strong: var(--ink-100); --mode-labor-banner-bg: var(--ink-100); --mode-labor-banner-fg: var(--ink-700); --mode-demo-accent: var(--amber-700); --mode-demo-tint-strong: var(--amber-200); --mode-demo-banner-bg: var(--amber-100); --mode-demo-banner-fg: var(--amber-700); /* ── Skeuomorphismus-Tiefenschicht ─────────────────────────────────────── Plastik-Rezepte (box-shadow/Glanz/Textur) für components/skeuomorph.css. Glanzkanten (--skeu-sheen*) sind theme-aware (Dark dämpft), Schatten über slate-900-rgb. Komponenten referenzieren NUR diese Tokens. */ --skeu-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --skeu-sheen: rgba(255, 255, 255, 0.50); --skeu-sheen-soft: rgba(255, 255, 255, 0.38); --skeu-sheen-knob: rgba(255, 255, 255, 0.70); --skeu-knob-shade: rgba(0, 0, 0, 0.06); --skeu-ink-05: rgba(var(--slate-900-rgb), 0.05); --skeu-ink-10: rgba(var(--slate-900-rgb), 0.10); --skeu-ink-18: rgba(var(--slate-900-rgb), 0.18); --skeu-rule-ink: rgba(var(--slate-900-rgb), 0.16); --skeu-raised: inset 0 1px 0 var(--skeu-sheen), 0 1px 2px rgba(var(--slate-900-rgb), 0.08), 0 10px 24px -12px rgba(var(--slate-900-rgb), 0.26); --skeu-inset: inset 0 1px 3px rgba(var(--slate-900-rgb), 0.16); --skeu-inset-deep: inset 0 2px 8px rgba(var(--slate-900-rgb), 0.10); --skeu-pressed: inset 0 2px 3px rgba(var(--slate-900-rgb), 0.30), inset 0 -1px 0 var(--skeu-sheen-soft); --skeu-chip: inset 0 1px 0 var(--skeu-sheen-soft), 0 1px 1px rgba(var(--slate-900-rgb), 0.16); --skeu-topbar: inset 0 1px 0 var(--skeu-sheen-soft), 0 2px 6px -2px rgba(var(--slate-900-rgb), 0.22); --skeu-sidebar: inset -9px 0 14px -14px rgba(var(--slate-900-rgb), 0.30); --skeu-seg-active: inset 0 1px 0 var(--skeu-sheen), 0 1px 2px rgba(var(--slate-900-rgb), 0.20); --skeu-gutter: inset -2px 0 3px -2px rgba(var(--slate-900-rgb), 0.18); --skeu-thead-cast: inset 0 7px 6px -7px rgba(var(--slate-900-rgb), 0.16); --skeu-knob-shadow: 0 1px 2px rgba(var(--slate-900-rgb), 0.35), inset 0 1px 0 var(--skeu-sheen-knob); --skeu-drop-sm: 0 1px 2px rgba(var(--slate-900-rgb), 0.25); --skeu-ribbon: inset 0 1px 0 var(--skeu-sheen), 0 1px 2px rgba(var(--slate-900-rgb), 0.25); --skeu-lip: 0 2px 3px -1px rgba(var(--slate-900-rgb), 0.30), 0 -1px 2px rgba(var(--slate-900-rgb), 0.22); /* Lichtkante des Pop-Layers wird zum schmalen Schimmer — eine helle Kante in Papierstärke sähe auf dunklem Grund wie ein Riss aus. Der Schlagschatten darf dafür kräftiger werden, sonst trennt nichts die Ebene vom Grund. */ --popover-rim: rgba(var(--paper-50-rgb), 0.13); --shadow-popover: inset 0 1px 0 var(--popover-rim), 0 12px 32px rgba(var(--slate-900-rgb), 0.44), 0 3px 8px rgba(var(--slate-900-rgb), 0.30); } /* Milchglas nur wo der Weichzeichner wirklich rechnet. contrast unter 1 zieht die Zeile darunter zur Farbfläche zusammen; saturate holt die Farbe zurück, die contrast kostet, sonst wirkt das Glas grau statt lebendig. brightness hebt den Untergrund an, damit die Ebene als eigenes Fenster liest und nicht als Fleck — und dreht im Dunkelmodus in dieselbe Richtung, nicht in die Gegenrichtung: gefüllte Flächen stehen dort eine Stufe heller als ihr Grund. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { :root { --color-bg-popover: color-mix(in srgb, var(--color-bg-card) 80%, transparent); --blur-popover: blur(28px) saturate(1.8) contrast(0.86) brightness(1.06); /* Deutlich schwächer als am Pop-Layer: der Schleier deckt den ganzen Viewport, und die Abdunklung leistet die Trennung schon. Ein starker Weichzeichner über die volle Fläche kostet nur Rechenzeit, ohne dass der Dialog davor lesbarer würde. */ --blur-backdrop: blur(6px); } [data-theme="dark"] { /* Dunkel braucht mehr Hub: der Grund liegt fast bei Schwarz, ein Prozent- Aufschlag wie im Hellen bliebe unsichtbar. */ --blur-popover: blur(28px) saturate(1.8) contrast(0.9) brightness(1.45); } } /* `dvh` folgt der eingefahrenen Adressleiste (iOS-Safari) — wo es der Browser kennt, gewinnt es über den `vh`-Startwert oben. Beide Fassungen teilen durch die Ansichtsgröße, damit die Fensterhöhe in Layout-px herauskommt. */ @supports (height: 100dvh) { :root { --viewport-h: calc(100dvh / var(--ansicht-zoom)); } } /* ───────────────────────────────────────────────────────────────── 2b. Ordnerfarbe als Attribut — vom Farbwort zu Farbwerten. Die Datenbank speichert ein Wort („violett"), das Template schreibt es als data-farbe (Körperfarbe eines Ordners) bzw. data-banderole (Kreis-Identität) ins Markup. Hier wird das Wort EINMAL zu Werten aufgelöst; Komponenten greifen nur noch --farbe-* / --banderole-* ab und kennen keine Farbnamen mehr. Vorher pflegte jede Komponente ihre eigene Achtzehner-Liste — sechs Kopien, von denen eine bei zwölf Farben abbrach: die Herkunfts-Pille der Büro-Suche stand für die restlichen sechs hell auf hell. Zwei Sätze, weil ein Ordner beide Attribute gleichzeitig trägt (Körper + Banderole) und ein gemeinsamer Prop-Name sich selbst überschriebe. Nur in Regeln lesen, die selbst auf [data-farbe] / [data-banderole] stehen: Custom Properties vererben sich, sonst zieht ein Kind ohne eigenes Attribut die Farbe eines fernen Vorfahren — mit der Fläche des Kindes. ───────────────────────────────────────────────────────────────── */ [data-farbe="anthrazit"] { --farbe-body: var(--ordnerfarbe-anthrazit-body); --farbe-cap: var(--ordnerfarbe-anthrazit-cap); --farbe-auf-cap: var(--ordnerfarbe-anthrazit-auf-cap); } [data-farbe="bordeaux"] { --farbe-body: var(--ordnerfarbe-bordeaux-body); --farbe-cap: var(--ordnerfarbe-bordeaux-cap); --farbe-auf-cap: var(--ordnerfarbe-bordeaux-auf-cap); } [data-farbe="blau"] { --farbe-body: var(--ordnerfarbe-blau-body); --farbe-cap: var(--ordnerfarbe-blau-cap); --farbe-auf-cap: var(--ordnerfarbe-blau-auf-cap); } [data-farbe="gruen"] { --farbe-body: var(--ordnerfarbe-gruen-body); --farbe-cap: var(--ordnerfarbe-gruen-cap); --farbe-auf-cap: var(--ordnerfarbe-gruen-auf-cap); } [data-farbe="gold"] { --farbe-body: var(--ordnerfarbe-gold-body); --farbe-cap: var(--ordnerfarbe-gold-cap); --farbe-auf-cap: var(--ordnerfarbe-gold-auf-cap); } [data-farbe="grau"] { --farbe-body: var(--ordnerfarbe-grau-body); --farbe-cap: var(--ordnerfarbe-grau-cap); --farbe-auf-cap: var(--ordnerfarbe-grau-auf-cap); } [data-farbe="taupe"] { --farbe-body: var(--ordnerfarbe-taupe-body); --farbe-cap: var(--ordnerfarbe-taupe-cap); --farbe-auf-cap: var(--ordnerfarbe-taupe-auf-cap); } [data-farbe="oliv"] { --farbe-body: var(--ordnerfarbe-oliv-body); --farbe-cap: var(--ordnerfarbe-oliv-cap); --farbe-auf-cap: var(--ordnerfarbe-oliv-auf-cap); } [data-farbe="rot"] { --farbe-body: var(--ordnerfarbe-rot-body); --farbe-cap: var(--ordnerfarbe-rot-cap); --farbe-auf-cap: var(--ordnerfarbe-rot-auf-cap); } [data-farbe="gelb"] { --farbe-body: var(--ordnerfarbe-gelb-body); --farbe-cap: var(--ordnerfarbe-gelb-cap); --farbe-auf-cap: var(--ordnerfarbe-gelb-auf-cap); } [data-farbe="orange"] { --farbe-body: var(--ordnerfarbe-orange-body); --farbe-cap: var(--ordnerfarbe-orange-cap); --farbe-auf-cap: var(--ordnerfarbe-orange-auf-cap); } [data-farbe="hellblau"] { --farbe-body: var(--ordnerfarbe-hellblau-body); --farbe-cap: var(--ordnerfarbe-hellblau-cap); --farbe-auf-cap: var(--ordnerfarbe-hellblau-auf-cap); } [data-farbe="hellgruen"] { --farbe-body: var(--ordnerfarbe-hellgruen-body); --farbe-cap: var(--ordnerfarbe-hellgruen-cap); --farbe-auf-cap: var(--ordnerfarbe-hellgruen-auf-cap); } [data-farbe="rosa"] { --farbe-body: var(--ordnerfarbe-rosa-body); --farbe-cap: var(--ordnerfarbe-rosa-cap); --farbe-auf-cap: var(--ordnerfarbe-rosa-auf-cap); } [data-farbe="violett"] { --farbe-body: var(--ordnerfarbe-violett-body); --farbe-cap: var(--ordnerfarbe-violett-cap); --farbe-auf-cap: var(--ordnerfarbe-violett-auf-cap); } [data-farbe="braun"] { --farbe-body: var(--ordnerfarbe-braun-body); --farbe-cap: var(--ordnerfarbe-braun-cap); --farbe-auf-cap: var(--ordnerfarbe-braun-auf-cap); } [data-farbe="schwarz"] { --farbe-body: var(--ordnerfarbe-schwarz-body); --farbe-cap: var(--ordnerfarbe-schwarz-cap); --farbe-auf-cap: var(--ordnerfarbe-schwarz-auf-cap); } [data-farbe="weiss"] { --farbe-body: var(--ordnerfarbe-weiss-body); --farbe-cap: var(--ordnerfarbe-weiss-cap); --farbe-auf-cap: var(--ordnerfarbe-weiss-auf-cap); } [data-banderole="anthrazit"] { --banderole-body: var(--ordnerfarbe-anthrazit-body); --banderole-cap: var(--ordnerfarbe-anthrazit-cap); --banderole-auf-cap: var(--ordnerfarbe-anthrazit-auf-cap); } [data-banderole="bordeaux"] { --banderole-body: var(--ordnerfarbe-bordeaux-body); --banderole-cap: var(--ordnerfarbe-bordeaux-cap); --banderole-auf-cap: var(--ordnerfarbe-bordeaux-auf-cap); } [data-banderole="blau"] { --banderole-body: var(--ordnerfarbe-blau-body); --banderole-cap: var(--ordnerfarbe-blau-cap); --banderole-auf-cap: var(--ordnerfarbe-blau-auf-cap); } [data-banderole="gruen"] { --banderole-body: var(--ordnerfarbe-gruen-body); --banderole-cap: var(--ordnerfarbe-gruen-cap); --banderole-auf-cap: var(--ordnerfarbe-gruen-auf-cap); } [data-banderole="gold"] { --banderole-body: var(--ordnerfarbe-gold-body); --banderole-cap: var(--ordnerfarbe-gold-cap); --banderole-auf-cap: var(--ordnerfarbe-gold-auf-cap); } [data-banderole="grau"] { --banderole-body: var(--ordnerfarbe-grau-body); --banderole-cap: var(--ordnerfarbe-grau-cap); --banderole-auf-cap: var(--ordnerfarbe-grau-auf-cap); } [data-banderole="taupe"] { --banderole-body: var(--ordnerfarbe-taupe-body); --banderole-cap: var(--ordnerfarbe-taupe-cap); --banderole-auf-cap: var(--ordnerfarbe-taupe-auf-cap); } [data-banderole="oliv"] { --banderole-body: var(--ordnerfarbe-oliv-body); --banderole-cap: var(--ordnerfarbe-oliv-cap); --banderole-auf-cap: var(--ordnerfarbe-oliv-auf-cap); } [data-banderole="rot"] { --banderole-body: var(--ordnerfarbe-rot-body); --banderole-cap: var(--ordnerfarbe-rot-cap); --banderole-auf-cap: var(--ordnerfarbe-rot-auf-cap); } [data-banderole="gelb"] { --banderole-body: var(--ordnerfarbe-gelb-body); --banderole-cap: var(--ordnerfarbe-gelb-cap); --banderole-auf-cap: var(--ordnerfarbe-gelb-auf-cap); } [data-banderole="orange"] { --banderole-body: var(--ordnerfarbe-orange-body); --banderole-cap: var(--ordnerfarbe-orange-cap); --banderole-auf-cap: var(--ordnerfarbe-orange-auf-cap); } [data-banderole="hellblau"] { --banderole-body: var(--ordnerfarbe-hellblau-body); --banderole-cap: var(--ordnerfarbe-hellblau-cap); --banderole-auf-cap: var(--ordnerfarbe-hellblau-auf-cap); } [data-banderole="hellgruen"] { --banderole-body: var(--ordnerfarbe-hellgruen-body); --banderole-cap: var(--ordnerfarbe-hellgruen-cap); --banderole-auf-cap: var(--ordnerfarbe-hellgruen-auf-cap); } [data-banderole="rosa"] { --banderole-body: var(--ordnerfarbe-rosa-body); --banderole-cap: var(--ordnerfarbe-rosa-cap); --banderole-auf-cap: var(--ordnerfarbe-rosa-auf-cap); } [data-banderole="violett"] { --banderole-body: var(--ordnerfarbe-violett-body); --banderole-cap: var(--ordnerfarbe-violett-cap); --banderole-auf-cap: var(--ordnerfarbe-violett-auf-cap); } [data-banderole="braun"] { --banderole-body: var(--ordnerfarbe-braun-body); --banderole-cap: var(--ordnerfarbe-braun-cap); --banderole-auf-cap: var(--ordnerfarbe-braun-auf-cap); } [data-banderole="schwarz"] { --banderole-body: var(--ordnerfarbe-schwarz-body); --banderole-cap: var(--ordnerfarbe-schwarz-cap); --banderole-auf-cap: var(--ordnerfarbe-schwarz-auf-cap); } [data-banderole="weiss"] { --banderole-body: var(--ordnerfarbe-weiss-body); --banderole-cap: var(--ordnerfarbe-weiss-cap); --banderole-auf-cap: var(--ordnerfarbe-weiss-auf-cap); } /* Der Akzent — die Ordnerfarbe als schmaler Streifen oder Punkt auf einer Flaeche, ohne Text darauf (Kreis-Band an der Belegnummer, Filter-Chip). Er nimmt den Ton, der gegen den Untergrund steht: auf Papier den tieferen Deckel, auf dunklem Grund den helleren Ruecken. Ein fester Ton kann das nicht leisten — der Deckel verschwand im Dunkelmodus bei neun von achtzehn Farben in der Flaeche. Zielmarke 3:1 (WCAG 1.4.11, grafische Elemente), nachgerechnet in tests/frontend/test_design_system_compliance.py. */ [data-farbe] { --farbe-akzent: var(--farbe-cap); } [data-banderole] { --banderole-akzent: var(--banderole-cap); } [data-theme="dark"] [data-farbe] { --farbe-akzent: var(--farbe-body); } [data-theme="dark"] [data-banderole] { --banderole-akzent: var(--banderole-body); } /* Zwei Farben sind der Untergrund: Weiss auf Papier, Schwarz im Dunkeln. Sie koennen sich per Definition nicht von ihm abheben, und sie tiefer bzw. heller zu ziehen wuerde sie zu Grau machen. Ihr Streifen tritt deshalb in den unbunten Nachbarton aus - eine graue Kante am weissen Ordner, wie sie der Farbwaehler dort ohnehin zeichnet. */ [data-farbe="weiss"] { --farbe-akzent: var(--paper-500); } [data-banderole="weiss"] { --banderole-akzent: var(--paper-500); } [data-theme="dark"] [data-farbe="schwarz"] { --farbe-akzent: var(--slate-400); } [data-theme="dark"] [data-banderole="schwarz"] { --banderole-akzent: var(--slate-400); } /* ───────────────────────────────────────────────────────────────── 3. Dark-Mode — „Charcoal": warmes Anthrazit mit minimalem Bütten- Undertone (H≈30-40°, S≈5-7%). Vier Surface-Layer mit perzeptibler Luminanz-Staffelung. Aktiviert via . ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg-app: #131211; --color-bg-card: #21201D; --color-bg-paper: #21201D; --color-bg-shell: #1A1917; --color-bg-zebra: #1A1917; --color-bg-input: #2A2825; --color-bg-hover: #262522; --color-bg-akte-paper: #211F18; /* warm-dunkles Ordnerblatt */ --color-akte-rule: #2E2A1E; --color-akte-margin: #6E4A4A; --color-akte-edge: #34301F; --color-postit: #B9A93E; /* gedämpftes Post-it-Gelb im Dark-Mode */ --color-postit-hi: #CCBC4E; --color-bg-pill: rgba(var(--terracotta-400-rgb), 0.10); /* Scroll-Edge-Schatten dunkel: slate-900 auf dem fast schwarzen Dark-Grund bliebe unsichtbar. Helle Palette-RGB dreht die Deckkraft-Richtung um — der Rand hellt jetzt auf statt abzudunkeln, bleibt aber auf beiden Grundfarben erkennbar. */ --color-scroll-edge: rgba(var(--paper-50-rgb), 0.14); /* Schreibtisch-Unterlage: im Hellmodus helles Leder-Tan — im Dark-Mode eine dunkle Leder-Matte (sonst eine große helle Fläche). Warm-dunkel, leicht über bg-card abgesetzt, mit dezentem Sheen oben. */ --color-desk-pad: #2A2521; --color-desk-pad-edge: #1F1B18; --color-desk-pad-sheen: #352E27; --color-desk-pad-stitch: var(--terracotta-700); /* Select-Arrow heller im Dark-Mode (slate-300 / #CBD5E1). */ --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23CBD5E1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --color-toolbar-warm: var(--terracotta-500); --color-toolbar-warm-hover: var(--terracotta-700); --color-toolbar-cool: var(--slate-600); --color-toolbar-cool-hover: var(--slate-500); /* BelegAgent-CTA: slate-900 würde mit dem Dark-Body verschmelzen, daher auf slate-700 anheben. */ --color-cta-ink-bg: var(--slate-700); --color-cta-ink-bg-hover: var(--slate-600); --color-cta-ink-fg: var(--paper-50); /* Wechsel/Alternative: sky-500 ist auf slate-900 zu satt, sky-100 zu grell. Hellerer Sky-Ton für Text/Border, semi-transparenter Soft-Fill — konsistent zum Pattern bei --color-primary / --color-success im Dark-Mode. */ --color-wechsel: var(--ink-400); --color-wechsel-soft: rgba(var(--ink-400-rgb), 0.18); --color-text-primary: #F4EFE8; --color-text-secondary: #C5BFB6; --color-text-muted: #A19A91; --color-text-inverted: var(--slate-900); --color-border: #403D38; --color-border-hover: #5A554D; --color-border-strong: #807A72; /* Tabellen-Header — warmer Terra-Tint statt kaltem Ink im Dark. fg explizit, sonst kollabiert er via text-inverted auf slate-900. */ --color-bg-table-header: rgba(var(--terracotta-400-rgb), 0.12); --color-fg-table-header: var(--terracotta-100); --color-border-table-header: rgba(var(--terracotta-400-rgb), 0.20); /* Pruefung-Liste — Zebra & Pending: subtile Hellung gegenüber bg-app. Light-Defaults (slate-100 / paper-100) sind hell und kollidieren sonst mit dem Charcoal-Body. */ --pr-zebra-bg: var(--color-bg-zebra); /* Markierte / fokussierte Zeile. Im Light trägt der frei gewordene Zebra-Ton die Markierung — er liegt dort dunkler als der Zeilengrund und ist damit sichtbar. Im Dark liegt derselbe Ton nur 1.08 vom Zeilengrund entfernt und verschwindet. Die markierte Zeile wird hier deshalb HELLER als ihr Grund (1.32), liest sich also als angehobene Fläche; Hover (--color-bg-hover, 1.11) bleibt bewusst darunter, damit Überfahren die Auswahl nicht übertönt. */ --pr-row-bg-selected: #383430; /* Voll gefüllte Klassen-Pillen tragen im Dark dieselbe dunkle (inverted) Schrift wie im Light — die Fläche muss deshalb eine Palettenstufe heller werden, sonst steht Dunkel auf Dunkel: bordeaux-500 unter slate-900 ergibt 2.69:1, die Symbole verschwinden. Eine Stufe höher trägt (Warnung 3.90, Fir 4.83; Schwelle für Symbole ist 3.0). Gleiches Muster wie --color-klasse-notiz-strong, das Amber dafür schon anhebt. */ --color-klasse-warnung: var(--bordeaux-400); --color-klasse-sachverhalt: var(--fir-400); --color-klasse-stammdaten: var(--fir-400); --color-klasse-regel: var(--fir-400); /* Klasse-Hint-Boxen (Bänder, In-Row-Hints, Status-Cards) — Light nutzt -50/-100 als sehr hellen Tint. Im Dark wird das Muster invertiert: farbiger Alpha-Tint @14% auf dunklem Body, helle Text-Variante. Pattern identisch zu --alert-*-bg und --triage-*-bg. */ --color-klasse-warnung-soft: rgba(var(--bordeaux-500-rgb), 0.14); /* Die einzige Flaeche, die den Durchlauf anhaelt („kein Beleg"), braucht im Dark mehr Deckung als eine Hint-Box: mit 0.14 landete sie bei 1.09 gegen den Grund und damit UNTER dem neutralen Bandgrund (1.15) — der Alarm sah leiser aus als der Normalfall. 0.45 ergibt 1.43 gegen den Grund und 1.25 gegen ein neutrales Band: deutlich da, ohne zu leuchten. */ --color-klasse-warnung-flaeche: rgba(var(--bordeaux-500-rgb), 0.45); --color-klasse-warnung-text: var(--bordeaux-300); --color-klasse-notiz-soft: rgba(var(--amber-500-rgb), 0.14); --color-klasse-notiz-text: var(--amber-200); /* Dark: knalliges Gelb, aber amber-300 statt amber-200 — die hellste Stufe würde auf Charcoal die helle Schrift überstrahlen. amber-300 mit hoher Deckung bleibt knallig UND lesbar. */ --color-marker: rgba(var(--amber-300-rgb), 0.40); /* Dark: helle Amber-Fläche, dunkle (inverted) Schrift. */ --color-klasse-notiz-strong: var(--amber-300); --color-klasse-sachverhalt-soft: rgba(var(--fir-500-rgb), 0.14); --color-klasse-sachverhalt-text: var(--fir-200); --color-klasse-stammdaten-soft: rgba(var(--fir-500-rgb), 0.14); --color-klasse-stammdaten-text: var(--fir-200); --color-klasse-regel-soft: rgba(var(--fir-500-rgb), 0.14); --color-klasse-regel-text: var(--fir-200); /* Endlospapier-Streifen: gleiche Alpha wie die übrigen Fir-Softs im Dark-Mode — gedämpft, nie leuchtend. */ --color-endlospapier-stripe: rgba(var(--fir-500-rgb), 0.14); --color-klasse-vorschlag-soft: rgba(var(--slate-500-rgb), 0.14); --color-klasse-vorschlag-text: var(--slate-300); /* Bank-Familie Dark — --color-bank selbst bleibt unverändert (die --ordner-*-Palette ist theme-invariant, s. --belegordner-posteingang-soft oben), nur soft/text wechseln auf das Alpha-Tint-Pattern der übrigen Klassen-Tokens. */ --color-bank-soft: color-mix(in srgb, var(--ordner-rosa-body) 20%, transparent); --color-bank-text: var(--ordner-rosa-body); /* Text-Tertiary — Drittrangig, Light = slate-400 (AA-Large), im Dark auf slate-300 hochgezogen damit AA-Normal erreicht wird. */ --color-text-tertiary: var(--slate-300); /* "Ink"-Surface (Band-Rest-Badge, dunkle Slideover-Sektionen). Light nutzt slate-900 als dunkle Insel auf hellem Body — im Dark muss das nach OBEN gespiegelt werden, sonst kollidiert es mit bg-app. */ --color-bg-ink: var(--slate-700); /* BU-Info-Chip (BU-Schlüssel 19% in der Pruefung) — Light: ink-700 (dunkel auf hell). Im Dark: ink-300 (hell auf dunkel). */ --color-bu-info-fg: var(--ink-300); /* Dev-Mode-Pill (Superadmin/Dev-Toolbar) — Light nutzt ink-100 als hellen Pill-BG. Im Dark Alpha-Tint statt heller Insel. */ --color-dev-soft: rgba(var(--ink-500-rgb), 0.14); /* Beleg-Typ-Pills (Eingang/Ausgang/Email) — Light nutzt -600 Rungs (dunkel-saturiert auf hellem Body). Im Dark spiegelt sich das auf dunkel genug, dass der paper-50-Pill-Text AA-Normal erreicht (eigen: heller Amber + dunkler Text). FG bleibt hell — gilt auch für die individuellen Ordner-Caps (dunkle data-farbe-Presets). */ /* Dark: dieselbe Leitz-Familie wie die Kreis-Ordner (Ordnerfarben bleiben im Dark-Mode unverändert) — Richtung und Kreis zeigen dasselbe Grün/Blau. */ --beleg-typ-eingang-bg: var(--ordner-gruen-cap); --beleg-typ-ausgang-bg: var(--ordner-blau-cap); --beleg-typ-kasse-bg: var(--ordner-orange-cap); --beleg-typ-bank-bg: var(--ordner-rosa-cap); --beleg-typ-projekt-bg: var(--ordner-violett-cap); --beleg-typ-eigen-bg: var(--amber-300); --beleg-typ-ungeklaert-bg: var(--ink-600); --beleg-typ-email-bg: var(--ink-600); /* A11y Dark: on-accent dunkel (AA-Text auf Terracotta-400), Slideover-Panels auf dunkle Flächen statt der hellen paper-Defaults. */ --color-on-accent: var(--paper-950); --color-on-primary: var(--paper-50); /* Primary ist in Dark dunkel (#A33D14) → Button-Text hell (on-accent bleibt dunkel für helle Success/Warning) */ --slideover-bg: var(--color-bg-card); --slideover-body-bg: var(--color-bg-app); /* Belegordner-Rücken im Dark-Mode — Kraft-Körper als warmes Anthrazit, Etikett auf Card-Fläche. Quartals-Tönung über paper-700…900. */ --belegordner-body-bg: var(--paper-700); --belegordner-q1-bg: var(--paper-600); --belegordner-q2-bg: var(--paper-700); --belegordner-q3-bg: var(--paper-800); --belegordner-q4-bg: var(--paper-900); --belegordner-border: var(--paper-950); --belegordner-edge-line: var(--paper-900); --belegordner-label-bg: var(--color-bg-card); --belegordner-label-border: var(--paper-700); --belegordner-name-color: var(--color-text-primary); --belegordner-stat-label: var(--color-text-primary); --belegordner-stat-value: var(--color-text-secondary); --belegordner-stat-dash: var(--paper-500); /* Neu-Akzent heller als --color-primary (bleibt im Dark bewusst auf terracotta-600, H1-Unterstriche): als 10px-Stat-Text auf --color-bg-card wäre das 2,5:1 — die Zahl, die ziehen soll, wäre die leiseste der Kachel. */ --belegordner-stat-neu: var(--terracotta-400); --belegordner-hole-bg: var(--paper-900); --belegordner-hole-border: var(--paper-950); --belegordner-hole-highlight: var(--paper-700); --belegordner-export-bg: rgba(var(--fir-500-rgb), 0.20); --belegordner-export-fg: var(--fir-100); --belegordner-eigen-soft: var(--amber-800); --belegordner-ungeklaert-soft: var(--bordeaux-800); /* Gleiches Hellblau wie Light — die Ordnerfarben-Palette (--ordner-*) ist theme-invariant (kein eigener Dark-Block, wie --belegordner-typ-ein-bg etc.), der Ton kontrastiert gegen den fast schwarzen Dark-Desk-Pad (--color-desk-pad: #2A2521) ohnehin klar. */ --belegordner-posteingang-soft: var(--ordner-hellblau-body); --belegordner-jahr-soft: var(--slate-500); /* Schuhkarton Dark-Mode: wärmeres Dunkel-Braun, Deckel + Falzecken tiefer, Rand fast schwarz für Kontrast auf dem dunklen Desk-Pad. */ --karton-body-bg: var(--paper-800); --karton-body-bg-hover: var(--paper-700); --karton-flap-bg: var(--paper-900); --karton-lid-bg: var(--paper-900); --karton-lid-bg-hover: var(--paper-800); --karton-slot-bg: var(--paper-900); --karton-line: var(--paper-950); --karton-new-body-bg: var(--paper-700); --karton-new-lid-bg: var(--paper-800); --karton-new-border: var(--paper-600); --karton-text-color: var(--color-text-primary); --karton-subtext-color: var(--color-text-secondary); --karton-icon-color: var(--color-text-secondary); --karton-header-bg: var(--color-bg-card); /* Posteingang-Briefkorb Dark-Mode: analog zum Karton. */ --pe-korb-wanne-bg: var(--paper-800); --pe-korb-front-bg: var(--paper-900); --pe-korb-griff-bg: var(--paper-700); --pe-korb-line: var(--paper-950); /* Beleg-/ZUGferD-/Kreditor-Karten — Light: dunkle Edge + sehr heller Soft-BG. Im Dark: hellere Edge + Alpha-Tint-Soft (Pattern wie --color-klasse-*-soft). Kreditor nutzt warm-Beige aus paper, da die Identität nicht orange ist. */ --color-card-beleg-edge: var(--ink-300); --color-card-beleg-soft: rgba(var(--ink-500-rgb), 0.10); --color-card-zugferd-edge: var(--fir-300); --color-card-zugferd-soft: rgba(var(--fir-500-rgb), 0.10); --color-konto-kreditor: var(--pflaume-300); /* helle Pflaume — lesbar auf Dunkel, s. Light-Zweig */ --color-card-kreditor-edge: var(--color-konto-kreditor); --color-card-kreditor-soft: color-mix(in srgb, var(--color-konto-kreditor) 20%, var(--color-bg-card)); --color-primary: var(--terracotta-600); /* = #A33D14 (H1-Unterstriche), wie Light — kein Dark-Aufhellen */ --color-primary-hover: var(--terracotta-500); --color-primary-soft: rgba(var(--terracotta-400-rgb), 0.15); --color-success: var(--fir-200); --color-success-hover: var(--fir-100); --color-success-soft: rgba(var(--fir-500-rgb), 0.18); --color-warning: var(--amber-200); --color-warning-dark: var(--amber-500); --color-on-warning: var(--paper-950); --color-error: var(--terracotta-200); --color-error-hover: var(--terracotta-100); --color-error-dark: var(--terracotta-700); --color-in-progress: var(--ink-100); --color-link: var(--slate-300); --color-link-hover: var(--paper-100); --color-text-accent: var(--terracotta-300); --color-text-accent-strong: var(--terracotta-100); --color-text-accent-emphasis: var(--terracotta-300); --color-primary-tint: rgba(var(--terracotta-400-rgb), 0.22); --color-primary-edge: var(--terracotta-400); --status-offen-fg: var(--slate-300); --status-offen-bg: var(--slate-700); --status-in-analyse-fg: var(--ink-100); --status-in-analyse-bg: rgba(var(--ink-500-rgb), 0.25); --status-fertig-fg: var(--fir-100); --status-fertig-bg: rgba(var(--fir-500-rgb), 0.25); --status-exportiert-fg: var(--paper-100); --status-exportiert-bg: rgba(var(--ink-300-rgb), 0.22); --status-geaendert-fg: var(--amber-100); --status-geaendert-bg: rgba(var(--amber-500-rgb), 0.25); --status-exportiert-geaendert-fg: var(--amber-100); --status-exportiert-geaendert-bg: rgba(var(--amber-500-rgb), 0.25); --alert-error-fg: var(--terracotta-100); --alert-error-bg: rgba(var(--bordeaux-500-rgb), 0.20); --alert-warning-fg: var(--amber-100); --alert-warning-bg: rgba(var(--amber-500-rgb), 0.20); --alert-success-fg: var(--fir-100); --alert-success-bg: rgba(var(--fir-500-rgb), 0.20); --alert-neutral-fg: var(--slate-300); --alert-neutral-bg: var(--slate-700); --alert-info-fg: var(--paper-100); --alert-info-bg: rgba(var(--ink-300-rgb), 0.18); /* Doku-Alerts (NOTE/TIP/IMPORTANT/WARNING/CAUTION) — Dark-Mode. */ --alert-note-fg: var(--paper-100); --alert-note-bg: rgba(var(--ink-300-rgb), 0.18); --alert-note-border: var(--slate-500); --alert-tip-fg: var(--fir-100); --alert-tip-bg: rgba(var(--fir-500-rgb), 0.20); --alert-tip-border: var(--fir-500); --alert-important-fg: var(--terracotta-100); --alert-important-bg: rgba(var(--terracotta-400-rgb), 0.15); --alert-important-border: var(--terracotta-400); --alert-warning-doku-fg: var(--amber-100); --alert-warning-doku-bg: rgba(var(--amber-500-rgb), 0.20); --alert-warning-doku-border: var(--amber-500); --alert-caution-fg: var(--terracotta-100); --alert-caution-bg: rgba(var(--bordeaux-500-rgb), 0.18); --alert-caution-border: var(--terracotta-600); /* Code-Blöcke (Doku) — Dark. */ --color-bg-code: var(--slate-900); --color-bg-code-inline: rgba(var(--terracotta-400-rgb), 0.12); /* JSON-/Prompt-Syntaxfarben — Dark. ink-400 (Bool, Light-Wert) fällt auf slate-900 unter 4.5:1 — ink-300 hellt gezielt auf. */ --color-code-key: var(--terracotta-300); --color-code-string: var(--fir-200); --color-code-number: var(--amber-200); --color-code-bool: var(--ink-300); /* Mermaid Dark — "night" ist Typoras dediziertes Dark-Theme. */ --shadow-xs: 0 1px 2px rgba(var(--slate-900-rgb), 0.30); --shadow-sm: 0 1px 3px rgba(var(--slate-900-rgb), 0.35), 0 1px 2px rgba(var(--slate-900-rgb), 0.20); --shadow-md: 0 4px 6px rgba(var(--slate-900-rgb), 0.35), 0 2px 4px rgba(var(--slate-900-rgb), 0.20); --shadow-lg: 0 10px 15px rgba(var(--slate-900-rgb), 0.40), 0 4px 6px rgba(var(--slate-900-rgb), 0.20); --shadow-xl: 0 20px 25px rgba(var(--slate-900-rgb), 0.45), 0 8px 10px rgba(var(--slate-900-rgb), 0.20); --color-backdrop: rgba(var(--slate-900-rgb), 0.60); /* Karton-Deckel im Dark-Mode: gedämpft, damit der Deckel-Effekt nicht fluoreszierend wirkt. Terrakotta-Tönung bleibt als Subtle-Accent. */ --ordner-lid-bg: var(--slate-700); --ordner-lid-border: var(--slate-600); --ordner-body-border: var(--slate-700); --ordner-stitch: var(--terracotta-400); --ordner-shadow-inset: rgba(var(--terracotta-400-rgb), 0.10); --ordner-shadow-soft: rgba(var(--terracotta-400-rgb), 0.4); --ordner-shadow-hover: rgba(var(--terracotta-400-rgb), 0.22); /* Karton-Deckel pro Belegtyp — Dark-Mode gedämpft, Tönung kommt aus Border, BG bleibt slate-700 für Konsistenz mit dem Default-Deckel. */ --ordner-typ-eingang-lid-bg: var(--slate-700); --ordner-typ-eingang-lid-border: var(--terracotta-400); --ordner-typ-eingang-soft-bg: rgba(var(--terracotta-400-rgb), 0.8); --ordner-typ-ausgang-lid-bg: var(--slate-700); --ordner-typ-ausgang-lid-border: var(--fir-500); --ordner-typ-ausgang-soft-bg: rgba(var(--fir-500-rgb), 0.10); --export-clarify-row-bg: rgba(var(--amber-500-rgb), 0.12); /* ─── Triage — Cool Dark (alle Palette-gebunden) ─── */ --triage-fehler-bg: rgba(var(--bordeaux-500-rgb), 0.12); --triage-fehler-glyph: var(--bordeaux-300); --triage-hinweis-bg: rgba(var(--amber-500-rgb), 0.12); --triage-hinweis-glyph: var(--amber-300); --triage-ok-glyph: var(--fir-400); --triage-row-approved: rgba(var(--fir-500-rgb), 0.10); --triage-row-focus: rgba(var(--amber-500-rgb), 0.8); --triage-neutral-bg: var(--slate-800); /* ─── Edit-Markers + Slideover ─── */ --edit-marker-color: var(--amber-500); --edit-pulse-ring: rgba(var(--amber-500-rgb), 0.40); --slideover-shadow: -6px 0 24px rgba(var(--slate-900-rgb), 0.5); /* Mode-Chrome im Dark-Mode — Zonen-Akzente eine Stufe heller, damit sie auf dem dunklen Body-Background sichtbar bleiben. */ --mode-superadmin-accent: var(--bordeaux-400); --mode-partner-accent: var(--fir-400); --mode-labor-accent: var(--ink-300); --mode-labor-accent-hover: var(--ink-200); --mode-labor-tint: rgba(var(--ink-300-rgb), 0.10); --mode-labor-tint-strong: rgba(var(--ink-300-rgb), 0.30); --mode-labor-banner-bg: rgba(var(--ink-300-rgb), 0.15); --mode-labor-banner-fg: var(--ink-100); --mode-demo-accent: var(--amber-500); --mode-demo-tint-strong: rgba(var(--amber-500-rgb), 0.30); --mode-demo-banner-bg: rgba(var(--amber-500-rgb), 0.15); --mode-demo-banner-fg: var(--amber-100); /* Skeuomorphismus: nur die weißen Glanzkanten dämpfen — die slate-Schatten der Komposit-Rezepte bleiben (auf dunklem Grund ohnehin dezent). */ --skeu-sheen: rgba(255, 255, 255, 0.08); --skeu-sheen-soft: rgba(255, 255, 255, 0.05); --skeu-sheen-knob: rgba(255, 255, 255, 0.20); }