/* ============================================================================= Design Tokens — SchuhkartonAgent Hybrid: Struktur + Status-Paare kommen aus dem Repo (fix, von Tests referenziert). Brand-Farben, Spacing-Feintuning, Typografie-Skala = Design-Vorschlag, flexibel. ============================================================================= Regel: "Im Zweifel ein neuer Token." Keine Hex-Werte außerhalb dieser Datei. Struktur: 1. Primitives — rohe Werte. Nur im Semantic-Layer referenzieren. 2. Semantic — Zweck-Tokens. Komponenten nutzen ausschließlich diese. 3. Dark-Mode — [data-theme="dark"]-Overrides auf Semantic-Ebene. ============================================================================= */ :root { /* ── 1. Primitives — Grayscale (Slate) ──────────────────────── */ /* FIX (Repo): Namen und Werte sind stabil. Als kühles Chassis ausgewählt. */ --white: #FFFFFF; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; /* ── 1. Primitives — Status-Farben (FIX, Repo-Wahrheit) ─────── */ /* Diese Werte sind von Tests + Badge-Logik referenziert. NICHT ändern. */ /* Blau-Skala wurde entfernt — früher Primary-Farbe, nach Rebrand nirgends mehr semantisch referenziert (Status „Exportiert", Info-Alert und Link nutzen jetzt Slate, um Terrakotta als einzige Akzent-Farbe zu behalten). */ --green-100: #DCFCE7; --green-200: #BBF7D0; --green-500: #16A34A; --green-700: #166534; --amber-100: #FEF3C7; --amber-200: #FDE68A; --amber-500: #F59E0B; --amber-700: #92400E; --sky-100: #E0F2FE; --sky-200: #BAE6FD; --sky-500: #0EA5E9; --red-100: #FEE2E2; --red-200: #FECACA; --red-500: #DC2626; --red-700: #B91C1C; --red-900: #7F1D1D; --indigo-100: #E0E7FF; --indigo-500: #6366F1; /* Rose — kühlerer Rot-Spektrum für CAUTION-Callouts. Pure Red beißt sich mit Terrakottas warm-orange Rot-Komponente. Rose sitzt magenta-/pink- getönt, klar als anderer Farbton wahrnehmbar. */ --rose-100: #FFE4E6; --rose-200: #FECDD3; --rose-500: #F43F5E; --rose-700: #BE123C; --rose-900: #881337; /* ── 1. Primitives — Brand (Design-Vorschlag, FLEXIBEL) ─────── */ /* Terrakotta als warmer Akzent zum kühlen Slate-Chassis. Aus Brand-Briefing: „Sorgfalt einer deutschen Werkstatt". */ --terrakotta-50: #FEF3E7; --terrakotta-100: #FDE4CC; --terrakotta-300: #F2975F; /* Dark-Mode Primary-Hover */ --terrakotta-400: #E8824A; /* Dark-Mode Primary */ --terrakotta-500: #EA580C; /* Hover-Akzent auf hellen Flächen */ --terrakotta-600: #C2410C; /* Primary Brand */ --terrakotta-700: #9A3412; --terrakotta-900: #78350F; /* Paper-Weiß: leicht wärmer als slate-50, für Landing-Body-Flächen. */ --paper: #FBF9F5; /* ── 2. Semantic — Farben (FLEXIBEL) ────────────────────────── */ /* Primary ist jetzt Terrakotta. Blau rutscht auf "Info / Link" runter. */ --color-primary: var(--terrakotta-600); --color-primary-hover: var(--terrakotta-700); --color-primary-soft: var(--terrakotta-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); /* App-Body — aligned auf Landing v7 */ --color-bg-card: var(--white); --color-bg-paper: var(--paper); --color-bg-shell: #FAF6F2; /* App-Shell (Header/Sidebar/Breadcrumbs) — Hauch wärmer als Body, dezenter Kontrast */ --color-bg-zebra: var(--slate-50); --color-bg-hover: var(--slate-100); --color-bg-ink: var(--slate-900); --color-bg-pill: var(--lp-slate-400); /* Slate-Pill-Background für Pruefung-Shortcut-Bar — kontrastiert auf Crème-Body */ /* Toolbar-Akzente für Pruefung — zwei klar unterscheidbare, kräftige Töne. */ --color-toolbar-warm: var(--terrakotta-300); /* Anweisungen-Button */ --color-toolbar-warm-hover: var(--terrakotta-100); --color-toolbar-cool: var(--slate-300); /* Beleg & Infos-Button */ --color-toolbar-cool-hover: var(--slate-200); --color-text-primary: var(--slate-800); --color-text-secondary: var(--slate-600); /* WCAG AA: 7:1 auf Paper-BG (slate-500 war 4.42:1) */ --color-text-muted: var(--slate-500); /* WCAG AA: 4.42:1 auf Paper-BG für „large text" / Hints */ --color-text-inverted: var(--white); --color-text-accent: var(--terrakotta-600); --color-success: var(--green-500); --color-success-hover: var(--green-700); --color-warning: var(--amber-500); --color-warning-dark: var(--amber-700); /* Mono error-code in Cockpit HINWEIS */ --color-error: var(--red-500); --color-error-hover: var(--red-700); --color-error-dark: var(--red-700); /* Mono error-code in Cockpit FEHLER */ --color-in-progress: var(--indigo-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-text-accent-strong: var(--terrakotta-900); --color-text-accent-emphasis: var(--terrakotta-700); --color-border: var(--slate-200); --color-border-hover: var(--slate-300); --color-border-strong: var(--slate-300); /* Status-Paare Fg/Bg — FIX, Repo-Wahrheit. Mappen auf Spec §1b Lifecycle. */ --status-offen-fg: var(--slate-600); --status-offen-bg: var(--slate-100); --status-in-analyse-fg: var(--indigo-500); --status-in-analyse-bg: var(--indigo-100); --status-fertig-fg: var(--green-700); --status-fertig-bg: var(--green-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(--red-900); --alert-error-bg: var(--red-100); --alert-warning-fg: var(--amber-700); --alert-warning-bg: var(--amber-100); --alert-success-fg: var(--green-700); --alert-success-bg: var(--green-100); --alert-neutral-fg: var(--slate-600); --alert-neutral-bg: var(--slate-100); --alert-info-fg: var(--slate-700); --alert-info-bg: var(--slate-100); --alert-error-border: var(--red-200); --alert-warning-border: var(--amber-200); --alert-success-border: var(--green-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(--slate-100); --alert-note-border: var(--slate-400); --alert-tip-fg: var(--green-700); --alert-tip-bg: var(--green-100); --alert-tip-border: var(--green-500); --alert-important-fg: var(--terrakotta-700); --alert-important-bg: var(--terrakotta-50); --alert-important-border: var(--terrakotta-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(--rose-700); --alert-caution-bg: var(--rose-100); --alert-caution-border: var(--rose-500); /* Code-Blöcke und Inline-Code (Doku-spezifisch). */ --color-bg-code: var(--white); --color-bg-code-inline: rgba(194, 65, 12, 0.06); /* Mermaid-Diagramme (Typora-Konvention). */ --mermaid-theme: neutral; --mermaid-font-family: var(--font-body); --mermaid-flowchart-curve: linear; --mermaid-sequence-numbers: off; /* Layout — Doku/Lesefläche. 720px Content-Spalte ist der Doku-Lesefluss-Standard (GitHub ~750, MDN ~720, Stripe ~700). */ --content-max-width: 720px; --content-padding-x: var(--spacing-6); --content-padding-y: var(--spacing-8); /* Focus-Ring — Terrakotta statt Blau. */ --shadow-focus: 0 0 0 3px rgba(194, 65, 12, 0.18); /* 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 ───────────────────────────────── */ /* FIX: Fonts sind im Repo selbst-gehostet (Plus Jakarta Sans + DM Sans). */ --font-headline: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-feature-mono: "calt", "ss01"; /* Skala — App (kompakt). */ --font-size-display-xl: 64px; /* Landing H1, Desktop */ --font-size-display: 48px; /* Landing H1, Tablet */ --font-size-h1: 24px; /* App H1 */ --font-size-h2: 18px; /* App H2 + Landing Trust-Card H3 */ --font-size-h3: 16px; --font-size-body: 14px; /* App default */ --font-size-body-lg: 17px; /* Landing body */ --font-size-label: 13px; --font-size-hint: 12px; --font-size-xs: 11px; /* Skala — Doku-Lese-Skala (Help-Pages, längere Text-Seiten). Klare Sprünge: H1→H2 12px, H2→H3 6px, H3→H4 3px. */ --font-size-doku-h1: 36px; --font-size-doku-h2: 24px; --font-size-doku-h3: 18px; --font-size-doku-h4: 15px; --font-size-doku-h5: 13px; --font-size-doku-h6: 12px; --font-size-doku-body: 16px; --font-size-doku-code: 14px; --font-size-doku-small: 13px; --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) ──────────────────── */ --spacing-0: 0; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --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 ─────────────────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04); --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04); --color-backdrop: rgba(15, 23, 42, 0.4); /* PDF-Viewer Dark-Theme. */ --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-modal-backdrop: 1000; --z-modal: 1010; --z-slideover: 1020; --z-toast: 1100; /* ── 2. Semantic — Sizes (FIX, Repo-Wahrheit) ───────────────── */ --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --btn-height: 40px; --btn-height-sm: 32px; --table-row-height: 48px; --min-click-area: 40px; --beleg-list-row-height: 48px; --sidebar-width: 240px; --sidebar-width-closed: 56px; --header-height: 56px; --content-max-width: 1280px; --landing-max-width: 1120px; /* ── 2. Semantic — Transitions ──────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ══════════════════════════════════════════════════════════════ DATEV-Chrome Tokens — dichte Buchhalter-Maske Warme Beige-Skala statt kühlem Slate für Header/Toolbar/Statusbar; Status-Bänder (Fehler/Hinweis/OK); dichte Schrift (11px/10px); Consolas als offizieller Numeric-Font für Zahlen und Codes. Diese Tokens sind additiv — Semantic-Tokens oben bleiben unberührt, DATEV-Seiten referenzieren gezielt --dv-*. ══════════════════════════════════════════════════════════════ */ /* Warme Neutrals (Beige, FIX nach Brand-Entscheidung) */ --beige-50: #FBFAF3; --beige-100: #F5F4EE; --beige-200: #ECEAD8; --beige-300: #DFDCC6; --beige-400: #B8B49F; --beige-500: #8A8670; --beige-600: #5A5740; --beige-700: #3A3828; /* Selektionsgelb (aktive Buchungszeile) */ --dv-select-bg: #FFF4B8; --dv-select-border: #D4A400; --dv-hover-bg: #FFFBE8; /* Status-Band-Hintergründe (Triage-Divider) */ --dv-band-fehler-from: #F4D4CB; --dv-band-fehler-to: #E8B8AA; --dv-band-fehler-fg: #7A1818; --dv-band-hinweis-from: #F5E8C4; --dv-band-hinweis-to: #E8D49A; --dv-band-hinweis-fg: #7A5818; --dv-band-ok-from: #DCE8D8; --dv-band-ok-to: #C0D4BC; --dv-band-ok-fg: #2A4E18; /* Inline-Hint-Row (direkt unter betroffener Zeile) */ --dv-hint-fehler-bg: #FBEEE9; --dv-hint-fehler-accent: #B22222; --dv-hint-hinweis-bg: #FDF5E0; --dv-hint-hinweis-accent: #C89838; /* Zeilenhintergrund bei Fehler/Hinweis (dezent getönt) */ --dv-row-fehler-bg: #FBEEE9; --dv-row-fehler-bg-even: #F9E5DD; --dv-row-hinweis-bg: #FDF9EE; --dv-row-hinweis-bg-even: #FAF3E0; --dv-row-approved-bg: #E9F3EC; --dv-row-discarded-bg: #EAEAEA; --dv-row-zebra: #FAFAF2; --dv-row-border: #E6E4D6; --dv-row-border-cell: #EDEBDD; /* Chrome-Flächen */ --dv-chrome-from: #F5F4EE; --dv-chrome-to: #E8E6D8; --dv-toolbar-from: #ECEAD8; --dv-toolbar-to: #DFDCC6; --dv-chrome-border: #B8B49F; --dv-chrome-ink: #1A1A1A; --dv-chrome-muted: #555; /* Buttons im Chrome (Header/Toolbar/Hint) */ --dv-btn-from: #FCFCFA; --dv-btn-to: #E8E6D8; --dv-btn-border: #8A8670; --dv-btn-primary-from: #5A8A3A; --dv-btn-primary-to: #3E6A24; --dv-btn-primary-border: #2A4E18; --dv-btn-info-from: #5A7FA8; --dv-btn-info-to: #3E5F85; --dv-btn-info-border: #2A4360; /* Preview-Panel (Belegbild) */ --dv-preview-title-from: #4A6A85; --dv-preview-title-to: #34506A; --dv-preview-body-bg: #4A5560; --dv-preview-chrome-bg: #E8E6D8; /* Typografie für dichte Maske */ --dv-font-ui: "Segoe UI", Tahoma, Arial, sans-serif; --dv-font-numeric: "Consolas", "Courier New", ui-monospace, monospace; --dv-size-table: 11px; /* Tabellenzelle, Buchungszeile */ --dv-size-header: 12px; /* Header-Zeile, Toolbar-Text */ --dv-size-title: 13px; /* Titel-Zeile */ --dv-size-micro: 10px; /* Spaltenkopf, Statusbar */ --dv-size-nano: 9px; /* Belegbild-Paper, Hint-Code */ /* Zeilenhöhen (dicht) */ --dv-row-h: 22px; --dv-row-h-split: 20px; --dv-header-h: 30px; --dv-toolbar-h: 26px; --dv-statusbar-h: 22px; /* Densität — Tweak-fähig via [data-density] */ --dv-cell-pad-y: 4px; --dv-cell-pad-x: 6px; /* Focus-Ring im DATEV-Chrome (dezenter, nicht Terrakotta) */ --dv-focus-ring: 0 0 0 2px #FFD54A; /* Button-Hover-Gradient-Stops */ --dv-btn-hover-to: #EDEBDC; --dv-btn-primary-hover-from: #6AA048; --dv-btn-primary-hover-to: #4A7A2C; --dv-btn-info-hover-from: #6890BA; --dv-btn-info-hover-to: #48709A; --dv-btn-danger-from: #C44A3A; --dv-btn-danger-to: #9A2A1E; --dv-btn-danger-border: #6A1A12; --dv-btn-icon-hover-bg: #D4ECD0; --dv-btn-kbd-bg: rgba(0, 0, 0, 0.12); --dv-btn-kbd-bg-primary: rgba(255, 255, 255, 0.22); /* Zeilen- und Editor-Details */ --dv-row-missing-bg: #FFE8E0; --dv-edit-input-ring: rgba(212, 164, 0, 0.2); --dv-split-row-bg: #F4F2E4; --dv-split-row-text: #444; --dv-split-row-border: #E0DECF; /* Inline-Hint-Row */ --dv-hint-row-bg: #FDFAF0; --dv-hint-msg-fg: #333; --dv-hint-code-fg: #888; /* Preview-Panel (Paper-Elemente) */ --dv-preview-shadow: rgba(0, 0, 0, 0.4); --dv-preview-paper-fg: #333; --dv-preview-paper-sub: #666; --dv-preview-paper-divider: #ccc; --dv-preview-paper-dt: #888; --dv-preview-paper-dd: #222; --dv-preview-paper-total-border: #333; /* Statusbar-kbd */ --dv-statusbar-kbd-fg: #222; /* Semantic-Wrapper damit datev-chrome.css keine Rohpalette referenziert. Im Dark-Mode-Block weiter unten überschrieben. */ --dv-text-error: var(--red-700); --dv-text-warning: var(--amber-700); --dv-icon-success: var(--green-700); --dv-marker-error-bg: var(--red-700); --dv-marker-warning-bg: var(--amber-700); --dv-marker-ok-fg: var(--beige-500); --dv-soft-bg: var(--beige-100); --dv-soft-bg-hover: var(--beige-200); --dv-divider-strong: var(--beige-500); --dv-divider-soft: var(--beige-400); --dv-statusbar-from: var(--beige-200); --dv-statusbar-to: var(--beige-300); --dv-sidebar-bg: var(--beige-100); --dv-sidebar-link-hover-bg: var(--beige-200); --dv-sidebar-badge-bg: var(--beige-300); --dv-empty-fg: var(--beige-400); /* Freigabe-Modal */ --dv-modal-backdrop: rgba(15, 23, 42, 0.35); --dv-modal-bg-from: #FAF9F2; --dv-modal-bg-to: #F0EEDA; --dv-modal-shadow: rgba(15, 23, 42, 0.45); /* ══════════════════════════════════════════════════════════════ Triage-Prüfungs-Ansicht (alternative Sicht zu DATEV-Chrome) Drei-Band-Layout Fehler/Hinweis/OK, eigenständige Pastell- Palette (wärmer als Slate, aber entsättigter als DATEV-Beige). ══════════════════════════════════════════════════════════════ */ --triage-fehler-border: #E6B2A5; --triage-fehler-bg: #FBEEE9; --triage-fehler-glyph: #C2634A; --triage-fehler-shadow: rgba(194, 99, 74, 0.06); --triage-fehler-hint-bg: #FDF5F1; --triage-hinweis-border: #E8D4A0; --triage-hinweis-bg: #FAF3E3; --triage-hinweis-glyph: #B78A3F; --triage-hinweis-hint-bg: #FDF9EE; --triage-ok-glyph: #4A7C59; --triage-row-approved: #E9F3EC; --triage-row-focus: #FDF8EC; --triage-neutral-bg: #FAFAF7; /* Transparenz-Overlays für farbige Hintergründe (Sidebar-Links etc.) */ --triage-overlay-10: rgba(255, 255, 255, 0.10); --triage-overlay-15: rgba(255, 255, 255, 0.15); --triage-overlay-18: rgba(255, 255, 255, 0.18); --triage-overlay-30: rgba(255, 255, 255, 0.30); /* ══════════════════════════════════════════════════════════════ Karton-Card — Deckel-Effekt (Handoff §2.5) Warme Beige-Skala für den Karton-Deckel, passt zum Terrakotta- Primary. Werte aus dem UI-Kit (ui_kits/app/app.css). ══════════════════════════════════════════════════════════════ */ --karton-lid-bg: #E8D5B7; --karton-lid-border: #C9A87A; --karton-body-border: #E5D4B8; --karton-stitch: #B8863E; --karton-shadow-inset: rgba(154, 52, 18, 0.08); --karton-shadow-soft: rgba(154, 52, 18, 0.04); --karton-shadow-hover: rgba(154, 52, 18, 0.18); --karton-data-border: rgba(154, 52, 18, 0.15); /* Karton-Deckel pro Belegtyp — der Deckel-Streifen oben färbt sich je nach Beleg-Typ um. Defaults oben gelten für „eingang" / fallback. */ --karton-typ-eingang-lid-bg: #E8D5B7; /* Default-Beige */ --karton-typ-eingang-lid-border: #C9A87A; --karton-typ-eingang-soft-bg: var(--terrakotta-50); --karton-typ-ausgang-lid-bg: var(--green-200); --karton-typ-ausgang-lid-border: var(--green-500); --karton-typ-ausgang-soft-bg: var(--green-100); --karton-typ-kasse-lid-bg: var(--amber-200); --karton-typ-kasse-lid-border: var(--amber-500); --karton-typ-kasse-soft-bg: var(--amber-100); --karton-typ-bank-lid-bg: var(--slate-200); --karton-typ-bank-lid-border: var(--slate-400); --karton-typ-bank-soft-bg: var(--slate-100); --karton-typ-lohn-lid-bg: var(--indigo-100); --karton-typ-lohn-lid-border: var(--indigo-500); --karton-typ-lohn-soft-bg: var(--indigo-100); --karton-typ-sonstige-lid-bg: var(--slate-100); --karton-typ-sonstige-lid-border: var(--slate-300); --karton-typ-sonstige-soft-bg: var(--slate-50); --karton-typ-email-lid-bg: var(--sky-200); --karton-typ-email-lid-border: var(--sky-500); --karton-typ-email-soft-bg: var(--sky-100); /* 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: rgba(245, 158, 11, 0.06); /* Triage-Slideover (Original-Beleg-Panel) */ --slideover-shadow: -6px 0 24px rgba(15, 23, 42, 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-cell-bg: rgba(245, 158, 11, 0.08); --edit-cell-accent: var(--amber-500); --edit-pulse-ring: rgba(245, 158, 11, 0.35); /* ───────────────────────────────────────────────────────────── Landing-Page-Tokens (--lp-*) Geschlossener Block für die öffentliche Landing + Spoke-Seiten. Die Landing nutzt ein eigenes warm-kühles System (Terrakotta auf Paper-White), das außerhalb der Buchhalter-App nicht genutzt wird. Alle Hex/rgba-Werte, die landing.css braucht, leben hier. ──────────────────────────────────────────────────────────── */ /* Brand / Akzent — Terrakotta (Kern-Identität) */ --lp-accent-warm: #C2410C; --lp-accent-warm-hover: #9A340E; --lp-accent-warm-soft: #FDF2ED; /* Flächen */ --lp-bg-paper: #FBF9F5; --lp-bg-page: #FFFFFF; --lp-bg-ink: #0F172A; --lp-bg-white: #FFFFFF; --lp-ink: #1A1815; /* Text / Foreground */ --lp-fg1: #0F172A; --lp-fg-on-dark: #FFFFFF; /* Slates (aliased; gleiche Werte wie Primitives oben, aber unter --lp-* adressierbar) */ --lp-slate-300: #CBD5E1; --lp-slate-400: #94A3B8; --lp-slate-500: #64748B; --lp-slate-600: #475569; --lp-slate-700: #334155; --lp-slate-900: #0F172A; --lp-slate-50: #F8FAFC; /* Borders */ --lp-color-border: #E2E8F0; /* Status / Code-Highlights */ --lp-green-700: #166534; /* Beleg-Paper (Hero-Illustration) */ --lp-beleg-bg: #FEF9F1; --lp-beleg-border: #F3E6D0; --lp-beleg-dashed: #D4B998; --lp-beleg-ink: #78350F; /* DATEV-Vorschau (Härtefall-Tabs) */ --lp-datev-border: #E8D5B7; --lp-datev-head-bg: #E8D5B7; --lp-datev-divider: #C9A87A; /* Terrakotta-Staffel (Deep) */ --lp-terrakotta-700: #B8593E; --lp-terrakotta-900: #7A2F15; --lp-terra-50: #FAF3EF; --lp-terra-700: #B8593E; /* Code-Block-Paletten */ --lp-code-bg: #0F172A; --lp-code-fg: #E2E8F0; --lp-code-key: #93C5FD; --lp-code-string: #FCA5A5; --lp-code-bool: #FDE68A; --lp-code-number: #BBF7D0; --lp-code-enterprise-bg: #1A1815; --lp-code-enterprise-fg: #E8E4DF; --lp-code-enterprise-k: #E8E4DF; --lp-code-enterprise-s: #E89978; --lp-code-enterprise-v: #B5CEA8; --lp-code-enterprise-n: #569CD6; /* rgba-Literale (mit Alpha — müssen als Token liegen) */ --lp-nav-border: rgba(30, 41, 59, 0.06); --lp-hero-shadow-1: rgba(15, 23, 42, 0.15); --lp-hero-shadow-2: rgba(15, 23, 42, 0.04); --lp-aud-shadow: rgba(15, 23, 42, 0.10); --lp-datev-shadow: rgba(154, 52, 18, 0.15); --lp-datev-border-dashed-1: rgba(154, 52, 18, 0.35); --lp-datev-border-dashed-2: rgba(154, 52, 18, 0.15); --lp-datev-border-top: rgba(154, 52, 18, 0.18); --lp-datev-bu-bg: rgba(194, 65, 12, 0.07); --lp-datev-foot-bg: rgba(232, 213, 183, 0.35); --lp-datev-code-bg: rgba(194, 65, 12, 0.10); --lp-final-text-muted: rgba(255, 255, 255, 0.70); --lp-footer-text: rgba(255, 255, 255, 0.55); --lp-footer-border: rgba(255, 255, 255, 0.08); --lp-section-dark-intro: rgba(255, 255, 255, 0.70); /* Lightbox (Beleg-Großansicht in Härtefällen) */ --lp-lightbox-backdrop: rgba(0, 0, 0, 0.88); --lp-lightbox-img-shadow: rgba(0, 0, 0, 0.50); --lp-lightbox-close-bg: rgba(255, 255, 255, 0.10); --lp-lightbox-close-bg-hover: rgba(255, 255, 255, 0.20); --lp-lightbox-close-border: rgba(255, 255, 255, 0.25); /* v7-Landing: Sticky-Header, Trial-Card, Key-Step, Final-CTA */ --lp-header-bg: rgba(252, 250, 247, 0.88); --lp-header-bg-scrolled: rgba(252, 250, 247, 0.94); --lp-header-shadow-1: rgba(15, 23, 42, 0.02); --lp-header-shadow-2: rgba(15, 23, 42, 0.18); --lp-trial-shadow: rgba(15, 23, 42, 0.12); --lp-step-icon-shadow: rgba(15, 23, 42, 0.04); --lp-key-step-shadow: rgba(194, 65, 12, 0.25); --lp-betastrip-shadow: rgba(15, 23, 42, 0.12); --lp-betastrip-shadow-hover: rgba(15, 23, 42, 0.22); --lp-final-cta-bg: rgba(255, 255, 255, 0.04); --lp-final-cta-border: rgba(255, 255, 255, 0.10); --lp-final-cta-border-hover: rgba(255, 255, 255, 0.50); --lp-final-cta-border-strong: rgba(255, 255, 255, 0.25); --lp-final-cta-divider: rgba(255, 255, 255, 0.12); --lp-final-cta-text: rgba(255, 255, 255, 0.55); --lp-final-cta-label: rgba(255, 255, 255, 0.50); --lp-trust-dark-dot: rgba(255, 255, 255, 0.30); --lp-line-through-color: rgba(100, 116, 139, 0.45); --lp-section-label-on-dark: var(--terrakotta-300); --lp-betastrip-border-accent: var(--terrakotta-500); --lp-step-num-dash: var(--terrakotta-600); --lp-step-bullet: var(--slate-400); --lp-step-bullet-key: var(--terrakotta-500); --lp-aud-bullet: var(--terrakotta-500); --lp-compare-bullet-old: currentColor; --lp-compare-bullet-new: var(--terrakotta-600); --lp-tab-shot-bg-from: var(--slate-50); --lp-tab-shot-bg-to: var(--paper); --lp-beta-pill-bg: var(--terrakotta-50); --lp-beta-pill-fg: var(--terrakotta-700); --lp-beta-pill-border: var(--terrakotta-100); --lp-betastrip-pill-bg: var(--terrakotta-600); --lp-betastrip-pill-fg: var(--white); --lp-key-step-bg: var(--terrakotta-50); --lp-key-step-icon-bg: var(--terrakotta-600); --lp-key-step-icon-fg: var(--white); --lp-aud-icon-bg: var(--lp-accent-warm-soft); --lp-aud-icon-fg: var(--lp-accent-warm); --lp-aud-border-hover: var(--slate-300); --lp-divider-dashed: var(--color-border); --lp-difference-bg: var(--paper); --lp-nav-cta-bg: var(--lp-fg1); --lp-nav-cta-bg-hover: var(--slate-900); /* Typografie — zusätzliche Familien, die der Spoke-Designer nutzt */ --lp-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --lp-font-serif: "Plus Jakarta Sans", Georgia, "Times New Roman", serif; --lp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ══════════════════════════════════════════════════════════════ 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-tint: rgba(15, 23, 42, 0.045); --mode-superadmin-tint-strong: rgba(15, 23, 42, 0.07); --mode-labor-accent: #3E6A85; --mode-labor-accent-hover: #2F5169; --mode-labor-tint: rgba(62, 106, 133, 0.055); --mode-labor-tint-strong: rgba(62, 106, 133, 0.18); --mode-labor-banner-bg: #E8EFF4; --mode-labor-banner-fg: #2A4A60; --mode-demo-accent: var(--amber-700); --mode-demo-tint: rgba(146, 64, 14, 0.06); --mode-demo-tint-strong: rgba(146, 64, 14, 0.20); --mode-demo-banner-bg: var(--amber-100); --mode-demo-banner-fg: var(--amber-700); } /* Density-Tweak */ [data-density="comfortable"] { --dv-cell-pad-y: 7px; --dv-cell-pad-x: 9px; --dv-size-table: 12px; --dv-size-micro: 11px; --dv-row-h: 28px; } /* ───────────────────────────────────────────────────────────────── 3. Dark-Mode — konservative Inversionen auf Semantic-Ebene. Aktiviert via . ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg-app: var(--slate-900); --color-bg-card: var(--slate-800); --color-bg-paper: var(--slate-800); --color-bg-shell: var(--slate-800); --color-bg-zebra: var(--slate-800); --color-bg-hover: var(--slate-700); --color-bg-pill: var(--slate-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(--terrakotta-500); --color-toolbar-warm-hover: var(--terrakotta-700); --color-toolbar-cool: var(--slate-600); --color-toolbar-cool-hover: var(--slate-500); --color-text-primary: var(--slate-50); --color-text-secondary: var(--slate-400); --color-text-muted: var(--slate-500); --color-text-inverted: var(--slate-900); --color-border: var(--slate-700); --color-border-hover: var(--slate-600); --color-border-strong: var(--slate-600); --color-primary: #E8824A; /* terrakotta-400, aufgehellt für Dark-BG */ --color-primary-hover: #F2975F; /* terrakotta-300 */ --color-primary-soft: rgba(232, 130, 74, 0.15); /* semi-transparent statt pastell */ --color-success: var(--green-200); /* heller + entsättigter als Light, lesbar auf slate-900 */ --color-success-hover: var(--green-100); --color-warning: var(--amber-200); /* amber-500 wirkt auf Dark-BG zu neonig */ --color-warning-dark: var(--amber-500); --color-error: var(--red-200); /* red-500 hat gegen slate-900 zu wenig Helligkeitskontrast */ --color-error-hover: var(--red-100); /* Hover heller, damit Aktion sichtbar bleibt */ --color-error-dark: var(--red-500); --color-in-progress: var(--indigo-100); /* kohärent zu Status-Badge in-analyse */ --color-link: var(--slate-300); /* entsättigt wie im Light, aber hell genug für Dark-BG */ --color-link-hover: var(--slate-100); /* Hover etwas heller als Default-Link */ --color-text-accent: var(--terrakotta-300); --color-text-accent-strong: var(--terrakotta-100); --color-text-accent-emphasis: var(--terrakotta-300); --status-offen-fg: var(--slate-300); --status-offen-bg: var(--slate-700); --status-in-analyse-fg: var(--indigo-100); --status-in-analyse-bg: rgba(124, 58, 237, 0.25); --status-fertig-fg: var(--green-100); --status-fertig-bg: rgba(22, 163, 74, 0.25); --status-exportiert-fg: var(--slate-100); --status-exportiert-bg: rgba(148, 163, 184, 0.22); --status-geaendert-fg: var(--amber-100); --status-geaendert-bg: rgba(245, 158, 11, 0.25); --status-exportiert-geaendert-fg: var(--amber-100); --status-exportiert-geaendert-bg: rgba(245, 158, 11, 0.25); --alert-error-fg: var(--red-100); --alert-error-bg: rgba(220, 38, 38, 0.2); --alert-warning-fg: var(--amber-100); --alert-warning-bg: rgba(245, 158, 11, 0.2); --alert-success-fg: var(--green-100); --alert-success-bg: rgba(22, 163, 74, 0.2); --alert-neutral-fg: var(--slate-300); --alert-neutral-bg: var(--slate-700); --alert-info-fg: var(--slate-100); --alert-info-bg: rgba(148, 163, 184, 0.18); /* Doku-Alerts (NOTE/TIP/IMPORTANT/WARNING/CAUTION) — Dark-Mode. */ --alert-note-fg: var(--slate-100); --alert-note-bg: rgba(148, 163, 184, 0.18); --alert-note-border: var(--slate-500); --alert-tip-fg: var(--green-100); --alert-tip-bg: rgba(22, 163, 74, 0.20); --alert-tip-border: var(--green-500); --alert-important-fg: var(--terrakotta-100); --alert-important-bg: rgba(232, 130, 74, 0.15); --alert-important-border: var(--terrakotta-400); --alert-warning-doku-fg: var(--amber-100); --alert-warning-doku-bg: rgba(245, 158, 11, 0.20); --alert-warning-doku-border: var(--amber-500); --alert-caution-fg: var(--rose-100); --alert-caution-bg: rgba(244, 63, 94, 0.18); --alert-caution-border: var(--rose-500); /* Code-Blöcke (Doku) — Dark. */ --color-bg-code: #1A2332; --color-bg-code-inline: rgba(232, 130, 74, 0.12); /* Mermaid Dark — "night" ist Typoras dediziertes Dark-Theme. */ --mermaid-theme: night; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45), 0 8px 10px rgba(0, 0, 0, 0.2); --color-backdrop: rgba(0, 0, 0, 0.6); /* Karton-Deckel im Dark-Mode: gedämpft, damit der Deckel-Effekt nicht fluoreszierend wirkt. Terrakotta-Tönung bleibt als Subtle-Accent. */ --karton-lid-bg: var(--slate-700); --karton-lid-border: var(--slate-600); --karton-body-border: var(--slate-700); --karton-stitch: var(--terrakotta-400); --karton-shadow-inset: rgba(232, 130, 74, 0.10); --karton-shadow-soft: rgba(232, 130, 74, 0.04); --karton-shadow-hover: rgba(232, 130, 74, 0.22); --karton-data-border: var(--slate-700); /* Karton-Deckel pro Belegtyp — Dark-Mode gedämpft, Tönung kommt aus Border, BG bleibt slate-700 für Konsistenz mit dem Default-Deckel. */ --karton-typ-eingang-lid-bg: var(--slate-700); --karton-typ-eingang-lid-border: var(--terrakotta-400); --karton-typ-eingang-soft-bg: rgba(232, 130, 74, 0.08); --karton-typ-ausgang-lid-bg: var(--slate-700); --karton-typ-ausgang-lid-border: var(--green-500); --karton-typ-ausgang-soft-bg: rgba(22, 163, 74, 0.10); --karton-typ-kasse-lid-bg: var(--slate-700); --karton-typ-kasse-lid-border: var(--amber-500); --karton-typ-kasse-soft-bg: rgba(245, 158, 11, 0.10); --karton-typ-bank-lid-bg: var(--slate-700); --karton-typ-bank-lid-border: var(--slate-400); --karton-typ-bank-soft-bg: rgba(148, 163, 184, 0.10); --karton-typ-lohn-lid-bg: var(--slate-700); --karton-typ-lohn-lid-border: var(--indigo-500); --karton-typ-lohn-soft-bg: rgba(124, 58, 237, 0.12); --karton-typ-sonstige-lid-bg: var(--slate-700); --karton-typ-sonstige-lid-border: var(--slate-600); --karton-typ-sonstige-soft-bg: rgba(148, 163, 184, 0.06); --karton-typ-email-lid-bg: var(--slate-700); --karton-typ-email-lid-border: var(--sky-500); --karton-typ-email-soft-bg: rgba(14, 165, 233, 0.10); --export-clarify-row-bg: rgba(245, 158, 11, 0.12); /* DATEV-Semantic-Wrapper im Dark-Mode (Component-CSS referenziert nur diese, nicht die Rohpalette). */ --dv-text-error: var(--red-100); --dv-text-warning: var(--amber-100); --dv-icon-success: var(--green-100); --dv-marker-error-bg: var(--red-700); --dv-marker-warning-bg: var(--amber-700); --dv-marker-ok-fg: var(--slate-500); --dv-soft-bg: var(--slate-700); --dv-soft-bg-hover: var(--slate-700); --dv-divider-strong: var(--slate-500); --dv-divider-soft: var(--slate-600); --dv-statusbar-from: var(--slate-800); --dv-statusbar-to: var(--slate-900); --dv-sidebar-bg: var(--slate-800); --dv-sidebar-link-hover-bg: var(--slate-700); --dv-sidebar-badge-bg: var(--slate-700); --dv-empty-fg: var(--slate-500); /* ─── DATEV-Chrome — Cool Dark (Variante B: Slate + Orange-Akzente, konsistent mit App-Shell. Die beige-Welt wird komplett auf Slate remappt, Warm-Töne bleiben nur als Akzente für Selection / Focus.) */ --dv-chrome-from: var(--slate-800); --dv-chrome-to: var(--slate-900); --dv-chrome-border: var(--slate-700); --dv-chrome-ink: var(--slate-50); --dv-chrome-muted: var(--slate-400); --dv-toolbar-from: var(--slate-800); --dv-toolbar-to: var(--slate-900); --dv-statusbar-kbd-fg: var(--slate-100); --dv-select-bg: rgba(245, 158, 11, 0.18); --dv-select-border: var(--amber-500); --dv-hover-bg: var(--slate-700); --dv-band-fehler-from: rgba(220, 38, 38, 0.22); --dv-band-fehler-to: rgba(220, 38, 38, 0.30); --dv-band-fehler-fg: var(--red-100); --dv-band-hinweis-from: rgba(245, 158, 11, 0.18); --dv-band-hinweis-to: rgba(245, 158, 11, 0.26); --dv-band-hinweis-fg: var(--amber-100); --dv-band-ok-from: rgba(22, 163, 74, 0.18); --dv-band-ok-to: rgba(22, 163, 74, 0.26); --dv-band-ok-fg: var(--green-100); --dv-hint-fehler-bg: rgba(220, 38, 38, 0.12); --dv-hint-fehler-accent: var(--red-500); --dv-hint-hinweis-bg: rgba(245, 158, 11, 0.12); --dv-hint-hinweis-accent: var(--amber-500); --dv-row-fehler-bg: rgba(220, 38, 38, 0.12); --dv-row-fehler-bg-even: rgba(220, 38, 38, 0.17); --dv-row-hinweis-bg: rgba(245, 158, 11, 0.10); --dv-row-hinweis-bg-even: rgba(245, 158, 11, 0.15); --dv-row-approved-bg: rgba(22, 163, 74, 0.10); --dv-row-discarded-bg: var(--slate-800); --dv-row-zebra: var(--slate-800); --dv-row-border: var(--slate-700); --dv-row-border-cell: var(--slate-700); --dv-btn-from: var(--slate-700); --dv-btn-to: var(--slate-800); --dv-btn-border: var(--slate-600); --dv-btn-hover-to: var(--slate-700); --dv-btn-primary-from: var(--green-500); --dv-btn-primary-to: var(--green-700); --dv-btn-primary-border: var(--green-700); --dv-btn-primary-hover-from: var(--green-500); --dv-btn-primary-hover-to: var(--green-700); --dv-btn-info-from: var(--terrakotta-400); --dv-btn-info-to: var(--terrakotta-600); --dv-btn-info-border: var(--terrakotta-700); --dv-btn-info-hover-from: var(--terrakotta-300); --dv-btn-info-hover-to: var(--terrakotta-500); --dv-btn-danger-from: var(--red-500); --dv-btn-danger-to: var(--red-700); --dv-btn-danger-border: var(--red-900); --dv-btn-icon-hover-bg: rgba(22, 163, 74, 0.20); --dv-btn-kbd-bg: rgba(255, 255, 255, 0.12); --dv-btn-kbd-bg-primary: rgba(255, 255, 255, 0.24); --dv-row-missing-bg: rgba(220, 38, 38, 0.15); --dv-edit-input-ring: rgba(245, 158, 11, 0.30); --dv-split-row-bg: var(--slate-800); --dv-split-row-text: var(--slate-400); --dv-split-row-border: var(--slate-700); --dv-hint-row-bg: rgba(148, 163, 184, 0.08); --dv-hint-msg-fg: var(--slate-200); --dv-hint-code-fg: var(--slate-500); --dv-preview-title-from: var(--slate-700); --dv-preview-title-to: var(--slate-800); --dv-preview-body-bg: var(--slate-900); --dv-preview-chrome-bg: var(--slate-800); --dv-preview-shadow: rgba(0, 0, 0, 0.60); --dv-preview-paper-fg: var(--slate-100); --dv-preview-paper-sub: var(--slate-400); --dv-preview-paper-divider: var(--slate-600); --dv-preview-paper-dt: var(--slate-400); --dv-preview-paper-dd: var(--slate-100); --dv-preview-paper-total-border: var(--slate-400); --dv-focus-ring: 0 0 0 2px var(--amber-500); --dv-modal-backdrop: rgba(0, 0, 0, 0.65); --dv-modal-bg-from: var(--slate-800); --dv-modal-bg-to: var(--slate-900); --dv-modal-shadow: rgba(0, 0, 0, 0.60); /* ─── Triage — Cool Dark ─── */ --triage-fehler-border: rgba(194, 99, 74, 0.35); --triage-fehler-bg: rgba(194, 99, 74, 0.12); --triage-fehler-glyph: var(--red-500); --triage-fehler-shadow: rgba(194, 99, 74, 0.08); --triage-fehler-hint-bg: rgba(194, 99, 74, 0.08); --triage-hinweis-border: rgba(183, 138, 63, 0.35); --triage-hinweis-bg: rgba(183, 138, 63, 0.12); --triage-hinweis-glyph: var(--amber-500); --triage-hinweis-hint-bg: rgba(183, 138, 63, 0.08); --triage-ok-glyph: var(--green-500); --triage-row-approved: rgba(22, 163, 74, 0.10); --triage-row-focus: rgba(245, 158, 11, 0.08); --triage-neutral-bg: var(--slate-800); --triage-overlay-10: rgba(255, 255, 255, 0.05); --triage-overlay-15: rgba(255, 255, 255, 0.08); --triage-overlay-18: rgba(255, 255, 255, 0.10); --triage-overlay-30: rgba(255, 255, 255, 0.15); /* ─── Edit-Markers + Slideover ─── */ --edit-marker-color: var(--amber-500); --edit-cell-bg: rgba(245, 158, 11, 0.12); --edit-cell-accent: var(--amber-500); --edit-pulse-ring: rgba(245, 158, 11, 0.40); --slideover-shadow: -6px 0 24px rgba(0, 0, 0, 0.50); /* ─── Landing-Page (--lp-*) — Cool Dark Variante ─── Auto-Aktivierung via FOUC-Script in landing_base.html (prefers-color-scheme: dark → data-theme="dark"). Beleg-Hero-Illustration bekommt warmen Tint statt cremig-weiß. */ --lp-bg-paper: var(--slate-800); --lp-bg-page: var(--slate-900); --lp-bg-white: var(--slate-800); --lp-ink: var(--slate-100); --lp-fg1: var(--slate-50); /* --lp-bg-ink + --lp-fg-on-dark bleiben — sie sind explizit für "always dark sections" (Hero-Footer, CTA-Bands) gedacht. */ --lp-color-border: var(--slate-700); /* Slate-Aliases auf invertierten Wert mappen */ --lp-slate-50: #0F172A; --lp-slate-300: var(--slate-600); --lp-slate-400: var(--slate-500); --lp-slate-500: var(--slate-400); --lp-slate-600: var(--slate-300); --lp-slate-700: var(--slate-200); --lp-slate-900: #F8FAFC; /* Beleg-Paper (Hero-Illustration): warm-dunkel statt Cremegelb */ --lp-beleg-bg: rgba(245, 158, 11, 0.06); --lp-beleg-border: rgba(245, 158, 11, 0.18); --lp-beleg-dashed: rgba(245, 158, 11, 0.32); --lp-beleg-ink: var(--amber-100); /* DATEV-Vorschau */ --lp-datev-border: var(--slate-700); --lp-datev-head-bg: var(--slate-700); --lp-datev-divider: var(--slate-600); /* Akzent-Stack — heller damit Terrakotta auf dunklem BG sichtbar */ --lp-accent-warm: var(--terrakotta-400); --lp-accent-warm-hover: var(--terrakotta-300); --lp-accent-warm-soft: rgba(232, 130, 74, 0.12); --lp-terrakotta-700: var(--terrakotta-300); --lp-terrakotta-900: var(--terrakotta-100); --lp-terra-50: rgba(232, 130, 74, 0.10); --lp-terra-700: var(--terrakotta-300); --lp-green-700: var(--green-100); /* rgba-Tints: Sichtbarkeit auf dunklem BG anpassen */ --lp-nav-border: rgba(255, 255, 255, 0.08); --lp-hero-shadow-1: rgba(0, 0, 0, 0.40); --lp-hero-shadow-2: rgba(0, 0, 0, 0.20); --lp-aud-shadow: rgba(0, 0, 0, 0.35); --lp-datev-shadow: rgba(0, 0, 0, 0.45); --lp-datev-border-dashed-1: rgba(245, 158, 11, 0.40); --lp-datev-border-dashed-2: rgba(245, 158, 11, 0.18); --lp-datev-border-top: rgba(245, 158, 11, 0.22); --lp-datev-bu-bg: rgba(245, 158, 11, 0.10); --lp-datev-foot-bg: rgba(245, 158, 11, 0.06); --lp-datev-code-bg: rgba(245, 158, 11, 0.14); /* Sticky-Header dunkel im Dark-Mode (statt cremig-transparent). */ --lp-header-bg: rgba(15, 23, 42, 0.85); --lp-header-bg-scrolled: rgba(15, 23, 42, 0.92); --lp-header-shadow-1: rgba(0, 0, 0, 0.30); --lp-header-shadow-2: rgba(0, 0, 0, 0.40); /* Key-Step-Card (Schritt 3) — Terrakotta-Tint auf dunklem BG. */ --lp-key-step-bg: rgba(232, 130, 74, 0.10); --lp-key-step-shadow: rgba(0, 0, 0, 0.40); --lp-step-icon-shadow: rgba(0, 0, 0, 0.30); /* Anmelden-CTA im Header: im Dark-Mode löste --lp-nav-cta-bg auf var(--lp-fg1) zu slate-50 auf — weißer Button + weißer Text = unlesbar. Im Dark-Mode soll der CTA klar als Terrakotta-Brand-Button stehen. */ --lp-nav-cta-bg: var(--terrakotta-500); --lp-nav-cta-bg-hover: var(--terrakotta-400); /* Hero-SVG-Illustration — Lid-/Pill-/Triage-Row-Farben. Kein Theme-Switch nötig: Landing-SVG bleibt in beiden Modi farbidentisch (illustrative Markenfarben), Tokens leben deshalb hier statt im Component-CSS, damit der Compliance-Test (no-palette-tokens) sauber bleibt. */ --lp-svg-lid-terra: var(--terrakotta-300); --lp-svg-lid-green: var(--green-200); --lp-svg-lid-amber: var(--amber-200); --lp-svg-pill-green-bg: var(--green-100); --lp-svg-pill-green-border: var(--green-200); --lp-svg-pill-green-fg: var(--green-700); --lp-svg-row-ok-bg: var(--green-100); --lp-svg-row-hinweis-bg: var(--amber-100); --lp-svg-row-fehler-bg: var(--red-100); --lp-svg-row-ok-stripe: var(--green-500); --lp-svg-row-hinweis-stripe: var(--amber-500); --lp-svg-row-fehler-stripe: var(--red-500); --lp-svg-row-ok-label: var(--green-700); --lp-svg-row-hinweis-label: var(--amber-700); --lp-svg-row-fehler-label: var(--red-700); /* Step-Icons / Bullets passen — Akzent-Stack + slate-aliases sind oben bereits invertiert. footer/final-section haben EH dunklen BG → Werte bleiben gleich. */ /* Mode-Chrome im Dark-Mode — Tints werden mit hellem Slate gegen dunklen Body-Background invertiert; Akzente bleiben farbidentisch, nur etwas heller, damit sie auf slate-900 sichtbar bleiben. */ --mode-superadmin-tint: rgba(248, 250, 252, 0.04); --mode-superadmin-tint-strong: rgba(248, 250, 252, 0.07); --mode-labor-accent: #6B9CB8; --mode-labor-accent-hover: #8AB4CE; --mode-labor-tint: rgba(107, 156, 184, 0.10); --mode-labor-tint-strong: rgba(107, 156, 184, 0.30); --mode-labor-banner-bg: rgba(107, 156, 184, 0.15); --mode-labor-banner-fg: #BFD7E5; --mode-demo-accent: var(--amber-500); --mode-demo-tint: rgba(245, 158, 11, 0.10); --mode-demo-tint-strong: rgba(245, 158, 11, 0.30); --mode-demo-banner-bg: rgba(245, 158, 11, 0.15); --mode-demo-banner-fg: var(--amber-100); }