/* ============================================================================ Konzeptberater — Design-Tokens (DIE EINE WAHRHEIT) 3 Ebenen: Basis-Werte -> Semantik (c-...) -> Komponente (btn-..., card-...) Marke: KassenKompass — hell & klar, kräftige Lila-Akzente, viel Weiß (nicht milchig). Regel: NIE Hex/px hart in Templates — immer Token. Button global aendern = 1 Token. ========================================================================== */ /* --- Onest (self-hosted, CSP 'self'; Variable-Font 100–900, kein CDN) ---- */ @font-face { font-family: 'Onest'; src: url('../fonts/onest/Onest-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* --- Ebene 1: Basis-Werte (roh) ----------------------------------------- */ :root { /* Lila-Akzent — vibrant */ --kk-violet-900:#3B1E7E; /* Dunkellila — Überschriften (Bonusrechner-Look) */ --kk-violet-800:#5B21B6; --kk-violet-700:#6D28D9; /* primär */ --kk-violet-600:#7C3AED; /* accent / hover */ --kk-violet-500:#8B5CF6; --kk-violet-300:#C4B5FD; --kk-violet-100:#EDE9FE; /* helles Lila — aktive/hover-Fläche */ --kk-violet-50:#F5F3FF; /* Flächen — warmer Creme-Look (Bonusrechner-Rebrand, Alex 2026-07-30): Seitengrund warmes Grau, Karten creme, Shell (Sidebar/Topbar) heller Creme. Innere Kacheln/Inputs bleiben Weiß (--kk-white) für klaren Kontrast. */ --kk-white:#ffffff; --kk-bg:#F1EFEA; /* warmer Seitengrund */ --kk-cream:#FBF8F2; /* Karten */ --kk-cream-bd:#EDE6D9; /* Karten-Rahmen */ --kk-shell:#FBFAF7; /* Sidebar/Topbar */ --kk-shell-bd:#E7E2D8; /* Shell-Rahmen */ --kk-muted:#F1F0F7; /* gedämpfte Fläche / Hover */ /* Rahmen — leicht violett/warm getönt (Handoff-Werte) */ --kk-border:#E3DCEF; --kk-border-soft:#EDE6D9; /* Fall-Seite / Ausgaben-Liste — Bonusrechner-Töne */ --kk-violet-tile-bd:#E9E2F2; /* weiße Kachel-/Listen-Rahmen */ --kk-violet-chip:#F3EEFA; /* Icon-Chip-Fläche */ --kk-violet-summe:#F6F1FB; /* Summenzeile */ --kk-violet-trenner:#F1ECF7; /* Zeilentrenner */ --kk-ink-faint:#C3BAD4; /* sehr helle Trenner (à, oder, —) */ /* Text — neutral, klar lesbar */ --kk-ink:#1F1B2E; --kk-ink-muted:#6B6880; --kk-ink-soft:#9A97AD; /* Status — Lila + Grautöne, plus ein kräftiges Rot für Risiko/Fehler. positiv = Lila, Info/Hinweis = Grau, negativ = Kaminrot. */ --kk-success:#6D28D9; --kk-success-soft:#EDE9FE; /* positiv/aktiv = Lila */ --kk-warning:#46435A; --kk-warning-soft:#E8E7EF; /* Hinweis = dunkleres Grau */ --kk-error:#A82A1E; --kk-error-soft:#F7E9E7; /* negativ = Kaminrot (echtes Rot, Owner 2026-07-30) */ --kk-info:#5A576A; --kk-info-soft:#EEEDF3; /* Info = Grau */ /* Ersparnis-Grün — bewusste Ausnahme NUR für die Kunden-Konzept-Präsentation (explizite Owner-Entscheidung 2026-07-14): Ersparnis = Grün, Mehrbeitrag = Lila. Abweichung zur Konsole (dort Ersparnis = Lila, Mehrbeitrag = Dunkelrot). */ --kk-green:#0E8F5D; --kk-green-soft:#E3F5EC; /* Rahmen-Töne der Lebenslagen-Kacheln (Design-Handoff „Kacheln", 2026-07-16). Verletzen die „nur Violett"-Regel nicht: es sind Abstufungen der beiden erlaubten Rollen-Ausnahmen (Dunkelrot = zahlst du selbst, Grün = gedeckt) + Grau. */ --kk-green-bd:#C3E9D4; --kk-error-bd:#E6C6C1; /* Leise Flächen der Konzept-Gegenüberstellung (v6): heller als *-soft, damit eine aufgeklappte Zeile sich abhebt, ohne wie ein Alarm/Erfolg zu wirken. */ --kk-error-leise:#FCF5F4; --kk-green-leise:#F6FCF9; --kk-violet-bd:#DDD6FE; /* Bernstein — DRITTE bewusste Farb-Ausnahme (Owner-Entscheidung 2026-07-28), gilt NUR in der Antragsstrecke: dort muss „erledigt" (Grün) von „fehlt noch" auf einen Blick trennbar sein. Grau wäre in der Zwei-Zonen-Ansicht nicht unterscheidbar genug. Außerhalb der Antragsstrecke bleibt Gelb verboten. */ --kk-amber:#B78103; --kk-amber-soft:#FBF3DD; --kk-amber-bd:#EBDCB2; --kk-grau-bd:#D8D5E0; --kk-grau-bd-dash:#C9C6D6; --kk-grau-bd-leise:#EAE8F1; /* Backoffice-Vorschau (bo-*): Fragment- + Browser-Chrome-Flächen, die es sonst nirgends gibt (Design-Handoff 2026-07-30). Nur hier als Roh-Wert erlaubt. */ --kk-bo-fragment:#F6F4EF; /* abgesetzte Fragment-Fläche „das sieht der Kunde" */ --kk-bo-chrome:#F8F7FC; /* Browser-Leiste / Preis-Zeile */ --kk-bo-chrome-bd:#EEE9F5; /* Rahmen der Browser-Leiste */ --kk-bo-dot:#E4E0EE; /* graue Browser-Punkte / Chip-Rahmen */ --kk-bo-row-hover:#FCFBFF; /* Listen-Zeile Hover */ --kk-bo-ink-2:#4B4460; /* Erklär-Text (etwas dunkler als muted) */ } /* --- Ebene 2: Semantik (so denkt das UI) -------------------------------- */ :root { --c-bg:var(--kk-bg); --c-surface:var(--kk-white); --c-surface-raised:var(--kk-white); --c-surface-muted:var(--kk-muted); --c-text:var(--kk-ink); --c-text-muted:var(--kk-ink-muted); --c-text-soft:var(--kk-ink-soft); --c-text-on-accent:#ffffff; --c-primary:var(--kk-violet-700); --c-primary-hover:var(--kk-violet-800); --c-accent:var(--kk-violet-600); --c-accent-2:var(--kk-violet-500); --c-border:var(--kk-border); --c-border-soft:var(--kk-border-soft); --c-focus:var(--kk-violet-500); --c-focus-ring:rgba(124,58,237,.22); --c-success:var(--kk-success); --c-success-bg:var(--kk-success-soft); --c-warning:var(--kk-warning); --c-warning-bg:var(--kk-warning-soft); --c-warning-text:var(--kk-warning); --c-error:var(--kk-error); --c-error-bg:var(--kk-error-soft); --c-info:var(--kk-info); --c-info-bg:var(--kk-info-soft); --c-spart:var(--kk-green); --c-spart-bg:var(--kk-green-soft); /* Konzept: Ersparnis */ /* Typografie */ --font-sans:'Onest','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --fs-h1:1.5rem; --fs-h2:1.125rem; --fs-h3:1rem; --fs-body:0.9375rem; --fs-sm:0.8125rem; --fs-caption:0.75rem; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --lh:1.5; /* Radius */ --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:9999px; /* Abstand (4er-Raster) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; /* Schatten (dezent) */ --sh-sm:0 1px 2px rgba(31,27,46,.05); --sh-card:0 1px 3px rgba(31,27,46,.07), 0 1px 2px rgba(31,27,46,.04); --sh-lg:0 12px 28px -8px rgba(91,33,182,.18); /* Bewegung */ --t-fast:.15s ease; --t:.2s ease; --t-slow:.3s ease; --dur-fast:.15s; --dur-base:.2s; --dur-slow:.55s; --ease-out:cubic-bezier(.33,1,.68,1); /* Layout */ --sidebar-w:260px; --header-h:64px; --content-max:1200px; --concept-max:680px; } /* --- Ebene 3: Komponenten-Tokens (1 Stelle aendern -> ueberall) ---------- */ :root { --btn-primary-bg:var(--c-primary); --btn-primary-fg:var(--c-text-on-accent); --btn-primary-bg-hover:var(--c-primary-hover); --btn-secondary-bg:var(--c-surface-raised); --btn-secondary-fg:var(--c-primary); --btn-secondary-bd:var(--c-border); --btn-radius:var(--r-sm); --btn-pad-y:10px; --btn-pad-x:18px; --card-bg:var(--kk-cream); --card-bd:var(--kk-cream-bd); --card-radius:var(--r-lg); --card-shadow:var(--sh-card); --card-pad:var(--sp-6); --field-bg:var(--c-surface-raised); --field-bd:var(--c-border); --field-radius:var(--r-sm); --field-h:44px; --field-focus:var(--c-focus); --badge-radius:var(--r-full); /* Backoffice-Sidebar + Topbar — heller Creme-Shell (Bonusrechner-Look) */ --sidebar-bg:var(--kk-shell); --topbar-bg:var(--kk-shell); --sidebar-fg:var(--kk-ink); --sidebar-fg-muted:var(--kk-ink-muted); --nav-hover-bg:var(--kk-muted); --nav-active-bg:var(--kk-violet-100); --nav-active-fg:var(--c-primary); /* Accordion-Navigation (Design-Handoff „handoff-navigation", 2026-07-30). */ --nav2-active-bg:var(--kk-violet-100); /* aktive Fläche */ --nav2-active-fg:var(--kk-violet-800); /* aktiver Text (dunkles Lila) */ --nav2-fg:#4B4460; /* Top-Zeile inaktiv */ --nav2-child-fg:var(--c-text-muted); /* Kind-Zeile inaktiv */ --nav2-icon:var(--c-text-soft); /* Icon inaktiv */ --nav2-icon-active:var(--c-primary); --nav2-chip-bg:var(--kk-bg); /* Icon-Chip inaktiv */ --nav2-chip-bg-active:var(--kk-violet-100); --nav2-trenner:#B8B0C6; /* Abschnitts-Trenner */ --nav2-line-active:var(--c-primary); /* Führungslinie: aktiv */ --nav2-line-path:var(--kk-violet-300); /* im Pfad */ --nav2-line-none:var(--kk-shell-bd); /* sonst */ --nav2-dot:var(--c-primary); /* Zuklapp-Punkt */ /* Berater-Konsole (Design-Handoff 2026-07-14) */ --pop-shadow:0 12px 28px -8px rgba(91,33,182,.2), 0 4px 12px rgba(31,27,46,.08); /* Combo/Popover */ --combo-panel-shadow:var(--pop-shadow); --combo-option-hover:var(--kk-violet-50); --person-accent-bd:var(--kk-violet-300); /* Akzentkante trennt die Personen-Blöcke */ --baustein-active-bd:var(--kk-violet-300); --baustein-off-bg:#FBFBFD; --bilanz-pos-bg:var(--kk-violet-100); /* neutraler Default = Lila */ --bilanz-spart-fg:var(--c-spart); /* Ersparnis = Grün */ --bilanz-neg-bg:var(--kk-violet-100); /* Mehrbeitrag = Lila (bewusst keine negativen Farben) */ --bilanz-neg-fg:var(--c-primary); --bilanz-num-size:2.375rem; /* 38px Held-Zahl */ --bilanzbar-shadow:0 -12px 28px -12px rgba(91,33,182,.22); --bilanz-ink:var(--kk-ink); /* dunkle Bilanz (Kundenseite/Konzept) */ --bilanz-glow:rgba(139,92,246,.35); --gkv-block-bg:var(--kk-violet-50); --gkv-block-bd:var(--kk-violet-100); --banner-bg:var(--kk-violet-50); --banner-bd:var(--kk-violet-300); --banner-fg:var(--kk-violet-800); /* Kunden-Konzept — Empfehlungs-Box (lila umrandet wie Konsole) + Ergebnis-Hero */ --konzept-empfehlung-bd:var(--kk-violet-300); --konzept-hero-mehr-bg:var(--kk-violet-100); /* Mehrbeitrag = Lila */ --konzept-hero-spart-bg:var(--c-spart-bg); /* Ersparnis = Grün */ /* „Situation heute": offene Lücke dezent gedämpft, Abgesichertes grün */ --luecke-mark-fg:var(--c-text-soft); --luecke-betrag-fg:var(--c-text); --luecke-ok-fg:var(--c-spart); --luecke-loesung-fg:var(--c-primary); /* Konzept-Umschalter (Heute / Mit Konzept) — Segment-Pille */ --tabs-bg:var(--c-surface-muted); --tabs-btn-fg:var(--c-text-muted); --tabs-btn-active-bg:var(--c-surface); --tabs-btn-active-fg:var(--c-primary); /* Versorgungs-Konzept: Lebenslagen-Kacheln (Design-Handoff 2026-07-16). Nur Euro und Sätze — keine Prozente/Balken. Jeder Zustand trägt AUCH ohne Farbe (Wort + Glyph-Form + Rahmen), weil oft schwarz-weiß gedruckt wird. */ --vk-avatar-bg:var(--kk-violet-100); --vk-avatar-fg:var(--c-primary); --vk-name-fs:2rem; --vk-name-fg:var(--c-primary); --vk-karte-bg:var(--c-surface); --vk-karte-bg-leise:var(--baustein-off-bg); --vk-karte-radius:18px; --vk-icon-kachel-bg:var(--kk-violet-50); /* Zustand „selbst" — Dunkelrot-Ausnahme (negativ) */ --vk-selbst-bg:var(--c-error-bg); --vk-selbst-fg:var(--c-error); --vk-selbst-bd:var(--kk-error-bd); /* Zustand „teilweise" — Violett */ --vk-teil-bg:var(--kk-violet-100); --vk-teil-fg:var(--c-primary); --vk-teil-bd:var(--kk-violet-bd); /* Zustand „gedeckt" — Grün-Ausnahme (Kunde spart) */ --vk-gedeckt-bg:var(--kk-green-soft); --vk-gedeckt-fg:var(--kk-green); --vk-gedeckt-bd:var(--kk-green-bd); /* Zustand „offen" — ruhig/grau, KEIN Alarm: „wir wissen es noch nicht" ≠ „nicht abgedeckt" */ --vk-offen-bg:var(--c-warning-bg); --vk-offen-fg:var(--c-warning); --vk-offen-bd:var(--kk-grau-bd); --vk-offen-dash:var(--kk-grau-bd-dash); /* Zustand „kein Bedarf" — zurückgenommen, darf nicht nach Mangel aussehen */ --vk-kein-bg:var(--c-surface-muted); --vk-kein-fg:var(--c-text-soft); --vk-kein-bd:var(--kk-grau-bd-leise); --vk-kein-op:.66; --vk-bilanz-num:2.125rem; /* Kundenname auf dem Konzept — bewusst groß/farbig, damit der Kunde sich wiederfindet. NUR dort (Owner-Entscheidung 2026-07-16), sonst bleibt Typo-Hierarchie wie gehabt. */ --konzept-kunde-fs:2rem; --konzept-kunde-fg:var(--c-primary); /* Ladebalken — schmale Fortschrittsleiste oben während AJAX-Neuberechnung. Sofort-Feedback, dass ein Klick angekommen ist (gegen „gefühlt passiert nichts"). */ --ladebalken-fg:var(--c-primary); --ladebalken-h:3px; --ladebalken-dur:.9s; /* Modal (Bestätigungs-Dialog) — ersetzt das native confirm() im eigenen UI */ --modal-backdrop:rgba(31,27,46,.45); --modal-box-w:420px; --modal-box-w-breit:680px; /* Kassen-Vergleich (v6): braucht 3 Spalten */ --modal-box-w-edit:880px; /* Baustein-Editor: Frequenz-Zeilen + Tarifliste mit Badges/Preis/Info OHNE Quer-Scroll (Owner 2026-08-03) */ /* ── Konzept-Präsentation, zwei Schritte (ks-*, v9) ───────────────────────── Owner-Prototyp „Gesundheitskonzept v9 D": Schritt 1 zeigt nur die Aktuell- Spalte (rosé), Schritt 2 stellt die Empfehlung (grün) daneben. Dieselben Marken-Töne wie die Kachel-Zustände; die Summenzeile kehrt sie als Vollfläche um. `--kg-*` bleibt als gemeinsame Farbebene bestehen (Steuerung + Modal). */ --kg-heute-bd:var(--kk-error-bd); --kg-heute-fg:var(--kk-error); --kg-heute-zeile-bg:var(--kk-error-leise); --kg-konzept-bd:var(--kk-green); --kg-konzept-fg:var(--kk-green); --kg-konzept-zeile-bg:var(--kk-green-leise); --kg-icon:36px; /* Icon-Kachel im Modal-Kopf (Bild 22 px); war nie definiert — Fund des Token-Wächters 2026-07-31 */ /* v9 D FINAL (2026-07-29): Basisgrößen aus dem Owner-Prototyp nachgemessen. */ --ks-zoom:1.15; /* Gesamtseite ~15 % größer (Prototyp) */ --ks-spalte-kat:200px; /* Kategorie-Spalte (ohne Kasten) */ --ks-spalte-delta:68px; /* Pfeil-/Delta-Spalte */ --ks-zeile-radius:var(--r-lg); --ks-scan-w:840px; /* Schritt 1: Ein-Spalten-Scanliste */ --ks-scan-icon:44px; /* Icon-Feld Schritt 1 (Bild 28 px) */ --ks-icon:40px; /* Icon-Feld Schritt 2 (Bild 28 px) */ --ks-icon-bild:28px; --ks-punkt:9px; /* Status-Punkt der Scanliste */ --ks-balken:4px; /* linker Schweregrad-/Seitenbalken */ /* Schweregrade: hoch = Kaminrot (--kk-error), gering = Ink-Soft; mittel = echtes Orange (nicht mehr bräunlich, Owner 2026-07-30) — bewusst nicht --kk-amber (B78103, Antragsstrecke). */ --ks-grad-hoch:var(--kk-error); --ks-grad-mittel:#E8720E; --ks-grad-gering:var(--kk-ink-soft); /* 12-%-Tönungen der Summenzellen + Banner (45 % für die Rahmen). */ --ks-tint-a-bg:rgba(168,42,30,.12); --ks-tint-a-bd:rgba(168,42,30,.45); --ks-tint-e-bg:rgba(14,143,93,.12); --ks-tint-e-bd:rgba(14,143,93,.45); --ks-banner-bg:var(--ks-tint-e-bg); --ks-banner-bd:var(--ks-tint-e-bd); --ks-banner-fg:var(--kk-green); --ks-banner-mehr-bg:var(--kk-violet-50); --ks-banner-mehr-bd:var(--kk-violet-bd); --ks-banner-mehr-fg:var(--c-text); /* Delta-Spalte: laufende Ersparnis grün/fett, vermiedenes Risiko ruhig grau. */ --ks-fazit-fs:30px; /* Fazit-Betrag (× Zoom ≈ 34 px) */ --ks-summe-fs:26px; /* Summenzellen-Betrag (Prototyp) */ --ks-delta-laufend:var(--kk-green); --ks-delta-risiko:var(--c-text-muted); --ks-delta-leise:var(--kk-ink-soft); /* Pinsel-Chip im Kartenkopf (Edit-Modal-Handoff 2026-07-30). */ --ks-edit-bg:rgba(109,40,217,.12); --ks-edit-bg-hover:rgba(109,40,217,.2); --ks-edit-fg:var(--c-primary); /* GKV-Hero (Konzept Schritt 1, Design-Handoff 2026-07-30). */ --ks-hero-bd:#E4DEF0; --ks-hero-tile-bg:#F8F7FC; --ks-hero-tile-bd:var(--c-border-soft); --ks-hero-shadow:0 6px 20px -6px rgba(31,27,46,.12); /* ── Regie-Präsentation v11 B (.kr-*) — Owner-Paket handoff-v11b, 2026-07-31. Rosé = „Aktuell/Risiko" (ersetzt in der Regie das Kaminrot), Dunkel-Lila = Regie-Akzent (aktive Chips, Trenner, gefüllte Buttons), Optimiert-Grün = bestehende Grün-Ausnahme der Konzept-Präsentation. */ /* ── Übersichtskarten v13 B Kompakt (.ku-*) — Handoff 2026-08-03. */ --ku-karte-bd:#E9E6F1; --ku-linie:#F3F1F8; --ku-vorher-label:#C4A9B3; --kr-akzent:#2E1065; --kr-rose:#9E5267; --kr-rose-bg:rgba(158,82,103,.07); --kr-rose-bg-stark:rgba(158,82,103,.1); --kr-rose-bd:rgba(158,82,103,.28); --kr-rose-bd-stark:rgba(158,82,103,.35); --kr-gruen:var(--kk-green); --kr-gruen-bg:rgba(14,143,93,.07); --kr-gruen-bg-stark:rgba(14,143,93,.12); --kr-gruen-bd:rgba(14,143,93,.35); --kr-chip-durch-bg:#FBF4F6; /* Schritt 1: abgeschlossenes Kapitel (rosé) */ --kr-chip-durch2-bg:#EDFAF3; /* Schritt 2: abgeschlossenes Kapitel (grün) */ --kr-chip-besucht-bd:#B9A8E4; --kr-karte-bd:#E4E1EC; --kr-karte-trenner:#F0EEF6; --kr-kopf-bg:#FAF9FD; /* Szenario-Kopfzeile + Icon-Spalte */ --kr-pill-hoch:#B4324F; --kr-pill-hoch-bd:rgba(180,50,79,.4); --kr-pill-mittel:#A96318; --kr-pill-mittel-bd:rgba(169,99,24,.4); --kr-pill-gering:#8783A0; --kr-pill-gering-bd:#DDDAE8; /* Prototyp-Radien (Karten 11–14 px, Innen-Boxen 8–10 px) — bewusst eigene Tokens statt --r-md/lg, die Regie ist feiner abgestuft als der Rest. */ --kr-radius:11px; /* Szenario-/Vergleichs-/Blick-Karten, Banner */ --kr-radius-gross:14px; /* Kapitelkarte, Vorher/Nachher-Boxen */ --kr-radius-box:10px; /* Aktuell-/Optimiert-Boxen, Regie-Buttons */ --kr-radius-innen:8px; /* Logo-Kachel, Blick-Innenboxen */ --kr-icon-spalte:128px; /* Szenario-Icon-Spalte (Icon ~104 px) */ --kr-icon:104px; --kr-basis-logo-w:84px; /* weiße Logo-Kachel im Basisschutz-Band */ --kr-basis-logo-h:54px; /* ── Konsole-Stepper (kst-*, Design handoff-konsole 2026-07-29) ──────────── Basisgrößen aus dem Prototyp „Beraterkonsole Stepper": Nav 220–260 px, Schritt-Punkt 24 px, Karte 18-px-Radius mit 28/32-Padding. */ --kst-nav-w:240px; --kst-bilanz-w:352px; /* Die Stepper-Seite nutzt breite Displays voll aus (Owner 2026-07-29) — deutlich über --content-max, aber gedeckelt, damit Ultrawide nicht zerfließt. */ --kst-max:1760px; --kst-punkt:24px; --kst-karte-radius:18px; --kst-stat-bg:var(--kk-bg); --kst-punkt-fertig:var(--kk-green); /* ✓ erledigt (Owner-Prototyp) */ /* ── Antragsstrecke (A3-Redesign 2026-07-28) ─────────────────────────────── Zwei Zonen: „aus der Beratung übernommen" (Grün) vs. „das brauchen wir noch" (Bernstein). Ausgelöste Felder erscheinen als violette Unterkarte. */ --antrag-ok-fg:var(--kk-green); --antrag-ok-bg:var(--kk-green-soft); --antrag-ok-bd:var(--kk-green-bd); --antrag-ok-leise:var(--kk-green-leise); --antrag-offen-fg:var(--kk-amber); --antrag-offen-bg:var(--kk-amber-soft); --antrag-offen-bd:var(--kk-amber-bd); --antrag-unter-bg:var(--kk-violet-50); --antrag-unter-bd:var(--kk-violet-bd); --antrag-seg-h:42px; /* Touch-Ziel der Ja|Nein-Knöpfe */ --antrag-seg-bd:1.5px; --antrag-widget-w:220px; /* feste Widget-Spalte der Frage-Zeilen */ --antrag-feld-min:200px; /* Grid-Mindestbreite im Chip-Feldraster */ --antrag-balken-h:8px; --antrag-footer-bg:rgba(255,255,255,.92); --antrag-footer-blur:blur(8px); --antrag-max:860px; /* Lesebreite der Strecke (wie Prototyp) */ --konzept-hero-num:3rem; /* 48px — deutlich größer als Konsole (38px) */ --konzept-hero-shadow:0 12px 28px -10px rgba(91,33,182,.20); /* ── Fall-Seite: Ausgaben-Redesign (Bonusrechner-Look, Alex 2026-07-30) ───────── Zeilen-Liste je Konto statt 4-Spalten-Grid: weiße Liste auf Creme-Karte, Icon-Chip, Cluster-Inputs auf Shell-Ton, grüne Kurz-Zusammenfassung (Ersparnis-Grün-Ausnahme), violett getönte Summenzeile. Spec: wissen/design-system.md §Fall-Seite. */ --fall-titel-fg:var(--kk-violet-900); --fall-kennzahl-bg:var(--c-surface); --fall-kennzahl-bd:var(--kk-violet-tile-bd); --fall-icon-bg:var(--kk-violet-chip); --fall-icon-fg:var(--c-primary); --fall-summary-fg:var(--c-spart); /* grüne Kurz-Summe = Ersparnis-Grün-Ausnahme */ --konto-liste-bd:var(--kk-violet-tile-bd); --konto-trenner:var(--kk-violet-trenner); --konto-input-bg:var(--kk-shell); --konto-summe-bg:var(--kk-violet-summe); --konto-summe-fg:var(--kk-violet-800); /* Konzept v3 — Gegenüberstellungs-Matrix (Design-Handoff „Vergleich v3", 2026-07-27). Lebenslagen als Spalten, drei Zeilen (Heute/Mit Konzept/Dein Vorteil). Zeilen-Flächen: sehr leise Tönungen der beiden Rollen-Ausnahmen (Rot/Grün). */ }