und einmal auf einem

(Funnel-Startseite, damit die oeffentliche Strecke ueberhaupt eine Ueberschrift hat). Das globale `h1 { margin: 0 0 var(--sp-4) }` riss dort 16 px zwischen Titel und Unterzeile, waehrend dieselbe Klasse sonst auf 0 stand (Owner 03.09.: unnoetiger Space, soll aussehen wie auf der Vergleichsseite). / .af-kopftitel { font-size: 17px; font-weight: var(--fw-bold); margin: 0; } .af-kopfmeta { font-size: var(--fs-caption); color: var(--c-text-soft); } .badge--ok-antrag { background: var(--antrag-ok-bg); color: var(--antrag-ok-fg); border: 1px solid var(--antrag-ok-bd); font-weight: var(--fw-bold); } .badge--offen-antrag { background: var(--antrag-offen-bg); color: var(--antrag-offen-fg); border: 1px solid var(--antrag-offen-bd); font-weight: var(--fw-bold); } .af-zone { padding: var(--sp-5) var(--sp-6); } .af-zone + .af-zone { padding-top: 0; } .af-eyebrow { margin: 0 0 var(--sp-3); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; } .af-eyebrow--ok { color: var(--antrag-ok-fg); } .af-eyebrow--offen { color: var(--antrag-offen-fg); } / Kompakt-Modus (2026-08-04): Zone 1 als Ganzes einklappbar — sichtbar ist nur die Kopfzeile, die Chips kommen erst per Klick. Schalter-Text wechselt über [open]. / .af-uebernommen > summary { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none; } .af-uebernommen > summary::-webkit-details-marker { display: none; } .af-uebernommen > summary .af-eyebrow { margin: 0; } .af-uebernommen[open] > summary { margin-bottom: var(--sp-3); } .af-uebernommenschalter { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-primary); } .af-uebernommenauf { display: none; } .af-uebernommen[open] .af-uebernommenzu { display: none; } .af-uebernommen[open] .af-uebernommenauf { display: inline; } / Kompakt-Modus Zone 2: schon Ausgefülltes verstecken (display:none sendet weiter mit und zählt im Fortschritt weiter); app.js setzt die Klasse nur bei echtem Inhalt. / .af-zonekopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .af-zonekopf .af-eyebrow { margin: 0; } .af-zone--nur-offen .field--ok, .af-zone--nur-offen .af-frage--ok { display: none; } / Überschrift, unter der nur Verstecktes steht, wäre eine Frage ohne Antwort — app.js markiert sie (af-headline--leer), versteckt wird nur im Kompakt-Modus. / .af-zone--nur-offen .af-headline--leer { display: none; } / Owner-Bug 03.09.: Dieselbe Falle eine Ebene höher — die violette Hülle eines bedingten Blocks (.af-unter) blieb als LEERE Box stehen, wenn alle ihre Felder beantwortet und damit versteckt waren (sichtbar an „Wie viele Zähne fehlen genau?", nachdem die Konsole-Antwort einläuft). Die Hülle verschwindet jetzt mit, sobald sie KEIN sichtbares Kind mehr hat. Bewusst per :has() statt per JS-Marker wie bei den Überschriften: der Zustand stimmt dadurch auch in Blöcken, die app.js erst beim Setzen des Triggers einklont — ein Marker müsste dort nachgezogen werden und wäre eine zweite Wahrheit. / .af-zone--nur-offen .af-unter:not(:has(> :not(.field--ok):not(.af-frage--ok))) { display: none; } / Zone 1 — Zusammenfassungs-Chip je fertiger Gruppe, aufklappbar und editierbar. / .af-chips { display: grid; gap: var(--sp-2); } .af-chip { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); background: var(--c-surface); } .af-chip[open] { background: var(--antrag-unter-bg); } .af-chip > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; } .af-chip > summary::-webkit-details-marker { display: none; } .af-chiphaken { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-full); background: var(--antrag-ok-bg); color: var(--antrag-ok-fg); font-size: var(--fs-caption); font-weight: var(--fw-bold); } .af-chiptitel { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); } .af-chipwerte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text-muted); } .af-chipaendern { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-primary); } .af-chip[open] .af-chipaendern { color: var(--c-text-soft); } .af-chip > .felder-grid { padding: 0 var(--sp-4) var(--sp-4); margin-bottom: 0; animation: kk-drop-in var(--dur-fast) var(--ease-out); } / Doppelte Klasse: sticht die Basis-.felder-grid weiter unten in dieser Datei aus. / .felder-grid.felder-grid--breit { grid-template-columns: repeat(auto-fill, minmax(var(--antrag-feld-min), 1fr)); } / Zone 2 — offene Gruppen: alles sichtbar, Übernommenes mit grüner Kante. / .af-gruppe-offen { display: grid; gap: var(--sp-4); } .af-gruppe-offen + .af-gruppe-offen { margin-top: var(--sp-5); } .af-gruppe-offentitel { margin: 0; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--antrag-offen-fg); } .af-gruppe-offen .field { margin-bottom: 0; } .field--ok .input, .field--ok .af-seg__btn, .af-frage--ok .input { border-color: var(--antrag-ok-bd); } / Segment-Knöpfe (ja_nein/toggle + Auswahl bis 3 Optionen) — Radios, ohne JS nutzbar. / .af-seg { position: relative; display: flex; gap: 6px; } .af-seginput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .af-segbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: var(--antrag-seg-h); padding: 0 var(--sp-3); border: var(--antrag-seg-bd) solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text-muted); font-weight: var(--fw-semibold); text-align: center; cursor: pointer; } .af-segbtn:hover { border-color: var(--c-accent); } .af-seginput:checked + .af-segbtn { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); } .af-seginput:focus-visible + .af-segbtn { box-shadow: 0 0 0 3px var(--c-focus-ring); } / Folgefragen CSS-only (Track-F-Ticket 01.09., Funnel laedt bewusst kein JS): .af-folge ist ein SPAETERES GESCHWISTER der ausloesenden .af-frage im selben Container und bleibt zu, bis deren markiertes Radio (.af-seginput--folge-an, i. d. R. der Ja-Knopf) gewaehlt ist. display:contents laesst die enthaltenen Felder als normale Kinder des umgebenden Rasters mitlaufen (zwei Folgefragen fuellen so die zwei Spalten des zweispaltig-Modifiers). / .af-folge { display: none; } .af-frage:has(.af-seginput--folge-an:checked) ~ .af-folge { display: contents; } / Frage-Zeile: langes Label links, Widget rechts in fester Breite. / .af-frage { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .af-fragetext { flex: 1; min-width: 280px; font-weight: var(--fw-semibold); text-wrap: pretty; } .af-fragewidget { width: var(--antrag-widget-w); flex: none; } .af-fragewidget .input { width: 100%; } / Länder-Combobox der Antragsstrecke (A5 „Länder-Dropdowns", Owner 2026-08-05): Textfeld + Vorschlagsliste mit self-gehosteten SVG-Flaggen (static/img/flaggen/). Ohne JS bleibt nur das Textfeld — Liste + Flagge baut app.js dazu. / .kb-land { position: relative; } .kb-land .input { width: 100%; } .kb-land--flagge .input { padding-left: 44px; } .kb-landflagge { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--c-border); pointer-events: none; } .kb-landliste { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 320px; overflow-y: auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--combo-panel-shadow); padding: 4px; display: flex; flex-direction: column; } / Karten 114/115 (Root-Cause des Dropdown-Pakets, 18.08.): display:flex oben ÜBERSTIMMT die Browser-Regel [hidden]{display:none} — jeder JS-Schließweg (Auswahl, blur, Outside-Click, Escape) setzte hidden=true, die Liste blieb trotzdem sichtbar stehen und überlagerte die Folgezeilen (Karte 112). Explizite [hidden]-Regel stellt das Schließen wieder her. / .kb-landliste[hidden] { display: none; } .kb-landitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .kb-landitem:hover, .kb-landitem.is-active { background: var(--combo-option-hover); } .kb-landitem-flagge { width: 24px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--c-border); flex: none; } .kb-landitem-wort { font-weight: var(--fw-medium); overflow-wrap: anywhere; } .kb-landitem-neben { margin-left: auto; padding-left: var(--sp-3); font-size: 12px; color: var(--c-text-soft); flex: none; } / Karten-Checkbox mit „mehr anzeigen" — Volltext bleibt IMMER im DOM (rechtlich). / .af-erk { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--antrag-seg-bd) solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); } .af-erk + .af-erk { margin-top: var(--sp-2); } .af-erk--an, .af-erk:has(.af-erkbox:checked) { border-color: var(--antrag-ok-bd); background: var(--antrag-ok-leise); } .af-erkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .af-erkhaken { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-top: 1px; border: var(--antrag-seg-bd) solid var(--c-border); border-radius: 7px; background: var(--c-surface); cursor: pointer; } .af-erkhaken::after { content: "✓"; color: var(--c-text-on-accent); font-weight: var(--fw-bold); opacity: 0; } .af-erkbox:checked + .af-erkhaken { background: var(--antrag-ok-fg); border-color: var(--antrag-ok-fg); } .af-erkbox:checked + .af-erkhaken::after { opacity: 1; } .af-erkbox:focus-visible + .af-erkhaken { box-shadow: 0 0 0 3px var(--c-focus-ring); } .af-erktext { flex: 1; min-width: 0; font-size: var(--fs-sm); text-wrap: pretty; } .af-erktext label { cursor: pointer; } .af-mehr > summary { list-style: none; cursor: pointer; } .af-mehr > summary::-webkit-details-marker { display: none; } .af-mehrlink { margin-left: var(--sp-1); color: var(--c-primary); font-weight: var(--fw-semibold); } .af-mehrlink--zu, .af-mehr[open] .af-mehrkurz, .af-mehr[open] .af-mehrlink--auf { display: none; } .af-mehr[open] .af-mehrlink--zu { display: inline; } .af-mehrvoll { display: none; } .af-mehr[open] .af-mehrvoll { display: inline; } / Ausgelöste Felder — eingerückte violette Unterkarte direkt unter der Frage. / .af-unter { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--antrag-feld-min), 1fr)); gap: var(--sp-3); grid-column: 1 / -1; padding: var(--sp-4); border: 1px solid var(--antrag-unter-bd); border-radius: var(--r-md); background: var(--antrag-unter-bg); animation: kk-drop-in var(--dur-base) var(--ease-out); } .af-unter .field { margin-bottom: 0; } .af-unter .af-frage { grid-column: 1 / -1; } @keyframes kk-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .af-headline { grid-column: 1 / -1; font-weight: var(--fw-semibold); margin-top: var(--sp-2); } .af-fest { margin: 0; color: var(--c-text-muted); } .af-hinweis { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--c-text-soft); } .af-fehler { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--c-error); } .af-fussnote { max-width: var(--antrag-max); margin: var(--sp-4) auto 0; font-size: var(--fs-sm); color: var(--c-text-soft); text-wrap: pretty; } / --links: linksbuendig statt zentriert — fuer Umgebungen, die selbst NICHT auf --antrag-max zentriert sind (Funnel: .container/.af-zone laufen voll breit). Die Basisklasse bleibt zentriert: in der Konsole steht die Fussnote unter den .af-antrag-Karten (860, zentriert) und fluchtet nur dadurch. / .af-fussnote--links { margin-inline: 0 auto; } / Sticky Footer: Fortschritt über ALLE Anträge + Speichern/Übergeben. Karte 174: Optik an die KKB-Antragsstrecke angeglichen — schwebendes, gerundetes Panel mit Luft statt flacher Vollbreiten-Leiste mit hartem Trennstrich (reine Optik, Elemente/Verhalten unverändert). / .af-footer { position: sticky; bottom: var(--sp-3); z-index: 20; display: flex; justify-content: center; margin-top: var(--sp-5); padding: 0 var(--sp-4); background: transparent; } .af-footerinner { display: flex; align-items: center; gap: var(--sp-4); width: var(--antrag-max); max-width: 100%; padding: var(--sp-4) var(--sp-5); background: var(--antrag-footer-bg); backdrop-filter: var(--antrag-footer-blur); border: 1px solid var(--c-border-soft); border-radius: var(--r-lg); box-shadow: var(--sh-lg); } .af-footerlabel { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-muted); white-space: nowrap; } .af-balken { flex: 1; height: var(--antrag-balken-h); border-radius: var(--r-full); background: var(--c-surface-muted); overflow: hidden; } .af-balken__fuell { display: block; height: 100%; border-radius: var(--r-full); background: var(--antrag-ok-fg); transition: width var(--t-slow); } .btn-uebergeben { background: var(--antrag-ok-fg); color: var(--c-text-on-accent); } .btn-uebergeben:hover { background: var(--antrag-ok-fg); filter: brightness(.94); } / Kassen-Vergleich, KUNDEN-Layout (Konzept; Vorbild bonusrechner_vergleich2): Ersparnis-Aufmacher, „Details zum Vergleichen"-Toggle, Box-Paare je Leistung — die laut API bessere Kasse grün, die andere grau; Zeilen expandieren zu Texten. / .kvk-hero { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .kvk-herolabel { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-text-soft); } .kvk-herowert { font-size: 2rem; font-weight: var(--fw-bold); color: var(--c-spart); } .kvk-herowert--minus { color: var(--c-text); } .kvk-kurz { margin: var(--sp-3) 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .kvk-kurzzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-soft); } .kvk-minus { color: var(--c-text-soft); font-size: var(--fs-caption); } .kvk-detailsknopf { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; } .kvk-detailsknopf::-webkit-details-marker { display: none; } .kvk-details[open] > .kvk-detailsknopf .vk-vorteilpfeil { transform: rotate(180deg); } .kvk-abschnitt { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-h2); } .kvk-spalten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-semibold); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); } .kvk-logos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); margin-bottom: var(--sp-1); } .kvk-logospaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .kvk-logoszelle { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-size: var(--fs-caption); color: var(--c-text-muted); text-align: center; } / Karte 107: Aktions-Zeile am Zellen-Fuss — Formulare brauchen Block-Kontext (form in span ist invalides HTML), Aktionen aller Spalten fluchten unten. / .kvk-logosaktionen { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: auto; } .kvk-logosaktionen form { margin: 0; display: contents; } .kvk-zeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; } / Einrückung nur am Titel — läge sie auf der Zeile, verschöben sich die Box-Spalten gegenüber Logo-Kopf + Monatsbeitrag (Owner 2026-08-03: „nicht aligned"). / .kvk-zeile--sub .kvk-zeiletitel { padding-left: var(--sp-4); } .kvk-zeiletitel { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; } .kvk-boxpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } / #82-Multivergleich (Owner 2026-08-17): bis zu 4 Spalten im Tarif-Duell — dieselben Paar-Raster, nur mit 3er-/4er-Spaltenzahl (Template setzt --nN). / .kvk-boxpaar--n3, .kvk-logospaar--n3 { grid-template-columns: repeat(3, 1fr); } .kvk-boxpaar--n4, .kvk-logospaar--n4 { grid-template-columns: repeat(4, 1fr); } .kvk-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-muted); color: var(--c-text-soft); font-size: var(--fs-sm); text-align: center; } .kvk-box--besser { background: var(--c-spart-bg); border-color: var(--c-spart); color: var(--c-text); } / Karte 54, Farb-Mapping V3 (Owner-Entscheid 12.08., ersetzt das Mockup-V2- Grau+Rot): im Vergleich gibt es KEIN Rot mehr — nur noch drei Optiken: Vollgrün (stufe gut) · „Grüngrau" (JEDE andere echte Deckung, mittel UND schwach: grüner 4-px-Balken auf grauer Box — „50 % ist trotzdem eine Deckung") · komplett Grau („nicht enthalten", ✗ grau). Einstufung gut/mittel/schwach kommt als DATEN aus dem A-Helper (`be.stufe`); das 2-Optiken-Mapping ist reine Anzeige. „keine Angabe" bleibt abgeschafft. / / #93-Nachbesserung (Owner 2026-08-18, ERSETZT die V3-Semantik vom 12.08.): vier Farbstufen OHNE Akzent-Balken — sehr positiv (gut) = grün auf grün wie der Monatsbeitrag-Spar-Badge · positiv (mittel) = graue Box mit grüner Schrift · neutral (schwach) = grau-grau (Basisbox) · negativ (nicht enthalten) = graue Box mit ROTER Schrift. / .kvk-box--stufe-gut { border-color: var(--c-spart); background: var(--c-spart-bg); color: var(--c-spart); font-weight: var(--fw-semibold); } .kvk-box--stufe-mittel { color: var(--c-spart); font-weight: var(--fw-semibold); } .kvk-box--stufe-schwach { color: var(--c-text-soft); } .kvk-box--fehlt { color: var(--c-error); } .kvk-box--fehlt .kvk-boxikon { color: var(--c-error); font-weight: var(--fw-bold); } / Tarif-Vorstellung (Karte #97): offizieller Auftritt des Tarifs im Detail-Modal — Kopfzeile (Logo + Name + Website-Button rechts), Dokumente-Links, belegte Beitragsentwicklung mit Quelle. / .tarif-vorstellung { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border-soft); } .tarif-vorstellungkopf { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .tarif-vorstellungname { font-weight: var(--fw-semibold); min-width: 0; } .tarif-vorstellungkopf .btn { margin-left: auto; } .tarif-vorstellungdoks { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); } .tarif-vorstellungquelle { margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--c-text-muted); } .kvk-summe { border-top: 1px solid var(--c-border); margin-top: var(--sp-3); } .kvk-summerechnung { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-sm); color: var(--c-text-soft); } .kvk-summegesamt { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-spart); } .kvk-kategorie { border-top: 1px solid var(--c-border); padding: var(--sp-2) 0; } / Kopf im Zeilen-Grid. #79-Abnahme (Owner 17.08.): das Bewertungs-Label-Paar („sehr gut → sehr gut") ist aus dem Template entfernt; der Kopf ist jetzt ein GRAUER BALKEN, damit die Oberkategorie im Duell sofort ins Auge springt (Flächen-Token, kein neuer Farbwert). / .kvk-kategoriekopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--c-surface-muted); border-radius: var(--r-md); } .kvk-kategorielinks { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .kvk-kategoriekopf .vk-vorteillabel { margin-left: 0; text-align: center; } .kvk-kategorietitel { font-weight: var(--fw-semibold); } / Zarte Trenner zwischen den Leistungszeilen — die Box-Paare „schwimmen" sonst. / .kvk-kategorie .kvk-zeile { border-top: 1px solid var(--c-border-soft); } .kvk-leistung > summary { cursor: pointer; list-style: none; } .kvk-leistung > summary::-webkit-details-marker { display: none; } .kvk-leistung[open] .vk-vorteilpfeil { transform: rotate(180deg); } / Vergleichs-Zeile: Der Ausklapp-Pfeil sitzt IM Wertkasten, nicht am Titel, die GANZE Kachel schaltet, und es ist immer nur EIN Text offen (Owner 01.09., Entwurf design_handout_vergleichsseite/). Vorher klappte ein Klick irgendwo in der Zeile BEIDE Texte auf — der Kunde bekam die Auskunft der anderen Kasse, nach der er nicht gefragt hatte. Radios (exklusiv, nicht abwaehlbar) Checkboxen (abwaehlbar, nicht exklusiv) → `
`: Gleichnamige `details` bilden eine Gruppe, in der sich immer nur EINES oeffnet, und ein zweiter Klick schliesst es. Exklusiv UND abwaehlbar, ohne eine Zeile Skript — die Strecke laedt keines. Der Text liegt AUSSERHALB des `details` und wird ueber `:has([open])` sichtbar: Im `details` stuende er in der halben Kachel statt ueber beiden. Aeltere Browser ohne `details name` verlieren nur die Exklusivitaet. / / EINE Regel fuer das summary, nicht zwei. Vorher setzte `.kvk-boxklapp` danach nochmal `display:flex` OHNE Richtung — dadurch fiel die Spalte auf `row` zurueck, und der Pfeil stand zwischen Wert und Spar-Abzeichen statt unter beidem (Owner-Meldung 01.09.). Zwei Regeln auf demselben Element sind genau die Sorte Fehler, die man im Diff nicht sieht. / .f-strecke .kvk-box--klappbar > summary.kvk-boxklapp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; list-style: none; } .f-strecke .kvk-box--klappbar > summary::-webkit-details-marker { display: none; } / Der Pfeil steht IMMER ganz unten in der Kachel, der Inhalt darueber MITTIG (Owner, zweite Fassung 02.09.). Erst muss das `summary` die Kachel ausfuellen (`flex:1`) — sonst ist es nur so hoch wie sein Inhalt, und „unten" hat gar keine Bedeutung. Dass die Kacheln untereinander gleich hoch sind, liefert `.kvk-boxpaar` ohnehin: ein Raster streckt seine Zellen. Die freie Hoehe verteilt `margin-block: auto` am Inhalts-Behaelter: In einem Flex-Container schlucken automatische Raender den Rest, und zwei gleiche teilen ihn zu gleichen Teilen — Luft oben, Luft unten, Pfeil ganz unten. `margin-top:auto` am Pfeil (erste Fassung) schob zwar den Pfeil nach unten, warf aber ALLE Luft nach oben: Der Inhalt klebte am oberen Rand, und bei zwei Kacheln mit unterschiedlich vielen Zeilen sah eine davon aus, als fehlte etwas. Warum ein eigener Behaelter noetig ist: Der Wert ist ein blosser Textknoten (`wert()` liefert „Keine Leistung" oder „100,00 €"), und an einem anonymen Flex-Element greift kein `margin`. / .f-strecke .kvk-box--klappbar > summary.kvk-boxklapp { flex: 1 1 auto; width: 100%; } .f-strecke .kvk-boxinhalt { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-block: auto; } .f-strecke .kvk-box--klappbar > summary:focus-visible { border-radius: var(--r-md); box-shadow: 0 0 0 3px var(--c-focus-ring); } .f-strecke .kvk-box--klappbar[open] .vk-vorteil__pfeil { transform: rotate(180deg); } / Das Wechseldatum-Feld wird ZURUECKGEHALTEN, solange die Bindungsfrage nicht fertig beantwortet ist (Owner 2026-09-02, zweite Fassung). Ohne Skript kann die Seite ihre eigene Auswahlliste nicht nachrechnen: Wer „nein, noch keine 12 Monate" klickt, saehe darunter weiter Termine, die genau diese Antwort verbietet. Also zeigt die Seite das Feld erst, wenn die Angabe VOLLSTAENDIG ist — Monat UND Jahr. Danach ist es sichtbar; den Termin selbst rueckt der Server beim Absenden nach (funnel/routes.py). Ein Platzhalter-Satz an der Stelle der Liste (erste Fassung) ist raus (Owner): Verborgen wird das GANZE Feld samt Beschriftung — eine Ueberschrift ohne Inhalt darunter sieht kaputt aus, und ein erklaerender Satz war nicht gewollt. „Noch nichts gewaehlt" ist am `` erkennbar, solange es ausgewaehlt ist. Ein `:has()` trifft, wenn IRGENDEINES der beiden Auswahlfelder noch leer ist — genau das gewuenschte ODER, in einer Regel. ⚠ Verschwindet diese leere Option je aus dem Markup, greift die Regel lautlos nicht mehr; ein Waechter besteht deshalb auf ihr. Die Regel greift NUR, solange der Server die Antwort nicht kennt (`--bindung-offen`, gesetzt in routes `_systemfragen`). Ohne diesen Zusatz bliebe das Feld nach dem Absenden fuer immer verborgen — das „nein" bleibt ja angeklickt. Aeltere Browser ohne `:has()` (vor Chrome 105 / Safari 15.4 / Firefox 121) zeigen das Feld durchgehend: Der Termin wird dann beim Absenden nachgerueckt. Nichts bricht, nichts kommt durch. / .f-strecke .form-grid--bindung-offen:has(.af-frage--bindung .af-seginput--folge-an:checked):has(.af-folgewahl option[value=""]:checked) .field--wechseldatum { display: none; } .f-strecke .kvk-leistungtext { display: none; } .f-strecke .kvk-leistung:has(.kvk-box--alt[open]) .kvk-leistungtext--alt, .f-strecke .kvk-leistung:has(.kvk-box--neu[open]) .kvk-leistungtext--neu { display: block; } / Der aufgeklappte Text steht in einem eigenen Kasten (Owner-Entwurf), nicht nackt unter der Zeile — sonst laeuft er optisch in die naechste Leistung. Und er liegt GENAU unter den beiden Wertkaesten, nicht unter dem Kategorienamen (Owner 01.09.): Die Zeile bekommt dafuer dasselbe 1.2fr/2fr- Raster wie `.kvk-zeile`, die Zeile selbst spannt beide Spalten, der Text sitzt in der zweiten. Dieselben Werte wie `.kvk-zeile` — dadurch fluchtet er von selbst und ohne eine zweite Breitenangabe, die beim naechsten Raster-Umbau danebenliegt. / .f-strecke .kvk-leistung { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-2); } .f-strecke .kvk-leistung > .kvk-zeile { grid-column: 1 / -1; } .kvk-leistungtexte { padding: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-soft); display: flex; flex-direction: column; gap: var(--sp-2); } .kvk-leistungtexte p { margin: 0; } / EIN „Weitere Details laden"-Umschalter (CSS-Checkbox, kein JS): Standard zeigt nur Zeilen mit Vorteil der neuen Kasse; :checked blendet die .kvk-rest-Blöcke in Ersparnis-Rechnung UND Leistungen & Bonus ein. / .kvk-alle { display: none; } .kvk-rest { display: none; } / ── Funnel-Geltungsbereich `.f-strecke` (2026-09-01) ────────────────────── Bewusste Abweichungen der OEFFENTLICHEN Kundenstrecke von den Konsolen- Voreinstellungen. Alles hier haengt an der Klasse am der Strecke — das Backoffice bleibt unberuehrt, ohne dass je Stelle ein Modifier noetig waere. Kontrast: `--c-text-soft` erreicht auf der Creme-Karte 2,68:1 und in der Vergleichs-Box auf `--c-surface-muted` 2,51:1 — WCAG AA verlangt 4,5:1 fuer Fliesstext. Betroffen war ausgerechnet der Beitrag der HEUTIGEN Kasse, also die Zahl, gegen die verglichen wird, und die Quellen-Fussnote. `--c-text-muted` liegt bei 5,06:1. Im Backoffice sitzt derselbe Ton vor anderen Flaechen und vor einem Publikum, das die Seite taeglich sieht — deshalb hier korrigiert und dort als Befund gemeldet, statt das Token global zu drehen. / .f-strecke .kvk-box { color: var(--c-text-muted); } / Wegfall-Marke bleibt in EINER Zeile: „Faellt 2027 weg" ist kurz genug, ein Umbruch mitten im Hinweis liest sich wie zwei Fehler statt einem. / .badge--einzeilig { white-space: nowrap; } / Ersparnis-Zeile der Abschluss-Seite: gleiche Flucht wie die Beitragszeile. Der Wert steht in der Boxpaar-Spalte, damit er GENAU ueber dem Beitrag liegt; zentriert wie die Box darunter, nur ohne Rahmen — es ist keine Vergleichs- zelle, sondern die Zahl, wegen der jemand hier steht. / / Auf dem Handy faellt die Zeile auf eine Spalte, das Boxpaar bleibt aber zweispaltig — die grosse Zahl bekam eine halbe Zeile und brach dreimal um. Der Beitrag darunter ist eine kleine Pille und darf halb bleiben. / @media (max-width: 640px) { } / Kurzes Label + Segment-Knoepfe stehen NEBENEINANDER statt an den Enden einer vollen Zeile („Anrede" links, Knoepfe 700 px weiter rechts). Die Knopfbreite bleibt die der langen Fragen — gleiche Groesse ueberall war der Owner-Auftrag vom Vormittag. / .f-strecke .af-frage--kompakt { gap: var(--sp-4); } .f-strecke .af-frage--kompakt .af-fragetext { flex: none; min-width: 0; } / Abschluss-Block der Strecke: dieselbe rechte Kante wie die Einwilligungs- Karten darunter (Owner 01.09., ausdrueckliches GO fuer den Eingriff in components.css — F1 baut hier normalerweise nicht). Vorher liefen Ersparnis und Beitrag ueber die VOLLE Zeile, die Karten aber auf `--strecke-erk-max`. Drei Bloecke, zwei rechte Kanten — auf dem letzten Schritt vor dem Absenden, wo der Blick genau diese Zahlen abgleicht. Die zweite Regel ist noetig, WEIL `.kvk-boxpaar` fuer den Vergleich zweier Kassen gebaut ist (zwei Spalten). Auf der Abschluss-Seite steht dort nur EIN Wert — er endete dadurch mitten in der Zeile statt an der Kante. Hier ist nichts zu vergleichen, also eine Spalte. / / Der Abschluss-Block ist eine KARTE mit zwei Zeilen (Owner-Entwurf „5 neu", zweite Fassung 02.09.). Vorher waren es zwei lose Vergleichs-Zeilen, und drei Dinge gingen daneben: Der Beitrag sass in einem gruenen Kasten und stritt mit der gruenen Ersparnis · beide Betraege standen MITTIG ueber der rechten Spalte statt an der Kante, an der die Einwilligungen darunter enden · und die Karte fehlte, sodass die Zahlen im Nichts standen. Die Breite bleibt `--strecke-erk-max` — dieselbe wie bei den Einwilligungen. Das ist der Grund, warum die rechte Kante ueberhaupt eine gemeinsame ist. / / Zwei Nutzer, eine Karte (02.09.): die Schluss-Seite und der Ersparnis-Block der Ergebnisseite. Deshalb heisst sie `strecke-summe` und nicht mehr `strecke-abschluss` — auf der Ergebnisseite wird nichts abgeschlossen. Die Breite ist NICHT gemeinsam, deshalb der Modifikator `--eng`: Auf der Schluss-Seite bindet `--strecke-erk-max` die Karte an die Einwilligungen darunter (eine rechte Kante), auf der Ergebnisseite laeuft sie ueber die volle Zone wie die Vergleichszeilen darunter. Gemeinsam ist die FORM, nicht das Mass — und die Seite sagt das selbst an, statt es aus der Verschachtelung abzuleiten. / .f-strecke .strecke-summe { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--c-surface-muted); } / Mittig, nicht linksbuendig (Owner 2026-09-02): Sobald die Karte schmaler ist als die Lesebreite, sass der Block sonst links und die Luft rechts. / .f-strecke .strecke-summe--eng { max-width: var(--strecke-erk-max); margin-inline: auto; } .f-strecke .strecke-summezeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .f-strecke .strecke-summezeile + .strecke-summezeile { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); } .f-strecke .strecke-summekasse { min-width: 0; font-weight: var(--fw-semibold); } / Rechtsbuendig, und die Einheit gehoert UNTER den Betrag, nicht daneben: „186,43 € monatlich" in einer Zeile macht aus der Zahl einen Satz. / .f-strecke .strecke-summewert { text-align: right; } .f-strecke .strecke-summebetrag { display: block; font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-text); } / `--c-text-muted`, nicht `--c-text-soft`: Der weichere der beiden Grautoene ist auf der hellen Karte bei 13 px zu kontrastarm — das ist ein Lesbarkeitsproblem, nicht nur Optik. (Kein Hex-Wert im Kommentar: Der Design-Lint prueft die Datei zeilenweise und kann Beispiel nicht von Regel unterscheiden — zu Recht.) / .f-strecke .strecke-summeeinheit { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); } .f-strecke .strecke-summelabel { color: var(--c-text-muted); } / Das einzige Gruen auf der Seite — deshalb traegt es die Aussage. / .f-strecke .strecke-summewert--spart { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-spart); } / Auf der Ergebnisseite steht die Ersparnis ALLEIN in ihrer Karte — sie ist die Zahl, wegen der jemand die Strecke ueberhaupt geht, und bleibt deshalb die groesste. Auf der Schluss-Seite ist sie die zweite Angabe unter dem Beitrag und ordnet sich ihm unter; deshalb ein Modifikator und keine Regel, die aus der Verschachtelung raet. / / Der aufgeklappte Leistungstext steht in Spalte 2 — also UNTER seinen Kaesten, nicht unter dem Kategorietitel. Dasselbe 1.2fr/2fr-Raster wie `.kvk-zeile`; damit fluchtet er von selbst mit, eine eigene `max-width` laege beim naechsten Raster-Umbau daneben. ⚠ Diese Regel ist am 2026-09-15 versehentlich mit den toten `.kvk-wertspalte`-Regeln geloescht worden (PR 855) und am selben Tag wiederhergestellt: Der Text rutschte links unter den Titel. Sie sieht neben der Wert-Spalte aus wie zu ihr gehoerig — ist sie aber nicht. / .f-strecke .kvk-leistungtext { grid-column: 2; margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); } / Mobil faellt `.kvk-zeile` auf EINE Spalte (Responsive-Sweep 12.08.) — dann gibt es keine zweite Spalte mehr, in die der Text koennte. / @media (max-width: 640px) { .f-strecke .kvk-leistung { grid-template-columns: minmax(0, 1fr); } .f-strecke .kvk-leistungtext { grid-column: 1; } } / Gestapelte Geldkarte der Ergebnisseite (`--hero`) ENTFALLEN 2026-09-15: Die Ersparnis steht dort jetzt in der Spar-Karte des Beitrags-Duells. Ihre Regeln hatten nur diesen einen Konsumenten und sind mit ihm gegangen — dasselbe Vorgehen wie bei den vier toten `.kvk-zeile--ersparnis`-Regeln am 02.09. Die Schluss-Seite (`--eng`) ist unberuehrt; sie stellt zwei Zeilen gegenueber und braucht die gestapelte Form nicht. Ebenfalls entfallen: `--gross`, `--minus` und die Wert-Spalte `.kvk-wertspalte`, alle drei nur von der alten Karte benutzt. / / Teurer statt guenstiger: dieselbe Karte, aber KEIN rot eingefaerbter Betrag, der wie ein Rechenfehler aussieht (Owner) — der Wechsel kostet hier schlicht mehr, und das sagt schon das Label daneben. / / ── Vergleichsseite v2: Fazit, Nutzen, Ablauf, Haltegriff ──────────────── (Owner 2026-09-15: „designtechnisch muss der Vergleich noch viel besser werden, hier muss die Verstaendlichkeit gegeben sein, auch damit die Conversion maximiert ist.") Spec + Entwurf: wissen/entwuerfe/funnel-vergleich-v2.html, design-system §Vergleichsseite der Kundenstrecke. / / Fazit — die Aussage der Seite in einem Satz, mit dem Weg dorthin daneben. / .f-strecke .f-fazit { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-radius: var(--k2-radius-karte); background: var(--k2-gruen-bg-leise); border: 1px solid var(--k2-gruen-bd-leise); } .f-strecke .f-fazitsatz { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-text); line-height: 1.35; } .f-strecke .f-fazitsatz b { color: var(--k2-gruen); font-weight: var(--fw-bold); } .f-strecke .f-fazitaktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } / Die drei Zusagen: Haken statt Aufzaehlungspunkten — sie sagen „erledigt", nicht „Liste". / .f-strecke .f-vertrauen { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--c-text-muted); } .f-strecke .f-vertrauen li { display: inline-flex; align-items: center; gap: 6px; } .f-strecke .f-vertrauen li::before { content: "✓"; color: var(--k2-gruen); font-weight: var(--fw-bold); } / Zwei Nutzen-Kacheln (`.f-nutzen`) ENTFALLEN am selben Tag: Die Beitrags-Ersparnis sitzt auf Owner-Wunsch als dritte Karte IN der Duell-Zeile („rechts neben den monatsbeitrag, buendig rechts"), der zweite Nutzen als Zeile darunter (`.f-dazu`). Regeln ohne Konsument gehen mit — wie die `--hero`-Karte eine Stunde vorher. Die Trennung der beiden Nutzen-ARTEN bleibt: Die sichere Zahl steht als gruene Karte, die Obergrenze als Fliesstext mit „bis zu". Nur ihre Form ist nicht mehr dieselbe — das war ja der Punkt. / / Die Ersparnis-Karte in der vierten Spalte: Sie traegt den Betrag gross, aber nicht so gross wie die Beitraege daneben — 190 px Spaltenbreite tragen `--strecke-spar-num` nicht, und eine umbrechende Zahl sieht aus wie ein Fehler. Nachgemessen statt geraten. / .f-strecke .f-spar-kartewert { font-size: var(--fs-h2); } / Zweiter Nutzen als Zeile: bewusst KEINE Karte — er ist eine Obergrenze, keine Zusage, und darf nicht wie die Ersparnis aussehen. / .f-strecke .f-dazu { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.45; } .f-strecke .f-dazu b { color: var(--c-text); font-weight: var(--fw-semibold); } / Ablauf — drei Schritte gegen die Frage „muss ich selbst kuendigen?" / .f-strecke .f-ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .f-strecke .f-ablaufschritt { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border-radius: var(--k2-radius-box); background: var(--c-surface-muted); } .f-strecke .f-ablaufnr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); color: var(--c-text-on-accent); font-size: var(--fs-sm); font-weight: var(--fw-bold); } .f-strecke .f-ablauftitel { font-weight: var(--fw-semibold); color: var(--c-text); } .f-strecke .f-ablauftext { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.4; } / Haltegriff — nur auf dem Handy, reines `sticky`, kein Skript. Die negativen Raender heben die Polsterung der Karte auf, damit die Leiste ueber die volle Breite klebt; `env(safe-area-inset-bottom)` haelt sie auf Geraeten mit Gestenleiste ueber dem Rand. / .f-strecke .f-haltegriff { display: none; } @media (max-width: 640px) { .f-strecke .f-nutzen, .f-strecke .f-ablauf { grid-template-columns: 1fr; } .f-strecke .f-fazit { padding: var(--sp-4); } .f-strecke .f-haltegriff { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 calc(-1 var(--card-pad)) calc(-1 * var(--card-pad)); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--c-surface); border-top: 1px solid var(--c-border); } .f-strecke .f-haltegriffzahl { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.25; } .f-strecke .f-haltegriffzahl b { display: block; font-size: 1rem; color: var(--k2-gruen); } } /* ── Beitrags-Duell `.f-beitrag-duell` (Owner 2026-09-15, Track F) ───────── Die Vergleichsseite zeigt Beitrag + Ersparnis im Duell-Bauteil des Konzepts (`.k2-dk`) statt in den grauen Kaesten der Leistungszeilen. Kein neues Bauteil — nur die Masse, die das Konsolen-Bauteil fuer die Strecke mitbringt, werden hier zurechtgerueckt. Spec: design-system §Beitrags-Duell der Kundenstrecke; Entwurf: wissen/entwuerfe/funnel-beitragsblock.html. Was zurechtgerueckt wird und warum: · Polsterung `0 30px 22px` — die kommt aus dem Konzept, wo das Duell direkt auf der Seite sitzt. Hier steht es in einer Karte, die ihre Polsterung schon hat; ohne die Null-Setzung stuende es eingerueckt neben allem anderen. · Die feste vierte Spalte (190px) des Grundrasters bleibt fuer die Spar-Karte ungenutzt — sie laeuft ueber `--breit` durch alle Spalten. / / `minmax(0, 1fr)` statt `1fr`: Die Beitragskarten tragen Logo und einen 1,875-rem-Betrag, ihre Mindestbreite lag bei 237 px — mit blossem `1fr` schiebt der Inhalt die Spalten auf und die dritte Karte ragte 7 px ueber die rechte Kante hinaus (im Browser gemessen). `minmax(0, …)` erlaubt das Schrumpfen, damit die Zeile buendig mit den Leistungszeilen darunter endet. / .f-strecke .f-beitrag-duell { padding: 0; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 230px; } / Ohne dritte Karte (kein Vergleichswert) faellt die vierte Spalte weg. / .f-strecke .f-beitrag-duell--zwei { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); } .f-strecke .f-beitrag-duell + .f-beitrag-duell { margin-top: var(--sp-3); } / Ersparnis-Karte: mittig, weil sie eine AUSSAGE ist und keine Gegenueber- stellung — die beiden Beitragskarten darueber sind linksbuendig, weil sie paarweise gelesen werden. Die Zahl traegt dieselbe Groesse wie zuvor die Geldkarte (`--strecke-spar-num`), damit der Umbau die Zahl nicht kleiner macht als der Owner sie am 02.09. gesetzt hat. / / `position: relative` ausdruecklich hier: Die Beitrags-Blase haengt an dieser Karte. `.k2-dkkarte` bringt es zwar mit — eine geerbte Eigenschaft, auf die sich ein fremdes Bauteil still verlaesst, faellt beim naechsten Umbau des Konzepts ohne Vorwarnung weg. / .f-strecke .f-spar-karte { position: relative; align-items: center; text-align: center; } / Owner 2026-09-15 (abends): „dass der Monatsbeitrag so groß und linksbündig ist gefällt mir noch nicht." Die beiden Beitrags-Karten stehen damit wie die Spar-Karte — mittig — und die Zahl kommt von 1.875rem auf `--strecke-beitrag-num`. Damit trägt die Zeile EINE Ausrichtung statt zweier, und der Beitrag tritt hinter die Ersparnis zurück, die die Aussage der Seite ist. Die frühere Begründung („linksbündig, weil paarweise gelesen") ist damit widerrufen: Paarweise gelesen werden die Karten auch mittig — sie stehen ohnehin nebeneinander, und der Pfeil dazwischen führt das Auge. NUR im Funnel-Geltungsbereich: `.k2-dk` ist das Duell-Bauteil des Konzepts und bleibt dort unverändert. / .f-strecke .f-beitrag-duell .k2-dkkarte--alt, .f-strecke .f-beitrag-duell .k2-dkkarte--neu { align-items: center; text-align: center; } .f-strecke .f-beitrag-duell .k2-dkkarte--alt .k2-dkwert, .f-strecke .f-beitrag-duell .k2-dkkarte--neu .k2-dkwert { font-size: var(--strecke-beitrag-num); } / `.k2-dksub` traegt im Konzept die ROTE Unterzeile der teuren Kasse (`--k2-rot-sub`) — auf der gruenen Spar-Karte sah die Monatszeile dadurch blass-rotstichig aus (Sichtprobe). Sie folgt hier der Karte. / .f-strecke .f-spar-kartesub { color: currentColor; opacity: .8; } @media (max-width: 640px) { / Auf dem Handy stapeln statt schrumpfen: zwei Karten nebeneinander lassen von den Betraegen nichts uebrig. Der Pfeil zeigt dann nach unten — er traegt die Aussage „von hier nach dort" und waere quer sinnlos. / .f-strecke .f-beitrag-duell { grid-template-columns: 1fr; } .f-strecke .f-beitrag-duell .k2-dkpfeil { transform: rotate(90deg); } } / ── Beitrags-Blase `.f-erk` (Owner 2026-09-15, Track F) ─────────────────── Das Fragezeichen an der Geldkarte: angetippt zeigt es, wie sich die Jahreszahl aus den beiden Monatsbeitraegen ergibt. Spec: design-system §Beitrags-Blase der Kundenstrecke. Warum `details` und nicht der Konsolen-Ausloeser `.k2-hover`: Der oeffnet auf `:hover`/`:focus-within`, und sein Ausloeser ist ein `span` — auf dem Handy bekommt der weder Hover noch Fokus, die Herleitung waere dort unerreichbar. Die halbe Strecke laeuft auf dem Handy, also entscheidet das Handy die Form. Die BLASE selbst bleibt das Bestands-Tooltip `.k2-tip` (keine zweite Panel-Konvention, design-system §Hover-Panel) — hier wird nur umgeschaltet, wer sie zeigt, und ihre Breite auf schmalen Geraeten gebaendigt. / / `text-align: center`, weil die Beschriftung jetzt umbrechen KANN: Das Fragezeichen nimmt der Zeile rund 28 px, und „Der Wechsel waere fuer dich teurer" passt auf dem Handy nicht mehr in eine Zeile (Sichtprobe 390 px). Einzeilig war die Zentrierung der Karte unsichtbar am Werk — zweizeilig muss sie ausgesprochen werden, sonst steht die zweite Zeile links und die Karte sieht schief aus. / .f-strecke .f-erk-zeile { display: inline-flex; align-items: center; gap: var(--sp-2); text-align: center; } .f-strecke .f-erk { display: inline-flex; } / Die Blase haengt an der ZEILE, nicht am Fragezeichen: Am Icon aufgehaengt und mittig gesetzt lief sie auf dem Handy 47 px ueber den rechten Rand (gemessen 390 px, Blase bis 437) — das Icon steht rechts neben der Beschriftung, nicht in der Mitte der Karte. Ueber die Kartenbreite gespannt und nach innen begrenzt passt sie in beiden Breiten. / .f-strecke .f-erkknopf { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1; cursor: pointer; list-style: none; } .f-strecke .f-erkknopf::-webkit-details-marker { display: none; } .f-strecke .f-erkknopf:hover, .f-strecke .f-erk[open] .f-erkknopf { border-color: var(--c-primary); color: var(--c-primary); } .f-strecke .f-erkknopf:focus-visible { box-shadow: 0 0 0 3px var(--c-focus-ring); } / `.k2-tip` bringt `display: flex` mit und wird in der Konsole per `.k2-hover` versteckt — hier uebernimmt das der Aufklapp-Zustand. / .f-strecke .f-erktafel { display: none; } .f-strecke .f-erk[open] .f-erktafel { display: flex; } / Nach UNTEN, nicht nach oben: Die Richtung dreht im Konzept app.js nach dem freien Platz (PR 688) — ohne JS kann die Strecke nicht messen. Unter der Karte ist immer Platz (es folgt der Leistungsteil), darueber stehen die beiden Beitragskacheln, die die Blase sonst verdeckt. Ueber die Zeile gespannt statt `right: 0`: An der rechten Kante ausgerichtet haengt die Blase schief unter der zentrierten Zahl; nach innen begrenzt fuellt sie auf dem Handy die Karte und bleibt auf dem Desktop ein Panel. / .f-strecke .f-erktafel { top: calc(100% + 8px); bottom: auto; left: 0; right: 0; width: auto; max-width: 320px; margin-inline: auto; text-align: left; } / Der Abschnittstitel steht hier dicht ueber seinem Hinweis, nicht mit dem grossen Abstand der Ergebnisseite: darueber liegt schon die Karte. / .f-strecke .kvk-abschnitt--eng { margin-bottom: 0; } / FAQ-Liste der Vergleichsseite (Owner 2026-09-15 abends). KEIN neues Bauteil: Klappzeile `.vk-vorteil` (Bestand, wie in der Kassen-Vorteile-Karte) + Antworttext `.kvk-leistungtexte` (Bestand, wie in den Leistungszeilen dieser Seite). Einzige Ergänzung ist der Pfeil am rechten Rand — in der Kassen-Vorteile-Karte schiebt ihn die Label-Spalte dorthin, die es hier nicht gibt. / .f-strecke .f-faq .vk-vorteilpfeil { margin-left: auto; } / Einwilligungs-Karten: Lesebreite statt voller Zeile. Ein Rechtstext, der ueber 1000 px laeuft, wirkt auseinandergezogen und liest sich schlechter — die Zeilenlaenge ist hier Teil der informierten Einwilligung. / .f-strecke .af-erk { max-width: var(--strecke-erk-max); margin-inline: auto; } / Wortmarke ueber der Karte — dieselbe Datei und Groesse wie auf den Rechtsseiten. Bewusst schlicht und ohne Balken: Die Strecke ist eine Formularseite, kein Portal; ein voller Header wuerde Platz nehmen, den auf dem Handy der Inhalt braucht. / .f-marke { margin-bottom: var(--sp-4); } / Stufen-Anzeige der Antragsstrecke: EIN Balken je Seite, gefuellt bis zur aktuellen. Bewusst Segmente statt eines Fortschrittsbalkens mit Prozentwert — die Strecke hat gezaehlte Seiten, keine kontinuierliche Fuellung, und Segmente kommen ohne Inline-Breite aus (Design-Lint). / .f-stufen { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); } .f-stufenstufe { flex: 1; height: var(--strecke-stufe-h); border-radius: var(--r-full); background: var(--c-border); } .f-stufenstufe.is-erreicht { background: var(--c-primary); } .f-markebild { height: var(--strecke-marke-h); display: block; } / Lesebreite fuer Seiten mit wenigen Feldern (Schritt 1). Die Ergebnisseite bleibt breit — sie stellt zwei Spalten nebeneinander. Gesetzt wird die Klasse am Inhaltsblock, damit Marke, Karte und Fussleiste zusammen ruecken. / .f-inhalt.f-schmal { max-width: var(--antrag-max); margin-left: auto; margin-right: auto; } / Zweispaltige Seiten brauchen eine EIGENE Breite (Owner 2026-09-02): Das Antragsformular lief ungebremst auf 1120 px, die Felder wurden dadurch 503 px breit — doppelt so breit wie dieselben Felder auf Schritt 1. `.f-schmal` ist auf DREI Spalten kalibriert und deshalb hier falsch. Nachgerechnet mit den gemessenen Werten, nicht geschaetzt: Raster = Karte − 2×24 (--card-pad) − 2×1 (Rahmen) − 2×24 (.af-zone) = Karte − 98 Feld = (Raster − Gap) / Spalten, Gap = 16 px (--sp-4) Schritt 1 (860 px, drei Spalten) ergibt damit 243 px je Feld. Rueckwaerts fuer ZWEI Spalten bei gleicher Feldbreite: Karte = 2 × 243 + 16 + 98 = 600 px ⚠ Nicht mit den 40 px des CONTAINER-Polsters rechnen — das liegt ausserhalb der Karte. Der Token steht trotzdem auf 720 px, nicht auf 600 (Owner 02.09., nach der Sichtprobe: „etwas eng, bitte um 20 % breiter"). Die 600 sind die Herleitung, nicht das Ziel: Sie beantworten „welche Breite ergibt DIESELBE Feldbreite wie Schritt 1" — 720 gibt dem Formular bewusst mehr Luft (Felder ~303 px statt 243). Die Rechnung bleibt hier stehen, weil sie den Bezugspunkt liefert, sobald jemand die Zahl wieder anfasst. / .f-inhalt.f-schmal-2col { max-width: var(--antrag-max-2col); margin-left: auto; margin-right: auto; } / Luft ueber den Spaltenkoepfen: In der Konsole stehen sie ganz oben im Modal, in der Strecke direkt unter der Ersparnis-Zeile — ohne Abstand klebt die grosse Zahl auf den Logos. / .f-strecke .kvk-logos { margin-top: var(--sp-4); } / Kategorie-Icons der Kundenstrecke etwas groesser als die Schrift. Die harte 1em-Regel (§kv-Zeilen-Icon) stammt von den Bilanz-Zeilen der Konsole, wo das Icon eine Zeile MARKIERT. Hier traegt es die Kategorie fuer einen Laien, der die Seite einmal sieht — bei 14px sind die Motive nicht mehr erkennbar. Gilt nur in der Strecke; die .kv-Zeilen des Backoffice bleiben unberuehrt. / .f-strecke .kvk-zeiletitel { display: inline-flex; align-items: center; gap: var(--sp-3); } / Der Ausklapp-Pfeil der Strecke ist ein SVG, kein Glyph: eine echte Flaeche statt eines Zeichens, das seine Zeilenbox nur zum Teil fuellt. Die Bestands-Regeln fuers Drehen bei [open] greifen ueber die Klasse weiter; `font-size`/`line-height` der Glyph-Fassung laufen bei einem SVG ins Leere, Groesse steht deshalb hier. / .f-strecke .vk-vorteilpfeil { width: var(--strecke-pfeil); height: var(--strecke-pfeil); flex: none; } / Aufklappbare Zeilen sehen jetzt aus wie aufklappbar (Konvention Klapp-Pfeile, Trello 186): Der Titel traegt `.klapp-link`, das Icon-Chip bleibt neutral — es ist kein Text und soll nicht mitfaerben. / .f-strecke .kvk-zeiletitel.klapp-link { font-weight: var(--fw-semibold); } .f-strecke .kvk-zeiletitel .kvicon { box-sizing: content-box; flex: none; margin: 0; height: var(--strecke-ikon-bild); width: var(--strecke-ikon-bild); padding: calc((var(--strecke-ikon-flaeche) - var(--strecke-ikon-bild)) / 2); border-radius: var(--r-sm); background: var(--strecke-ikon-bg); } .f-strecke .af-fussnote, .f-strecke .af-hinweis, .f-strecke .af-kopfmeta { color: var(--c-text-muted); } .kvk-alle:checked ~ .kvk-rest, .kvk-alle:checked ~ .kvk-rest { display: block; } /* Vollbreiter Umschalt-Knopf statt frei schwebend in der Mitte (Owner 2026-08-03): spannt die Inhaltsbreite und trennt zugleich die beiden Abschnitte sichtbar. / .kvk-alle__block { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); margin: var(--sp-5) 0; } / --kompakt: Der Ausklapp-Knopf ist ein Nebenweg, kein Hauptknopf — er schrumpft auf seinen Text statt ueber die ganze Spalte zu laufen. NICHT in der Basisklasse: derselbe Block steht in _kassen_duell_kunde.html und _tarif_duell.html der Konsole, deren Optik hier niemand beauftragt hat. / .kvk-alleblock--kompakt { align-items: flex-start; } .kvk-alleblock > label { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); } .kvk-allehinweis { font-size: var(--fs-caption); color: var(--c-text-muted); } .kvk-alleweniger { display: none; } .kvk-alle:checked ~ .kvk-alleweniger { display: inline; } .kvk-alle:checked ~ * .kvk-allemehr { display: none; } .kvk-alle:checked ~ * .kvk-alleblock .vk-vorteilpfeil, .kvk-alle:checked ~ .kvk-alleblock .vk-vorteilpfeil { transform: rotate(180deg); } @media print { .kvk-details { break-inside: auto; } .kvk-kategorie { break-inside: avoid; } } /* ── Tarif-Duell Bestand → Empfehlung (kvd-, Handoff Zahn-Modal §2) ────────── Schwester der kvk-Familie: Optik folgt dem Bestand-Picker (bestand-treffer- Karten), Grün-Mechanik dem Kassen-Duell. Grün NUR am Empfehlungs-Boxpaar bei belegtem Vorteil; die Bestand-Seite bleibt neutral (--kk-muted), nie rot. / /* (.modalbox--duell steht bei den anderen Modal-Varianten NACH der Basis — gleiche Spezifität, Reihenfolge entscheidet.) / .kvd { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0 var(--sp-6); } .kvd .kg-modalkopf { margin: 0 calc(-1 var(--sp-6)) 0; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--c-border-soft); position: sticky; top: 0; background: var(--c-surface); z-index: 2; } .kvd-koepfe { display: grid; grid-template-columns: minmax(0, 1fr) var(--kvd-pfeil-w) minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; } .kvd-koepfekarte { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); } .kvd-koepfekarte--empf { border: 2px solid var(--c-primary); background: var(--kk-violet-50); } .kvd-koepfepfeil { align-self: center; text-align: center; color: var(--c-text-soft); font-size: 18px; } /* Vergleichspartner-Reihe: feste Kartenbreite, scrollt horizontal (nie zentrieren in overflow-x — sonst sind linke Karten unerreichbar) / .kvd-wahl { display: flex; gap: var(--sp-3); overflow-x: auto; justify-content: flex-start; padding-bottom: var(--sp-1); } .kvd-wahlkarte { flex: none; width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; text-align: left; } .kvd-wahlkarte:hover { border-color: var(--c-accent-2); } .kvd-wahlkarte.is-aktiv { border: 2px solid var(--c-primary); background: var(--kk-violet-50); } .kvd-wahlrolle { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; } .kvd-wahlname { font-size: 13.5px; font-weight: var(--fw-semibold); } .kvd-wahlpreis { font-size: 13px; font-variant-numeric: tabular-nums; } .kvd-wahldelta { color: var(--c-text-muted); } .kvd-wahlbadge { font-size: 10.5px; font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); } .kvd-wahlchip { font-size: 10.5px; font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--r-full); background: var(--c-spart-bg); color: var(--c-spart); } / Hero: 4 ehrliche Zustände über data-fall / .kvd-hero { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); } .kvd-hero[data-fall="spart"], .kvd-hero[data-fall="besser"] { background: var(--c-spart-bg); } .kvd-hero[data-fall="spart"] .kvd-herozahl, .kvd-hero[data-fall="besser"] .kvd-herozahl { color: var(--c-spart); } .kvd-hero[data-fall="mehrwert"] { background: var(--kk-violet-50); } .kvd-hero[data-fall="mehrwert"] .kvd-herozahl { color: var(--c-primary); } .kvd-hero[data-fall="gleich"] { background: var(--kk-muted); } .kvd-herozahl { font-size: 30px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .kvd-herotitel { font-size: 15px; font-weight: var(--fw-semibold); } .kvd-herosub { width: 100%; font-size: var(--fs-caption); color: var(--c-text-muted); } / Duell-Zeilen: Label | Bestand | Pfeil | Empfehlung / .kvd-zeilen { display: flex; flex-direction: column; gap: var(--sp-1); } .kvd-zeile { display: grid; grid-template-columns: var(--kvd-label-w) minmax(0, 1fr) var(--kvd-pfeil-w) minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; break-inside: avoid; } .kvd-zeile--kopf .kvd-zeilespaltenkopf { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; } .kvd-zeilelabel { align-self: center; font-size: var(--fs-caption); color: var(--c-text-muted); } .kvd-zeilepfeil { align-self: center; text-align: center; color: var(--c-text-soft); } .kvd-zeilebox { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--kk-muted); font-size: 13.5px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } .kvd-zeilebox--besser { background: var(--c-spart-bg); border-color: var(--kk-green-bd); } .kvd-zeilebox.is-leer { color: var(--c-text-soft); font-weight: var(--fw-regular); } .kvd-zeiledelta { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--c-spart); } .kvd-zeilemarke { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--c-text-muted); } / Alle-Details-Umschalter + Fußzeile / .kvd-details > summary { list-style: none; cursor: pointer; } .kvd-details > summary::-webkit-details-marker { display: none; } .kvd-detailsknopf { display: inline-flex; padding: 8px 14px; border: 1px solid var(--c-border); border-radius: var(--r-full); font-size: 13px; font-weight: var(--fw-semibold); color: var(--c-primary); } .kvd-details[open] .kvd-detailsknopf { background: var(--kk-violet-50); } .kvd-details .bestand-rasterkat { margin-top: var(--sp-3); } .kvd-details .kvd-zeile { margin-top: var(--sp-1); } .kvd-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-top: 1px solid var(--c-border-soft); padding-top: var(--sp-3); } .kvd-fusshinweis { margin: 0; font-size: var(--fs-caption); color: var(--c-text-muted); } .kvd-fussaktionen { display: flex; gap: var(--sp-2); } @media (max-width: 1120px) { .kvd-koepfe { grid-template-columns: 1fr; } .kvd-koepfepfeil { transform: rotate(90deg); } .kvd-zeile { grid-template-columns: 1fr; } .kvd-zeilepfeil { display: none; } .kvd-zeile--kopf { display: none; } } @media print { .kvd-wahl, .kvd-fussaktionen { display: none; } .kvd-details > summary { display: none; } .kvd { padding: 0; } } / Präsentationen: Kachel-Übersicht (Quick-Access) + Vollbild-Viewer (kein Download). / .pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } / Karte 158: Abschnitts-Titel ueber den Kachel-Gruppen (Team oben, eigene darunter) — Zaehler-Badge inline neben dem Titel. / .pv-gruppe { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h3); margin: 0 0 var(--sp-3); } .pv-tile { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; } .pv-tile:hover { border-color: var(--c-primary); } .pv-tiletyp { font-size: var(--fs-h1); line-height: 1; } .pv-tiletitel { font-weight: var(--fw-semibold); } .pv-tilemeta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; } / Konzept-Varianten-Umschalter (Topbar-Mitte Konsole/Konzept). Karte 154 (Owner 21.08.): die 4 Varianten sind EINE klar abgegrenzte Gruppe (Segment-Hülle) — vorher schwammen die Chips frei zwischen Titel und Aktions-Buttons („viel zu überladen"). Inaktive Segmente flach, nur die aktive Variante trägt die Primary-Füllung. / .konzept-umschalter { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; background: var(--c-surface-muted); border: 1px solid var(--c-border-soft); border-radius: var(--r-full); padding: 3px; } .konzept-umschalter .btn { border-color: transparent; background: transparent; color: var(--c-text-muted); border-radius: var(--r-full); } .konzept-umschalter .btn:hover { background: var(--c-surface); } .konzept-umschalter .konzept-umschalteraktiv { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .konzept-umschalteraktiv { cursor: default; } / Präsentationen-Dropdown (Topbar Konsole/Konzept) + Overlay-Dialog / .pv-menu { position: relative; } .pv-menuknopf { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); } .pv-menuknopf::-webkit-details-marker { display: none; } .pv-menu[open] > .pv-menuknopf .vk-vorteilpfeil { transform: rotate(180deg); } .pv-menuliste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; display: flex; flex-direction: column; padding: var(--sp-2); background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--r-md); box-shadow: var(--card-shadow); } .pv-menuitem { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); } .pv-menuitem:hover { background: var(--c-surface-muted); } / Sende-Formular im Dropdown (Karte 134): E-Mail-Feld und Senden-Button gleich hoch (beide --field-h) und mittig in EINER Zeile — der Button brach vorher zweizeilig um und war kleiner als die E-Mail-Box (baseline-Ausrichtung). / .pv-menuitem--form { align-items: center; flex-wrap: nowrap; } .pv-menuitem--form:hover { background: transparent; } .pv-menuitem--form .input { flex: 1 1 auto; min-width: 0; } .pv-menuitem--form .btn { height: var(--field-h); white-space: nowrap; flex: 0 0 auto; } / Vollbild UNTERHALB der Topbar (Owner 2026-07-22: „Fullscreen, aber die Leiste bleibt stehen") — nicht-modaler Dialog (show statt showModal): die Topbar bleibt sichtbar UND bedienbar (z.B. nächste Präsentation, Abschluss). app.js setzt `top` auf die gemessene Topbar-Unterkante. / .pv-modal { position: fixed; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--c-border); background: var(--c-surface); display: flex; flex-direction: column; z-index: 40; } .pv-modal:not([open]) { display: none; } .pv-modalkopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); } .pv-modaltitel { font-weight: var(--fw-semibold); } .pv-modalframe { flex: 1; width: 100%; border: 0; } .pv-viewer { display: flex; flex-direction: column; height: 100vh; } .pv-viewerkopf { flex: none; } .pv-viewerframe { flex: 1; width: 100%; border: 0; } .pv-viewerbuehne { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-6); background: var(--c-surface-muted); } .pv-viewerbild { max-width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--card-shadow); } @media print { .vk-karte { break-inside: avoid; } .vk-bilanzkarte { break-inside: avoid; } .vk-kassekarte { break-inside: avoid; } .vk-edit { display: none; } .kv-duellkat { break-inside: avoid; } } .concept { max-width: var(--concept-max); margin: 0 auto; } .concept > + * { margin-top: var(--sp-6); } .concept .card + .card { margin-top: var(--sp-4); } /* Schutz-Bausteine nicht aneinanderkleben / / „Deine Situation heute" — was fehlt und aus eigener Tasche geht / .luecke { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border-soft); } .luecke:last-child { border-bottom: 0; } .lueckemark { flex: none; width: 18px; font-weight: var(--fw-bold); color: var(--luecke-mark-fg); line-height: 1.5; } .luecke.is-abgesichert .lueckemark { color: var(--luecke-ok-fg); } .luecketext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lueckename { font-weight: var(--fw-semibold); } .lueckesub { font-size: var(--fs-sm); color: var(--c-text-soft); } .lueckeloesung { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--luecke-loesung-fg); margin-top: 2px; } .lueckewert { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .lueckebetrag { font-weight: var(--fw-bold); color: var(--luecke-betrag-fg); font-variant-numeric: tabular-nums; white-space: nowrap; } .lueckewert-sub { font-size: var(--fs-caption); color: var(--c-text-soft); } .luecke.is-abgesichert .lueckewert-sub { color: var(--luecke-ok-fg); } / Modal: Bestätigungs-Dialog im eigenen Design (statt des nativen confirm()). Basis ist das -Element — bringt Fokus-Falle, Esc und Backdrop von Haus aus mit. / .modal { border: 0; padding: 0; background: transparent; max-width: 92vw; } .modal::backdrop { background: var(--modal-backdrop); } .modalbox { width: var(--modal-box-w); max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: var(--r-lg); box-shadow: var(--sh-lg); } / Breite Variante (Kassen-Vergleich v6) — muss NACH .modalbox stehen. / .modalbox--breit { width: var(--modal-box-w-breit); max-height: 86vh; overflow-y: auto; } .modaltitel { font-size: var(--fs-h2); font-weight: var(--fw-bold); } .modaltext { color: var(--c-text-muted); } .modalactions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); } .modal[open] { animation: modal-in var(--dur-fast) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } } @keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } / Ladebalken: dünne Fortschrittsleiste am oberen Rand während einer AJAX-Neuberechnung. Zeigt dem Berater sofort, dass sein Klick angekommen ist — der Server braucht ~0,5 s, ohne Feedback klickt man sonst nochmal. `is-active` schaltet JS beim Fetch. / .ladebalken { position: fixed; top: 0; left: 0; right: 0; height: var(--ladebalken-h); z-index: 2000; overflow: hidden; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; } .ladebalken.is-active { opacity: 1; } .ladebalkeninner { position: absolute; top: 0; height: 100%; width: 40%; border-radius: var(--r-full); background: var(--ladebalken-fg); animation: ladebalken-sweep var(--ladebalken-dur) var(--ease-out) infinite; } @keyframes ladebalken-sweep { 0% { left: -40%; } 100% { left: 100%; } } / Während eine Anfrage läuft: Progress-Cursor überall — auch über Buttons (höhere Spezifität). / html.is-pending, html.is-pending { cursor: progress; } @media (prefers-reduced-motion: reduce) { .ladebalkeninner { animation-duration: 1.8s; } } @media print { .ladebalken { display: none; } } /* Konzept-Tabs: teilen die Präsentation in heute → Konzept → Bilanz. Ohne JS bleiben alle Panels sichtbar (die Leiste blendet sich dann aus) — die Seite ist dann lang, aber vollständig. Erst `html.js` schaltet auf echte Tabs um. / .tabs { display: none; } .js .tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--sp-5); background: var(--tabs-bg); border-radius: var(--r-full); } / Varianten-Wechsel-Formulare in der Tab-Leiste (Konzept): Buttons fluchten wie Tabs / .tabs form { display: contents; } .tabsbtn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-full); background: transparent; color: var(--tabs-btn-fg); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .tabsbtn:hover { color: var(--tabs-btn-active-fg); } .tabsbtn.is-active { background: var(--tabs-btn-active-bg); color: var(--tabs-btn-active-fg); box-shadow: var(--sh-sm); } .tabsbtn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } / Panel-Überschrift trägt nur den Druck — auf dem Schirm sagt das der aktive Tab. / .tab-paneltitel { display: none; } @media print { .tabs { display: none; } / Das PDF muss vollständig sein: alle drei Ansichten drucken, mit Überschrift. / .tab-panel[hidden] { display: block !important; } .tab-panel { break-before: page; } .tab-panel:first-of-type { break-before: auto; } .tab-paneltitel { display: block; margin-bottom: var(--sp-4); font-size: var(--fs-h1); } } / Kachel-Edit: Stift auf der Kachel klappt das Baustein-Formular GENAU dieser Kachel auf.
— funktioniert ohne JS; ersetzt den früheren globalen Bearbeiten-Modus. / .vk-edit { margin-top: var(--sp-2); border-top: 1px dashed var(--c-border-soft); padding-top: var(--sp-2); } .vk-editstift { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-text-soft); border-radius: var(--r-sm); padding: 2px 6px; transition: color var(--t-fast), background var(--t-fast); } .vk-editstift::-webkit-details-marker { display: none; } .vk-editstift:hover { color: var(--c-primary); background: var(--kk-violet-50); } .vk-editstift:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .vk-editstift svg { width: 13px; height: 13px; flex: none; } .vk-edit[open] .vk-editstift { color: var(--c-primary); } .vk-editpanel { margin-top: var(--sp-3); } / Das eingebettete Baustein-Formular kommt aus der Konsole — in der schmalen Kachel ohne eigene Karten-Optik (die Kachel IST die Karte). / .vk-editpanel .baustein { border: 0; box-shadow: none; padding: 0; background: transparent; } .vk-edithinweis { margin: 0 0 var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-soft); } .eyebrow { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); } .kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border-soft); } .kv:last-child { border-bottom: 0; } .kvlabel { color: var(--c-text-muted); } .kvvalue { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; } / Karte 147: kleines Icon/Logo in einer kv-Zeile (Bilanz-Posten) — Owner-Regel HART: nie höher als die Schrift (1em-Cap via Token); Breite atmet für liegende Kassen-Logos, Ausrichtung an der Textlinie. / .kvicon { height: var(--kv-icon-h); width: auto; max-width: var(--kv-icon-max-b); object-fit: contain; vertical-align: -0.125em; margin-right: var(--sp-2); } / Konzept-Kopf: KassenKompass-Marke als Briefkopf / .concept-head { display: flex; align-items: center; gap: var(--sp-4); } .concept-head h1 { margin: 0; } .concept-brand { height: 30px; width: auto; display: block; } / Kasse inline: Logo + Name (einheitlich in Konzept, Backoffice, Konsole) / .kasse-inline { display: inline-flex; align-items: center; gap: var(--sp-2); } .kasse-inline > span { font-weight: var(--fw-semibold); } / Empfehlungs-Kopf: Sparten-Icon + Tarifname / .empfehlung-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); } / Sparten-Tags: Icon-Chips (ambulant, zahn, …) / .sparten-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .sparte-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px 6px 8px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .sparte-tag:hover { border-color: var(--c-accent-2); box-shadow: var(--sh-sm); } .sparte-tagicon { width: 22px; height: 22px; object-fit: contain; flex: none; } / Empfehlungs-Box: dünne Lila-Umrandung wie die aktive Baustein-Karte in der Konsole / .card--empfehlung { border-color: var(--konzept-empfehlung-bd); } / Ergebnis-Hero: große, farblich hervorgehobene Kernzahl (Ersparnis grün / Mehrbeitrag lila) / .konzept-hero { border-radius: var(--card-radius); padding: var(--sp-6) var(--sp-4); text-align: center; background: var(--konzept-hero-mehr-bg); box-shadow: var(--konzept-hero-shadow); } .konzept-hero.is-spart { background: var(--konzept-hero-spart-bg); } .konzept-heronum { font-size: var(--konzept-hero-num); font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; line-height: 1.05; } .konzept-hero.is-spart .konzept-heronum { color: var(--c-spart); } .konzept-herolabel { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-primary); margin-top: var(--sp-1); } .konzept-hero.is-spart .konzept-herolabel { color: var(--c-spart); } .konzept-herosub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; } / ---- Backoffice-Shell (Sidebar + Inhalt) ---- / .admin { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); padding: var(--sp-5) var(--sp-4); border-right: 1px solid var(--kk-shell-bd); } .sidebarbrand { font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--c-primary); margin-bottom: var(--sp-1); } .sidebarlogo { height: 24px; width: auto; display: block; } .sidebartag { display: block; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--sidebar-fg-muted); margin-bottom: var(--sp-6); } .nav { display: flex; flex-direction: column; gap: var(--sp-1); } .navitem { color: var(--sidebar-fg-muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-weight: var(--fw-medium); } .navitem:hover { color: var(--sidebar-fg); background: var(--nav-hover-bg); text-decoration: none; } .navitem.is-active { color: var(--nav-active-fg); background: var(--nav-active-bg); font-weight: var(--fw-semibold); } / Gruppen-Überschrift in der Sidebar (z.B. „Aktueller Fall", „Verwaltung"). / .navgruppe { margin: var(--sp-3) var(--sp-3) 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); } .admin-main { padding: var(--sp-8) var(--sp-10); background: var(--c-bg); min-width: 0; } / ── Accordion-Navigation (Design-Handoff „handoff-navigation", 2026-07-30) ─────── Eine stabile Leiste für ALLE Bereiche: alles sichtbar, Hierarchie als Dropdown, aktiver Pfad markiert (Icon-Chip + Text + Führungslinie), Zuklapp-Punkt bei eingeklappter Gruppe mit aktiver Seite. Auf-/Zu in app.js (localStorage). Spec: wissen/design-system.md §Navigation. / .nav2 { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; } .nav2-group { display: flex; flex-direction: column; } / Ebene-1-Zeile (Gruppen-Header ODER Top-Blatt). / .nav2-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--nav2-fg); font: inherit; font-size: 13.5px; font-weight: var(--fw-medium); cursor: pointer; text-align: left; } .nav2-item:hover { background: var(--nav-hover-bg); text-decoration: none; } .nav2-icon { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--nav2-chip-bg); color: var(--nav2-icon); } .nav2-icon svg { width: 14px; height: 14px; display: block; } .nav2-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav2-caret { flex: none; font-size: 10px; color: var(--c-text-soft); transform: rotate(-90deg); transition: transform var(--t-fast); } .nav2-group.is-open > .nav2-item .nav2-caret, .nav2-group.is-open > .nav2-child--group .nav2-caret { transform: rotate(0deg); } / Aktiver Pfad (Gruppe enthält aktive Seite) + aktives Top-Blatt. / .nav2-group.in-path > .nav2-item { color: var(--nav2-active-fg); font-weight: var(--fw-bold); } .nav2-group.in-path > .nav2-item .nav2-icon, .nav2-item.is-active .nav2-icon { background: var(--nav2-chip-bg-active); color: var(--nav2-icon-active); } .nav2-item.is-active { background: var(--nav2-active-bg); color: var(--nav2-active-fg); font-weight: var(--fw-bold); } / Zuklapp-Punkt: nur wenn Gruppe zu ist UND die aktive Seite enthält (reines CSS). / .nav2-dot { display: none; flex: none; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--nav2-dot); } .nav2-group[data-has-active]:not(.is-open) > .nav2-item .nav2-dot, .nav2-group[data-has-active]:not(.is-open) > .nav2-child--group .nav2-dot { display: block; } / Kinder-Container — eingeklappt weg (Accordion). / .nav2-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding-left: 19px; } .nav2-group:not(.is-open) > .nav2-sub { display: none; } .nav2-group--sub > .nav2-sub { padding-left: 14px; margin: 1px 0 2px; } .nav2-trenner { padding: 8px 10px 3px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--nav2-trenner); } / Kind-Zeile (Blatt oder Untergruppen-Header) — 2px-Führungslinie zeigt den Pfad. / .nav2-child { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-left: 2px solid var(--nav2-line-none); border-radius: 8px; background: transparent; color: var(--nav2-child-fg); font: inherit; font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; text-align: left; } .nav2-child:hover { background: var(--nav-hover-bg); text-decoration: none; } .nav2-child--group { color: var(--c-text); font-weight: var(--fw-bold); } .nav2-child[data-line="active"] { border-left-color: var(--nav2-line-active); } .nav2-child[data-line="path"] { border-left-color: var(--nav2-line-path); } .nav2-child.is-active { background: var(--nav2-active-bg); color: var(--nav2-active-fg); font-weight: var(--fw-bold); } .nav2-avatar { flex: none; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--kk-violet-100); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: var(--fw-bold); } .nav2-badge { flex: none; font-size: 10px; font-weight: var(--fw-bold); color: var(--c-text-soft); white-space: nowrap; } / Breadcrumb im Content-Header (Pfad zum aktiven Knoten). / .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); padding: 14px var(--sp-8); background: var(--topbar-bg); border-bottom: 1px solid var(--kk-shell-bd); font-size: 13px; color: var(--c-text-soft); flex-wrap: wrap; } .breadcrumbsep { color: var(--kk-shell-bd); } .breadcrumbglied--last { color: var(--c-text); font-weight: var(--fw-bold); } / Karte 221: klickbare Glieder — Link-Affordance über Hover, Farbe erbt die Leiste. / a.breadcrumbglied { color: inherit; text-decoration: none; } a.breadcrumbglied:hover { color: var(--c-text); text-decoration: underline; } / App-Shell: gleiche feste Sidebar wie das Backoffice, für die Berater-Seiten (Beratungen, Fall-Seite, Konsole). Kunden-Konzept nutzt sie bewusst nicht. / .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .app-main { min-width: 0; background: var(--c-bg); } .stack > + * { margin-top: var(--sp-6); } /* gleichmäßiger Vertikal-Rhythmus / / Tabellen-Hülle: breite Tabellen scrollen in sich, nie der Body / .table-wrap { overflow-x: auto; } / Backoffice + App-Shell mobil: Sidebar oben, Nav horizontal, Inhalt einspaltig / @media (max-width: 767px) { .admin, .app-shell { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--c-border); } .sidebartag { margin-bottom: var(--sp-3); } .nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); } .navgruppe { width: 100%; margin: var(--sp-2) var(--sp-1) 0; } .admin-main { padding: var(--sp-5) var(--sp-4); } } / Seitenkopf / .page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); } .page-head h1 { margin: 0; } / Stat-Karten / .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); } .stat { background: var(--c-surface-raised); border: 1px solid var(--c-border-soft); border-radius: var(--card-radius); padding: var(--sp-5); } .statnum { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; } .statlabel { color: var(--c-text-muted); font-size: var(--fs-sm); } / Formular-Raster + Flash / .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } / Endkunden-Raster (Track-F-Ticket 01.09., Owner-Entwurf Antragsstrecke): hoechstens ZWEI Felder nebeneinander, auf Handy-Breite eins — Modifier wie actions--stapeln-mobil, Backoffice-Formulare bleiben unberuehrt. minmax(0,…) verhindert Zellen-Ueberlauf langer Werte. Breakpoint 640px = Bestand. / .form-grid--zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .form-grid--zweispaltig { grid-template-columns: minmax(0, 1fr); } } / Vollbreites Feld INNERHALB des Rasters (Staatsangehoerigkeit, Adresszeile) — generisches Raster-Element; die Trello-245-Regel ist k2-bd-gebunden und deshalb hier nicht wiederverwendbar. / .form-gridvoll { grid-column: 1 / -1; } .actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); } / In der Kundenstrecke steht mehr Luft zwischen dem letzten Feld und der Knopfzeile (Owner 02.09.): 20 px reichen im Backoffice, wo dicht gearbeitet wird — hier klebte „Weiter" am Formular, und der Abschluss-Knopf ist die folgenreichste Schaltflaeche der ganzen Strecke. Nur `.f-strecke`, die Konsole bleibt unberuehrt. / .f-strecke .actions { margin-top: var(--sp-8); } / Track-F-Ticket 27.08. (Funnel 390px): Endkunden-Flächen stapeln die Aktions- Knöpfe auf Handy-Breite — Modifier, damit Backoffice-Formulare unberührt bleiben. Breakpoint 640px = Bestands-Konvention (ks-gkv-hero, kr-spar). / @media (max-width: 640px) { .actions--stapeln-mobil { flex-direction: column; align-items: stretch; } .actions--stapeln-mobil .btn { width: 100%; } } .flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-5); background: var(--c-success-bg); color: var(--c-success); } / Globaler Flash-Stapel (base.html): eine Instanz für ALLE Seiten — schwebt oben zentriert über jedem Layout (auch Konsole/Konzept/Admin mit eigenem Chrome). / .flash-stapel { position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(90vw, 560px); } .flash-stapel .flash { margin: 0; box-shadow: var(--sh-lg); } / Owner 02.09.: Auto-Ausblenden nach 5 s (app.js setzt --weg) — weich statt hart weg. / .flash-stapel { transition: opacity var(--t-slow), transform var(--t-slow); } .flash-stapel--weg { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; } / Datei-Upload (Dropzone) / .dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8); border: 2px dashed var(--c-border); border-radius: var(--card-radius); background: var(--c-surface); color: var(--c-text-muted); text-align: center; } / Inline-Reihe (Buttons/Badges nebeneinander) / .row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .rowname { flex: 0 0 13rem; font-weight: var(--fw-medium); } / Label-Spalte in einer Inline-Reihe / / Farb-Kachel (Styleguide) — zeigt einen Token; Farbe kommt aus dem Modifier / .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); } .swatch { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); overflow: hidden; } .swatchchip { height: 56px; } .swatchlabel { padding: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-muted); } .swatch--primary .swatchchip { background: var(--c-primary); } .swatch--primary-hover .swatchchip { background: var(--c-primary-hover); } .swatch--accent .swatchchip { background: var(--c-accent); } .swatch--accent-2 .swatchchip { background: var(--c-accent-2); } .swatch--bg .swatchchip { background: var(--c-bg); } .swatch--surface .swatchchip { background: var(--c-surface); } .swatch--muted .swatchchip { background: var(--c-surface-muted); } .swatch--ink .swatchchip { background: var(--c-text); } .swatch--border .swatchchip { background: var(--c-border); } .swatch--success .swatchchip { background: var(--c-success); } .swatch--warning .swatchchip { background: var(--c-warning); } .swatch--error .swatchchip { background: var(--c-error); } .swatch--info .swatchchip { background: var(--c-info); } / Startseite: Hero + Einstiegs-Kacheln / .home-hero { text-align: center; max-width: 640px; margin: 0 auto; padding: var(--sp-10) 0 var(--sp-2); } .home-hero .actions { justify-content: center; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); } a.card { color: inherit; } a.card:hover { box-shadow: var(--sh-lg); border-color: var(--c-accent); text-decoration: none; } / ============================================================================ Berater-Konsole (Design-Handoff 2026-07-14) — privat-banner, konsole-layout, monogramm, gkv-block, baustein-Karte, chip-radio, combo, bilanz(+bar). ========================================================================== / / „nicht teilen"-Kennung / .privat-banner { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-6); background: var(--banner-bg); border-bottom: 1px dashed var(--banner-bd); } .privat-bannerchip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-full); background: var(--c-primary); color: var(--c-text-on-accent); font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .08em; } .privat-bannertext { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--banner-fg); } / Konsolen-Chrome / .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 14px var(--sp-8); background: var(--topbar-bg); border-bottom: 1px solid var(--kk-shell-bd); } .app-topbargroup { display: flex; align-items: center; gap: 14px; min-width: 0; } .app-topbarlogo { height: 22px; display: block; } .app-topbarsep { width: 1px; height: 20px; background: var(--c-border); } .app-topbartitel { font-size: 14px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / Einklappbare Berater-Leiste (Owner 2026-09-03, Konzept-Praesentation): die Leiste liegt ZU, ein mittiger Griff holt sie per Hover/Fokus zurueck — so beginnt das Konzept ganz oben. Reines CSS, kein JS; --offen (Kunden-Modus) haelt sie dauerhaft offen. Markup: _konzept_topbar.html. / / Owner 2026-09-04: Die Leiste sprang beim leisesten Streifen SOFORT auf. Ursache war die Mechanik selbst: display none/flex ist ein harter Schalter, den keine transition weich machen kann. Jetzt fährt die Hülle als Grid auf — `grid-template-rows: 0fr → 1fr` animiert die Höhe MIT dem Platz, den die Leiste im Layout einnimmt (ohne feste Pixel-Höhe raten zu müssen). Zeile 1 = Leiste, Zeile 2 = Griff (der bleibt immer sichtbar, deshalb auto). Die drei Zeiten stehen als Tokens in tokens.css: · beim ÖFFNEN eine kurze Absichts-Schwelle — wer nur vorbeifährt, löst nichts aus (das war die eigentliche Beschwerde); · beim ZUklappen die Halte-Zeit (3 s), damit ein kurzes Abrutschen der Maus die Leiste nicht sofort wegzieht. Die Verzögerung sitzt jeweils in dem Zustand, in den hinein animiert wird: die Basis-Regel gilt beim Schließen, die :hover-Regel beim Öffnen. / .topbar-huelle { position: relative; display: grid; grid-template-rows: 0fr auto; transition: grid-template-rows var(--topbar-klapp-dauer) var(--ease-out); transition-delay: var(--topbar-klapp-halten); } / Fix 04.09. (Verursacher PR 681): Das Zusammenfahren sitzt auf einem NEUTRALEN Schacht, nicht auf der Leiste selbst. Grund: `.app-topbar` trägt Innenabstand und einen 1-px-Rahmen, und bei global `box-sizing: border-box` kann eine Höhe von 0 die nicht unterschreiten — eingeklappt blieben gemessene 21 px als beiger Streifen stehen. Der Schacht hat bewusst KEINEN eigenen Kasten, also fährt er wirklich auf 0. Die Leiste behält darin ihre Abstände je Bildschirmbreite (14/12/10/8 px) — die wären sonst vierfach zu wiederholen. / .topbar-huelleschacht { / min-height: 0 + overflow: hidden — ohne beides ignoriert das Grid-Kind die 0fr-Zeile und die Leiste bliebe in voller Höhe stehen. / min-height: 0; overflow: hidden; opacity: 0; transition: opacity var(--topbar-klapp-dauer) var(--ease-out); transition-delay: var(--topbar-klapp-halten); } .topbar-huelle:hover, .topbar-huelle:focus-within, .topbar-huelle--offen { grid-template-rows: 1fr auto; transition-delay: var(--topbar-klapp-oeffnen); } .topbar-huelle:hover > .topbar-huelleschacht, .topbar-huelle:focus-within > .topbar-huelleschacht, .topbar-huelle--offen > .topbar-huelleschacht { opacity: 1; transition-delay: var(--topbar-klapp-oeffnen); } / Kunden-Modus: dauerhaft offen, ohne jede Verzögerung — dort gibt es nichts zum Ein- und Ausklappen. / .topbar-huelle--offen { transition: none; } .topbar-huelle--offen > .topbar-huelleschacht { transition: none; } @media (prefers-reduced-motion: reduce) { / Keine Bewegung — die HALTE-Zeit bleibt aber: sie ist Bedienkomfort, keine Animation. / .topbar-huelle, .topbar-huelleschacht { transition-duration: 0s; } } .topbar-huellegriff { display: flex; align-items: center; justify-content: center; width: 76px; height: 16px; margin: 0 auto; padding: 0; background: var(--topbar-bg); color: var(--c-text-soft); border: 1px solid var(--kk-shell-bd); border-top: 0; border-radius: 0 0 var(--r-full) var(--r-full); font-size: 11px; line-height: 1; cursor: pointer; } .topbar-huellegriff:hover { color: var(--c-text); } .topbar-huellepfeil { display: block; transition: transform var(--topbar-klapp-dauer) var(--ease-out); transition-delay: var(--topbar-klapp-halten); } .topbar-huelle:hover .topbar-huellepfeil, .topbar-huelle:focus-within .topbar-huellepfeil { transform: rotate(180deg); transition-delay: var(--topbar-klapp-oeffnen); } .topbar-huelle--offen .topbar-huellegriff { display: none; } / Topbar-Benutzer (Karte 133): angemeldeter Benutzer — runder Initialen-Avatar + Name/Rolle (Rollen-Wahrheit rollen.py). Rendert nur eingeloggt. / .tb-benutzer { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .tb-benutzeravatar { display: inline-flex; align-items: center; justify-content: center; width: var(--tb-avatar-groesse); height: var(--tb-avatar-groesse); border-radius: 50%; background: var(--tb-avatar-bg); border: 1px solid var(--tb-avatar-bd); color: var(--tb-avatar-fg); font-size: 12px; font-weight: 800; letter-spacing: .02em; flex: none; } .tb-benutzertext { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .tb-benutzername { font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-benutzerrolle { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-soft); } .konsole-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--sp-6); padding: 28px var(--sp-8) var(--sp-10); align-items: start; max-width: var(--content-max); margin: 0 auto; } / Mehr Luft zwischen den Personen + Akzentkante, damit man die Blöcke sofort trennt. / / ── Konsole-Stepper (kst-, Design handoff-konsole, 2026-07-29) ─────────────── Drei Spalten: frei anspringbare Schritt-Navigation | EINE Schritt-Karte | Bilanz (bestehende .bilanz-spalte). Kein Zwangs-Wizard (Ole-Leitplanke). Spec: wissen/design-system.md §Konsole-Stepper. / .konsole-wrap--stepper { grid-template-columns: var(--kst-nav-w) minmax(0, 1fr) var(--kst-bilanz-w); max-width: var(--kst-max); padding-left: clamp(var(--sp-5), 2.5vw, var(--sp-10)); padding-right: clamp(var(--sp-5), 2.5vw, var(--sp-10)); } /* Mittlere Breiten (MacBook 13–15″ mit App-Sidebar): Navigation und Bilanz geben Platz an die Schritt-Karte ab. / @media (max-width: 1499px) { .konsole-wrap--stepper { --kst-nav-w: 204px; --kst-bilanz-w: 312px; } .konsole-wrap--stepper .kst-karte { padding: var(--sp-5) var(--sp-6); } } / Ab ~1500px wachsen Navigation und Bilanz mit — die Schritt-Karte bekommt den Rest. / @media (min-width: 1500px) { .konsole-wrap--stepper { --kst-nav-w: 268px; --kst-bilanz-w: 400px; gap: var(--sp-8); } .konsole-wrap--stepper .kst-karte { padding: var(--sp-8) var(--sp-10); } .konsole-wrap--stepper .kst-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .kst-nav { position: sticky; top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; } .kst-navpersonen { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .kst-person { display: inline-flex; align-items: center; justify-content: center; flex: 1; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kst-person--haupt { background: var(--kk-violet-100); border-color: var(--kk-violet-100); color: var(--c-primary); } .kst-person--add { flex: none; border-style: dashed; color: var(--c-primary); text-decoration: none; } .kst-navschritte { display: flex; flex-direction: column; gap: var(--sp-1); } .kst-schritt { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; } .kst-schritt:hover { background: var(--c-surface-muted); text-decoration: none; } .kst-schritt.is-aktiv { background: var(--kk-violet-100); color: var(--c-primary); font-weight: var(--fw-bold); } .kst-schrittpunkt { display: inline-flex; align-items: center; justify-content: center; width: var(--kst-punkt); height: var(--kst-punkt); flex: none; border-radius: var(--r-full); background: var(--c-surface-muted); color: var(--c-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); } .kst-schritt.is-aktiv .kst-schrittpunkt { background: var(--c-primary); color: var(--c-text-on-accent); } .kst-schrittpunkt[data-zustand="beantwortet"] { background: var(--kst-punkt-fertig); color: var(--c-text-on-accent); } / Stepper-Icon (Owner 2026-08-13): Themen-Icon zwischen Zustands-Punkt und Label — dieselbe Bildsprache/Dateien wie .bausteinicon (img/icons/). Der Punkt trägt weiter den ZUSTAND (✓/Nummer), das Icon nur das Thema. / .kst-schritticon { width: 18px; height: 18px; flex: none; object-fit: contain; } .kst-schrittlabel { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kst-schrittstatus { flex: none; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-text-soft); } .kst-navhinweis { margin: 0; padding: 0 var(--sp-3); font-size: var(--fs-caption); color: var(--c-text-soft); text-wrap: pretty; } / Karte-122-Folge · Stepper-Submenü (Owner-Präzisierung 19.08.): „Ambulant" bleibt als sichtbare GRUPPE über den zwei Unterschritten Vorsorge/Heilpraktiker — reine Überschrift (kein Link, kein dritter Top-Level-Weg), die Unterschritte rücken ein. Konvention: design-system §Stepper-Submenü. / .kst-gruppelabel { margin: var(--sp-1) 0 0; padding: 0 var(--sp-3); font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-soft); } .kst-schritt--sub { margin-left: var(--sp-4); } .kst-haupt { min-width: 0; } .kst-karte { border-radius: var(--kst-karte-radius); padding: var(--sp-6) var(--sp-8); } .kst-kartetitel { margin: 0 0 var(--sp-5); font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-primary); letter-spacing: -.01em; } .kst-person-label { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-soft); } .kst-personen-block + .kst-personen-block { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border-soft); } .kst-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); } .kst-stat { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--kst-stat-bg); } .kst-statlabel { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-soft); } .kst-statwert { margin: 2px 0 0; font-size: var(--fs-body); font-weight: var(--fw-bold); } .kst-warnung { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--kk-error-leise); border: 1px solid var(--kk-error-bd); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--kk-error); } .kst-fazit { display: grid; gap: var(--sp-2); } .kst-fazitzeile { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--kst-stat-bg); min-width: 0; } .kst-fazitlabel { flex: none; min-width: 110px; font-size: var(--fs-sm); font-weight: var(--fw-bold); } .kst-fazitwert { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-text-muted); text-wrap: pretty; } .kst-fazitbetrag { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; } .kst-fazitbetrag--spart { color: var(--kk-green); } .kst-fazitbetrag--offen { color: var(--c-primary); } .kst-fazitzeile--ergebnis { background: var(--kk-violet-50); border: 1px solid var(--kk-violet-bd); } .kst-cta { margin-top: var(--sp-5); } .kst-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border-soft); } / Unter ~1400px (13″-MacBook + App-Sidebar) reicht der Platz nicht für drei Spalten — einspaltig, Schritte horizontal; die fixe Bilanz-Bar unten hält das Live-Feedback sichtbar. / @media (max-width: 1399px) { .konsole-wrap--stepper { grid-template-columns: minmax(0, 1fr); } .kst-nav { position: static; } .kst-navschritte { flex-direction: row; flex-wrap: wrap; } .kst-schrittstatus { display: none; } / Horizontale Schritt-Reihe: Gruppen-Label und Einzug ergeben ohne Untereinander-Stapel keinen Sinn — Submenü nur in der vertikalen Nav. / .kst-gruppelabel { display: none; } .kst-schritt--sub { margin-left: 0; } } .konsole-personen { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; } .konsole-personen > .card { border-top: 3px solid var(--person-accent-bd); } / Monogramm — Logo-Fallback ohne Bild / .monogramm { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--kk-violet-100); color: var(--c-primary); font-size: 10px; font-weight: var(--fw-bold); flex: none; } .monogramm--person { width: 36px; height: 36px; border-radius: var(--r-full); font-size: 14px; } .logo-slot { display: inline-flex; align-items: center; justify-content: center; width: 40px; flex: none; } .logo-slot img, .logo-img { max-height: 18px; max-width: 40px; object-fit: contain; display: block; } .logo-img--md { max-height: 20px; max-width: 72px; } / Kassen-Logo im Konzept-Kopf (Owner 2026-07-29: „etwas größer, ersetzt den Namen") / .logo-img--lg { max-height: 28px; max-width: 110px; } / Personen-Kopf / .person-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); flex-wrap: wrap; } .person-headid { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .person-headname { font-size: 17px; font-weight: var(--fw-bold); } .person-headbilanz { font-size: 13px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; } .person-headrechts { display: flex; align-items: center; gap: var(--sp-3); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text-soft); cursor: pointer; font-size: 13px; line-height: 1; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .icon-btn:hover { border-color: var(--c-border); color: var(--c-text); } .icon-btn--danger:hover { border-color: var(--c-error); color: var(--c-error); background: var(--c-error-bg); } / Basisträger-GKV-Block / .gkv-block { background: var(--gkv-block-bg); border: 1px solid var(--gkv-block-bd); border-radius: var(--r-md); padding: var(--sp-4) 18px; margin-bottom: 14px; } .gkv-block .eyebrow { color: var(--c-accent); letter-spacing: .06em; } .gkv-blockzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .gkv-blockaktuell { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; } / Familienmitglied: Kasse fest (wie Hauptperson) — keine Auswahl. / .gkv-blockfest { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 220px; } .gkv-blockkasse { display: flex; flex-direction: column; min-width: 0; } .gkv-blockkasse-name { font-size: 13.5px; font-weight: var(--fw-semibold); } .gkv-blockkasse-sub { font-size: 12px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; } .gkv-blockpfeil { color: var(--kk-violet-300); font-size: 18px; font-weight: var(--fw-bold); } .gkv-blockneu { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } / Baustein-Karten / .baustein-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); } .baustein { display: flex; flex-direction: column; gap: 10px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px var(--sp-4); } .baustein.is-aktiv { border-color: var(--baustein-active-bd); } .baustein.is-off { background: var(--baustein-off-bg); } / Kopf ist der Auf-/Zuklapp-Schalter des Bausteins (button-Reset). / .bausteinkopf { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); font: inherit; color: inherit; text-align: left; cursor: pointer; } .bausteinkopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-focus-ring); } .bausteinicon { width: 30px; height: 30px; object-fit: contain; flex: none; } / Abgewählt: Icon komplett grau. / .baustein.is-off .bausteinicon { filter: grayscale(1); opacity: .45; } / Kleines Angehörigkeits-Symbol (Owner 2026-08-04): läuft inline vor dem Namen/Label mit (Stepper-Chip + Personen-Kopfzeile), skaliert mit der Textgröße. Nur Layout — die Farben liegen im SVG-Asset (img/icons/beziehung-.svg). / .beziehung-icon { width: 1.5em; height: 1.5em; flex: none; vertical-align: -0.35em; margin-right: var(--sp-1); } .bausteintitel { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bausteinname { font-size: 14px; font-weight: var(--fw-bold); } .bausteinsub { font-size: 11.5px; color: var(--c-text-soft); } .bausteincaret { flex: none; color: var(--c-text-soft); font-size: 11px; transition: transform var(--t-fast); } .baustein:not(.is-collapsed) .bausteincaret { transform: rotate(180deg); } .bausteinbody { display: flex; flex-direction: column; gap: 10px; } .baustein.is-collapsed .bausteinbody { display: none; } .bausteinpreis { font-size: 14px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .bausteinhinweis { font-size: 12px; color: var(--c-text-soft); margin: 0; } .bausteininputs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .bausteininputs .input { height: 36px; } .bausteininputs .input--betrag { width: 84px; text-align: right; flex: none; } .bausteininputs .combo--versicherer { min-width: 160px; } .bausteinfrei { width: 100%; margin-top: var(--sp-2); } /* Bestandsvertrag-Vorfilter rev. 2 (Handoff Zahn-Modal §1.1(3)): beschriftetes 3-Spalten-Grid Versicherer · Beitrag · Vertragsjahr/Bereich. / / Owner-Bug 02.09. (Konsole, "Beitrag rutscht unter den Versicherer"): das 3-Spalten-Grid hielt die Versicherer-Spalte auf minmax(0,1fr), die Combo darin aber auf min-width 260px - bei mittleren Fensterbreiten lief der Trigger ueber die Beitrag-Spalte. Jetzt flex-wrap: Versicherer waechst (Basis 220px), Beitrag/Jahr halten ihre Breite und brechen bei Platzmangel in die naechste Zeile um - nie mehr uebereinander, bei JEDER Breite. / .bestand-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: flex-end; } .bestand-filterfeld { flex: 1 1 220px; } .bestand-filterfeld:has(> .input--betrag) { flex: 0 0 132px; } .bestand-filterfeld:has(> .input--jahr) { flex: 0 0 172px; } .bestand-filter .combo { min-width: 0; width: 100%; flex: none; } / T01-Fix (Owner-Screenshot „Beitrag-Label versetzt"): der JS-Combo-Trigger war höher als die 36px-Inputs — mit align-items:end rutschten die kürzeren Felder samt Label nach unten. Trigger im Filter auf Input-Höhe klemmen → alle Labels sitzen auf einer Linie. / .bestand-filter .combotrigger { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; } .bestand-filterfeld { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bestand-filterlabel { font-size: 10.5px; color: var(--c-text-muted); } .bestand-filter .input { height: 36px; } .bestand-filter .input--betrag { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .bestand-filterfeld, .bestand-filterfeld:has(> .input--betrag), .bestand-filterfeld:has(> .input--jahr) { flex: 1 1 100%; } } .bausteinhinweis--klein { font-size: var(--fs-caption); color: var(--c-text-muted); margin: 0; } / Aufklappbare Personen-Formulare (hinzufügen / Basisdaten bearbeiten) / .felder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } .felder-grid .field { margin-bottom: 0; } / Karte 157: nackte Buttons als Grid-Item streckten sich auf Zellhoehe UND -breite (Riesen-„Hochladen" neben Label+Input in den Upload-Formularen) — Buttons sitzen in natuerlicher Groesse auf der Input-Grundlinie. / .felder-grid > .btn { align-self: end; justify-self: start; } .person-add, .person-edit, .fall-ausgaben { margin-top: var(--sp-4); } .person-add > summary, .person-edit > summary, .fall-ausgaben > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; } .person-add > summary::-webkit-details-marker, .person-edit > summary::-webkit-details-marker, .fall-ausgaben > summary::-webkit-details-marker { display: none; } / Aufklapp-Knopf sichtbar klickbar (Owner 2026-08-30): lila Schrift statt des gedaempften Ghost-Graus + Dreieck nach unten, das sich beim Oeffnen dreht. BEWUSST nur die Ghost-Summaries (person-edit, fall-ausgaben) — `.person-add` ist ein gefuellter Secondary-Button und braeuchte sonst seinen eigenen Vordergrund ueberschrieben. / .person-edit > summary, .fall-ausgaben > summary { color: var(--c-primary); } .person-edit > summary::after, .fall-ausgaben > summary::after { content: "▾"; font-size: 1.1em; line-height: 1; transition: transform .15s ease; } .person-edit[open] > summary::after, .fall-ausgaben[open] > summary::after { transform: rotate(180deg); } / Ausgaben-Block der Fall-Seite hinter einem Klick (Owner 2026-08-30): gleiche summary-Behandlung wie person-edit, der Container darunter bleibt unveraendert. Abstand nur im offenen Zustand — zugeklappt soll der Knopf keine Luft ziehen. / .fall-ausgaben[open] > summary { margin-bottom: var(--sp-3); } .person-addform, .person-editform { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--c-surface-raised); border: 1px solid var(--c-border-soft); border-radius: var(--card-radius); } / Basisdaten sitzen direkt unter dem Personen-Kopf, nicht am Blockende. / .person-edit { margin-top: 0; margin-bottom: var(--sp-4); } .person-edithinweis { font-size: var(--fs-caption); margin: 0 0 var(--sp-3); } / Abschnitts-Überschrift im Basisdaten-Formular (z.B. „Kontakt & Adresse") / .person-editgruppe { margin: var(--sp-4) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border-soft); } .hinweis-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); background: var(--c-warning-bg); color: var(--c-warning-text); font-size: 11.5px; font-weight: var(--fw-semibold); } / Empfehlungszeile (auto + Bedarf) / .empfehlung { display: flex; align-items: center; gap: 10px; background: var(--kk-violet-50); border-radius: var(--r-sm); padding: 10px 12px; } .empfehlungtext { flex: 1; min-width: 0; display: flex; flex-direction: column; } .empfehlungname { font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empfehlungsub { font-size: 11px; font-weight: var(--fw-semibold); color: var(--c-accent); } .empfehlungpreis { font-size: 13px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; } / Gewählte Bausteine + Leistungen (Bullet-Points; Bilanz-Spalte & Konzept) / .leistung-block { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border-soft); } .leistung-block:last-child { border-bottom: 0; padding-bottom: 0; } .leistung-blockkopf { display: flex; align-items: center; gap: var(--sp-2); } .leistung-blockicon { width: 26px; height: 26px; object-fit: contain; flex: none; } .leistung-blocktitel { flex: 1; min-width: 0; display: flex; flex-direction: column; } .leistung-blockname { font-size: 13px; font-weight: var(--fw-bold); } .leistung-blocksub { font-size: 11px; color: var(--c-text-soft); } .leistung-blockpreis { font-size: 13px; font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; flex: none; } .leistung-liste { list-style: none; margin: var(--sp-2) 0 0; padding: 0 0 0 34px; display: flex; flex-direction: column; gap: 4px; } .leistung-liste li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: 12px; } .leistung-liste li::before { content: "✓"; position: absolute; left: -16px; color: var(--c-primary); font-weight: var(--fw-bold); font-size: 11px; } .leistung-listelabel { color: var(--c-text-muted); } .leistung-listewert { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } / Status-Chips (Radio-basiert — funktioniert ohne JS mit Speichern-Button) / .chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .chip-radio { position: relative; } .chip-radio input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; } .chip-radio span { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); font-size: 11.5px; font-weight: var(--fw-semibold); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .chip-radio:hover span { border-color: var(--c-accent-2); } .chip-radio input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-accent); } .chip-radio input:focus-visible + span { border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); } / Kombi-Schnellauswahl im GKV-Vergleich: ein Button toggelt mehrere Themen-Chips (JS-Enhancement, kommt hidden aus dem Server-Markup). Optik = chip-radio, aktiv = alle hinterlegten Themen gewählt. / .chip-kombi { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-full); border: 1px dashed var(--c-accent-2); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 11.5px; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } / display:inline-flex würde das hidden-Attribut aushebeln — ohne JS blieben sonst tote Buttons sichtbar (Review-Befund 2026-07-20). / .chip-kombi[hidden] { display: none; } .chip-kombi:hover { border-color: var(--c-primary); } .chip-kombi.is-active { background: var(--c-primary); border-color: var(--c-primary); border-style: solid; color: var(--c-text-on-accent); } .chip-kombi.is-active .chip-kombisub { color: var(--c-text-on-accent); } .chip-kombi:focus-visible { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px var(--c-focus-ring); } / Pille steht im Aufbau, trägt aber noch keine Kategorien (Owner 31.08.) — gleiche Konvention wie .btn:disabled und .k2-cmpchip:disabled. / .chip-kombi:disabled { opacity: .5; cursor: default; } .chip-kombi:disabled:hover { border-color: var(--c-accent-2); } .chip-kombi__sub { font-weight: var(--fw-regular); color: var(--c-text-muted); } / Combo — Custom-Select mit Logo + Suche (progressive enhancement über natives