/* ============================================================================ 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: …)`. Am Desktop ist diese Datei wirkungslos; sie kann den Bestand also nicht kaputt machen. 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 ========================================================================= */ /* ⚠ EINZIGE Regel außerhalb der Media-Query — und sie muss es sein: Ohne sie wäre die mobile Liste am Desktop sichtbar (ein
ohne CSS ist nun mal sichtbar). Alles andere in dieser Datei steht in der Query darunter. */ .m-liste { display: none; } /* Dieselbe Weiche für die mobile Kassen-Seite (Owner 10.09.): ihr Block ist am Desktop unsichtbar, die Desktop-Kassen-Fläche bleibt dort unberührt. */ .m-kasse { display: none; } /* Dieselbe Weiche für die mobilen Themen-Seiten (15.09.): ohne sie standen Mobil-Kopf, Foto und „Weiter"-Knopf am Desktop ungestylt in jedem Panel. */ .m-thema { display: none; } /* Dieselbe Weiche für die mobile Übersicht in Schritt 2 (Owner-Bug O4, 15.09.). */ .m-uebersicht { display: none; } @media (max-width: 860px) { /* 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 */ .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
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; } .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; } /* ── „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; } .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); } .m-risiko .m-pille__kern--beschriftet .m-mit__grenze { white-space: nowrap; 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; } .m-risiko.m-risiko--opt .m-risiko__bilanz { grid-row: 3; grid-column: 2 / 4; justify-self: center; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; padding: 7px 18px; border-radius: var(--m-bilanz-radius); border: 1.5px solid var(--m-gut-linie); background: var(--m-gut-flaeche); color: var(--m-gut); font-weight: var(--fw-bold); font-size: 13px; white-space: nowrap; animation: m-bilanz-fallen var(--m-aufdeck-dauer) cubic-bezier(.4,0,.2,1) both; } .m-risiko.m-risiko--opt .m-risiko__bilanz .m-icon--haken { --m-icon-warn: 17px; flex: none; } @keyframes m-bilanz-fallen { from { opacity: 0; transform: translateY(-38px); } to { opacity: 1; transform: 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 . */ .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: 10.5px; 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"; } /* 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: 10.5px; 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: 10.5px; 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: 11.5px; line-height: 1.5; color: var(--m-text-leise); } .m-erklaer__titel { display: block; margin-bottom: 4px; font-size: 11.5px; 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); } .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); } .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: 11.5px; 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; } /* ── 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-text); } /* 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); } .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 %). */ .m-cta { 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: 2px solid transparent; background: linear-gradient(90deg, var(--m-cta-von), var(--m-cta-bis)) padding-box, linear-gradient(180deg, var(--m-cta-rand), var(--m-cta-rand-aus)) border-box; color: var(--kk-white); font-size: 17px; font-weight: var(--fw-bold); text-decoration: none; } .m-cta:active { filter: brightness(.94); } .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); } /* ── 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); } .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); } .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; } /* 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)); } .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 , 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) - 3px); font-weight: var(--fw-bold); 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: 11px; 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: 34px; object-fit: contain; } /* ⚠ 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); } /* 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; } } .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
— 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-text); } .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); } .m-uebersicht__band { margin: 0; padding: 12px 0; color: var(--m-aktion); font-weight: var(--fw-semibold); } .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__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); } /* „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; } .m-optionen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .m-option { display: grid; grid-template-columns: 26px 56px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 6px; align-items: center; padding: 12px 12px 10px; background: var(--m-flaeche); border: 1px solid var(--m-linie); border-radius: var(--m-radius); } .m-option--empfohlen { border-color: var(--m-upgrade-linie); box-shadow: 0 0 0 2px var(--m-upgrade-flaeche); } .m-option--mehr { display: none; } .m-optionen--alle .m-option--mehr { display: grid; } .m-option__platz { grid-row: 1 / 3; 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 { grid-row: 1 / 3; height: 40px; display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid var(--m-linie); border-radius: var(--r-sm); background: var(--m-flaeche); } .m-option__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .m-option__logo-text { font-size: 10px; font-weight: var(--fw-bold); text-align: center; line-height: 1.1; } .m-option__text { grid-column: 3; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-option__name { font-size: 15px; font-weight: var(--fw-bold); color: var(--m-text); line-height: 1.25; } .m-option__badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-full); background: var(--m-upgrade-flaeche); color: var(--m-aktion); font-size: 11px; font-weight: var(--fw-semibold); vertical-align: middle; } .m-option__beitrag { font-size: 12.5px; color: var(--m-text-leise); } .m-option__vorteil { grid-column: 3; justify-self: start; } .m-option__vorteil .m-pille__text::after { content: ":"; } .m-option__details { grid-column: 1 / -1; justify-self: end; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-aktion); cursor: pointer; } .m-optionen__leer { margin: 12px 0; font-size: 14px; color: var(--m-text-leise); } .m-optionen__alle { display: block; width: 100%; margin-top: 6px; border: 0; background: none; cursor: pointer; } /* 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. */ .modal__box--mobil { width: 94vw; max-width: 94vw; max-height: 86vh; overflow-y: auto; 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; font-weight: var(--fw-semibold); } .modal__box--mobil .k2-kk__zeile--kopf .k2-kk__label { display: none; } .modal__box--mobil .k2-kk__zeile--ersparnis { grid-template-columns: 1fr; } /* ── „Ü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); } } @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__oben { padding: 6px 14px 0; } .m-bk__koerper { padding: 4px 8px 12px; } .m-bk__passt { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 6px 12px; border: 1.5px solid var(--m-gut-linie); background: var(--m-gut-flaeche); border-radius: var(--r-full); color: var(--m-gut); font-weight: var(--fw-bold); font-size: 13px; } .m-bk__passt .m-icon--haken { --m-icon-warn: 17px; } .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; } .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: 11.5px; 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: 11px; 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: 11.5px; } .m-bk__kopf--mein .m-bk__sub { font-size: 11px; 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: 11px; 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: 10px; 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: 10.5px; 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: 10.5px; } .m-bk__cmp--3 .m-bk__sub { font-size: 10px; } .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: 11.5px; 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: 11px; } .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: 10.5px; 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: 10.5px; 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: 10.5px; 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: 11.5px; 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: 11px; 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: 10.5px; 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: 11px; } .m-bk__vl-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 2px; font-size: 11.5px; 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: 11px; 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; } }