/** * PKVbuddy "Cappuccino" Design Tokens — kanonische Quelle (Single Source of Truth) * * Übernommen aus docs/design-system/colors_and_type.css (Claude Design Export). * Wird VOR cappuccino.css geladen, damit cappuccino.css + app.css die Tokens nutzen. * * Bewusst NUR :root-Tokens — die globalen Element-Base-Styles aus dem Design-Export * (p/h1–h6 { margin:0 } etc.) werden absichtlich NICHT übernommen, da sie das * Bootstrap-Layout der bestehenden App app-weit stören würden. Base-Element-Styles * bleiben in cappuccino.css. * * Projektspezifische Glue-Tokens (Bootstrap --bs-*, --logo-*, --mobile-header-bg) * leben weiterhin in cappuccino.css. */ :root { /* ============== BRAND / CAPPUCCINO PALETTE ============== */ /* Espresso – body text, dark surfaces */ --espresso: #3D2B1F; --espresso-light: #5C4033; /* Crema – warm beige accent (logo "hell") */ --crema: #BE9977; --crema-light: #D4C4B0; --crema-dark: #A68B6B; /* Tasse – brown accent (logo "dunkel") */ --tasse: #A57459; --tasse-light: #C49480; --tasse-muted: #F5EAE3; /* Milk – background creams */ --milk: #FFFAF5; --milk-warm: #F8EBDD; --milk-pure: #FFFDFB; /* Latte-art surface gradients FEATURE-0134 Entscheidung D: foam = milk (Aliase statt Duplikate) */ --foam: var(--milk); --foam-warm: var(--milk-warm); --crema-latte: #E8D4C4; --crema-deep: #D4BCA8; --coffee: #C4A88C; --coffee-deep: #A88968; /* ============== LINIENSTIL (Startseite) ============== Gezeichnete Illustrationen im Hero und in der Beleg-Reise: gleichmäßige Kontur, helle Füllung, keine Verläufe, keine Schlagschatten (FEATURE-0142). reise.css bildet diese Namen auf seine kurzen Aliase ab, startseite.css nutzt sie direkt — die Werte stehen nur hier. */ --linie-strich: var(--espresso); --linie-strich-leise: var(--crema); --linie-strich-stark: var(--accent); --linie-flaeche: var(--milk-pure); --linie-staerke: 2px; /* ============== SEMANTIC ACCENT ============== */ /* Türkis – primary CTA, links, active states WEISS AUF TÜRKIS HEISST --accent-dark, NIE --accent. Weiß auf --accent sind 3,32:1, und AA verlangt 4,5:1 — das galt für jeden Primärknopf im Haus. --accent-dark trägt 5,73:1, --accent-deep 7,80:1 für den Hover darüber. --accent bleibt, was es war: Fläche, Kontur und Akzent, überall dort, wo kein Text darauf steht. */ --accent: #2A9D8F; --accent-light: #40B4A6; --accent-dark: #1E7268; --accent-deep: #175C53; --accent-muted: #E6F4F2; /* ============== STATUS COLORS ============== */ --warning: #D97706; --warning-light: #F59E0B; --warning-muted: #FEF3C7; /* BUG-0394 (22.09.2026): eigene, dunklere Toast-Markenfarbe — --warning selbst ist fuer die Utility-Klassen verdrahtet (Audit B2/UX4-01, cappuccino.css), nicht fuer die Solid-Toast-Flaeche. Weisse Schrift erreicht darauf 6,79:1 (WCAG AA), auf --warning selbst nur 3,19:1. */ --warning-dark: #8A4B0A; --danger: #DC2626; --danger-light: #EF4444; --danger-muted: #FEE2E2; --success: #198754; --success-light: #22C55E; /* FEATURE-0134 Entscheidung D: ein Grün — angeglichen an --status-success-bg */ --success-muted: rgba(34, 197, 94, 0.16); --info: #0DCAF0; /* --info-muted abgebaut (Audit B4/UX5-01+UX5-18): 0 Konsumenten — die Info-Fläche der App ist --status-pending-bg. */ /* BUG-0394 (22.09.2026): eigene, dunkle Toast-Markenfarbe — --info selbst ist Bootstraps unveraenderter Rohwert (#0DCAF0) und bleibt das, damit bestehende .text-info/.bg-info-Konsumenten unangetastet bleiben. Weisse Schrift auf --info-dark erreicht 5,79:1 (WCAG AA). */ --info-dark: #0B6E8C; /* ============== NEUTRALS – warm stones ============== */ /* Feine Warmtöne für Karten-Chrome (zwischen stone-100 und stone-200) */ --hairline: #F0EBE4; /* Karten-Rand (list-surface, detail-card, …) */ --hairline-soft: #F2EDE6; /* Trennlinien innerhalb von Karten */ --hairline-row: #F4EFE8; /* Zeilen-Trenner in Tabellen/Rows */ --tint-warm: #FBF6F0; /* Gruppenzeilen-Hintergrund (Datum/Person) */ --tint-row: #FBF8F4; /* Link-Row-Hintergrund (Einreichungen, Zahlungen, Dokumente) */ /* Fläche hinter quadratischen Kurzicons (Belegtyp mobil, Kostenträger- Kurzicon). Der Wert stammt aus der mobilen Belegliste, wo er als Literal eingeführt wurde — als Token, damit die nächste Kurzform (BUG-0044/0045) keine eigene Beige-Nuance erfindet. */ --icon-shell-bg: #F1ECE5; --dark: #2D2418; --stone-600: #5C5248; /* body text */ --stone-500: #7A7068; /* muted text */ --stone-400: #A09688; /* NUR Dekor (Chevrons, Icon-Platzhalter) — für Text zu hell, siehe --text-secondary */ /* Rollen-Token für Sekundärtext (Audit B4C/A5-08): Feldbeschriftungen, Hinweis- und Meta-Texte. 4,83:1 auf Weiß, 4,66:1 auf --milk, 4,56:1 auf --tint-row (AA 4,5:1). Auf stärker getönten Flächen (--milk-warm 4,12:1, --stone-100 4,27:1) reicht das NICHT — dort direkt --stone-600 einsetzen. --stone-400 ist als Textfarbe tabu (2,91:1). */ --text-secondary: var(--stone-500); --stone-300: #C4BAA8; /* hairline borders */ --stone-200: #E5DED2; /* NUR Trennlinien/Dekor-Ränder — für Bedienelement-Rahmen zu blass, siehe --control-border */ /* Rollen-Token für Bedienelement-Rahmen (Audit B4C/A5-09): Eingabe- und Auswahlfelder, Checkboxen, helle Buttons. SC 1.4.11 verlangt 3:1 — 3,73:1 auf Weiß, 3,18:1 auf --milk-warm, 3,29:1 auf --stone-100. --stone-200 (1,34:1) und --stone-300 (1,92:1) bleiben Trennlinien und rein dekorativen Rändern vorbehalten. */ --control-border: #8C8378; --stone-100: #F5F0EB; /* hover bg */ --stone-50: #FAF8F5; /* subtle bg, z.B. Tabellen-Streifen */ /* ============== DOMAIN TOKENS ============== */ /* Belegtyp hat KEINE Farb-Tokens mehr — monochromer .type-chip (FEATURE-0134) */ /* Payer types (Kostenträger) — Single Source of Truth (FEATURE-0134, Muster AC-55). Konsumiert von .payer-badge (app-components.css) über {% payer_badge %} (core/templatetags/payer_tags.py) — nicht direkt in Templates referenzieren. Die --payer-*-fg-Varianten sind abgebaut (0 Konsumenten): sie waren die Textfarben der .payer-badge--solid-Variante, die mit VALID_VARIANTS = {'pill','text'} entfallen ist. pill und text färben den Text über --payer-* selbst. */ --payer-beihilfe: #0D6EFD; --payer-pkv: var(--accent); --payer-bee: var(--crema); --payer-zusatz: #6C757D; /* Gesundheitskosten-Graph (B7, FEATURE-0160). Eigene Namen statt roher Palette: Das Chart-Skript liest sie zur Laufzeit ueber getComputedStyle, und ein Name sagt dort, WELCHE Reihe gemeint ist. Die zwei Kuerzungen tragen die Traegerfarben — dieselbe Zuordnung wie ueberall sonst in der App. */ --chart-contributions: var(--espresso-light); --chart-deductible: var(--warning); --chart-own-share: var(--danger); --chart-shortfall-beihilfe: var(--payer-beihilfe); --chart-shortfall-pkv: var(--payer-pkv); --chart-uncovered: var(--stone-400); --chart-refunds: var(--success); --chart-total: var(--stone-600); --chart-highlight: var(--espresso); /* Trennlinie zwischen den Stapelflaechen, in Kartenfarbe. Sie loest drei kritische Farbpaarungen auf einmal: "ohne Deckung" ueber "Kuerzung PKV" steht bei 1,14 : 1 Leuchtdichte-Kontrast, Tuerkis gegen Gruen bei 1,36 : 1 (FEATURE-0160). Eine Linie trennt unabhaengig vom Farbabstand. */ --chart-separator: white; /* Status (semantic, domain-agnostic) FEATURE-0134 Entscheidung A: flache Status-Tags — gedämpfter Hintergrund + dunkler Text (muted Code-Stand ist SSOT). */ --status-open-bg: var(--warning-muted); /* R-26d: Alias statt Literal-Duplikat */ --status-open-fg: #92610A; --status-pending-bg: #CFF4FC; /* info-muted (cyan) */ --status-pending-fg: #055160; --status-success-bg: var(--success-muted); /* R-26d: Alias statt Literal-Duplikat */ --status-success-fg: #166534; --status-neutral-bg: var(--stone-200); --status-neutral-fg: var(--stone-600); --status-error-bg: var(--danger-muted); --status-error-fg: #991B1B; /* ============== TYPOGRAPHY ============== */ --font-display: 'Comfortaa', system-ui, cursive; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-app: 'Manrope', 'DM Sans', -apple-system, sans-serif; /* Zeilenhöhen-Skala (--lh-*) und --tracking-overline abgebaut (Audit B4/UX5-01): 0 Konsumenten — keine Skala vortäuschen, die nicht gelebt wird. Die alte Marketing-Type-Scale (--fs-h1 … --fs-overline) fiel ebenfalls; unten steht ihre Nachfolgerin. */ /* App-Schriftgrößen-Skala (Audit B4/UX5-05, erweitert für FEATURE-0336): Zehn Stufen, keine halben Pixel. Gilt für die App-Stylesheets (app.css, app-components.css, timeline.css, scanner.css) — jede neue font-size dort MUSS eine dieser Stufen sein. Marketing (cappuccino.css) skaliert eigenständig in rem. Bewusste Ausnahmen (im Guard-Test test_feature_0134_tokens.py verzeichnet): clamp() am Money-Hero, 0.875em der errorlist (kontextrelativ), 2rem am Scanner-Auslöser (Display-Glyphe). */ --fs-11: 11px; /* Overlines, Chips, Legenden */ --fs-12: 12px; /* Badges, Meta- und Sub-Zeilen */ --fs-13: 13px; /* Listen-/Body-Text, Buttons */ --fs-14: 14px; /* betonte Zeilen, Karten-Titel, Tabs */ --fs-16: 16px; /* Sektions-Titel, Summen */ --fs-20: 20px; /* Modal- und Bereichs-Titel */ --fs-26: 26px; /* Seitentitel, große Beträge */ --fs-28: 28px; /* nachgeordnete Prognose im Block „Aktuell“ */ --fs-32: 32px; /* Hauptzahlen im Block „Aktuell“ auf Mobilgeräten */ --fs-40: 40px; /* Hauptzahlen im Block „Aktuell“ auf breiten Geräten */ /* ============== RADII ============== */ /* --radius-xl/-2xl/-3xl abgebaut (Audit B4/UX5-07): 0 Konsumenten — grep var(--radius-xl|2xl|3xl) über CSS, Templates, JS, Python, e2e traf nur die Definition und die Styleguide-Prosa. */ --radius-sm: 0.25rem; /* table cell highlights */ --radius-xs: 6px; /* flache Status-Badges, kleine Toggle-Buttons (Audit B4/UX5-07 — Name aus dem Audit-Entscheid; liegt bewusst zwischen sm 4px und md 8px) */ --radius-md: 0.5rem; /* dashboard cards (Dashcode-style) */ --radius-lg: 12px; /* form fields, mobile cards */ --radius-pill: 25px; /* buttons */ --radius-full: 9999px; /* ============== SHADOWS ============== */ --shadow-flat: 0 1px 3px rgba(61, 43, 31, 0.04); /* dashboard card */ --shadow-sm: 0 2px 8px rgba(61, 43, 31, 0.04); /* benefit row */ --shadow-md: 0 2px 12px rgba(61, 43, 31, 0.06); /* default card */ --shadow-lg: 0 4px 20px rgba(61, 43, 31, 0.06); /* duo / testimonial */ --shadow-xl: 0 8px 24px rgba(61, 43, 31, 0.10); /* card hover */ --shadow-2xl: 0 20px 60px rgba(61, 43, 31, 0.15); /* hero preview */ /* --shadow-cta (türkiser Glow für .btn-primary:hover) abgebaut: 0 Konsumenten — cappuccino.css trug den Wert hartkodiert und hat den Hover-Schatten als einzigen Knopf-Schatten des Hauses gestrichen (siehe .btn-primary:hover). */ /* Abstands-Skala (--space-1 … --space-32) abgebaut (Audit B4/UX5-01): 0 Konsumenten (grep var(--space über CSS, Templates, JS, Python) — Abstände stehen als Einzelwerte in den Stylesheets. */ /* ============== LAYOUT ============== */ /* Seitenrand der App-Hülle. Kopfzeile (.top-navbar), mobile Kopfleiste (.mobile-header) und Inhaltsfläche (.content-wrapper) lesen ausschließlich diesen Wert. Vorher trugen die drei ihr Maß als eigenes Literal, dazu kam ein p-md-4 im Markup von base.html — der Inhalt stand dadurch am Desktop 48px vom Rand, die Kopfzeile 24px. Der Versatz war sichtbar und durch nichts gehalten, weil keine der drei Stellen von den anderen wusste. Wer den Rand ändert, ändert ihn hier. Zweite Stufe unter 992px am Dateiende. */ --app-gutter: 1.5rem; /* --navbar-height entfernt (FEATURE-0134 Welle 6, AC-48): letzter Konsument war .sidebar .brand (Desktop-Sidebar-Ära, abgebaut). */ /* Audit B4C/A4-12: Kopfhöhe federt gegen die Geräteaussparung — der env()-Anteil ist außerhalb von Notch-Geräten 0px. Alle Konsumenten (Header, Sidebar, Main-Panel, Landing-Nav) ziehen über var() mit; der Kopfinhalt selbst rückt per padding-top (app.css/cappuccino.css) unter die Systemanzeige. */ --mobile-header-height: calc(72px + env(safe-area-inset-top, 0px)); /* Audit B4GL/UX6-12: Höhe der öffentlichen Kopfleiste, seit sie haftet. Zusammensetzung am Desktop: 20px Polster + 50px Markenzeile + 20px Polster + 1px Rand. Unter 992px ist .landing-nav fixiert und misst --mobile-header-height (Überschreibung in cappuccino.css). Wer unter dem Kopf zu liegen kommen kann — haftende Tabellenköpfe, Sprungmarken — rechnet mit diesem Wert; .landing-nav setzt ihn als min-height, damit Token und tatsächliche Höhe nicht auseinanderlaufen. */ --landing-nav-height: 91px; /* Audit B4GL/A3-17: Symbolskala. Über alle Templates hinweg gab es 20 verschiedene size=-Werte, teils für dieselbe Situation (Hochladen mit 15 in _document_browser.html, mit 16 in core/document_upload.html). Die Leiter ist an der gelebten Verwendung entlang gewählt: 16 ist die Standardgröße (323 Fundstellen), 14 die dichte Variante (120), alles darüber ist Schmuck. Getilgt wurden nur Nachbarn ohne eigene Rolle — 9/11/13 neben 12, 15/17 neben 16, 18 neben 20, 28/36 neben 24/32, 40/44 neben 48, 60/80 neben 64. Die Zahlen gehören ins Markup ({% svg_icon … size=16 %}), die Tokens in CSS-Regeln, die eine Symbolgröße erzwingen — beide Hälften müssen dieselbe Leiter benutzen. Regelwerk: .claude/rules/frontend-design.md §5. */ --icon-xs: 12px; /* Legenden, Pill-Innensymbole, dichte Metazeilen */ --icon-sm: 14px; /* Tabellenzeilen, Chips, Buttons in Listen */ --icon-md: 16px; /* Standard: Fließtext, Formulare, Navigation */ --icon-lg: 20px; /* betont: Kartenköpfe, Zeitachsen-Knoten */ --icon-xl: 24px; /* Dropzones, Modal-Köpfe */ --icon-2xl: 32px; /* Schritt- und Kachelsymbole */ --icon-3xl: 48px; /* Leerzustände */ --icon-4xl: 64px; /* Fehlerseiten, Marketing-Anker */ /* App-Inhaltsfläche (body-Hintergrund in app.css) — Audit B4/UX4-14: aus dem :root von app.css hierher verschoben, tokens.css ist die einzige Token-Quelle (frontend-design.md §8). */ --content-bg: var(--milk); /* ============== Z-LAYERS (Audit B4/UX5-20) ============== */ /* Benennt die gelebte Stapel-Ordnung — Werte unverändert übernommen. Feinordnung innerhalb einer Ebene über calc(var(--z-…) + n) an der Verwendungsstelle. --z-modal/--z-toast decken sich bewusst mit Bootstraps Skala (Modal 1055, Toast 1090), damit Framework-Overlays korrekt einsortiert bleiben. Kleine z-index-Werte (0–100) in eigenen Stapelkontexten (Blobs, Scanner-Interna, Skip-Link) bleiben Literale. */ --z-sticky: 1030; /* fixierte Möbel: Status-Legende +0, Scanner-FAB und Landing-Kopfleiste +10, Fußleisten +15 */ --z-overlay: 1050; /* Mobilmenü/Sidebar, Landing-Menü, fixierte Tabs +0; App-Kopfleisten +1; Landing-Toggler +10 */ --z-modal: 1055; /* Dialoge (Bootstrap-Modal), Scanner-Vollbild */ --z-toast: 1090; /* Meldungen (Toast-Container); Scanner-Hinweise +0/+10 */ --z-loader: 2000; /* HTMX-Seiten-Spinner — bewusst über allem */ /* ============== MOTION ============== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.15s; --dur-base: 0.2s; --dur-slow: 0.3s; } /* Schmalere Geräte tragen einen kleineren Seitenrand — die einzige Stufe des Tokens. Sie steht hier und nicht bei den Konsumenten, damit Kopfleiste und Inhalt sie gemeinsam nehmen: die frühere Fassung senkte den Inhalt unter 576px auf 12px, während die Kopfleiste bei 16px blieb. */ @media (max-width: 991.98px) { :root { --app-gutter: 1rem; } }