/* ============================================================================
   MOBILE DESIGN-LIBRARY (Owner-Auftrag 2026-09-09)
   ============================================================================
   Eigene Bausteine für die Handy-Ansicht — bewusst GETRENNT von der
   Desktop-Library in components.css. Owner wörtlich: „das soll sich bitte
   nicht vermischen."

   REGELN DIESER DATEI
   1. Alle Klassen tragen das Präfix `m-`. Eine `m-`-Klasse taucht NIE in
      components.css auf und umgekehrt — wer eine Regel sucht, weiß sofort,
      in welcher Datei sie steht.
   2. ~~Alles hier steht in `@media (max-width: …)`~~ — widerrufen 16.09.
      (Desktop-Runde, Owner: „alles so wie mobil, nur den Platz besser
      nutzen"): Diese Datei gilt an ALLEN Breiten. Der Desktop zeigt das
      Mobil-Design; die Desktop-Blöcke (.k2-vn, .k2-szc, .k2-erl, .k2-kind,
      .vb, .k2-bd …) treten über die Sammelregeln unten überall ab. Was am
      Desktop ANDERS ist (festes Menü, Spaltenbreite, Bildgrößen), steht in
      `@media (min-width: 861px)` — in components.css (Menü/Seite) bzw. hier
      (Maße der m-Bausteine).
   3. Farben und Maße kommen als Token aus tokens.css (Abschnitt „Mobile
      Library", Präfix `--m-`). Keine Roh-Farbe hier — der Design-Lint prüft
      diese Datei wie jede andere.
   4. Ein Element, das auch der Desktop braucht, gehört NICHT hierher,
      sondern in components.css.

   BAUSTEINE
   - `m-icon`      Icon-Sprache: Warnung (rot), Info (grau)
   - `m-risiko`    Ereignis-Kachel: Bild links, Titel + Eigenanteil rechts
   - `m-info`      „Was ist das?"-Popup mit drei Schließwegen
   ========================================================================= */

/* ~~Weichen `.m-liste/.m-kasse/.m-thema/.m-uebersicht { display: none }`
   außerhalb der Query~~ — entfernt 16.09. (Desktop-Runde): Der Desktop
   zeigt jetzt genau diese Blöcke. ~~`@media (max-width: 860px) { … }` um
   die ganze Datei~~ — aufgehoben, s. Regel 2 im Kopf. */


/* Die Weiche: mobil zeigt die Kachel-Liste, die Desktop-Tabelle tritt ab.
   Beide lesen dieselben Daten — es ist eine Darstellungs-, keine Inhaltsfrage. */
.m-liste { display: block; margin: 0 12px 18px; min-width: 0; }   /* min-width: als Flex-Kind nie breiter als die Seite */
/* Partner-Box (Owner 16.09.): zweites Konzept des Ehepartners als eigene,
   umrandete Box unter der Liste — Kopf „Für <Name>" + Chip, darin dieselben
   Kacheln. Tokens wie die Baustein-Karte. */
.m-partner, .m-kasse__bonus { display: block; margin: 0 12px 18px; padding: 12px 12px 0; border: 1px solid var(--m-linie); border-radius: var(--m-radius); background: var(--m-flaeche); min-width: 0; }
.m-partner .m-liste { margin: 0; }
/* Bonusprogramm mobil (M10, 16.09.): Zeilen wie in der Baustein-Karte. */
.m-kasse__bonus .m-bk__sek { margin: 0 0 10px; }
/* [hidden] muss gegen das display:block oben halten (Bonus erst nach „Optimierung anzeigen"). */
.m-kasse__bonus[hidden] { display: none; }
/* Owner-Bug B5 (21.09.): Der Bonus-Kasten steht IN der Kassen-Fläche und hat
   dieselbe Breite wie „Warum der Wechsel passt" darüber — kein eigener Rand. */
.m-kasse .m-kasse__bonus { margin-left: 0; margin-right: 0; }
/* Owner-Bug B4 (21.09.): heutiger Beitrag im Vergleich durchgestrichen. */
.m-risiko--opt .m-kasse__alt-wert { text-decoration: line-through; color: var(--m-text-leise); }
.k2-erl { display: none; }
/* Seitengrund am Handy = das helle Beige des Vergleichs auf kassenkompass.de
   (Owner 09.09.) — statt des Lilagraus der Desktop-Seite. */
.k2-hintergrund, .k2-board, .k2-detail { background: var(--m-seite-bg); }


/* ── Kopfleiste: Konto-Feld + Fortschrittsleiste (Fiona-Mockup v1, 09.09.) ──
   Konto: rechts in der Kopfleiste nur Vorname + Symbol; das Feld darunter
   klappt per <details> auf. Fortschritt: vier Segmente, aktiv = lila. */
.m-konto { display: block; margin-left: auto; position: relative; }
.m-konto__griff { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.m-konto__griff::-webkit-details-marker { display: none; }
.m-konto__name { font-size: 14px; font-weight: var(--fw-bold); color: var(--m-aktion); }
.m-konto__symbol { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--m-flaeche-aktiv); color: var(--m-aktion); }
.m-konto__symbol svg { width: 17px; height: 17px; }
.m-konto__feld { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 250px; padding: 14px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); box-shadow: var(--sh-lg); }
.m-konto__status { margin: 0 0 10px; font-size: 13px; color: var(--m-text-leise); }
.m-konto__knopf { display: block; width: 100%; padding: 11px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--m-aktion); background: transparent; color: var(--m-aktion); font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; }

.m-schritte { display: flex; gap: 8px; padding: 10px 12px 0; }
.m-schritte__segment { flex: 1; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.m-schritte__balken { display: block; height: 4px; border-radius: var(--r-full); background: var(--m-linie-stark); opacity: .55; }
/* Fortschritt (Owner 17.09.): besuchte Themen helllila, das aktuelle dunkellila —
   „--aktiv" steht NACH „--besucht", damit das aktuelle Thema immer gewinnt. */
.m-schritte__segment--besucht .m-schritte__balken { background: var(--m-schritt-besucht); opacity: 1; }
.m-schritte__segment--besucht .m-schritte__label { color: var(--m-text); }
.m-schritte__segment--aktiv .m-schritte__balken { background: var(--m-aktion); opacity: 1; }
.m-schritte__label { text-align: center; font-size: 12px; color: var(--m-text-leise); }
.m-schritte__segment--aktiv .m-schritte__label { color: var(--m-aktion); font-weight: var(--fw-semibold); }
.m-schritte__segment--leer { opacity: .7; }
/* Fiona-Redesign v1, Schritt 2 (Owner 21.09.): Emoji über dem Balken, blass
   solange unbesucht; der Kurzname ist nur noch für Screenreader da, sichtbar
   steht der volle Name der aktuellen Seite unter der Leiste. */
.m-schritte__segment { position: relative; align-items: center; }
.m-schritte__balken { align-self: stretch; }
.m-schritte__emoji { font-size: var(--m-schritt-emoji-fs); line-height: 1; opacity: var(--m-schritt-emoji-blass); }
.m-schritte__segment--besucht .m-schritte__emoji { opacity: var(--m-schritt-emoji-besucht); }
.m-schritte__segment--aktiv .m-schritte__emoji { opacity: 1; }
/* Owner 12.10.: Haus-Icons (haus_live.thema_icon) statt Emoji — gleiche Zustände über die Opacity des Rahmens. */
.m-schritte__icon { display: block; width: var(--m-schritt-icon-gr); height: var(--m-schritt-icon-gr); object-fit: contain; }
.m-schritte__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-schritte__name { margin: 0; padding: 8px 14px 0; font-size: var(--m-schritt-name-fs); font-weight: var(--fw-bold); color: var(--m-titel-farbe); }

/* ── „Optimierung anzeigen" (Owner/Fiona-Mockup v5, 09.09.) ─────────────────
   Die Seite hat zwei Zustände. Ohne .m-opt: Ist-Seite wie gehabt. Mit .m-opt
   (menue_mobil.js setzt die Klasse auf dem Themen-Panel): das Bild der
   Kachel fährt nach links aus dem Raster, die Ist-Box rutscht nach links
   und rechts erscheint die Box „mit Baustein"; darüber die Baustein-Karte,
   darunter die Entscheidung statt des Weiter-Knopfs. Alles, was nur im
   Optimierungs-Zustand gilt, hängt an `.m-opt`. */
[data-m-opt-nur] { display: none; }
.m-opt [data-m-opt-nur] { display: block; }
/* Owner 30.09. (Mobil-Liste 1+2): die Desktop-Module der Kassenseite (Hero-Karte, Lücken-Kacheln, Spar-Karte)
   haben am Handy kein Styling — die Aufdeck-Regel darüber blendete sie trotzdem ein (riesige Logos, lose Texte).
   Gleiche Spezifität, später notiert → schlägt sie; die Desktop-Regeln weiter unten schlagen wiederum diese. */
.m-opt .m-kasse__hero, .m-opt .m-kasse__bereiche, .m-opt .m-kasse__held { display: none; }
.m-opt [data-m-opt-aus] { display: none; }

/* Kachel im Optimierungs-Zustand (Owner: „das Bild nach links ziehen, rechts
   der Zahnbaustein genau gleich aussehend"): Die Bildspalte ist `auto` und
   folgt der Bildbreite — das Bild schrumpft animiert auf 0 (Safari animiert
   keine Raster-Spalten, aber Breiten). Rechts erscheint die zweite Box in
   derselben Form wie die Ist-Box; beide teilen sich die Breite zu gleichen
   Teilen. */
.m-risiko { column-gap: 0; }
.m-risiko__bild { margin-right: var(--m-feld-luft); transition: width var(--m-aufdeck-dauer) cubic-bezier(.4,0,.2,1), margin-right var(--m-aufdeck-dauer) cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.m-risiko .m-risiko__mit { display: none; }
/* Drei Spalten: Bild (→0) | Ist | Mit — beide Boxen exakt gleich breit bis
   zum rechten Rand; das Fragezeichen sitzt absolut oben rechts. */
.m-risiko.m-risiko--opt { grid-template-columns: auto 1fr 1fr; position: relative; }
.m-risiko.m-risiko--opt .m-risiko__bild { width: 0; margin-right: 0; opacity: 0; }
.m-risiko.m-risiko--opt .m-risiko__titel { grid-column: 1 / 4; padding-right: calc(var(--m-info-spalte) + 4px); }
.m-risiko.m-risiko--opt .m-risiko__zeile { grid-column: 2; margin-right: 5px; min-width: 0; }
.m-risiko.m-risiko--opt .m-risiko__info { position: absolute; top: 0; right: var(--m-info-einzug); margin: 0; }
.m-risiko.m-risiko--opt .m-risiko__mit { display: flex; grid-column: 3; grid-row: 2; align-self: stretch; justify-self: stretch; min-width: 0; margin: 0 0 0 5px; padding: 8px 10px; align-items: center; justify-content: center; border-radius: var(--m-radius-innen); border-width: 1.5px; font: inherit; cursor: pointer; text-align: center; animation: m-einblenden var(--m-aufdeck-dauer) cubic-bezier(.4,0,.2,1) both; }
@keyframes m-einblenden { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* In der halben Breite eine Nummer kleiner, damit „Eigenanteil: 3.000 €"
   auf einer Zeile bleibt — links und rechts identisch. */
.m-risiko.m-risiko--opt .m-pille { font-size: 13px; padding-left: 6px; padding-right: 6px; gap: 5px; }
.m-risiko.m-risiko--opt .m-pille__kern { gap: 4px; }
/* Owner 10.09.: Inhalt darf ZWEIZEILIG werden, statt aus der Box zu ragen
   („Eigenanteil: 2 × 120 € pro Jahr" in der halben Breite). */
.m-risiko.m-risiko--opt .m-pille__wert { white-space: normal; }
.m-risiko .m-pille__kern { flex-wrap: wrap; justify-content: center; min-width: 0; }
.m-risiko .m-pille { min-width: 0; }
.m-risiko .m-pille .m-icon { flex: none; }
/* Beschriftete Mit-Box („100 % Kostenübernahme" / „(max.: 150 € pro Jahr)"):
   HÖCHSTENS zwei Zeilen — Kopf und Grenze je eine (Owner 10.09., 2. Runde:
   drei Zeilen „100 % / Kostenübernahme / max. …" sehen nicht mehr schön aus).
   Statt umzubrechen schrumpft die Schrift mit der Box (Container-Maß `cqi`,
   Untergrenze --m-box-fs-min): bei 390 px Breite bietet der Kern 142 px, der
   Kopf braucht bei 13 px 151 px → 12,2 px; auf 360-px-Geräten ~10,9 px. */
.m-risiko .m-pille__kern--beschriftet { min-width: 0; flex: 1 1 0; container-type: inline-size; }
.m-risiko .m-pille__kern--beschriftet .m-pille__text { white-space: nowrap; text-align: center; font-size: clamp(var(--m-box-fs-min), var(--m-box-fs-passung), 1em); }
/* Owner-Screenshot 16.09. 21:06: ein Text-Untertitel („Du wirst wie ein
   Privatpatient behandelt") lief aus dem Kasten — nowrap war für Beträge
   gedacht. Jetzt: umbrechen erlaubt, mittig, nie über den Rand. */
.m-risiko .m-pille__kern--beschriftet .m-mit__grenze { white-space: normal; text-align: center; overflow-wrap: anywhere; max-width: 100%; font-size: clamp(var(--m-box-grenze-fs-min), var(--m-box-grenze-fs-passung), var(--m-box-grenze-fs)); }
.m-risiko .m-pille__kern--zweizeilig { align-items: center; }
.m-risiko.m-risiko--opt .m-pille .m-icon--warnung, .m-risiko.m-risiko--opt .m-pille .m-icon--haken { --m-icon-warn: 17px; }
/* Dritter Zustand der Mit-Box: Matrix-Wert ohne Rechnung — neutral. */
.m-pille--neutral { border-color: var(--m-linie-stark); color: var(--m-text); background: var(--m-flaeche); }
.m-pille--neutral .m-pille__text::after { content: ":"; }
/* Mit-Box mit Betrag: der Doppelpunkt bleibt auch bei Grün („Eigenanteil: 0,00 €"). */
.m-pille--gut.m-pille--mit-wert .m-pille__text::after { content: ":"; }
/* Zeichen-Regel (Owner 10.09.): GELB trägt kein Ausrufezeichen — weder in
   der aktuellen Situation noch in der Optimierung. Das Zeichen bleibt Rot
   (hoch) und Grün (Haken) vorbehalten. */
.m-pille--selbst.m-pille--mittel > .m-icon--warnung { display: none; }
/* ~~Gelb → Gelb verbessert: gelber Haken~~ — widerrufen 13.09. (Owner: kein
   gelber Haken mehr; jede Verbesserung ist rechts GRÜN, Template-Regel). */
/* ── Kachel-Übergang „Optimierung anzeigen" (Owner 13.09., Entwurf-Wahl: Tempo von
   Variante 1, Pille von Variante 2): Tipp → Glanz läuft über den Knopf → bei 50 %
   wird er grün und zeigt „X € weniger Risiko" (data-m-bilanz) → nach --m-bilanz-halt
   klappen die Boxen auf und die Bilanz fällt als runde grüne PILLE (Rand/Fläche wie
   die Box „Mit Optimierung", Haken davor) mittig darunter und bleibt. menue_mobil.js. */
.m-risiko__glanz { position: absolute; inset: 0; overflow: hidden; border-radius: var(--m-radius-innen); pointer-events: none; z-index: 3; }
.m-risiko__glanz-streifen { position: absolute; inset: -60% -80%; background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--kk-white) 90%, transparent) 50%, transparent 58%); transform: translateX(-60%); animation: m-kachel-glanz var(--m-glanz-dauer) linear forwards; }
@keyframes m-kachel-glanz { to { transform: translateX(60%); } }
.m-opt .m-risiko:has(> .m-risiko__upgrade):not(.m-risiko--opt) .m-risiko__upgrade.m-risiko__upgrade--bilanz { border-color: var(--m-gut-linie); background: var(--m-gut-flaeche); color: var(--m-gut); font-size: 14px; white-space: nowrap; transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
.m-risiko__upgrade--bilanz .m-risiko__upgrade-pfeil { display: none; }
/* Pille ohne Betrag („keine Kostenübernahme", Owner 10.09.): kein Doppelpunkt,
   und in normaler Schriftstärke — links wie rechts (Owner 10.09., 3. Runde:
   „beides nicht fett, so wie rechts"). */
.m-pille:has(.m-pille__wert:empty) .m-pille__text::after { content: ""; }
.m-risiko .m-pille:has(.m-pille__wert:empty) .m-pille__text { font-weight: var(--fw-regular); }
/* Variante B der Ist-Box (?ist=prozent): beschrifteter Kern auch links — ohne
   Doppelpunkt hinter der Beschriftung. 2. Fassung (Owner 10.09.): Eigenanteil
   oben, 20 % kleiner als der Kopf rechts (--m-box-b-faktor), Kostenübernahme
   darunter in der leisen Zeile, beide enger gesetzt (--m-box-b-zeile). */
.m-risiko .m-pille__kern--beschriftet .m-pille__text::after { content: ""; }
.m-risiko .m-pille__kern--eigenanteil-oben { gap: var(--m-box-b-gap); line-height: var(--m-box-b-zeile); }
.m-risiko .m-mit__grenze--leise { color: var(--m-text-leise); opacity: 1; }
.m-risiko .m-pille__kern--eigenanteil-oben .m-pille__text { font-size: calc(clamp(var(--m-box-fs-min), var(--m-box-fs-passung), 1em) * var(--m-box-b-faktor)); }
/* „Du zahlst X €" IMMER fett — links wie rechts, vor und nach dem Umschalten
   (Owner 13.09.: „mal fett, mal dünn"). Spezifität über allen Pillen-Regeln. */
.m-risiko .m-risiko__zeile .m-pille__kern--eigenanteil-oben .m-pille__text,
.m-risiko .m-risiko__mit .m-pille__kern--eigenanteil-oben .m-pille__text { font-weight: var(--fw-bold); }
/* Spezifität: `.m-risiko.m-risiko--opt …` schlägt die Grundregeln `.m-risiko .m-risiko__zeile` weiter unten im File.
/* Im Optimierungs-Modus ist jede Kachel antippbar: erst zeigt sie ihre
   Optimierung (Bild fährt raus), danach öffnen die Boxen das Erklärfeld. */
/* Lila Knopf „Optimierung anzeigen" (Owner 10.09.): steht im Optimierungs-
   Modus an der Stelle der Ist-Box — nur bei Kacheln, die der Baustein
   verbessert. Gleiche Form wie die Boxen (1,5-px-Rand, leichte Füllung). */
.m-risiko__upgrade { display: none; }
.m-opt .m-risiko:has(> .m-risiko__upgrade):not(.m-risiko--opt) .m-risiko__zeile { display: none; }
.m-opt .m-risiko:has(> .m-risiko__upgrade):not(.m-risiko--opt) .m-risiko__upgrade { display: flex; grid-column: 2 / 4; grid-row: 2; align-self: stretch; justify-self: stretch; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--m-radius-innen); border: 1.5px solid var(--m-upgrade-linie); background: var(--m-upgrade-flaeche); color: var(--m-aktion); font: inherit; font-size: var(--m-fs-wert); font-weight: var(--fw-bold); cursor: pointer; }
.m-risiko__upgrade .m-pille__text::after { content: ""; }   /* kein Doppelpunkt hinter „Optimierung anzeigen" */
.m-risiko__upgrade-pfeil { width: 18px; height: 18px; flex: none; }
.m-opt .m-risiko:has(> .m-risiko__upgrade):not(.m-risiko--opt) { cursor: pointer; }
/* Beim Aufdecken rutscht die Ist-Box von links herein (das Bild fährt zeitgleich raus). */
.m-risiko.m-risiko--opt .m-risiko__zeile { animation: m-einschieben var(--m-aufdeck-dauer) cubic-bezier(.4,0,.2,1) both; }
@keyframes m-einschieben { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* Etikett auf der oberen Rahmenlinie der Boxen (Fiona-Mockup v6, Owner 10.09.):
   „Aktuell" auf der Ist-Box (immer), „Mit Optimierung" auf der Mit-Box,
   „Hier werden deine Leistungen verbessert" auf dem lila Knopf (Owner 10.09., Wortlaut geändert). Rund (30 px),
   beige wie der Seitengrund, seitlich knapp — nur dieses Element aus dem
   Mockup übernommen. Die Ist-Box (Markup Zahn-Fenster) bekommt es per
   ::before, die eigenen Elemente als echtes <span>. */
.m-risiko .m-risiko__zeile, .m-risiko .m-risiko__mit, .m-risiko .m-risiko__upgrade { position: relative; overflow: visible; }
.m-etikett, .m-risiko .m-risiko__zeile::before { position: absolute; top: -8px; left: 10px; padding: 0 3px; border-radius: var(--m-etikett-radius); background: var(--m-seite-bg); font-size: 12px; font-weight: var(--fw-semibold); line-height: 16px; color: currentColor; white-space: nowrap; letter-spacing: 0; text-transform: none; }

/* ⚠ MUSS NACH der Grundregel stehen: `.m-etikett--unten` hat dieselbe
   Spezifitaet wie `.m-etikett`. Davor gesetzt gewinnt die Grundregel mit
   `top: -8px`, und die Ersparnis klebte oben auf „Mit Optimierung". */
.m-etikett--unten {
  top: auto; bottom: -8px; left: 50%; right: auto; transform: translateX(-50%);
  /* Helleres Gruen als die Box selbst (die traegt --m-gut, Waldgruen) — die
     Ersparnis soll sich vom Zustand unterscheiden, nicht mit ihm verschmelzen. */
  /* ⚠ Eigenes Token statt --m-gruen (Owner 10.09.): Das Etikett steht auch auf
     der GELBEN Box („150 € gespart" bei Restanteil) und wirkte dort zu schwer. */
  color: var(--m-gruen-etikett);
}

/* Beschriftung der Box. Einzeilig ist der Normalfall („100 % Kostenübernahme");
   die zweite Zeile kommt nur, wenn es eine Grenze oder einen Eigenanteil gibt.
   ⚠ Der Text darf nicht umbrechen — sonst sitzt der Haken links daneben auf
   halber Höhe und die sechs Boxen stehen nicht mehr auf einer Linie. */
.m-pille__kern--beschriftet .m-pille__text { white-space: nowrap; }
.m-pille__kern--zweizeilig { flex-direction: column; align-items: flex-start; gap: 1px; }
.m-mit__grenze { font-size: var(--m-box-grenze-fs); font-weight: 400; opacity: .85; }
/* Kein Doppelpunkt hinter der neuen Beschriftung — er gehoert zum Muster
   „Eigenanteil: 240 €", nicht zu „Wird zu 100 % uebernommen". */

.m-risiko .m-risiko__zeile::before { content: "Aktuell"; }

/* ── Fiona-Redesign v1, Schritt 3 (Owner 21.09.) ──────────────────────────
   (1) Etikett „Verbesserung möglich" auf dem lila Knopf — gleiches Muster wie
       „Aktuell", in Lila. (2) Zeichen in den Boxen: rotes „!" (gelb bleibt ohne,
       Regel oben), grüner Haken bei voller Übernahme und auf der grünen
       Mit-Box. Wird die gelbe Box im Vergleich rot (--verbessert), bekommt sie
       ihr „!" zurück. (3) Voll übernommen ohne Optimierung = grüne LEISTE über
       die ganze Breite, ohne Foto und ohne Etikett. (4) Emoji vor der
       Gruppen-Überschrift. */
.m-etikett--lila { color: var(--m-aktion); }
.m-risiko--opt .m-risiko__zeile--verbessert.m-pille--selbst > .m-icon--warnung { display: inline-flex; color: var(--m-warn); }
.m-risiko--leiste .m-risiko__bild { display: none; }
.m-risiko--leiste .m-risiko__zeile,
.m-risiko--leiste.m-risiko--opt .m-risiko__zeile { grid-column: 1 / 4; margin-right: 0; justify-content: center; padding-top: var(--m-leiste-hoch); padding-bottom: var(--m-leiste-hoch); }
.m-risiko--leiste .m-risiko__zeile::before { content: none; }
.m-risiko--leiste .m-pille__kern--beschriftet { flex: 0 1 auto; }
.m-liste__emoji { flex: none; font-size: var(--m-gruppe-emoji-fs); line-height: 1; }
/* Luft über den Boxen, damit das Etikett nicht in den Titel ragt. */
.m-risiko__titel { margin-bottom: 14px; }

/* Erklärfeld unter der Kachel (Vorbild kassenkompass.de-Vergleich): zwei
   Spalten — links die Rechnung heute, rechts die mit Baustein. */
/* ⚠ Zeile 4, nicht 3: In Zeile 3 sitzt seit dem 13.09. die Bilanz-Pille
   („150 € gespart", .m-risiko__bilanz). Beide in derselben Zeile heisst im
   Raster Konkurrenz — die Pille rutschte UEBER den Container statt darunter
   (Owner-Befund 13.09.). Zeile 4 haelt die Reihenfolge in jedem Zustand;
   ohne Pille bleibt Zeile 3 leer und faellt auf 0 zusammen. */
.m-erklaer { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding: 12px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius-innen); }
.m-erklaer[hidden] { display: none; }
/* Variante „Aktuell": eine Spalte mit der Rechentafel des Popups (Owner 10.09.). */
.m-erklaer--ist { grid-template-columns: 1fr; }
/* Variante „Vergleichstafel" (Owner 13.09.) — ebenfalls einspaltig.
   ⚠ BEWUSST ein eigener Modifier statt --ist: menue_mobil.js sucht im
   Soll-Zustand `.m-erklaer:not(.m-erklaer--ist)`. Traege die Tafel --ist,
   gaebe es zwei Ist-Felder und der Tipp oeffnete weiter das alte. */
.m-erklaer--tafel { grid-template-columns: 1fr; }
/* Owner 10.09. (2. Runde): KEIN zweiter Kasten um die Rechnung — das Feld ist
   schon der Container. Die Tafel läuft offen, die Schlusszeile bekommt nur
   eine feine Linie darüber in ihrer Signalfarbe statt des Rahmens.

   ⚠ Owner 10.09. (3. Runde): Das gilt jetzt fuer JEDE Tafel in einem
   Klapp-Feld, nicht nur fuer die aktuelle Situation — „eine graue Tabelle da
   drin wird nicht funktionieren, hier haben wir schon ein Design". Darum
   traegt die Tafel den Modifier `.m-rechnung--offen`; `.m-erklaer--ist` setzt
   ihn weiterhin selbsttaetig, damit bestehendes Markup unveraendert bleibt. */
.m-erklaer--ist .m-rechnung, .m-rechnung--offen { margin-top: 4px; padding: 0; background: none; border: 0; border-radius: 0; }
.m-erklaer--ist .m-rechnung__wert, .m-rechnung--offen .m-rechnung__wert { padding-right: 0; }
.m-erklaer--ist .m-rechnung__schluss, .m-rechnung--offen .m-rechnung__schluss { margin-top: 8px; padding-block: 8px 0; border-block: 0; border-top: 1px solid currentColor; border-radius: 0; }
.m-erklaer--ist .m-rechnung__wert.m-rechnung__schluss, .m-rechnung--offen .m-rechnung__wert.m-rechnung__schluss { margin-right: 0; padding-right: 0; border-right: 0; }
.m-erklaer--ist .m-rechnung__op.m-rechnung__schluss, .m-rechnung--offen .m-rechnung__op.m-rechnung__schluss { border-left: 0; padding-left: 0; }
.m-erklaer--ist .m-rechnung__op.m-rechnung__schluss,
.m-erklaer--ist .m-rechnung__label.m-rechnung__schluss,
.m-erklaer--ist .m-rechnung__wert.m-rechnung__schluss,
.m-rechnung--offen .m-rechnung__op.m-rechnung__schluss,
.m-rechnung--offen .m-rechnung__label.m-rechnung__schluss,
.m-rechnung--offen .m-rechnung__wert.m-rechnung__schluss { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: none; }
/* Die Beschriftungen tragen im Popup eine graue Fläche (unterbricht die
   Punktlinie auf grauem Grund) — im weißen Feld ist die Fläche weiß. */
.m-erklaer--ist .m-rechnung__label > span, .m-rechnung--offen .m-rechnung__label > span { background: var(--m-flaeche); }
.m-risiko .m-risiko__zeile { cursor: pointer; }
/* ── Links rot, sobald rechts gruen ist (Owner 13.09.) ─────────────────────
   NUR im aufgedeckten Zustand. Im Ist-Konzept behaelt die Box ihre eigene
   Ampelstufe — die Zahnreinigung bleibt dort gelb, sie ist kein grosses
   Risiko (Owner-Rueckabwicklung 13.09.). Erst im Vergleich zaehlt der
   Unterschied: eine Seite ist schlechter als die andere, und ein gelbes
   „mittel" neben dem gruenen Rechts verwischt genau das.
   ⚠ Drei Klassen plus Vorfahr — muss ueber `.m-pille--selbst.m-pille--mittel`
   liegen, sonst gewinnt die Ampelstufe. */
.m-risiko--opt .m-risiko__zeile--verbessert.m-pille--selbst {
  border-color: var(--m-warn-linie);
  color: var(--m-warn);
  background: color-mix(in srgb, var(--m-warn-flaeche) var(--m-pille-fuellung), var(--m-seite-bg));
}

/* ── Aufklapp-Zeichen an den Boxen (Owner 13.09.) ─────────────────────────
   Ein kleines Dreieck am rechten Rand sagt dem Kunden, dass sich unter der
   Box etwas oeffnet. Als Rahmen-Dreieck gezeichnet (kein Bild, keine Schrift):
   skaliert mit, faerbt sich ueber currentColor mit dem Zustand der Box mit. */
.m-risiko__zeile, .m-risiko__mit { position: relative; padding-right: 20px; }
.m-risiko__zeile::after, .m-risiko__mit::after {
  content: ""; position: absolute; right: 9px; top: 50%;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .55;
  transition: transform .18s ease;
}
/* Offen: das Dreieck zeigt nach oben — dieselbe Information, andere Richtung. */
.m-risiko__zeile[aria-expanded="true"]::after,
.m-risiko__mit[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: -2px; }

/* ── Vergleichstafel AKTUELL | MIT OPTIMIERUNG (Owner-Vorgabe 13.09.) ──────
   Drei Spalten: Beschriftung links buendig, zwei Betragsspalten rechts.

   ⚠ KEINE Rechenzeichen. Der Owner hat die Rechentafel mit „−" und „=" genau
   deswegen verworfen: Das Zeichen steht in einer eigenen Spalte, dadurch
   beginnen die Beschriftungen nicht auf einer Linie und die Tafel wirkt
   links ausgefranst. Hier traegt die Reihenfolge die Aussage, nicht das
   Zeichen — und alle Beschriftungen starten bei 0. */
/* ⚠ Eigene, kleinere Schriftgroesse und schmaler Spaltenabstand: Bei voller
   Textgroesse passen „Zahnbaustein zahlt" und zwei Betragsspalten mit
   1.000er-Werten nicht in 393 px — die Beschriftung brach um und die Tafel
   bekam Zeilen doppelter Hoehe (gemessen am Implantat, 4.000,00 €).
   `white-space: nowrap` haelt die Beschriftung danach zuverlaessig einzeilig. */
.m-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; align-items: baseline; font-size: 13px; line-height: 2.0; }
.m-vergleich__kopf { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; text-align: right; line-height: 1.4; padding-bottom: 4px; }
.m-vergleich__kopf--ist { color: var(--m-warn); }
.m-vergleich__kopf--soll { color: var(--m-gut); }
/* Einspaltig (Tipp auf „Aktuell"): nur die heutige Lage, gleiches Raster. */
.m-vergleich--einspaltig { grid-template-columns: minmax(0, 1fr) auto; }
/* Ueberschrift der einspaltigen Tafel — an der Stelle, an der zweispaltig
   die Spaltenkoepfe stehen; gleiche Groesse, gleiche Ruhe. */
.m-vergleich__titel { margin: 0 0 8px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--m-text-leise); }
.m-vergleich__b { color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-vergleich__wert { text-align: right; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Eine echte Null nimmt Gewicht zurueck — sie ist wahr, aber nicht die
   Botschaft. Unbekannt bleibt dagegen leer (siehe services/vergleich_tafel). */
.m-vergleich__wert--leise { color: var(--m-text-leise); font-weight: 400; }
.m-vergleich__wert--soll { color: var(--m-gut); }
/* Schlusszeile: EINE durchgehende Linie darueber, kein Kasten.
   ⚠ Die Linie ist ein eigenes Element ueber alle drei Spalten. Als
   `border-top` je Zelle zerfiel sie in drei Stuecke — der Spaltenabstand
   liegt dazwischen (Owner-Vorlage zeigt eine durchgehende Linie). */
.m-vergleich__linie { grid-column: 1 / -1; height: 1px; margin-top: 7px; background: var(--m-linie); }
.m-vergleich__schluss { padding-top: 9px; font-weight: var(--fw-bold); }
.m-vergleich__schluss.m-vergleich__wert--ist { color: var(--m-warn); }
.m-vergleich__schluss.m-vergleich__wert--soll { color: var(--m-gut); }

/* ── Regeln des Bausteins im Klapp-Feld (Owner 10.09., 3. Runde) ───────────
   Der lila Aufklapper hat dem Owner gefallen („so würde ich auch eine
   Ausklapplogik implementieren") — er wird damit das Muster fuer alles, was
   im Feld nicht sofort sichtbar sein muss. Rechnung steht oben offen da,
   Regeln liegen darunter. */
.m-regeln__knopf { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 2px; margin-top: 2px; background: none; border: 0; cursor: pointer; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--m-aktion); font-family: inherit; }
.m-regeln__pfeil { transition: transform .18s ease; }
.m-regeln[open] .m-regeln__pfeil { transform: rotate(180deg); }
.m-regeln__inhalt { display: none; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--m-linie); }
.m-regeln[open] .m-regeln__inhalt { display: block; }
/* Eine Regel-Zeile: Beschriftung links, Wert rechts, Punktlinie dazwischen —
   dieselbe Lesart wie die Rechentafel, ohne deren Rechenzeichen. */
.m-regel { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--m-text); }
.m-regel__b { color: var(--m-text-leise); }
.m-regel__f { flex: 1; border-bottom: 1px dotted var(--m-linie); transform: translateY(-3px); }
.m-regel__w { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
/* Leistungsstaffel: Jahre oben, Summe darunter — wie .k2-staffel am Desktop. */
.m-staffel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 10px; border: 1px solid var(--m-linie); border-radius: var(--m-radius-innen); overflow: hidden; }
.m-staffel__sp { display: grid; grid-template-rows: auto auto; }
.m-staffel__sp + .m-staffel__sp { border-left: 1px solid var(--m-linie); }
.m-staffel__j { padding: 6px 4px; text-align: center; font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.2; color: var(--m-text-leise); background: var(--m-flaeche-still); }
.m-staffel__w { padding: 8px 4px; text-align: center; font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.2; color: var(--m-text); font-variant-numeric: tabular-nums; }
/* Feindruck: die Sonderregel der Matrix-Zeile im Wortlaut der Pflege. */
.m-fein { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--m-text-leise); }
.m-erklaer__titel { display: block; margin-bottom: 4px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--m-text-leise); }
.m-erklaer__spalte--mit .m-erklaer__titel { color: var(--m-gut); }
.m-erklaer__text { margin: 0; font-size: 13px; line-height: 1.4; color: var(--m-text); }
.m-erklaer__hinweis { margin: 6px 0 0; font-size: 12.5px; color: var(--m-gut); font-weight: var(--fw-semibold); }

/* Baustein-Karte „Mit deinem Konzept" */
.m-opt-karte { margin: 0 0 22px; min-width: 0; }
/* Scroll-Container dürfen das Panel nicht aufweiten (Flex-Kind min-width). */
.k2-detail, .k2-detail__panel, .m-baustein { min-width: 0; max-width: 100%; }
/* Die wischbaren Reiter/Panels isolieren ihre Breite (contain), sonst zieht
   ihr Inhalt das Raster des Boards über die Seite hinaus. */
.m-baustein__reiter, .m-baustein__panels { contain: inline-size; }
.m-opt-karte__kicker { margin: 0 0 8px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-text-leise); }
/* Kind-Karte (Owner 16.09.): Zeile „für Lina · Kind" über der zweiten Karte,
   Chip wie in der Kachel (.m-risiko__person). */
/* Ein Baustein, mehrere Themen (Owner 17.09.): Hinweis über der Karte + bestätigte
   Entscheidung auf allen Themen desselben Bausteins (uebernehmen_mobil.js). */
.m-opt-karte__auch { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.35; color: var(--m-text); }
.m-opt-karte__auch .m-icon { flex: none; }
.m-entscheidung--erledigt .m-wahl--ja .m-wahl__knopf { background: color-mix(in srgb, var(--m-gut-flaeche) 70%, var(--m-flaeche)); }
/* Owner 18.09.: Liegt der Baustein schon im Warenkorb, verschwindet die ganze
   Entscheidung - Ueberschrift und die drei Knoepfe. Ein zweites "Uebernehmen"
   ist nicht nur ueberfluessig, es verwirrt im Gespraech. Der Weiter-Link bleibt
   stehen (er wird im selben Zustand erst sichtbar), Entfernen und Tarifwechsel
   laufen weiter ueber die Baustein-Karte. Die Regel darueber bleibt bewusst
   stehen: Sie greift wieder, sobald jemand das Verbergen zurueckdreht.
   Gesetzt wird die Klasse in uebernehmen_mobil.js - und bewusst NICHT waehrend
   der Bestaetigungs-Animation (Sternwolke + Flug kommen aus diesem Knopf). */
.m-entscheidung--verborgen .m-liste__titel,
.m-entscheidung--verborgen .m-entscheidung__reihe { display: none; }
/* ~~.m-kasse__wechseln (Textknopf unter der Reihe, B1, PR 997)~~ — widerrufen 21.09. abends
   (Owner-Screenshot). Stattdessen: runder Tausch-Knopf in der Kassen-Karte. */
.m-kasse__tausch { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--m-tausch-d); height: var(--m-tausch-d); padding: 0; border-radius: var(--r-full); border: 1.5px solid var(--m-aktion); background: var(--m-flaeche); color: var(--m-aktion); cursor: pointer; }
.m-kasse__tausch svg { width: 18px; height: 18px; }
.m-kasse__tausch:active { background: var(--m-flaeche-aktiv); }
/* Kassenwechsel in der Karte nur NACH der Entscheidung (01.10.): vorher steht „Mehr Optionen“
   direkt darunter, der runde Knopf daneben öffnet den Vergleich. */
.m-kasse__tausch--wechsel { display: none; }
.m-entscheidung--verborgen .m-kasse__tausch--wechsel { display: inline-flex; }
.m-kasse .m-baustein__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.m-kasse .m-baustein__text { min-width: 0; }
.m-entscheidung__weiter { margin-top: 14px; }
.m-opt-karte__fuer { margin: 14px 0 8px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-text-leise); }
.m-baustein { background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); overflow: hidden; }
.m-baustein__kopf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.m-baustein__kopf::-webkit-details-marker { display: none; }
.m-baustein__logo { flex: none; width: 56px; height: 36px; object-fit: contain; padding: 4px; border: 1px solid var(--m-linie); border-radius: var(--r-sm); background: var(--m-flaeche); }
.m-baustein__logo--leer { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); color: var(--m-aktion); }
.m-baustein__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-baustein__name { font-size: 16px; font-weight: var(--fw-bold); color: var(--m-text); }
.m-baustein__sub { font-size: 13px; color: var(--m-text-leise); }
.m-baustein__pfeil { flex: none; width: 22px; height: 22px; color: var(--m-aktion); transition: transform .3s ease; }
.m-baustein[open] .m-baustein__pfeil { transform: rotate(180deg); }
/* ── Fiona-Redesign v1, Schritt 4a (Owner 21.09.): Bühne „Deine Optimierung" ──
   Titel mittig mit ✨, lila Band „Empfehlung für dein Profil" um die Karte der
   Hauptperson, im Kartenkopf die Box „Effektiver Beitrag", drei Wertungs-
   Kacheln und ein sichtbarer Knopf „Leistungen anzeigen" (= der Aufklapper). */
.m-opt-karte__titel { justify-content: center; gap: 8px; font-size: var(--m-opt-titel-fs); }
.m-liste__titel.m-opt-karte__titel::after { content: none; }
.m-opt-karte__funkeln { font-size: .9em; line-height: 1; }
.m-opt-karte__unter { text-align: center; }
.m-empfehlung { margin: 0 0 14px; padding: 10px; border-radius: var(--m-radius); background: var(--m-empfehlung-bg); }
.m-empfehlung__titel { margin: 2px 0 10px; text-align: center; font-size: 15px; color: var(--m-empfehlung-fg); }
.m-empfehlung .m-baustein { border-color: transparent; box-shadow: var(--m-empfehlung-schatten); }
.m-bk > .m-baustein__kopf { flex-wrap: wrap; row-gap: 12px; }
.m-bk .m-baustein__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.m-bk__effektiv { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--m-effektiv-bg); }
.m-bk__effektiv-titel { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--m-aktion); text-align: center; }
.m-bk__effektiv-wert { font-size: 22px; font-weight: var(--fw-bold); color: var(--m-titel-farbe); white-space: nowrap; }
.m-bk__effektiv-mtl { font-size: 12px; font-weight: var(--fw-medium); color: var(--m-text-leise); }
.m-bk__wertung { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.m-bk__wertung:empty { display: none; }
.m-bk__kachel { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: var(--r-sm); background: var(--m-flaeche-still); text-align: center; }
.m-bk__kachel-label { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.2; color: var(--m-text); }
.m-bk__kachel-wert { font-size: 12px; line-height: 1.25; color: var(--m-text-leise); }
.m-bk__auf-knopf { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border: 1.5px solid var(--m-aktion); border-radius: var(--r-sm); color: var(--m-aktion); font-size: 15px; font-weight: var(--fw-semibold); }
.m-bk[open] .m-bk__auf-knopf { background: var(--m-flaeche-aktiv); }
.m-bk__auf-offen, .m-bk[open] .m-bk__auf-zu { display: none; }
.m-bk[open] .m-bk__auf-offen { display: inline; }
.m-baustein__reiter { display: flex; gap: 6px; padding: 4px 10px 10px; overflow-x: auto; scrollbar-width: none; }
.m-baustein__reiter::-webkit-scrollbar { display: none; }
.m-baustein__tab { flex: none; padding: 8px 12px; border-radius: var(--r-full); border: 1px solid var(--m-linie); background: var(--m-flaeche); color: var(--m-text-leise); font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.m-baustein__tab--aktiv { border-color: var(--m-aktion); color: var(--m-aktion); background: var(--m-flaeche-aktiv); }
/* Reiter-Inhalte nebeneinander, mit dem Finger wischbar (scroll-snap);
   die Knöpfe oben scrollen dorthin und folgen dem Wischen (JS). */
.m-baustein__panels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--m-linie); }
.m-baustein__panels::-webkit-scrollbar { display: none; }
.m-baustein__panel { flex: 0 0 100%; scroll-snap-align: start; padding: 14px; }
.m-baustein__titel { margin: 0 0 10px; font-size: 14px; font-weight: var(--fw-bold); color: var(--m-text); }
.m-baustein__zeile { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--m-linie); font-size: 13.5px; }
.m-baustein__zeile--lang { flex-direction: column; gap: 6px; }
.m-baustein__label { color: var(--m-text); }
.m-baustein__wert { font-weight: var(--fw-semibold); color: var(--m-gut); text-align: right; }
.m-baustein__wert--lang { text-align: left; }
.m-baustein__chart { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding: 6px 4px 0; }
.m-baustein__spalte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.m-baustein__chart-wert { font-size: 12.5px; font-weight: var(--fw-bold); }
.m-baustein__balken { width: 100%; max-width: 56px; border-radius: 6px 6px 0 0; background: var(--m-aktion); height: calc(var(--h, 30) * 1%); }
.m-baustein__balken--prognose { opacity: .45; }
.m-baustein__alter { font-size: 12px; color: var(--m-text-leise); }
.m-baustein__fussnote { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--m-text-leise); }

/* Entscheidung: drei umrandete Knöpfe (Owner: NICHT gefüllt), darunter
   Textlinks. Grün/Rot aus den Signal-Tokens, Blau neu (--m-blau). */
.m-entscheidung { margin-top: 4px; }
.m-entscheidung__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.m-wahl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--m-text); }
.m-wahl__knopf { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: var(--m-radius-innen); border: 1.5px solid currentColor; background: var(--m-flaeche); }
.m-wahl__knopf svg { width: 26px; height: 26px; }
/* Ränder in den LEISEN Signal-Linien wie die Eigenanteil-Boxen (Owner: nicht knallrot). */
.m-wahl--ja .m-wahl__knopf { color: var(--m-gut); border-color: var(--m-gut-linie); background: color-mix(in srgb, var(--m-gut-flaeche) var(--m-pille-fuellung), var(--m-flaeche)); --m-icon-warn: 28px; }
.m-wahl--nein .m-wahl__knopf { color: var(--m-warn); border-color: var(--m-warn-linie); background: color-mix(in srgb, var(--m-warn-flaeche) var(--m-pille-fuellung), var(--m-flaeche)); }
.m-wahl--mehr .m-wahl__knopf { color: var(--m-blau); border-color: var(--m-blau-linie); background: var(--m-blau-flaeche); }
.m-wahl--gewaehlt .m-wahl__knopf { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.m-wahl__titel { font-size: 12.5px; font-weight: var(--fw-bold); text-align: center; line-height: 1.2; white-space: nowrap; }
.m-wahl__sub { font-size: 12px; color: var(--m-text-leise); text-align: center; line-height: 1.2; min-height: 1.2em; }
.m-textlink { display: block; padding: 12px 0; text-align: center; font-size: 15.5px; font-weight: var(--fw-semibold); color: var(--m-aktion); text-decoration: none; }
/* Owner 08.10.: gesperrter Textlink („Anträge vorbereiten" vor „Empfehlung anzeigen") —
   Konvention wie .btn.is-disabled (components.css). */
.m-textlink.is-disabled { opacity: .5; pointer-events: none; }

/* ── Themen-Kopf + Themen-Fuß (Owner 2026-09-09, Revier Zahn-Seite mobil) ──
   Kopf: Titel fett, großes Foto, ein Satz. Fuß: Fazit aus derselben Liste.
   Steht ein Kopf auf der Fläche, treten der Standard-Themen-Titel und die
   Bühne ab — sonst stünde „Beim Zahnarzt" zweimal und das Foto doppelt. */
.m-kopf { display: block; margin: 0 12px var(--m-gruppe-luft); padding-top: var(--m-kopf-luft); }
.m-kopf__titel { margin: 0 0 var(--m-kopf-luft); font-size: var(--m-fs-kopf); line-height: 1.15; font-weight: var(--fw-bold); color: var(--m-titel-farbe); }
/* Fiona-Redesign v1, Schritt 1 (Owner 21.09.): Titel links, Höhle-der-Löwen-
   Siegel rechts daneben — eine Zeile, die Luft darunter trägt die Zeile. */
.m-kopf__zeile { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--m-kopf-luft); }
.m-kopf__zeile .m-kopf__titel { flex: 1; min-width: 0; margin: 0; }
.m-siegel { flex: none; display: block; height: var(--m-siegel-h); width: auto; }
/* Der graue Konzept-Kopf („Deine Ist-Situation", Schritt 1 von 2) entfällt am
   Handy (Owner 09.09.) — die Kopfleiste trägt Kunde + Konzept schon. */
.k2-kopf { display: none; }
/* Gruppen-Überschriften in der Ereignis-Liste — so groß wie der frühere Titel. */
/* Bündig mit dem Seitentitel (gleicher 12-px-Rand wie .m-kopf, kein Eigen-
   Einzug), ohne Icon; Luft nach oben = --m-gruppe-luft (Owner: mehr Platz
   zwischen den Gruppen und zwischen Foto und erster Überschrift). */
.m-liste__titel { display: flex; align-items: center; gap: 12px;
  /* Owner 10.09.: 20 % mehr Luft zwischen Ueberschrift und erster Kachel
     (12px -> 14px); traegt die Gruppe eine Unterzeile, sitzt die dazwischen. */
  margin: var(--m-gruppe-luft) 0 14px; font-size: var(--m-fs-gruppe); line-height: 1.2; font-weight: var(--fw-bold); color: var(--m-text); }
/* Feine Linie rechts neben der Überschrift, die nach rechts ausfadet — in der
   Signalfarbe der Gruppe (Vorlage 09.09.: „das finde ich gar nicht mal so schlecht"). */
/* Einordnender Satz unter der Gruppen-Ueberschrift — derselbe leise Stil wie
   `.m-schutz__unter`, damit er die Ueberschrift nicht ueberstimmt. Er ersetzt
   den Abstand der Ueberschrift nach unten, deshalb dort margin-bottom 0. */
.m-liste__titel:has(+ .m-liste__unter) { margin-bottom: 6px; }
.m-liste__unter { margin: 0 0 18px; font-size: 13px; line-height: 1.45;
                  color: var(--m-text-leise); }

.m-liste__titel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--m-linie-stark), transparent); }
.m-liste__titel--uebernommen::after { background: linear-gradient(90deg, var(--m-gut-linie), transparent); }
.m-liste__titel--selbst::after { background: linear-gradient(90deg, var(--m-warn-linie), transparent); }
.m-liste__titel:first-child { margin-top: 0; }
.m-kopf__bild { display: block; width: 100%; height: var(--m-kopf-bild-h); object-fit: cover; border-radius: var(--m-radius); }
.m-kasse__kopf-bild, .m-kasse__kopf-foto { display: none; }   /* Kasse-Bildband nur am Desktop */
.k2-detail__panel:has(.m-kopf) .k2-detail__kopf,
.k2-detail__panel:has(.m-kopf) .vb { display: none; }

/* Weiter-Button unter der Liste (Figma „Button CTA", Owner 09.09.): Verlauf
   purple-900 → purple-600, 2-px-Rand als Weiß-Verlauf 16 % → 0 %, Pfeile
   beidseitig. Der Desktop-Fuß mit demselben Ziel tritt am Handy ab. */
.m-cta-zeile { display: block; margin: var(--m-gruppe-luft) 12px 0; }
/* ~~Rand-Verlauf über border-box/padding-box: die innere Fläche trägt den
   Lila-Verlauf, der 2-px-Rand darunter den Weiß-Verlauf (Figma 16 % → 0 %).~~
   WIDERRUFEN 21.09. (Owner-Screenshot: „weißer Rahmen um den lila Button“,
   Fiona v1 hat keinen) — nur noch Verlauf + Schatten, kein Rand. */
.m-cta { box-shadow: var(--m-cta-schatten); display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; font: inherit; cursor: pointer; min-height: var(--m-cta-h); padding: 0 18px; border-radius: var(--r-sm); border: 0; background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis)); color: var(--kk-white); font-size: 17px; font-weight: var(--fw-bold); text-decoration: none; }
.m-cta:active { filter: brightness(.94); }
/* „Diesen Baustein entfernen" je Karte (Owner-Bug 9, 17.09.) — leiser roter Textknopf
   am Fuß der aufgeklappten Karte; [hidden] am Weiter-Link muss gegen `.m-textlink` halten. */
.m-bk__entfernen { margin: 14px 0 2px; display: flex; justify-content: center; }
.m-bk__entfernen-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: var(--fw-semibold); color: var(--m-warn); cursor: pointer; }
.m-bk__entfernen-knopf svg { width: 16px; height: 16px; flex: none; }
.m-textlink[hidden] { display: none; }
/* Vorschlag ohne gewählten Baustein (Owner 17.09., Bug 8): derselbe CTA-Knopf,
   zweizeilig („Kein Baustein ausgewählt" klein darüber), darunter die Zeile mit
   dem vorgeschlagenen Tarif; der Weiter-Link rückt als Textlink darunter. */
.m-vorschlag { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 0; }
.m-cta--zweizeilig { padding-top: 8px; padding-bottom: 8px; }
.m-cta__text { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.m-cta__ober { font-size: var(--m-cta-ober-fs); font-weight: var(--fw-semibold); letter-spacing: .03em; opacity: .85; }
.m-vorschlag__zeile { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.35; color: var(--m-text-leise); text-align: center; }
.m-vorschlag__zeile b { color: var(--m-text); font-weight: var(--fw-bold); }
.m-vorschlag__logo { flex: none; height: var(--m-vorschlag-logo-h); max-width: 96px; object-fit: contain; }
.m-cta__pfeil { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k2-detail__panel:has(.m-cta) .k2-fuss { display: none; }
/* Seitenschluss: nach dem Button ist Schluss (Owner 09.09.) — Reform-Karte
   und der Nachlauf der Seite (Beige unter dem Board) entfallen am Handy. */
.k2-detail__panel:has(.m-cta) .k2-reform { display: none; }
/* Pflichtprogramm/IGeL-Block „Was zahlt die Kasse bereits?" (Desktop, seit
   25.08., datengetrieben: nur mit Regie-Programm in der DB — in der Vorschau-
   Kopie leer, in der Dev-DB da). Am Handy nicht Teil des Owner-Layouts
   (Owner 10.09.), daher aus. */
.k2-detail__panel:has(.m-cta) .k2-programm { display: none; }
.k2-seite:has(.m-cta) { padding-bottom: 0; }
.k2-hintergrund:has(.m-cta) { min-height: 0; }
.m-schluss { margin: 18px 0 22px; text-align: center; font-size: 13px; color: var(--m-text-leise); }
/* Seitenfuß (Fiona-Redesign v1, Schritt 1, Owner 21.09.): Presse-Leiste
   „Bekannt aus" + © unter dem Seitenschluss — auf Kasse, Themen und Übersicht. */
.m-seitenfuss { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 24px; }
.m-seitenfuss__presse { display: block; width: 100%; height: auto; opacity: var(--m-presse-deckkraft); }
.m-seitenfuss__copy { margin: 0; font-size: var(--m-copy-fs); color: var(--m-text-leise); }
/* Übersicht hat keinen Seitenschluss-Satz davor — Luft wie nach .m-schluss. */
.m-uebersicht > .m-seitenfuss { margin-top: 22px; }


/* ── Icon-Sprache ────────────────────────────────────────────────────────────
   Drei Zeichen, überall dieselbe Bedeutung:
     · ROT, Kreis mit Ausrufezeichen  = „hier bleibt etwas bei dir"
     · GRÜN, Kreis mit Haken          = „das trägt die Kasse"
     · GRAU, Kreis mit i              = „hier gibt es mehr zu lesen"

   ⚠ Owner-Entscheid 09.09.: Warnung und Haken sind DASSELBE Objekt in zwei
   Farben — gleicher Durchmesser, gleiche Strichstärke, beide nur Kontur ohne
   Füllung. Der Haken war zwischendurch ein gefüllter Kreis mit weissem Zeichen;
   das machte ihn zum Fremdkörper neben der Warnung. Wer die Grösse ändert,
   ändert sie für beide — sonst rutschen die Zeilen der Liste auseinander.
   Alle drei sind reine CSS-Kreise: keine Bilddatei, keine Schriftart-
   Abhängigkeit, in jeder Grösse scharf. */
.m-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; border-radius: var(--r-full);
  font-weight: var(--fw-bold); line-height: 1;
}
.m-icon--warnung, .m-icon--haken {
  width: var(--m-icon-warn); height: var(--m-icon-warn);
  border: 2px solid currentColor;
}
.m-icon--warnung { color: var(--m-warn); font-size: calc(var(--m-icon-warn) * 0.62); }  /* schrift-min: icon — „!" im Kreis */
.m-icon--haken { color: var(--m-gut); }
/* Der Haken ist breiter als ein Ausrufezeichen und stiesse in gleicher Grösse
   an den Kreis — deshalb eine Stufe kleiner. Er soll frei in der Mitte sitzen. */
.m-icon--haken::before { content: "✓"; font-size: calc(var(--m-icon-warn) * 0.5); }  /* schrift-min: icon — „✓" im Kreis */
.m-icon--info {
  width: var(--m-icon-info); height: var(--m-icon-info);
  border: 1.5px solid var(--m-info-linie); color: var(--m-info-linie);
  font-size: calc(var(--m-icon-info) * 0.6);
  font-style: normal;   /* Owner 09.09.: aufrechtes i, kein kursives */
  background: none; cursor: pointer; padding: 0;
}
.m-icon--info:active { background: var(--m-flaeche-aktiv); }
/* ⚠ Nach dem Schliessen des Popups gibt der Dialog den Fokus an seinen Oeffner
   zurueck — und der Browser malt dann seinen Ring um genau dieses Icon (auf
   iOS blau, Owner-Screenshot 09.09.). In der Liste bleibt so ein Kreis blau
   stehen, obwohl der Nutzer laengst weitergelesen hat. Gleiche Loesung wie am
   Schliessen-✕: kein Ring, aber ein Signal fuer Tastatur-Nutzer als
   Farbwechsel des Zeichens. */
.m-icon--info:focus { outline: none; }
.m-icon--info:focus-visible { outline: none; color: var(--m-text); }

/* ── Ereignis-Kachel: offen, ohne Container (Owner 09.09., Runde 5) ─────────
   Vorbild ist der Vergleich auf kassenkompass.de: keine Rahmen um die
   Kategorien, die Überschrift steht oben, darunter das (größere) Bild, rechts
   daneben die Wert-Pille. Dieselben vier Felder wie zuvor, nur neu verteilt —
   das Markup ist unverändert (Zahn-Fenster), nur das Raster:

     ┌──────────────────────────────┬──────┐
     │  Überschrift                 │ Info │   Zeile 1
     ├────────────┬─────────────────┴──────┤
     │   Bild     │  Wert-Pille            │   Zeile 2
     └────────────┴────────────────────────┘

   · Keine Linie, kein Rand, keine Fläche: die Kachel liegt direkt auf dem
     Seitengrund, Trennung nur durch Luft (--m-kachel-abstand).
   · Das Bild ist gerundet und größer (--m-kachel-bild × --m-kachel-bild-h).
   · Alle Überschriften beginnen an derselben Kante wie die Gruppen-Titel. */
.m-risiko {
  display: grid;
  /* Bildspalte = `auto`: sie folgt Bild + dessen rechtem Abstand. In einer
     festen Spalte (112 px) lief der Abstand in die Nachbarspalte und die
     Boxen klebten am Bild (Owner-Screenshot 10.09.). */
  grid-template-columns: auto 1fr var(--m-info-spalte);
  grid-template-rows: auto auto;
  column-gap: 0;   /* der Abstand hängt am Bild (margin-right) — so verschwindet er mit dem Bild */
  margin-bottom: var(--m-kachel-abstand);
}
/* Bild — Zeile 2, links */
.m-risiko__bild {
  grid-column: 1; grid-row: 2;
  width: var(--m-kachel-bild); height: var(--m-kachel-bild-h);
  object-fit: cover; border-radius: var(--m-radius-innen);
  background: var(--m-flaeche-still); display: block;
}
/* Überschrift — Zeile 1, über Bild und Wert */
.m-risiko__titel {
  grid-column: 1 / 3; grid-row: 1;
  margin: 0 0 10px; padding: 0;
  font-size: var(--m-fs-kachel-titel); font-weight: var(--fw-bold);
  color: var(--m-text); line-height: 1.25; text-wrap: pretty;
}
/* Personen-Chip im Titel (Owner 16.09., Kinder-Kacheln „Zahnspange für Lily"):
   leise Fläche, keine eigene Farbe — der Titel trägt den Namen, der Chip
   nur die Rolle. Konvention: wissen/design-system.md §Kinder-Kacheln. */
/* M9 (16.09.): Status-Chip „Handlung nötig" / „Gut zu wissen" — dieselbe
   Form wie der Personen-Chip (Regel geteilt); „Handlung nötig" nutzt den
   Warn-Ton der Kachel-Pillen, keine neue Farbe. */
.m-risiko__person, .m-risiko__status {
  display: inline-block; vertical-align: middle;
  margin-left: var(--m-person-luft); padding: 0 var(--m-person-luft);
  border-radius: var(--m-etikett-radius);
  background: var(--m-flaeche-still); color: var(--m-text-leise);
  font-size: var(--m-person-fs); font-weight: var(--fw-semibold); line-height: 1.6;
}
.m-risiko__status--handlung_noetig { color: var(--m-warn); }
/* Owner 30.09.: Chip „Gut zu wissen" raus — nur „Handlung nötig" bleibt sichtbar (Status steuert weiter die Sortierung). */
.m-risiko__status--gut_zu_wissen { display: none; }
/* Karte 358 (Owner 05.10.): Hintergrundwissen je Fall. Der Titel ist anklickbar — bewusst OHNE
   Pfeil oder Unterstreichung („das weiß nur der Berater"), nur der Zeiger verrät es. Darunter über
   die volle Breite ein leiser Kasten: ein Satz + Stichpunkte aus der DB (services/fall_wissen).
   Konvention: wissen/design-system.md §Hintergrundwissen je Fall. */
.m-risiko__titel[data-m-wissen-auf] { cursor: pointer; }
/* Fokus (Owner 12.10. „sieht kaputt aus"): ~~outline-offset 2px + border-radius --m-etikett-radius~~ zeichnete ein
   Oval, das den Titel links anschnitt. Jetzt nur per Tastatur (:focus-visible), Ring mit --m-fokus-luft Abstand und
   Karten-Ecken (--m-fokus-radius). Gilt auch für die klickbaren Leistungsnamen der Vergleichstabelle (.m-bk__label). */
.m-risiko__titel[data-m-wissen-auf]:focus, .m-bk__label:focus { outline: none; }
.m-risiko__titel[data-m-wissen-auf]:focus-visible, .m-bk__label:focus-visible { outline: 2px solid var(--m-aktion); outline-offset: var(--m-fokus-luft); border-radius: var(--m-fokus-radius); }
/* Owner 12.10. („Es muss durch ein Chevron neben dem Titel deutlich werden, dass man das aufklappen kann"):
   leises chevron-down direkt hinter dem Titel, nur bei aufklappbaren Zeilen; offen um 180° gedreht.
   ~~bewusst OHNE Pfeil~~ (05.10.) widerrufen. Konvention: wissen/design-system.md §Hintergrundwissen je Fall. */
.m-risiko__wissen-pfeil {
  display: inline-block; vertical-align: -0.1em; margin-left: 0.25em;
  width: var(--m-wissen-pfeil-gr); height: var(--m-wissen-pfeil-gr);
  color: var(--m-wissen-pfeil-fg); transition: transform .18s ease;
}
.m-risiko__titel[aria-expanded="true"] > .m-risiko__wissen-pfeil { transform: rotate(180deg); }
.m-risiko__wissen {
  grid-column: 1 / -1; margin-top: var(--m-wissen-luft); padding: var(--m-wissen-luft) calc(var(--m-wissen-luft) + 2px);
  border-radius: var(--m-radius-innen); background: var(--m-flaeche-still);
  color: var(--m-text); font-size: var(--m-wissen-fs); line-height: 1.45;
  animation: m-blase-auf .2s ease-out;
}
.m-risiko__wissen:has(.m-risiko__wissen-bild) { display: grid; grid-template-columns: minmax(0, 1fr) var(--m-wissen-bild-b); gap: var(--m-wissen-luft); align-items: start; }
.m-risiko__wissen[hidden] { display: none; }
.m-risiko__wissen-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--m-radius-innen); }
.m-risiko__wissen-punkte { margin: 0; padding-left: 1.2em; }
.m-risiko__wissen-punkte li + li { margin-top: 3px; }
/* Status-Box — Zeile 2, rechts vom Bild, GENAU so hoch wie das Bild und bis
   zum rechten Rand (Owner/Fiona-Vorlage „Beim Zahnarzt.html", 09.09.):
   aus der schmalen Pille wird eine Fläche, Inhalt mittig. Farben/Füllung
   kommen weiter aus den .m-pille--*-Regeln (Zahn-Fenster). */
.m-risiko .m-risiko__zeile {
  grid-column: 2 / 4; grid-row: 2;
  align-self: stretch; justify-self: stretch;
  margin: 0; padding: 8px 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--m-radius-innen); border-width: 1.5px;
  white-space: normal; text-align: center;
}
/* Info — Zeile 1 rechts, auf einer Linie mit der Überschrift; in hellem
   Lila, damit es als „hier gibt es mehr" auffällt (Owner). */
.m-risiko__info {
  grid-column: 3; grid-row: 1;
  align-self: start; justify-self: end;
  margin-right: var(--m-info-einzug);   /* Owner: etwas weiter ins Feld gerückt */
  color: var(--m-info-akzent);          /* das Lila — die SVG-Striche nehmen currentColor */
  opacity: var(--m-info-deckkraft);
  border: 0; background: transparent;   /* der Ring kommt aus dem SVG selbst (Owner-Icon circle-help) */
}
/* Ampel der Eigenanteil-Box (Owner 09.09.): bis 500 EUR gelb statt rot — die
   Stufe kommt aus ereignis_gruppen.stufe_fuer, die Kachel trägt sie als
   zweiten Modifier neben --selbst (dessen Tests bleiben unberührt). */
.m-pille--selbst.m-pille--mittel {
  border-color: var(--m-mittel-linie); color: var(--m-mittel);
  background: color-mix(in srgb, var(--m-mittel-flaeche) var(--m-pille-fuellung), var(--m-flaeche));
}
.m-pille--selbst.m-pille--mittel .m-icon--warnung { color: var(--m-mittel); }
/* Das Icon füllt die Fläche des Knopfs; Striche skalieren mit (Vektor). */
.m-risiko__info .m-icon__svg { width: 100%; height: 100%; display: block; }
/* Sprechblase statt Popup (Owner 13.09., Vorlage Screenshot): dunkle Blase über
   dem Fragezeichen, volle Kachelbreite, weiße Schrift, nur der Erklärtext,
   kleiner Pfeil nach unten aufs Icon. Öffnet/schließt per Tipp aufs Icon,
   schließt bei Tipp irgendwo sonst (menue_mobil.js). */
.m-risiko { position: relative; }
.m-blase { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--m-blase-abstand)); z-index: 30; padding: 14px 18px; border-radius: var(--m-blase-radius); background: var(--m-blase-bg); color: var(--m-blase-text); font-size: var(--m-blase-fs); font-weight: var(--fw-regular); line-height: 1.4; text-align: left; animation: m-blase-auf .18s ease-out both; }
.m-blase::after { content: ""; position: absolute; bottom: -8px; right: calc(var(--m-info-einzug) + 6px); border: 8px solid transparent; border-top-color: var(--m-blase-bg); border-bottom: 0; }
.m-blase__titel { display: block; font-weight: var(--fw-bold); margin-bottom: 4px; }
.m-blase[hidden] { display: none; }
@keyframes m-blase-auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Trennstrich zwischen den Kategorien (Owner-Entscheid 09.09. nach A/B:
   „deutlich besser") — zwischen zwei Kacheln, nicht unter einer Gruppen-
   Überschrift. */
.m-liste > .m-risiko + .m-risiko {
  border-top: 1px solid var(--m-linie);
  padding-top: calc(var(--m-kachel-abstand) / 2);
  margin-top: calc(var(--m-kachel-abstand) / -2);
}
/* ── Zustands-Pille am Wert ──────────────────────────────────────────────────
   Umschliesst Icon UND Text. Rand 1px in der Signalfarbe, Fläche nur ganz
   leicht getönt: `color-mix` mischt die Grundfläche mit Weiss, --m-pille-
   fuellung steuert wie stark. 20 % ist der Owner-Entscheid — spürbar, ohne
   dass sechs Kacheln untereinander bunt werden. */
.m-pille {
  padding: var(--m-pille-hoch) var(--m-pille-quer) var(--m-pille-hoch) var(--m-pille-icon);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  gap: var(--m-pille-gap);
  font-size: var(--m-fs-wert); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.m-pille__kern { display: inline-flex; align-items: center; gap: 7px; }
.m-pille__wert { font-weight: var(--fw-bold); }
.m-pille__wert:empty { display: none; }
/* Der Doppelpunkt gehört zum Muster „Eigenanteil: 240 €" und entfällt, wo kein
   Betrag folgt („wird übernommen"). */
.m-pille__text::after { content: ":"; }
.m-pille--gut .m-pille__text::after { content: ""; }

/* ⚠ Die Fuellung wird gegen den SEITENGRUND gemischt, nicht gegen Weiss —
   auf beigem Grund waere eine gegen Weiss gemischte Flaeche ein heller Fleck
   statt einer leichten Toenung. Dieselbe Mischung gilt fuer den
   Eigenanteil-Kasten im Popup, der auf derselben Flaeche liegt. */
.m-pille--selbst {
  border-color: var(--m-warn-linie); color: var(--m-warn);
  background: color-mix(in srgb, var(--m-warn-flaeche) var(--m-pille-fuellung), var(--m-seite-bg));
}
/* Bestand ohne belegte Deckung (22.09.): grau statt Ampel — auch über der Stufe */
.m-pille.m-pille--unbelegt, .m-pille--selbst.m-pille--mittel.m-pille--unbelegt {
  border-color: var(--m-linie-stark); color: var(--m-text-leise); background: var(--m-flaeche-still);
}
.m-pille--unbelegt > .m-icon--warnung { display: none; }
.m-pille--gut {
  border-color: var(--m-gut-linie); color: var(--m-gut);
  background: color-mix(in srgb, var(--m-gut-flaeche) var(--m-pille-fuellung), var(--m-seite-bg));
}

/* ── „Was ist das?"-Popup ────────────────────────────────────────────────────
   Drei Schließwege, alle drei ausdrücklich gewünscht: das ✕ oben, das Wort
   „schließen" unten und ein Tipp neben das Fenster. Umgesetzt mit <dialog>,
   damit die Escape-Taste vom Browser kommt. */
.m-info { padding: 0; border: 0; background: none; max-width: none; max-height: none; }
.m-info::backdrop { background: var(--m-schleier); }
.m-info__box {
  width: min(90vw, 440px);
  padding: var(--m-info-luft);
  background: var(--m-info-bg);
  border: 1px solid var(--m-linie);
  border-radius: var(--m-radius);
  box-shadow: var(--sh-lg);
}
.m-info__zu {
  float: right; margin: -6px -4px 0 8px;
  width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; background: none;
  /* Owner 09.09.: dasselbe Lila wie das Wort darunter — das ✕ und
     „schließen" sind derselbe Weg aus dem Popup, also dieselbe Farbe. */
  color: var(--m-aktion);
  font-size: 22px; line-height: 1; cursor: pointer;
  border-radius: var(--r-full);
}
/* ⚠ FOKUS BEIM ÖFFNEN — zweimal falsch gelöst, hier die Begründung:
   `showModal()` setzt den Fokus auf das erste Bedienelement im Dialog, also
   auf das ✕. Der Browser malt darum beim Öffnen einen Ring: erst ein blaues
   Systemkästchen (iOS), dann — nach meinem ersten Fix — ein lila Kreis. Beides
   wollte der Owner nicht: „das X soll einfach nur da stehen".

   Lösung ist NICHT, den Ring wegzunehmen (dann verlieren Tastatur-Nutzer die
   Orientierung), sondern den Fokus gar nicht erst auf das ✕ zu legen: Der
   Kasten trägt `tabindex="-1" autofocus` und fängt ihn ab. Beim Tippen sieht
   man damit nichts. Wer per Tabulator zum ✕ geht, bekommt weiterhin ein
   Signal — nur als Farbwechsel des Zeichens statt als Ring drumherum. */
.m-info__box:focus, .m-info__box:focus-visible { outline: none; }
.m-info__zu:focus, .m-info__schliessen:focus { outline: none; }
.m-info__zu:focus-visible { outline: none; color: var(--m-text); }
.m-info__schliessen:focus-visible { outline: none; text-decoration: underline; }
.m-info__titel {
  font-size: var(--m-fs-titel); font-weight: var(--fw-bold);
  color: var(--m-text); margin: 0 0 4px;
}
.m-info__text { font-size: var(--m-fs-text); color: var(--m-text); line-height: 1.5; margin: 0; }
/* ── Die Rechentafel im Popup ────────────────────────────────────────────────
   Owner-Entscheid 09.09. (Entwurfsrunde 4, Variante A). Drei Spalten, EIN
   Raster für alle Zeilen — auch für die Schlusszeile:

     [ − ]  [ Kassenzuschuss ]  [    500 € ]
       ▲            ▲                    ▲
       │            │                    └ rechtsbündig, Euro-Zeichen fluchten
       │            └ alle Beschriftungen auf EINER senkrechten Linie
       └ Rechenzeichen in eigener Spalte, − und = exakt übereinander

   Warum die Zellen direkte Kinder des Grids sind und nicht in Zeilen-Wrappern
   stecken: Nur so fluchten Beschriftungen und Beträge über ALLE Zeilen hinweg,
   die farbige Schlusszeile eingeschlossen. Mit Wrappern rechnet jede Zeile
   ihre Spalten selbst aus und die Zahlen standen versetzt (Entwurfsrunde 1). */
.m-rechnung__ueber {
  /* Owner 10.09.: mehr Luft nach „Was ist das?" (18 → 28 px) und SCHWARZ statt
     leise — die Überschrift der Rechnung soll auffallen. */
  display: block; margin: 28px 0 7px;
  font-size: calc(var(--m-fs-text) - 2.5px); font-weight: var(--fw-bold);  /* Owner 12.10.: nie < 12 px (~~- 3px~~) */
  letter-spacing: .06em; text-transform: uppercase; color: var(--m-text);
}
.m-rechnung {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  padding: 7px 0 8px; border-radius: 12px;
  background: var(--m-rechnung-grund);
  border: 1px solid var(--m-linie);
  font-size: var(--m-fs-text); line-height: 1.95;
}
.m-rechnung__op {
  padding-left: var(--m-rechnung-rand); padding-right: 7px;
  color: var(--m-text-leise); font-weight: var(--fw-bold);
}
.m-rechnung__label { color: var(--m-text-leise); padding-right: 12px; position: relative; }
.m-rechnung__wert {
  text-align: right; padding-right: var(--m-rechnung-rand);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold);
  white-space: nowrap; color: var(--m-text);
}
/* Führungslinie: der Abstand zwischen „Kassenzuschuss" und „500 €" war so
   gross, dass man die beiden nicht als eine Zeile las. Die Linie schliesst die
   Lücke; Beschriftung und Betrag stanzen sich mit der Grundfläche frei. */
.m-rechnung__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .42em;
  border-bottom: 1px dotted var(--m-linie-stark); z-index: 0;
}
.m-rechnung__label > span {
  position: relative; z-index: 1; padding-right: 7px;
  background: var(--m-rechnung-grund);
}

/* Die Schlusszeile ist ein eigener Kasten MIT VIER GLEICHEN ECKEN — sie lief
   früher bis an die Tafelkante und war deshalb nur unten rund.
   ⚠ Sie ist eingerückt und trotzdem bündig:
        Einzug = --m-rechnung-rand − --m-rechnung-mini
   Links vom „=" bleibt damit genau --m-rechnung-mini Platz, oben und unten
   ebenso — und die Schrift steht auf derselben Linie wie „Kosten" darüber.
   Wer einen der beiden Werte ändert, muss nichts nachrechnen. */
.m-rechnung__schluss {
  font-size: calc(var(--m-fs-text) + 1px); font-weight: var(--fw-bold);
  line-height: 1.25; padding-block: var(--m-rechnung-mini); margin-top: 7px;
  border-block: 1px solid;
  /* ⚠ `align-self: stretch` gegen die Grundregel `align-items: baseline` der
     Tafel — sonst zerreisst die Schlusslinie, sobald eine der drei Zellen LEER
     ist. Eine leere Zelle hat keine Grundlinie; der Browser setzt sie dann an
     der Unterkante ab, sie schrumpft auf ihr Polster und ihre Linie sitzt
     14 px tiefer als die der Nachbarn (gemessen am Zahnbleaching, Owner-Befund
     10.09.: „= keine Kostenübernahme" ohne Betrag — links ein langer Strich,
     rechts ein kurzer Stummel eine Zeile tiefer). Gestreckt teilen sich alle
     drei Zellen die Zeilenhoehe und die Linie laeuft durch.
     Die Texte bleiben trotzdem auf einer Hoehe: gleiches Polster oben,
     gleiche Zeilenhoehe in allen drei Zellen. */
  align-self: stretch;
}
/* ⚠ Die −1px in den Margins gleichen die Rahmenstärke aus. Ohne sie stünde der
   Kasten um 1px versetzt zu den Zeilen darüber:
      Textkante = margin + Rahmen(1) + Polster = (rand − mini − 1) + 1 + mini. */
.m-rechnung__op.m-rechnung__schluss {
  margin-left: calc(var(--m-rechnung-rand) - var(--m-rechnung-mini) - 1px);
  padding-left: var(--m-rechnung-mini);
  /* ⚠ NICHT `border-left: 1px solid` — die Kurzschreibweise setzt die Farbe auf
     currentColor zurück und schlägt mit ihrer höheren Spezifität die
     Zustandsfarbe. Ergebnis waren dunkelrote Senkrechten an einem sonst hellen
     Kasten. Deshalb Breite und Stil einzeln, Farbe bleibt unangetastet. */
  border-left-width: 1px; border-left-style: solid;
  border-radius: 10px 0 0 10px;
}
.m-rechnung__label.m-rechnung__schluss { border-inline-width: 0; }
.m-rechnung__wert.m-rechnung__schluss {
  margin-right: calc(var(--m-rechnung-rand) - var(--m-rechnung-mini) - 1px);
  padding-right: var(--m-rechnung-mini);
  border-right-width: 1px; border-right-style: solid;
  border-radius: 0 10px 10px 0;
}
/* Auf der Farbfläche wäre eine Führungslinie samt grauer Freistanzung ein
   Fehlerbild — deshalb beides aus. */
.m-rechnung__schluss.m-rechnung__label::after { content: none; }
.m-rechnung__schluss.m-rechnung__label > span { background: none; padding-right: 0; }

/* ⚠ Owner-Entscheid 09.09.: Der Eigenanteil-Kasten trägt EXAKT dieselbe
   Zustandsfarbe wie die Pille auf der Kachel — dieselbe Füllstärke
   (--m-pille-fuellung), dieselbe Randfarbe, dieselbe Rahmenstärke. Nur die
   Eckenrundung unterscheidet sich, weil ein Kasten kein Pillen-Oval ist.
   Deshalb steht die Farbe hier NICHT eigenständig: Beide Stellen lesen
   dieselben Tokens. Wer die Pille umfärbt, färbt das Popup mit — genau so
   gewollt, damit die beiden nicht auseinanderlaufen. */
.m-rechnung--selbst {
  background: color-mix(in srgb, var(--m-warn-flaeche) var(--m-pille-fuellung), var(--m-seite-bg));
  border-color: var(--m-warn-linie);
  color: var(--m-warn);
}
.m-rechnung--gut {
  background: color-mix(in srgb, var(--m-gut-flaeche) var(--m-pille-fuellung), var(--m-seite-bg));
  border-color: var(--m-gut-linie);
  color: var(--m-gut);
}
.m-info__fuss { margin-top: 20px; text-align: center; }
.m-info__schliessen {
  border: 0; background: none; padding: 6px 12px;
  font-size: var(--m-fs-text); font-weight: var(--fw-semibold);
  color: var(--m-aktion); cursor: pointer;
}


/* ── Sektion „Dein Schutz" (Owner 2026-09-10) ────────────────────────────────
   Links die gesetzliche Kasse, rechts der Zusatzbaustein, dazwischen ein Plus.

   ⚠ OBERSTE REGEL: beide Kacheln exakt gleich gross — links wie rechts, heute
   wie im Vorschlag. Dafuer braucht es DREI Dinge, jedes einzeln erprobt:
     1. `minmax(0, 1fr)` statt `1fr`. Ein blosses `1fr` ist `minmax(auto, 1fr)`
        — ein langer Kassenname schob seine Spalte auf 134px, waehrend die
        andere 104px behielt.
     2. Jede Kachel wird AUSDRUECKLICH platziert. Mit automatischer Platzierung
        landete die Basis-Kachel in der Plus-Spalte.
     3. Feste Kachelhoehe und feste Hoehe der Schlusszeile — sonst springt der
        Container beim Umschalten.
   Wer hier etwas aendert, misst nach. */
/* ⚠ Abstände (Owner-Messung 10.09.):
   OBEN kein eigener Rand — der Themen-Kopf bringt seine 34px schon mit. Mit
   eigenen 34px standen 68px zwischen Foto und Überschrift, das Doppelte des
   Seitenrhythmus.
   UNTEN dagegen braucht es einen: Die erste Gruppen-Überschrift verliert ihren
   Rand, weil sie erstes Kind der Liste ist (`.m-liste__titel:first-child`) —
   ohne diesen Rand klebte die Gruppe direkt am gestrichelten Container. */
.m-schutz { margin: 0 12px var(--m-gruppe-luft); }
.m-schutz__kopf { display: flex; align-items: center; justify-content: space-between;
                  gap: 12px; }
.m-schutz__titel { margin: 0; font-size: var(--m-fs-gruppe); line-height: 1.2;
                   font-weight: var(--fw-bold); color: var(--m-text); }
.m-schutz__unter { margin: 6px 0 12px; font-size: 13px; line-height: 1.45;
                   color: var(--m-text-leise); }
.m-schutz__pillen { display: flex; flex: none; gap: 6px; }
.m-schutz__pillen input { position: absolute; opacity: 0; pointer-events: none; }
.m-schutz__pillen label {
  /* ⚠ inline-flex, nicht inline: `overflow: hidden` wirkt auf Inline-Elemente
     NICHT. Ohne das lief der Glanz-Streifen aus der Pille heraus und parkte
     als heller Fleck links daneben (Owner-Screenshot 10.09.). */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 13px; border: 1px solid var(--m-linie); border-radius: var(--r-full);
  font-size: 12.5px; font-weight: var(--fw-semibold);
  color: var(--m-text-leise); background: var(--m-flaeche); cursor: pointer;
  white-space: nowrap;
}
/* Nur die GEWAEHLTE Pille traegt Farbe (Owner-Korrektur 10.09.: vorher sahen
   beide aktiv aus). */
.m-schutz__pillen input:checked + label {
  border-color: var(--m-aktion); color: var(--m-aktion);
  background: color-mix(in srgb, var(--kk-violet-100) 45%, var(--m-seite-bg));
}
/* Der Glanz laeuft ueber die Empfehlungs-Pille und laedt zum Antippen ein.
   ⚠ Der Streifen muss zum Untergrund passen: auf der weissen Pille schimmert
   er lila, auf der gewaehlten lila Pille weiss — sonst ist er unsichtbar. */
.m-schutz__empf { position: relative; overflow: hidden; }
.m-schutz__empf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Auf der weissen, ungewaehlten Pille nur ein Hauch — ein kraeftiger
     Streifen liest sich dort nicht als Glanz, sondern als Fehler. */
  background: linear-gradient(100deg, transparent 20%,
    color-mix(in srgb, var(--kk-violet-300) 45%, transparent) 47%, transparent 72%);
  transform: translateX(-130%);
  opacity: 0;
  animation: m-schutz-glanz 4.5s ease-in-out infinite;
}
.m-schutz__pillen input:checked + .m-schutz__empf::after {
  background: linear-gradient(100deg, transparent 25%,
    color-mix(in srgb, var(--kk-white) 85%, transparent) 47%, transparent 68%);
  animation-duration: 3s;
}
/* ⚠ Der Streifen ist in der Wartezeit UNSICHTBAR (opacity 0) und wird nur
   waehrend des Laufs eingeblendet. Ohne das steht er zwischen zwei Durchlaeufen
   als heller Fleck am linken Rand — genau der Fehler aus dem Owner-Screenshot.
   Zwei Sicherungen also: die Pille beschneidet (inline-flex + overflow), und
   selbst wenn das jemand aushebelt, ist der geparkte Streifen durchsichtig. */
@keyframes m-schutz-glanz {
  0%, 62%   { transform: translateX(-130%); opacity: 0; }
  64%       { opacity: 1; }
  97%       { opacity: 1; }
  100%      { transform: translateX(130%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m-schutz__empf::after { animation: none; }
}

.m-schutz__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start; row-gap: 8px;
  padding: 14px 12px 12px;
  border: 1.5px dashed var(--m-linie-stark);
  border-radius: var(--m-radius);
  --m-schutz-kachel-h: 132px;
}
.m-schutz__rolle { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .07em;
                   text-transform: uppercase; color: var(--m-text-leise); text-align: center; }
.m-schutz__rolle--basis { grid-column: 1; grid-row: 1; }
.m-schutz__rolle--erw   { grid-column: 3; grid-row: 1; }
.m-schutz__feld {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 12px 10px; text-align: center;
  width: 100%; height: var(--m-schutz-kachel-h);
  border-radius: var(--m-radius-innen);
  background: var(--m-flaeche); border: 1px solid var(--m-linie);
  overflow: hidden;
}
.m-schutz__feld--basis { grid-column: 1; grid-row: 2; }
.m-schutz__feld--erw   { grid-column: 3; grid-row: 2; }
.m-schutz__feld--leer  { border-style: dashed; border-color: var(--m-linie-stark); }
.m-schutz__logo { max-width: 100%; max-height: var(--m-schutz-logo-h); object-fit: contain; }
 .m-schutz__logo { max-height: var(--m-schutz-logo-h-desktop); }
/* ⚠ Die Rollen-Zeile bleibt EINZEILIG. Die Groesse richtet sich nach dem
   laengsten Begriff, der hier stehen kann („Extra Zahnleistungen") — bei
   14,5px lief er aus der Kachel. Wer laengere Begriffe einsetzt, misst nach. */
.m-schutz__name { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-text);
                  line-height: 1.3; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; max-width: 100%; }
.m-schutz__platzhalter { font-size: 12.5px; color: var(--m-text-leise); line-height: 1.4; }
.m-schutz__plus { grid-column: 2; grid-row: 2; display: flex; align-items: center;
                  justify-content: center; width: 30px; height: var(--m-schutz-kachel-h);
                  font-size: 22px; font-weight: var(--fw-bold); color: var(--m-text-leise); }
.m-schutz__schluss {
  grid-column: 1 / -1; margin-top: 4px; padding-top: 12px;
  min-height: 54px;   /* Mindesthöhe (Owner 10.09.: der Satz ist jetzt drei Zeilen lang) */
  display: flex; align-items: center; justify-content: center;
  border-top: 1px dashed var(--m-linie-stark);
  text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--m-text-leise);
}
.m-schutz__betrag { font-weight: var(--fw-bold); color: var(--m-gut); }
.m-schutz__schluss--mehr .m-schutz__betrag { color: var(--m-text); }
/* Bestandsmodus (Owner-GO 24.09.): bestätigte M&M-Merkmale als zwei leise Zeilen unter dem Satz */
.m-schutz__merkmale {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--m-text-leise);
}
.m-schutz__merkmal--ja b { color: var(--m-gut); }
.m-schutz__merkmal--nein b { color: var(--m-text); }

/* Zustands-Weiche. ⚠ Ausserhalb von `.m-opt` gilt IMMER der Ist-Zustand, egal
   was das Radio sagt — die Pillen sind dort gar nicht sichtbar, und
   „Empfehlung" ist im Markup vorgewaehlt, damit sie beim Einschalten der
   Optimierung sofort steht. */
/* ── Der Wechsel-Effekt (Owner 10.09.) ──────────────────────────────────────
   Nach dem Seitenübergang schaltet die Sektion selbsttätig von „Aktuell" auf
   „Empfehlung" (app.js). Damit der Kunde den Wechsel BEMERKT, läuft dabei ein
   kurzer Aufblitz über den Container und die neuen Kacheln blenden auf.
   `prefers-reduced-motion` schaltet beides ab — dann wechselt nur der Inhalt. */
.m-schutz--wechsel .m-schutz__box {
  animation: m-schutz-aufblitz 1s ease-out 1;
}
.m-schutz--wechsel .m-schutz__nur-soll {
  animation: m-schutz-eintritt .55s ease-out 1;
}
@keyframes m-schutz-aufblitz {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-aktion) 45%, transparent);
         border-color: var(--m-aktion); }
  100% { box-shadow: 0 0 0 14px transparent; border-color: var(--m-linie-stark); }
}
@keyframes m-schutz-eintritt {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .m-schutz--wechsel .m-schutz__box,
  .m-schutz--wechsel .m-schutz__nur-soll { animation: none; }
}

/* ── Bestandsmodus (Owner-Entwurf „Szenario Kunde Zahn", 22.09.) ─────────────
   Links der heutige Vertrag, rechts unsere Optimierung, Pfeil statt Plus. Gleiche
   Kachelmaße wie im Standardmodus (feste Höhe, links = rechts). */
.m-schutz__feld--vertrag { gap: 6px; padding: 10px; }
.m-schutz__logoplatz { display: flex; align-items: center; justify-content: center;
  min-width: 96px; max-width: 100%; height: 34px; padding: 4px 10px;
  background: var(--m-flaeche); border: 1px solid var(--m-logo-linie); border-radius: 6px; }
.m-schutz__logoplatz .m-schutz__logo { max-height: 24px; }
.m-schutz__mono { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .05em;
  text-transform: uppercase; color: var(--m-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-schutz__vertrag { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--m-text);
  line-height: 1.25; overflow-wrap: anywhere; }
.m-schutz__vertragszeile { font-size: 12px; line-height: 1.35; color: var(--m-text-leise); }
.m-schutz__feld--optimierung { background: var(--m-optimierung-flaeche); border-color: var(--m-optimierung-linie); }
.m-schutz--bestand .m-schutz__pfeil { color: var(--m-aktion); }
.m-opt .m-schutz--bestand:has(.m-schutz__soll:checked) .m-schutz__rolle--optimierung { color: var(--m-aktion); }

.m-empfehlung__vgl { margin: -4px 0 10px; text-align: center; font-size: 12.5px; color: var(--m-text-leise); }
.m-empfehlung__vgl--weniger { color: var(--m-gruen); font-weight: var(--fw-semibold); }
/* Karte 340 (Fiona 02.10., „grüner Text mehr Platz"): unter dem lila Kopf der Upgrade-Karte klemmte die
   Zeile mit −4 px im Kopf und stand auf dem durchscheinenden Seitengrund. Jetzt eine eigene, helle Zeile
   der Karte mit Luft nach oben und unten. */
.m-empfehlung:has(> .m-empfehlung__d-kopf) > .m-empfehlung__vgl { margin: 0; padding: 14px 20px 12px; background: var(--m-flaeche); font-size: var(--t-klein); border-bottom: 1px solid var(--m-linie); }
.m-schutz__nur-ist, .m-schutz__nur-soll { display: none; }
.m-schutz__nur-ist { display: flex; }
.m-opt .m-schutz:has(.m-schutz__soll:checked) .m-schutz__nur-ist { display: none; }
.m-opt .m-schutz:has(.m-schutz__soll:checked) .m-schutz__nur-soll { display: flex; }

/* ── Seitenübergang „Optimierung anzeigen" (Revier Seitenleiste) ────────────
   ⚠ WIEDERHERGESTELLT am 10.09.: Commit 988aa88 („Spaltenköpfe entfernt") hat
   diese Regel samt Keyframes versehentlich mitgelöscht. Das Element legt
   menue_mobil.js weiterhin an — ohne die Regel entsteht ein unsichtbares div,
   und der Glanz beim Umschalten fehlt ersatzlos (Owner-Befund).
   Schritt 2 Scroll). Das Element legt menue_mobil.js an und entfernt es wieder. */
.m-glanz { position: fixed; inset: -40% -60%; z-index: 80; pointer-events: none; background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--kk-white) 85%, transparent) 50%, transparent 58%); transform: translate(-42%, -30%); animation: m-glanz var(--m-glanz-dauer) linear forwards; }
/* Startlage so, dass der Streifen SOFORT ins Bild kommt (vorher lag er beim
   Start weit außerhalb — der Glanz wirkte erst nach ~0,8 s, Owner 10.09.). */
@keyframes m-glanz { to { transform: translate(42%, 30%); } }

/* ⚠ Spezifitaet MUSS ueber der Grundregel `.m-pille__text::after` liegen und
   die Regel danach stehen — sonst gewinnt der Doppelpunkt (real passiert). */
.m-risiko__mit .m-pille__kern--beschriftet .m-pille__text::after { content: ""; }

/* ── Themen-Seiten mobil (13.09., Kasse-Fenster): Themen OHNE kuratierte
   Regie-Liste zeigen am Desktop weiter ihre Schritt-1-Flächen (Kosten-Posten,
   Ist/Risiko-Kacheln, Szenario-Karten, Kinder-Zeile). Sobald der mobile Kopf
   da ist, tragen die m-Kacheln dieselbe Information — jede Information nur
   einmal. Zahn hatte diese Flächen schon per Template-Weiche entfernt. ── */
.k2-detail__panel:has(.m-kopf) .k2-posten,
.k2-detail__panel:has(.m-kopf) .k2-tk,
.k2-detail__panel:has(.m-kopf) .k2-szc,
.k2-detail__panel:has(.m-kopf) .k2-kind { display: none; }
/* Schritt-Leiste = Seiten des Konzepts (Owner 13.09.): bei sieben Themen
   passen die Namen nicht mehr nebeneinander — die Leiste rollt seitlich,
   das aktive Segment wird per JS in Sicht gerollt (schritte_mobil.js). */
.m-schritte { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-schritte::-webkit-scrollbar { display: none; }
.m-schritte__segment { flex: 1 0 auto; min-width: var(--m-schritt-min); }
.m-schritte__label { white-space: nowrap; }

/* ── Krankenkassen-Seite mobil (Owner 10.09., drittes Fenster — Revier Kasse) ──
   Erste Seite des Konzepts, nach dem Muster der Zahn-Seite gebaut: dieselben
   Bausteine (m-kopf, m-liste, m-risiko, m-pille, m-erklaer, m-opt-karte,
   m-entscheidung, m-cta). Hier stehen nur die Regeln, die die Kassen-Seite
   EIGEN hat. Markup: _m_kasse.html, Daten: services/kasse_mobil.py. */
.m-kasse { display: block; }
.m-thema { display: block; }

/* ── Übersicht „Dein Konzept auf einen Blick" (Owner-Bug O4, GO 15.09.) ──────
   Am Handy ist Schritt 2 NUR diese Übersicht: das Desktop-Raster (k2-vn), sein
   Band und das Board treten ab — Kopfleiste, Themen-Leiste und Menü bleiben.
   Alle vier sind Geschwister in `.k2-seite` (nicht direkt in <main> — der
   erste Versuch mit `.k2-hintergrund > …` griff nie, Screenshot 15.09.). */
.m-uebersicht { display: block; margin: 0 12px var(--m-gruppe-luft); }
.k2-seite:has(> .m-uebersicht) > :is(.k2-vn, .k2-vn__band, .k2-board) { display: none; }
.m-uebersicht__titel { margin: 18px 0 14px; font-size: 24px; line-height: 1.2; color: var(--m-titel-farbe); }
.m-uebersicht__kopf { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.m-uebersicht__kopf .m-uebersicht__titel { flex: 1; min-width: 0; margin: 0; }
.m-uebersicht__karte { margin-bottom: var(--m-gruppe-luft); padding: 4px 16px; border: 1px solid var(--m-linie); border-radius: var(--m-radius); background: var(--m-flaeche); }
.m-uebersicht__zeile, .m-uebersicht__eintrag { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--m-linie); color: var(--m-text); font-size: var(--m-fs-text); text-decoration: none; }
.m-uebersicht__karte > :last-child { border-bottom: 0; }
.m-uebersicht__zeile { justify-content: space-between; }
.m-uebersicht__zeile--neu, .m-uebersicht__zeile--summe { font-weight: var(--fw-semibold); }
/* ~~Gegenüberstellung `.m-vg` / Aufklapper `.m-uebersicht__klapp` / Fußzeile `__band` (17.09.)~~ —
   am selben Abend abgelöst durch das Vergleichsfeld `.konzept-ueb` nach Design-Handoff
   (components.css, Tokens `--konzept-ueb-*`). */
.m-uebersicht__logo { flex: 0 0 auto; width: 44px; height: 28px; object-fit: contain; }
.m-uebersicht__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.m-uebersicht__name { font-weight: var(--fw-semibold); }
.m-uebersicht__sub { font-size: 13px; color: var(--m-text-leise); }
.m-uebersicht__wert { flex: 0 0 auto; white-space: nowrap; }
.m-uebersicht__link { flex: 0 0 auto; color: var(--m-aktion); font-weight: var(--fw-semibold); }
.m-uebersicht .m-cta-zeile { margin-inline: 0; }
/* Am Handy tritt die Desktop-Kassen-Fläche ab (Band, Strahl, GKV-Niveau,
   Duell, Beitragsverlauf, Fuß) — der Block ersetzt sie vollständig, jede
   Information nur einmal. Am Desktop bleibt alles wie es ist (`.m-kasse`
   ist dort display:none, s. Kopf der Datei). */
.k2-detail__panel:has(> .m-kasse) > :not(.m-kasse) { display: none; }
/* Themen-Seiten (Owner 14.09.: „mobil komplett losgeloest"): dieselbe EINE
   Regel wie fuer die Kasse darueber. Der Desktop rendert sein Markup weiter,
   mobil sieht man nur `.m-thema` — plus den Panel-Kopf, der beiden Welten
   gehoert. Vorher schaltete der SERVER den Desktop ab (`sel != 'zahn'`,
   `eigene_ereignisse`); das koppelte beide Welten aneinander und machte
   19 Desktop-Waechter rot. */
.k2-detail__panel:has(> .m-thema) > :not(.m-thema):not(.k2-detail__kopf) { display: none; }

/* Kopf (Owner 10.09., 3. Runde): links das Logo der heutigen Kasse, rechts
   derselbe Container mit der Kennzahl „Zusatzbeitrag 3,29 %". Beim Wechsel
   (`m-kasse--wechsel`, kasse_mobil.js) wird der rechte Container zum Logo der
   neuen Kasse; die Prozentwerte faden aus der Mitte nach unten unter beide
   Logos. Der Regler folgt direkt darunter, die Pfeile gehen von den
   Prozentwerten zu den Punkten — deshalb wenig Luft zwischen Kopf und Regler. */
.m-kasse__kopf { margin-bottom: 10px; }
.m-kasse__logos { display: flex; align-items: stretch; gap: 10px; }
.m-kasse__logo { flex: 1; min-width: 0; position: relative; height: var(--m-kasse-kopf-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); overflow: hidden; }
.m-kasse__logo img { max-width: 100%; max-height: 42px; object-fit: contain; }
.m-kasse__logo-text { font-size: 16px; font-weight: var(--fw-bold); color: var(--m-text); text-align: center; }
/* Prozentwert unter dem Logo: reserviert seinen Platz von Anfang an (kein
   Springen des Logos), sichtbar erst mit dem Wechsel. */
.m-kasse__satz { display: block; min-height: 20px; font-size: 15px; font-weight: var(--fw-bold); color: var(--m-text); font-variant-numeric: tabular-nums; opacity: 0; visibility: hidden; }
/* Rechter Container: Kennzahl heute, Logo der neuen Kasse nach dem Wechsel. */
.m-kasse__kenn { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-kasse__kenn-label { font-size: 12.5px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--m-text-leise); }
.m-kasse__kenn-wert { font-size: 26px; line-height: 1.1; font-weight: var(--fw-bold); color: var(--m-text); }
.m-kasse__neu { display: none; flex-direction: column; align-items: center; gap: 6px; }
.m-kasse__pfeil { display: none; flex: none; align-self: center; width: 30px; height: 30px; color: var(--m-aktion); }
.m-kasse__pfeil svg { width: 100%; height: 100%; }
.m-kasse__unter { display: none; margin: 0 0 var(--m-kopf-luft); font-size: 15px; font-weight: var(--fw-semibold); color: var(--m-aktion); }

/* Der Wechsel — Reihenfolge wie die Schutz-Sektion (Owner: „dieselbe
   Animation, dieselbe Geschwindigkeit"): Container blitzt auf, Kennzahl geht,
   Logo der neuen Kasse tritt ein; danach faden die Prozentwerte unter beide
   Logos; zuletzt der Regler mit beiden Punkten und den Pfeilen. */
.m-kasse--wechsel .m-kasse__unter { display: block; animation: m-schutz-eintritt .45s ease-out both; }
.m-kasse--wechsel .m-kasse__kopf .m-kopf__titel { margin-bottom: 4px; }
.m-kasse--wechsel .m-kasse__pfeil { display: flex; animation: m-schutz-eintritt .45s ease-out .3s both; }
.m-kasse--wechsel .m-kasse__logo--rechts { animation: m-schutz-aufblitz 1s ease-out 1; }
.m-kasse--wechsel .m-kasse__kenn { animation: m-kasse-aus .3s ease-in both; }
.m-kasse--wechsel .m-kasse__neu { display: flex; animation: m-schutz-eintritt .55s ease-out .3s both; }
.m-kasse--wechsel .m-kasse__satz { visibility: visible; animation: m-kasse-satz .5s ease-out .85s both; }
@keyframes m-kasse-aus { to { opacity: 0; transform: scale(.85); position: absolute; } }
@keyframes m-kasse-satz { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }

/* Der Beitragsregler als eigene Karte (Owner 10.09., 2. Runde): weiße Fläche,
   feiner Rand, Titelzeile — der Desktop-Strahl darin unverändert. */
.m-regler { margin: 0 0 var(--m-gruppe-luft); padding: 14px 16px 12px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); }
.m-regler__titel { margin: 0; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-text-leise); }
.m-regler .m-kasse__strahl { margin: 0; }
.m-regler .k2-strahl { margin-top: 38px; }
/* Vorschlags-Fassung: die Pfeile (56 px hoch, components.css) kommen von den
   Prozentwerten OBEN in die Karte — Titel deshalb UNTER dem Strahl, der Strahl
   bekommt die Pfeilhöhe als Luft; kein Innenabstand oben, damit die Linien
   direkt unter den Logo-Containern beginnen. */
.m-regler--opt { display: none; flex-direction: column; padding-top: 0; }
.m-regler--opt .m-regler__titel { margin-top: 10px; }
.m-regler--opt .k2-strahl { margin-top: 58px; }
.m-kasse--wechsel .m-regler--ist { display: none; }
.m-kasse--wechsel .m-regler--opt { display: flex; animation: m-schutz-eintritt .45s ease-out 1.2s both; }
.m-kasse--wechsel .m-regler--opt .k2-verbinder, .m-kasse--wechsel .m-regler--opt .k2-strahl__nadel--neu { animation: m-schutz-eintritt .6s ease-out 1.5s both; }
.m-kasse--wechsel .m-regler--opt .k2-strahl__spanne { animation: m-schutz-eintritt .5s ease-out 2s both; }

/* Kachel-Bild als Logo (Beitrags-Kachel) oder als Icon (Seiten-Kacheln):
   contain statt cover, weiße Fläche, feiner Rand — ein beschnittenes Logo
   wäre ein Fehlerbild. */
.m-risiko__bild--logo, .m-risiko__bild--icon { object-fit: contain; padding: 6px; background: var(--m-flaeche); border: 1px solid var(--m-linie); }
/* Beitrag ist kein Signal (weder gut noch schlecht): neutrale Ist-Box, kein
   Doppelpunkt hinter dem Kassennamen, Betrag in der zweiten Zeile. */
.m-kasse__beitrag .m-pille--neutral .m-pille__text::after,
.m-kasse__beitrag .m-pille--mit-wert .m-pille__text::after { content: ""; }
.m-kasse .m-risiko__zeile.m-pille--neutral .m-pille__kern--zweizeilig,
.m-kasse .m-risiko__mit .m-pille__kern--zweizeilig { align-items: center; }
.m-kasse .m-pille__kern--zweizeilig .m-pille__wert { font-size: var(--m-fs-wert); }
/* Rechentafel-Schlusszeile ohne Signalfarbe (die Beitrags-Summe ist eine
   Zahl, kein Urteil). */
.m-rechnung--neutral { border-color: var(--m-linie-stark); color: var(--m-text); background: none; }
/* „Warum der Wechsel passt" (Owner 10.09., 4. Runde): drei Argumente + die
   Ersparnis als Haken-Zeilen in einer Karte; erscheint mit dem Wechsel. */
.m-kasse__gruende { display: none; }
.m-kasse--wechsel .m-kasse__gruende { display: block; animation: m-schutz-eintritt .5s ease-out 1.2s both; }
.m-kasse__punkte { list-style: none; margin: 0 0 var(--m-gruppe-luft); padding: 6px 16px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); }
.m-kasse__punkt { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.35; color: var(--m-text); }
.m-kasse__punkt + .m-kasse__punkt { border-top: 1px solid var(--m-linie); }
.m-kasse__punkt--ersparnis { font-weight: var(--fw-semibold); }
.m-kasse__punkt-schwein { display: none; }
/* Karte 339 (Owner 05.10.: „das Schild mit dem Regenschirm und dem Logo — diese Box gibt es mobil gar nicht
   mehr"): Grundform der Bühne „Warum der Wechsel passt" ist jetzt das Handy — gestapelt, Bild mit Logo oben,
   Haken-Liste darunter (~~Bild überall aus~~). Der Desktop-Block „Warum 3" (min-width 861) weiter unten
   überschreibt sie mit derselben Spezifität zur zweispaltigen Bühne. */
.m-kasse__buehne { margin: 0 0 var(--m-gruppe-luft); border-radius: var(--m-schutz-hero-radius); background: var(--m-flaeche); box-shadow: var(--m-schutz-hero-schatten); overflow: hidden; }
.m-kasse__buehne-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 16px; background: linear-gradient(160deg, var(--m-upgrade-flaeche), var(--m-upgrade-linie)); }
.m-kasse__buehne-illu { width: 132px; height: 132px; }
.m-kasse__buehne-logo { height: 26px; width: auto; }
.m-kasse__buehne .m-kasse__punkte { margin: 0; border: 0; border-radius: 0; background: none; }
.m-kasse__bereiche { display: none; }
.m-kasse__hero { display: none; }   /* „Kasse-Kopf 5" nur am Desktop (30.09.) */   /* „Bereiche unter der Kasse" nur am Desktop (30.09.) */   /* Bühne „Warum 3" nur am Desktop */
.m-kasse__betrag { color: var(--m-gruen); font-weight: var(--fw-bold); }
/* Die folgenden Seiten als kompakte Zeilen (kein Zustand, nur der Verweis). */
.m-kasse__seiten { display: flex; flex-direction: column; margin: 0 0 var(--m-gruppe-luft); background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); overflow: hidden; }
.m-kasse__seite { display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-decoration: none; color: var(--m-text); font-size: 15px; font-weight: var(--fw-semibold); }
.m-kasse__seite + .m-kasse__seite { border-top: 1px solid var(--m-linie); }
.m-kasse__seite-bild { flex: none; width: 44px; height: 30px; object-fit: cover; border-radius: 6px; background: var(--m-flaeche-still); }
.m-kasse__seite-name { flex: 1; min-width: 0; }
.m-kasse__seite-nr { flex: none; font-size: 13px; color: var(--m-aktion); }

/* Beitragskurve in der Preis-Sektion (Owner 13.09.): der Desktop-Aufklapper
   `.k2-vl` (components.css/app.js) — hier nur die Handy-Form: lila Link in der
   Sprache der Seite, Box ohne zweiten Rahmen, Legende kleiner. */
.m-kasse__vl { margin-top: 12px; }
.m-kasse__vl .k2-vl__schalter { padding: 4px 0; font-size: 14px; font-weight: var(--fw-semibold); color: var(--m-aktion); }
.m-kasse__vl .k2-vl__box { margin-top: 8px; padding: 10px 0 0; border: 0; background: none; }
.m-kasse__vl .k2-vl__legende { gap: 12px; }
.m-kasse__vl-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--m-text-leise); }
/* Karte 354 (Owner 05.10.): im Kasten „Mehr zur …" steht die Kurve direkt im aufgeklappten Reiter
   „Beitragsentwicklung" — kein zweiter Aufklapper (Schalter aus, <details open> bleibt offen). */
.m-kasse__vl--direkt { margin-top: 0; }
.m-kasse__vl--direkt > .k2-vl__schalter { display: none; }
.m-kasse__vl--direkt .k2-vl__box { margin-top: 0; padding-top: 0; }

/* „Mehr Optionen" — Platzliste nach dem Check24-Muster (Owner 13.09.):
   Platz · Logo · Name + Beitrag · Vorteil-Pille · „Leistungen im Detail". */
.m-kasse__optionen { margin-top: var(--m-gruppe-luft); }
.m-kasse__optionen[hidden] { display: none; }
/* ~~Platzliste als schlichte Zeilen (Platz · Logo im Kästchen · Name · Pille · Link, 13.09.)~~
   Finn 16.10. (Browser-Vorschau abgenommen): jede Kasse als kleine Fassung der Wechsel-Karte —
   großes Logo ohne Kästchen, lila Spalte rechts (Handy: unten) mit „du sparst / Betrag / im Jahr"
   + „Auswählen"; Empfehlung mit lila Band; teurer = graue Spalte, leiser Knopf.
   Handy = Basis, Computer ab 861 px. Wahl-Logik unverändert (kasse_mobil.js). */
.m-optionen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.m-option {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--m-flaeche); border: 1.5px solid var(--m-linie-stark); border-radius: var(--m-gutschein-kachel-radius);
}
.m-option--empfohlen { border-color: var(--m-upgrade-linie); }
.m-option--mehr { display: none; }
/* Wählbare Zeile (Owner 17.09., Improvement 3): die ganze Karte ist der Knopf. */
.m-option--waehlbar { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.m-option--waehlbar:hover, .m-option--waehlbar:focus-visible { border-color: var(--m-aktion); box-shadow: var(--m-gutschein-schatten); outline: none; }
.m-option--laeuft { opacity: .55; pointer-events: none; }
.k2-kk__waehlen { padding: 14px 16px 0; }
.m-optionen--alle .m-option--mehr { display: flex; }
.m-option__band {
  align-self: flex-start; padding: 5px 14px; border-bottom-right-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis)); color: var(--kk-white);
  font-size: 12.5px; font-weight: var(--fw-semibold);
}
.m-option__haupt { display: grid; grid-template-columns: 26px 88px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 14px 16px; }
.m-option__platz { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--m-flaeche-still); font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-text); }
.m-option--empfohlen .m-option__platz { background: var(--m-aktion); color: var(--kk-white); }
.m-option__logo { height: 44px; display: flex; align-items: center; justify-content: flex-start; }
.m-option__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m-option__logo-text { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.1; }
.m-option__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-option__name { font-size: 16px; font-weight: var(--fw-bold); color: var(--m-text); line-height: 1.25; }
.m-option__beitrag { font-size: 13px; color: var(--m-text-leise); white-space: normal; }
.m-option__teil { display: block; }
.m-option__punkt { display: none; }
.m-option__details { align-self: flex-start; margin-top: 2px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-aktion); cursor: pointer; }
.m-option__details:hover { text-decoration: underline; }
.m-option__abriss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--m-gutschein-abriss-bg); }
.m-option__abriss--teurer { background: var(--m-seite-bg); }
/* Wertblock: drei Zeilen wie in der Wechsel-Karte — „du sparst" / Betrag / „im Jahr", eng gesetzt. */
.m-option__wertblock { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.m-option__vor, .m-option__nach { font-size: 13px; line-height: 1.2; color: var(--m-text-leise); white-space: nowrap; }
.m-option__wert { font-size: 24px; font-weight: var(--fw-extrabold); line-height: 1; color: var(--kk-violet-800); white-space: nowrap; font-variant-numeric: proportional-nums; letter-spacing: var(--m-gutschein-wert-laufweite); }
.m-option__abriss--teurer .m-option__wert { color: var(--m-text); }
.m-option__knopf {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--m-gutschein-knopf-h); padding: 0 18px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis)); color: var(--kk-white);
  font-size: var(--m-knopf-fs); font-weight: var(--fw-medium);
}
.m-option__knopf svg { width: var(--m-knopf-icon); height: var(--m-knopf-icon); }
.m-option__abriss--teurer .m-option__knopf { background: var(--m-flaeche); color: var(--m-aktion); box-shadow: inset 0 0 0 1.5px var(--m-upgrade-linie); }
.m-optionen__leer { margin: 12px 0; font-size: 14px; color: var(--m-text-leise); }
.m-optionen__alle {
  display: block; width: 100%; margin-top: 12px; padding: 12px; border: 1.5px dashed var(--m-linie-stark);
  border-radius: var(--m-gutschein-kachel-radius); background: none; font: inherit; font-size: 14.5px;
  font-weight: var(--fw-semibold); color: var(--m-aktion); cursor: pointer;
}
.m-optionen__alle:hover { border-color: var(--m-aktion); }
@media (min-width: 861px) {
  .m-option { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto 1fr; }
  .m-optionen--alle .m-option--mehr { display: grid; }
  /* Finn 16.10. (Vorschau Variante A): Band über die GANZE Kartenbreite, ohne Rundung, die lila
     Spalte beginnt darunter — ~~nur über der linken Spalte, runde Ecke stieß an die lila Spalte~~. */
  .m-option__band { grid-column: 1 / -1; grid-row: 1; align-self: stretch; border-radius: 0; }
  .m-option--empfohlen .m-option__abriss { grid-row: 2; }
  .m-option__haupt { grid-column: 1; grid-row: 2; grid-template-columns: 26px 110px minmax(0, 1fr); padding: 16px 20px; }
  .m-option:not(.m-option--empfohlen) .m-option__haupt { grid-row: 1 / 3; }
  .m-option__logo { height: 48px; }
  .m-option__teil, .m-option__punkt { display: inline; }
  .m-option__abriss { grid-column: 2; grid-row: 1 / 3; flex-direction: column; justify-content: center; gap: 14px; padding: 14px 18px; text-align: center; }
  .m-option__wertblock { align-items: center; gap: 4px; }
  .m-option__wert { font-size: 28px; }
  .m-option__knopf { width: 100%; }
}

/* Das Desktop-Popup „Deine Kasse im Vergleich" (`.k2-kk`, components.css)
   auf dem Handy: Box in voller Breite, Beschriftung über den beiden Boxen
   statt in einer eigenen Spalte. Design 1:1, nur das Raster gestapelt. */
/* ⚠ Owner-Bug 2 (17.09., Desktop-Test): Die Box war mit 94vw BREITER als ihr
   <dialog> (`.modal` = max. 92vw) — das Popup ließ sich seitlich wischen, und am
   Desktop zog es sich über den ganzen Bildschirm. Jetzt: nie breiter als der
   Dialog; ab 861 px die Breite des Desktop-Kassen-Popups (`--k2-modal-w-kk`)
   mit dem dreispaltigen Raster aus components.css — gestapelt bleibt es nur am Handy. */
.modal__box--mobil { width: 92vw; max-width: 100%; max-height: 86vh; overflow-y: auto; overflow-x: hidden; padding: 0; }
.modal__box--mobil .k2-modal__kopf { padding: 14px 16px; }
.modal__box--mobil .k2-kk { width: 100%; padding: 12px 14px 18px; }
.modal__box--mobil .k2-kk__zeile { grid-template-columns: 1fr 1fr; row-gap: 6px; }
.modal__box--mobil .k2-kk__label { grid-column: 1 / -1; }
.modal__box--mobil .k2-kk__zeile--kopf .k2-kk__label { display: none; }
.modal__box--mobil .k2-kk__zeile--ersparnis { grid-template-columns: 1fr; }
/* Finn 28.10. (Handy): Die Kassen-Köpfe bleiben beim Scrollen oben stehen — sonst
   weiß der Kunde ab der dritten Leistung nicht mehr, welche Spalte welche Kasse ist.
   (Ebenen Abschnitt › Kategorie › Leistung: components.css .k2-kk__kategorie) */
.modal__box--mobil .k2-kk__zeile--kopf { position: sticky; top: 0; z-index: 1; padding: 8px 0; background: var(--c-surface); border-bottom: 1px solid var(--k2-trenner-leise); }
.modal__box--mobil .k2-kk__kasse .logo-img { max-height: 18px; }
/* Ab 861 px zurück auf das Desktop-Raster des Popups (Werte = components.css `.k2-kk*`).
   Bewusst als min-width-Block: mobil.css trägt keine 860-px-Hülle mehr (Desktop-Runde 16.09.). */
@media (min-width: 861px) {
  .modal__box--mobil { width: min(92vw, var(--k2-modal-w-kk)); }
  .modal__box--mobil .k2-kk { padding: 18px 26px 22px; }
  .modal__box--mobil .k2-kk__zeile { grid-template-columns: var(--k2-cmp-label-w) 1fr 1fr; row-gap: 10px; }
  .modal__box--mobil .k2-kk__label { grid-column: auto; }
  .modal__box--mobil .k2-kk__zeile--kopf .k2-kk__label { display: block; }
  .modal__box--mobil .k2-kk__zeile--ersparnis { grid-template-columns: var(--k2-cmp-label-w) 1fr; }
  .modal__box--mobil .k2-kk__zeile--kopf { position: static; padding: 8px 0 4px; border-bottom: 0; }
  .modal__box--mobil .k2-kk__kasse .logo-img { max-height: 22px; }
}

/* ── „Übernehmen"-Bestätigung (Owner 13.09., Entwurf-Wahl „Funkeln stark") ──
   uebernehmen_mobil.js legt die Elemente an: Sterne aus dem Knopf, Funkeln
   über dem Bildschirm, fliegender Haken (m-icon--haken), Warenkorb-Zähler am
   Konto-Symbol, Bestätigungszeile über der Entscheidung. Nur weiß und lila. */
.m-fx-stern { position: fixed; z-index: 85; pointer-events: none; opacity: 0; color: var(--kk-white); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--kk-violet-300) 80%, transparent)); }
.m-fx-stern--lila { color: var(--kk-violet-600); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--kk-violet-300) 90%, transparent)); }
.m-fx-stern--hell { color: var(--kk-violet-300); }
.m-fx-stern--funkeln { animation: m-fx-funkeln var(--d, .9s) ease-out var(--v, 0s) forwards; }
@keyframes m-fx-funkeln { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.2); } 70% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.1); } }
.m-fx-stern--knopf { opacity: 1; animation: m-fx-knopfstern var(--d, .85s) cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes m-fx-knopfstern { 0% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.4) rotate(120deg); opacity: 0; } }
.m-fx-puls .m-wahl__knopf { animation: m-fx-puls .55s ease-out; }
@keyframes m-fx-puls { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 0 10px color-mix(in srgb, var(--kk-green) 25%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
.m-fx-flug { position: fixed; z-index: 90; --m-icon-warn: 36px; background: color-mix(in srgb, var(--m-gut-flaeche) 70%, var(--m-flaeche)); box-shadow: var(--sh-lg); pointer-events: none; }
.m-fx-toast { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--m-radius-innen); border: 1.5px solid var(--m-gut-linie); background: color-mix(in srgb, var(--m-gut-flaeche) var(--m-pille-fuellung), var(--m-flaeche)); color: var(--m-gut); font-size: 14px; font-weight: var(--fw-semibold); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.m-fx-toast--da { opacity: 1; transform: none; }
/* „Keine Optimierung" (Entwurf-Wahl E + Rückfrage): sanfte rote Welle, 80 %
   kräftiger als die Basis; rote/graue Punkte fallen aus dem Knopf; ✕ fliegt. */
.m-fx-welle { position: fixed; z-index: 80; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: var(--r-full); pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--kk-error) 61%, transparent) 0%, color-mix(in srgb, var(--kk-error) 32%, transparent) 45%, transparent 70%); animation: m-fx-welle .95s ease-out forwards; }
@keyframes m-fx-welle { from { transform: scale(0); opacity: 1; } to { transform: scale(60); opacity: 0; } }
.m-fx-punkt { position: fixed; z-index: 85; width: 9px; height: 9px; border-radius: var(--r-full); pointer-events: none; animation: m-fx-fall .9s cubic-bezier(.3,0,.7,1) forwards; }
.m-fx-punkt--rot { background: var(--m-warn); }
.m-fx-punkt--grau { background: var(--m-linie-stark); }
@keyframes m-fx-fall { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.5); opacity: 0; } }
.m-fx-flug--nein { width: 36px; height: 36px; border-radius: var(--r-full); border: 2px solid var(--m-warn); background: color-mix(in srgb, var(--m-warn-flaeche) 70%, var(--m-flaeche)); color: var(--m-warn); display: flex; align-items: center; justify-content: center; }
.m-fx-flug--nein svg { width: 18px; height: 18px; }
.m-fx-toast--nein { border-color: var(--m-warn-linie); background: color-mix(in srgb, var(--m-warn-flaeche) var(--m-pille-fuellung), var(--m-flaeche)); color: var(--m-warn); }
.m-fx-toast__x { width: 18px; height: 18px; flex: none; }
/* Rückfrage-Pop-up: das Info-Popup der App mit zwei Knöpfen */
.m-frage__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.m-frage__knopf { padding: 12px 10px; border-radius: var(--m-radius-innen); font: inherit; font-size: 14px; font-weight: var(--fw-bold); line-height: 1.2; cursor: pointer; }
.m-frage__knopf--zurueck { border: 1.5px solid var(--m-aktion); background: var(--m-flaeche); color: var(--m-aktion); }
.m-frage__knopf--weiter { border: 1.5px solid var(--m-warn-linie); background: color-mix(in srgb, var(--m-warn-flaeche) var(--m-pille-fuellung), var(--m-flaeche)); color: var(--m-warn); }
/* Warenkorb-Zähler am Konto-Symbol (Kopfleiste) */
.m-konto__symbol { position: relative; }
.m-warenkorb { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full); background: var(--m-gruen); color: var(--kk-white); font-size: 12px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; transform: scale(0); }
.m-warenkorb--da { transform: scale(1); }
.m-warenkorb--pop { animation: m-fx-pop .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.m-konto__symbol--bump { animation: m-fx-bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes m-fx-pop { to { transform: scale(1); } }
@keyframes m-fx-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Wiedereinstieg (Owner-Bug 6, 17.09.): ein schon einmal aufgedecktes Kassen-Panel
   steht SOFORT im Wechsel-Zustand (menue_mobil.js setzt `m-kasse--sofort` dazu) —
   dieselben Regeln wie bei „weniger Bewegung", nur ohne Medienabfrage. */
.m-kasse--wechsel.m-kasse--sofort .m-kasse__unter, .m-kasse--wechsel.m-kasse--sofort .m-kasse__pfeil, .m-kasse--wechsel.m-kasse--sofort .m-kasse__logo--rechts,
.m-kasse--wechsel.m-kasse--sofort .m-kasse__kenn, .m-kasse--wechsel.m-kasse--sofort .m-kasse__neu, .m-kasse--wechsel.m-kasse--sofort .m-kasse__satz,
.m-kasse--wechsel.m-kasse--sofort .m-regler--opt, .m-kasse--wechsel.m-kasse--sofort .m-kasse__gruende, .m-kasse--wechsel.m-kasse--sofort .m-regler--opt .k2-verbinder,
.m-kasse--wechsel.m-kasse--sofort .m-regler--opt .k2-strahl__nadel--neu, .m-kasse--wechsel.m-kasse--sofort .m-regler--opt .k2-strahl__spanne { animation: none; }
.m-kasse--wechsel.m-kasse--sofort .m-kasse__kenn { display: none; }
.m-kasse--wechsel.m-kasse--sofort .m-kasse__satz { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .m-kasse--wechsel .m-kasse__unter, .m-kasse--wechsel .m-kasse__pfeil, .m-kasse--wechsel .m-kasse__logo--rechts,
  .m-kasse--wechsel .m-kasse__kenn, .m-kasse--wechsel .m-kasse__neu, .m-kasse--wechsel .m-kasse__satz,
  .m-kasse--wechsel .m-regler--opt, .m-kasse--wechsel .m-kasse__gruende, .m-kasse--wechsel .m-regler--opt .k2-verbinder,
  .m-kasse--wechsel .m-regler--opt .k2-strahl__nadel--neu, .m-kasse--wechsel .m-regler--opt .k2-strahl__spanne { animation: none; }
  .m-fx-stern, .m-fx-flug, .m-fx-welle, .m-fx-punkt { display: none; }
  .m-fx-puls .m-wahl__knopf, .m-warenkorb--pop, .m-konto__symbol--bump { animation: none; }
  .m-warenkorb--pop { transform: scale(1); }
  .m-kasse--wechsel .m-kasse__kenn { display: none; }
  .m-kasse--wechsel .m-kasse__satz { opacity: 1; }
}


/* ── Aufgeklappte Baustein-Karte „m-bk" (Owner-Entscheid 13.09., 25 Entwurfsrunden;
   Quelle wissen/entwuerfe/karte-inhalt-varianten.html). Kopf = .m-baustein__kopf,
   darunter Pille, drei eingeklappte Abschnitte. Karte fast bildschirmbreit. ── */
.m-bk__koerper { padding: 4px 8px 12px; }
.m-bk__pfeil { width: 14px; height: 10px; flex: none; color: var(--kk-ink-soft); transition: transform .25s ease; }
.m-bk__sek { margin-top: 10px; border-top: 1px solid var(--m-linie); }
.m-bk__sek:first-child { border-top: 0; margin-top: 4px; }
.m-bk__titel { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 0 12px 6px; font-size: 17px; font-weight: var(--fw-bold); cursor: pointer; }
.m-bk__titel::-webkit-details-marker { display: none; }
/* Präsentationen-Zeile der Baustein-Karte (Owner 17.09.): sieht aus wie eine Akkordeon-Zeile,
   ist aber ein Knopf (öffnet das Broschüren-Overlay) — Pfeil zeigt nach rechts. */
.m-bk__titel--knopf { width: 100%; border: 0; background: none; font: inherit; font-size: 17px; font-weight: var(--fw-bold); color: inherit; text-align: left; }
.m-bk__pfeil--rechts { transform: rotate(-90deg); }
.m-bk__zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--m-upgrade-flaeche); color: var(--m-aktion); font-size: 12.5px; font-weight: var(--fw-bold); }
.m-baustein__tab--praes { margin-left: auto; border-color: var(--m-aktion); color: var(--m-aktion); }
.m-bk__titel .m-bk__pfeil { margin-left: auto; }
.m-bk__sek[open] > .m-bk__titel .m-bk__pfeil { transform: rotate(180deg); }
.m-bk__inhalt { padding: 0 0 12px; }
.m-bk__rechnung { display: grid; gap: 4px; padding: 0 6px; }
.m-bk__z { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--m-text-leise); }
.m-bk__z--summe { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--m-linie-stark); color: var(--m-aktion); font-weight: var(--fw-bold); font-size: 15px; }
.m-bk__z--posten { padding-left: 14px; font-size: 13px; align-items: flex-start; }
.m-bk__was2 { display: block; padding-left: 12px; font-size: 12px; opacity: .85; white-space: nowrap; }
.m-bk__auf > summary { list-style: none; cursor: pointer; } .m-bk__auf > summary::-webkit-details-marker { display: none; }
.m-bk__auf-label { display: inline-flex; align-items: center; gap: 6px; }
.m-bk__auf-label .m-bk__pfeil { width: 12px; height: 8px; }
.m-bk__auf[open] .m-bk__pfeil { transform: rotate(180deg); }
.m-bk__cmp { display: grid; gap: 6px; --m-bk-label: 96px; }
.m-bk__cmp--3 { --m-bk-label: 78px; }
.m-bk__koepfe, .m-bk__zeile { display: grid; grid-template-columns: var(--m-bk-label) repeat(var(--m-bk-n, 2), minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.m-bk__cmp--1 { --m-bk-n: 1; } .m-bk__cmp--2 { --m-bk-n: 2; } .m-bk__cmp--3 { --m-bk-n: 3; }
.m-bk__koepfe { position: sticky; top: 0; z-index: 6; background: var(--kk-white); padding: 6px 0; margin-top: -6px; }
.m-bk__kopf { position: relative; display: grid; gap: 3px; padding: 8px 10px; border-radius: var(--m-radius-innen); border: 1px solid var(--k2-trenner); background: var(--k2-rail-bg); min-width: 0; align-content: center; }
.m-bk__kopf--kasse .m-bk__name { font-size: 12px; color: var(--m-text-leise); }
.m-bk__kopf--mein { border-color: var(--m-bk-f-linie); background: var(--m-bk-f-flaeche); }
.m-bk__kopf--mein .m-bk__name { color: var(--m-bk-f); font-size: 12px; }
.m-bk__kopf--mein .m-bk__sub { font-size: 12px; font-weight: var(--fw-semibold); color: var(--m-text); }
.m-bk__logo { max-height: 16px; max-width: 70px; object-fit: contain; justify-self: start; }
.m-bk__kopf .m-bk__logo { max-height: 26px; max-width: calc(100% - 22px); }
.m-bk__name { font-size: 12px; font-weight: var(--fw-bold); white-space: normal; hyphens: auto; -webkit-hyphens: auto; line-height: 1.25; }
.m-bk__sub { font-size: 12px; color: var(--m-text-leise); }
.m-bk__x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--m-flaeche-still); color: var(--m-text-leise); font-size: 12px; line-height: 18px; cursor: pointer; }
/* Wechsel-Knopf je Vergleichsspalte (Owner-GO 15.09., Bug O2): leiser Umriss in
   der Aktionsfarbe — die Entscheidung trägt der Kopf, der Knopf ist der Weg dahin. */
.m-bk__wechsel { display: block; width: 100%; margin-top: 6px; padding: 5px 4px; border: 1.5px solid var(--m-aktion); border-radius: var(--r-full); background: transparent; color: var(--m-aktion); font: inherit; font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.2; cursor: pointer; }
.m-bk__wechsel:disabled { opacity: .6; cursor: default; }
.m-bk__cmp--3 .m-bk__kopf { padding: 7px 6px; } .m-bk__cmp--3 .m-bk__name { font-size: 12px; } .m-bk__cmp--3 .m-bk__sub { font-size: 12px; }
.m-bk__fuss-zeile { display: none; }
.m-bk__plus-zeile { grid-column: 1 / -1; justify-self: end; margin: -2px 0 0; padding: 4px 0; border: 0; background: none; color: var(--kk-ink-soft); font: inherit; font-size: 12px; font-weight: var(--fw-semibold); cursor: pointer; }
.m-bk__zeile { position: relative; padding-top: 6px; border-top: 1px solid var(--m-linie); }
.m-bk__label { display: flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.25; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.m-bk__label > span:first-child { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
.m-bk__cmp--3 .m-bk__label { font-size: 12px; }
.m-bk__frage { width: 15px; height: 15px; flex: none; color: var(--kk-ink-soft); opacity: .6; }
.m-bk__frage .m-icon__svg { width: 100%; height: 100%; display: block; }
.m-bk__zelle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 7px 8px; line-height: 1.3; border-radius: var(--kr-radius-box); border: 1.5px solid transparent; text-align: left; hyphens: auto; -webkit-hyphens: auto; cursor: pointer; align-self: stretch; }
.m-bk__cmp--3 .m-bk__zelle { font-size: 12px; padding: 6px 5px; }
.m-bk__zelle--neutral { background: var(--m-flaeche-still); color: var(--m-text-leise); }
.m-bk__zelle--rot { background: var(--m-warn-flaeche); color: var(--m-warn); }
.m-bk__zelle--gelb { background: var(--m-mittel-flaeche); color: var(--m-mittel); }
.m-bk__zelle--gruen, .m-bk__zelle--voll { background: var(--m-gut-flaeche); color: var(--m-gut); }
.m-bk__zelle--voll { border-color: var(--m-gut); border-width: var(--m-bk-voll-rand); }
.m-bk__zelle--voll .m-bk__wert { font-weight: var(--fw-bold); }
.m-bk__zelle--an { border-color: var(--m-aktion); }
.m-bk__zelle .m-bk__pfeil { width: 8.4px; height: 6px; opacity: .9; overflow: visible; }
.m-bk__zelle--an .m-bk__pfeil { transform: rotate(180deg); }
.m-bk__erkl, .m-bk__was { grid-column: 1 / -1; display: block; margin: 2px 0 6px; }
.m-bk__erkl { padding: 9px 11px; border-radius: var(--m-radius-innen); background: var(--m-flaeche-still); font-size: 12px; line-height: 1.45; color: var(--m-text-leise); }
.m-bk__erkl-titel { display: block; font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--m-aktion); margin-bottom: 3px; }
.m-bk__was { position: static; margin: 4px 0 6px; font-size: 12.5px; }
.m-bk__was::after { bottom: auto; top: -8px; right: auto; left: 18px; border-top: 0; border-bottom: 8px solid var(--m-blase-bg); }
.m-bk__erkl[hidden], .m-bk__was[hidden] { display: none; }
.m-bk__f1 { --m-bk-f: var(--m-aktion); --m-bk-f-linie: var(--m-upgrade-linie); --m-bk-f-flaeche: var(--m-upgrade-flaeche); }
.m-bk__f2 { --m-bk-f: var(--m-blau); --m-bk-f-linie: var(--m-blau-linie); --m-bk-f-flaeche: var(--m-blau-flaeche); }
.m-bk__f3 { --m-bk-f: var(--kk-ink-muted); --m-bk-f-linie: var(--kk-grau-bd); --m-bk-f-flaeche: var(--m-flaeche-still); }
.m-bk__chips { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--m-linie); }
.m-bk__chips-ueber { margin: 0 0 4px; font-size: 15px; font-weight: var(--fw-bold); }
.m-bk__chips-titel { margin: 0 0 8px; font-size: 12px; font-weight: var(--fw-bold); color: var(--m-text-leise); text-transform: uppercase; letter-spacing: .06em; }
.m-bk__mehr { display: block; width: 100%; margin: 2px 0 4px; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: var(--fw-bold); color: var(--m-aktion); text-align: center; cursor: pointer; }
.m-bk__chips-hinweis { margin: 8px 0 0; font-size: 12px; color: var(--m-text-leise); }
.m-bk__chip { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 8px 10px; border-radius: var(--m-radius-innen); border: 1px solid var(--m-linie-stark); background: var(--m-flaeche); font: inherit; text-align: left; cursor: pointer; }
.m-bk__chip--aktiv { border-color: var(--m-bk-f-linie); background: var(--m-bk-f-flaeche); }
.m-bk__chip--aktiv .m-bk__chip-name { color: var(--m-bk-f); }
.m-bk__chip:disabled { opacity: .45; cursor: default; }
.m-bk__chip-text { display: grid; min-width: 0; } .m-bk__chip-name { font-size: 12.5px; font-weight: var(--fw-semibold); } .m-bk__chip-sub { font-size: 12px; color: var(--m-text-leise); }
.m-bk__empf { flex: none; display: inline-flex; align-items: center; margin-left: auto; margin-right: 8px; padding: 2px 8px; border-radius: var(--r-full); border: 1.5px solid var(--m-aktion); background: var(--m-upgrade-flaeche); color: var(--m-aktion); font-size: 12px; font-weight: var(--fw-semibold); white-space: nowrap; }
.m-bk__chip-preis { margin-left: auto; min-width: 62px; text-align: right; font-size: 12.5px; font-weight: var(--fw-bold); white-space: nowrap; }
.m-bk__empf + .m-bk__chip-preis { margin-left: 0; }
.m-bk__chip-aktion { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-full); border: 1.5px solid var(--m-upgrade-linie); color: var(--m-aktion); font-weight: var(--fw-bold); }
.m-bk__chip--aktiv .m-bk__chip-aktion { border-color: transparent; background: var(--m-flaeche-still); color: var(--m-text-leise); font-size: 12px; }
.m-bk__vl-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 2px; font-size: 12px; color: var(--m-text-leise); }
.m-bk__vl-leg { display: inline-flex; align-items: center; gap: 6px; } .m-bk__vl-leg-farbe { width: 10px; height: 10px; border-radius: 3px; }
.m-bk__vl-feld { position: relative; margin: 6px 0 8px; padding-top: 64px; touch-action: pan-y; }
.m-bk__vl-feld svg { display: block; width: 100%; height: auto; }
.m-bk__vl-linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.m-bk__vl-flaeche { opacity: .10; }
.m-bk__vl-heute { stroke: var(--m-linie-stark); stroke-dasharray: 3 3; }
.m-bk__vl-zeiger { stroke: var(--kk-ink-soft); stroke-width: 1; }
.m-bk__vl-punkt { fill: var(--kk-white); stroke-width: 2.5; }
.m-bk__vl-tip { position: absolute; z-index: 5; left: 0; right: auto; bottom: auto; top: 0; transform: translate(-50%, 0); animation: none; padding: 5px 9px; border-radius: 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; }
.m-bk__vl-tip::after { display: none; }
.m-bk__vl-tip[hidden] { display: none; }
.m-bk__vl-tip-alter { display: block; font-weight: var(--fw-bold); margin-bottom: 2px; }
.m-bk__vl-tip-zeile { display: flex; align-items: center; gap: 6px; }
.m-bk__vl-tip-farbe { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; }

/* ══ Etappe 1 „Rahmen & Rauschen" (Owner 25.09.) ══════════════════════════════
   Handy-Design ist die Vorlage (Alex) — am Handy gilt davon nur der
   Fuß (Logos nur Übersicht, Rechtslinks). Alles Weitere ab 861 px — auch der
   lange Titel „Dein Schutz …" (Handy behält „Beim Zahnarzt", Owner 25.09.). */
.m-seitenfuss__link { color: inherit; }
/* ~~.m-kopf__fuer, .k2-menue__zurueck, .k2-mobilkopf__antraege~~ — raus (Owner 28.09.): Name,
   Konsole-Rückweg und „Anträge vorbereiten" stehen am Desktop nur noch in der festen Leiste oben. */
.m-kopf__titel-lang { display: none; }

@media (min-width: 861px) {
  .k2-seite > .m-schritte { visibility: hidden; height: var(--k2-konto-desktop-zeile); padding: 0; overflow: hidden; }
  /* ~~`.m-kopf__bild` am Desktop aus (Owner 25.09.)~~ — widerrufen 29.09. (Design-Auftrag):
     am Desktop steht es als breites Bildband unter dem Titel, das Siegel oben rechts darauf. */
  .k2-seite > .m-schritte__name, .m-schluss, .m-kopf__titel-kurz { display: none; }
}
.m-kopf { display: grid; grid-template-columns: minmax(0, 1fr); }
.m-kopf__zeile { display: contents; }
.m-kopf__zeile .m-kopf__titel { grid-row: 1; grid-column: 1; margin-bottom: var(--m-kopf-luft); }
.m-kopf__bild { grid-row: 2; grid-column: 1; height: var(--m-kopf-bild-h-desktop); }
/* ~~Owner 30.09. „der Kreis sollte zu sehen sein“: EU-Flagge ganz zeigen (contain, Flaggenblau)~~ — ersetzt
   durch das Reise-Foto; die Flagge steht jetzt als rundes Siegel unter dem Löwen-Siegel. */
.m-kopf > picture { display: contents; }
.m-kopf .m-siegel-eu {
  display: block; grid-row: 2; grid-column: 1; justify-self: end; align-self: start; position: relative; z-index: 1;
  width: var(--m-siegel-eu-d); height: var(--m-siegel-eu-d); object-fit: cover; border: 4px solid var(--kk-white); border-radius: 50%;
  margin: calc(var(--m-siegel-ueberstand-desktop) + var(--m-siegel-h-desktop) + 10px) calc(var(--m-siegel-ueberstand-desktop) + (var(--m-siegel-h-desktop) - var(--m-siegel-eu-d)) / 2) 0 0;
  filter: drop-shadow(var(--m-siegel-schatten));
}
.m-kopf .m-siegel { grid-row: 2; grid-column: 1; justify-self: end; align-self: start; position: relative; z-index: 1; height: var(--m-siegel-h-desktop); margin: var(--m-siegel-ueberstand-desktop) var(--m-siegel-ueberstand-desktop) 0 0; filter: drop-shadow(var(--m-siegel-schatten)); }
/* Themen ohne Kopfbild (Kasse): Siegel bleibt neben dem Titel. */
.m-kopf:not(:has(.m-kopf__bild)) .m-siegel { grid-row: 1; align-self: center; height: var(--m-siegel-h); margin: 0 0 var(--m-kopf-luft); filter: none; }
/* Kasse: Bildband aus Illustration + Logo der heutigen Kasse (Owner 29.09.). */
.m-kopf__bild.m-kasse__kopf-bild { display: flex; align-items: center; justify-content: center; gap: 48px; background: linear-gradient(135deg, var(--m-kasse-kopf-von), var(--m-kasse-kopf-bis)); }
.m-kasse__kopf-illu { width: var(--m-kasse-kopf-illu); height: var(--m-kasse-kopf-illu); }
.m-kasse__kopf-logo { display: flex; align-items: center; justify-content: center; padding: 18px 26px; border-radius: var(--m-radius); background: var(--m-flaeche); box-shadow: var(--m-cta-schatten); }
.m-kasse__kopf-logo img { height: 44px; width: auto; }
/* Owner 29.09. „unter das Bild": auf der Kasse-Seite steht der Titel unter dem Bildband. */
.m-kasse__kopf:has(.m-kasse__kopf-bild) .m-kopf__bild, .m-kasse__kopf:has(.m-kasse__kopf-bild) .m-siegel { grid-row: 1; }
.m-kasse__kopf:has(.m-kasse__kopf-bild) .m-kopf__zeile .m-kopf__titel { grid-row: 2; margin: var(--m-kopf-luft) 0 0; }
.m-kasse__kopf:has(.m-kasse__kopf-bild) .m-kasse__unter { margin-top: var(--m-kopf-luft); }
/* „Warum der Wechsel passt" als Bühne (Canvas „Warum 3", Owner 29.09.). */
/* Karte 339 (Owner 02.10., Handy-Fenster 487 px: Text rechts abgeschnitten): die zweispaltige Bühne mit
   280 px Bildspalte gilt nur am Desktop. Darunter bleibt, wie im Template beschrieben, der einfache Block
   ohne Bild — die Regeln standen seit der Design-Runde vom 01.10. außerhalb der Breiten-Abfrage. */
@media (min-width: 861px) {
.m-kasse__buehne { display: grid; grid-template-columns: var(--m-kasse-buehne-bild) minmax(0, 1fr); margin: 0 0 var(--m-gruppe-luft); border-radius: var(--m-schutz-hero-radius); background: var(--m-flaeche); box-shadow: var(--m-schutz-hero-schatten); overflow: hidden; }
.m-kasse__buehne-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px; background: linear-gradient(160deg, var(--m-upgrade-flaeche), var(--m-upgrade-linie)); }
.m-kasse__buehne-illu { width: var(--m-kasse-buehne-illu); height: var(--m-kasse-buehne-illu); }
.m-kasse__buehne-logo { height: 30px; width: auto; }
.m-kasse__buehne .m-kasse__punkte { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 28px 30px; border: 0; border-radius: 0; background: none; }
/* Owner 12.10.: Haken-Texte nicht fett — ~~var(--fw-semibold)~~; Farbe bleibt. */
.m-kasse__buehne .m-kasse__punkt { padding: 0; font-size: 17px; font-weight: var(--fw-regular); }
.m-kasse__buehne .m-kasse__punkt + .m-kasse__punkt { border-top: 0; }
/* Owner 30.09.: „Icons aus der Figma-Datei verwenden" — Lucide circle-check wie in den
   Schutz-Chips, ~~gefüllter dunkelgrüner Kreis mit ✓~~. */
.m-kasse__buehne .m-kasse__punkt .m-icon--haken {
  --m-icon-warn: var(--m-kasse-haken); flex: none; border: 0; border-radius: 0; background: var(--m-gruen);
  -webkit-mask: var(--m-lucide-kreis-haken) center / contain no-repeat; mask: var(--m-lucide-kreis-haken) center / contain no-repeat;
}
.m-kasse__buehne .m-kasse__punkt .m-icon--haken::before { content: none; }
.m-kasse__buehne .m-kasse__punkt--ersparnis { margin-top: 6px; padding: 14px 18px; border-radius: var(--m-radius); border: 1px solid var(--m-gut-linie); background: var(--m-gut-flaeche); color: var(--m-gut); font-weight: var(--fw-regular); }
.m-kasse__buehne .m-kasse__punkt--ersparnis .m-icon--haken { display: none; }
.m-kasse__buehne .m-kasse__punkt-schwein { display: block; flex: none; width: 52px; height: 52px; }
}
/* „Kasse 2 · Ersparnis als Held" (Owner 29.09.): lila Band + Beiträge als Balken; die zwei
   Spalten und die Differenz-Zeile treten dafür am Desktop zurück. */
.m-opt .m-kasse__held:not([hidden]) { display: flex; align-items: center; gap: 22px; margin: 0 12px 16px; padding: 26px 30px; border-radius: var(--m-schutz-hero-radius); background: var(--m-verlauf-band); color: var(--kk-white); }
.m-kasse__held-text { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.m-kasse__held-kicker, .m-kasse__held-unter { font-size: 14px; color: var(--m-schutz-hero-leise); }
.m-kasse__held-wert { font-size: 44px; font-weight: var(--fw-extrabold); line-height: 1; }
.m-kasse__held-wert span { font-size: 18px; font-weight: var(--fw-semibold); }
.m-kasse__held-bild { flex: none; width: var(--m-kasse-held-bild); height: var(--m-kasse-held-bild); }
.m-opt .m-kasse__vn:has(.m-kasse__vn-balken) .m-kasse__vn-seiten, .m-opt .m-kasse__vn:has(.m-kasse__vn-balken) .m-kasse__vn-diff { display: none; }
.m-opt .m-kasse__vn-balken:not([hidden]) { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 6px 4px 14px; border-bottom: 1px solid var(--m-linie); }
.m-kasse__vn-balken-logo img { height: 26px; width: auto; }
.m-kasse__vn-balken-logo--heute { filter: grayscale(1); opacity: .7; }
.m-kasse__vn-balken-spur { display: block; height: 14px; }
.m-kasse__vn-balken-fuell { display: block; height: 100%; border-radius: var(--r-full); background: var(--m-kasse-balken-heute); }
.m-kasse__vn-balken-fuell--neu { background: var(--kk-violet-700); }
.m-kasse__vn-balken-wert { text-align: right; font-size: 16px; color: var(--m-text-leise); white-space: nowrap; }
.m-kasse__vn-balken-wert--neu { font-size: 18px; font-weight: var(--fw-extrabold); color: var(--m-text); }
.m-kasse__vn-balken-wert span { font-size: 12.5px; font-weight: var(--fw-medium); color: var(--m-text-leise); }
@media (min-width: 861px) {
  /* Die Linie über dem Kopf (Board-Rand) ist am Desktop weg. */
  .k2-board { border-top: 0; }
}
.m-kopf__titel-lang { display: inline; }
@media (min-width: 861px) {
  .m-seitenfuss { margin-top: 28px; }
}
.m-schutz--haupt .m-schutz__titel, .m-schutz--haupt .m-schutz__unter { display: none; }
.m-schutz--haupt .m-schutz__kopf { justify-content: flex-end; margin-bottom: 12px; }
.m-weiter:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--m-cta-h); padding: 0 18px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis)); box-shadow: var(--m-cta-schatten); color: var(--kk-white); font-size: 17px; font-weight: var(--fw-bold); text-decoration: none; }
@media (min-width: 861px) {
  .k2-menue__berater { display: none; }
}
.k2-seite > .k2-menue .k2-menue__eintrag { gap: 8px; padding-left: 12px; padding-right: 12px; }
/* ~~`.k2-mobilkopf { display: flex; … }`~~ — widerrufen 29.09.: der Konto-Griff steht
   am Desktop in der festen Leiste oben, die Kopfleiste ist dort aus (components.css). */
/* Caps raus — nur Desktop */
.k2-menue__titel, .konzept-ueb__feld-label, .konzept-ueb__gruppe, .konzept-ueb__tip-over,
.m-vergleich__kopf, .m-erklaer__titel, .m-bk__effektiv-titel, .m-rechnung__ueber, .m-schutz__rolle,
.m-schutz__mono, .m-kasse__kenn-label, .m-bk__erkl-titel, .m-bk__chips-titel { text-transform: none; letter-spacing: normal; }
.k2-menue__titel { font-size: 13px; font-weight: var(--fw-semibold); }

/* ══ Etappe 2 „Leiste vorher → nachher" (Owner 25.09.) ═══════════════════════
   Nur Desktop: je Thema zweite Zeile „heute → mit Konzept", Fuß = Kopfzahlen
   der Übersicht. Am Handy bleibt die Leiste, wie sie ist. */
.k2-menue__vn, .k2-menue__fuss-vn { display: none; }

.k2-seite > .k2-menue .k2-menue__eintrag:has(.k2-menue__vn) { grid-template-columns: var(--k2-menue-bild) 1fr; row-gap: 2px; }
.k2-menue__eintrag:has(.k2-menue__vn) .k2-menue__bild { grid-row: span 2; }
.k2-menue__eintrag:has(.k2-menue__vn) .k2-menue__wert { display: none; }
.k2-menue__vn { display: block; grid-column: 2; font-size: 13px; color: var(--c-text-muted); white-space: nowrap; }
.k2-menue__vn-pfeil { padding: 0 2px; }
.k2-menue__fuss:has(.k2-menue__fuss-vn) > .k2-menue__fuss-zeile,
.k2-menue__fuss:has(.k2-menue__fuss-vn) > .k2-menue__fuss-hinweis { display: none; }
.k2-menue__fuss-vn { display: flex; flex-direction: column; gap: 4px; }
/* ~~Fuß-Zeilen Heute / Mit deinem Konzept (Label 14, Wert 15 px)~~ — ersetzt durch Menü B (29.09., unten). */
.k2-menue__fuss-vn .k2-menue__fuss-hinweis { font-size: 12px; }

/* ══ Etappe 3 „Einheitliches Template" — Krankenkasse (Owner 26.09.) ═════════
   NUR Desktop (Owner 26.09.: „Anpassungen nur auf Desktop erstmal, den Plan
   nicht verwerfen"). Titel + Urteil, EINMAL heute → Empfehlung mit Differenz,
   Details eingeklappt. Am Desktop ausgeblendet: Logo-/Prozent-Kacheln,
   Preisstrahl, „Dein Beitrag", Karte „Mit deinem Konzept", „Mehr Optionen",
   Ersparnis-Zeile in „Warum der Wechsel passt". Am Handy bleibt alles, wie es
   ist — der Handy-Plan steht in wissen/supervisor/sv-frontstage.md. */
.m-urteil, .m-kasse__vn, .m-kasse__mehr, .m-nur-desktop, .m-kasse__held { display: none; }
.m-opt .m-urteil { display: none; }

.m-nur-handy { display: none; }
.m-nur-desktop { display: inline; }
/* 0,3,0 — schlägt die Zustands-Regeln `.m-kasse--wechsel …` / `.m-opt [data-m-opt-nur]` (0,2,0) */
.k2-detail__panel .m-kasse .m-kasse__logos, .k2-detail__panel .m-kasse .m-kasse__unter,
.k2-detail__panel .m-kasse .m-regler, .k2-detail__panel .m-kasse .m-kasse__beitrag-titel,
.k2-detail__panel .m-kasse .m-kasse__beitrag, .k2-detail__panel .m-kasse .m-opt-karte,
.k2-detail__panel .m-kasse .m-wahl--mehr, .k2-detail__panel .m-kasse .m-kasse__punkt--ersparnis,
.k2-detail__panel .m-kasse .m-kasse__bonus--handy { display: none; }
.m-kasse .m-entscheidung__reihe { grid-template-columns: repeat(2, 1fr); }

.m-urteil { display: inline-block; margin: 0 0 var(--m-kopf-luft); padding: 4px 12px; border-radius: var(--r-full); font-size: 14px; font-weight: var(--fw-semibold); }
.m-urteil[hidden] { display: none; }
.m-opt .m-urteil { display: inline-block; }
.m-urteil--wechsel { background: var(--m-gut-flaeche); border: 1px solid var(--m-gut-linie); color: var(--m-gruen); }
.m-urteil--behalten { background: var(--m-flaeche-still); border: 1px solid var(--m-linie); color: var(--m-text); }

.m-kasse__vn { display: block; margin: 0 12px var(--m-gruppe-luft); padding: 16px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); }
.m-kasse__vn-seiten { display: flex; align-items: stretch; gap: 12px; }
.m-kasse__vn-seite { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.m-kasse__vn-seite[hidden], .m-kasse__vn-pfeil[hidden], .m-kasse__vn-diff[hidden], .m-kasse__andere[hidden] { display: none; }
.m-opt .m-kasse__vn-seite { display: flex; }
.m-opt .m-kasse__vn-pfeil { display: block; }
.m-opt .m-kasse__andere { display: inline-flex; }
.m-kasse__vn-logo { max-width: 100%; height: 34px; margin-bottom: 8px; object-fit: contain; object-position: left center; }
.m-kasse__vn-kicker { font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-text-leise); }
.m-kasse__vn-seite--neu .m-kasse__vn-kicker { color: var(--m-gruen); }
.m-kasse__vn-name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--m-text); overflow-wrap: anywhere; }
.m-kasse__vn-betrag { margin-top: 4px; font-size: var(--m-fs-wert); font-weight: var(--fw-bold); color: var(--m-text-leise); }
.m-kasse__vn-seite--neu .m-kasse__vn-betrag { color: var(--m-text); }
.m-kasse__vn-zb { font-size: 13px; color: var(--m-text-leise); }
.m-kasse__vn-pfeil { flex: none; align-self: center; width: 26px; height: 26px; color: var(--m-aktion); }
.m-kasse__vn-pfeil svg { width: 100%; height: 100%; }
.m-kasse__vn-diff { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--m-linie); font-size: 16px; font-weight: var(--fw-bold); color: var(--m-text); }
.m-kasse__vn-diff--weniger { color: var(--m-gruen); }
.m-kasse__vn-hinweis { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--m-text-leise); }
.m-kasse__andere { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border: 1.5px solid var(--m-aktion); border-radius: var(--r-sm); background: var(--m-flaeche); color: var(--m-aktion); font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; }
.m-kasse__andere svg { width: 16px; height: 16px; }
.m-kasse__andere + .m-kasse__andere { margin-left: 8px; }

.m-kasse__mehr { display: block; margin-top: var(--m-upgrade-luft-oben); }   /* Owner 30.09.: mehr Abstand nach oben */
.m-kasse__broschuere { margin: 4px 0 14px 6px; padding: 0; border: 0; background: none; color: var(--m-aktion); font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; }
/* Owner 30.09.: „Mehr zur <Kasse>" als FAQ-Modul aus Figma — Überschrift mittig ohne
   Linie, jede Frage eine eigene weiße Karte (feiner heller Rand, Radius 15), Titel
   Medium 16px, rechts Plus/Minus (Lucide-Maß: 14px Strich, 2px, in 24px) statt Pfeil.
   Inhalt unverändert; nur Desktop (der Wrapper ist am Handy aus). */
.m-kasse__mehr .m-kasse__bonus { padding: 0; border: 0; background: none; }
.m-kasse__mehr .m-kasse__bonus > .m-liste__titel { justify-content: center; margin-bottom: var(--m-faq-abstand); font-size: var(--m-gutschein-titel-fs); }
.m-kasse__mehr .m-kasse__bonus > .m-liste__titel::after { content: none; }
/* Finn 08.10.: Abschnitt 3 „Sicher wechseln“ steht unter „Warum wir diese Kasse empfehlen“ —
   gleiche Überschrift (mittig, gleiche Größe, ohne Linie) und gleicher Abstand nach oben. */
.m-kasse__mehr--wechsel + .m-kasse__gruende { margin-top: var(--m-upgrade-luft-oben); }
.m-kasse__mehr--wechsel + .m-kasse__gruende > .m-liste__titel { justify-content: center; margin-bottom: var(--m-faq-abstand); font-size: var(--m-gutschein-titel-fs); }
.m-kasse__mehr--wechsel + .m-kasse__gruende > .m-liste__titel::after { content: none; }
.m-kasse__mehr .m-bk__sek, .m-kasse__mehr .m-bk__sek:first-child { margin: 0 0 var(--m-faq-abstand); padding: var(--m-faq-pad-y) var(--m-faq-pad-x); border: 1px solid var(--m-faq-rand); border-radius: var(--m-faq-radius); background: var(--m-faq-bg); }
.m-kasse__mehr .m-bk__sek > .m-bk__titel { gap: 24px; padding: 0; font-size: var(--m-faq-titel-fs); font-weight: var(--fw-medium); line-height: 1.4; color: var(--m-faq-titel-fg); }
.m-kasse__mehr .m-bk__sek > .m-bk__titel > .m-bk__pfeil { display: none; }
.m-kasse__mehr .m-bk__sek > .m-bk__titel::after {
  content: ""; flex: none; width: var(--m-faq-icon); height: var(--m-faq-icon); margin-left: auto; border-radius: 1px;
  background:
    linear-gradient(var(--m-faq-icon-fg), var(--m-faq-icon-fg)) center / var(--m-faq-strich) 2px no-repeat,
    linear-gradient(var(--m-faq-icon-fg), var(--m-faq-icon-fg)) center / 2px var(--m-faq-strich) no-repeat;
  transition: background-size .2s ease;
}
.m-kasse__mehr .m-bk__sek[open] > .m-bk__titel::after { background-size: var(--m-faq-strich) 2px, 2px 0; }
.m-kasse__mehr .m-bk__sek > .m-bk__inhalt { padding: var(--m-faq-abstand) 0 0; }
.m-kasse__mehr .m-bk__sek > .m-bk__inhalt > .m-bk__rechnung { padding: 0; }
.m-kasse__mehr .m-bk__sek > .m-bk__inhalt .m-bk__z { font-size: var(--m-faq-text-fs); line-height: 1.4; color: var(--m-faq-text-fg); }
.m-kasse__mehr .m-bk__sek > .m-bk__inhalt .m-bk__z--lang b { font-weight: var(--fw-medium); color: var(--m-faq-titel-fg); }
.m-bk__z--lang { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; }
.m-bk__z--lang b { color: var(--m-text); }

/* ══ Schutz-Box + Titelzeile am Desktop (29.09., Design-Auftrag, Canvas „Schutz 2b") ══════
   Basis klein und leise, Zusatz groß wie ein Extra-Paket (lila Rahmen, „Neu für dich",
   Tarif, drei Leistungs-Chips, Beitrag/effektiv). Darunter die Summenzeile mit großer
   Zahl. ~~„Beide Kacheln exakt gleich groß" (Owner 10.09.)~~ — am Desktop widerrufen;
   am Handy bleibt alles wie bisher (die .m-schutz__d-*-Angaben sind dort aus). Der
   ~~Schalter als Segment in der Titelzeile~~ → Option B: kein Schalter, nur Aufdecken. Nur
   Standardmodus der Hauptperson — Bestandsmodus und Partner/Kind unverändert. */
.m-schutz__d-etikett, .m-schutz__d-zeile, .m-schutz__d-marke, .m-schutz__d-tarif,
.m-schutz__d-chips, .m-schutz__d-preis, .m-schutz__d-summe, .m-schutz__d-band, .m-schutz__d-auf { display: none; }

/* Option B (Canvas, 29.09.): KEIN Schalter am Desktop — ~~Segment-Schalter in der
   Titelzeile~~ (am selben Tag verworfen). Die Box folgt allein dem Aufdecken des
   Themas (.m-opt = „Optimierung anzeigen"), einmal aufgedeckt bleibt es so. */
.m-schutz--haupt .m-schutz__kopf { display: none; }
.m-opt .m-schutz--haupt .m-schutz__nur-ist { display: none; }
.m-opt .m-schutz--haupt .m-schutz__nur-soll { display: flex; }
.m-schutz--haupt .m-schutz__unter.m-schutz__nur-ist { display: block; margin-top: 0; font-size: 15px; }
.m-opt .m-schutz--haupt .m-schutz__unter.m-schutz__nur-ist { display: none; }
/* ~~„So empfehlen wir in deiner Situation, sich abzusichern." nach dem Aufdecken (block, 15 px)~~ —
   Owner 29.09.: „kann raus" (2×). 0,5,1 schlägt auch die Schalter-Regel
   `.m-opt .m-schutz:has(.m-schutz__soll:checked) .m-schutz__nur-soll` (0,5,0) — die erste
   Fassung (0,4,0) verlor dagegen, der Satz blieb stehen. */
.k2-detail__panel.m-opt .m-schutz--haupt p.m-schutz__unter.m-schutz__nur-soll { display: none; }

/* Box: Basis klein · Plus · Zusatz groß, darunter die Summenzeile */
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box {
  grid-template-columns: minmax(0, 1fr) var(--m-schutz-plus-d) minmax(0, var(--m-schutz-paket-spalte));
  align-items: center; column-gap: 12px; row-gap: 16px; padding: 0; border: 0;
}
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__rolle { display: none; }
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__feld {
  grid-row: 1; height: auto; align-items: flex-start; justify-content: flex-start;
  gap: 12px; padding: 20px; text-align: left;
}
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__feld--basis { min-height: var(--m-schutz-basis-min-h-desktop); }
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__feld--basis .m-schutz__logo { max-height: 34px; }
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__feld--basis .m-schutz__name { font-weight: var(--fw-regular); font-size: 13.5px; color: var(--m-text-leise); }
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__feld--erw { min-height: var(--m-schutz-paket-min-h-desktop); }
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__feld--leer { align-items: center; justify-content: center; text-align: center; }
.m-schutz__d-etikett { display: block; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--m-text-leise); }
.m-schutz__d-zeile { display: block; margin-top: auto; font-size: 13px; color: var(--m-text-leise); }
.m-schutz__plus { grid-row: 1; justify-self: center; width: var(--m-schutz-plus-d); height: var(--m-schutz-plus-d); border-radius: var(--r-full); background: var(--m-aktion); color: var(--kk-white); font-size: 19px; }

/* Das Zusatzpaket */
.m-schutz__feld--paket { position: relative; overflow: visible; padding: 28px; gap: 14px; border: var(--m-schutz-paket-rand) solid var(--m-aktion); border-radius: var(--m-radius); background: var(--m-optimierung-flaeche); box-shadow: var(--m-schutz-paket-schatten); }
.m-schutz__feld--paket .m-schutz__name { order: -1; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--m-aktion); }
.m-schutz__feld--paket .m-schutz__logo { max-height: 36px; }
.m-schutz__d-marke { display: block; position: absolute; top: -13px; right: 20px; padding: 5px 12px; border-radius: var(--r-full); background: var(--m-aktion); color: var(--kk-white); font-size: 12.5px; font-weight: var(--fw-bold); }
.m-schutz__d-tarif { display: block; font-size: 22px; font-weight: var(--fw-extrabold); color: var(--m-text); }
.m-schutz__d-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-schutz__d-chip { padding: 5px 10px; border-radius: var(--r-full); background: var(--m-flaeche); border: 1px solid var(--m-optimierung-linie); font-size: 13px; color: var(--m-text); }
.m-schutz__d-preis { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--m-optimierung-linie); }
.m-schutz__d-beitrag { font-size: 13px; color: var(--m-text-leise); }
.m-schutz__d-effektiv { font-size: 30px; font-weight: var(--fw-extrabold); color: var(--kk-violet-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-schutz__d-effektiv-mtl { font-size: 13px; font-weight: var(--fw-medium); color: var(--m-text-leise); }

/* Summenzeile: große Zahl + kurzer Satz statt des langen Owner-Satzes */
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__schluss { grid-row: 2; justify-content: flex-start; min-height: 0; margin: 0; padding: 16px 22px; border: 1px solid var(--m-linie); border-radius: var(--m-radius); background: var(--m-flaeche); }
.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__schluss .m-schutz__satz { display: none; }
.m-schutz__d-summe { display: flex; align-items: center; gap: 18px; font-size: 15px; color: var(--m-text-leise); }
.m-schutz__d-summe-wert { font-size: var(--m-schutz-summe-fs); font-weight: var(--fw-extrabold); color: var(--m-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-schutz__d-summe b:not(.m-schutz__d-summe-wert) { color: var(--m-text); }

/* ══ Schutz 6 „Paket als Hero-Karte" (Canvas 29.09., Owner-Wahl) ═════════════════
   NUR Desktop, nur nach dem Aufdecken mit empfohlenem Paket (vorher bleibt Basis + „Aktuell
   nur gesetzlicher Mindestschutz"). Eine Spalte: oben die weiße Hero-Karte mit lila Band
   (Thema, Tarif, Ersparnis), Leistungen als ruhige Liste, Logo rechts; darunter klein
   „auf deiner Basis" + Kasse; darunter die Summenzeile als Text ohne Kasten.
   ~~Schutz 2b: Basis klein links, Paket groß rechts mit lila Rahmen, „Neu für dich", Chips~~ */
/* Owner 29.09. („muss noch oben rein"): Basis und Summe gehören IN die Karte — die ganze
   Box ist die Hero-Karte, Paket/Basis/Summe sind ihre Zeilen. ~~Basis + Summe darunter frei~~ */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) { grid-template-columns: minmax(0, 1fr); row-gap: 0; overflow: hidden; border-radius: var(--m-schutz-hero-radius); background: var(--m-flaeche); box-shadow: var(--m-schutz-hero-schatten); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__plus { display: none; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--paket {
  grid-row: 1; grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "band band" "chips logo"; gap: 0; min-height: 0; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--paket > .m-schutz__name { display: none; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--paket > .m-schutz__logo { grid-area: logo; align-self: center; max-height: 40px; margin: 0 30px 0 20px; }
.m-schutz__d-band { grid-area: band; display: flex; align-items: center; gap: 20px; padding: 24px 30px; background: var(--m-verlauf-band); color: var(--kk-white); }
.m-schutz__d-band-text { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.m-schutz__d-kicker { font-size: 13px; color: var(--m-schutz-hero-leise); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-tarif { font-size: 28px; color: inherit; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-preis { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 2px; width: auto; margin: 0; padding: 0; border: 0; text-align: right; }
.m-schutz__d-preis-titel { font-size: 13px; color: var(--m-schutz-hero-leise); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-effektiv { font-size: 34px; line-height: 1; color: inherit; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-beitrag { font-size: 12.5px; color: var(--m-schutz-hero-leise); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-chips { grid-area: chips; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 22px 30px; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-chip { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px; }
.m-schutz__d-haken { display: flex; flex: none; width: 18px; height: 18px; color: var(--m-gruen); }
.m-schutz__d-haken svg { width: 100%; height: 100%; }
.m-schutz__d-chip--nein { color: var(--m-text-leise); }
.m-schutz__d-chip--nein .m-schutz__d-haken { color: var(--m-linie-stark); }
/* Die Kasse: klein „auf deiner Basis" + Logo + Beitrag */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--basis { grid-row: 2; grid-column: 1; width: auto; flex-direction: row; align-items: center; gap: 12px; min-height: 0; margin: 0 30px; padding: 14px 0; border: 0; border-radius: 0; background: none; }   /* ~~border-top~~ raus (Owner 29.09. „Linie raus") */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--basis .m-schutz__d-etikett, .m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--basis .m-schutz__name { display: none; }
.m-schutz__d-auf { display: inline; font-size: 13px; color: var(--m-text-leise); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--basis .m-schutz__logo { max-height: 22px; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--basis .m-schutz__d-zeile { margin: 0; }
/* Summenzeile als Text, ohne Kasten */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__schluss { grid-row: 3; grid-column: 1; margin: 0; padding: 18px 30px 22px; border: 0; border-top: 1px solid var(--m-linie); border-radius: 0; background: var(--m-optimierung-flaeche); }
/* Owner 29.09. („das kann überall weg"): die Summenzeile „+1,54 € kostet dein ganzes Konzept …"
   steht am Desktop auf keiner Themen-Seite mehr — die Summe trägt das Seitenmenü.
   0,6,0 schlägt die Aufdeck-Regel `.m-opt .m-schutz:has(…) .m-schutz__nur-soll` (0,5,0). */
.k2-detail__panel.m-opt .m-schutz .m-schutz__box > .m-schutz__schluss.m-schutz__nur-soll { display: none; }

/* ══ „Deine Optimierung" als Gutschein am Desktop (29.09., Canvas „Optimierung 3 · spielerisch") ══
   Nur die Karte der Hauptperson (.m-empfehlung .m-bk), nur ≥ 861 px — Kinder-Karten
   und Handy unverändert. Links Tarif, Ernstfall-Bilanz, Leistungs-Chips, „Leistungen
   anzeigen"; rechts der Abriss mit dem effektiven Beitrag hinter einer Perforation;
   das Band „Empfehlung für dein Profil" wird zum schrägen Stempel auf der Kante.
   Aufklappen (Beitrag/Leistungen/Verlauf) bleibt, wie es ist. „Einlösen" im Abriss
   kommt erst mit der Entscheidungs-Variante (sonst zwei Knöpfe für dieselbe Aktion). */
.m-bk__d-risiko, .m-bk__d-vor, .m-bk__d-nach, .m-bk__d-einloesen, .m-gutschein-wahl, .m-bk__d-anzahl, .m-gutschein-wahl__icon, .m-gutschein-wahl__satz, .m-bk__d-auch { display: none; }
.m-kasse__gs { display: none; }   /* Kasse-Gutschein nur am Desktop */
.m-bk__d-zurueck { display: none; }
.m-siegel-eu { display: none; }   /* Europa-Siegel nur am Desktop */
.m-schutz__regel { display: none; }   /* Krankenhaus-Karte (Regelversorgung) nur am Desktop */   /* Rückweg nach dem Übernehmen — nur Desktop, nur erledigt */

.m-opt-karte .m-empfehlung { position: relative; margin-top: 30px; padding: 0; background: none; }
/* Owner 30.09.: „das Label gefällt farblich noch nicht, das sollte auch in der Card sein" —
   ~~gelber schräger Stempel auf der Kante~~ → Figma-Badge Brand (lila; ~~Success grün~~, Owner „lila“), gerade, oben links IN der Karte. */
.m-opt-karte .m-empfehlung__titel {
  position: absolute; z-index: 2; top: 24px; left: 28px; margin: 0; padding: var(--m-badge-pad);
  border: 1px solid var(--m-badge-brand-rand); border-radius: var(--m-badge-radius);
  background: var(--m-badge-brand-bg); color: var(--m-badge-brand-fg);
  font-size: var(--m-badge-fs); font-weight: var(--fw-medium); line-height: 1.4;
}
.m-empfehlung .m-bk { border: 0; border-radius: var(--m-gutschein-radius); box-shadow: var(--m-gutschein-schatten); }
.m-empfehlung .m-bk > .m-baustein__kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) var(--m-gutschein-abriss);
  grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss" "auf auf abriss";
  align-items: center; column-gap: 14px; row-gap: 16px; padding: var(--m-gutschein-kopf-oben) 0 26px 28px;   /* oben Platz fürs Label (~~34px~~) */
}
.m-empfehlung .m-bk .m-baustein__logo { grid-area: logo; width: auto; max-width: 140px; height: 36px; padding: 0; border: 0; }
.m-empfehlung .m-bk .m-baustein__text { grid-area: text; }
.m-empfehlung .m-bk .m-baustein__name { font-size: 22px; font-weight: var(--fw-extrabold); }
.m-bk__d-risiko { grid-area: risiko; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px; border-radius: var(--m-radius); background: var(--m-gruen-flaeche); color: var(--m-gut); font-size: 15px; }
.m-bk__d-risiko-wert { font-size: 28px; font-weight: var(--fw-extrabold); color: var(--m-gruen); line-height: 1.1; }
.m-empfehlung .m-bk__wertung { grid-area: wertung; display: flex; flex-wrap: wrap; gap: 8px; }
.m-empfehlung .m-bk__kachel { flex-direction: row; gap: 6px; padding: 7px 12px; border-radius: 12px; background: var(--m-optimierung-flaeche); }
.m-empfehlung .m-bk__kachel-label { font-size: 13.5px; font-weight: var(--fw-semibold); }
.m-empfehlung .m-bk__kachel-wert { font-size: 13.5px; color: var(--m-text); }
.m-empfehlung .m-bk__auf-knopf { grid-area: auf; justify-self: start; padding: 0; border: 0; background: none; font-size: 14.5px; }
.m-empfehlung .m-bk[open] .m-bk__auf-knopf { background: none; }
.m-empfehlung .m-bk__effektiv {
  grid-area: abriss; align-self: stretch; position: relative; justify-content: center; gap: 8px;
  margin: calc(-1 * var(--m-gutschein-kopf-oben)) 0 -26px 14px; padding: 34px 24px 24px; border-radius: 0;   /* reicht bis zur Oberkante (Owner 30.09.) */
  background: var(--m-gutschein-abriss-bg);   /* ~~gestrichelte Abrisskante + Kerben oben/unten~~ Owner 30.09.: kein Ticket-Effekt, nur farbig getrennt */
}
.m-empfehlung .m-bk__effektiv-titel { font-size: 13px; font-weight: var(--fw-regular); letter-spacing: normal; text-transform: none; color: var(--m-text-leise); }
.m-empfehlung .m-bk__effektiv-wert { font-size: 44px; font-weight: var(--fw-extrabold); color: var(--kk-violet-800); line-height: 1; font-variant-numeric: proportional-nums; letter-spacing: var(--m-gutschein-wert-laufweite); }
.m-empfehlung .m-bk__effektiv-mtl { font-size: 14px; }

/* Angleich an das Canvas-Zeichenbrett (2. Runde 29.09.) */
/* Owner 29.09.: „mehr Abstand nach oben" — das Upgrade setzt sich klar vom Kostenvergleich ab. */
.m-cta-zeile:has(.m-opt-karte) { margin-top: var(--m-upgrade-luft-oben); }
.m-opt-karte:has(.m-bk__d-vor) { position: relative; }
.m-opt-karte:has(.m-bk__d-vor) .m-opt-karte__funkeln,
.m-opt-karte:has(.m-bk__d-vor) .m-opt-karte__unter { display: none; }
.m-opt-karte:has(.m-bk__d-vor) .m-opt-karte__titel { font-size: var(--m-gutschein-titel-fs); }
.m-opt-karte:has(.m-bk__d-vor)::before, .m-opt-karte:has(.m-bk__d-vor)::after {
  content: ""; position: absolute; width: var(--m-gutschein-stern); height: var(--m-gutschein-stern);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.m-opt-karte:has(.m-bk__d-vor)::before { top: 0; left: 6%; background: var(--m-stempel-bg); }
.m-opt-karte:has(.m-bk__d-vor)::after { top: 36px; right: 5%; background: var(--m-aktion); opacity: .5; transform: scale(.75); }
.m-empfehlung .m-bk:has(.m-bk__d-nach) .m-baustein__sub { display: none; }
.m-empfehlung .m-bk__effektiv:has(.m-bk__d-vor) .m-bk__effektiv-titel,
.m-empfehlung .m-bk__effektiv:has(.m-bk__d-vor) .m-bk__effektiv-mtl { display: none; }
.m-bk__d-vor, .m-bk__d-nach { display: block; font-size: 13px; color: var(--m-text-leise); }
.m-bk__d-einloesen {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: var(--m-gutschein-knopf-h); margin-top: 10px; padding: 0 16px;
  border: 0; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis));
  color: var(--kk-white); font-size: var(--m-knopf-fs); font-weight: var(--fw-medium); cursor: pointer;
}
.m-bk__d-einloesen .m-wahl__sub { min-height: 0; font-size: inherit; color: inherit; }
.m-bk__d-einloesen svg { width: var(--m-knopf-icon); height: var(--m-knopf-icon); flex: none; }
.m-bk__d-einloesen.m-wahl--gewaehlt { background: var(--m-gruen); }
/* Owner 05.10.: „Unverbindlich“ mittig UNTER dem Kassen-Knopf „Auswählen →“
   (~~Unterzeile im Knopf, .m-bk__d-einloesen--hinweis~~ — Owner-Nachtrag am selben Tag).
   Verschwindet mit dem Knopf (nach der Wahl / verborgene Entscheidung).
   Knopf + Hinweis stehen in EINER Gruppe .m-bk__d-knopf — die Spalte .m-bk__effektiv verteilt
   freien Platz per space-between auf jede Lücke; so sitzt der Hinweis nah am Knopf (wie
   .af-hinweis in der Antragsstrecke, --sp-1), der Abstand darüber bleibt wie vorher. */
.m-bk__d-knopf { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: 10px; }
.m-bk__d-knopf > .m-bk__d-einloesen { margin-top: 0; }
.m-bk__d-hinweis { display: block; margin-top: var(--sp-1); font-size: 12px; line-height: 1.2; text-align: center; color: var(--m-text-leise); }
.m-bk__d-einloesen.m-wahl--gewaehlt + .m-bk__d-hinweis, .m-entscheidung--verborgen .m-bk__d-knopf { display: none; }
/* Optimierung 3b (Canvas 29.09.): zwei Kacheln — groß „Anderen Tarif wählen", klein
   „Nein, danke" mit dem Ernstfall-Satz. ~~Zwei Knöpfe mittig (Optimierung 3, 29.09.)~~ */
.m-gutschein-wahl { display: grid; grid-template-columns: minmax(0, var(--m-gutschein-kachel-gross)) minmax(0, 1fr); gap: 14px; margin-top: var(--m-gutschein-luft); }
/* Owner 29.09. („nicht so present"): beide Kacheln ruhig — weiß, dünner Rahmen; „Anderen Tarif"
   nur durch die Breite und das hell-lila Icon hervorgehoben. ~~2 px lila Rahmen, lila Fläche~~ */
.m-gutschein-wahl__knopf { display: flex; flex-direction: row; align-items: center; gap: 14px; height: auto; min-height: 0; padding: 16px 20px; border: 1.5px solid var(--m-linie-stark); border-radius: var(--m-gutschein-kachel-radius); background: var(--m-flaeche); color: var(--m-text); text-align: left; }
.m-gutschein-wahl__knopf--leise { padding: 16px 18px; border: 1.5px solid var(--m-linie-stark); background: var(--m-flaeche); color: var(--m-text); }
.m-gutschein-wahl__icon { display: flex; flex: none; align-items: center; justify-content: center; width: var(--m-gutschein-icon-klein); height: var(--m-gutschein-icon-klein); border-radius: 50%; background: var(--m-gutschein-kachel-bg); color: var(--m-aktion); }
.m-gutschein-wahl__knopf--leise .m-gutschein-wahl__icon { width: var(--m-gutschein-icon-klein); height: var(--m-gutschein-icon-klein); background: var(--m-seite-bg); color: var(--m-text-leise); }
.m-gutschein-wahl__svg { width: 18px; height: 18px; }
.m-gutschein-wahl__knopf--leise .m-gutschein-wahl__svg { width: 18px; height: 18px; }
.m-gutschein-wahl__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; }
.m-gutschein-wahl__knopf { justify-content: flex-start; }
.m-gutschein-wahl__knopf .m-wahl__titel { font-size: 16px; font-weight: var(--fw-bold); }
.m-gutschein-wahl__knopf--gross:hover { border-color: var(--m-aktion); }
.m-gutschein-wahl__knopf--leise .m-wahl__titel { font-size: 16px; font-weight: var(--fw-bold); }
.m-gutschein-wahl__satz { display: block; font-size: 13px; color: var(--m-text-leise); }
.m-gutschein-wahl__knopf--leise .m-gutschein-wahl__satz { font-size: 13px; }
.m-gutschein-wahl__knopf .m-wahl__sub { min-height: 0; font-size: 13px; color: var(--m-text-leise); }
.m-gutschein-wahl__knopf:has(.m-gutschein-wahl__satz) .m-wahl__sub { display: none; }

/* Optimierung 3b: Gutschein offen (menue_mobil.js setzt .m-bk--offen-desktop), die Karte
   selbst ist nur noch der Gutschein; darunter „Leistungen" als eigene weiße Zeile zum
   Aufklappen (Tabelle + Vergleich). Beitrag/Beitragsentwicklung/Broschüre/Entfernen
   stehen am Desktop nicht mehr in der Karte — der Beitrag steht im Abriss. */
.m-empfehlung .m-bk--offen-desktop { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.m-empfehlung .m-bk--offen-desktop > .m-baustein__kopf {
  grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss";
  overflow: hidden; border-radius: var(--m-gutschein-radius); cursor: default;
  /* ~~Kerben als ausgeschnittene Löcher (radial-gradient + Maske am Abriss)~~
     Owner 30.09. (später): kein Ticket-Effekt — Karte und Beitragsfeld nur farbig getrennt. */
  background: var(--m-flaeche);
  box-shadow: none; filter: var(--m-gutschein-schatten-filter);
}
/* Owner 30.09.: „Leistungen" gehoert in die Karte — Kopf und Leistungen-Zeile bilden EINE Karte
   (Schatten am Ganzen, Trennlinie statt Luft). ~~eigene weisse Zeile mit Abstand~~ */
.m-empfehlung .m-bk--offen-desktop:has([data-m-bk-leistungen]) { filter: var(--m-gutschein-schatten-filter); }
.m-empfehlung .m-bk--offen-desktop:has([data-m-bk-leistungen]) > .m-baustein__kopf { border-radius: var(--m-gutschein-radius) var(--m-gutschein-radius) 0 0; filter: none; }
.m-empfehlung .m-bk--offen-desktop .m-bk__effektiv::before,
.m-empfehlung .m-bk--offen-desktop .m-bk__effektiv::after { content: none; }
.m-bk--offen-desktop .m-bk__auf-knopf,
.m-bk--offen-desktop .m-bk__sek:not(:has([data-m-bk-leistungen])),
.m-bk--offen-desktop > .m-bk__entfernen { display: none; }
.m-bk--offen-desktop > .m-bk__koerper { margin-top: var(--m-gutschein-luft); padding: 0; }
.m-bk--offen-desktop .m-bk__sek:has([data-m-bk-leistungen]) { margin: 0; border: 1px solid var(--m-linie-stark); border-radius: var(--m-gutschein-kachel-radius); background: var(--m-flaeche); overflow: hidden; }
.m-bk--offen-desktop .m-bk__sek:has([data-m-bk-leistungen]) > .m-bk__titel { gap: 12px; padding: 18px 22px; }
/* Owner 12.10. (Trello Wk5yb7Ns): Luft zwischen Reiterzeile und Vergleich — die lila Spalte stieß an die Reiter */
:is(.m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-leistungen]) > .m-bk__inhalt { padding: var(--m-bk-reiter-luft) 22px 18px; }
.m-empfehlung .m-bk--offen-desktop > .m-bk__koerper:has([data-m-bk-leistungen]) { margin-top: 0; }
.m-empfehlung .m-bk--offen-desktop .m-bk__sek:has([data-m-bk-leistungen]) { border: 0; border-top: 1px solid var(--m-linie); border-radius: 0 0 var(--m-gutschein-radius) var(--m-gutschein-radius); }
.m-bk__d-anzahl { display: inline; margin-left: auto; font-size: 14px; font-weight: var(--fw-medium); color: var(--m-text-leise); }
.m-bk__d-anzahl + .m-bk__pfeil { margin-left: 0; }
/* Owner 18.09.: nach „Übernehmen" lädt kein Knopf zum zweiten Übernehmen ein — auch „Einlösen" nicht. */
.m-entscheidung--verborgen .m-gutschein-wahl, .m-entscheidung--verborgen .m-bk__d-einloesen { display: none; }
/* Kasse (Owner 29.09.): Gutschein statt der Kassen-Karte „Mit deinem Konzept"; deren Inhalte
   (Stärken, Beitragsentwicklung, Zuschüsse) stehen darunter in „Mehr zur <Kasse>". */
/* 0,4,0 — schlägt die Etappe-3-Regel `.k2-detail__panel .m-kasse .m-opt-karte / .m-wahl--mehr` (0,3,0) */
.k2-detail__panel .m-kasse .m-opt-karte.m-kasse__gs { display: block; }
.k2-detail__panel .m-kasse .m-gutschein-wahl .m-wahl--mehr { display: flex; }
.m-entscheidung:has(.m-kasse__gs) > .m-opt-karte:not(.m-kasse__gs) { display: none; }
.m-kasse__gs .m-bk--offen-desktop > .m-baustein__kopf { grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss"; }
/* Die Reihe „Deine Entscheidung" entfällt, sobald der Gutschein entscheidet. */
.m-entscheidung:has(.m-bk__d-einloesen) > .m-liste__titel,
.m-entscheidung:has(.m-bk__d-einloesen) > .m-entscheidung__reihe { display: none; }

/* ══ Kostenvergleich am Desktop (29.09., Canvas „Entwurf 4" + graue Streifen) ═════════════
   Zeilen mit Rechentafel (.m-risiko:has(.m-risiko__d-heute)) werden zur Tabellenzeile:
   Titel | Heute | Mit Optimierung | Unterschied (die Bilanz-Pille), darunter zwei
   Rechnungsbalken (hellgrün Kasse · grün Baustein · grau gestreift du). „Mit
   Optimierung" erst nach dem Aufdecken der Zeile (.m-risiko--opt), davor steht dort
   weiter der Knopf. Zwischenköpfe „Regelmäßig" / „Im Ernstfall" + Legende nur hier.
   Zeilen ohne Zahlen (Hinweise, „wird übernommen") und das Handy bleiben unverändert. */
.m-risiko__d-heute, .m-risiko__d-pfeil, .m-risiko__d-mit, .m-risiko__d-balken, .m-liste__d-legende, .m-liste__d-kopf, .m-liste__d-schalter { display: none; }   /* Owner 30.09. (Mobil-Liste 4): ~~Pfeil fehlte~~ — stand als loses „→" unter jedem Aktuell-Feld */

.m-liste__d-legende { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--m-text-leise); }
.m-liste__d-farbe { width: 14px; height: 14px; border-radius: 4px; margin-left: 10px; }
.m-liste__d-farbe:first-child { margin-left: 0; }
.m-liste__d-farbe--kasse { background: var(--m-balken-kasse); }
.m-liste__d-farbe--baustein { background: var(--m-balken-baustein); }
.m-liste__d-farbe--du { background: var(--m-balken-du); }
/* ── Liste B (Canvas „Kostenvergleich B · ruhige Liste", Owner-Wahl 29.09.) ──────────
   Je Gruppe („Regelmäßig" / „Im Ernstfall") EINE weiße Karte: Kopfzeile oben, Zeilen mit
   feiner Trennlinie, unten rund. Zeile = Titel + ein Balken + „Rechnung …" links, rechts die
   kleine Tabelle heute → mit Optimierung und die Pille. ~~Tabelle in Einzelkarten mit
   Versalien-Köpfen und zwei Balken (Entwurf 4)~~ abgelöst. */
.m-liste__d-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--m-vgl-spalte) var(--m-vgl-pfeil) var(--m-vgl-spalte-mit);
  column-gap: 12px; align-items: baseline; margin: 14px 0 0; padding: 16px 26px 10px;   /* Owner 30.09.: ~~22px~~ oben etwas weniger */
  border-radius: var(--m-radius) var(--m-radius) 0 0; background: var(--m-flaeche);
  font-size: 12.5px; font-weight: var(--fw-medium); color: var(--m-text-leise);
}
.m-liste__d-kopf > span:nth-child(n+2) { text-align: right; white-space: nowrap; }   /* Owner 30.09.: Spaltenköpfe in einer Zeile */
.m-liste__d-kopf-titel { font-size: 18px; font-weight: var(--fw-extrabold); color: var(--m-vgl-regel-fg); }
.m-liste__d-kopf-titel span { font-size: 14px; font-weight: var(--fw-medium); color: var(--m-text-leise); }
.m-liste__d-kopf--ernst .m-liste__d-kopf-titel { color: var(--m-warn); }
.m-liste__d-kopf--text .m-liste__d-kopf-titel { color: var(--m-text); }
/* Finn 28.10.2026: „Beispiele" bei Vorsorge eingeklappt — der Kopf ist der Aufklapper (Pfeil rechts wie
   „Leistungen"/„Beitragsentwicklung" der Baustein-Karte), zu steht er allein als runde Karte. Die Kacheln
   blendet nur der Bildschirm aus (data-m-bsp-zu, menue_mobil.js) — im Druck steht alles. */
.m-liste__d-kopf--klapp { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.m-liste__d-kopf--klapp[aria-expanded="false"] { border-radius: var(--m-radius); padding-bottom: 16px; }
.m-liste__d-kopf-pfeil { flex: none; width: 18px; height: 18px; color: var(--kk-ink-soft); transition: transform .25s ease; }
.m-liste__d-kopf--klapp[aria-expanded="true"] .m-liste__d-kopf-pfeil { transform: rotate(180deg); }
@media screen { .m-liste > .m-risiko[data-m-bsp-zu] { display: none; } }
/* Owner 29.09. „raus": keine Linie hinter „Das musst du selber zahlen". */
.m-liste__titel--selbst::after { content: none; }
/* Owner 29.09. „mehr Abstand nach oben": Luft über „Das musst du selber zahlen" 34 → 72 px. */
.m-liste > .m-liste__titel--selbst:first-child { margin-top: var(--m-selbst-luft-extra); }   /* 0,3,0 schlägt `.m-liste__titel:first-child` */
.m-liste__d-kopf-mit { opacity: 0; transition: opacity .4s ease; }
.m-liste:has(.m-risiko--tafel.m-risiko--opt) .m-liste__d-kopf-mit { opacity: 1; }
.k2-detail__panel.m-opt .m-liste__d-schalter {
  display: inline-flex; align-items: center; margin-left: auto; padding: 9px 18px; border-radius: var(--r-full); cursor: pointer;
  border: 0; background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis)); color: var(--kk-white);
  font: inherit; font-size: 14px; font-weight: var(--fw-bold); box-shadow: var(--m-cta-schatten); transition: background .3s ease, color .3s ease;
}
.k2-detail__panel.m-opt .m-liste__d-schalter[aria-pressed="true"] { background: var(--m-flaeche); color: var(--m-text); box-shadow: none; outline: 1.5px solid var(--m-linie-stark); outline-offset: -1.5px; }
/* Desktop-Direktstart (Owner 29.09.): der Knopf unter der Tabelle bleibt, bis die Tabelle
   aufgedeckt ist, und führt dann zu ihr hinauf (menue_mobil.js zurTabelle). 0,5,0 schlägt
   `.m-opt [data-m-opt-aus]`. */
/* Owner 29.09.: derselbe Knopf wie oben (Pille), näher an der Tabelle, rechtsbündig — und erst
   sichtbar, wenn der Schalter oben aus dem Bild gescrollt ist (menue_mobil.js .m-cta--da). */
.k2-detail__panel.m-opt--direkt .m-cta[data-m-opt-an]:not([hidden]) {
  display: inline-flex; width: auto; min-height: 0; margin: calc(var(--m-gruppe-luft) * -1 + 8px) 0 var(--m-gruppe-luft) auto; padding: 9px 18px;
  border-radius: var(--r-full); box-shadow: none; font-size: 14px;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.k2-detail__panel.m-opt--direkt .m-cta.m-cta--da[data-m-opt-an]:not([hidden]) { opacity: 1; transform: none; pointer-events: auto; }
/* Owner 30.09.: Tabelle passt ins Fenster → kein zweiter Knopf (menue_mobil.js knopfUntenNoetig). */
.k2-detail__panel.m-opt--direkt .m-cta.m-cta--kurz[data-m-opt-an] { display: none; }
.k2-detail__panel.m-opt--direkt .m-cta[data-m-opt-an] .m-cta__pfeil { width: 16px; height: 16px; }
.k2-detail__panel.m-opt--direkt .m-cta-zeile:has(> .m-cta[data-m-opt-an]:not([hidden])) { display: flex; flex-direction: column; }
/* Owner 05.10. (Trello 359): Tarif + Preis im lila Kopf der Paket-Karte erst „Mit Optimierung" — solange der
   Kostenvergleich auf „Heute" steht, nur „Dein Schutz …". Zustand = der Schalter (aria-pressed, menue_mobil.js
   schalterStand: Tipp, Auto-Aufdecken 357, gemerktes Thema). ~~visibility statt display: der Kopf behält seine
   Höhe~~ — Trello 447 (Alex 12.10.): „Heute" war der Kopf so hoch wie mit Optimierung, darunter nur Leerraum.
   Jetzt fallen die Teile heraus, der Kopf ist so groß wie sein Inhalt; den Sprung beim Umschalten fängt das
   Gleiten der Kopfhöhe ab (menue_mobil.js, --m-kopf-gleiten-ms). */
.k2-detail__panel:has([data-m-liste-schalter][aria-pressed="false"]) [data-m-nur-mit-opt] { display: none !important; }   /* Zustand schlägt die Layout-Regeln (Preis-Raster) */

.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) {
  grid-template-columns: minmax(0, 1fr) var(--m-vgl-spalte) var(--m-vgl-pfeil) var(--m-vgl-spalte-mit);
  grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center;
  margin: 0; padding: 14px 26px; border: 0; border-top: 1px solid var(--m-linie-fein); border-radius: 0; background: var(--m-flaeche);
}
.k2-detail__panel .m-risiko--tafel:last-child,
.k2-detail__panel .m-risiko--tafel:has(+ :not(.m-risiko--tafel)) { margin-bottom: 14px; padding-bottom: 20px; border-radius: 0 0 var(--m-radius) var(--m-radius); }
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute)::before,
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute)::after { display: none; }
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__bild,
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__zeile,
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__mit,
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__info { display: none; }
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__titel { grid-column: 1; grid-row: 1; margin: 0; padding: 0; font-size: 15.5px; font-weight: var(--fw-semibold); }
/* 0,6,0 — schlägt die Aufdeck-Regel `.m-opt .m-risiko:has(…):not(.m-risiko--opt) .m-risiko__upgrade` (0,5,0) */
/* ~~Knopf „Optimierung anzeigen" je Zeile~~ — Owner 29.09.: nur EIN Schalter oben an der Liste
   (.m-liste__d-schalter), der auch zurück zum aktuellen Stand führt. */
.k2-detail__panel.m-opt .m-risiko:has(.m-risiko__d-heute):not(.m-risiko--opt) > .m-risiko__upgrade { display: none; }
.m-risiko__d-heute, .m-risiko__d-pfeil, .m-risiko__d-mit { display: block; grid-row: 1 / 3; align-self: center; text-align: right; white-space: nowrap; }
.m-risiko__d-heute { grid-column: 2; font-size: 17px; font-weight: var(--fw-extrabold); color: var(--m-text); transition: font-size .45s ease, color .45s ease, font-weight .45s ease; }
.m-risiko__d-pfeil { grid-column: 3; text-align: center; color: var(--m-text-leise); }
.m-risiko__d-mit { grid-column: 4; font-size: 17px; font-weight: var(--fw-extrabold); color: var(--m-text); }
.m-risiko--opt .m-risiko__d-mit--besser { color: var(--m-gut); transition: color .4s ease var(--m-balken-dauer); }
.m-risiko:not(.m-risiko--opt) .m-risiko__d-mitteil { display: none; }
.m-risiko--opt .m-risiko__d-mitteil { animation: m-einblenden .4s ease both; }
.m-risiko--opt .m-risiko__d-heute { font-size: 14px; font-weight: var(--fw-medium); color: var(--m-text-leise); }
/* Text-Zeilen (ohne Beträge): kleiner, darf umbrechen; Titel über beide Zeilen. */
.m-risiko__d-text { font-size: 13.5px; font-weight: var(--fw-semibold); line-height: 1.3; white-space: normal; }
/* ~~.m-risiko--opt .m-risiko__d-heute.m-risiko__d-text { font-size: 13px; font-weight: medium }~~ — Owner 12.10.
   („Typo gleich groß"): heute und mit Optimierung tragen in Text-Zeilen dieselbe Größe und dasselbe
   Gewicht; nur die Farbe zeigt den Zustand (heute leise, mit Optimierung grün über --besser). */
.m-risiko--opt .m-risiko__d-heute.m-risiko__d-text { font-size: 13.5px; font-weight: var(--fw-semibold); }
/* „—" ohne Wert: gleich groß, aber nicht fett und leise — ein Leer-Zeichen, keine Aussage. */
/* gilt in Text- UND Betrags-Zeilen (Owner 12.10. Punkt 3: „—" als leerer Wert nie fett). */
:is(.m-risiko__d-heute, .m-risiko__d-mit).m-risiko__d-leer { font-weight: var(--fw-regular); color: var(--m-text-leise); }
.k2-detail__panel .m-risiko--tafel:not(:has(.m-risiko__d-balken)) > .m-risiko__titel { grid-row: 1 / 3; }
.m-risiko__d-balken {
  display: flex; flex-direction: column; grid-column: 1; grid-row: 2; gap: 6px;
  font-size: 12px; color: var(--m-text-leise);
}
.m-risiko__d-balken-spur { display: flex; height: var(--m-balken-h); border-radius: var(--r-full); overflow: hidden; background: var(--m-flaeche-still); }
.m-risiko__d-teil { display: block; height: 100%; }
/* EIN Balken für beide Zustände: vorher Kasse + du (heute), beim Aufdecken wächst der
   Baustein-Anteil hinein — der Rest (du) schrumpft von selbst (flex). */
.m-risiko__d-teil--kasse { width: var(--m-k-heute); background: var(--m-balken-kasse); }
.m-risiko__d-teil--baustein { width: 0; background: var(--m-balken-baustein); }
.m-risiko__d-teil--du { flex: 1; background: var(--m-balken-du); }
.m-risiko__d-teil--kasse, .m-risiko__d-teil--baustein { transition: width var(--m-balken-dauer) var(--ease-out); }
.m-risiko--opt .m-risiko__d-teil--kasse { width: var(--m-k-mit); }
.m-risiko--opt .m-risiko__d-teil--baustein { width: var(--m-b-mit); }
/* Einfahren beim Hinscrollen (Owner 29.09.): Startzustand nur, wenn balken_desktop.js
   ihn setzt — ohne JS / „Bewegung reduzieren" stehen die Balken sofort da. */
.m-balken--warten .m-risiko__d-balken-spur { clip-path: inset(0 100% 0 0 round var(--r-full)); }
.m-balken--an .m-risiko__d-balken-spur { animation: m-balken-rein var(--m-balken-dauer) var(--ease-out) both; }
/* ~~.m-risiko__d-rechnung~~ — raus (Owner 29.09.) */
/* „gleiche Leistungen" (Owner 29.09.): hier ändert sich nichts — orange mit „=" statt grünem Haken. */
.m-opt .m-risiko:has(> .m-risiko__upgrade):not(.m-risiko--opt) .m-risiko__upgrade.m-risiko__upgrade--bilanz[data-m-gleich] { border-color: var(--m-gleich-linie); background: var(--m-gleich-flaeche); color: var(--m-gleich-fg); }
@keyframes m-einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .m-risiko__d-teil--kasse, .m-risiko__d-teil--baustein, .m-risiko__d-heute { transition: none; }
  .m-risiko--opt .m-risiko__d-mitteil { animation: none; }
}

/* ══ Menü A „Haus oben als Karte" (Canvas 29.09., Owner-Wahl) ════════════════
   NUR Desktop. Ganz oben die lila Karte „Dein Haus der Gesundheit" (ein Segment je
   Thema, gefüllt = abgesichert), darunter „Deine aktuelle Situation" + Liste, unten
   ein ruhiger Fuß Heute / Mit deinem Konzept + Pille. Der alte Eintrag „Dein Konzept
   auf einen Blick" am Listenende ist am Desktop aus — die Haus-Karte führt dorthin.
   ~~Menü B (Haus als Listeneintrag, dunkle Summen-Karte)~~ widerrufen 29.09.
   Handy unverändert. */
.k2-menue__haus { display: none; }

@media (min-width: 861px) {
  .k2-menue:has(.k2-menue__haus) .k2-menue__kopf { padding-top: 10px; padding-bottom: 6px; border-bottom: 0; }
}
.k2-menue:has(.k2-menue__haus) .k2-menue__eintrag--konzept { display: none; }
/* Owner 30.09. „Haus-Karte dezent 2": keine Karte mehr — eine Zeile (Icon, Name, x/y) +
   feiner Balken, unten eine helle Linie (keine dunklen Linien). ~~Fläche, Rand, Satz~~ */
/* Owner 30.09. (2): „Linie raus, Hintergrund soll sich von unten abheben“ — die Zeile sitzt
   als getöntes Band über die volle Menübreite, ~~helle Linie darunter~~. */
.k2-menue__haus { width: auto; border: 0; border-radius: 0; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; padding: 16px 16px 14px; background: var(--k2-haus-band-bg); transition: background-color .2s ease; color: var(--k2-haus-fg); text-decoration: none; }
.k2-menue__haus:hover .k2-menue__haus-name, .k2-menue__haus--aktiv .k2-menue__haus-name { color: var(--k2-haus-fg); }
.k2-menue__haus:hover { background: var(--k2-haus-band-hover); }
/* Owner 30.09.: Haus-Band unten links/rechts, Menü-Fuß oben links/rechts 15 px rund. */
.k2-seite > .k2-menue .k2-menue__haus { border-radius: 0 0 var(--m-radius) var(--m-radius); }
.k2-seite > .k2-menue .k2-menue__fuss:has(.k2-menue__fuss-vn) { border-radius: var(--m-radius) var(--m-radius) 0 0; }
.k2-menue__haus:focus-visible { outline: 2px solid var(--k2-haus-segment-voll); outline-offset: 2px; border-radius: var(--r-sm); }
.k2-menue__haus-kopf { display: flex; align-items: center; gap: 8px; }
.k2-menue__haus-icon { flex: none; width: 16px; height: 16px; color: var(--k2-haus-leise); }
.k2-menue__haus-name { flex: 1; min-width: 0; white-space: nowrap; font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.25; color: var(--k2-haus-leise); transition: color .2s ease; }
.k2-menue__haus-zahl { flex: none; font-size: 13px; font-weight: var(--fw-bold); color: var(--k2-haus-segment-voll); }
.k2-menue__haus-segmente { display: flex; gap: 2px; }
.k2-menue__haus-segment { flex: 1; height: 3px; border-radius: 3px; background: var(--k2-haus-segment-leer); }
.k2-menue__haus-segment--voll { background: var(--k2-haus-segment-voll); }
.k2-menue__haus-stand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* sticky: beim Laden schiebt die Berater-Leiste das Menü 62 px unter den Bildrand —
   der Fuß klebt am unteren Fensterrand, statt abgeschnitten zu sein. */
.k2-menue__fuss:has(.k2-menue__fuss-vn) { position: sticky; bottom: 0; min-height: 0; padding: 18px 16px 22px; background: var(--k2-menue-fuss-bg); }
.k2-menue__fuss-vn { gap: 8px; }
.k2-menue__summe-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.k2-menue__summe-label { font-size: 14px; color: var(--c-text-muted); }
.k2-menue__summe-heute { font-size: 16px; font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.k2-menue__summe-zeile--konzept .k2-menue__summe-label { font-size: 13px; font-weight: var(--fw-bold); color: var(--c-text); white-space: nowrap; }
.k2-menue__summe-wert { font-size: 18px; font-weight: var(--fw-extrabold); color: var(--c-text); }
.k2-menue__summe-pille { align-self: flex-start; margin-top: 4px; padding: 5px 8px; border-radius: var(--r-sm); background: var(--k2-summe-pille-bg); color: var(--k2-summe-pille-fg); font-size: 12px; font-weight: var(--fw-bold); white-space: nowrap; }
.k2-menue__summe-pille--zwei .k2-menue__summe-mehr { display: block; }
.k2-menue__fuss-vn .k2-menue__fuss-hinweis { font-size: 12px; }
.k2-menue__fuss-vn .k2-menue__fuss-hinweis:empty { display: none; }

@keyframes m-balken-rein {
  from { clip-path: inset(0 100% 0 0 round var(--r-full)); }
  to { clip-path: inset(0 0 0 0 round var(--r-full)); }
}
@media (prefers-reduced-motion: reduce) {
  .m-balken--an .m-risiko__d-balken-spur, .m-balken--warten .m-risiko__d-balken-spur { animation: none; clip-path: none; }
}

/* ══ Haus der Gesundheit als Seite (Canvas „Haus-Seite", Owner 29.09.) ════════════════
   _m_haus.html, erreicht über die Haus-Karte im Menü (alle Breiten). Seit 12.10. (Owner) das 3D-Modell statt
   ~~Dach (Stand), eine Säule je Thema, Fundament = Kasse~~ und ~~als <dialog>~~ eine Fläche im Inhalt. */
/* Owner 12.10. (Folgeauftrag): ~~<dialog> mit Schleier, ✕, Box, Kopf~~ — die Haus-Fläche steht im Inhalt
   wie eine Themen-Seite (data-k2-panel="haus"): Titel, 3D-Szene, „Zur Übersicht“. */
/* ~~`.m-haus:not([hidden])` als Spalte mit Abstand (--m-haus-abstand)~~ und ~~`.m-haus__titel` (--m-haus-titel-fs)~~ —
   Owner 12.10. („vollflächig, ohne Überschrift, ohne Button, ohne Abstand zum Rand"): die Fläche füllt den ganzen
   sichtbaren Inhaltsbereich — am Handy alles unter der Kopfleiste (.k2-mobilkopf), am Desktop rechts neben der
   Seitenleiste unter der Berater-Leiste (@media min-width 861px unten). Fest im Sichtfenster, unter Kopfleiste (40),
   Leiste (44) und Schublade (50/60); die Seite scrollt in diesem Zustand nicht (der Seitenfuß steht nur in den
   Themen-Flächen). Der Renderer (haus17) folgt der Größe der Szene selbst (ResizeObserver). */
.m-haus:not([hidden]) { position: fixed; z-index: var(--m-haus-ebene); inset: var(--k2-mobilkopf-h) 0 0 0; display: block; margin: 0; }
/* scrollbar-gutter: auto — ein reservierter Rollbalken-Streifen (html:has(.k2-seite) { scrollbar-gutter: stable })
   ließe bei klassischen Rollbalken rechts einen leeren Rand neben dem Haus stehen. */
html:has(.m-haus:not([hidden])) { overflow: hidden; scrollbar-gutter: auto; }
/* ~~Dach, Säulen, Fundament, Summe (2D-Grafik, 29.09.–01.10.)~~ — Owner 12.10.: „diese Darstellung kann weg“,
   die Fläche zeigt das 3D-Modell des Hauses (dasselbe Modul wie „Haus der Gesundheit live“, menue_mobil.js). */
.m-haus__szene { position: relative; height: 100%; overflow: hidden; background: var(--m-haus-szene-bg); }   /* ~~Höhe --m-haus-szene-h, Ecken --m-haus-szene-radius~~ (Owner 12.10.: vollflächig) */
.m-haus__szene > canvas { position: absolute; inset: 0; }
/* Ohne WebGL / Modul nicht geladen: statt des Hauses ein ruhiger Satz mit dem Stand. */
.m-haus__ohne-3d { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; text-align: center; font-size: var(--t-text); color: var(--m-text-leise); }
.m-haus__szene.is-3d .m-haus__ohne-3d { display: none; }
.m-haus__laedt { display: block; font-size: var(--t-klein); }
.m-haus__szene.is-fehler .m-haus__laedt { display: none; }
.m-haus__szene:not(.is-fehler) .m-haus__stand { display: none; }
/* ~~Knopf „Zur Übersicht" (.m-haus__weiter, .m-haus__weiter-icon)~~ — Owner 12.10.: raus. */

/* ══ Schriftschnitte nach Figma (Owner 29.09., nur Desktop) ══════════════════════════════
   Knöpfe Medium 500 (Figma „Primary/Secondary/Ghost Button"), Hervorhebungen im Fließtext
   Medium 500. `:where()` hält die Regel für <b> bei 0,0,1 — Klassen mit eigenem Schnitt
   (Beträge, Überschriften) gewinnen weiter. Die Tokens selbst: tokens.css. */
:where(.k2-seite) b, :where(.k2-seite) strong { font-weight: var(--fw-medium); }
.k2-seite .m-cta, .k2-seite .m-wahl__titel, .k2-seite .m-gutschein-wahl__knopf .m-wahl__titel,
.k2-detail__panel.m-opt .m-liste__d-schalter { font-weight: var(--fw-medium); }
@media (min-width: 861px) {
  /* Owner 29.09.: Linie über dem Menü-Fuß raus — zu dunkel; auch die Linie über den Berater-Links. */
  .k2-menue__fuss, .k2-menue__berater { border-top: 0; }
}
/* Owner 29.09.: Schalter „Optimierung anzeigen" ohne Schatten. */
.k2-detail__panel.m-opt .m-liste__d-schalter { box-shadow: none; }
/* „gilt auch für" im Gutschein (Owner 29.09.) */
.m-opt-karte:has(.m-bk__d-auch) > .m-opt-karte__auch { display: none; }
/* ~~.m-empfehlung .m-bk__d-auch { display: flex; gap: 8px; font-size: 14px } + svg 17px~~ — Owner 12.10. („warum sind die
   unterschiedlich groß?"): „Gilt auch für" ist ein Listenpunkt (.m-bk__kachel, Template) und nimmt Schrift, Icon und
   Einzug von den übrigen Haken. Hier nur noch die Gitter-Zelle; der Abstand zur Liste folgt deren Rhythmus
   (Liste gap 10px statt Kopf-row-gap 16px). */
.m-empfehlung .m-bk__d-auch { grid-area: auch; margin-top: -6px; }
.m-empfehlung .m-bk--offen-desktop:has(.m-bk__d-auch) > .m-baustein__kopf { grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss" "auch auch abriss"; }

/* ══ Seitenmenü „Menü aktiv 2" (Owner-Wahl Canvas 29.09., nur Desktop) ═════════════════════
   ~~Hell-lila Fläche + lila Linie links~~ → der aktive Eintrag ist eine weiße Karte mit feinem
   Rand und weichem Schatten, Hover ruhig grau; die Zahlen als Änderungs-Chip „−1,33 € im Monat". */
.k2-seite > .k2-menue .k2-menue__eintrag { margin: 2px 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--m-radius-innen); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.k2-seite > .k2-menue .k2-menue__eintrag:hover { background: var(--k2-menue-hover-bg); text-decoration: none; }
.k2-seite > .k2-menue .k2-menue__eintrag--aktiv, .k2-seite > .k2-menue .k2-menue__eintrag--aktiv:hover { background: var(--k2-menue-aktiv-bg); border-color: var(--k2-menue-aktiv-rand); box-shadow: var(--k2-menue-aktiv-schatten); }
.k2-menue__vn { display: flex; align-items: center; gap: 6px; }
.k2-menue__chip { padding: 2px 8px; border-radius: var(--r-full); background: var(--k2-menue-chip-bg); color: var(--k2-menue-chip-fg); font-size: 12px; font-weight: var(--fw-semibold); }
.k2-menue__chip--weniger { background: var(--m-gut-flaeche); color: var(--m-gut); }
.k2-menue__chip-einheit { font-size: 12px; color: var(--m-text-leise); }
/* Owner 30.09. „/ Monat im Badge mit drin“: Einheit steht im Chip (Template), die Zeile daneben entfällt. */
.k2-seite > .k2-menue .k2-menue__chip-einheit { display: none; }

/* ══ Seitenwechsel weicher (Owner 29.09. „die Animation, wenn man auf eine neue Seite kommt,
   ist nicht gut — bitte smoother", nur Desktop) ═══════════════════════════════════════════
   Die Cross-Document-View-Transition (components.css) blendete die GANZE Seite über —
   Kopfleiste und Seitenmenü flackerten mit. Jetzt stehen Kopfleiste und Menü still, nur
   der Inhalt blendet kurz aus und gleitet sanft ein. „Bewegung reduzieren": keine Bewegung. */
@media (min-width: 861px) {
  body:has(.k2-seite) .app-topbar { view-transition-name: k2-kopf; }
  .k2-seite > .k2-menue { view-transition-name: k2-menue; }
}
.k2-seite .k2-detail { view-transition-name: k2-inhalt; }
@media (min-width: 861px) {
  ::view-transition-old(k2-kopf), ::view-transition-old(k2-menue) { display: none; }
  ::view-transition-new(k2-kopf), ::view-transition-new(k2-menue) { animation: none; }
}
/* Bewegung nur ohne „Bewegung reduzieren" — sonst wechselt der Inhalt ohne Gleiten. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  ::view-transition-group(k2-inhalt) { animation-duration: var(--m-seite-dauer); }
  ::view-transition-old(k2-inhalt) { animation: m-seite-aus var(--m-seite-aus-dauer) ease-out both; }
  ::view-transition-new(k2-inhalt) { animation: m-seite-rein var(--m-seite-dauer) cubic-bezier(.2, .7, .2, 1) var(--m-seite-aus-dauer) both; }
}
@keyframes m-seite-aus { to { opacity: 0; } }
@keyframes m-seite-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ══ Seitenmenü: 3D-Illustrationen statt Fotos (Owner 29.09., Figma „3D-Illustrationen", nur Desktop) ══ */
.k2-menue__illu { display: none; }
/* ~~hell-lila Kachel (Token k2-menue-illu-bg)~~ Owner 30.09.: die 3D-Icons im Menü ohne Hintergrundfläche. */
.k2-seite > .k2-menue .k2-menue__bild:has(.k2-menue__illu) { border: 0; background: none; }
.k2-seite > .k2-menue .k2-menue__bild:has(.k2-menue__illu) :is(.k2-menue__foto, .k2-menue__logo) { display: none; }
.k2-seite > .k2-menue .k2-menue__illu { display: block; width: 90%; height: 90%; object-fit: contain; }

/* ── Laufweiten Desktop (Owner 30.09.: „bitte überall die Laufweiten prüfen, manche wirken
   zu weit"). Große Zahlen: proportionale Ziffern + enger; Überschriften leicht enger;
   Versal-Etiketten halb so weit gesperrt. ~~Tabellen-Zahlen bleiben tabular~~ (30.09. auch proportional, s. u.). ── */
.k2-seite :is(.m-bk__d-risiko-wert, .m-kasse__held-wert, .m-kasse__kenn-wert,
  .m-kasse__vn-balken-wert, .m-schutz__d-effektiv, .m-schutz__d-summe-wert, .k2-menue__summe-wert, .k2-menue__fuss-wert) {
  font-variant-numeric: proportional-nums; letter-spacing: var(--m-lw-zahl);
}
/* em wird in px vererbt — kleine Einheiten („mtl.", „im Jahr") rechnen neu mit eigener Größe. */
.k2-seite :is(.m-bk__d-risiko-wert, .m-kasse__held-wert, .m-kasse__kenn-wert, .m-kasse__vn-balken-wert,
  .m-schutz__d-effektiv, .m-schutz__d-summe-wert, .m-bk__effektiv-wert) * { letter-spacing: var(--m-lw-zahl); }
.k2-seite :is(.m-kopf__titel, .m-liste__titel, .m-schutz__d-tarif, .m-baustein__name) { letter-spacing: var(--m-lw-titel); }   /* ~~Haus-Titel~~ (12.10.) */
.k2-seite :is(.m-schutz__name, .m-schutz__d-etikett) { letter-spacing: var(--m-lw-label); }
/* Owner 30.09.: „Checks müssen oben sein, was nicht dazugehört darunter" */
.k2-seite .m-schutz__d-chip--nein { order: 1; }

/* ── Knöpfe Desktop nach Figma „Buttons" (Owner 30.09.: „hier die Buttons!") ──
   Primary xl (48): große Aktionen · Primary sm (36): Schalter + unterer Knopf (keine Pillen
   mehr) · Secondary: Umriss · Link sm. Nur Form/Größe/Zustände — Texte und Logik unverändert.
   ~~2-px-Weißrand aus Figma~~ bleibt weg (Owner 21.09.). ── */
/* ~~Haus-Knopf „Zur Übersicht" und sein Pfeil~~ in den folgenden Listen — Owner 12.10.: Knopf raus. */
.k2-seite :is(.m-cta, .m-weiter:not([hidden])) {
  min-height: var(--m-knopf-h); padding: var(--m-knopf-pad); gap: var(--m-knopf-gap); border-radius: var(--m-knopf-radius);
  font-size: var(--m-knopf-fs); font-weight: var(--fw-medium); line-height: 1.3; box-shadow: none;
}
.k2-seite .m-cta .m-cta__pfeil { width: var(--m-knopf-icon); height: var(--m-knopf-icon); }
.k2-seite :is(.m-cta, .m-weiter:not([hidden]), .m-bk__d-einloesen:not(.m-wahl--gewaehlt), .m-liste__d-schalter[aria-pressed="false"]):hover {
  background: linear-gradient(90deg, var(--m-knopf-hover-von), var(--m-knopf-hover-bis));
}
.k2-seite :is(.m-cta, .m-weiter:not([hidden]), .m-bk__d-einloesen:not(.m-wahl--gewaehlt), .m-liste__d-schalter[aria-pressed="false"]):active {
  background: var(--m-knopf-gedrueckt); filter: none;
}
/* Primary sm: Schalter „Optimierung anzeigen" und der untere Knopf — Radius 10 statt Pille */
.k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter,
.k2-seite .k2-detail__panel.m-opt--direkt .m-cta[data-m-opt-an]:not([hidden]) {
  min-height: var(--m-knopf-h); padding: var(--m-knopf-klein-pad); gap: var(--m-knopf-klein-gap); border-radius: var(--m-knopf-radius);
  font-size: var(--m-knopf-klein-fs); font-weight: var(--fw-medium); line-height: 1.3;   /* Owner 30.09.: Medium wie die großen Knöpfe, ~~SemiBold (Figma sm)~~ */
}
.k2-seite .k2-detail__panel.m-opt--direkt .m-cta[data-m-opt-an] .m-cta__pfeil { width: var(--m-knopf-icon); height: var(--m-knopf-icon); }
.k2-seite .m-liste__d-schalter .m-liste__d-schalter-pfeil { width: var(--m-knopf-icon); height: var(--m-knopf-icon); flex: none; }
@media (min-width: 861px) {
  /* Kopfleiste der Konzeptseite (Board-Zeile „Zurück / An Kunden senden / Anträge"): Secondary
     im selben Maß — nur auf der Konzeptseite (:has), die App-weiten .btn bleiben. */
  /* Owner 30.09.: „Konzept · Anna Beispiel“ in der Kopfleiste raus (samt Trennstrich davor). */
  :root:has(.k2-seite) .app-topbar :is(.app-topbar__titel, .app-topbar__sep:has(+ .app-topbar__titel)) { display: none; }
  /* Owner 30.09.: feste Höhe (das Seitenmenü klebt darunter), Logo größer, Zurück als Pfeil.
     Finn 16.10.: dieselben Maße für die helle Leiste der Antragsstrecke (`.app-topbar--hell`). */
  :root:has(.k2-seite) .app-topbar, .app-topbar.app-topbar--hell { height: var(--k2-topbar-h); padding-top: 0; padding-bottom: 0; }
  :root:has(.k2-seite) .app-topbar__logo, .app-topbar--hell .app-topbar__logo { height: var(--k2-topbar-logo-h); }
  :root:has(.k2-seite) .app-topbar .btn.btn-icon { width: var(--m-knopf-kopf-h); padding: 0; }
  :root:has(.k2-seite) .app-topbar .btn, .app-topbar--hell .btn { min-height: var(--m-knopf-kopf-h); padding: var(--m-knopf-kopf-pad); gap: var(--m-knopf-gap); border-radius: var(--m-knopf-radius); font-size: var(--m-knopf-kopf-fs); font-weight: var(--fw-medium); }
}
/* „Aktuellen Stand anzeigen" (gedrückt) = Secondary sm */
.k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter[aria-pressed="true"] {
  background: var(--m-flaeche); color: var(--m-knopf-sek-fg); outline: 1px solid var(--m-knopf-sek-rand); outline-offset: -1px;
}
.k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter[aria-pressed="true"]:hover { background: var(--m-knopf-sek-hover-bg); color: var(--m-knopf-sek-hover-fg); }
/* Link sm */
.k2-seite .m-textlink:not(.m-weiter) { font-size: var(--m-knopf-fs); font-weight: var(--fw-medium); line-height: 1.3; color: var(--m-knopf-sek-fg); }
.k2-seite .m-textlink:not(.m-weiter):hover { color: var(--m-knopf-sek-hover-fg); text-decoration: none; }
/* Secondary sm: „Andere Kasse wählen" (vorher 1,5-px-Rand) */
.k2-seite .m-kasse__andere { min-height: var(--m-knopf-h); gap: var(--m-knopf-gap); font-size: var(--m-knopf-fs); font-weight: var(--fw-medium); padding: var(--m-knopf-klein-pad); border: 1px solid var(--m-knopf-sek-rand); border-radius: var(--m-knopf-radius); color: var(--m-knopf-sek-fg); line-height: 1.3; }
.k2-seite .m-kasse__andere:hover { background: var(--m-knopf-sek-hover-bg); color: var(--m-knopf-sek-hover-fg); }
/* Owner 30.09.: „Linie global raus" — keine Linie mehr neben den Abschnitts-Überschriften. */
.k2-seite .m-liste__titel::after { content: none; }
/* Owner 30.09.: „reduzieren zu einer Headline“ — die Unterzeile unter „Das musst du selber zahlen“ ist am Desktop aus. */
.k2-seite .m-liste__titel--selbst + .m-liste__unter { display: none; }
/* Owner 30.09.: „Icon raus“ — kein Emoji vor den Abschnitts-Überschriften am Desktop. */
.k2-seite .m-liste__emoji { display: none; }
/* Owner 30.09.: „Laufweite stimmt nicht“ in der Kostentabelle — ~~tabular-nums~~ machte die Beträge weit; rechtsbündig bleibt die Spalte trotzdem ruhig. */
.k2-seite :is(.m-risiko__d-heute, .m-risiko__d-mit) { font-variant-numeric: proportional-nums; letter-spacing: var(--m-lw-zahl); }
/* Owner 30.09.: „Schriftschnitt wirkt zu dick“ — macOS zeichnet helle Schrift auf dunklen
   Knöpfen fetter als Figma; Graustufen-Glättung wie in Figma (gilt für die ganze Seite). */
.k2-seite { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── „Bereiche unter der Kasse" (Owner 30.09., Canvas „Kasse-Kategorien") — nur Desktop,
   nur Kassenseite: Überschrift + je Thema eine Kachel im 2er-Raster. ── */
.m-kasse__bereiche:not([hidden]) { display: flex; flex-direction: column; gap: 4px; margin: var(--m-upgrade-luft-oben) 0 var(--m-gruppe-luft); }   /* Owner 30.09.: mehr Abstand nach oben */
.m-kasse__bereiche-titel { text-align: center; margin: 0; font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: var(--m-lw-titel); color: var(--m-text); }
/* Owner 30.09.: geringe Satzbreite, mittig — der Satz lief über die ganze Spalte. */
.m-kasse__bereiche-unter { text-align: center; max-width: var(--m-unterzeile-max); margin: 0 auto 16px; font-size: 15px; color: var(--m-text-leise); }
/* Slider (Owner 30.09.): eine Zeile, drei Karten sichtbar, Scroll-Snap; Punkte darunter. */
.m-kasse__bereiche-slider { position: relative; }
.m-kasse__bereiche-raster { display: flex; gap: var(--m-bereich-abstand); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; margin: -2px; }
.m-kasse__bereiche-raster::-webkit-scrollbar { display: none; }
.m-kasse__bereiche-raster { cursor: grab; }
.m-kasse__bereiche-raster--zieht { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.m-kasse__bereiche-raster--zieht .m-kasse__bereich { pointer-events: none; }
.m-kasse__bereiche-raster > .m-kasse__bereich { flex: 0 0 calc((100% - 2 * var(--m-bereich-abstand)) / 3); scroll-snap-align: start; }
/* ~~Pfeile außen~~ (Owner 30.09. „ohne Pfeil, mit Paginierung") → Punkte darunter. */
.m-kasse__bereiche-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.m-kasse__bereiche-punkt { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--m-bereich-punkt); cursor: pointer; transition: width .25s ease, background .25s ease; }
.m-kasse__bereiche-punkt--an { width: 24px; background: var(--m-bereich-punkt-an); }
/* Owner 30.09. (Figma „Step by step"): Karten hell mit weißem Rand, 3D-Icon oben, alles mittig. */
.m-kasse__bereiche .m-kasse__bereich { align-items: center; gap: 8px; padding: 20px 16px 18px; border: 1px solid var(--m-bereich-rand); background: var(--m-bereich-bg); text-align: center; }
.m-kasse__bereich-icon { width: var(--m-bereich-icon); height: var(--m-bereich-icon); object-fit: contain; }
.m-kasse__bereiche .m-kasse__bereich-kopf { flex-direction: column; justify-content: center; gap: 8px; }
.m-kasse__bereich { display: flex; flex-direction: column; gap: 6px; padding: var(--m-bereich-pad); border-radius: var(--m-bereich-radius); background: var(--m-flaeche); color: var(--m-text); text-decoration: none; transition: box-shadow .2s ease; }
.m-kasse__bereich:hover { text-decoration: none; box-shadow: var(--k2-menue-aktiv-schatten); }
.m-kasse__bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-kasse__bereich-name { font-size: 16px; font-weight: var(--fw-semibold); }
.m-kasse__bereich-pille { flex: none; padding: 4px 10px; border-radius: var(--r-full); background: var(--m-bereich-leer-bg); color: var(--m-bereich-leer-fg); font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; }
.m-kasse__bereich-pille--plus { background: var(--m-bereich-plus-bg); color: var(--m-bereich-plus-fg); }
.m-kasse__bereich-heute { font-size: 13.5px; color: var(--m-text-leise); }
.m-kasse__bereich-konzept { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--m-text); }

/* ── Badges nach Figma (Owner 30.09.: „hier sind unsere Labels/Badges, bitte anpassen") —
   nur Desktop, nur Form/Farbe: Bilanz in der Tabelle, Menü-Chips, Gutschein-Chips,
   Bereiche-Status. Radius 5 statt Pille, 1 px Rand, Regular. ── */
/* ~~Bilanz in der Tabelle (.m-risiko__bilanz, --gleich, -icon)~~ — Owner 12.10. („Entferne die Badges überall"). */
.k2-seite > .k2-menue .k2-menue__chip {
  padding: var(--m-badge-pad-sm); border: 1px solid var(--m-badge-grau-rand); border-radius: var(--m-badge-radius);
  background: var(--m-badge-grau-bg); color: var(--m-badge-grau-fg); font-size: var(--m-badge-fs-sm); font-weight: var(--fw-regular);
}
.k2-seite > .k2-menue .k2-menue__chip--weniger { border-color: var(--m-badge-gut-rand); background: var(--m-badge-gut-bg); color: var(--m-badge-gut-fg); }
/* Owner 30.09.: „Laufweite wirkt groß“ — Chips und Summen im Menü mit proportionalen Ziffern, leicht enger. */
.k2-seite > .k2-menue :is(.k2-menue__chip, .k2-menue__summe-pille, .k2-menue__summe-heute, .k2-menue__haus-zahl) { font-variant-numeric: proportional-nums; letter-spacing: -0.01em; }
.k2-seite .m-empfehlung .m-bk__kachel {
  gap: var(--m-badge-gap); padding: var(--m-badge-pad); border: 1px solid var(--m-badge-brand-rand); border-radius: var(--m-badge-radius); background: var(--m-badge-brand-bg);
}
.k2-seite .m-empfehlung .m-bk__kachel-label { font-size: var(--m-badge-fs); font-weight: var(--fw-medium); color: var(--m-text); }
.k2-seite .m-empfehlung .m-bk__kachel-wert { font-size: var(--m-badge-fs); color: var(--m-badge-brand-fg); }
.k2-seite .m-kasse__bereich-pille {
  padding: var(--m-badge-pad-sm); border: 1px solid var(--m-badge-grau-rand); border-radius: var(--m-badge-radius);
  background: var(--m-badge-grau-bg); color: var(--m-badge-grau-fg); font-size: var(--m-badge-fs-sm); font-weight: var(--fw-regular);
}
/* Owner 30.09.: alle Bereichs-Status gleich — ~~„in Lila bei allen“ (Brand)~~ → „grau“ (Badge Gray). */
/* Summe im Menü-Fuß als Badge (Owner 30.09. „Tag in unserem Design anpassen"): Brand, beim Sparen Success. */
.k2-seite > .k2-menue .k2-menue__summe-pille {
  padding: var(--m-badge-pad-sm); border: 1px solid var(--m-badge-brand-rand); border-radius: var(--m-badge-radius);
  background: var(--m-badge-brand-bg); color: var(--m-badge-brand-fg); font-size: var(--m-badge-fs-sm); font-weight: var(--fw-regular);
}
.k2-seite > .k2-menue .k2-menue__summe-pille--spart { border-color: var(--m-badge-gut-rand); background: var(--m-badge-gut-bg); color: var(--m-badge-gut-fg); }

/* ── „Leistungen 1 · ruhige Tabelle, Symbole statt bunter Felder" (Owner 30.09.) — nur Desktop,
   Leistungen im Gutschein: breite Label-Spalte ohne Silbentrennung, Zellen als Text mit
   Lucide-Symbol (Haken = Leistung, Minus = keine/weniger), Baustein-Spalte hell getönt.
   Farbe kommt weiter aus den Zell-Klassen (--gruen/--voll/--gelb/--rot/--neutral), Klick
   auf eine Zelle klappt wie bisher die Erklärung auf. ── */
.k2-seite .m-empfehlung .m-bk__cmp { gap: 0; --m-bk-label: var(--m-lt-label); }
.k2-seite .m-empfehlung .m-bk__koepfe, .k2-seite .m-empfehlung .m-bk__zeile { gap: 0; align-items: stretch; }
.k2-seite .m-empfehlung .m-bk__koepfe { align-items: end; padding: 0; margin: 0; }
.k2-seite .m-empfehlung .m-bk__kopf { border: 0; border-radius: 0; background: none; padding: 12px 16px; }
.k2-seite .m-empfehlung .m-bk__kopf--kasse { justify-items: start; text-align: left; }
.k2-seite .m-empfehlung .m-bk__kopf--kasse .m-bk__name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--m-text-leise); }
/* Tarif-Spalten getönt in der Farbe ihrer Kachel (Owner 30.09. „hier dann auch der blaue Hintergrund“):
   1 = lila, 2 = blau, 3 = grau — an der Klasse m-bk__f<n> statt ~~:nth-child(3)~~ (rückt mit, wenn die Kasse aus der Tabelle fällt). */
.k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf--mein { border-radius: var(--m-lt-radius) var(--m-lt-radius) 0 0; }
.k2-seite .m-empfehlung .m-bk__f1:is(.m-bk__kopf, .m-bk__zelle) { background: var(--m-lt-spalte-bg); }
.k2-seite .m-empfehlung .m-bk__f2:is(.m-bk__kopf, .m-bk__zelle) { background: var(--m-blau-flaeche); }
.k2-seite .m-empfehlung .m-bk__f3:is(.m-bk__kopf, .m-bk__zelle) { background: var(--m-flaeche-still); }
/* Owner „bei lila und blau die Ecken 15 px abgerundet, aber nur unten“: letzte Datenzeile (die Fußzeile mit „Tarif wechseln“ zählt nicht). */
.k2-seite .m-empfehlung .m-bk__zeile:nth-last-child(1 of .m-bk__zeile:not(.m-bk__fuss-zeile)) > .m-bk__zelle:is(.m-bk__f1, .m-bk__f2, .m-bk__f3) {
  border-radius: 0 0 var(--m-radius) var(--m-radius);
}
.k2-seite .m-empfehlung .m-bk__kopf--mein .m-bk__name { font-size: 14px; font-weight: var(--fw-semibold); }
.k2-seite .m-empfehlung .m-bk__kopf--mein .m-bk__sub { font-size: 13px; font-weight: var(--fw-regular); color: var(--m-text-leise); }
.k2-seite .m-empfehlung .m-bk__zeile { padding-top: 0; border-top: 0; }
/* „Leistung glattziehen“ (Owner 30.09.): „+ weitere Bausteine vergleichen“ riss die getönte
   Spalte zwischen Kopf und erster Zeile auf — am Desktop unter die Tabelle, ~~rechtsbündig~~ mittig (Owner „mittig platzieren“). */
.k2-seite .m-empfehlung .m-bk__plus-zeile { order: 1; margin: 0; padding: 24px 0 0; justify-self: stretch; text-align: center; color: var(--m-aktion); font-size: var(--t-klein); }
.k2-seite .m-empfehlung .m-bk__label { padding: 12px 0; border-top: 1px solid var(--m-linie-fein); font-size: var(--m-lt-fs); font-weight: var(--fw-medium); }
.k2-seite .m-empfehlung .m-bk__label > span:first-child { hyphens: manual; -webkit-hyphens: manual; }
.k2-seite .m-empfehlung .m-bk__zelle {
  grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: var(--m-lt-pad); border: 0; border-top: 1px solid var(--m-linie-fein); border-radius: 0;
  background: none; color: var(--m-text); font-size: var(--m-lt-fs); text-align: left;
}
.k2-seite .m-empfehlung .m-bk__zelle:hover .m-bk__wert { text-decoration: underline dotted; text-underline-offset: 3px; }
.k2-seite .m-empfehlung .m-bk__zelle .m-bk__pfeil { display: none; }
.k2-seite .m-empfehlung .m-bk__zelle::before {
  content: ""; width: var(--m-lt-icon); height: var(--m-lt-icon); background: currentColor;
  -webkit-mask: var(--m-lucide-kreis-minus) center / contain no-repeat; mask: var(--m-lucide-kreis-minus) center / contain no-repeat;
}
.k2-seite .m-empfehlung :is(.m-bk__zelle--gruen, .m-bk__zelle--voll, .m-bk__zelle--gelb)::before {
  -webkit-mask-image: var(--m-lucide-kreis-haken); mask-image: var(--m-lucide-kreis-haken);
}
.k2-seite .m-empfehlung :is(.m-bk__zelle--gruen, .m-bk__zelle--voll) { color: var(--m-gut); font-weight: var(--fw-semibold); }
.k2-seite .m-empfehlung .m-bk__zelle--gelb { color: var(--m-gut); }
.k2-seite .m-empfehlung :is(.m-bk__zelle--rot, .m-bk__zelle--neutral) { color: var(--m-text-leise); }
.k2-seite .m-empfehlung .m-bk__zelle--neutral::before { visibility: hidden; }
.k2-seite .m-empfehlung .m-bk__zelle--an { box-shadow: inset 0 0 0 1px var(--m-aktion); }
/* Owner 30.09.: „Icon aus der Figma-Datei übernehmen“ — Lucide „info“ statt Fragezeichen im Doppelkreis. */
.k2-seite .m-empfehlung .m-bk__frage { width: 16px; height: 16px; border: 0; border-radius: 0; background: var(--m-text-leise);
  -webkit-mask: var(--m-lucide-info) center / contain no-repeat; mask: var(--m-lucide-info) center / contain no-repeat; }
.k2-seite .m-empfehlung .m-bk__frage .m-icon__svg { display: none; }

/* ── ~~„Balken 1 · zwei Spuren" (Owner 30.09.): oben heute grau, darunter mit Optimierung grün~~ —
   abgelöst 12.10. durch „Ein Streifen je Behandlung" (Owner 12.10., Trello 80foZs4H, Variante B ohne
   Fähnchen). EIN Streifen je Zeile über die volle Zeilenbreite unter Titel und Beträgen, Stücke mit
   Lücken: helles Lila = übernimmt die Kasse, Grün mit weichem Schatten = übernimmt dein Baustein,
   Grau = zahlst du selbst (Rest). „Heute": Kasse (+ Altvertrag) + du; „Mit Optimierung": Kasse +
   Baustein + du. Breiten aus denselben Variablen wie bisher (--m-k-/--m-b-heute/-mit). ── */
.k2-seite .m-risiko__d-balken { display: block; }
.k2-seite .m-risiko__d-balken-spur { gap: var(--m-streifen-luecke); height: var(--m-streifen-h); overflow: visible; border-radius: 0; background: none; }
.k2-seite .m-risiko__d-balken-spur > .m-risiko__d-teil {
  display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; padding: var(--m-streifen-pad); border-radius: var(--m-streifen-radius);
  font-size: var(--m-streifen-fs); font-weight: var(--fw-bold); line-height: var(--m-streifen-h); letter-spacing: .01em;
}
.k2-seite .m-risiko__d-balken-spur > .m-risiko__d-teil--kasse { background: var(--m-streifen-kasse); color: var(--m-streifen-kasse-fg); }
.k2-seite .m-risiko__d-balken-spur > .m-risiko__d-teil--baustein { background: var(--m-streifen-baustein); color: var(--m-streifen-baustein-fg); box-shadow: var(--m-streifen-baustein-schatten); }
.k2-seite .m-risiko__d-balken-spur > .m-risiko__d-teil--du { flex: 1 1 0; background: var(--m-streifen-du); color: var(--m-streifen-du-fg); }
/* Heute trägt auch ein Altvertrag (Karte 388, --m-b-heute) — ohne Vertrag ist er 0 und das Stück fällt weg. */
.k2-seite .m-risiko:not(.m-risiko--opt) .m-risiko__d-balken-spur > .m-risiko__d-teil--baustein { width: var(--m-b-heute); }
/* Leere Stücke fallen ganz weg — sonst bliebe ihre Lücke als Doppel-Abstand stehen. */
.k2-seite .m-risiko:not(.m-risiko--opt) .m-risiko__d-teil--leer-heute,
.k2-seite .m-risiko--opt .m-risiko__d-teil--leer-mit,
.k2-seite .m-risiko:not(.m-risiko--opt) .m-risiko__d-l--mit,
.k2-seite .m-risiko--opt .m-risiko__d-l--heute { display: none; }
/* Ohne belegte Deckung heute (Karte 388, KERNREGEL): in „Heute" kein Streifen — der Platz bleibt (kein Layoutshift). */
/* Owner 12.10. („ergibt so keinen Sinn"): ohne belegten Betrag (heute ODER mit) fällt der Streifen in
   beiden Zuständen ganz weg — keine leere Fläche, kein Sprung beim Umschalten. ~~visibility: hidden~~ */
.k2-seite .m-risiko__d-balken--luecke { display: none !important; }   /* Spalte „mit" zeigt „—" → Streifen auch leer */
/* Owner 12.10. (Thema ohne Baustein, _m_kachel.html): Heute-Streifen wie mit Baustein; in „Mit Optimierung" („—")
   unsichtbar an seinem Platz — kein Sprung beim Umschalten. */
.k2-seite .m-risiko--opt .m-risiko__d-balken--nur-heute { visibility: hidden; }
/* Beschriftung im Stück: „Kasse 300 €". Passt sie nicht, fällt erst das Wort, dann der Betrag weg — ohne
   Rechnen: Zeilen-Umbruch rückwärts (row-reverse + wrap-reverse), sichtbar ist nur die erste Zeile; was nicht
   passt, bricht in die abgeschnittene zweite. Der leere Anker vorn sorgt dafür, dass auch ein zu breiter
   Betrag umbricht statt angeschnitten stehen zu bleiben. Kasse/Baustein links, du rechtsbündig. */
.m-risiko__d-l {
  display: flex; flex-flow: row-reverse wrap-reverse; align-content: flex-start; justify-content: flex-end;
  height: 100%; overflow: hidden; white-space: nowrap;
}
.m-risiko__d-teil--du > .m-risiko__d-l { justify-content: flex-start; }
.m-risiko__d-l > span { flex: none; }
.m-risiko__d-l-wort { margin-right: .3em; }   /* Abstand nur am Wort — ein Abstand am Anker kostete dem Betrag Platz */
.m-risiko__d-l-anker { width: 0; height: 100%; }   /* volle Höhe: sonst ist die erste Zeile 0 px hoch und die umgebrochene rutscht ins Bild */
.k2-seite .m-liste__d-leg { display: inline-flex; align-items: center; gap: 8px; }
/* drei Einträge brechen am Handy um — Abstand als column-gap statt ~~margin-left 12 px am Folge-Eintrag~~ (rückte die 2. Zeile ein) */
.k2-seite .m-liste__d-legende { column-gap: 18px; }
.k2-seite .m-liste__d-legende .m-liste__d-farbe { width: 18px; height: 10px; margin-left: 0; border-radius: var(--m-streifen-leg-radius); }
.k2-seite .m-liste__d-farbe--kasse { background: var(--m-streifen-kasse); }
.k2-seite .m-liste__d-farbe--baustein { background: var(--m-streifen-baustein); }
.k2-seite .m-liste__d-farbe--du { background: var(--m-streifen-du); }

/* ── Typo-Skala (Owner 30.09.: Canvas „Typo-Hierarchie · Zahnarzt-Seite“ umsetzen) — nur Desktop,
   Inhalt der Konzeptseite (Menü unverändert). Jede Schrift fällt auf eine der 9 Stufen --t-*.
   Präfix `.k2-seite:not(#typo)`: hebt die Spezifität über die gewachsenen Einzelregeln
   (bis 0,5,1), ohne !important — eine Stelle für die ganze Hierarchie. ── */
/* Zahl groß 40 */
.k2-seite:not(#typo) :is(.m-bk__effektiv-wert, .m-schutz__d-effektiv, .m-kasse__held-wert) { font-size: var(--t-zahl-gross); line-height: 1; }
/* H1 36 */
.k2-seite:not(#typo) .m-kopf__titel { font-size: var(--t-h1); line-height: 1.15; }
/* Zahl mittel 28 */
.k2-seite:not(#typo) :is(.m-bk__d-risiko-wert, .m-kasse__kenn-wert) { font-size: var(--t-zahl-mittel); }
/* H2 24 */
.k2-seite:not(#typo) :is(.m-liste__titel, .m-schutz__d-tarif, .m-kasse__bereiche-titel) { font-size: var(--t-h2); }
/* H3 20 */
.k2-seite:not(#typo) :is(.m-empfehlung .m-baustein__name, .m-kasse__bereich-name) { font-size: var(--t-h3); }
/* H4 18 */
.k2-seite:not(#typo) :is(.m-liste__d-kopf-titel, .m-empfehlung .m-bk__sek > .m-bk__titel, .m-bk__chips-ueber) { font-size: var(--t-h4); }
/* Text 16 */
.k2-seite:not(#typo) :is(.m-bk__d-risiko, .m-risiko__titel, .m-risiko__d-mit, .m-risiko__d-text, .m-schutz__d-chip, .m-wahl__titel,
  .m-bk__label, .m-bk__zelle, .m-kasse__punkt, .m-kasse__mehr .m-bk__titel, .m-kasse__mehr .m-bk__z) { font-size: var(--t-text); }
/* Klein 14 */
.k2-seite:not(#typo) :is(.m-risiko__d-heute, .m-liste__d-kopf, .m-liste__d-kopf-titel span, .m-liste__d-legende,
  .m-schutz__d-kicker, .m-schutz__d-preis-titel, .m-schutz__d-auf, .m-schutz__d-zeile, .m-empfehlung__titel,
  .m-bk__effektiv-titel, .m-bk__d-vor, .m-bk__kachel-label, .m-bk__kachel-wert, .m-bk__kopf .m-bk__name, .m-bk__plus-zeile,
  .m-bk__chip-name, .m-bk__chip-preis, .m-bk__mehr, .m-gutschein-wahl__satz, .m-kasse__bereich-heute, .m-kasse__bereich-konzept,
  .m-kasse__bereiche-unter, .m-liste__unter) { font-size: var(--t-klein); }
/* Owner 12.10.: Text-Zeilen — „heute" wie „mit Optimierung" auf Text 16 (sonst greift oben Klein 14). */
.k2-seite:not(#typo) .m-risiko__d-heute.m-risiko__d-text { font-size: var(--t-text); }
@media (min-width: 861px) {
  /* Knöpfe bleiben bei ihrem eigenen Maß (--m-knopf-fs 15). */
  /* Fuß 12 — nichts kleiner */
  .k2-seite:not(#typo) :is(.m-schutz__d-beitrag, .m-bk__d-nach, .m-bk__kopf--mein .m-bk__sub, .m-bk__chip-sub, .m-bk__chips-titel,
    .m-bk__chips-hinweis, .m-bk__empf, .m-seitenfuss__copy, .m-seitenfuss__link, .m-kasse__bereich-pille) { font-size: var(--t-fuss); }
}

/* ── „Kasse-Kopf 5 · wie die Themen-Seiten: Hero-Karte mit lila Band" (Owner 30.09.) — nur
   Desktop, nach dem Aufdecken. Die Karte ersetzt oben Bildkasten, „Wechsel empfohlen",
   Ersparnis-Held, Beitragsvergleich und die Bühne „Warum der Wechsel passt" (Gründe stehen
   jetzt in der Karte). Vor dem Aufdecken bleibt der Kopf wie bisher. ── */
.m-kasse__hero:not([hidden]) { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin: 0 12px var(--m-gruppe-luft); }
/* Owner 30.09. („noch ein Bild für Krankenkasse"): ~~Titel + Siegel in einer Zeile ohne Bild~~ —
   mit Karte wie auf den Themen-Seiten: Titel oben, Bildband darunter, Siegel auf dem Bild;
   das Bildband zeigt den Wechsel (heutiges Logo → neues Logo + Illustration). */
.m-kasse:has(.m-kasse__hero:not([hidden])) .m-kasse__kopf .m-kopf__zeile .m-kopf__titel { grid-row: 1; margin: 0 0 var(--m-kopf-luft); }
.m-kasse:has(.m-kasse__hero:not([hidden])) .m-kasse__kopf :is(.m-kopf__bild, .m-siegel) { grid-row: 2; }
.m-kasse:has(.m-kasse__hero:not([hidden])) .m-kasse__kopf { margin-bottom: var(--m-gruppe-luft); }
.m-kasse__kopf-pfeil:not([hidden]) { display: flex; width: 34px; height: 34px; color: var(--m-aktion); }
.m-kasse__kopf-pfeil svg { width: 100%; height: 100%; }
.m-kasse__kopf-logo:not(.m-kasse__kopf-logo--neu):has(~ .m-kasse__kopf-logo--neu:not([hidden])) { opacity: .6; filter: grayscale(1); box-shadow: none; }
.m-kasse__kopf-logo--neu[hidden] { display: none; }
/* Stockfoto als Kopfbild (Owner 30.09. „ich brauche da ein Stockbild"): Foto füllt das Band;
   Logos in EINER hellen Leiste unten links (Canvas „Foto 1") — ~~drei einzelne Kacheln~~. */
.m-kopf__bild.m-kasse__kopf-bild:has(.m-kasse__kopf-foto) { position: relative; overflow: hidden; justify-content: flex-start; align-items: flex-end; padding: 20px; background: var(--m-flaeche-still); }
.m-kasse__kopf-foto { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.m-kasse__kopf-bild:has(.m-kasse__kopf-foto) .m-kasse__kopf-illu { display: none; }
.m-kasse__kopf-leiste { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 18px; border-radius: var(--m-knopf-radius); background: color-mix(in srgb, var(--m-flaeche) 92%, transparent); box-shadow: var(--k2-menue-aktiv-schatten); }
.m-kasse__kopf-leiste-label:not([hidden]) { font-size: var(--t-klein); font-weight: var(--fw-medium); color: var(--m-text-leise); }
.m-kasse__kopf-leiste .m-kasse__kopf-logo { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.m-kasse__kopf-leiste .m-kasse__kopf-logo img { height: 26px; width: auto; }
.m-kasse__kopf-leiste .m-kasse__kopf-logo:not(.m-kasse__kopf-logo--neu):has(~ .m-kasse__kopf-logo--neu:not([hidden])) { opacity: 1; filter: none; }   /* Owner 30.09. „farbiges Logo“ — ~~grau, .5~~ */
.m-kasse__kopf-leiste .m-kasse__kopf-logo:not(.m-kasse__kopf-logo--neu):has(~ .m-kasse__kopf-logo--neu:not([hidden])) img { height: 20px; }
.m-kasse__kopf-leiste .m-kasse__kopf-pfeil:not([hidden]) { width: 18px; height: 18px; padding: 0; background: none; color: var(--m-aktion); }
.m-kasse:has(.m-kasse__hero:not([hidden])) :is(.m-kasse__unter, .m-urteil, .m-kasse__held, .m-kasse__vn, .m-kasse__gruende) { display: none; }
/* Karte 339 (Owner 05.10.): Die Regel darüber stand seit der Hero-Karte (01.10.) für ALLE Breiten — am Handy
   fehlte „Warum der Wechsel passt" damit ganz. Am Handy steht die Bühne wieder; die Haken der Hero-Karte
   entfallen dort, damit die Gründe nicht doppelt stehen. Am Desktop ersetzt die Hero-Karte die Bühne weiter. */
.m-kasse.m-kasse--wechsel:has(.m-kasse__hero:not([hidden])) .m-kasse__gruende { display: block; }
.m-kasse:has(.m-kasse__hero:not([hidden])) .m-kasse__hero-punkte { display: none; }
/* ~~Am Desktop: Haken in der Hero-Karte, Bühne aus~~ — widerrufen 08.10. (Finn): die drei Haken
   rücken als Abschnitt 3 „Sicher wechseln“ UNTER das Akkordeon „Warum wir diese Kasse empfehlen“ —
   auf allen Breiten die Bühne, die Hero-Karte ohne Haken (die Regeln darüber gelten jetzt überall). */
.m-kasse__hero-karte { align-self: stretch; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--m-schutz-hero-radius); background: var(--m-flaeche); box-shadow: var(--m-schutz-hero-schatten); }
.m-kasse__hero-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 30px; background: var(--m-verlauf-band); color: var(--kk-white); }
.m-kasse__hero-text, .m-kasse__hero-preis { display: flex; flex-direction: column; gap: 4px; }
.m-kasse__hero-preis { align-items: flex-end; text-align: right; }
.m-kasse__hero-kicker, .m-kasse__hero-preis-titel { font-size: var(--t-klein); color: var(--m-schutz-hero-leise); }
.m-kasse__hero-name { font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--m-lw-titel); }
.m-kasse__hero-wert { font-size: var(--t-zahl-gross); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--m-lw-zahl); font-variant-numeric: proportional-nums; }
.m-kasse__hero-unter { font-size: var(--t-fuss); color: var(--m-schutz-hero-leise); }
.m-kasse__hero-koerper { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 30px; }
.m-kasse__hero-punkte { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m-kasse__hero-punkt { display: flex; align-items: center; gap: 10px; font-size: var(--t-text); color: var(--m-text); }
.m-kasse__hero-punkt::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--m-gruen);
  -webkit-mask: var(--m-lucide-kreis-haken) center / contain no-repeat; mask: var(--m-lucide-kreis-haken) center / contain no-repeat; }
.m-kasse__hero-logo { max-height: 44px; max-width: 160px; object-fit: contain; }
.m-kasse__hero-fuss { display: flex; align-items: center; gap: 12px; padding: 16px 30px; border-top: 1px solid var(--m-linie-fein); font-size: var(--t-klein); color: var(--m-text-leise); }
.m-kasse__hero-alt-logo { height: 18px; width: auto; }   /* Owner 30.09. „farbiges Logo“ — ~~grau, .55~~ */
.m-kasse__hero-jetzt { margin-left: auto; }
.m-kasse__hero-jetzt b { font-weight: var(--fw-semibold); color: var(--m-text); }
/* Owner 30.09.: „mittig der Button und ohne weißen Hintergrund“ */
.m-kasse__hero:not([hidden]) { align-items: center; }
.m-kasse__hero .m-kasse__hero-andere { display: inline-flex; margin: 0; background: transparent; }
/* Owner 01.10.: „Kassen vergleichen" in der Hero-Karte — am Desktop rechte Spalte unter dem Logo der neuen Kasse, am Handy unter den Gründen. */
.m-kasse__hero-koerper .m-kasse__hero-vergleich { justify-self: start; margin: 0; }

/* ~~Haus der Gesundheit als echtes Haus (Owner 30.09., Canvas „Haus 6“: Dach, Ziegel, Lücken, Fundament)~~ —
   Owner 12.10.: ersetzt durch das 3D-Modell (Block „Haus-Seite“). */

/* Owner 30.09. (Desktop): „sonst stand da doch eine Headline drüber?“ — die Überschrift über dem
   Gutschein („Dein Upgrade …“ / „Dein Wechsel zur …“) bleibt auch nach der Entscheidung stehen
   (~~.m-entscheidung--verborgen blendete sie mit der Entscheidungsreihe aus~~).
   „4 und Kreis raus“: in der Kopfleiste der Konzeptseite Name + Personen-Symbol, ohne Kreis und Zähler. */
.k2-seite .m-entscheidung--verborgen .m-liste__titel.m-opt-karte__titel { display: flex; }
@media (min-width: 861px) {
  /* „Profil-Icon fehlt“ (Owner 30.09.): nur Kreis-Fläche + Zähler weg, das Personen-Symbol bleibt
     (~~Symbol ganz ausgeblendet~~). */
  :root:has(.k2-seite) .app-topbar .m-konto__symbol { width: auto; height: auto; background: none; }
  :root:has(.k2-seite) .app-topbar .m-konto__symbol .m-warenkorb { display: none; }
}
/* Owner 30.09. „wenn man doch nicht mehr will — Link-Option“: nach dem Übernehmen steht im
   Abriss ein Textlink, der die Entscheidung zurücknimmt (uebernehmen_mobil.js). */
.k2-seite .m-entscheidung--erledigt .m-bk__d-zurueck {
  display: inline-flex; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-klein); font-weight: var(--fw-medium); color: var(--m-aktion);
  text-decoration: underline; text-underline-offset: 3px;
}
.k2-seite .m-entscheidung--erledigt .m-bk__d-zurueck:hover { color: var(--m-text); }
/* Owner 30.09.: Canvas „Krankenhaus 1“ — Karte mit hellem Band statt Basis-Kasten + leerem Feld. */
.m-schutz:has(.m-schutz__regel) > :is(.m-schutz__box, .m-schutz__unter) { display: none; }   /* Owner „raus“: auch „So ist dein Schutz aktuell aufgebaut“ */
/* Owner „der Bereich muss auch angepasst werden“: „Wird übernommen“ steckt als Haken in der Karte —
   der Abschnitt darunter entfällt am Desktop (Handy unverändert). */
.m-thema:has(.m-schutz__regel) .m-liste > :is(.m-liste__titel--uebernommen, .m-liste__titel--uebernommen + .m-liste__unter, .m-risiko--leiste, .m-liste__d-kopf--nur-leiste) { display: none; }   /* Trello 420: auch der Kopf eines reinen Leisten-Abschnitts */
/* Owner „nur in dem Fall, weil es keine Optimierung gibt, über die volle Breite“: ohne Optimierung
   (Krankenhaus-Karte steht) sind Pfeil, „mit Optimierung“ und Unterschied leer — Spalten auf 0. */
.m-thema:has(.m-schutz__regel) .m-liste { --m-vgl-spalte: 180px; --m-vgl-pfeil: 0px; --m-vgl-spalte-mit: 0px; }
/* Trello 421 (Alex 08.10., Fall 108 Krankenhaus ohne Schutz-Karte): die „Wird übernommen"-Leisten standen am
   Desktop frei auf dem Grund — „der Container dahinter ist einfach weg". Jetzt EINE weiße Karte wie beim
   Kostenvergleich darunter: oben rund an der ersten, unten rund an der letzten Leiste einer Folge. */
@media (min-width: 861px) {
  .k2-detail__panel .m-liste > .m-risiko--leiste { margin: 0; padding: 12px 26px; border-radius: 0; background: var(--m-flaeche); }
  .k2-detail__panel .m-liste > :not(.m-risiko--leiste) + .m-risiko--leiste,
  .k2-detail__panel .m-liste > .m-risiko--leiste:first-child { padding-top: 20px; border-top-left-radius: var(--m-radius); border-top-right-radius: var(--m-radius); }
  .k2-detail__panel .m-liste > .m-risiko--leiste:last-child,
  .k2-detail__panel .m-liste > .m-risiko--leiste:has(+ :not(.m-risiko--leiste)) { margin-bottom: 14px; padding-bottom: 20px; border-bottom-left-radius: var(--m-radius); border-bottom-right-radius: var(--m-radius); }
}
/* Owner „unsere Labels verwenden“: Status wie „Gut zu wissen“ als Figma-Badge (Gray), ~~Pille 30px~~. */
.k2-seite .m-risiko__status { margin-left: 8px; padding: var(--m-badge-pad-sm); border: 1px solid var(--m-badge-grau-rand); border-radius: var(--m-badge-radius); background: var(--m-badge-grau-bg); color: var(--m-badge-grau-fg); font-size: var(--m-badge-fs-sm); font-weight: var(--fw-regular); line-height: 1.4; }
.k2-seite .m-risiko__status--handlung_noetig { border-color: var(--m-badge-warn-rand); background: var(--m-badge-warn-bg); color: var(--m-badge-warn-fg); }
/* Owner „über dem Button“: „Kein Baustein ausgewählt“ steht als leise Zeile über dem Knopf, nicht darin. */
/* Owner 30.09. „bisschen Abstand zu den Elementen“: mehr Luft über der Zeile, zwischen Knopf,
   Vorschlag und „Weiter“ (~~28 px oben, 10 px Lücke~~). */
.k2-seite .m-vorschlag { gap: 16px; }
.k2-seite .m-vorschlag .m-cta { position: relative; margin-top: 48px; }
.k2-seite .m-vorschlag + .m-textlink { margin-top: 12px; }
/* Owner 30.09. „unser Label“: „Empfohlen“ an der Tarif-Kachel als Figma-Badge Brand (~~Pille mit 1,5-px-Rand, SemiBold~~). */
.k2-seite:not(#typo) .m-bk__empf { padding: var(--m-badge-pad-sm); border: 1px solid var(--m-badge-brand-rand); border-radius: var(--m-badge-radius); background: var(--m-badge-brand-bg); color: var(--m-badge-brand-fg); font-size: var(--m-badge-fs-sm); font-weight: var(--fw-regular); }
.k2-seite .m-vorschlag .m-cta__ober { position: absolute; left: 0; right: 0; bottom: calc(100% + 12px); color: var(--m-text-leise); font-size: var(--t-klein); font-weight: var(--fw-medium); letter-spacing: 0; opacity: 1; text-align: center; }
.m-schutz__regel { display: block; overflow: hidden; border-radius: var(--m-radius); background: var(--m-flaeche); box-shadow: var(--m-gutschein-schatten); }
.m-schutz__regel-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 30px; background: var(--m-bereich-bg); }
.m-schutz__regel-text { display: flex; flex-direction: column; gap: 6px; }
.m-schutz__regel-kicker { font-size: var(--t-klein); color: var(--m-text-leise); }
.m-schutz__regel-titel { font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--m-lw-titel); color: var(--m-text); }
.m-schutz__regel-badge { padding: var(--m-badge-pad); border: 1px solid var(--m-badge-grau-rand); border-radius: var(--m-badge-radius); background: var(--m-badge-grau-bg); color: var(--m-badge-grau-fg); font-size: var(--m-badge-fs); white-space: nowrap; }
.m-schutz__regel-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 30px; }
.m-schutz__regel-liste { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m-schutz__regel-punkt { display: flex; align-items: center; gap: 10px; font-size: var(--t-text); color: var(--m-text); }
.m-schutz__regel-punkt svg { flex: none; width: 18px; height: 18px; color: var(--m-gut); }
.m-schutz__regel-punkt--nein { color: var(--m-text-leise); }
.m-schutz__regel-punkt--nein svg { color: var(--m-badge-grau-rand); }
.m-schutz__regel-bild { width: 96px; height: 96px; object-fit: contain; }
.m-schutz__regel-fuss { display: flex; align-items: center; gap: 12px; padding: 16px 30px; border-top: 1px solid var(--m-linie); font-size: var(--t-klein); color: var(--m-text-leise); }
.m-schutz__regel-fuss img { height: 18px; width: auto; }

/* ── Owner 30.09. (Desktop), Runde „Gutschein + Leistungen“ ──
   Toast „… zum Konzept hinzugefügt“ als ruhiges Brand-Badge mittig (~~grüner Balken über die volle Breite~~);
   „im Ernstfall bis zu …“ kleiner (~~Zahl mittel 28~~ → H3); die zwei Wahl-Kacheln 50 / 50;
   Leistungs-Tabelle: Tarifname in Textfarbe, Zellen etwas kleiner und nicht mehr klickbar (keine Unterstreichung),
   „im Kassenbeitrag“ ohne Symbol-Einzug links, kein ✕ im Spaltenkopf (Abwählen unten an der Kachel);
   Kacheln: „Vergleichen mit“ raus, +/✕ als Lucide-Icons, ✕ deutlich sichtbar. */
@media (min-width: 861px) {
  /* ~~Toast als Brand-Badge mittig~~ → Owner „das kann raus“: am Desktop keine Meldung (der Knopf zeigt „Bereits hinzugefügt“). */
  .k2-seite .m-fx-toast:not(.m-fx-toast--nein) { display: none; }
}
/* Owner „nicht enthalten sollte grau sein“: Chips ohne Leistung als Badge Gray (~~Brand~~). */
/* Owner „Tarif wechseln“ + „unter die Tabelle setzen“: ~~„Zu diesem Tarif wechseln“ als Pille im Spaltenkopf~~ →
   „Tarif wechseln“ als Secondary-Knopf in einer Fußzeile unter der Tabelle, je Spalte (menue_mobil.js `m-bk__fuss-zeile`). */
.k2-seite .m-empfehlung .m-bk__kopf .m-bk__wechsel { display: none; }
.k2-seite .m-empfehlung .m-bk__fuss-zeile { display: grid; }
.k2-seite .m-empfehlung .m-bk__fuss-zelle { padding: 12px 16px 0; }
.k2-seite .m-empfehlung .m-bk__wechsel--fuss {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--m-knopf-kopf-h); margin: 0; padding: var(--m-knopf-kopf-pad);
  border: 1px solid var(--m-knopf-sek-rand); border-radius: var(--m-knopf-radius); background: var(--m-flaeche); color: var(--m-knopf-sek-fg);
  font-size: var(--m-knopf-kopf-fs); font-weight: var(--fw-medium); white-space: nowrap;
}
.k2-seite .m-empfehlung .m-bk__wechsel--fuss:hover { background: var(--m-knopf-sek-hover-bg); color: var(--m-knopf-sek-hover-fg); }
.k2-seite .m-empfehlung .m-bk__kachel--rot { border-color: var(--m-badge-grau-rand); background: var(--m-badge-grau-bg); }
.k2-seite .m-empfehlung .m-bk__kachel--rot .m-bk__kachel-wert { color: var(--m-badge-grau-fg); }
.k2-seite:not(#typo) .m-opt-karte .m-bk__d-risiko { padding: 12px 16px; font-size: var(--t-klein); }
.k2-seite:not(#typo) .m-bk__d-risiko .m-bk__d-risiko-wert { font-size: var(--t-h3); font-weight: var(--fw-semibold); }
.k2-seite .m-gutschein-wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.k2-seite .m-empfehlung .m-bk__kopf--mein .m-bk__name { color: var(--m-text); }
/* Owner „die Tabellen-Fonts um 2 px kleiner – nicht die Labels“: Zellen + Spaltenköpfe −2 px, die Leistungsnamen links bleiben. */
.k2-seite:not(#typo) .m-empfehlung .m-bk__zelle { font-size: calc(var(--m-lt-fs) - 2px); cursor: default; pointer-events: none; }
.k2-seite:not(#typo) .m-empfehlung .m-bk__kopf .m-bk__name { font-size: 12px; }
/* Owner „unter dem Logo zur Headline etwas mehr Abstand“. */
.k2-seite .m-empfehlung .m-bk__kopf .m-bk__logo { margin-bottom: 8px; }
.k2-seite:not(#typo) .m-empfehlung .m-bk__kopf .m-bk__sub { font-size: 12px; }
.k2-seite .m-empfehlung .m-bk__zelle::before { width: calc(var(--m-lt-icon) - 2px); height: calc(var(--m-lt-icon) - 2px); }
.k2-seite .m-empfehlung .m-bk__zelle:hover .m-bk__wert { text-decoration: none; }
.k2-seite .m-empfehlung .m-bk__zelle--neutral { grid-template-columns: minmax(0, 1fr); }
.k2-seite .m-empfehlung .m-bk__zelle--neutral::before { display: none; }
.k2-seite .m-empfehlung .m-bk__x { display: none; }
.k2-seite .m-bk__chips-titel { display: none; }
/* Owner „Labels 2 px kleiner und das Info-Icon immer rechts“: Leistungsnamen 14 px, „i“ am rechten Rand der Label-Spalte. */
.k2-seite:not(#typo) .m-empfehlung .m-bk__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 16px; font-size: var(--t-klein); text-align: left; }
/* Owner „Linie raus und den Bereich in eine Fläche mit abgerundeten Ecken“: ~~Trennlinie oben~~ → helle Fläche. */
.k2-seite .m-empfehlung .m-bk__chips { margin-top: 24px; padding: 20px 24px 16px; border-top: 0; border-radius: var(--m-radius); background: var(--m-bereich-bg); }
/* Owner „mehr Abstand zueinander, Headline zentriert“. */
.k2-seite .m-bk__chips-ueber { margin: 8px 0 16px; text-align: center; }
.k2-seite .m-bk__chip { margin-bottom: 12px; }
.k2-seite .m-bk__chip-aktion { font-size: 0; }
.k2-seite .m-bk__chip-aktion::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--m-lucide-plus) center / contain no-repeat; mask: var(--m-lucide-plus) center / contain no-repeat;
}
.k2-seite .m-bk__chip--aktiv .m-bk__chip-aktion { border-color: var(--m-upgrade-linie); background: var(--m-flaeche); color: var(--m-aktion); }
.k2-seite .m-bk__chip--aktiv .m-bk__chip-aktion::before { -webkit-mask-image: var(--m-lucide-x); mask-image: var(--m-lucide-x); }

/* Owner 30.09. „Laufweite stimmt nicht“ (Desktop): Beträge im Fließtext (Karten-Fuß, Vorschlagszeile, Tarif-Kopf)
   mit proportionalen Ziffern — `.k2-wert` setzt sonst `tabular-nums`, die „1“ und Lücken wirken zu weit.
   Tabellen (Kostentabelle, Leistungs-Zellen) bleiben tabellarisch. */
.k2-seite :is(.m-kasse__hero-fuss, .m-schutz__regel-fuss, .m-vorschlag__zeile, .m-baustein__sub, .m-bk__d-nach) .k2-wert {
  font-variant-numeric: proportional-nums;
}

/* Owner 30.09.: „Du zahlst weiter … mehr im Jahr.“ bleibt einzeilig (ohne Kassennamen, der steht in der Zeile darüber). */
.m-gutschein-wahl__satz--einzeilig { white-space: nowrap; }
/* Owner 30.09.: Kacheln sind Links — beim Hover nicht unterstreichen (globales a:hover). ~~.m-haus__saeule~~ (12.10.) */
.m-kasse__bereich:hover { text-decoration: none; }

/* Owner 30.09.: „auf deiner Basis · Kasse · Beitrag" unter der Paket-Karte auf den Seiten
   der Zusatzleistungen raus — die Kasse steht auf ihrer eigenen Seite. */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--basis { display: none; }

/* Owner 30.09.: Summen-Karte im Menue ist ein Link zur Uebersicht. */
a.k2-menue__fuss-vn { color: inherit; text-decoration: none; cursor: pointer; }
a.k2-menue__fuss-vn:hover { text-decoration: none; }
a.k2-menue__fuss-vn:hover .k2-menue__summe-label { color: var(--m-text); }
/* ~~Owner 30.09.: „Zur Übersicht" ohne Unterstreichung, auch beim Hover~~ — 12.10.: Knopf raus. */
/* Owner 30.09.: „Konzept aktivieren" auf der Übersicht höher als die übrigen Knöpfe. */
.k2-seite .m-uebersicht .m-cta-zeile .m-cta { min-height: var(--m-cta-h); }
/* Owner 30.09.: größte Lücke je Bereich auf der Kassen-Karte. */
.m-kasse__bereich-luecke { max-width: 100%; overflow: hidden; font-size: 14px; color: var(--m-text-leise); white-space: nowrap; text-overflow: ellipsis; }
.m-kasse__bereich-betrag { font-size: var(--t-h3); font-weight: var(--fw-semibold); color: var(--m-warn); }
/* Owner 30.09.: Übersicht-Zeilen sind Links auf ihre Themen-Seite. */
a.m-uebersicht__eintrag:hover { text-decoration: none; }
a.m-uebersicht__eintrag:hover .m-uebersicht__name { color: var(--konzept-ueb-akzent); }
/* Trello 465 (Alex 22.10.): eine Zeile in „Deine Zusatzbausteine" klappt auf wie die Baustein-Karte der Themen-Seite —
   Haken-Punkte, darunter Leistungen · Beitragsentwicklung · Broschüre als Reiterzeile. Der Inhalt trägt .m-empfehlung, damit
   Punkte, Leistungstafel und Vergleichs-Kacheln die Regeln der Upgrade-Karte nehmen; deren Kasten (lila Fläche) setzt die
   Übersicht hier zurück. Die Reiterzeile: Regeln der Upgrade-Karte, um .m-uebersicht__bk erweitert. Die Trennlinie trägt der
   Aufklapper, damit sie unter dem aufgeklappten Inhalt steht. */
.m-uebersicht__klapp-bk { border-bottom: 1px solid var(--m-linie); }
.m-uebersicht__klapp-bk > .m-uebersicht__eintrag { border-bottom: 0; list-style: none; cursor: pointer; }
.m-uebersicht__klapp-bk > .m-uebersicht__eintrag::-webkit-details-marker { display: none; }
.m-uebersicht__klapp-bk > .m-uebersicht__eintrag:hover .m-uebersicht__name { color: var(--konzept-ueb-akzent); }
.m-uebersicht__klapp-bk[open] > .m-uebersicht__eintrag .m-bk__pfeil { transform: rotate(180deg); }
.m-uebersicht__bk.m-empfehlung { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 2px 0 18px; border-radius: 0; background: none; }
.m-uebersicht__bk > .m-bk__koerper { padding: 0; overflow: hidden; border: 1px solid var(--m-linie-fein); border-radius: var(--m-radius); background: var(--m-flaeche); }
/* Alex 22.10.: ~~Textlink „Zur Seite …“ (.m-uebersicht__zum-thema)~~ — das Logo führt auf die Themen-Seite. */
.m-uebersicht__logo-link { display: flex; flex: 0 0 auto; color: inherit; text-decoration: none; }   /* ohne Logo: der Tarifname */
/* Owner 30.09.: weniger Abstand nach oben auf allen Seiten (vorher --m-kopf-luft = 24 px). */
.k2-seite .m-kopf { padding-top: 8px; }
.k2-seite .m-uebersicht__kopf { margin-top: 8px; }
/* Owner 30.09.: „Dein Konzept auf einen Blick" so groß wie die Seitentitel der Themen. */
.k2-seite:not(#typo) .m-uebersicht__titel { font-size: var(--t-h1); line-height: 1.15; font-weight: var(--fw-bold); }
.m-schutz__d-foto, .m-kasse__hero-foto { display: none; }
/* Canvas „Themenkopf · Bild + Paket", Variante A (Owner 30.09.; ~~B: Band auf dem Foto~~, ~~D~~):
   das Themen-Foto steht oben IN der Karte, darunter das lila Band mit Name und Preis, darunter die
   Leistungen. Der Kopf zeigt sein eigenes Foto dann nicht mehr. Kassenseite im selben Muster. */
.m-opt .m-thema:has(.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__d-foto) .m-kopf__bild,
.m-kasse:has(.m-kasse__hero:not([hidden]) .m-kasse__hero-foto) .m-kasse__kopf .m-kopf__bild { display: none; }
/* Löwen-Siegel oben rechts auf dem Foto (Owner 30.09. „wieder so wie vorher"): es bleibt in Zeile 2
   des Kopfs, die Karte rückt um seine Höhe darunter. */
.m-kasse:has(.m-kasse__hero:not([hidden]) .m-kasse__hero-foto) .m-kasse__kopf { position: relative; z-index: 3; margin-bottom: calc(-1 * (var(--m-siegel-h-desktop) + var(--m-siegel-ueberstand-desktop))); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto), .m-kasse__hero-band:has(.m-kasse__hero-foto) { flex-wrap: wrap; row-gap: 0; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto, .m-kasse__hero-foto {
  display: block; flex: 0 0 calc(100% + 60px); order: -1; width: calc(100% + 60px); height: var(--m-schutz-foto-h); margin: -24px -30px 24px; object-fit: cover; object-position: center 30%;
}
/* Owner 30.09.: Balken erscheinen sofort — kein Einblenden/Schrumpfen, wenn sie in den Viewport kommen
   („laden komisch nach, das irritiert"). ~~m-balken-rein / m-spur-schrumpfen beim Scrollen~~ */
.k2-seite .m-balken--an .m-risiko__d-balken-spur, .k2-seite .m-balken--warten .m-risiko__d-balken-spur { animation: none; clip-path: none; }
/* ~~Variante E „Eine Karte entscheidet" (Entscheidungskarte per order unter die Paket-Karte)~~
   Owner 30.09.: zurück — „super broken"; wieder zwei Karten, oben Paket, unten Entscheidung. */
/* Owner 30.09.: Seitentitel („Dein Schutz beim …", „Deine Krankenkasse", Übersicht) etwas kleiner
   und weniger Luft zum Bild darunter. ~~var(--t-h1) · Abstand var(--m-kopf-luft)~~ */
.k2-seite:not(#typo) :is(.m-kopf__titel, .m-uebersicht__titel) { font-size: var(--t-seitentitel); }
.k2-seite .m-kopf__zeile .m-kopf__titel,
.m-kasse:has(.m-kasse__hero:not([hidden])) .m-kasse__kopf .m-kopf__zeile .m-kopf__titel { margin-bottom: var(--m-kopf-luft-titel); }
/* ~~.k2-seite .m-uebersicht__kopf { margin-bottom: var(--m-kopf-luft-titel); }~~
   Owner 12.10.: „Dein Konzept auf einen Blick" zentriert (Handy + Desktop), doppelte Luft darunter.
   Mit Bonus-Jahr-Umschalter rückt der unter den Titel, ebenfalls mittig. */
.k2-seite .m-uebersicht__kopf { flex-wrap: wrap; justify-content: center; margin-bottom: var(--m-uebersicht-luft-titel); }
.k2-seite .m-uebersicht__kopf .m-uebersicht__titel { flex: 1 1 100%; text-align: center; text-wrap: balance; } /* Finn 12.10.: „Dein Konzept / auf einen Blick" statt einsamem „Blick" */
/* Kopf ohne eigenes Foto (Variante B): nur der Titel-Abstand bis zur Karte. */
.k2-seite .m-opt .m-thema:has(.m-schutz__d-foto) > .m-kopf { margin-bottom: 0; }
/* Owner 30.09. („immer noch nicht bottom aligned"): bei kurzem Inhalt sitzt die Fußzeile am unteren
   Fensterrand — die Inhaltsspalte ist mindestens fensterhoch, der Knopfbereich wächst mit und
   schiebt die Fußzeile ans Ende. Bei langem Inhalt folgt sie wie bisher unter dem Inhalt. */
.k2-seite .k2-detail__panel { min-height: calc(100vh - var(--k2-topbar-h) - var(--k2-board-oben) - var(--k2-fuss-abstand)); }
.k2-seite .k2-detail__panel > :is(.m-kasse, .m-thema) { display: flex; flex: 1 0 auto; flex-direction: column; }
.k2-seite .k2-detail__panel > :is(.m-kasse, .m-thema) > .m-cta-zeile { display: flex; flex: 1 0 auto; flex-direction: column; }
@media (min-width: 861px) {
  .k2-seite .m-cta-zeile > .m-seitenfuss { margin-top: auto; }
}
/* Owner 30.09. („Ohne Baustein: gleiche Karte wie mit Paket"): Themen-Foto oben in der Karte, das Kopf-Foto
   entfällt; graues Band mit Kassen-Logo rechts. */
.m-thema:has(.m-schutz__regel-foto) .m-kopf__bild { display: none; }
.m-thema:has(.m-schutz__regel-foto) > .m-kopf { margin-bottom: 0; }
.m-schutz__regel { border-radius: var(--m-schutz-hero-radius); box-shadow: var(--m-schutz-hero-schatten); }
.m-schutz__regel-foto { display: block; width: 100%; height: var(--m-schutz-foto-h); object-fit: cover; object-position: center 30%; }
/* Owner 12.10. (neue Kopfbilder, Codex): Ausschnitt je Thema über das Detail-Panel — Zahnarzt, Vorsorge, Brille,
   Naturheil haben neue Fotos mit Gesichtern im oberen Drittel. Ohne Thema-Token bleibt center 30%.
   Spezifität wie die Band-Regel der Paket-Karte (+1 Attribut am Panel, das selbst .m-opt ist), damit sie greift. */
[data-k2-panel="zahn"] { --m-foto-fokus:var(--m-foto-zahn-fokus); }
[data-k2-panel="vorsorge"] { --m-foto-fokus:var(--m-foto-vorsorge-fokus); }
[data-k2-panel="brille"] { --m-foto-fokus:var(--m-foto-brille-fokus); }
[data-k2-panel="alternativ"] { --m-foto-fokus:var(--m-foto-alternativ-fokus); }
[data-k2-panel] .m-bestand__foto, [data-k2-panel] .m-schutz__regel-foto,
.m-opt[data-k2-panel] .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto { object-position: var(--m-foto-fokus, center 30%); }
.m-schutz__regel-logo { flex: none; max-width: 140px; max-height: 40px; object-fit: contain; }
@media (min-width: 861px) {
  /* Owner 30.09. („Toasts: unten rechts"): die Bestätigung nach „Nein, danke" schwebt unten rechts
     wie die Server-Meldungen (.flash-stapel) — ~~im Fluss über der Entscheidung~~. */
  .k2-seite .m-fx-toast--nein { position: fixed; left: auto; right: var(--sp-4); bottom: var(--sp-4); z-index: 1000; max-width: min(90vw, 460px); margin: 0; box-shadow: var(--sh-lg); }
}
/* Owner 30.09. („viel mehr Abstand darüber"): Mindestluft über der Fußzeile auf jeder Seite, jede Breite —
   als Innenabstand, damit sie auch mit margin-top: auto (Desktop, Fußzeile unten) gilt. */
.m-seitenfuss { padding-top: var(--m-fuss-luft); }
@property --m-schalter-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes m-schalter-torte { from { --m-schalter-winkel: 0deg; } to { --m-schalter-winkel: 360deg; } }
/* Owner 30.09. (Dribbble „Timer Toggle"): Schalter „Vorteil aktivieren" statt „Ja, will ich". Aus: graue Spur,
   weißer Knopf links. An: Knopf gleitet nach rechts, Spur grün, im Knopf füllt sich ein Tortenstück, danach
   ein Haken. Bleibt nach dem Aktivieren „an" stehen (die übrigen Knöpfe verschwinden sofort). */
.k2-seite .m-bk__d-einloesen.m-schalter {
  justify-content: space-between; gap: 14px; height: auto; min-height: 48px; padding: 6px 6px 6px 18px;
  border: 1px solid var(--m-linie-stark); border-radius: var(--r-full); background: var(--m-flaeche); color: var(--m-text); box-shadow: none;
}
.k2-seite .m-bk__d-einloesen.m-schalter:hover, .k2-seite .m-bk__d-einloesen.m-schalter:active { background: var(--m-flaeche); transform: none; filter: none; }
.m-schalter__text { font-weight: var(--fw-semibold); white-space: nowrap; }
.m-schalter__spur { position: relative; flex: none; width: var(--m-schalter-b); height: var(--m-schalter-h); border-radius: var(--r-full); background: var(--m-linie-stark); transition: background var(--m-schalter-dauer) var(--ease-out); }
.m-schalter__knopf {
  position: absolute; top: calc((var(--m-schalter-h) - var(--m-schalter-knopf)) / 2); left: calc((var(--m-schalter-h) - var(--m-schalter-knopf)) / 2);
  display: grid; place-items: center; width: var(--m-schalter-knopf); height: var(--m-schalter-knopf); overflow: hidden;
  border-radius: 50%; background: var(--kk-white); box-shadow: var(--m-schalter-schatten); transition: transform var(--m-schalter-dauer) var(--ease-out);
}
.m-schalter__torte { position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(var(--m-gut-flaeche) var(--m-schalter-winkel), transparent 0); }
.m-schalter__haken { position: relative; width: 16px; height: 16px; color: var(--m-gruen); opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease; }
.m-schalter[aria-checked="true"] .m-schalter__spur { background: var(--m-gruen); }
.m-schalter[aria-checked="true"] .m-schalter__knopf { transform: translateX(calc(var(--m-schalter-b) - var(--m-schalter-h))); }
.m-schalter[aria-checked="true"] .m-schalter__torte { --m-schalter-winkel: 360deg; }
/* Die Torte läuft nur direkt nach dem Tipp (.m-schalter--jetzt, uebernehmen_mobil.js), nie beim Laden. */
.m-schalter--jetzt[aria-checked="true"] .m-schalter__torte { animation: m-schalter-torte var(--m-schalter-torte-dauer) linear var(--m-schalter-dauer) both; }
.m-schalter[aria-checked="true"] .m-schalter__haken { opacity: 1; transform: none; transition-delay: calc(var(--m-schalter-dauer) + var(--m-schalter-torte-dauer)); }
/* Nach dem Aktivieren bleibt der Schalter stehen (~~.m-entscheidung--verborgen blendet den Knopf aus~~). */
.k2-seite .m-entscheidung--verborgen .m-bk__d-einloesen.m-schalter { display: inline-flex; }
@media not (prefers-reduced-motion: no-preference) {   /* = reduce */
  .m-schalter__spur, .m-schalter__knopf, .m-schalter__haken { transition: none; }
  .m-schalter[aria-checked="true"] .m-schalter__torte { animation: none; --m-schalter-winkel: 360deg; }
}
/* Owner 30.09.: Link „Doch nicht übernehmen" raus — Ausschalten geht über den Schalter selbst (der Knopf bleibt
   unsichtbar im DOM, der Schalter löst ihn aus). Schalter nie breiter als die Preisspalte. */
.k2-seite .m-entscheidung--erledigt .m-bk__d-zurueck { display: none; }
.k2-seite .m-bk__d-einloesen.m-schalter { box-sizing: border-box; max-width: 100%; }
/* Owner 30.09.: Etikett „Deine Optimierung" unten in der Karte raus (~~Figma-Badge Brand oben links~~). */
.m-opt-karte .m-empfehlung__titel { display: none; }
/* Owner 30.09. („Weiter unten auch höher, wie schon an anderer Stelle"): so hoch wie „Konzept aktivieren". */
.k2-seite .m-entscheidung .m-weiter:not([hidden]) { min-height: var(--m-cta-h); }
/* Owner 12.10.: „Weiter →" unter der Upgrade-Karte bleibt Primary, ist am Desktop aber schmal (--m-weiter-max-b) und
   mittig; doppelt so viel Luft nach oben (--m-weiter-luft-oben). ~~volle Spaltenbreite, margin-top 14px~~ */
.k2-seite .m-entscheidung .m-entscheidung__weiter:not([hidden]) { width: 100%; max-width: var(--m-weiter-max-b); margin: var(--m-weiter-luft-oben) auto 0; }
/* Beim Laden steht der Schalter sofort im richtigen Zustand — keine Gleit-/Torten-Animation
   (uebernehmen_mobil.js setzt .m-schalter--sofort bis nach dem ersten Zeichnen). */
.m-schalter--sofort .m-schalter__spur, .m-schalter--sofort .m-schalter__knopf, .m-schalter--sofort .m-schalter__haken { transition: none; }
/* Owner 30.09. (Mobil-Liste 6+7): in „Deine Optimierung" lief der Tarifname in den Preiskasten und
   „Chefarztbehandlung" über den Chip-Rand. Der Preiskasten bekommt am Handy eine eigene Zeile
   (Titel links, Betrag rechts), lange Wörter in den Chips trennen mit Silbentrennung. */
.m-empfehlung .m-baustein__kopf { flex-wrap: wrap; }
.m-empfehlung .m-bk__effektiv { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: baseline; order: 1; }
.m-empfehlung .m-bk__wertung { order: 2; grid-template-columns: minmax(0, 1fr); }
.m-empfehlung .m-bk__auf-knopf { order: 3; }
/* Chips untereinander: Leistung links, Wert rechts — ~~drei schmale Spalten mit Silbentrennung~~. */
.m-empfehlung .m-bk__kachel { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; }
.m-empfehlung .m-bk__kachel-wert { text-align: right; }
/* Rücksetzung zu Mobil-Liste 6+7: am Desktop steht der Preis im Abriss (Spalte), Chips als Pillen. */
.m-empfehlung .m-bk__effektiv { flex: none; flex-direction: column; align-items: center; order: 0; }
.m-empfehlung .m-bk__wertung, .m-empfehlung .m-bk__auf-knopf { order: 0; }
.m-empfehlung .m-bk__kachel { justify-content: normal; align-items: center; text-align: center; }
.m-empfehlung .m-bk__kachel-wert { text-align: inherit; }
/* Owner 30.09. („Toasts am Handy auch unten"): die Bestätigung schwebt am unteren Rand über die ganze Breite
   (16 px Luft) — ~~im Fluss über den Entscheidungs-Knöpfen~~. Am Desktop unten rechts (Regel oben). */
.m-fx-toast { position: fixed; right: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4); z-index: 1000; margin: 0; box-shadow: var(--sh-lg); }
@media (min-width: 861px) {
  .k2-seite .m-fx-toast { left: auto; }
}
/* ~~Probe „eine Karte" (Canvas-Variante E, ?karte=eins)~~ — Owner 30.09.: „Wir bleiben erstmal bei Karte 2", entfernt. */
@media (min-width: 861px) {
  /* Owner 30.09.: Überschrift „Deine aktuelle Situation" im Seitenmenü raus (der Schließ-Knopf daneben ist
     am Desktop ohnehin aus). Am Handy bleibt der Kopf der Schublade mit ✕. */
  .k2-seite > .k2-menue .k2-menue__kopf { display: none; }
}
/* Owner 30.09.: Leistungsliste + Logo aus der oberen Paket-Karte raus („steht ja weiter unten" — in der
   Entscheidungskarte). Die Karte endet mit dem lila Band. ~~Chips-Liste + Gesellschafts-Logo unter dem Band~~ */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-chips,
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) > .m-schutz__feld--paket > .m-schutz__logo { display: none; }
/* ~~Owner 30.09. (Haus-Fenster): Titel mittig, „Zur Übersicht" über die ganze Breite~~
   ~~Owner 12.10. (3D-Haus): am Handy kleinerer Titel, Seitenrand 12px (Block in einer Handy-Hülle)~~ — Owner 12.10.
   (vollflächig): Titel und Knopf raus, kein Rand; die Handy-Lage ist die Grundregel oben (.m-haus:not([hidden])),
   der Desktop rückt per min-width neben die Seitenleiste (folgt --k2-menue-breite-desktop, auch eingeklappt). */
@media (min-width: 861px) {
  .m-haus:not([hidden]) { inset: var(--k2-topbar-h) 0 0 var(--k2-menue-breite-desktop); }
}

.k2-menue__summe-weiter { display: none; }
/* Summen-Karte Variante 4 (Owner 30.09.): Unterschied als leise Zeile unter einer Linie, rechts „Übersicht ›".
   ~~Badge (Brand / Success)~~ */
.k2-menue__summe-fuss { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--m-linie); }
.k2-seite > .k2-menue .k2-menue__summe-pille, .k2-seite > .k2-menue .k2-menue__summe-pille--spart {
  align-self: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--m-aktion); font-size: var(--t-fuss); font-weight: var(--fw-regular); white-space: normal;
}
.k2-seite > .k2-menue .k2-menue__summe-pille--spart { color: var(--m-badge-gut-fg); }
.k2-menue__summe-weiter { display: inline-flex; flex: none; align-items: center; gap: 2px; color: var(--m-aktion); font-size: var(--t-fuss); font-weight: var(--fw-semibold); }
.k2-menue__summe-weiter svg { width: 14px; height: 14px; }
/* ~~Kopf B2 (Foto links, Band rechts, volle Breite, ohne Headline)~~ Owner 30.09.: „ist es noch nicht" — zurück
   Richtung Variante A, Canvas „Kopf: zurück Richtung vorher", A2. */
/* A2 (Owner 30.09.): das Foto ist eine eigene, runde Fläche; das lila Band liegt als Karte halb auf der
   unteren Fotokante. Das Band-Element trägt Foto, Text und Preis — die lila Karte ist sein ::before,
   damit Text und Preis gemeinsam darauf stehen. Nur die Paket-Karte der Themenseiten. */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__d-foto) { overflow: visible; background: none; box-shadow: none; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) {
  position: relative; isolation: isolate; row-gap: 0;
  padding: 0 calc(var(--m-kopf-a2-einzug) + 28px) 22px; background: none;
}
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto)::before {
  content: ""; position: absolute; z-index: -1; top: calc(var(--m-kopf-a2-foto-h) - var(--m-kopf-a2-ueberlapp));
  right: var(--m-kopf-a2-einzug); bottom: 0; left: var(--m-kopf-a2-einzug);
  border-radius: var(--m-kopf-a2-radius); background: var(--m-kopf-karte-bg); box-shadow: var(--m-kopf-karte-schatten);   /* Owner 12.10.: weiß, ~~var(--m-verlauf-band) · var(--m-kopf-a2-schatten)~~ */
}
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto {
  position: relative; z-index: -2; flex-basis: calc(100% + 2 * (var(--m-kopf-a2-einzug) + 28px)); width: calc(100% + 2 * (var(--m-kopf-a2-einzug) + 28px));
  margin: 0 calc(-1 * (var(--m-kopf-a2-einzug) + 28px)) calc(22px - var(--m-kopf-a2-ueberlapp));
  border-radius: var(--m-schutz-hero-radius);
}
/* A2, 2. Runde (Owner 30.09.): „Dein Schutz …" steht auf dem Foto; das Foto wird breiter als die Spalte
   (bis kurz vor Menü und Fensterrand), die lila Karte bleibt so breit wie der Inhalt. Die Spalte steht mittig
   in der Fläche rechts vom Menü, deshalb läuft das Foto symmetrisch über. Oben dunkelt ::after das Foto
   für den weißen Titel ab. ~~::after-Abdunklung~~ mit H4 entfallen.
   Trello 436 (Alex 09.10.): höchstens so breit wie die Upgrade-Karte „Dein Upgrade auf …" — je Seite bis
   --m-upgrade-ueberstand über die Spalte (min(…) im --_breit). Gilt für ALLE Kopf-Fotos am Desktop: Themen-
   Paket, Kasse, Bestand, Thema ohne Inhalt. ~~bis kurz vor Menü und Fensterrand~~ */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto {
  --_breit: max(calc(100% + 2 * (var(--m-kopf-a2-einzug) + 28px)), min(calc(100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 2 * var(--m-kopf-a2-rand)), calc(100% + 2 * (var(--m-kopf-a2-einzug) + 28px) + 2 * var(--m-upgrade-ueberstand))));
  flex-basis: var(--_breit); width: var(--_breit);
  margin-right: calc((100% - var(--_breit)) / 2); margin-left: calc((100% - var(--_breit)) / 2);
}
/* ~~Titel „Dein Schutz …" weiß oben links im Foto~~ Owner 30.09.: H4 — der Titel steht im Band (unten). */
.k2-seite .m-opt .m-thema:has(.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__d-foto) > .m-kopf { display: none; }
/* Owner 30.09.: weniger Abstand zwischen Header (A2) und „So bist du abgesichert" — ~~34 px Rand + 72 px über dem Titel~~. */
.k2-seite .m-opt .m-thema:has(.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__d-foto) .m-schutz--haupt { margin-bottom: var(--m-themen-luft-kopf); }   /* Owner 12.10.: ~~var(--m-kopf-a2-luft-unten)~~ */
.k2-seite .m-opt .m-thema:has(.m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__d-foto) .m-schutz--haupt + .m-liste > .m-liste__titel:first-child { margin-top: 0; }
/* Owner 30.09.: „So bist du abgesichert" kann weg — am Desktop hat die Gruppe „selbst" keinen Titel mehr,
   die Legende mit „Optimierung anzeigen" steht direkt unter dem Header. */
.k2-seite .m-liste__titel--selbst { display: none; }
.m-schutz__d-titel { display: none; }
/* H4 (Owner 30.09.): „Dein Schutz beim …" groß im Band, darunter „Tarif · dein Zusatzpaket" klein. */
.m-schutz__d-titel { display: block; font-size: var(--t-zahl-mittel); font-weight: var(--fw-bold); letter-spacing: var(--m-lw-titel); line-height: 1.15; }
.k2-seite:not(#typo) .m-schutz__d-band-text .m-schutz__d-tarif { display: inline; font-size: inherit; font-weight: var(--fw-semibold); letter-spacing: 0; color: inherit; }
.k2-seite:not(#typo) .m-schutz__d-band-text .m-schutz__d-kicker { font-size: var(--t-text); }
/* Weißer Themen-Kopf (Owner 12.10., Canvas „Kopf weiß"): die Karte auf dem Kopfbild ist weiß (::before oben,
   .m-bestand__band). Die Schrift-Tokens der lila Karte werden hier auf die hellen Werte umgelegt — so ziehen Kicker,
   „Du sparst", „im Monat · Beitrag …", die Pille und der Kassen-Anteil (.kap--hero) ohne eigene Regeln mit.
   Titel violett-900, Ersparnis grün. ~~weiße Schrift auf lila~~ */
.m-schutz__d-band:has(.m-schutz__d-foto), .m-bestand__band {
  --m-schutz-hero-leise: var(--m-kopf-karte-leise); --m-schutz-hero-linie: var(--m-kopf-karte-linie);
  --m-im-konzept-band-bg: var(--m-kopf-karte-pille-bg); --m-im-konzept-band-fg: var(--m-kopf-karte-pille-fg);
  --kap-hero-text: var(--m-kopf-karte-text); --kap-hero-leise: var(--m-kopf-karte-leise); --kap-hero-trenner: var(--kap-trenner);
  color: var(--m-kopf-karte-text);
}
.m-schutz__d-band:has(.m-schutz__d-foto) .m-schutz__d-titel, .m-bestand__titel { color: var(--m-kopf-karte-titel); }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) .m-schutz__d-effektiv,
.m-bestand__preis-wert { color: var(--m-kopf-karte-gruen); }
/* Owner 12.10. (Kopfbild ca. +20 % am Desktop): die Themenseiten legen die Foto-Höhe auf --m-themen-foto-h um — Foto,
   Überlappung der weißen Karte (::before top) und Bestand-Foto ziehen mit; die Kassenseite bleibt bei --m-kopf-a2-foto-h. */
.k2-seite .m-thema { --m-kopf-a2-foto-h: var(--m-themen-foto-h); }
/* Owner 30.09.: Header-Foto der Themenseiten etwas niedriger (~~300 px~~, Token --m-schutz-foto-h gilt weiter für Kasse/ohne Paket). */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto { height: var(--m-kopf-a2-foto-h); }
/* Owner 30.09.: Segment-Schalter „Heute | Mit Optimierung" statt Knopf — Legende und Tabelle bleiben.
   Gleiche Spezifität wie die Knopf-Regeln (Primary sm, Hover, gedrückt) und später → gewinnt. */
.k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter--segment,
.k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter--segment:is(:hover, :active, [aria-pressed="true"]) {
  display: inline-flex; gap: 0; min-height: 0; padding: var(--m-seg-pad); border: 0; border-radius: var(--m-seg-radius);
  background: var(--m-seg-bg); box-shadow: none; outline: 0; filter: none; color: var(--m-seg-fg);
}
.m-liste__d-seg { padding: var(--m-seg-knopf-pad); border-radius: var(--m-seg-innen-radius); font-size: var(--t-klein); font-weight: var(--fw-semibold); color: var(--m-seg-fg); transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.m-liste__d-schalter--segment[aria-pressed="false"] .m-liste__d-seg--heute,
.m-liste__d-schalter--segment[aria-pressed="true"] .m-liste__d-seg--mit { background: var(--m-seg-aktiv-bg); color: var(--m-seg-aktiv-fg); box-shadow: var(--m-seg-schatten); }
/* Owner 30.09.: „Haus der Gesundheit" im Menü ohne Icon und Zahl, mittig und etwas größer. */
.k2-menue__haus-kopf { justify-content: center; }
.k2-menue__haus-name { flex: none; font-size: var(--k2-haus-name-fs); text-align: center; }
/* Owner 30.09.: Unterschied in der Summen-Karte immer einzeilig. */
.k2-seite > .k2-menue .k2-menue__summe-pille { white-space: nowrap; }
.k2-menue__summe-fuss { align-items: center; }
/* Owner 30.09. („Layoutshifts beim Wechsel Heute / Mit Optimierung verhindern"): im Zustand „Heute" halten
   grüne Spur, Pfeil, Betrag und Pille ihren Platz — unsichtbar statt ~~display: none~~. So bleibt jede Zeile
   gleich hoch (vorher 13 px niedriger) und die Spalten stehen still. */
/* ~~.m-risiko__d-balken-spur--mit unsichtbar statt display: none~~ — 12.10.: es gibt nur noch EINEN Streifen, er steht in beiden Zuständen. */
.k2-seite .m-risiko--tafel:not(.m-risiko--opt) .m-risiko__d-mitteil { display: block; visibility: hidden; }
/* ~~Bilanz-Pille in „Heute" unsichtbar freihalten (display: flex; visibility: hidden)~~ — Owner 12.10. („Entferne die
   Badges überall"): keine Pille mehr, also kein freigehaltener Platz; ohne sie ist die Zeile in beiden Zuständen gleich hoch. */
/* Karte 357 (Owner 05.10., „nicht einfach aufpoppen, sondern einfaden"): beim Aufdecken blenden Betrag,
   grüne Spur und Pille einer Zeile weich ein — für Schalter, Auto-Aufdecken und Wiedereinstieg gleich. */
@keyframes m-tafel-ein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .k2-seite .m-risiko--tafel.m-risiko--opt .m-risiko__d-mitteil,
  .k2-seite .m-risiko--tafel.m-risiko--opt .m-risiko__d-teil--baustein.m-risiko__d-teil--leer-heute { animation: m-tafel-ein var(--m-tafel-ein) ease-out both; }
}
/* ~~Owner 30.09. („mobil auch so"): Leistungs-Chips als Badges nebeneinander~~ — Owner 30.09. („so wie wir es mal hatten"):
   in „Deine Optimierung" stehen die Leistungen untereinander mit Icon vorn, Handy und Desktop gleich — wie früher
   die Paket-Karte oben (.m-schutz__d-chip): Haken grün, „nicht enthalten" mit Strich grau und ans Ende. */
.m-bk__kachel-icon { display: none; }
.m-empfehlung .m-bk__wertung, .k2-seite .m-empfehlung .m-bk__wertung { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.m-empfehlung .m-bk__kachel, .k2-seite .m-empfehlung .m-bk__kachel, .k2-seite .m-empfehlung .m-bk__kachel--rot {
  /* Block statt Flex: Name und Wert laufen als ein Satz und brechen gemeinsam um; das Icon steht links davor. */
  display: block; position: relative; padding: 0 0 0 28px; text-align: left; border: 0; border-radius: 0; background: none;
}
.m-empfehlung .m-bk__kachel-icon { display: flex; position: absolute; top: 2px; left: 0; width: 18px; height: 18px; color: var(--m-gruen); }
.m-empfehlung .m-bk__kachel-icon svg { width: 100%; height: 100%; }
.m-empfehlung .m-bk__kachel--rot { order: 1; }
.m-empfehlung .m-bk__kachel-label, .m-empfehlung .m-bk__kachel-wert { display: inline; }
.m-empfehlung .m-bk__kachel--rot .m-bk__kachel-icon { color: var(--m-linie-stark); }
.k2-seite:not(#typo) .m-empfehlung .m-bk__kachel-label, .m-empfehlung .m-bk__kachel-label { font-size: var(--t-text); font-weight: var(--fw-regular); color: var(--m-text); }
.k2-seite:not(#typo) .m-empfehlung .m-bk__kachel-wert, .m-empfehlung .m-bk__kachel-wert { margin-left: 4px; font-size: var(--t-text); font-weight: var(--fw-semibold); text-align: left; color: var(--m-text); }
.k2-seite:not(#typo) .m-empfehlung .m-bk__kachel--rot :is(.m-bk__kachel-label, .m-bk__kachel-wert), .m-empfehlung .m-bk__kachel--rot :is(.m-bk__kachel-label, .m-bk__kachel-wert) { font-weight: var(--fw-regular); color: var(--m-text-leise); }
/* Trello 346: der vierte Haken der Wechsel-Karte steht fett (Service-Check nach 12 Monaten). */
.k2-seite:not(#typo) .m-empfehlung .m-bk__kachel--fett .m-bk__kachel-label, .m-empfehlung .m-bk__kachel--fett .m-bk__kachel-label { font-weight: var(--fw-bold); }
/* Owner 30.09. („Header auf der Krankenkassenseite anpassen"): Kassen-Hero wie der Themen-Kopf (A2 + H4) —
   Foto breiter als die Spalte und 240 px hoch, das lila Band liegt 56 px auf der Fotokante, darunter
   Gründe und Fußzeile als weiße Karte. „Deine neue Krankenkasse" ist die große Zeile, der Kassenname
   steht klein darunter. Die Seitenheadline „Deine Krankenkasse" entfällt, das Löwen-Siegel bleibt.
   Die weiße Kartenfläche samt Schatten ist ::after der Karte — so fällt kein Schatten ums Foto. */
.m-kasse__hero-karte:has(.m-kasse__hero-foto) { position: relative; isolation: isolate; overflow: visible; background: none; box-shadow: none; }
.m-kasse__hero-karte:has(.m-kasse__hero-foto)::after {
  content: ""; position: absolute; z-index: -1; top: calc(var(--m-kopf-a2-foto-h) - var(--m-kopf-a2-ueberlapp)); right: 0; bottom: 0; left: 0;
  border-radius: var(--m-kopf-a2-radius); background: var(--m-flaeche); box-shadow: var(--m-schutz-hero-schatten);
}
.m-kasse__hero-band:has(.m-kasse__hero-foto) { position: relative; isolation: isolate; padding: 0 28px 22px; background: none; }
.m-kasse__hero-band:has(.m-kasse__hero-foto)::before {
  content: ""; position: absolute; z-index: -1; top: calc(var(--m-kopf-a2-foto-h) - var(--m-kopf-a2-ueberlapp)); right: 0; bottom: 0; left: 0;
  border-radius: var(--m-kopf-a2-radius) var(--m-kopf-a2-radius) 0 0; background: var(--m-kopf-karte-bg); box-shadow: none;   /* Owner 12.10.: weiß wie die Themen-Köpfe, ~~var(--m-verlauf-band) · var(--m-kopf-a2-schatten)~~ — den Schatten trägt die ganze Karte (::after) */
}
/* Weißer Kassen-Kopf (Owner 12.10., wie die Themen-Köpfe): „Deine neue Krankenkasse" violett-900, Kassenname und
   Unterzeilen leise, „Du sparst"-Betrag grün. ~~weiße Schrift auf lila~~ */
.m-kasse__hero-band:has(.m-kasse__hero-foto) { --m-schutz-hero-leise: var(--m-kopf-karte-leise); color: var(--m-kopf-karte-titel); }
.m-kasse__hero-band:has(.m-kasse__hero-foto) .m-kasse__hero-name { color: var(--m-kopf-karte-leise); }
.m-kasse__hero-band:has(.m-kasse__hero-foto) .m-kasse__hero-wert { color: var(--m-kopf-karte-gruen); }
.m-kasse__hero-band .m-kasse__hero-foto {
  --_breit: max(calc(100% + 56px), min(calc(100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 2 * var(--m-kopf-a2-rand)), calc(100% + 56px + 2 * var(--m-upgrade-ueberstand))));
  position: relative; z-index: -2; flex-basis: var(--_breit); width: var(--_breit); height: var(--m-kopf-a2-foto-h);
  margin: 0 calc((100% - var(--_breit)) / 2) calc(22px - var(--m-kopf-a2-ueberlapp)); border-radius: var(--m-schutz-hero-radius);
}
.k2-seite:not(#typo) .m-kasse__hero-karte:has(.m-kasse__hero-foto) .m-kasse__hero-kicker { font-size: var(--t-zahl-mittel); font-weight: var(--fw-bold); letter-spacing: var(--m-lw-titel); line-height: 1.15; color: inherit; }
.k2-seite:not(#typo) .m-kasse__hero-karte:has(.m-kasse__hero-foto) .m-kasse__hero-name { font-size: var(--t-text); font-weight: var(--fw-semibold); letter-spacing: 0; }
.m-kasse:has(.m-kasse__hero:not([hidden]) .m-kasse__hero-foto) .m-kasse__kopf .m-kopf__titel { display: none; }
/* Owner 30.09.: Löwen-Siegel auf der Kassenseite raus („Entferne das") — mit ihm fällt der Kopf ganz weg
   (Titel und Bild stehen schon im Hero). ~~Siegel oben rechts auf dem Foto~~ */
.m-kasse:has(.m-kasse__hero:not([hidden]) .m-kasse__hero-foto) .m-kasse__kopf { display: none; }
/* R4d (Owner 30.09.; ~~R4a Kennzahlen mit Rahmen~~): zwei Pillen in einer Zeile, grün = Ernstfall, lila = Alltag. */
.k2-seite:not(#typo) .m-bk__d-risiko.m-bk__pillen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.m-bk__pille { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full); font-size: var(--t-klein); line-height: 1.3; }
.m-bk__pille--risiko { background: var(--m-gruen-flaeche); color: var(--m-gruen); }
.m-bk__pille--alltag { background: var(--m-optimierung-flaeche); color: var(--m-aktion); }
.m-bk__pille-icon { display: flex; flex: none; width: 16px; height: 16px; }
.m-bk__pille-icon svg { width: 100%; height: 100%; }
.k2-seite:not(#typo) .m-bk__pillen .m-bk__pille b, .k2-seite:not(#typo) .m-bk__pillen .m-bk__d-risiko-wert { font-size: inherit; font-weight: var(--fw-semibold); line-height: inherit; color: inherit; }
/* ~~.m-bk__pille*~~ (R4d) — Owner 12.10.: die Pillen sind Haken-Punkte oben in der Leistungsliste
   (.m-bk__kachel--hl, Template) und nutzen die Regeln der übrigen Haken — keine eigenen Stile. */
/* ~~Pulsieren des aktiven Schalters (grüner Ring)~~ Owner 30.09.: „mag ich nicht" — wieder raus. */
/* Owner 30.09. („Logo abgeschnitten durch runde Ecken"): ohne Rahmen und Innenabstand schnitt der Radius
   der Logo-Kachel (--r-sm) die Ecken des Logos ab (HanseMerkur: „H" und „r"). ~~border-radius: var(--r-sm)~~ */
.m-empfehlung .m-bk .m-baustein__logo { border-radius: 0; }
.m-kasse__gs .m-empfehlung .m-bk .m-baustein__logo { height: var(--m-kasse-gs-logo-h); max-width: var(--m-kasse-gs-logo-b); }   /* Owner 12.10. */
.k2-menue__haus-symbol, .k2-menue__haus-unter { display: none; }
/* ══ Sidebar als Haus, S2a dezent (Owner 30.09., Canvas „S2a · dezenter, Linie ab dem Haus") ══
   Oben das Haus-Symbol, von seiner Mitte läuft eine feine Linie durch alle Bereiche bis zum letzten Icon.
   Jedes Icon steht in einem Ring auf der Linie; abgesicherte Bereiche (wie im Haus-Fenster) haben einen
   etwas kräftigeren Ring und einen kleinen grauen Haken. ~~Titel mittig + sechs Balken~~ */
.k2-seite > .k2-menue .k2-menue__haus { padding: 14px 16px 10px 19px; }
.k2-seite > .k2-menue .k2-menue__haus-kopf { justify-content: flex-start; gap: 12px; }
.k2-menue__haus-symbol { display: grid; flex: none; place-items: center; width: var(--k2-haus-symbol); height: var(--k2-haus-symbol); border-radius: 50%; background: var(--m-aktion); color: var(--kk-white); }
.k2-menue__haus-symbol-icon { width: 20px; height: 20px; }
.k2-menue__haus-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.k2-seite > .k2-menue .k2-menue__haus-name { text-align: left; }
.k2-menue__haus-unter { display: block; font-size: var(--t-fuss); color: var(--m-text-leise); }
.k2-seite > .k2-menue .k2-menue__haus-segmente { display: none; }
/* Die Linie in Stücken, damit sie genau an der Mitte des letzten Icons endet (die Liste selbst reicht bis
   zur Summe): am Haus von der Symbol-Mitte bis zur Liste (Abstand 6 + Innenabstand 6), an jedem Eintrag
   über die volle Höhe samt Rand und Außenabstand (1 + 2), am letzten nur bis zur Mitte.
   Mitte x = 19 px + halbes Symbol; im Eintrag abzüglich Außenabstand 8 und Rand 1. */
.k2-seite > .k2-menue .k2-menue__haus { position: relative; }
.k2-seite > .k2-menue .k2-menue__haus::after {
  content: ""; position: absolute; top: calc(14px + var(--k2-haus-symbol) / 2); bottom: -12px; left: calc(19px + var(--k2-haus-symbol) / 2); width: 1px; background: var(--k2-haus-linie);
}
.k2-seite > .k2-menue .k2-menue__eintrag:not(.k2-menue__eintrag--konzept) { position: relative; }
.k2-seite > .k2-menue .k2-menue__eintrag:not(.k2-menue__eintrag--konzept)::before {
  content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(19px + var(--k2-haus-symbol) / 2 - 9px); width: 1px; background: var(--k2-haus-linie);
}
.k2-seite > .k2-menue .k2-menue__eintrag:not(.k2-menue__eintrag--konzept):not(:has(~ .k2-menue__eintrag:not(.k2-menue__eintrag--konzept)))::before { bottom: 50%; }
.k2-seite > .k2-menue .k2-menue__bild {
  position: relative; z-index: 1; overflow: visible; border: 1px solid var(--k2-haus-ring); border-radius: 50%; background: var(--m-flaeche);
}
.k2-seite > .k2-menue .k2-menue__bild:has(.k2-menue__illu) { border: 1px solid var(--k2-haus-ring); background: var(--m-flaeche); }
.k2-seite > .k2-menue .k2-menue__eintrag--sicher .k2-menue__bild { border-color: var(--k2-haus-ring-sicher); }
.k2-seite > .k2-menue .k2-menue__illu { width: 72%; height: 72%; }
.k2-seite > .k2-menue .k2-menue__eintrag--sicher .k2-menue__bild::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: var(--k2-haus-haken); height: var(--k2-haus-haken); border: 1.5px solid var(--m-flaeche); border-radius: 50%;
  background: var(--k2-haus-haken-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
/* Aktiver Eintrag dezenter: heller Rahmen, kein Schatten. */
.k2-seite > .k2-menue .k2-menue__eintrag--aktiv { box-shadow: none; }
/* Owner 30.09.: die Linie liegt hinter dem Haus-Symbol (vorher lief sie über das Icon). */
.k2-menue__haus-symbol { position: relative; z-index: 1; }
/* Owner 30.09.: Badges in der Sidebar etwas kleiner. */
.k2-seite > .k2-menue .k2-menue__chip { padding: var(--k2-menue-chip-pad); font-size: var(--k2-menue-chip-fs); }
@media (min-width: 861px) {
  /* Owner 30.09.: Zurück-Knopf oben links genau über dem Haus-Symbol der Sidebar (Mitte x = 19 px + halbes Symbol).
     ~~Innenabstand der Kopfleiste 32 px~~ */
  :root:has(.k2-seite .k2-menue__haus-symbol) .app-topbar { padding-left: calc(19px + var(--k2-haus-symbol) / 2 - var(--m-knopf-kopf-h) / 2); }
}
.m-bestand { display: none; }
/* ══ Bestandsfall am Desktop, Canvas „Bestandsfall" B3 (Owner 01.10.) ══
   Kopf wie die anderen Themen (A2 + H4): Foto breiter als die Spalte, lila Band liegt auf der Fotokante;
   darunter zwei weiße Karten „Dein Vertrag heute" → „Unsere Empfehlung". Der gestrichelte Kasten, die
   Pillen, der Seitentitel und das Kopf-Foto entfallen am Desktop. ~~alter Handy-Aufbau am Desktop~~ */
.m-schutz--bestand:has(> .m-bestand) > :is(.m-schutz__kopf, .m-schutz__unter, .m-schutz__box) { display: none; }
.m-thema:has(.m-bestand) > .m-kopf { display: none; }
.m-bestand { display: flex; flex-direction: column; margin: 0 12px; }
.m-bestand__foto {
  --_breit: max(100%, min(calc(100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 2 * var(--m-kopf-a2-rand)), calc(100% + 2 * var(--m-upgrade-ueberstand))));
  display: block; width: var(--_breit); max-width: none; height: var(--m-kopf-a2-foto-h); margin: 0 calc((100% - var(--_breit)) / 2);
  border-radius: var(--m-schutz-hero-radius); object-fit: cover; object-position: center 30%;
}
.m-bestand__band {
  position: relative; display: flex; align-items: center; gap: 24px; padding: 22px 28px; border-radius: var(--m-kopf-a2-radius);
  background: var(--m-kopf-karte-bg); color: var(--m-kopf-karte-text); box-shadow: var(--m-kopf-karte-schatten);   /* Owner 12.10.: weiß, ~~lila Verlauf, weiße Schrift~~ */
}
.m-bestand__foto + .m-bestand__band { margin-top: calc(-1 * var(--m-kopf-a2-ueberlapp)); }
/* Owner 12.10. (Trello SeiIgINg, Krankenhausbild A): das neue Krankenhaus-Foto sitzt tiefer im Ausschnitt —
   Bett und offenes Fenster mit Vorhang statt Wandbild. Nur das Krankenhaus; die anderen Kopf-Fotos bleiben bei center 30%.
   Spezifität wie die Band-Regel der Paket-Karte (+1 Klasse), damit sie greift. */
.m-bestand__foto.m-foto--klinik, .m-schutz__regel-foto.m-foto--klinik,
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto.m-foto--klinik { object-position: var(--m-foto-klinik-fokus); }
.m-bestand__text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.m-bestand__titel { font-size: var(--t-zahl-mittel); font-weight: var(--fw-bold); letter-spacing: var(--m-lw-titel); line-height: 1.15; }
.m-bestand__unter, .m-bestand__preis-titel, .m-bestand__preis-unter { font-size: var(--t-klein); color: var(--m-schutz-hero-leise); }
.m-bestand__preis { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.m-bestand__preis-wert { font-size: var(--t-zahl-gross); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--m-lw-zahl); }
.m-bestand__karten { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; margin-top: 20px; }
.m-bestand__karte { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--m-linie); border-radius: var(--m-radius); background: var(--m-flaeche); }
.m-bestand__karte--empfehlung { border-color: var(--m-upgrade-linie); }
.m-bestand__etikett { font-size: var(--t-fuss); font-weight: var(--fw-semibold); letter-spacing: var(--m-lw-label); text-transform: uppercase; color: var(--m-text-leise); }
.m-bestand__karte--empfehlung .m-bestand__etikett { color: var(--m-aktion); }
.m-bestand__name { display: flex; align-items: center; gap: 10px; font-size: var(--t-h4); color: var(--m-text); }
.m-bestand__name b { font-weight: var(--fw-semibold); }
.m-bestand__logo { flex: none; max-width: 90px; max-height: 28px; object-fit: contain; }
.m-bestand__zeile { font-size: var(--t-klein); color: var(--m-text-leise); }
.m-bestand__pfeil { display: flex; align-self: center; width: 20px; height: 20px; color: var(--m-linie-stark); }
/* Trello 421 (Alex 08.10.): „Dein Vertrag heute" öffnet das Popup „Was übernimmt dieser Vertrag?" */
.m-bestand__karte--knopf { font: inherit; text-align: left; color: inherit; cursor: pointer; transition: border-color var(--t-fast); }
.m-bestand__karte--knopf:hover { border-color: var(--m-aktion); }
.m-bestand__karte--knopf:focus-visible { outline: 2px solid var(--m-aktion); outline-offset: 2px; }
.m-bestand__mehr { margin-top: auto; font-size: var(--t-klein); font-weight: var(--fw-semibold); color: var(--m-aktion); }
.m-bestand__pfeil svg { width: 100%; height: 100%; }
.k2-seite .m-thema:has(.m-bestand) .m-schutz--bestand { margin-bottom: var(--m-themen-luft-kopf); }   /* Owner 12.10.: ~~var(--m-kopf-a2-luft-unten)~~ */
/* Owner 01.10.: die Linie über „Leistungen" in der Upgrade-Karte war zu stark — feine Linie wie in der
   Kassen-Karte. ~~var(--m-linie)~~ */
.m-empfehlung .m-bk--offen-desktop .m-bk__sek:has([data-m-bk-leistungen]) { border-top-color: var(--m-linie-fein); }
/* Owner 01.10. (nach der Design-Runde): neben „Leistungen" stehen „Beitragsentwicklung" und „Broschüre" in
   EINER Reiterzeile; der aufgeklappte Inhalt liegt über die ganze Kartenbreite darunter. Die Abschnitte geben
   dafür ihren Kasten ab (display: contents) — Zeile und Inhalt ordnet der Körper. Nur wo der Browser den
   Inhalt eines <details> als eigenes Element kennt; sonst bleibt es bei „Leistungen" allein. */
@supports selector(::details-content) {
  .m-empfehlung .m-bk--offen-desktop > .m-bk__koerper:has([data-m-bk-leistungen]) { display: flex; flex-wrap: wrap; overflow: hidden; border-top: 1px solid var(--m-linie-fein); border-radius: 0 0 var(--m-gutschein-radius) var(--m-gutschein-radius); background: var(--m-flaeche); }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-leistungen]),
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-svg]),
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek.m-bk__sek--praes { display: contents; }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek > .m-bk__titel { order: 1; flex: 1 1 auto; width: auto; gap: 8px; padding: 14px 16px; }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-leistungen]) ~ .m-bk__sek > .m-bk__titel { border-left: 1px solid var(--m-linie-fein); }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek::details-content { order: 2; flex: 0 0 100%; min-width: 0; }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek[open]::details-content { border-top: 1px solid var(--m-linie-fein); }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-svg]) > .m-bk__inhalt { padding: 16px; }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek[open] > .m-bk__titel { color: var(--m-aktion); }
  .k2-seite:not(#typo) :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__titel--knopf { font-size: var(--t-h4); }
  /* Trello 465: in der Übersicht trägt der Körper die Reiterzeile selbst (Kasten: Regel bei .m-uebersicht__bk). */
  .m-uebersicht__bk > .m-bk__koerper:has([data-m-bk-leistungen]) { display: flex; flex-wrap: wrap; }
}
.m-empfehlung__d-kopf { display: none; }
/* Owner 01.10.: „Dein Upgrade …" + Unterzeile als lila Kopf mit Verlauf oben in der Upgrade-Karte; die freie
   Überschrift darüber entfällt (auch nach der Entscheidung — schlägt die Regel „bleibt stehen" oben).
   Der Schatten liegt auf dem Ganzen, damit er nicht über den Kopf fällt. */
.k2-seite .m-opt-karte:has(.m-empfehlung__d-kopf) > :is(.m-liste__titel.m-opt-karte__titel, .m-opt-karte__unter) { display: none; }
.m-opt-karte .m-empfehlung:has(> .m-empfehlung__d-kopf) { border-radius: var(--m-gutschein-radius); box-shadow: var(--m-gutschein-schatten); }
.m-empfehlung__d-kopf {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 28px 18px; text-align: center;
  border-radius: var(--m-gutschein-radius) var(--m-gutschein-radius) 0 0; background: var(--m-verlauf-band); color: var(--kk-white);
}
.m-empfehlung__d-titel { display: flex; align-items: center; gap: 10px; font-size: var(--t-h2); font-weight: var(--fw-bold); letter-spacing: var(--m-lw-titel); }
/* Owner 12.10. („Die Sparkle-Icons können mobile weg, damit der Text besser umbrechen kann"): am Handy ohne ✨ —
   der Titel bekommt die ganze Kopfbreite. Ab 861 px stehen sie wie bisher links und rechts. */
.m-empfehlung__d-titel > span[aria-hidden="true"] { display: none; }
@media (min-width: 861px) {
  .m-empfehlung__d-titel > span[aria-hidden="true"] { display: inline; }
}
.m-empfehlung__d-unter { font-size: var(--t-klein); color: var(--m-schutz-hero-leise); }
.m-empfehlung:has(> .m-empfehlung__d-kopf) .m-bk { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; }
/* Owner 01.10.: unter dem lila Kopf keine runden Ecken mehr am Kartenkopf (vorher 15 px, die weiße Fläche
   lag sichtbar rund im Lila). */
.m-empfehlung:has(> .m-empfehlung__d-kopf) .m-bk > .m-baustein__kopf { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Owner 01.10. („die Gap ist zu groß"): zwischen Tabelle und Upgrade-Karte dieselbe Luft wie unter dem
   Header (--m-kopf-a2-luft-unten, 48 px). ~~18 + 72 + 4 + 30 px = 124 px~~ */
.k2-seite :is(.m-thema, .m-kasse) .m-cta-zeile:has(.m-empfehlung__d-kopf) { margin-top: calc(var(--m-kopf-a2-luft-unten) - 18px); }   /* auch Kassenwechsel (Owner 01.10.) */
/* Owner 12.10. („mehr Abstand, ca. +50 %"): auf den Themenseiten eigener Token — Desktop 72 px, Handy wie bisher. */
.k2-seite .m-thema .m-cta-zeile:has(.m-empfehlung__d-kopf) { margin-top: calc(var(--m-themen-luft-upgrade) - 18px); }
.k2-seite .m-cta-zeile .m-entscheidung:has(.m-empfehlung__d-kopf) { margin-top: 0; }
.k2-seite .m-opt-karte .m-empfehlung:has(> .m-empfehlung__d-kopf) { margin-top: 0; }
@media (min-width: 861px) {
  /* Owner 01.10.: Kopfleiste und Sidebar bilden EINEN weißen Rahmen um den Inhalt — keine Linie mehr zwischen
     beiden, die Innenecke oben links am Inhalt ist rund (::after der Sidebar füllt die Ecke außerhalb des
     Viertelkreises weiß). „Haus der Gesundheit" ohne eigene Fläche. ~~Kopfleiste hell-beige mit Linie unten,
     Sidebar mit Linie rechts, Haus-Kopf auf beiger Fläche~~ */
  :root:has(.k2-seite) .app-topbar { border-bottom-color: transparent; background: var(--m-flaeche); }
  .k2-seite > .k2-menue { border-right-color: transparent; }
  .k2-seite > .k2-menue::after {
    content: ""; position: absolute; top: 0; left: 100%; width: var(--k2-ecke-radius); height: var(--k2-ecke-radius); pointer-events: none;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--k2-ecke-radius) - .5px), var(--m-flaeche) var(--k2-ecke-radius));
  }
}
.k2-seite > .k2-menue .k2-menue__haus, .k2-seite > .k2-menue .k2-menue__haus:hover { background: none; }
/* Owner 12.10. (Folgeauftrag): die Haus-Karte ist ein Link auf die Haus-Fläche im Inhalt — aktiv markiert wie ein
   Themen-Eintrag (.k2-menue__eintrag--aktiv), ohne Unterstreichung beim Hover. */
.k2-menue__haus:hover { text-decoration: none; }
.k2-seite > .k2-menue .k2-menue__haus--aktiv, .k2-seite > .k2-menue .k2-menue__haus--aktiv:hover { border-radius: var(--m-radius); background: var(--k2-menue-aktiv-bg); box-shadow: inset 0 0 0 1px var(--k2-menue-aktiv-rand); }
/* Owner 01.10.: die Upgrade-Karte ist auf dem Desktop etwas breiter als die Spalte, wenn Platz ist — je Seite bis
   --m-upgrade-ueberstand, aber nie näher als --m-kopf-a2-rand an Sidebar und Fensterrand. % = Spaltenbreite.
   ~~Wahl-Kacheln darunter gehen mit~~ Owner 01.10.: „die sollen nicht breiter werden" — sie bleiben in der Spalte. */
.k2-seite .m-opt-karte:has(.m-empfehlung__d-kopf) {
  --_ueber: clamp(0px, (100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 100%) / 2 - var(--m-kopf-a2-rand), var(--m-upgrade-ueberstand));
}
.k2-seite .m-opt-karte:has(.m-empfehlung__d-kopf) > .m-empfehlung { margin-right: calc(-1 * var(--_ueber)); margin-left: calc(-1 * var(--_ueber)); }
/* Owner 01.10.: „mtl." hinter dem Betrag in der Upgrade-Karte raus — darunter steht „im Monat". Am Handy fehlt
   diese Zeile, dort bleibt „mtl.". */
.m-empfehlung .m-bk__effektiv-mtl { display: none; }
/* Owner 01.10.: „Nein, danke" bekommt einen Hover-Zustand wie „Anderen Tarif wählen" — neutral statt lila:
   dunklerer Rand, das Icon-Rund dunkelt nach. */
.m-gutschein-wahl__knopf { transition: border-color .2s ease; }
.m-gutschein-wahl__knopf .m-gutschein-wahl__icon { transition: background-color .2s ease, color .2s ease; }
.m-gutschein-wahl__knopf--leise:hover { border-color: var(--m-text-leise); }
.m-gutschein-wahl__knopf--leise:hover .m-gutschein-wahl__icon { background: var(--m-seg-bg); color: var(--m-text); }

/* ══ Handy-Fassung der Desktop-Module (Owner 01.10.: „Mobile sieht alles ja noch alt aus?!") ══
   Die Desktop-Regeln gelten seit 01.10. an allen Breiten (vorher je in @media (min-width: 861px)).
   Hier nur, was bei 375 px anders sitzen muss: zuerst die Handy-Werte, danach im
   min-width-Block die Desktop-Werte zurück. Größen hängen an Tokens (tokens.css, je Breite). */

/* Owner 01.10. („sieht mobil noch anders aus als auf dem Desktop"): Konto-Symbol ohne Kreis und Zähler wie oben in
   der Desktop-Leiste; die Schublade zeigt die Sidebar (Haus, Linie, Ringe, Summen-Karte) ohne „Deine aktuelle
   Situation" — der Kopf behält nur das ✕. */
.k2-mobilkopf .m-konto__symbol { width: auto; height: auto; background: none; }
.k2-mobilkopf .m-konto__symbol .m-warenkorb { display: none; }
.k2-menue__titel { display: none; }
.k2-menue__kopf { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 0; border: 0; background: none; }

/* Owner 01.10. („komische schwarze Outline oben"): keine dunkle Linie über dem Summen-Fuß der Schublade.
   Die Berater-Links stehen untereinander als zeilenfüllende Knöpfe (am Desktop sind sie in der Leiste oben). */
.k2-menue__fuss { border-top: 0; }
.k2-menue__berater { flex-direction: column; gap: 8px; border-top-color: var(--m-linie-fein); }
.k2-menue__berater-link {
  display: flex; align-items: center; justify-content: center; min-height: var(--m-knopf-h); padding: 0 16px;
  border: 1px solid var(--m-knopf-sek-rand); border-radius: var(--m-knopf-radius); background: var(--m-flaeche);
  color: var(--m-knopf-sek-fg); font-weight: var(--fw-medium); text-align: center; text-decoration: none;
}

/* Owner 01.10. („hier passt der Header noch nicht"): ein Thema ohne Inhalt (z. B. „kein Interesse") zeigt den Kopf
   wie die anderen Seiten (A2 + H4) — Foto oben, darauf das lila Band mit dem Titel. ~~Titel über dem Foto~~ */
.m-thema:not(:has(> :not(.m-kopf))) > .m-kopf .m-kopf__bild { grid-row: 1; height: var(--m-kopf-a2-foto-h); border-radius: var(--m-schutz-hero-radius); }
.k2-seite:not(#typo) .m-thema:not(:has(> :not(.m-kopf))) > .m-kopf .m-kopf__zeile .m-kopf__titel {
  grid-row: 2; position: relative; z-index: 1; margin: calc(-1 * var(--m-kopf-a2-ueberlapp)) 0 0; padding: 22px 20px;
  border-radius: var(--m-kopf-a2-radius); background: var(--m-kopf-karte-bg); color: var(--m-kopf-karte-titel); box-shadow: var(--m-kopf-karte-schatten);   /* Owner 12.10.: weiß, ~~lila Verlauf, weiße Schrift~~ */
  font-size: var(--t-zahl-mittel); font-weight: var(--fw-bold); line-height: 1.15;
}
@media (min-width: 861px) {
  .m-thema:not(:has(> :not(.m-kopf))) > .m-kopf .m-kopf__bild {
    --_breit: max(100%, min(calc(100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 2 * var(--m-kopf-a2-rand)), calc(100% + 2 * var(--m-upgrade-ueberstand))));
    width: var(--_breit); max-width: none; margin: 0 calc((100% - var(--_breit)) / 2);
  }
  .k2-seite:not(#typo) .m-thema:not(:has(> :not(.m-kopf))) > .m-kopf .m-kopf__zeile .m-kopf__titel { padding: 24px 28px; }
}

/* Owner 01.10. („trenne Beitrag und 7 € nicht"): Betrag mit seinem Wort bleibt in einer Zeile. */
.m-zusammen { white-space: nowrap; }

/* Wie am Desktop: nur der lange Seitentitel, kein „Gesundheitskonzept für …" am Seitenende. */
.m-kopf__titel-kurz, .m-schluss { display: none; }
/* Owner 01.10. („Das „Beim Zahnarzt" kann mobil weg"): der Seitenname unter der Icon-Leiste — am Desktop schon aus. */
.k2-seite > .m-schritte__name { display: none; }

/* Kopf A2 + H4: Titel oben im Band, Preis darunter über die ganze Breite. */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) { row-gap: 14px; padding-right: 20px; padding-left: 20px; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto { --_breit: calc(100% + 40px); margin-right: -20px; margin-left: -20px; }
.m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-band-text { flex-basis: 100%; }
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel wert" "nach wert"; align-items: center; column-gap: 12px;
  flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--m-schutz-hero-linie); text-align: left;
}
.m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis > .m-schutz__d-preis-titel { grid-area: titel; }
.m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis > .m-schutz__d-effektiv { grid-area: wert; }
.m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis > .m-schutz__d-beitrag { grid-area: nach; }

/* Trello 447 (Alex 12.10., Handy): „Mit Optimierung" blieb rechts im Kopf Platz frei — der Preisblock .kap--hero ist
   300 px breit (PR 1373, für den Desktop rechts neben dem Titel). Unter dem Titel nimmt er die ganze Breite; der
   Desktop stellt die 300 px im 861-px-Block unten wieder her. */
.m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis.m-schutz__d-preis--kap { display: block; }
.m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis--kap .kap--hero { width: 100%; }

/* Legende + Schalter: der Schalter steht über der Legende, über die ganze Breite. */
.m-liste__d-legende { flex-wrap: wrap; row-gap: 14px; }
.m-liste__d-leg { white-space: nowrap; }
.k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter--segment { order: -1; width: 100%; margin-left: 0; }
.m-liste__d-schalter--segment .m-liste__d-seg { flex: 1; text-align: center; }

/* Tabelle: Titel über die ganze Zeile, darunter Balken | heute → mit, die Pille darunter. */
.m-liste__d-kopf { grid-template-columns: minmax(0, 1fr) var(--m-vgl-spalte) var(--m-vgl-pfeil) var(--m-vgl-spalte-mit); row-gap: 4px; padding: 16px 16px 10px; }
.m-liste__d-kopf > .m-liste__d-kopf-titel { grid-column: 1 / -1; }
.m-liste__d-kopf > span:nth-child(2) { grid-column: 2; }
.m-liste__d-kopf > span:nth-child(5) { display: none; }
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) { grid-template-columns: minmax(0, 1fr) var(--m-vgl-spalte) var(--m-vgl-pfeil) var(--m-vgl-spalte-mit); grid-template-rows: auto; padding: 14px 16px; }
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__titel,
.k2-detail__panel .m-risiko--tafel:not(:has(.m-risiko__d-balken)) > .m-risiko__titel { grid-column: 1 / -1; grid-row: 1; }
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > :is(.m-risiko__d-heute, .m-risiko__d-pfeil, .m-risiko__d-mit) { grid-row: 2; }
/* Zeilen ohne Beträge („Kassenpatient wartet"): der Heute-Text nutzt die Breite unter dem Titel. */
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__d-heute.m-risiko__d-text { grid-column: 1 / 3; text-align: left; }
/* Owner 12.10. („möglichst kurz", kein Umbruch): die Kurzform rechts bleibt einzeilig und wächst nach
   links in die freie Fläche („Nicht enthalten" brach am Handy in der schmalen Spalte um). */
.k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__d-mit.m-risiko__d-text { justify-self: end; width: max-content; white-space: nowrap; }
.k2-detail__panel .m-risiko--tafel:last-child,
.k2-detail__panel .m-risiko--tafel:has(+ :not(.m-risiko--tafel)) { padding-bottom: 16px; }

/* Upgrade-Karte: eine Spalte; der Preis-Abriss steht unter den Leistungen, der Schalter rechts daneben. */
.m-empfehlung .m-bk > .m-baustein__kopf,
.m-empfehlung .m-bk--offen-desktop > .m-baustein__kopf { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo text" "risiko risiko" "wertung wertung" "abriss abriss"; padding: var(--m-gutschein-kopf-oben) 20px 0; }
.m-empfehlung .m-bk--offen-desktop:has(.m-bk__d-auch) > .m-baustein__kopf { grid-template-areas: "logo text" "risiko risiko" "wertung wertung" "auch auch" "abriss abriss"; }
.m-kasse__gs .m-bk--offen-desktop > .m-baustein__kopf { grid-template-areas: "logo text" "risiko risiko" "wertung wertung" "abriss abriss"; }
.m-empfehlung .m-bk__effektiv,
.m-empfehlung .m-bk--offen-desktop .m-bk__effektiv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel knopf" "wert knopf" "nach knopf";
  align-items: center; justify-items: start; column-gap: 16px; row-gap: 4px; margin: 6px -20px 0; padding: 20px; text-align: left;
}
.m-empfehlung .m-bk__effektiv > .m-bk__effektiv-titel { grid-area: titel; }
.m-empfehlung .m-bk__effektiv > .m-bk__effektiv-wert { grid-area: wert; }
.m-empfehlung .m-bk__effektiv > .m-bk__d-nach { grid-area: nach; }
.m-empfehlung .m-bk__effektiv > .m-bk__d-einloesen { grid-area: knopf; width: auto; margin-top: 0; }

/* Kassen-Kopf (A2 + H4): wie der Themen-Kopf — Preis unter dem Titel, Gründe und Logo untereinander. */
.m-kasse__hero-band:has(.m-kasse__hero-foto) { row-gap: 14px; padding-right: 20px; padding-left: 20px; }
.m-kasse__hero-band .m-kasse__hero-foto { --_breit: calc(100% + 40px); margin-right: -20px; margin-left: -20px; }
.m-kasse__hero-band:has(.m-kasse__hero-foto) > .m-kasse__hero-text { flex-basis: 100%; }
.m-kasse__hero-band:has(.m-kasse__hero-foto) > .m-kasse__hero-preis {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel wert" "nach wert"; align-items: center; column-gap: 12px;
  flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--m-schutz-hero-linie); text-align: left;
}
.m-kasse__hero-preis > .m-kasse__hero-preis-titel { grid-area: titel; }
.m-kasse__hero-preis > .m-kasse__hero-wert { grid-area: wert; }
.m-kasse__hero-preis > .m-kasse__hero-unter { grid-area: nach; }
.m-kasse__hero-koerper { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
.m-kasse__hero-koerper > .m-kasse__hero-logo { order: -1; justify-self: start; max-height: 32px; }
.m-kasse__hero-fuss { flex-wrap: wrap; row-gap: 4px; padding: 14px 20px; }
.m-kasse__hero-jetzt { flex-basis: 100%; margin-left: 0; }

/* Bestand B3: Titel oben im Band, Ersparnis darunter; die zwei Karten untereinander, Pfeil nach unten. */
.m-bestand { margin: 0; }
.m-bestand__band { flex-wrap: wrap; row-gap: 14px; padding: 20px; }
.m-bestand__text { flex-basis: 100%; }
.m-bestand__preis {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "wert" "nach"; row-gap: 4px;
  flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--m-schutz-hero-linie); text-align: left;
}
.m-bestand__preis-titel { grid-area: titel; }
.m-bestand__preis-wert { grid-area: wert; }
.m-bestand__preis-unter { grid-area: nach; }
.m-bestand__karten { grid-template-columns: minmax(0, 1fr); }
.m-bestand__pfeil { justify-self: center; transform: rotate(90deg); }

/* Leistungen-Tabelle in der Upgrade-Karte (Owner 01.10. „funktioniert mobil nicht"): der Leistungsname steht
   über der ganzen Zeile, darunter die Werte in gleich breiten Spalten — ~~feste Namensspalte 200 px~~. */
.k2-seite .m-empfehlung .m-bk__koepfe, .k2-seite .m-empfehlung .m-bk__zeile { grid-template-columns: repeat(var(--m-bk-n, 2), minmax(0, 1fr)); }
.k2-seite .m-empfehlung .m-bk__koepfe > span:first-child { display: none; }
.k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label { grid-column: 1 / -1; padding-bottom: 0; }
/* Getönte Tarif-Spalte läuft am Handy DURCH (Owner 01.10. abends, zwei Screenshots): der Leistungsname liegt hier über
   der ganzen Zeile und unterbrach die Spalte mit Weiß. Der Name bekommt deshalb denselben Ton an der Stelle der
   Spalte — die Zeile merkt sich je Spaltenplatz die Farbe der Zelle darunter (Platz 1–3 = Kind 2–4 hinter dem Namen). */
.k2-seite .m-empfehlung .m-bk__zeile:has(> .m-bk__zelle:nth-child(2).m-bk__f1) { --m-bk-sp1: var(--m-lt-spalte-bg); }
.k2-seite .m-empfehlung .m-bk__zeile:has(> .m-bk__zelle:nth-child(3).m-bk__f1) { --m-bk-sp2: var(--m-lt-spalte-bg); }
.k2-seite .m-empfehlung .m-bk__zeile:has(> .m-bk__zelle:nth-child(3).m-bk__f2) { --m-bk-sp2: var(--m-blau-flaeche); }
.k2-seite .m-empfehlung .m-bk__zeile:has(> .m-bk__zelle:nth-child(4).m-bk__f2) { --m-bk-sp3: var(--m-blau-flaeche); }
.k2-seite .m-empfehlung .m-bk__zeile:has(> .m-bk__zelle:nth-child(4).m-bk__f3) { --m-bk-sp3: var(--m-flaeche-still); }
.k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label {
  background: linear-gradient(to right,
    var(--m-bk-sp1, transparent) 0 calc(100% / var(--m-bk-n, 2)),
    var(--m-bk-sp2, transparent) 0 calc(200% / var(--m-bk-n, 2)),
    var(--m-bk-sp3, transparent) 0 100%);
}
/* Owner 01.10. („ich kann auch drei vergleichen"): Icon über dem Wert statt daneben, weniger Innenabstand —
   so passen auch drei Spalten ohne Silbentrennung. Keine zweite Linie zwischen Name und Werten. */
.k2-seite .m-empfehlung .m-bk__zelle { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 8px 10px 12px; border-top: 0; font-size: var(--t-klein); }
.k2-seite .m-empfehlung .m-bk__kopf { padding: 10px; }
.k2-seite .m-empfehlung .m-bk__kopf :is(.m-bk__name, .m-bk__sub) { font-size: var(--t-fuss); }
.k2-seite .m-empfehlung .m-bk__kopf .m-bk__logo { max-width: 100%; }
.k2-seite .m-empfehlung .m-bk__wert { overflow-wrap: anywhere; hyphens: none; }

/* „Andere Tarife vergleichen" (Owner 01.10. „muss mobil anders angeordnet werden"): ~~Logo in fester Spalte~~,
   „Empfohlen" unter dem Namen statt darüber, Preis und Knopf rechts über beide Zeilen.
   Owner 12.10. („Tarifname immer links. Logo links neben den Betrag."): Name + Gesellschaft stehen ganz links
   (gleiche x-Position, egal wie breit das Logo ist), das Logo sitzt in einer einheitlichen Box rechtsbündig
   direkt vor dem Betrag. */
.k2-seite .m-bk__chip { display: grid; grid-template-columns: minmax(0, 1fr) var(--m-bk-chip-logo-b-handy) auto auto; column-gap: 10px; row-gap: 0; padding: 10px 12px; }
.k2-seite .m-empfehlung .m-bk__chips { padding: 16px 12px 12px; }
:is(.m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-leistungen]) > .m-bk__inhalt { padding: var(--m-bk-reiter-luft) 16px 16px; }
.k2-seite .m-bk__chip > .m-bk__logo { grid-column: 2; grid-row: 1 / span 2; justify-self: end; max-width: 100%; max-height: var(--m-bk-chip-logo-h); }
.k2-seite .m-bk__chip > .m-bk__chip-text { grid-column: 1; grid-row: 1; }
.k2-seite .m-bk__chip > .m-bk__empf { grid-column: 1; grid-row: 2; justify-self: start; margin: 4px 0 0; }
.k2-seite .m-bk__chip > .m-bk__chip-preis { grid-column: 3; grid-row: 1 / span 2; min-width: 0; margin: 0; }
.k2-seite .m-bk__chip > .m-bk__chip-aktion { grid-column: 4; grid-row: 1 / span 2; }
/* „Tarif wechseln" unter der Tabelle: so breit wie die Spalte, darf umbrechen (Owner 01.10. „hier stimmt was nicht"). */
.k2-seite .m-empfehlung .m-bk__fuss-zelle { padding: 12px 6px 0; }
.k2-seite .m-empfehlung .m-bk__fuss-zeile > span:first-child { display: none; }   /* leere Namensspalte */
.k2-seite .m-empfehlung .m-bk__wechsel--fuss { width: 100%; padding: 8px 6px; white-space: normal; text-align: center; line-height: 1.25; }

/* „Anderen Tarif wählen" / „Nein, danke": untereinander. */
.m-gutschein-wahl, .k2-seite .m-gutschein-wahl { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 861px) {
  .m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) { row-gap: 0; padding-right: calc(var(--m-kopf-a2-einzug) + 28px); padding-left: calc(var(--m-kopf-a2-einzug) + 28px); }
  .m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-foto {
    --_breit: max(calc(100% + 2 * (var(--m-kopf-a2-einzug) + 28px)), min(calc(100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 2 * var(--m-kopf-a2-rand)), calc(100% + 2 * (var(--m-kopf-a2-einzug) + 28px) + 2 * var(--m-upgrade-ueberstand))));
    margin-right: calc((100% - var(--_breit)) / 2); margin-left: calc((100% - var(--_breit)) / 2);
  }
  /* Trello 439 (Alex 09.10., Fall 109 Vorsorge): Der Preisblock `.kap--hero` ist 300 px breit (PR 1373) — bei langen
     Titeln („Dein Schutz bei Vorsorge & Brille") brach er unter den Titel nach links. Der Titelblock nimmt nur
     den Restplatz (Basis 0) und bricht selbst um, der Preis bleibt rechts wie beim Zahnarzt. ~~flex-basis: auto~~ */
  .m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-band-text { flex: 1 1 0; min-width: 0; }
  .m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis {
    display: flex; flex-basis: auto; flex-shrink: 0; padding-top: 0; border-top: 0; text-align: right;
  }
  /* Trello 447: am Desktop steht der Preis rechts neben dem Titel — wieder 300 px (Grundregel oben: volle Breite). */
  .m-opt .m-schutz--haupt:not(.m-schutz--bestand) .m-schutz__box:has(.m-schutz__feld--paket) .m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis.m-schutz__d-preis--kap { display: flex; }
  .m-schutz__d-band:has(.m-schutz__d-foto) > .m-schutz__d-preis--kap .kap--hero { width: 300px; }

  /* Owner 12.10. („Mit Optimierung stößt rechts an"): der Schalter schrumpfte neben der nicht umbrechenden Legende
     um ein paar px, die Segmente (flex: none) liefen rechts über den Innenabstand hinaus. Jetzt schrumpft er nie;
     reicht der Platz nicht, rutscht er rechtsbündig in eine eigene Zeile. ~~flex-shrink 1, Legende nowrap~~ */
  .m-liste__d-legende { flex-wrap: wrap; row-gap: 10px; }
  .k2-seite .k2-detail__panel.m-opt .m-liste__d-schalter--segment { flex: none; order: 0; width: auto; margin-left: auto; }
  .m-liste__d-schalter--segment .m-liste__d-seg { flex: none; }

  .m-liste__d-kopf { grid-template-columns: minmax(0, 1fr) var(--m-vgl-spalte) var(--m-vgl-pfeil) var(--m-vgl-spalte-mit); row-gap: 0; padding: 16px 26px 10px; }
  .m-liste__d-kopf > .m-liste__d-kopf-titel { grid-column: auto; }
  .m-liste__d-kopf > span:nth-child(2) { grid-column: auto; }
  .m-liste__d-kopf > span:nth-child(5) { display: inline; }
  .k2-detail__panel .m-risiko:has(.m-risiko__d-heute) { grid-template-columns: minmax(0, 1fr) var(--m-vgl-spalte) var(--m-vgl-pfeil) var(--m-vgl-spalte-mit); grid-template-rows: auto auto; padding: 14px 26px; }
  .k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__titel { grid-column: 1; grid-row: 1; }
  .k2-detail__panel .m-risiko--tafel:not(:has(.m-risiko__d-balken)) > .m-risiko__titel { grid-column: 1; grid-row: 1 / 3; }
  .k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > :is(.m-risiko__d-heute, .m-risiko__d-pfeil, .m-risiko__d-mit) { grid-row: 1 / 3; }
  .k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__d-heute.m-risiko__d-text { grid-column: 2; text-align: right; }
  /* Owner 12.10. („kein Umbruch"): die Kurzform steht in einer Zeile; ist sie breiter als die
     schmale Betrags-Spalte, wächst sie nach links in die freie Titel-Spalte statt umzubrechen. */
  .k2-detail__panel .m-risiko:has(.m-risiko__d-heute) > .m-risiko__d-heute.m-risiko__d-text { justify-self: end; width: max-content; white-space: nowrap; }
  .k2-detail__panel .m-risiko--tafel:last-child,
  .k2-detail__panel .m-risiko--tafel:has(+ :not(.m-risiko--tafel)) { padding-bottom: 20px; }

  .m-empfehlung .m-bk > .m-baustein__kopf { grid-template-columns: auto minmax(0, 1fr) var(--m-gutschein-abriss); grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss" "auf auf abriss"; padding: var(--m-gutschein-kopf-oben) 0 26px 28px; }
  .m-empfehlung .m-bk--offen-desktop > .m-baustein__kopf { grid-template-columns: auto minmax(0, 1fr) var(--m-gutschein-abriss); grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss"; padding: var(--m-gutschein-kopf-oben) 0 26px 28px; }
  .m-empfehlung .m-bk--offen-desktop:has(.m-bk__d-auch) > .m-baustein__kopf { grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss" "auch auch abriss"; }
  .m-kasse__gs .m-bk--offen-desktop > .m-baustein__kopf { grid-template-areas: "logo text abriss" "risiko risiko abriss" "wertung wertung abriss"; }
  .m-empfehlung .m-bk__effektiv,
  .m-empfehlung .m-bk--offen-desktop .m-bk__effektiv {
    display: flex; justify-items: normal; column-gap: normal; row-gap: normal; margin: calc(-1 * var(--m-gutschein-kopf-oben)) 0 -26px 14px; padding: 34px 24px 24px; text-align: center;
  }
  .m-empfehlung .m-bk__effektiv > .m-bk__d-einloesen { width: 100%; margin-top: 10px; }

  .m-kasse__hero-band:has(.m-kasse__hero-foto) { row-gap: 0; padding-right: 28px; padding-left: 28px; }
  .m-kasse__hero-band .m-kasse__hero-foto {
    --_breit: max(calc(100% + 56px), min(calc(100vw - var(--k2-scrollleiste, 0px) - var(--k2-menue-breite-desktop) - 2 * var(--m-kopf-a2-rand)), calc(100% + 56px + 2 * var(--m-upgrade-ueberstand))));
    margin-right: calc((100% - var(--_breit)) / 2); margin-left: calc((100% - var(--_breit)) / 2);
  }
  .m-kasse__hero-band:has(.m-kasse__hero-foto) > .m-kasse__hero-text { flex-basis: auto; }
  .m-kasse__hero-band:has(.m-kasse__hero-foto) > .m-kasse__hero-preis { display: flex; flex-basis: auto; padding-top: 0; border-top: 0; text-align: right; }
  .m-kasse__hero-koerper { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 22px 30px; }
  .m-kasse__hero-koerper > .m-kasse__hero-logo { order: 0; justify-self: auto; max-height: 44px; }
  .m-kasse__hero-koerper .m-kasse__hero-vergleich { grid-column: 2; justify-self: end; }
  .m-kasse__hero-fuss { flex-wrap: nowrap; row-gap: 0; padding: 16px 30px; }
  .m-kasse__hero-jetzt { flex-basis: auto; margin-left: auto; }

  .m-bestand { margin: 0 12px; }
  .m-bestand__band { flex-wrap: nowrap; row-gap: 0; padding: 22px 28px; }
  .m-bestand__text { flex-basis: auto; }
  .m-bestand__preis { display: flex; flex-basis: auto; padding-top: 0; border-top: 0; text-align: right; }
  .m-bestand__karten { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .m-bestand__pfeil { justify-self: auto; transform: none; }

  .k2-seite .m-empfehlung .m-bk__koepfe, .k2-seite .m-empfehlung .m-bk__zeile { grid-template-columns: var(--m-bk-label) repeat(var(--m-bk-n, 2), minmax(0, 1fr)); }
  .k2-seite .m-empfehlung .m-bk__koepfe > span:first-child { display: block; }
  .k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label { grid-column: auto; padding-bottom: revert-layer; background: none; }
  .k2-seite .m-empfehlung .m-bk__zelle { grid-template-columns: auto minmax(0, 1fr); align-content: normal; gap: 8px; padding: var(--m-lt-pad); border-top: 1px solid var(--m-linie-fein); font-size: var(--m-lt-fs); }
  .k2-seite .m-empfehlung .m-bk__kopf { padding: 12px 16px; }
  .k2-seite .m-empfehlung .m-bk__kopf--kasse .m-bk__name, .k2-seite .m-empfehlung .m-bk__kopf--mein .m-bk__name { font-size: 14px; }
  .k2-seite .m-empfehlung .m-bk__kopf--mein .m-bk__sub { font-size: 13px; }
  .k2-seite .m-empfehlung .m-bk__wert { overflow-wrap: normal; hyphens: manual; }

  /* Owner 12.10.: Desktop einzeilig — Name links, „Empfohlen", dann Logo-Box direkt vor dem Betrag. */
  .k2-seite .m-bk__chip { grid-template-columns: minmax(0, 1fr) auto var(--m-bk-chip-logo-b) minmax(var(--m-bk-chip-preis-min), auto) auto; padding: 8px 10px; }
  .k2-seite .m-empfehlung .m-bk__chips { padding: 20px 24px 16px; }
  :is(.m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-leistungen]) > .m-bk__inhalt { padding: var(--m-bk-reiter-luft) 22px 18px; }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek > .m-bk__titel { flex: 1 1 0; gap: 12px; padding: 18px 22px; }
  :is(.m-empfehlung .m-bk--offen-desktop, .m-uebersicht__bk) .m-bk__sek:has([data-m-bk-svg]) > .m-bk__inhalt { padding: 18px 22px; }
  .k2-seite .m-bk__chip > :is(.m-bk__chip-text, .m-bk__empf, .m-bk__logo, .m-bk__chip-preis, .m-bk__chip-aktion) { grid-row: 1; }
  .k2-seite .m-bk__chip > .m-bk__empf { grid-column: 2; margin: 0; }
  .k2-seite .m-bk__chip > .m-bk__logo { grid-column: 3; }
  .k2-seite .m-bk__chip > .m-bk__chip-preis { grid-column: 4; }
  .k2-seite .m-bk__chip > .m-bk__chip-aktion { grid-column: 5; }
  .k2-seite .m-empfehlung .m-bk__fuss-zelle { padding: 12px 16px 0; }
  .k2-seite .m-empfehlung .m-bk__fuss-zeile > span:first-child { display: block; }
  .k2-seite .m-empfehlung .m-bk__wechsel--fuss { width: auto; padding: var(--m-knopf-kopf-pad); white-space: nowrap; line-height: normal; }

  .k2-seite .m-gutschein-wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .m-gutschein-wahl { grid-template-columns: minmax(0, var(--m-gutschein-kachel-gross)) minmax(0, 1fr); }
}

/* Trello 432 (Owner-Design 09.10.): Preisfeld `.kap` im Preis-Abriss der Upgrade-Karte.
   Am Handy eine Spalte (Preisfeld, darunter der Schalter in voller Breite) statt
   Titel/Wert links + Schalter rechts; am Desktop ist der Abriss breiter (--kap-abriss),
   sonst stießen „übernimmt" und der Betrag aneinander. */
.m-empfehlung .m-bk__effektiv.m-bk__effektiv--kap { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.m-empfehlung .m-bk__effektiv--kap > .m-bk__d-einloesen { width: 100%; margin-top: 0; }
@media (min-width: 861px) {
  .m-empfehlung .m-bk:has(.m-bk__effektiv--kap) > .m-baustein__kopf { grid-template-columns: auto minmax(0, 1fr) var(--kap-abriss); }
  .m-empfehlung .m-bk__effektiv.m-bk__effektiv--kap { padding: 34px 20px 24px; }
}

/* ══ Seitenleiste ein-/ausklappen (Trello 438, Alex 09.10.: „störend im Beratergespräch"; Owner-Wahl:
   schmale Icon-Leiste, im Browser gemerkt) — nur Desktop ══════════════════════════════════════════════
   Zustand = data-k2-menue-zu am <html> (base.html vor dem Zeichnen, app.js schaltet). Eingeklappt wird
   nur --k2-menue-breite-desktop schmal: Raster, Kopf-Fotos und Upgrade-Überstand rechnen damit und ziehen
   von selbst mit. Es bleiben Haus-Symbol, Themen-Icons (Name als title) und der Knopf; Beträge, Fuß und
   der M&M-Knopf sind weg.
   Trello 441 (Alex 10.10.): eingeklappt steht der Knopf mittig unter den runden Icons (margin-inline auto
   statt nur justify-content — der Knopf ist nur so breit wie sein Inhalt, saß deshalb bei 27 statt 41 px);
   Grundzustand ist EINGEKLAPPT, gemerkt wird nur „aufgeklappt" (k2-menue-offen). Den M&M-Knopf blendet
   der Zustand nur auf der Konzeptseite aus (:has(.k2-seite)) — das Attribut steht am <html> JEDER Seite.
   ~~Grundzustand aufgeklappt, gemerkt k2-menue-zu~~ */
.k2-menue__klapp { display: none; }
@media (min-width: 861px) {
  .k2-seite > .k2-menue .k2-menue__klapp {
    display: flex; flex: none; align-items: center; gap: 8px; margin: 4px 8px 10px; padding: 8px 10px; border: 0; border-radius: var(--m-radius-innen);
    background: none; color: var(--m-text-leise); font: inherit; font-size: var(--t-klein); cursor: pointer; transition: background-color .2s ease, color .2s ease;
  }
  .k2-seite > .k2-menue .k2-menue__klapp:hover { background: var(--k2-menue-hover-bg); color: var(--m-text); }
  .k2-seite > .k2-menue .k2-menue__klapp:focus-visible { outline: 2px solid var(--m-aktion); outline-offset: 2px; }
  .k2-menue__klapp-icon { flex: none; width: 18px; height: 18px; transition: transform .2s ease; }

  :root[data-k2-menue-zu] { --k2-menue-breite-desktop: var(--k2-menue-breite-zu); }
  :root[data-k2-menue-zu] .k2-seite > .k2-menue { overflow-x: hidden; }
  :root[data-k2-menue-zu] .k2-seite > .k2-menue :is(.k2-menue__haus-text, .k2-menue__kopf, .k2-menue__name, .k2-menue__vn, .k2-menue__wert, .k2-menue__fuss, .k2-menue__klapp-text) { display: none; }
  :root[data-k2-menue-zu] .k2-seite > .k2-menue .k2-menue__eintrag,
  :root[data-k2-menue-zu] .k2-seite > .k2-menue .k2-menue__eintrag:has(.k2-menue__vn) { grid-template-columns: var(--k2-menue-bild); }
  :root[data-k2-menue-zu] .k2-seite > .k2-menue .k2-menue__eintrag:has(.k2-menue__vn) .k2-menue__bild { grid-row: auto; }
  :root[data-k2-menue-zu] .k2-seite > .k2-menue .k2-menue__klapp { justify-content: center; margin-right: auto; margin-left: auto; }
  :root[data-k2-menue-zu] .k2-menue__klapp-icon { transform: rotate(180deg); }
  :root[data-k2-menue-zu]:has(.k2-seite) :is(.mmm__oeffnen, .mmm__pille) { display: none; }
}


/* ── Kassenseite nach Owner-Abnahme der Vorschau 10.10. (Finn 11.10., wissen/design-system.md
   §Kassenseite Vorschau 10.10.) — feste Kachel, Vorteile ohne Box-Überschrift, Beitrags-Strahl,
   Vergleich im Fuß der lila Karte, „Sicher wechseln" mit der Empfehlung. Handy + Desktop. ── */
.m-bk__sek--fest > .m-bk__titel { cursor: default; }
.m-kasse__mehr .m-bk__sek.m-bk__sek--fest > .m-bk__titel::after { content: none; }
.m-bk__sek--fest .m-bk__z--summe { gap: 12px; }
.m-bk__sek--fest .m-bk__z--summe .k2-wert { white-space: normal; text-align: right; }
.m-bk__titel--held { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: var(--fw-semibold); }
.m-bk__z--lang.m-bk__z--bild { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.m-bk__z-text { display: flex; flex-direction: column; gap: 2px; }
.m-bk__bild { flex: none; width: 44px; height: 44px; object-fit: contain; }
.m-bk__bild--gross { width: 64px; height: 64px; }

/* Beitrags-Strahl in der lila Kassen-Karte (nur BKK firmus; Finn 13.10., Vorschau zb-strahl-2026-10-13):
   günstigste Kasse links, teuerste rechts. Handy: Randwerte + Ø über dem Strahl, Empfehlung + heute
   darunter (ohne Kassennamen — die stehen direkt darüber in der Karte). Computer (ab 861 px):
   umgekehrt, Empfehlung + heute mit Namen über dem Strahl. `--pos`/`--neu`/`--heute` setzt das
   Template inline (Lage auf dem Strahl); 0 % ist nur der Rückfall. */
.m-zbs { --pos: 0%; display: flex; flex-direction: column; margin: 18px 4px 6px; }
.m-zbs__achse { order: -1; margin: 0 0 8px; }
.m-zbs__werte { order: 2; margin: 10px 0 0; }
/* Feste Breite --w: die Empfehlung endet an ihrem Punkt (nie über den linken Rand), heute beginnt an
   seinem — rückt nach rechts, wenn die Empfehlung sonst überdeckt würde, nie über den rechten Rand. */
/* ~~position: absolute + left~~ — Finn 29.10. („AOK Rheinland-Pfalz/Saarland ragt links raus"): beide
   Werte liegen übereinander in EINER Raster-Zelle und werden per margin-left verschoben (gleiche
   Formeln wie vorher left). So wächst die Zeile mit, wenn ein langer Kassenname umbricht — absolut
   positioniert lief er über den Kartenrand bzw. in den Inhalt darüber. */
.m-zbs__werte { --w: 8.6em; --neu: 0%; --heute: 0%; display: grid; grid-template-columns: 100%; min-height: 1.5em;
  font-size: 12.5px; line-height: 1.3; }
.m-zbs__wert { grid-area: 1 / 1; align-self: start; width: var(--w); display: flex; flex-direction: column; white-space: nowrap; }
.m-zbs__wert b { font-size: 14px; font-weight: var(--fw-semibold); }
.m-zbs__name { display: none; white-space: normal; }
.m-zbs__wert--neu { margin-left: max(0px, calc(var(--neu) - var(--w) + 6px)); align-items: flex-end; text-align: right; color: var(--m-zbs-guenstig); }
.m-zbs__wert--neu.m-zbs__wert--rand { align-items: flex-start; text-align: left; }
.m-zbs__wert--heute { margin-left: min(calc(100% - var(--w)), max(calc(var(--heute) - 6px), calc(max(var(--neu) + 6px, var(--w)) + 10px)));
  color: var(--m-zbs-heute); }
.m-zbs__balken { position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--m-zbs-guenstig), var(--m-zbs-mitte) 45%, var(--m-zbs-teuer)); }
.m-zbs__strich { position: absolute; top: -6px; bottom: -6px; left: var(--pos); width: 2px;
  transform: translateX(-50%); background: var(--m-zbs-schnitt); }
.m-zbs__marke { position: absolute; top: 50%; left: var(--pos); width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 3px solid var(--m-flaeche); }
.m-zbs__marke--neu { width: 22px; height: 22px; background: var(--m-zbs-guenstig); box-shadow: 0 0 0 2px var(--m-zbs-guenstig); }
.m-zbs__marke--heute { background: var(--m-zbs-heute); }
/* Randwerte + Ø — leise. Handy: Wert über Wort. */
.m-zbs__achse { position: relative; display: flex; justify-content: space-between;
  font-size: 12px; line-height: 1.3; color: var(--m-text-leise); }
.m-zbs__achse b { font-weight: var(--fw-semibold); }
.m-zbs__ende { display: flex; flex-direction: column; }
.m-zbs__ende--rechts { margin-left: auto; text-align: right; align-items: flex-end; }
.m-zbs__schnitt { position: absolute; top: 0; left: var(--pos); transform: translateX(-50%);
  white-space: nowrap; color: var(--m-zbs-schnitt); }
@media (min-width: 861px) {
  .m-zbs__achse { order: 3; margin: 8px 0 0; }
  .m-zbs__werte { order: 0; margin: 0 0 8px; --w: 11em; min-height: 2.8em; }
  .m-zbs__wert { align-self: end; }
  .m-zbs__name { display: block; }
  .m-zbs__ende { display: block; }
}

/* Fuß der lila Kassen-Karte (günstigere Kasse): heute → Empfehlung wie die Vergleichskarte, volle Breite. */
.m-kasse__hero-fuss.m-kasse__hero-fuss--vergleich { display: block; }
.m-kasse__hero-fuss--vergleich .m-kasse__vn-pfeil { display: block; }
.m-kasse__hero-fuss--vergleich :is(.m-kasse__vn-zb, .m-kasse__vn-betrag) { white-space: normal; }
/* Knöpfe „Kassen vergleichen" + „Andere Kasse wählen" in EINER Reihe (Finn 11.10.): Handy (Basis)
   nebeneinander, gleich breit, ohne Umbruch; Vergleich etwas kompakter, damit Beträge und
   Zusatzbeitrag nicht mitten im Wert umbrechen. Desktop setzt Breite und Abstände zurück. */
.m-kasse__knoepfe { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
.m-kasse__knoepfe > .m-kasse__andere { flex: 1 1 0; min-width: 0; margin: 0; justify-content: center; gap: 6px; padding-inline: 8px; white-space: nowrap; }
.m-kasse__hero-fuss--vergleich .m-kasse__vn-seiten { gap: 8px; }
.m-kasse__hero-fuss--vergleich .m-kasse__vn-pfeil { width: 20px; height: 20px; }
@media (min-width: 861px) {
  .m-kasse__knoepfe > .m-kasse__andere { flex: none; gap: var(--m-knopf-gap); padding: var(--m-knopf-klein-pad); }
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-seiten { gap: 12px; }
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-pfeil { width: 26px; height: 26px; }
}
@media (max-width: 400px) {
  .m-kasse__knoepfe > .m-kasse__andere { font-size: 14px; }
  .m-kasse__knoepfe > .m-kasse__andere svg { display: none; }
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-betrag { font-size: 15px; }
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-zb { font-size: 12px; }
}
@media (max-width: 370px) {
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-betrag { font-size: 14px; }
}
/* Owner 12.10.: heute und Empfehlung je in einem eigenen Container (gleiche Höhe, Pfeil dazwischen bleibt,
   Empfehlung dezent grün hervorgehoben). Handy: untereinander gestapelt, der Pfeil zeigt nach unten. */
.m-kasse__hero-fuss--vergleich .m-kasse__vn-seite { box-sizing: border-box; padding: var(--m-kasse-vn-box-pad); border: 1px solid var(--m-kasse-vn-box-rand); border-radius: var(--m-kasse-vn-box-radius); background: var(--m-kasse-vn-box-bg); }
.m-kasse__hero-fuss--vergleich .m-kasse__vn-seite--neu { border-color: var(--m-kasse-vn-box-neu-rand); background: var(--m-kasse-vn-box-neu-bg); }
/* Handy zuerst, Desktop ab 861 px (mobil.css trägt keine 860-px-Hülle, Desktop-Runde 16.09.). */
.m-kasse__hero-fuss--vergleich .m-kasse__vn-seiten { flex-direction: column; align-items: stretch; }
.m-kasse__hero-fuss--vergleich .m-kasse__vn-pfeil { transform: rotate(90deg); }
@media (min-width: 861px) {
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-seiten { flex-direction: row; }
  .m-kasse__hero-fuss--vergleich .m-kasse__vn-pfeil { transform: none; }
}

/* „Sicher wechseln" erscheint mit der Empfehlung (schlägt die Ausblend-Regeln der Hero-Karte). */
.m-kasse .m-kasse__gruende.m-kasse__gruende--mit-empfehlung:not([hidden]) { display: block; }
@media (min-width: 861px) {
  .m-kasse__gruende--mit-empfehlung .m-kasse__buehne .m-kasse__punkte { justify-content: center; }
}

/* Abstände wie vor dem Abschnitts-Tausch (PR 1335, gemessen am Stand beaf0bfe): erster Abschnitt
   unter der Kassen-Karte 40 px, zweiter Abschnitt 66 px. */
.m-kasse .m-kasse__mehr.m-kasse__mehr--wechsel { margin-top: 6px; }
.m-kasse .m-kasse__mehr--wechsel + .m-kasse__gruende { margin-top: calc(var(--m-upgrade-luft-oben) - 12px); }

/* ── „Ein Streifen je Behandlung" (Owner 12.10., Trello 80foZs4H) — Lage in der Zeile: der Streifen steht als
   eigene Zeile unter Titel und Beträgen über die volle Breite (grid-column 1 / -1). Handy: Titel, Beträge,
   Streifen, Pille untereinander; Desktop: Titel | heute → mit | Pille in einer Zeile, darunter der Streifen.
   ~~Balken links unter dem Titel (Spalte 1, Zeile 2)~~ ── */
.k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-balken) > .m-risiko__d-balken { grid-column: 1 / -1; grid-row: 3; margin-top: var(--m-streifen-abstand); }
@media (min-width: 861px) {
  .k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-balken) > :is(.m-risiko__titel, .m-risiko__d-heute, .m-risiko__d-pfeil, .m-risiko__d-mit) { grid-row: 1; }
  .k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-balken) > .m-risiko__d-balken { grid-row: 2; }
}

/* ── Owner 12.10. (Trello UWFJGAaP + G2LIFThl, Canvas „Kundenscreen Tickets", Vorschlag 1) ──
   (1) Pille „In deinem Konzept" (_m_im_konzept.html): über dem Namen der Baustein-Karte und über dem
   Titel im lila Kopfband der Schutz-Karte (Variante --band: weiß, durchscheinend). Nur, wo der Baustein
   im Konzept rechnet; schaltet jemand den Schalter „Aktiv" aus, geht sie mit.
   (2) Ersparnis-Box grün: „Du sparst jeden Monat" in Grün auf zarter grüner Fläche — Violett bleibt
   für Preise („Effektiver Beitrag", Kassen-Anteil). Spezifität über .m-empfehlung .m-bk__effektiv*. */
.m-im-konzept {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; margin-bottom: 6px;
  padding: var(--m-im-konzept-pad); border-radius: var(--r-full);
  background: var(--m-im-konzept-bg); color: var(--m-im-konzept-fg);
  font-size: var(--m-im-konzept-fs); font-weight: var(--fw-bold); line-height: 1; letter-spacing: normal; white-space: nowrap;
}
.m-im-konzept__icon { flex: none; width: var(--m-im-konzept-icon); height: var(--m-im-konzept-icon); stroke-width: 2.4; }
.m-im-konzept--band { margin-bottom: 4px; background: var(--m-im-konzept-band-bg); color: var(--m-im-konzept-band-fg); }
.m-bk:has(.m-schalter[aria-checked="false"]) .m-im-konzept { display: none; }
/* Owner 12.10.: Schalter „aus" — DIESELBE Karte bleibt stehen (kein Ersatz-Block, gleiche Höhe), nur gedämpft;
   der Schalter selbst bleibt voll sichtbar (uebernehmen_mobil.js setzt .m-bk--aus). */
.m-bk--aus > .m-baustein__kopf > :not(.m-bk__effektiv), .m-bk--aus .m-bk__effektiv > :not(.m-schalter) { opacity: var(--m-bk-aus-deckkraft); filter: grayscale(1); }
.m-bk.m-bk--aus .m-bk__effektiv, .m-bk.m-bk--aus .m-bk__effektiv.m-bk__effektiv--spart { background: var(--m-bk-aus-flaeche); }
.m-bk .m-bk__effektiv.m-bk__effektiv--spart { background: var(--m-effektiv-spart-bg); }
.m-bk .m-bk__effektiv--spart .m-bk__effektiv-titel { color: var(--m-effektiv-spart-fg); font-weight: var(--fw-bold); }
.m-bk .m-bk__effektiv--spart .m-bk__effektiv-wert { color: var(--m-effektiv-spart-fg); }

/* Owner 12.10. („nimm die Animationen raus, die die Elemente nacheinander erscheinen lassen"): auf der
   Konzeptseite erscheinen Pille, Betrag „mit Optimierung", Streifen und Zeilen sofort — kein Einblenden,
   Fallen, Einschieben, Wachsen oder Hochzählen (balken_desktop.js ist nicht mehr eingebunden).
   ~~m-bilanz-fallen · m-einblenden · m-einschieben · Breiten-/Farbübergang der Streifen~~ */
.k2-seite .m-risiko :is(.m-risiko__d-mitteil, .m-risiko__zeile, .m-risiko__mit, .m-risiko__d-teil) { animation: none !important; }
.k2-seite .m-risiko :is(.m-risiko__d-teil, .m-risiko__d-heute, .m-risiko__d-mit) { transition: none !important; }
/* … ebenso Spaltenkopf „mit Optimierung" und Tarif im Kopfband: sofort statt Einblenden (~~opacity .4s~~). */
.k2-seite :is(.m-liste__d-kopf-mit, [data-m-nur-mit-opt]) { transition: none !important; }

/* Owner 12.10. („die Scrollbar verursacht Layout-Shifts beim Wechsel zwischen Screens"): auf der Konzeptseite
   scrollt das Dokument. Kasse/Übersicht passen ins Fenster (kein Balken), Themen nicht — der Inhalt sprang um
   die halbe Balkenbreite (gemessen 7,5 px). Der Platz für den Balken bleibt jetzt immer reserviert, auch wenn
   das Haus der Gesundheit das Scrollen sperrt (overflow: hidden). Die Themenliste im Menü (81 px Schiene) bekommt
   bewusst KEINEN reservierten Balken — sie scrollt bei üblichen Fensterhöhen nicht, 15 px Reserve würden die
   Icons aus der Mitte schieben. */
html:has(.k2-seite) { scrollbar-gutter: stable; }

/* Owner 12.10. („Es muss deutlicher werden, dass man das klicken kann"): die Summen-Karte im Menü ist als Ganzes der
   Link zur Übersicht — Hover/Fokus färben die Karte; unter der Linie steht der Secondary-Knopf der App
   (.btn .btn-secondary .btn-sm, components.css) in voller Kartenbreite. ~~eigene Pille „Zur Übersicht →"~~
   (ragte rechts über die Karte, Nacharbeit 12.10.). */
.k2-seite > .k2-menue .k2-menue__fuss:has(> a.k2-menue__fuss-vn) { transition: background-color var(--t-fast); }
.k2-seite > .k2-menue .k2-menue__fuss:has(> a.k2-menue__fuss-vn:is(:hover, :focus-visible)) { background: var(--k2-summe-karte-hover); }
a.k2-menue__fuss-vn:focus-visible { outline: 2px solid var(--k2-summe-fokus); outline-offset: 6px; border-radius: var(--r-sm); }
.k2-menue__summe-fuss { display: block; }
.k2-menue__summe-knopf.btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
a.k2-menue__fuss-vn:is(:hover, :focus-visible) .k2-menue__summe-knopf.btn-secondary { background: var(--btn-secondary-bg-hover); }
/* ── Leistungs-Vergleich der Baustein-Karte (Owner 12.10., Punkte 6 + 7) ──────────────────────────
   (a) ~~Status-Icons in den Zellen (⊖ / ✓ im Kreis, ::before mit Lucide-Maske)~~ — weg; die Farbe der Werte bleibt.
   (b) Info-Icon (m-bk__frage) direkt hinter dem Label-Text statt ~~rechtsbündig am Zellenende~~.
   (c) Zwischen farbigen Spalten eine schmale Lücke (--m-bk-spalten-luecke); jede Spalte behält ihre runden Ecken.
   Handy und Desktop. Schrift im Vergleich und in den Chips/Verlauf der Karte nie unter --m-bk-schrift-min. */
.k2-seite .m-empfehlung .m-bk__zelle::before, .k2-seite .m-empfehlung .m-bk__zelle--neutral::before { display: none; }
.k2-seite .m-empfehlung .m-bk__zelle, .k2-seite .m-empfehlung .m-bk__zelle--neutral { grid-template-columns: minmax(0, 1fr); }
.k2-seite:not(#typo) .m-empfehlung .m-bk__label { justify-content: flex-start; gap: var(--m-bk-frage-luecke); }
.k2-seite .m-empfehlung .m-bk__koepfe, .k2-seite .m-empfehlung .m-bk__zeile { column-gap: var(--m-bk-spalten-luecke); }
.k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label {
  --m-bk-sw: calc((100% - (var(--m-bk-n, 2) - 1) * var(--m-bk-spalten-luecke)) / var(--m-bk-n, 2));
  background: linear-gradient(to right,
    var(--m-bk-sp1, transparent) 0 var(--m-bk-sw),
    transparent 0 calc(var(--m-bk-sw) + var(--m-bk-spalten-luecke)),
    var(--m-bk-sp2, transparent) 0 calc(2 * var(--m-bk-sw) + var(--m-bk-spalten-luecke)),
    transparent 0 calc(2 * var(--m-bk-sw) + 2 * var(--m-bk-spalten-luecke)),
    var(--m-bk-sp3, transparent) 0 100%);
}
@media (min-width: 861px) {
  .k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label { background: none; }
}
.m-bk__chip-sub, .m-bk__vl-leg, .m-bk__vl-tip-alter, .m-bk__vl-tip-zeile { font-size: var(--m-bk-schrift-min); }
/* ── Eine Zahl je Zeile (Owner 12.10., „Mach das heute und mit Optimierung weg und auch immer nur eine Zahl.
   Man sieht ja die Veränderung im Balken"): ~~zwei Betragsspalten heute | mit Optimierung~~ — Heute- und
   Mit-Betrag (bzw. -Text) liegen in DERSELBEN Rasterzelle übereinander; der Umschalter zeigt den einen und hält
   den anderen unsichtbar. So steht die Zahl in beiden Zuständen an derselben Stelle, und die Zeile ist so hoch
   wie der höhere der beiden (kein Layout-Shift). Die Pille rechts bleibt wie bisher nur in „Mit Optimierung".
   Handy: Betrag unter dem Titel rechtsbündig, Text-Zeilen linksbündig über die volle Breite; Desktop: beides
   rechtsbündig in den Spalten 2–4. Werte unverändert aus der Rechentafel (_m_kachel.html). ── */
.k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-heute) > :is(.m-risiko__d-heute, .m-risiko__d-mit) { grid-column: 2 / 5; text-align: right; }
.k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-heute) > :is(.m-risiko__d-heute, .m-risiko__d-mit).m-risiko__d-text { grid-column: 1 / -1; text-align: left; }
.k2-seite .m-risiko--tafel.m-risiko--opt > .m-risiko__d-heute { visibility: hidden; }
.k2-seite:not(#typo) .m-risiko--tafel > .m-risiko__d-heute:not(.m-risiko__d-text) { font-size: var(--t-text); }
/* Betragszeile mit Text nur in einem Zustand (z. B. „Deckung nicht belegt" heute, Betrag mit Optimierung): bleibt
   rechtsbündig an der Betragsstelle, damit der Wert beim Umschalten nicht von links nach rechts springt. */
.k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-balken) > :is(.m-risiko__d-heute, .m-risiko__d-mit).m-risiko__d-text { grid-column: 2 / 5; text-align: right; }
@media (min-width: 861px) {
  .k2-detail__panel .m-risiko--tafel:has(.m-risiko__d-heute) > :is(.m-risiko__d-heute, .m-risiko__d-mit).m-risiko__d-text { grid-column: 2 / 5; text-align: right; }
}
/* ── Leistungs-Vergleich, Feinschliff (Owner 12.10.) ─────────────────────────────────────────────
   (d) „Warum ist 50 % nicht auch in stärkerem font weight?": die Teilleistung (--gelb, Farbe bleibt grün =
       --m-gut) stand im Regular, voll/grün im Semibold. Jetzt ALLE Leistungs-Werte (voll/grün/gelb) in
       --m-bk-wert-leistung-fw — in jeder Spalte (Kasse und Bausteine); rot/neutral bleiben Regular/leise.
   (e) „Hier sitzt der Tooltip nicht richtig": das „i" stand als Flex-Kind ~~rechts außen, vertikal mittig
       zwischen zwei Label-Zeilen~~ — jetzt inline in der Textzeile direkt hinter dem letzten Wort; letztes
       Wort + Icon brechen nur gemeinsam um (menue_mobil.js labelMitFrage → .m-bk__label-ende). */
.k2-seite .m-empfehlung :is(.m-bk__zelle--gruen, .m-bk__zelle--voll, .m-bk__zelle--gelb),
.k2-seite .m-empfehlung :is(.m-bk__zelle--gruen, .m-bk__zelle--voll, .m-bk__zelle--gelb) .m-bk__wert { font-weight: var(--m-bk-wert-leistung-fw); }
.k2-seite .m-empfehlung :is(.m-bk__zelle--rot, .m-bk__zelle--neutral) .m-bk__wert { font-weight: var(--fw-regular); }
.m-bk__label-ende { white-space: nowrap; }
.m-bk__label-ende > .m-bk__frage { display: inline-block; margin-left: var(--m-bk-frage-luecke); vertical-align: var(--m-bk-frage-ausrichtung); }

/* ── Leistungs-Vergleich am Handy in ZEILEN statt Spalten (Owner 12.10. „Tabellen mobile in Zeilen aufbauen, nicht in
   Spalten") ── je Leistung ein Block: Leistungsname (+ Info-Icon) über der vollen Breite, darunter je Anbieter eine
   Unter-Zeile „Anbieter · Wert" (m-bk__anb aus menue_mobil.js). Die Baustein-Unter-Zeilen sind in der Farbe ihrer
   Kachel hinterlegt (m-bk__f1–f3, wie bisher die Spalte). ~~Getönte Tarif-Spalte läuft am Handy durch (01.10., Verlauf
   am Namen)~~ — am Handy aus, die Regeln oben greifen nur noch, bis dieser Block sie überschreibt. Die Spaltenköpfe
   werden zur kompakten Legende (Logo · Tarifname · Beitrag), der Kopf der Krankenkasse fällt weg (die Unter-Zeile sagt
   „Krankenkasse"; im Bestand bleibt „Dein Vertrag"). „Tarif wechseln" steht am Handy in der Legende statt in der
   ~~Fußzeile je Spalte~~. Desktop: unverändert Spalten (Rücksetzer im min-width-Block darunter). */
.m-bk__anb { display: none; }
.k2-seite .m-empfehlung .m-bk__koepfe {
  position: static; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--m-bk-unterzeile-luecke); margin: 0 0 var(--sp-3);
}
.k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf--kasse:not(:has(.m-bk__sub)) { display: none; }
.k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-bk-unterzeile-luecke) var(--sp-2);
  padding: var(--m-bk-unterzeile-pad); border-radius: var(--m-radius-innen);
}
.k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf .m-bk__logo { max-height: var(--m-bk-legende-logo-h); max-width: 30%; margin: 0; }
.k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf .m-bk__sub { margin-left: auto; }
.k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf .m-bk__wechsel {
  display: flex; align-items: center; justify-content: center; flex-basis: 100%; min-height: var(--m-knopf-kopf-h); margin: var(--m-bk-unterzeile-luecke) 0 0;
  padding: var(--m-knopf-kopf-pad); border: 1px solid var(--m-knopf-sek-rand); border-radius: var(--m-knopf-radius);
  background: var(--m-flaeche); color: var(--m-knopf-sek-fg); font-size: var(--m-knopf-kopf-fs); font-weight: var(--fw-medium);
}
.k2-seite .m-empfehlung .m-bk__fuss-zeile { display: none; }
.k2-seite .m-empfehlung .m-bk__zeile { grid-template-columns: minmax(0, 1fr); row-gap: var(--m-bk-unterzeile-luecke); padding-bottom: var(--sp-3); }
.k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label { background: none; padding-bottom: var(--m-bk-unterzeile-luecke); }
.k2-seite .m-empfehlung .m-bk__zeile > .m-bk__zelle.m-bk__zelle {
  grid-template-columns: var(--m-bk-anb-breite) minmax(0, 1fr); align-items: baseline; column-gap: var(--sp-2);
  padding: var(--m-bk-unterzeile-pad); border-radius: var(--m-radius-innen);
}
/* Die letzte Zeile behält am Handy alle vier runden Ecken (~~nur unten rund, Spaltenende~~ ist Desktop). */
.k2-seite .m-empfehlung .m-bk__zeile:nth-last-child(1 of .m-bk__zeile:not(.m-bk__fuss-zeile)) > .m-bk__zelle:is(.m-bk__f1, .m-bk__f2, .m-bk__f3) {
  border-radius: var(--m-radius-innen);
}
.k2-seite .m-empfehlung .m-bk__zelle > .m-bk__anb { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--m-text-leise); font-weight: var(--fw-regular); }
@media (min-width: 861px) {
  .k2-seite .m-empfehlung .m-bk__koepfe {
    position: sticky; display: grid; grid-template-columns: var(--m-bk-label) repeat(var(--m-bk-n, 2), minmax(0, 1fr)); row-gap: 0; margin: 0;
  }
  .k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf--kasse:not(:has(.m-bk__sub)) { display: grid; }
  .k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf { display: grid; gap: 3px; padding: 12px 16px; border-radius: 0; }
  .k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf--mein { border-radius: var(--m-lt-radius) var(--m-lt-radius) 0 0; }
  .k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf .m-bk__logo { max-height: 26px; max-width: 100%; margin: 0 0 8px; }
  .k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf .m-bk__sub { margin-left: 0; }
  .k2-seite .m-empfehlung .m-bk__koepfe > .m-bk__kopf .m-bk__wechsel { display: none; }
  .k2-seite .m-empfehlung .m-bk__fuss-zeile { display: grid; }
  .k2-seite .m-empfehlung .m-bk__zeile { grid-template-columns: var(--m-bk-label) repeat(var(--m-bk-n, 2), minmax(0, 1fr)); row-gap: 0; padding-bottom: 0; }
  .k2-seite .m-empfehlung .m-bk__zeile > .m-bk__label { padding-bottom: revert-layer; }
  .k2-seite .m-empfehlung .m-bk__zeile > .m-bk__zelle.m-bk__zelle { grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 8px; padding: var(--m-lt-pad); border-radius: 0; }
  .k2-seite .m-empfehlung .m-bk__zeile:nth-last-child(1 of .m-bk__zeile:not(.m-bk__fuss-zeile)) > .m-bk__zelle:is(.m-bk__f1, .m-bk__f2, .m-bk__f3) {
    border-radius: 0 0 var(--m-radius) var(--m-radius);
  }
  .k2-seite .m-empfehlung .m-bk__zelle > .m-bk__anb { display: none; }
}
/* Owner 12.10. („Wird übernommen ist noch nicht auf die neuen Styles umgezogen"): Leisten ohne Rechentafel sind
   Text-Zeilen der Tabelle (_m_kachel.html, m-risiko--leiste + m-risiko--tafel) — Titel links, rechts EIN Wert
   „Übernommen" in Grün und in der Typo der Text-Zeilen; ~~graue Box mit grünem Rand + Chevron~~ (die Box bleibt im
   DOM, die Tabellen-Regel blendet sie wie in allen Tabellen-Zeilen aus). Abstände wie die übrigen Zeilen. */
.k2-seite .m-risiko--tafel .m-risiko__d-text.m-risiko__d-text--gut { color: var(--m-gut); }
.k2-detail__panel .m-liste > .m-risiko--leiste.m-risiko--tafel { padding-top: 14px; padding-bottom: 14px; }
.k2-detail__panel .m-liste > .m-risiko--leiste.m-risiko--tafel:is(:first-child, :not(.m-risiko--leiste) + *) {
  padding-top: 20px; border-top: 0; border-top-left-radius: var(--m-radius); border-top-right-radius: var(--m-radius);
}
.k2-detail__panel .m-liste > .m-risiko--leiste.m-risiko--tafel:is(:last-child, :has(+ :not(.m-risiko--leiste))) {
  margin-bottom: 14px; padding-bottom: 20px; border-bottom-left-radius: var(--m-radius); border-bottom-right-radius: var(--m-radius);
}
/* Info-Icon direkt hinter dem Titel statt rechts außen (wie der Chevron aufklappbarer Zeilen). Die Sprechblase steht
   weiter über der ganzen Zeile — ihr Zeiger nach rechts außen fällt weg, dort ist kein Icon mehr. */
.k2-seite .m-risiko__titel > .m-risiko__info.m-risiko__info--titel {
  position: static; display: inline-flex; vertical-align: -0.15em;
  width: var(--m-titel-info-gr); height: var(--m-titel-info-gr); margin: 0 0 0 var(--m-titel-info-luft); padding: 0;
  cursor: pointer;
}
.k2-seite .m-risiko:has(> .m-risiko__titel > .m-risiko__info--titel) > .m-blase::after { content: none; }