/* ============================================================================ 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-200:#DDD6FE; /* Hover-Stufe der Secondary-Buttons (T16) */ --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; /* Handoff 28.08. „Mehrwert statt Minus" (Baustein-Detail 3a/Zustand B): Leistungs-Hero-Fläche (heller als green-soft) + Navy-CTA des „Alles auf einen Blick"-Buttons. Alle übrigen Handoff-Farben sind bestehende Tokens (violet-Familie, ink-Familie, cream, border). */ --kk-green-hero:#F0FAF5; --kk-navy-cta:#2A1B4D; /* Großprojekt „Baustein-Fokus" (Design-Handoff 3108, Owner 31.08.): Beige-Container + Sand-Typo + grünes Leistungsfeld + Broschüren-Navy der neuen Baustein-Detailseite (k2-bd-Umbau). NUR hier als Roh-Wert erlaubt; Lila-/Grün-Kerntöne (#6D28D9/#0E8F5D) sind bestehende Tokens. */ --kk-bf-bg:#FFFFFF; /* Karte 257 (T9fKFoxP, Owner 01.09.): war Beige-Container #FDFAF1 - kein gelber Grund mehr */ --kk-bf-bd:#E9E6F1; /* Karte 257: neutraler Rahmen statt Beige-Rand (war #F2EAD8) */ --kk-bf-innen-bd:#ECEAF2; /* Logo-Box + weiße Kacheln (Karte 257: war #EFEBE0) */ --kk-bf-sand:#A79A80; /* Unterzeilen */ --kk-bf-sand-kopf:#B4A98D; /* Tabellen-Kopfzeilen */ --kk-bf-sand-trenner:#EEECF3; /* Karte 257: war #F0E7D4 */ --kk-bf-tab-bd:#E4E1EC; /* aktiver Reiter (Karte 257: war #E3D9C2) */ --kk-bf-reiter-bg:#F4F3F7; /* Karte 256: Reiter-Leiste (Track), aktiver Tab bleibt weiß - Karte 257: neutral statt #F3ECDB */ --kk-bf-gruenfeld-bg:#F4FBF7; --kk-bf-gruenfeld-bd:#DCEFE5; --kk-bf-gruen-tief:#14532D; /* Leistungsfeld-Titel */ --kk-bf-gruen-zeile:#35604B; /* Leistungs-Labels */ --kk-bf-gruen-trenner:#E4F1EA; --kk-bf-navy:#2E1065; /* Broschüre-/Weiter-Button */ --kk-bf-flieder-bd:#DDD8EA; /* Vergleichen-Button-Rand */ --kk-bf-balken-prognose:#C4B5FD; /* Baustein-Fokus PR B — Absicherungs-Hero (§4) + spart-Variante (§f) + „deine Angabe"-Chip (§b). */ --kk-bf-hero-bg:#F3EEFE; --kk-bf-hero-bd:#E4DEF7; --kk-bf-hero-label:#8B7BB8; --kk-bf-spart-bg:#F0F8F4; --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 — ~~ZWEITE sanktionierte Stelle seit 2026-08-27 (Owner, Trello 191): der „offen"-Status im Haus der Gesundheit~~ ist mit dem Haus am 08.09. entfallen; Bernstein gilt damit wieder NUR in der Antragsstrecke. */ --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; --fw-extrabold:800; /* Handoff 28.08.: Hero-Prozent + Preis-Karten-Wert */ --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; /* Berater-Leiste (Owner 04.09.): Die Leiste sprang beim leisesten Streifen auf. Drei Zeiten steuern das Verhalten — bewusst als Tokens, damit der Owner sie an EINER Stelle nachjustieren kann: · -oeffnen = Absichts-Schwelle. Wer nur vorbeifährt, löst nichts aus. · -dauer = die Bewegung selbst, spürbar langsamer als --dur-base. · -halten = wie lange sie nach dem Verlassen offen BLEIBT (Owner: drei Sekunden) — das verhindert das Zuklappen, wenn die Maus kurz danebengerutscht ist. */ --topbar-klapp-oeffnen:.22s; --topbar-klapp-dauer:.38s; --topbar-klapp-halten:3s; --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 { /* Button-Hierarchie (D-ButtonStandard, Owner 2026-08-11 — überstimmt die WCAG-motivierte Abdunklung vom Mittag; einheitliche Designsprache schlägt sie, Owner-Entscheid in wissen/projekt-entscheidungen.md): Primary = Oles ECHTES helles Lila (violet-500). Kontrast-Abstimmung über Text/Fläche statt anderem Markenton: weißer, fetter Text ist die beste Kombination im Ton (4,2:1 — dokumentiert, Owner-akzeptiert). Secondary = Outline im selben Farbton (Karte QugrK9yq: heller Grund, Lila-Rahmen, Lila-Text). Skip-/Alternativ-Aktionen max. Secondary. */ --btn-primary-bg:var(--kk-violet-500); --btn-primary-fg:var(--c-text-on-accent); --btn-primary-bg-hover:var(--kk-violet-600); --btn-secondary-bg:var(--c-surface); --btn-secondary-bg-hover:var(--kk-violet-50); --btn-secondary-fg:var(--kk-violet-700); --btn-secondary-bd:var(--kk-violet-500); --btn-radius:var(--r-sm); /* Karte 186 (Owner 27.08.): Auf-/Zuklapp-Pfeile ~3x so gross wie die alten Mini-Pfeile (~10px) — EIN Wert wirkt ueberall (.vk-vorteil__pfeil). */ --klapp-pfeil:30px; --btn-pad-y:10px; --btn-pad-x:18px; /* Infopill + Hover-Popup (Design-Library T13, Ole 2026-08-11): Infopill = kompakter Fakten-Chip statt Textblock; die Erklärung liegt im Hover-Popup (CSS-only, hover/focus — im Druck erscheint sie inline). Für Inhalte mit Interaktion/Listen gilt weiter das normale Popup (.modal / ). */ --infopill-bg:var(--kk-violet-50); --infopill-fg:var(--kk-violet-800); --infopill-bd:var(--kk-violet-bd); --infopill-warn-bg:var(--kk-error-leise); --infopill-warn-fg:var(--kk-error); --infopill-warn-bd:var(--kk-error-bd); --infopill-ok-bg:var(--kk-green-leise); --infopill-ok-fg:var(--kk-green); --infopill-ok-bd:var(--kk-green-bd); /* Topbar-Benutzer (Karte 133): runder Initialen-Avatar + Name/Rolle — Violett-Familie wie infopill (positiv/identitär, Marken-Regel). */ --tb-avatar-bg:var(--kk-violet-50); --tb-avatar-fg:var(--kk-violet-800); --tb-avatar-bd:var(--kk-violet-bd); --tb-avatar-groesse:30px; --hoverpop-w:320px; --hoverpop-bg:var(--c-surface); --hoverpop-bd:var(--c-border); --hoverpop-shadow:var(--pop-shadow); /* Karte #83: Mindestbreite der Posten-Liste im Hover (Label + Betrag je Zeile) */ --hoverpop-posten-minw:240px; --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); /* Antrags-Pflichtfeld ohne Angabe (Owner 2026-08-10): roter Platzhalter + leise Tönung, solange das Feld leer ist — Vertriebler sieht Lücken sofort. */ --field-fehlt-fg:var(--kk-error); --field-fehlt-bd:var(--kk-error-bd); --field-fehlt-bg:var(--kk-error-leise); --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); /* Saldenliste (Design-Handoff 07.09.2026, PR 3): Farben der drei-Salden-Bilanz. Plus = Grün (Ersparnis-Token), Minus = Lila (bewusst kein Rot, wie bilanz-neg), Deckel-Tag = Lila-Fläche statt Bernstein (Bernstein nur Antragsstrecke/Haus-Status). */ --sl-plus-fg:var(--bilanz-spart-fg); --sl-minus-fg:var(--bilanz-neg-fg); --sl-pille-bg:var(--kk-violet-50); --sl-pille-gut-bg:var(--kk-green-soft); --sl-pille-gut-fg:var(--kk-green); --sl-tag-bg:var(--kk-violet-50); --sl-tag-fg:var(--kk-ink-muted); --sl-tag-deckel-bg:var(--kk-violet-100); --sl-tag-deckel-fg:var(--c-primary); --sl-tag-ok-bg:var(--kk-green-soft); --sl-tag-ok-fg:var(--kk-green); --sl-kontrolle-bd:var(--kk-violet-200); --sl-sub-strich:var(--c-border-soft); --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) */ /* ── Bestandsvertrag-Picker + Tarif-Duell (Handoff Zahn-Modal, 2026-08-04) ── */ --bestand-label-w:240px; /* Label-Spalte im Vollraster (Stufe 2) */ --bestand-kern-cols:3; /* verdichtete Kopfansicht: 3 Spalten × 2 Zeilen */ --bestand-raster-bg:var(--kk-violet-50);/* Grund des aufgeklappten Standard-Rasters */ /* Presse-Popup (Owner 08.09.): fast bildschirmfuellend — drei Karten je Zeile, sechs Artikel ohne Scrollen. Die Masse sind DURCHGEMESSEN, nicht geschaetzt: Zielgroesse war ein 13"-MacBook MIT Lesezeichenleiste (1440x740), dort bleiben 26 px Reserve. Wer eine Zahl hier aendert, misst gegen diesen Fall nach — sonst sind die unteren drei Karten abgeschnitten. */ /* Mobil (Owner 2026-09-09): Seitenmenü + Kopfleiste. Der Breakpoint ist die EINE Stelle, an der „ab wann Handy-Layout" steht. */ /* Ereignis-Liste Zahn (Owner-Layout Canva 09.09.): vier Spalten. Die Spaltenbreiten stehen HIER, damit Kopfzeile und Zeilen zwingend dieselben nutzen — sonst rutscht die Beschriftung gegen die Werte. */ /* ── Mobile Library (Owner-Auftrag 2026-09-09) ──────────────────────────── Eigener Token-Satz für die Handy-Bausteine in mobil.css. BEWUSST getrennt von den k2-/kk-Tokens: Die mobile Sprache soll sich unabhängig entwickeln können, ohne dass eine Desktop-Änderung sie mitzieht (Owner: „soll sich nicht vermischen"). Werte verweisen auf die Marken-Basis, sind aber einzeln überschreibbar. */ --m-flaeche:var(--kk-white); --m-flaeche-still:var(--kk-muted); --m-flaeche-aktiv:var(--kk-violet-100); --m-linie:var(--kk-border); --m-linie-stark:var(--kk-grau-bd); --m-text:var(--kk-ink); --m-text-leise:var(--kk-ink-muted); --m-aktion:var(--kk-violet-700); --m-warn:var(--kk-error); /* rotes Ausrufezeichen = Eigenanteil */ --m-info-linie:var(--kk-ink-soft); --m-gruen:var(--kk-green); /* Etikett auf der Unterkante der Optimierungs-Box. Owner 10.09.: heller als --m-gruen, weil das Etikett auch auf der GELBEN Box steht (Restanteil) und dort sonst schwer wirkt. Untergrenze ist der Kontrast: 3,17:1 auf dem Seitengrund — noch ueber dem 3:1-Minimum fuer kleine fette Schrift; --m-gruen selbst lag bei 3,71:1. Wer weiter aufhellt, unterschreitet es. */ --m-gruen-etikett:#109C68; --m-gruen-flaeche:#F7FCF9; --m-gruen-linie:#DFF0E7; --m-schleier:rgba(31, 27, 46, .55); --m-radius:14px; --m-radius-innen:10px; --m-kachel-luft:10px; /* Polster fuer Text und Icon */ --m-kachel-bild:112px; /* Vorlage „Beim Zahnarzt.html" (Owner/Fiona 09.09.): 112 x 64, Status-Box gleich hoch */ --m-kachel-bild-h:64px; --m-kachel-hoehe:auto; /* keine feste Kachelhoehe mehr — Titel oben, Bild darunter */ --m-kachel-abstand:40px; /* Luft statt Rahmen zwischen den Kacheln (Owner: mehr, damit der gedachte Container lesbar ist) */ --m-fs-kachel-titel:18.5px; /* Kachel-Überschrift +20 % (Owner 09.09.) */ --m-seite-bg:#F8F5F4; /* Seitengrund Handy = kassenkompass.de --cultured (Vergleich, helles Beige) */ --m-info-akzent:var(--kk-violet-600); /* Info-Icon in hellem Lila — sichtbarer (Owner) */ --m-info-einzug:8px; /* Info-Icon etwas vom rechten Rand weg (Owner) */ --m-blase-bg:var(--kk-ink); /* Sprechblase „Was ist das?" (Owner 13.09.): dunkel, weiße Schrift, statt Popup */ --m-blase-text:var(--kk-white); --m-blase-radius:16px; --m-blase-fs:15px; --m-blase-abstand:16px; --m-bk-rand:18px; /* aufgeklappte Baustein-Karte: so weit ragt sie in den Seitenrand (fast bildschirmbreit, Owner 13.09.) */ --m-bk-voll-rand:0.75px; /* Rahmen der 100-%-Zellen: 50 % von 1,5 px (Owner-Wahl 13.09.) */ /* Luft zwischen Pfeilspitze und Fragezeichen (Owner 13.09.: „etwas mehr Abstand", vorher 6 px) */ /* Vier-Felder-Raster der Ereignis-Kachel (Owner-Entscheid 09.09.): Bild | Ueberschrift | Wert — und rechts eine eigene Spalte, die ganz dem Info-Popup gehoert, auch wenn das Icon selbst klein ist. */ --m-info-spalte:44px; --m-feld-luft:13px; /* Innenabstand der Text-Felder */ --m-trennlinie:var(--kk-grau-bd-leise); /* durchgehender Strich Bild → Rand */ /* Zustands-Pille am Wert. Fuellung wird aus der Flaeche mit Weiss gemischt — 20 % war der Owner-Entscheid (Runde 4, Variante A): spuerbar, nicht bunt. */ --m-pille-fuellung:20%; --m-pille-hoch:4px; /* schmal, Schriftgroesse unveraendert */ --m-pille-quer:11px; --m-pille-icon:8px; --m-pille-gap:7px; --m-warn-linie:var(--kk-error-bd); --m-warn-flaeche:var(--kk-error-soft); --m-mittel:var(--kk-amber); /* Eigenanteil bis 500 EUR = gelb (Owner 09.09.) */ --m-mittel-linie:var(--kk-amber-bd); --m-mittel-flaeche:var(--kk-amber-soft); /* Beschriftete Mit-Box: Schrift schrumpft mit der Box-Breite (cqi), damit Kopf und Grenze je EINE Zeile bleiben (Owner 10.09., 2. Runde). 8.3cqi = laengster Kopf „≈ 10 % Kostenuebernahme" (Variante B links, 154 px bei 13 px) auf 142 px Kern; Untergrenzen, damit es lesbar bleibt. */ --m-box-fs-min:10.5px; --m-box-fs-passung:8.3cqi; --m-box-grenze-fs:11.5px; --m-box-grenze-fs-min:9px; --m-box-grenze-fs-passung:7.4cqi; /* laengste leise Zeile „Nur 10 % Kostenuebernahme!" (Variante B, ~13,4 em) auf dem Kern */ --m-box-b-faktor:1; /* „Du zahlst X €" oben: +25 % gegenueber der 0,8-Fassung (Owner 13.09.) */ --m-box-b-zeile:1.33; /* Variante B: Zeilenabstand = Mitte zwischen eng (1.15) und Seiten-Standard (1.5) (Owner 10.09.) */ --m-box-b-gap:0.5px; /* dito: Mitte zwischen 0 und 1 px */ --m-info-deckkraft:.8; /* Fragezeichen 20 % transparenter (Owner: „zu dominant") */ --m-gut:var(--kk-bf-gruen-tief); /* Waldgruen — gedeckter als Signalgruen */ --m-gut-linie:var(--kk-green-bd); --m-gut-flaeche:var(--kk-green-soft); --m-info-luft:20px; /* Popup-Flaeche = derselbe Seitengrund wie die Handy-Seite (Owner 09.09.). Vorher weiss — das stach nach der Beige-Umstellung heraus. */ --m-info-bg:var(--m-seite-bg); /* Rechentafel im Popup (Owner-Entscheid 09.09., Entwurfsrunde 4 Variante A). Einzug des Schluss-Kastens = rand − mini; die Formel steht in mobil.css. */ --m-rechnung-rand:14px; /* Polster des Eigenanteil-Kastens — links = rechts = oben = unten. Owner 09.09.: um 30 % reduziert (10px -> 7px). EIN Wert fuer alle vier Richtungen; der Einzug rechnet sich in mobil.css daraus, die Flucht haelt also von selbst. */ --m-rechnung-mini:7px; /* KEIN eigenes Fuellungs-Token: Der Eigenanteil-Kasten liest bewusst --m-pille-fuellung, damit Kachel und Popup nie auseinanderlaufen (Owner-Entscheid 09.09.). Widerrufen: --m-rechnung-fuellung:85%. */ /* Grundflaeche der Rechentafel — eine Stufe abgesetzt von der Popup-Flaeche, nicht von Weiss. Sonst waere sie nach der Beige-Umstellung ein grauer Fleck auf beigem Grund statt einer leichten Abstufung. */ --m-rechnung-grund:color-mix(in srgb, var(--kk-muted) 50%, var(--m-info-bg)); --m-icon-warn:19px; --m-icon-info:22px; --m-fs-titel:15.5px; --m-fs-wert:15px; --m-fs-text:14.5px; --m-fs-kopf:29px; /* Themen-Kopf mobil: Titel (Owner 09.09., +20 %) */ --m-fs-gruppe:24px; /* Gruppen-Überschrift in der Ereignis-Liste (= alte Titelgröße) */ --m-kopf-luft:24px; /* Luft über dem Titel UND zwischen Titel und Foto — gleich groß (Owner) */ --m-kopf-bild-h:210px; /* Themen-Kopf mobil: Foto-Höhe */ --m-schritt-min: 72px; /* Schritt-Leiste mobil: kleinste Segmentbreite (13.09.) */ --m-cta-von:#4A2B87; /* Figma Button CTA: purple-900 (Verlauf links) */ --m-cta-bis:#7F56D9; /* Figma Button CTA: purple-600 (Verlauf rechts) */ --m-cta-rand:rgba(255,255,255,.16); /* 2-px-Rand: Weiß 16 % oben … */ --m-cta-rand-aus:rgba(255,255,255,0); /* … nach 0 % unten */ --m-cta-h:56px; /* Owner 09.09.: „etwas dicker" — Figma 36 px, dann 44, jetzt 56 */ --m-blau:#2563EB; /* Entscheidung „Mehr Optionen" (Owner 09.09.: Blau aus dem Fiona-Mockup, neu in der Palette) */ --m-blau-flaeche:#EEF3FF; --m-blau-linie:#BFD2FA; --m-etikett-radius:30px; /* Etikett „Aktuell / Mit Optimierung" auf der Box-Linie (Owner 10.09.) */ --m-aufdeck-dauer:0.5s; /* Kachel aufdecken (Bild raus, Boxen rein) — Owner 10.09.: 10 % langsamer als 0,45 s */ --m-upgrade-linie:var(--kk-violet-300); /* lila Knopf „Optimierung anzeigen": leiser Rand … */ --m-upgrade-flaeche:var(--kk-violet-100);/* … und leichte Füllung, wie die Signal-Boxen */ --m-glanz-dauer:0.85s; /* Seitenübergang „Optimierung anzeigen": Streifen sichtbar die ganze Dauer (Owner 10.09.: 50 % mehr Tempo als 1,3 s) */ --m-bilanz-halt:1.1s; /* Kachel-Übergang (Owner 13.09., Wahl „Tempo 1"): so lange steht „X € weniger Risiko" grün im Knopf, bevor die Pille fällt (0,96 s + 15 %) */ --m-bilanz-radius:var(--r-full); /* Bilanz-Pille unter den Boxen (Owner 13.09., Wahl „Pille 2"): ganz rund, Rand wie die Box */ --m-glanz-scroll-ab:0.8; /* Scroll startet, wenn der Glanz bei 80 % ist — beide Effekte überlappen (Owner 10.09.) */ --m-scroll-dauer:0.85s; /* … der Scroll nach oben (ease-out; Owner 10.09.: 50 % mehr Tempo als 1,3 s) */ --m-fs-spalten:17px; /* Spaltenköpfe „Aktuelle Situation | Mit Optimierung" (Owner 10.09.: +50 %) */ --m-box-h:64px; /* Ist-/Mit-Box in Bildhöhe */ --m-gruppe-luft:34px; /* Luft vor jeder Gruppen-Überschrift und unter dem Kopf-Foto (Owner 09.09.) */ --m-kasse-kopf-h:120px; /* Kassen-Seite mobil: Höhe der Logo-Container im Kopf (Owner 10.09., 2. Runde) */ --k2-erl-bild:76px; --k2-erl-wert:96px; --k2-erl-bild-mobil:56px; --k2-erl-wert-mobil:82px; --k2-mobil-bis:860px; --k2-menue-breite:min(82vw, 320px); --k2-menue-bild:44px; /* Seitenmenü: Logo-/Foto-Kachel links (Owner 09.09.) */ --k2-menue-fuss-h:104px; /* Seitenmenü-Fuß „Monatliche Ausgaben" — bewusst hoch (Owner 09.09.: doppelt so groß) */ --k2-menue-fuss-fs:15px; /* Label „Monatliche Ausgaben" (Owner 09.09., 4. Runde: kleiner als der Betrag) */ --k2-menue-fuss-wert-fs:22px; /* Betrag — größer als das Label */ --k2-menue-fuss-linie:var(--kk-ink-muted); /* Linie über dem Fuß: dunkles Grau (Owner 09.09., 5. Runde — Lila passte nicht) */ --k2-mobilkopf-h:52px; --sz-fest-foto:96px; /* Zahn-Karten: Bild gross + mittig (Owner 08.09.) */ --presse-kopf-h:132px; /* Bild-/Logo-Zeile der Karte */ --presse-logo-h:44px; /* Wortmarke im Markenfeld */ --presse-spalten:3; --presse-gap:14px; --modal-box-w-duell:1040px; /* Tarif-Duell Bestand vs. Empfehlung (kvd-*) */ --kvd-label-w:236px; /* Duell: Label-Spalte der Vergleichszeilen */ --kvd-pfeil-w:28px; /* Duell: Pfeil-Spalte zwischen den Boxen */ /* ── 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 */ /* ── kv-Zeilen-Icon (Karte 147) — Icon/Logo in Bilanz-Posten: Owner-Regel HART: nie höher als die Schrift (1em-Cap). */ --kv-icon-h:1em; --kv-icon-max-b:2.2em; /* liegende Kassen-Logos dürfen breiter */ /* 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; /* GKV-Reform-Hinweis in der Kapitelkarte (Karte 124) — Gesetzes-Fakt, kein Verkaufsargument: Marken-Regel „Info/Hinweis = Grau" (kk-info), bewusst leiser als rosé/grün. */ --kr-reform-bg:var(--kk-info-soft); --kr-reform-bd:var(--kk-grau-bd); --kr-reform-fg:var(--kk-info); /* ── ~~Haus der Gesundheit (hg-*) — Owner-Auftrag 2026-08-07~~ — vom Owner am 08.09. ERSATZLOS entfernt (beide Konzept-Flows). Die dreizehn hg-Tokens hatten nach dem Ausbau der `.hg*`-Regeln keinen Konsumenten mehr und sind mit entfernt; ihre Werte stehen in der Git-Historie vor diesem Commit. Eine Übersicht „alles auf einen Blick" wird später neu entworfen. */ /* ── Bekannt-aus-Siegel (Karte OgihqGV6, Owner 21.08.) — Vertrauens-Anker der Konzept-Präsentation; seit Owner-Order 21.08. oben rechts im vk-kopf. Karte 148: Kopf-Variante mit FESTER Höhe (der frühere stretch begrenzte nicht — das Siegel rendert in Asset-Größe 320px, Owner: 70 % kleiner). */ --siegel-h:64px; /* Basis-/Fallback-Höhe */ --siegel-h-kopf:96px; /* Kopf-Variante = 30 % der alten 320px */ --marke-h-kopf:40px; /* KassenKompass-Wortmarke im Konzept-Kopf (native SVG-Hoehe) */ /* ── 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); /* ── M&M-Ampel je Tarif (Owner-GO 2026-09-10): echtes Grün/Amber/Grau — die Standard-Badges (success = Lila, warning = Grau) tragen keine Ampel. */ --mm-ok-fg:var(--kk-green); --mm-ok-bg:var(--kk-green-soft); --mm-ok-bd:var(--kk-green-bd); --mm-offen-fg:var(--kk-amber); --mm-offen-bg:var(--kk-amber-soft); --mm-offen-bd:var(--kk-amber-bd); --mm-kein-fg:var(--c-text-muted); --mm-kein-bg:var(--c-surface-muted); --mm-kein-bd:var(--kk-grau-bd-leise); --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) */ --antrag-max-2col:720px; /* zweispaltige Strecke (s. components.css) */ --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); /* Kundenstrecke: Kategorie-Icon auf ruhigem Lila-Chip (§Kategorie-Chip) */ --strecke-ikon-bg:var(--kk-violet-chip); --strecke-ikon-flaeche:30px; /* Chip-Kante */ --strecke-ikon-bild:20px; /* Motiv darin */ --strecke-pfeil:16px; /* Ausklapp-Chevron (SVG, nicht Glyph) */ --strecke-marke-h:38px; /* Wortmarke ueber der Karte (Owner 03.09.: 30px war zu klein) */ --strecke-stufe-h:4px; /* Balkenhoehe der Stufen-Anzeige */ --strecke-erk-max:640px; /* Lesebreite der Einwilligungs-Karten */ --strecke-spar-num:2rem; /* Ersparnis auf der Ergebnisseite — die Zahl der Seite */ --strecke-beitrag-num:1.5rem; /* Monatsbeitrag in den beiden Duell-Karten (Owner 15.09.: 1.875rem war zu dominant) */ --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). */ /* ── Konzept in zwei Schritten (k2-*) — Design-Handoff 2026-08-24 ────────── Quelle: design_handoff_konzept_zwei_schritte/README.md §Design Tokens + Prototyp-Nachmessung. Wo der Wert EXAKT im Bestand existiert, wird referenziert (keine Duplikate); neue Rohwerte nur für Prototyp-eigene Töne. Spec: wissen/design-system.md §Konzept in zwei Schritten. */ --k2-bg:var(--kk-muted); /* Seitengrund (Prototyp-Body) */ --k2-akzent:var(--kr-akzent); /* dunkles Lila — Bänder, Dach, Buttons */ --k2-aktion:var(--kk-violet-700); /* Aktion/Hover + Rail-Aktiv-Balken */ --k2-btn-plus-groesse:40px; /* runder Plus-Button „Baustein hinzufügen" (Trello 283/284) */ /* Trello 275 (Design 1c „Zwei Pillen"): Beispielzeilen gedämpft, graue Pille, dicker Trenner */ --k2-chip-beispiel-bg:#F1F0F5; --k2-chip-beispiel-fg:var(--kr-pill-gering); /* 8783A0 */ --k2-rot-gedaempft:#B07C8B; /* Ohne-Konzept-Wert einer Beispielzeile */ --k2-gruen-gedaempft:#3E9C74; /* Zuschuss/Ersparnis einer Beispielzeile */ --k2-trenner-dick:var(--kr-karte-bd); /* E4E1EC — Trenner Angaben ↔ Beispiele */ --k2-rahmen-bd:var(--kk-grau-bd-leise); /* Board-/Karten-Rahmen */ --k2-punkt-inaktiv:var(--kr-karte-bd); /* Stepper-Punkt inaktiv */ --k2-flaeche-aktiv:#F3EEFE; /* Rail: aktives Thema */ --k2-reform-bg:#F8F6FE; /* GKV-Reform-Panel */ --k2-reform-bd:#E4DEF7; --k2-rh-bg:#FBFAFD; /* Reform-Hinweis 3a (02.09.): Container */ --k2-rh-chip-bg:#FDF0F3; /* Reform-Hinweis 3a: Chip Reform 2027 (Schrift --k2-rot) */ --k2-rh-trenner:#F1EFF6; /* Reform-Hinweis 3a: Trennlinie je Stichpunkt */ --k2-text-auf-dunkel:#C9BFE8; /* Sub-Texte auf Akzent-Dunkel */ --k2-gruen:var(--kk-green); --k2-gruen-bg:#F0F8F4; /* satte Grün-Fläche (Ersparnis-Kachel) */ --k2-gruen-bg-leise:#F7FCF9; /* leise Grün-Fläche (Nachher-Karte) */ --k2-gruen-bd:#9ACDB4; --k2-gruen-bd-leise:#DFF0E7; --k2-gruen-label:#4E9B75; /* kleine Labels auf Grün-Karten */ --k2-seg-bg:#E7F2EB; /* Segmented-Umschalter-Pille (Bonus, Handoff 26.08.) */ --k2-pers:#8B7BB8; /* Personen-Silhouetten-Icon (FINAL-Handoff pluskind) */ --k2-rot:var(--kr-rose); --k2-rot-bg:var(--kr-chip-durch-bg); /* rosé Fläche (Vorher-Karte) */ --k2-rot-bd:#E8C8D2; --k2-rot-bd-leise:#F2E4E9; --k2-rot-x:#C25B6B; /* ✗-Zellen in Vergleichen */ --k2-rot-label:#B08795; /* kleine Labels auf Rosé-Karten */ --k2-dash-rot:#D9A9B7; /* gestrichelte Hover-Unterstreichung */ --k2-rot-sub:#A97A87; /* Sub-Zeilen auf Rosé-Karten */ --k2-dash-neutral:#C6C2D6; --k2-dash-dunkel:#6D5FA8; /* auf Akzent-Dunkel */ --k2-text-2:var(--kk-warning); /* Sekundär-Text — gleicher Grauton 46435A */ --k2-text-soft2:#B4B0C4; --k2-trenner:#EFEEF4; /* Leistungsstaffel-Tabelle (Owner 02.09.): Jahres-Kopfzeile + Trenner */ --staffel-jahr-fg:var(--c-text-soft); --staffel-trenner:var(--k2-trenner); --k2-trenner-leise:#F3F2F7; /* Rechenbeispiel je Tarif (PM 09.09.): Quellen-Stempel „Quelle: M&M, Stand …" unter der Beispielzeile — leiser als der Hinweis, nie farbig. */ --k2-br-quelle-fg:var(--k2-text-soft2); --k2-br-quelle-fs:10.5px; --k2-rail-trenner:#F1EFF6; --k2-rail-bg:#FBFAFD; --k2-chip-bg:#F4F3F8; /* ~~--k2-offen (Haus-Status „offen", Trello 191)~~ — mit dem Haus der Gesundheit am 08.09. entfernt; letzter Konsument war `.k2-haus__mark`. */ --k2-stepper-linie:#DDD8EA; --k2-fund-trenner:#4A3C7A; /* Trenner in der dunklen Fundament-Box */ --k2-fund-risiko:#E8C6A0; /* Risiko-Zeile auf Dunkel (Amber-Ton) */ --k2-tip-bg:#221A3A; /* dunkles Herleitungs-Tooltip */ --k2-tip-trenner:#3D3360; --k2-tip-label:#B9B2D4; --k2-tip-shadow:0 12px 30px rgba(31,27,46,.28); /* Beitragsverlauf (Owner-Design-Runde 08.09., design-system.md §Beitragsverlauf): Violett-Pink für die vorgeschlagene Kasse, Grau für die heutige. Bewusst NICHT Grün/Rosé wie das Vorher/Nachher-Paar darüber — der Verlauf ist eine Zeitreihe, keine Bilanzaussage. ⚠ Töne jenseits von H≈300 sind gesperrt (kämen dem Rosé des Ist-Zustands zu nahe). */ --k2-vl-neu:#C96EF7; --k2-vl-alt:#ADA9BC; --k2-vl-flaeche-alt:#8783A0; /* graue Fläche unter der Ist-Linie */ --k2-vl-glanz:rgba(255,255,255,.6); /* wandernder Streifen, alle 7 s */ /* Gold-Schlagzeile (Owner-Design 03.09., „banner gold zahn" Variante 2a): der Hebel-Satz steht als goldener Balken ÜBER dem Baustein-Container. Fünf Stopps, damit der Verlauf plastisch wirkt statt flach; der helle Ton in der Mitte ist der Glanzpunkt des Balkens selbst (nicht der wandernde Streifen). Weiß auf Gold braucht den dunklen Textschatten — ohne ihn ist die Zahl schlecht lesbar (Design-Vorgabe, Pflicht). */ /* Metall-Stufen (Owner 03.09.): Bronze · Silber · Gold · Diamant, abgeleitet aus der Erstattungshöhe (app/services/metall_stufe.py). Werte 1:1 aus dem Design-Export „banner gold zahn diamant" (Turn 3, CLAUDE-CODE-PROMPT-METALL-VARIANTEN.md) — nicht nachjustiert. ~~Diamant (Turn 3c)~~ ist am 03.09. per Owner-Entscheid wieder RAUS; die Werte stehen im Design-Export und in PR 648, falls die Stufe zurückkommt. */ --k2-silber-flaeche:linear-gradient(100deg, #7C8290 0%, #B4BAC6 28%, #E6EAF1 50%, #AEB4C0 72%, #767C8A 100%); --k2-silber-schatten:0 8px 22px rgba(124, 130, 144, .30), inset 0 1px 0 rgba(255, 255, 255, .45); --k2-bronze-flaeche:linear-gradient(100deg, #7A4A26 0%, #B07445 28%, #D9A377 50%, #A96C3E 72%, #744322 100%); --k2-bronze-schatten:0 8px 22px rgba(122, 74, 38, .30), inset 0 1px 0 rgba(255, 255, 255, .45); --k2-gold-1:#B8892E; --k2-gold-2:#E4BD5D; --k2-gold-3:#F3D889; --k2-gold-4:#E0B94F; --k2-gold-5:#B58628; --k2-gold-flaeche:linear-gradient(100deg, var(--k2-gold-1) 0%, var(--k2-gold-2) 28%, var(--k2-gold-3) 50%, var(--k2-gold-4) 72%, var(--k2-gold-5) 100%); --k2-gold-schatten:0 8px 22px rgba(184, 137, 46, .28), inset 0 1px 0 rgba(255, 255, 255, .45); --k2-metall-text-schatten:0 1px 0 rgba(120, 80, 0, .25); --k2-metall-zahl-schatten:0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .22); --k2-metall-unterstrich:rgba(255, 255, 255, .75); --k2-metall-glanz:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%); --k2-strahl-rot:#B23A48; /* Preisstrahl: links teuer */ --k2-strahl-gold:#C9A227; --k2-strahl-marker-alt:#B8B3C9; /* Schritt 2: grauer „bisher"-Punkt */ --k2-strahl:linear-gradient(90deg, var(--k2-strahl-rot), var(--k2-strahl-gold) 45%, var(--kk-green)); --k2-radius:18px; /* Board/Rahmen-Karte */ --k2-radius-karte:14px; /* Vorher/Nachher, Bänder */ --k2-radius-box:12px; /* Haus-Kacheln, Fundament-Band */ --k2-rail-w:300px; --k2-detail-minh:640px; /* keine Höhensprünge beim Themenwechsel */ --k2-erklaerung-minh:0px; /* Owner 25.08.: kein Leerraum-Puffer unterm Untertitel */ --k2-max:1160px; /* Popups (B) + Abschluss (D), 2026-08-24: Breiten + Grau-Pille */ --k2-modal-w-kk:720px; /* Kassen-Popup */ --k2-modal-w-cmp:1060px; /* Baustein-Vergleich */ --k2-cmp-label-w:190px; /* Label-Spalte der Vergleichszeilen */ --k2-grau-pill-fg:var(--kr-pill-gering); /* Monatsbeitrag-Pille alt */ /* --- M&M-Monitor (Dev-Panel, Design-Handoff 09.09.) -------------------- Eigene Ebene mit Prefix mmm-, bewusst NICHT an die Konzept-Komponenten gehaengt: Das Panel muss jeden UI-Umbau ueberleben (Handoff-Regel 3). Was es schon als Marken-Token gibt, wird referenziert statt kopiert. */ --mmm-breite:440px; --mmm-hoehe:560px; --mmm-radius:16px; --mmm-flaeche:#F7F5FB; /* Knopf-/Kachel-Grund im Panel */ --mmm-flaeche-zart:#F9F7FD; /* Statuszeile, Fusszeilen */ --mmm-warn:#D97706; /* langsame Antwort (> 10 s) */ --mmm-fehler:#A61B1B; /* Fehlschlag-Tag in der Historie */ --mmm-punkt-live:#3DD68C; /* Punkt auf der dunklen Pille */ --mmm-punkt-aus:#D6D2E0; /* nicht angesteuert */ --mmm-chip-test-bg:#FDF3E0; /* Chip „Testbetrieb" */ --mmm-chip-test-fg:#8A5A05; --mmm-schatten:0 24px 56px -16px rgba(42, 27, 77, .32), 0 2px 6px rgba(42, 27, 77, .06); --mmm-pille-schatten:0 8px 22px -8px rgba(42, 27, 77, .55); /* M&M-Sync-Backoffice-Seite (mms-*): Design-Handoff „MM Sync Admin" (Owner 10.09.). Bewusste Ausnahme von „Gelb nur in der Antragsstrecke": Der Handoff schreibt fuer Abweichungen Amber vor (Backoffice-Werkzeug, kein Kundenkontakt) — wie schon der M&M-Monitor (--mmm-warn). Gruen/Rot/Lila sind bestehende Marken-Werte. */ --mms-ok:var(--kk-green); --mms-ok-bg:var(--kk-green-hero); --mms-ok-ring:rgba(14, 143, 93, .15); --mms-warn:#B45309; --mms-warn-bg:#FDF3E0; --mms-warn-zeile:#FFFBF3; --mms-err:var(--mmm-fehler); --mms-err-bg:#FBEFEE; --mms-err-bd:#F2D6D3; --mms-err-knopf-bd:#E8B4B0; --mms-err-ring:rgba(166, 27, 27, .15); --mms-run:var(--kk-violet-700); --mms-run-bg:#A78BFA; --mms-none:#C4C0D0; --mms-bd:#E3DCEF; --mms-trenner:var(--kk-violet-trenner); --mms-trenner-zart:#F7F5FB; --mms-gruppe-bg:#FBFAFD; --mms-spinner-ring:rgba(255, 255, 255, .4); --mms-radius:16px; --mms-knopf-radius:8px; --mms-breite:1200px; /* Tarif-Detailseite (tarif-*): Design-Handoff „Tarif Detail Admin" (Owner 10.09.). Nutzt die mms-Palette (gleicher Handoff-Autor, gleiche Farbwerte); eigene Werte nur fuer die Edit-Flaeche einer Zeile und das grosse Gesellschafts-Logo. */ --tarif-edit-bg:var(--kk-violet-50); --tarif-edit-bd:var(--mms-bd); --tarif-logo-radius:12px; --tarif-chip-bg:var(--kk-violet-trenner); /* Tarif bearbeiten (tarifedit-*) — Design-Handoff 10.09.; liest mms-/tarif-Tokens */ --tarifedit-feld-h:38px; --tarifedit-feld-min-h:74px; --tarifedit-nav-breite:260px; --tarifedit-leiste-schatten:0 -10px 30px -14px rgba(31, 27, 46, .28); --tarifedit-liste-griff:var(--mms-none); /* M&M-Abgleich-Seite (mmfg-*): Design-Handoff „MM Freigabe Admin" (Owner 10.09.). Kachel-Flaechen je Gruppe + die feste Navy-Aktionsleiste (Weiss-Transparenzen). */ --mmfg-neu-bg:#F9F7FD; --mmfg-beleg-bg:#FAF9FB; --mmfg-ok-bg:var(--kk-green-leise); --mmfg-abw-bg:var(--mms-warn-zeile); --mmfg-leiste-bg:var(--kk-navy-cta); --mmfg-leiste-rand:rgba(255, 255, 255, .25); --mmfg-leiste-text-soft:rgba(255, 255, 255, .65); --mmfg-leiste-aus-bg:rgba(255, 255, 255, .12); --mmfg-leiste-aus-fg:rgba(255, 255, 255, .5); --mmfg-leiste-schatten:0 18px 40px -12px rgba(42, 27, 77, .5); --mmfg-karte-schatten:0 1px 2px rgba(31, 27, 46, .04); --mmm-punkt-glanz:0 0 0 3px rgba(61, 214, 140, .25); --mmm-ampel-gruen-glanz:0 0 0 3px rgba(14, 143, 93, .18); --mmm-ampel-gelb:var(--kk-warning); --mmm-hl-ring:0 0 0 3px var(--kk-violet-500), 0 0 0 8px rgba(139, 92, 246, .22); --mmm-streifen:repeating-linear-gradient(135deg, var(--kk-violet-100), var(--kk-violet-100) 4px, var(--kk-violet-50) 4px, var(--kk-violet-50) 8px); }