/* Kunden-App „Zuversichtsberatung“ – eigenes, ruhiges Erscheinungsbild (an der Zuversichtsberatung orientiert: Markenblau,
   farbige Kategorie-Icons, Original-Logos). Eine kräftige Stelle: die dunkle Ersparnis-Karte mit Ring. Sonst weiß, klare Linien.
   Handy zuerst; die PC-Ansicht hängt an der Breite des App-Rahmens (Container-Abfragen), damit die Vorschau beides zeigen kann. */
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('schriften/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url('schriften/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('schriften/dm-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 800; font-display: swap; src: url('schriften/dm-sans-800.woff2') format('woff2'); }

:root {
  --grund: #eef2f7; --flaeche: #ffffff; --flaeche2: #f5f7fb; --linie: #dde4ee; --linie2: #c9d3e0;
  --text: #0b1f3a; --text2: #4a5b72; --text3: #6a7a90;
  --blau: #0a6fd6; --blau-tief: #0858ab; --blau-hell: #e7f0fc;
  --gruen: #087a58; --gruen-hell: #e2f4ec; --tuerkis: #21d3a5;
  --warn: #8a5300; --warn-hell: #fdf3e1; --gefahr: #b42318; --gefahr-hell: #fdecea;
  --held: #0b1f3a; --held-text: #ffffff; --held-text2: #b8c7da;
  --orange: #b54708; --orange-rand: #f79009; --orange-hell: #fef0e1;
  --fokus: #0a6fd6;
  --r-karte: 20px; --r: 12px;
  --schatten: 0 1px 2px rgba(11, 31, 58, .04), 0 6px 20px -8px rgba(11, 31, 58, .08);
  --held-verlauf: radial-gradient(120% 90% at 100% 0%, #154a86 0%, rgba(21, 74, 134, 0) 60%), radial-gradient(80% 70% at 0% 100%, rgba(33, 211, 165, .16) 0%, rgba(33, 211, 165, 0) 60%), #0b1f3a;
  color-scheme: light;
}
:root.dark {
  --grund: #0c141e; --flaeche: #142030; --flaeche2: #1a283a; --linie: #26364b; --linie2: #34475f;
  --text: #e8eef6; --text2: #a6b5c8; --text3: #8596ac;
  --blau: #5ba7f6; --blau-tief: #8cc1fa; --blau-hell: rgba(91, 167, 246, 0.15);
  --gruen: #43d1a2; --gruen-hell: rgba(67, 209, 162, 0.14); --tuerkis: #2fdcae;
  --warn: #f2c26b; --warn-hell: rgba(242, 194, 107, 0.13); --gefahr: #ff8a80; --gefahr-hell: rgba(255, 138, 128, 0.13);
  --held: #0f2b4d; --held-text: #ffffff; --held-text2: #b8c7da;
  --orange: #fdb468; --orange-rand: #f59e0b; --orange-hell: rgba(245, 158, 11, 0.14);
  --fokus: #8cc1fa;
  --schatten: none;
  --held-verlauf: radial-gradient(120% 90% at 100% 0%, #1b5596 0%, rgba(27, 85, 150, 0) 60%), radial-gradient(80% 70% at 0% 100%, rgba(47, 220, 174, .14) 0%, rgba(47, 220, 174, 0) 60%), #0f2b4d;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
a { color: var(--blau); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 8px; }
.ic { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }
.klein { font-size: 13.5px; }
.gedaempft { color: var(--text2); }
.gruen { color: var(--gruen); }
.minus { color: var(--gefahr); }
.mitte { text-align: center; }
.leer { color: var(--text2); padding: 8px 0; display: flex; gap: 8px; align-items: center; }
small { font-size: 13.5px; }
.gross-zahl, .ersparnis-gross, .summe, .posten-betrag, .betrag-pill, .ersparnis, dd, .preis, .z { font-variant-numeric: tabular-nums; }

/* ---------- Rahmen und Hülle ---------- */
.ka-rahmen { container: ka / inline-size; position: relative; height: 100dvh; overflow: hidden; background: var(--grund); }
.ka-wurzel { height: 100%; }
.ka-app { display: flex; height: 100%; }
.ka-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ka-kopf { flex: none; height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--grund); }
.ka-inhalt { container: inhalt / inline-size; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 16px 28px; outline: none; overscroll-behavior: contain; }
.ka-voll { height: 100%; }
.ka-inhalt.voll { padding: 0; height: 100%; }
.ka-seitenleiste { display: none; }
.ka-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--flaeche); border-top: 1px solid var(--linie); padding: 4px 4px env(safe-area-inset-bottom); }
.tab-punkt { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--text2); text-decoration: none; border-radius: 14px; }
.tab-punkt .ic { width: 22px; height: 22px; box-sizing: content-box; padding: 4px 18px; border-radius: 999px; transition: background-color .2s; }
.tab-punkt.aktiv { color: var(--blau-tief); font-weight: 700; }
.tab-punkt.aktiv .ic { stroke-width: 2.3; background: var(--blau-hell); }
:root.dark .tab-punkt.aktiv { color: var(--blau); }

.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.marke-text { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.marke-zeichen svg { display: block; }
.mz-grund { fill: var(--blau); }
.mz-bogen { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.mz-punkt { fill: var(--tuerkis); }
.marke.hell { color: #fff; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blau-hell); color: var(--blau-tief); font-weight: 700; font-size: 15px; flex: none; }
.avatar.klein { width: 38px; height: 38px; font-size: 14px; }
.avatar.gross { width: 64px; height: 64px; font-size: 22px; }
.kopf-profil { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; text-decoration: none; }
.kopf-profil.aktiv .avatar { box-shadow: 0 0 0 2px var(--blau); }

@container ka (min-width: 900px) {
  .ka-seitenleiste { display: flex; flex-direction: column; flex: none; width: 252px; padding: 22px 14px 18px; background: var(--flaeche); border-right: 1px solid var(--linie); }
  .ka-seitenleiste .marke { padding: 0 10px 22px; }
  .ka-kopf, .ka-tabs { display: none; }
  .ka-inhalt { padding: 36px max(40px, calc((100% - 1160px) / 2)) 56px; }
  .leiste-nav { display: flex; flex-direction: column; gap: 2px; }
  .leiste-punkt { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--r); color: var(--text2); font-weight: 500; text-decoration: none; }
  .leiste-punkt:hover { background: var(--flaeche2); color: var(--text); }
  .leiste-punkt.aktiv { background: var(--blau-hell); color: var(--blau-tief); font-weight: 700; }
  .leiste-unten { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--linie); }
  .leiste-profil { display: flex; align-items: center; gap: 10px; padding: 12px 10px 0; text-decoration: none; color: var(--text); }
  .leiste-profil b { display: block; font-size: 14.5px; }
  .leiste-profil small { color: var(--text2); font-size: 12.5px; }
}

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 18px; min-width: 0; box-shadow: var(--schatten); }
.kacheln, .vorschlag, .hack, .spar-summe > div, .reiter, .checkliste { box-shadow: var(--schatten); }
.karte h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
.karte h2 .ic { color: var(--blau); }
.karte > * + * { margin-top: 12px; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.karte-kopf + * { margin-top: 10px; }
.mehr-link { font-weight: 700; font-size: 14.5px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.seiten-kopf { margin: 6px 0 18px; }
.seiten-kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seiten-kopf h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.seiten-kopf .unter { color: var(--text2); margin-top: 6px; max-width: 60ch; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; padding: 0 6px; font-weight: 700; text-decoration: none; color: var(--blau); }

.kn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; font-weight: 700; font-size: 15.5px; text-decoration: none; text-align: center; line-height: 1.2; transition: background-color .15s, border-color .15s; }
.kn.primaer { background: var(--blau); color: #fff; }
:root.dark .kn.primaer { color: #06213f; }
.kn.primaer:hover { background: var(--blau-tief); }
.kn.zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie2); }
.kn.zweit:hover { background: var(--flaeche2); }
.kn.text { background: none; color: var(--blau); padding: 0 10px; }
.kn.gefahr { background: var(--gefahr-hell); color: var(--gefahr); border-color: transparent; }
.kn.klein { min-height: 44px; padding: 0 14px; font-size: 14.5px; }
.kn.breit { width: 100%; }
.kn.rund { width: 48px; padding: 0; border-radius: 50%; }
.kn:disabled { opacity: .45; cursor: not-allowed; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe > .kn { flex: 1 1 auto; }

.kat-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--kf); color: #fff; flex: none; }
.kat-ic .ic { width: 21px; height: 21px; }
:root.dark .kat-ic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.kat-ic.gross { width: 56px; height: 56px; border-radius: 15px; }
.kat-ic.gross .ic { width: 28px; height: 28px; }
.logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--linie); border-radius: 10px; flex: none; overflow: hidden; }
.logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.logo.quadrat { width: 44px; height: 44px; padding: 5px; }
.logo.breit { width: 84px; height: 44px; padding: 6px 8px; }
.logo.mini.quadrat { width: 26px; height: 26px; padding: 3px; border-radius: 7px; }
.logo.mini.breit { width: 52px; height: 26px; padding: 3px 5px; border-radius: 7px; }

.status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.status .ic { width: 15px; height: 15px; stroke-width: 3; }
.s-neu { background: var(--flaeche2); color: var(--text2); border: 1px solid var(--linie); }
.s-offen { background: var(--blau-hell); color: var(--blau-tief); }
.s-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.s-passt { background: var(--flaeche2); color: var(--text2); }
.betrag-pill, .ersparnis { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen); font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.chip-zahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--flaeche2); color: var(--text2); font-size: 12.5px; font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie2); background: var(--flaeche); color: var(--text); font-weight: 500; font-size: 15px; }
.chip .ic { width: 17px; height: 17px; }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--flaeche); font-weight: 700; }
.chip[aria-pressed="true"] .chip-zahl { background: rgba(255, 255, 255, .2); color: inherit; }
:root.dark .chip[aria-pressed="true"] .chip-zahl { background: rgba(0, 0, 0, .2); }
.chip.gross { min-height: 48px; }

.umschalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--linie); }
.umschalter button { min-height: 38px; min-width: 64px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--text2); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(11, 31, 58, .14); }
.umschalter.breit { display: flex; } .umschalter.breit button { flex: 1; min-height: 44px; }

.balken { display: block; height: 8px; border-radius: 999px; background: var(--flaeche2); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: 999px; background: var(--blau); }
.balken.klein { height: 6px; }

.drei-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.drei-zahlen.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drei-zahlen dt { font-size: 13px; color: var(--text2); }
.drei-zahlen dd { margin: 2px 0 0; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.drei-zahlen .uebrig dd { color: var(--gruen); }

/* ---------- Formulare ---------- */
.formular { display: flex; flex-direction: column; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld > span:first-child { font-weight: 700; font-size: 14.5px; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--linie2); background: var(--flaeche); font-size: 16px; }
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.feld-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.passwort { position: relative; display: block; }
.passwort input { padding-right: 52px; }
.auge { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--text2); }
.fehler { background: var(--gefahr-hell); color: var(--gefahr); padding: 10px 12px; border-radius: var(--r); font-weight: 500; }
.haken { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.haken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.haken-box { flex: none; width: 28px; height: 28px; margin: 1px 0; border-radius: 8px; border: 2px solid var(--linie2); background: var(--flaeche); display: grid; place-items: center; color: transparent; transition: background-color .15s; }
.haken-box .ic { width: 18px; height: 18px; stroke-width: 3.2; }
.haken input:checked + .haken-box { background: var(--gruen); border-color: var(--gruen); color: #fff; }
:root.dark .haken input:checked + .haken-box { color: #062a1e; }
.haken input:focus-visible + .haken-box { outline: 3px solid var(--fokus); outline-offset: 2px; }
.haken-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.haken-text > span { color: var(--text2); font-size: 15px; }
.haken-text a { font-weight: 700; }
.upload { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 1.5px dashed var(--linie2); border-radius: var(--r); color: var(--blau); font-weight: 700; cursor: pointer; overflow: hidden; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-vorschau img { display: block; max-width: 100%; max-height: 180px; border-radius: var(--r); margin-top: 8px; }

/* ---------- Start ---------- */
.gruss { margin: 2px 0 14px; }
.gruss-hallo { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.gruss-unter { margin-top: 4px; color: var(--text2); font-size: 15px; }
.gruss-unter b { color: var(--text); font-weight: 700; }
.gruss-unter b.gruen { color: var(--gruen); }
.start-raster { display: flex; flex-direction: column; gap: 14px; }
.start-spalte { display: contents; }
.start-raster .held { order: 1; } .start-raster .schritte-karte { order: 2; } .start-raster .erledigt-karte { order: 3; }
.start-raster .geld-mini { order: 4; } .start-raster .aktion-karte { order: 5; }
.held { background: var(--held-verlauf); color: var(--held-text); border: 0; border-radius: 26px; padding: 20px; box-shadow: 0 18px 40px -22px rgba(11, 31, 58, .55); }
.held h1 { font-size: 17px; font-weight: 700; }
.held-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.held .umschalter { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); }
.held .umschalter button { color: var(--held-text2); min-height: 40px; }
.held .umschalter button[aria-pressed="true"] { background: #fff; color: #0b1f3a; }
.held-mitte { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.ring-box { position: relative; flex: none; width: 132px; height: 132px; }
.ring-box .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; }
.ring-spur { stroke: rgba(255, 255, 255, .08); }
.ring-moeglich { stroke: rgba(33, 211, 165, .3); }
.ring-wert { stroke: var(--tuerkis); animation: ring-ein 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ring-ein { from { stroke-dashoffset: var(--u); } }
.ring-innen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-prozent { font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.ring-innen .gedaempft { color: var(--held-text2); }
.held-zahl { min-width: 0; }
.held .gross-zahl { font-size: 44px; }
.gross-zahl { font-weight: 800; font-size: 44px; line-height: 1.02; letter-spacing: -0.035em; }
.held .gedaempft { color: var(--held-text2); }
.held-ziel { margin-top: 10px; font-size: 14.5px; color: var(--held-text2); }
.held-ziel b { color: #fff; }
.held-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 18px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: var(--held-text2); }
.held-fuss b { color: #fff; }
.held-fuss span:nth-child(3) { margin-left: 10px; }
.punkt-legende { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.punkt-legende.gespart { background: var(--tuerkis); }
.punkt-legende.moeglich { background: rgba(33, 211, 165, .3); box-shadow: inset 0 0 0 2px rgba(33, 211, 165, .75); }
.schritte, .erledigt-liste { list-style: none; margin: 0; padding: 0; }
.schritt { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--linie); }
.schritt:first-child { border-top: 0; }
.schritt-link, .erledigt-liste a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--text); text-decoration: none; min-height: 64px; }
.schritt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.schritt-text b { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.schritt-text small { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritt-meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; }
.schritt-meta .betrag-pill { padding: 1px 8px; font-size: 13.5px; }
.schritt-meta small { min-width: 0; }
.haken-knopf { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--linie2); background: var(--flaeche); color: var(--text3); display: grid; place-items: center; }
.haken-knopf:hover { border-color: var(--gruen); color: var(--gruen); background: var(--gruen-hell); }
.haken-knopf .ic { stroke-width: 2.8; }
.erledigt-liste li + li { border-top: 1px solid var(--linie); }
.erledigt-wert { display: flex; align-items: center; gap: 4px; color: var(--gruen); font-weight: 800; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.erledigt-wert small { display: none; width: 100%; text-align: right; color: var(--text2); font-weight: 500; font-size: 12.5px; }
.erledigt-wert .ic { width: 18px; height: 18px; }
.aktion-karte { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; min-height: 72px; }
.aktion-karte > * + * { margin-top: 0; }
.aktion-karte > .ic:first-child { color: var(--blau); width: 24px; height: 24px; }
.aktion-karte span { flex: 1; display: flex; flex-direction: column; }
.aktion-karte small { color: var(--text2); }
.aktion-karte > .ic:last-child { color: var(--text3); }
@container ka (min-width: 900px) {
  .erledigt-wert small { display: block; }
  .start-raster .held, .start > .held { padding: 28px; }
  .ring-box { width: 176px; height: 176px; }
  .held .gross-zahl { font-size: 60px; }
  .ring-prozent { font-size: 32px; }
  .held-mitte { gap: 28px; margin-top: 26px; }
  .gruss { margin-bottom: 22px; } .gruss-hallo { font-size: 32px; } .gruss-unter { font-size: 16.5px; }
}

/* ---------- Sparen ---------- */
.spar-summe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.spar-summe > div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; min-width: 0; }
.spar-summe b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.spar-summe small { color: var(--text2); font-size: 12.5px; }
.kacheln { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; }
.kacheln > li + li { border-top: 1px solid var(--linie); }
.kachel { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic name name" "ic status status" "ic anbieter betrag"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; min-height: 68px; color: var(--text); text-decoration: none; }
.kachel:hover { background: var(--flaeche2); }
.kachel > .kat-ic { grid-area: ic; }
.kachel-name { grid-area: name; font-weight: 700; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.kachel-anbieter { grid-area: anbieter; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text2); font-size: 13.5px; }
.kachel-anbieter > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-betrag { grid-area: betrag; justify-self: end; color: var(--text2); font-size: 13.5px; white-space: nowrap; }
.kachel-status { grid-area: status; justify-self: start; display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.kachel-status .status.s-offen, .kachel-status .status.s-erledigt { display: none; }
.ersparnis.fertig { background: var(--gruen); color: #fff; }
:root.dark .ersparnis.fertig { color: #062a1e; }
@container ka (min-width: 640px) {
  .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .kacheln > li + li { border-top: 0; }
  .kachel { height: 100%; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic status" "name name" "anbieter anbieter" "betrag betrag"; row-gap: 6px; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; align-items: start; }
  .kachel-name { margin-top: 6px; font-size: 16.5px; }
  .kachel-betrag { justify-self: start; }
  .kachel-anbieter .logo.mini.breit { width: 68px; height: 30px; } .kachel-anbieter .logo.mini.quadrat { width: 30px; height: 30px; }
  .kachel-status .status { display: inline-flex !important; }
  .kachel-status { flex-wrap: wrap; justify-content: flex-end; justify-self: end; min-width: 0; margin: 0; }
}

.detail-kopf { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.detail-kopf h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 4px; }
.detail-raster { display: flex; flex-direction: column; gap: 14px; }
/* Handy: eine Spalte, Reihenfolge Ersparnis, Vertrag, Vorschläge/Tipps, Notizen, Berater (Berater bewusst unten, Levi 05.11.2026).
   PC-Aufbau siehe Block „Sparpunkt am PC“ weiter unten. */
.detail-oben, .detail-seite, .detail-rechts { display: contents; }
.detail-oben > .ersparnis-karte { order: 1; }
.detail-seite { order: 2; }
.detail-seite > :first-child { order: 2; }
.detail-rechts > * { order: 3; min-width: 0; }
.detail-seite > .notizen-karte { order: 4; }
.detail-berater { order: 5; }
.vertrag-zeile { display: flex; align-items: center; gap: 12px; }
.vertrag-zeile > div { flex: 1; min-width: 0; }
.vertrag-kosten { font-weight: 800; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.vertrag-kosten small { display: block; font-weight: 500; color: var(--text2); font-size: 12.5px; }
.vertrag-anbieter { font-weight: 700; font-size: 17px; }
.werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); }
.werte dt { font-size: 13px; color: var(--text2); }
.werte dd { margin: 0; font-weight: 700; }
.ersparnis-karte.offen { border: 2px solid var(--blau); }
.ersparnis-karte.erledigt { border: 2px solid var(--gruen); }
.ersparnis-gross { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; color: var(--gruen); line-height: 1.05; display: flex; align-items: baseline; gap: 8px; }
.ersparnis-gross small { font-size: 15px; font-weight: 500; color: var(--text2); letter-spacing: 0; }
/* Notizen am Vertrag (Kunde und Berater sehen dieselben Notizen) */
.geaendert { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.geaendert svg { width: 15px; height: 15px; flex: none; }
.notizen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notiz { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--flaeche2); }
.notiz.vom-berater { background: var(--blau-hell); }
.notiz > div { flex: 1; min-width: 0; }
.avatar.mini { width: 32px; height: 32px; font-size: 12.5px; background: var(--flaeche); border: 1px solid var(--linie); }
.notiz.vom-berater .avatar.mini { background: var(--blau); color: #fff; border-color: transparent; }
:root.dark .notiz.vom-berater .avatar.mini { color: #06213f; }
.notiz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14.5px; }
.notiz-text { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.notiz-weg { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 50%; background: transparent; color: var(--text3); display: grid; place-items: center; cursor: pointer; }
.notiz-weg:hover { background: var(--flaeche); color: var(--gefahr); }
.notiz-weg svg { width: 18px; height: 18px; }
.notiz-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.notiz-form textarea { width: 100%; min-height: 72px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--linie2); background: var(--flaeche); font-size: 16px; resize: vertical; }
.notiz-form textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.notiz-form .kn { align-self: flex-start; }
.notizen-karte > .klein.gedaempft:last-child { margin: 8px 0 0; }
.erledigt-am { display: flex; align-items: center; gap: 8px; color: var(--gruen); font-weight: 700; }
.reiter { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; gap: 4px; }
.reiter button { min-height: 48px; border: 0; border-radius: 12px; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--text2); }
.reiter button[aria-selected="true"] { background: var(--blau-hell); color: var(--blau-tief); }
.reiter button[aria-selected="true"] .chip-zahl { background: var(--flaeche); color: var(--blau-tief); }
#tafel { display: flex; flex-direction: column; gap: 12px; }
.vorschlag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vorschlag.gewaehlt { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau); }
.vorschlag-kopf { display: flex; align-items: center; gap: 12px; }
.vorschlag-kopf > div { flex: 1; min-width: 0; }
.gewaehlt-chip { margin-top: 4px; }
.vorschlag h3 { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.vorschlag-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blau-hell); color: var(--blau-tief); display: grid; place-items: center; flex: none; }
.richtwert { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--gruen); font-weight: 500; }
.richtwert .ic { width: 18px; height: 18px; margin-top: 2px; }
.varianten { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.varianten li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.varianten li + li { border-top: 1px solid var(--linie); }
.varianten li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.varianten small { color: var(--text2); }
.preis { text-align: right; font-weight: 800; white-space: nowrap; display: flex; flex-direction: column; }
.preis small { font-weight: 500; }
.mehr summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blau); font-weight: 700; cursor: pointer; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary .ic { transition: transform .2s; }
.mehr[open] summary .ic { transform: rotate(180deg); }
.mehr > * + * { margin-top: 10px; }
.mehr p { color: var(--text2); }
.weg { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: weg; }
.weg li { display: flex; flex-direction: column; gap: 4px; padding-left: 34px; position: relative; counter-increment: weg; }
.weg li::before { content: counter(weg); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--flaeche2); border: 1px solid var(--linie); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--text2); }
.rolle { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--flaeche2); color: var(--text2); }
.rolle.r-berater { background: var(--blau-hell); color: var(--blau-tief); }
.rolle.r-kunde { background: var(--gruen-hell); color: var(--gruen); }
.wichtig { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--warn-hell); color: var(--warn); font-size: 14.5px; }
.wichtig .ic { flex: none; margin-top: 2px; }
.tipps { display: flex; flex-direction: column; gap: 12px; }
.tipps-fortschritt { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.tipps-fortschritt .balken > span { background: var(--gruen); }
.checkliste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; }
.checkliste > li { padding: 12px 14px; min-width: 0; }
.checkliste > li + li { border-top: 1px solid var(--linie); }
.haken.wichtig { background: none; padding: 4px 0; color: inherit; }
.haken.wichtig b::after { content: ' Wichtig'; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-hell); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.rechnung { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--flaeche2); font-size: 13.5px !important; }
.tipp-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 40px; font-weight: 700; text-decoration: none; font-size: 14.5px; }
.tabelle-tipp h3 { font-size: 15.5px; margin-bottom: 8px; }
.tabelle-box { overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; max-width: 100%; }
.tabelle-box table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tabelle-box th, .tabelle-box td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle-box th { background: var(--flaeche2); font-weight: 700; white-space: nowrap; }
.tabelle-tipp .tabelle-box td { min-width: 110px; }

/* Berater-Karte */
.berater { border-color: var(--blau); }
.berater-kopf { display: flex; align-items: center; gap: 12px; }
.berater-kopf .avatar { width: 52px; height: 52px; font-size: 18px; background: var(--blau); color: #fff; }
:root.dark .berater-kopf .avatar { color: #06213f; }
.berater-name { font-weight: 800; font-size: 18px; }
.berater-text { color: var(--text2); }
.berater-daten { margin: 0; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--flaeche2); }
.berater-daten div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.berater-daten dt { color: var(--text2); font-size: 14px; }
.berater-daten dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Geld und Vermögen ---------- */
.geld-raster, .vermoegen-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.uebrig-karte .gross-zahl { color: var(--gruen); }
.uebrig-karte h2, .held-vermoegen h2 { font-size: 15px; font-weight: 500; }
.verlauf { margin: 16px 0 4px; }
.verlauf svg { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 6px; overflow: visible; }
.verlauf .achse { stroke: var(--linie2); stroke-width: 1; }
.verlauf rect { fill: #c4d9f3; }
:root.dark .verlauf rect { fill: rgba(91, 167, 246, .3); }
.verlauf .jetzt rect { fill: var(--blau); }
.verlauf .wert { fill: var(--text); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.verlauf .monat { fill: var(--text2); font-size: 12px; }
.posten-liste, .gruppen, .gruppe-posten { list-style: none; margin: 0; padding: 0; }
.posten-liste > li + li, .gruppen > li + li { border-top: 1px solid var(--linie); }
.posten, .gruppe-kopf { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border: 0; background: none; text-align: left; color: var(--text); text-decoration: none; }
.posten-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--blau-hell); color: var(--blau-tief); flex: none; }
.posten-ic.gruen-bg { background: var(--gruen-hell); color: var(--gruen); }
.posten-ic.leer-ic { background: var(--flaeche2); color: var(--text2); }
.posten-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 500; overflow-wrap: anywhere; }
.posten-name small { color: var(--text2); margin-top: -4px; }
.posten-name .balken { max-width: 220px; }
.posten-betrag { font-weight: 800; white-space: nowrap; }
.posten .leise { color: var(--text3); width: 16px; height: 16px; }
.gruppe-kopf .pfeil { color: var(--text3); transition: transform .2s; }
.gruppe.offen .gruppe-kopf .pfeil { transform: rotate(180deg); }
.gruppe-posten { margin: 0 0 10px 18px; padding-left: 16px; border-left: 2px solid var(--linie); }
.gruppe-posten .posten { min-height: 54px; }
.gruppe-posten .kat-ic { width: 32px; height: 32px; border-radius: 9px; }
.gruppe-posten .kat-ic .ic { width: 17px; height: 17px; }
.gruppe-posten .posten-ic { width: 32px; height: 32px; border-radius: 9px; }
.summe { font-weight: 800; font-size: 17px; }
.anteile { list-style: none; margin: 16px 0 4px !important; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anteile li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14.5px; }
.anteil-name { display: flex; align-items: center; gap: 8px; color: var(--text2); min-width: 0; }
.anteil-name .ic { width: 17px; height: 17px; color: var(--blau); }
.anteil-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.vermoegen-gruppen { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container ka (min-width: 900px) {
  .geld-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "uebrig uebrig" "ein aus"; gap: 18px; align-items: start; }
  .geld-raster > .uebrig-karte { grid-area: uebrig; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .uebrig-karte > * + * { margin-top: 0; }
  .uebrig-karte h2 { grid-column: 1; } .uebrig-karte .gross-zahl { grid-column: 1; margin-top: 4px; } .uebrig-karte .drei-zahlen { grid-column: 1; margin-top: 18px; }
  .uebrig-karte .verlauf { grid-column: 2; grid-row: 1 / span 4; margin: 0; } .uebrig-karte .knopf-reihe { grid-column: 1; margin-top: 18px; }
  .geld-raster > section:nth-of-type(2) { grid-area: ein; }
  .geld-raster > .ausgaben-karte { grid-area: aus; }
  .uebrig-karte .gross-zahl { font-size: 52px; }
}

/* ---------- Entdecken ---------- */
.feed { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
/* PC: Mauerwerk statt Raster, damit keine Lücken unter kurzen Karten entstehen */
@container ka (min-width: 700px) { .feed { display: block; columns: 2; column-gap: 14px; } .feed > .hack { break-inside: avoid; margin-bottom: 14px; } }
@container ka (min-width: 1100px) { .feed { columns: 3; } }
.hack { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--tf); min-width: 0; }
.hack h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.hack p { color: var(--text2); }
.hack-kopf { display: flex; align-items: center; gap: 10px; }
.hack-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tf, var(--blau)) 14%, transparent); color: var(--tf, var(--blau)); flex: none; }
:root.dark .hack-ic { background: color-mix(in srgb, var(--tf, var(--blau)) 26%, transparent); color: color-mix(in srgb, var(--tf, var(--blau)) 45%, #fff); }
.hack-ic.gross { width: 52px; height: 52px; --tf: var(--blau); }
.hack-thema { font-size: 13.5px; font-weight: 700; color: var(--text2); flex: 1; }
.merken { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--text3); margin: -6px -8px -6px 0; }
.merken[aria-pressed="true"] { color: #c8941a; }
.merken[aria-pressed="true"] .ic { fill: currentColor; }
.hack-schritte { margin: 0; padding-left: 22px; color: var(--text); font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.hack-fuss { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text2) !important; margin-top: 2px; }
.hack-fuss .ic { width: 16px; height: 16px; }
.anzeige { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--linie2); color: var(--text2) !important; }
.vorschlagen-karte { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vorschlagen-karte > * + * { margin-top: 0; }
.vorschlagen-karte > div { flex: 1 1 220px; }

/* ---------- Einstellungen und Textseiten ---------- */
.einst-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.profil-kopf { display: flex; align-items: center; gap: 14px; }
.profil-kopf h2 { font-size: 20px; }
.link-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--linie2); border-radius: var(--r); background: var(--flaeche2); }
.link-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-weight: 500; font-size: 14.5px; }
.ew-liste { list-style: none; margin: 0; padding: 0; }
.ew-zeile { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0; }
.ew-zeile + .ew-zeile { border-top: 1px solid var(--linie); }
.ew-zeile > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wortlaut summary { cursor: pointer; color: var(--blau); font-weight: 700; font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; }
.wortlaut p { font-size: 14.5px; color: var(--text2); padding: 10px 12px; border-radius: 10px; background: var(--flaeche2); }
.kanaele { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kanaele legend { width: 100%; margin-bottom: 6px; color: var(--text2); font-weight: 700; }
.kanal { position: relative; }
.kanal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kanal span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie2); font-weight: 500; cursor: pointer; }
.kanal span .ic { width: 17px; height: 17px; }
.kanal input:checked + span { background: var(--blau-hell); border-color: var(--blau); color: var(--blau-tief); font-weight: 700; }
.kanal input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.links-karte { padding: 6px 18px; }
.links-karte > * + * { margin-top: 0; border-top: 1px solid var(--linie); }
.zeile-link { display: flex; align-items: center; gap: 12px; min-height: 54px; color: var(--text); text-decoration: none; font-weight: 500; }
.zeile-link > span { flex: 1; }
.zeile-link .ic:first-child { color: var(--blau); }
.zeile-link .ic:last-child { color: var(--text3); }
.gefahr-karte h2 .ic { color: var(--gefahr); }
.text-seite { max-width: 720px; }
.text-seite h2 { margin-top: 20px; }
.punkte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.hinweis-band { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--blau-hell); color: var(--text); }
.hinweis-band .ic { color: var(--blau); flex: none; margin-top: 2px; }

/* ---------- Registrierung, Einwilligung, Anmeldung ---------- */
.auth { min-height: 100%; display: flex; background: var(--flaeche); }
.auth-marke { display: none; }
.auth-inhalt { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 22px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.auth-inhalt h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.auth-marke-klein { margin-bottom: 10px; }
.auth-schritt { font-size: 14px; font-weight: 700; color: var(--blau); }
.fortschritt { height: 6px; border-radius: 999px; background: var(--flaeche2); overflow: hidden; }
.fortschritt > span { display: block; height: 100%; background: var(--blau); border-radius: 999px; transition: width .35s; }
.einladung { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--blau-hell); }
.einladung .avatar { background: var(--blau); color: #fff; }
.sperre { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--warn-hell); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.sperre .ic { color: var(--warn); flex: none; margin-top: 2px; }
.sperre a { font-weight: 700; }
.einwilligung { border: 1.5px solid var(--linie2); border-radius: 16px; padding: 14px; transition: border-color .15s, background-color .15s; }
.einwilligung.an { border-color: var(--gruen); background: color-mix(in srgb, var(--gruen-hell) 50%, transparent); }
.einwilligung .kanaele { margin: 12px 0 0 40px; }
.freiwillig { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--flaeche2); color: var(--text2); margin-left: 4px; vertical-align: 1px; }
.pflicht-hinweis { margin-top: -6px; }
@container ka (min-width: 900px) {
  .auth-marke { display: flex; flex-direction: column; justify-content: space-between; width: 42%; max-width: 560px; padding: 40px 48px; background: var(--held); color: #fff; }
  .auth-marke .mz-grund { fill: #fff; } .auth-marke .mz-bogen { stroke: #0b1f3a; }
  .auth-marke-klein { display: none; }
  .auth-versprechen h2 { font-size: 46px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
  .auth-versprechen ul { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; color: #d5e0ee; }
  .auth-versprechen li { display: flex; gap: 10px; align-items: center; }
  .auth-versprechen .ic { color: var(--tuerkis); }
  .auth-marke > .klein { color: #9fb2c9; }
  .auth-marke { background: var(--held-verlauf); }
  .auth-beispiel { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding: 18px 20px; max-width: 380px; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
  .auth-beispiel .ring-box { width: 76px; height: 76px; }
  .auth-beispiel .ring-prozent { font-size: 17px; }
  .auth-beispiel > div:last-child { display: flex; flex-direction: column; gap: 2px; color: #b8c7da; }
  .auth-beispiel b { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
  .auth-inhalt { justify-content: center; padding: 48px 40px; max-width: 560px; }
}

/* ---------- Datenaufnahme ---------- */
.aufnahme { height: 100%; display: flex; flex-direction: column; background: var(--flaeche); }
.auf-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 6px; }
.aufnahme > .fortschritt { flex: none; margin: 0 16px; }
.auf-inhalt { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 600px; margin: 0 auto; padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.auf-inhalt h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.auf-start { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.auf-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--blau-hell); color: var(--blau); }
.auf-ic.gruen { background: var(--gruen-hell); color: var(--gruen); }
.auf-ic .ic { width: 32px; height: 32px; }
.auf-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auf-liste li { display: flex; gap: 12px; align-items: flex-start; }
.auf-liste .ic { color: var(--blau); margin-top: 2px; }
.auf-fuss { flex: none; display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); max-width: 600px; width: 100%; margin: 0 auto; }
.auf-fuss .kn { min-height: 54px; }
.auf-fuss .kn.zweit { flex: none; }
.zaehler { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 16px; font-weight: 700; font-size: 17px; }
.zaehler > div { display: flex; align-items: center; gap: 14px; }
.zaehler output { min-width: 28px; text-align: center; font-size: 22px; font-weight: 800; }
.gross-feld > span:first-child { font-size: 16px; }
.euro-eingabe { position: relative; display: block; }
.euro-eingabe input { padding-right: 40px; font-size: 20px; font-weight: 700; min-height: 56px; }
.euro-eingabe > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text2); font-weight: 700; }
.euro-eingabe.klein input { font-size: 16px; min-height: 46px; width: 100%; padding: 8px 32px 8px 12px; border-radius: 10px; border: 1px solid var(--linie2); background: var(--flaeche); font-weight: 700; }
.euro-eingabe.klein input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.euro-eingabe.klein > span { right: 12px; }
.auf-vertraege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.auf-vertraege li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 14px; padding: 4px 8px 4px 4px; }
.auf-vertraege li.an { border-color: var(--blau); background: color-mix(in srgb, var(--blau-hell) 60%, transparent); }
.auf-vertrag { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px; border: 0; background: none; text-align: left; font-weight: 700; }
.auf-vertrag > span:nth-child(2) { flex: 1; min-width: 0; }
.auf-vertrag .haken-ic { color: var(--text3); }
.auf-vertraege li.an .haken-ic { color: var(--blau); }
.auf-vertraege .euro-eingabe { width: 112px; flex: none; }
.ziel-wert { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--blau); }
input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--blau); }
.zwecke { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zwecke legend { font-weight: 700; margin-bottom: 8px; }
.auf-ziel { padding: 14px; border-radius: 14px; background: var(--flaeche2); }
@container ka (min-width: 900px) {
  .auf-inhalt { flex: 0 1 auto; margin-top: 7vh; padding-bottom: 8px; }
  .auf-fuss { border-top: 0; padding-top: 8px; }
  .auf-fuss .kn.breit { width: auto; flex: 1; }
}

/* ---------- Sparplan (Druck) ---------- */
.sparplan-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.blatt { background: #fff; color: #0b1f3a; border: 1px solid var(--linie); border-radius: 16px; padding: 24px 18px; max-width: 840px; margin: 0 auto; }
.blatt > * + * { margin-top: 14px; }
.blatt .gedaempft { color: #4a5b72; }
.blatt .marke { color: #0b1f3a; } .blatt .mz-grund { fill: #0a6fd6; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid #0b1f3a; }
.blatt h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 18px; }
.blatt h2 { font-size: 18px; margin-top: 24px; }
.blatt-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.blatt-zahlen > div { border: 1px solid #dde4ee; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; min-width: 0; }
.blatt-zahlen span { font-size: 13px; color: #4a5b72; }
.blatt-zahlen b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.blatt-zahlen small { color: #4a5b72; font-size: 12.5px; }
.blatt .gruen { color: #087a58; }
.blatt-tabelle td small { display: block; color: #4a5b72; }
.blatt-tabelle .z { text-align: right; white-space: nowrap; }
.blatt-tabelle td .ic { width: 15px; height: 15px; color: #087a58; vertical-align: -2px; margin-right: 3px; }
.blatt-tabelle tfoot td { font-weight: 800; border-bottom: 0; }
.blatt .tabelle-box { border-color: #dde4ee; }
.blatt .tabelle-box th { background: #f5f7fb; color: #0b1f3a; } .blatt .tabelle-box th, .blatt .tabelle-box td { border-color: #dde4ee; }
.blatt-schritte { padding-left: 22px; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.blatt-fuss { margin-top: 28px !important; padding-top: 14px; border-top: 1px solid #dde4ee; }
@container ka (min-width: 700px) { .blatt { padding: 40px 48px; } .blatt-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Dialoge, Meldungen, Belohnung ---------- */
.dialog-hg { position: absolute; inset: 0; z-index: 50; background: rgba(6, 16, 30, .5); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s; }
.dialog-hg.offen { opacity: 1; }
.dialog { position: relative; width: 100%; max-height: 92%; overflow-y: auto; background: var(--flaeche); border-radius: 24px 24px 0 0; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; transform: translateY(16px); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.dialog-hg.offen .dialog { transform: none; }
.dialog h2 { font-size: 21px; font-weight: 800; padding-right: 44px; letter-spacing: -0.01em; }
.dialog-zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--flaeche2); display: grid; place-items: center; color: var(--text2); }
.dialog .berater { border: 0; padding: 0; }
.dialog-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.gefahr-ic { background: var(--gefahr-hell); color: var(--gefahr); }
.auswahl { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.auswahl legend { font-weight: 700; margin-bottom: 8px; }
.auswahl-punkt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--linie2); border-radius: 14px; cursor: pointer; min-height: 56px; }
.auswahl-punkt input { width: 20px; height: 20px; accent-color: var(--blau); flex: none; }
.auswahl-punkt > span:nth-of-type(1) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.auswahl-punkt small { color: var(--text2); }
.auswahl-punkt:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
@container ka (min-width: 700px) {
  .dialog-hg { align-items: center; padding: 24px; }
  .dialog { max-width: 560px; border-radius: 24px; padding: 30px 28px 26px; }
  .dialog.schmal { max-width: 460px; }
}
.belohnung { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 4px; }
.belohnung h2 { padding: 0; font-size: 24px; }
.belohnung-haken { width: 76px; height: 76px; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; animation: haken-ein .5s cubic-bezier(.2, 1.4, .4, 1) both; }
:root.dark .belohnung-haken { color: #062a1e; }
.belohnung-haken .ic { width: 40px; height: 40px; stroke-width: 3; }
@keyframes haken-ein { from { transform: scale(.4); opacity: 0; } }
.belohnung-zahl { font-size: 30px; font-weight: 800; color: var(--gruen); letter-spacing: -0.02em; }
.belohnung-summe { padding: 12px 14px; border-radius: 14px; background: var(--flaeche2); margin: 6px 0 8px; }
.toast { position: absolute; z-index: 60; left: 50%; bottom: 82px; transform: translate(-50%, 12px); width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--text); color: var(--flaeche); font-weight: 500; font-size: 15px; box-shadow: 0 8px 24px rgba(6, 16, 30, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { color: var(--tuerkis); }
.toast.warn .ic { color: #f5c518; }
@container ka (min-width: 900px) { .toast { bottom: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Druck: nur das Blatt „Mein Sparplan“ */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; height: auto; }
  #vorschau-leiste, .ka-seitenleiste, .ka-kopf, .ka-tabs, .sparplan-werkzeug, .toast, .dialog-hg { display: none !important; }
  #ka-buehne { padding: 0 !important; display: block !important; }
  .ka-rahmen { height: auto !important; width: auto !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; container-type: normal; background: #fff !important; }
  .ka-app, .ka-haupt { display: block; height: auto; }
  .ka-inhalt { overflow: visible !important; padding: 0 !important; }
  .blatt { border: 0; padding: 0; max-width: none; }
  .blatt-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Kunden-App 2 (02.11.2026): drei Zustände, Durchschnitt, Einrichtung, Einnahmen/Ausgaben ---------- */
.orange { color: var(--orange); }
/* Zustände: erledigt = grün umrandet, gewählt = orange (Checkliste zum Umsetzen), kein Vorschlag = schlicht und neutral */
.s-leer { background: var(--flaeche2); color: var(--text2); border: 1px solid var(--linie); }
.s-gewaehlt { background: var(--orange-hell); color: var(--orange); }
.ersparnis.orange { background: var(--orange-hell); color: var(--orange); }
.punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.punkt { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none; }
.punkt:hover { background: var(--flaeche2); }
.punkt.z-gewaehlt { border: 2px solid var(--orange-rand); }
.punkt.z-erledigt { border: 2px solid var(--gruen); }
.punkt-wert { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.punkt-wert small { font-weight: 500; font-size: 12.5px; color: var(--text2); }
.punkt-wert.gruen { flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
.punkt-wert.gruen small { width: 100%; text-align: right; }
.punkt-wert.leise { color: var(--text3); }
.kachel.z-gewaehlt { box-shadow: inset 0 0 0 2px var(--orange-rand); }
.kachel.z-erledigt { box-shadow: inset 0 0 0 2px var(--gruen); }
.kacheln > li:first-child .kachel { border-top-left-radius: var(--r-karte); border-top-right-radius: var(--r-karte); }
.kacheln > li:last-child .kachel { border-bottom-left-radius: var(--r-karte); border-bottom-right-radius: var(--r-karte); }
.kachel-status .status.s-leer { font-weight: 600; font-size: 12.5px; padding: 2px 8px; }
.kachel-status .ersparnis { font-size: 13.5px; }
.kachel-status .ersparnis .ic { width: 15px; height: 15px; stroke-width: 3; margin-right: 2px; }
.kachel-vorschlag { grid-column: 2 / -1; color: var(--orange); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container ka (min-width: 640px) {
  .kachel.z-gewaehlt { border-color: var(--orange-rand); border-width: 2px; box-shadow: none; }
  .kachel.z-erledigt { border-color: var(--gruen); border-width: 2px; box-shadow: none; }
  .kachel-vorschlag { grid-column: 1 / -1; }
}
.reiter-leiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; max-width: 520px; }
.reiter-knopf { min-height: 46px; border: 0; border-radius: 12px; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--text2); }
.reiter-knopf[aria-selected="true"] { background: var(--blau-hell); color: var(--blau-tief); }
.ersparnis-karte.z-gewaehlt { border: 2px solid var(--orange-rand); }
.ersparnis-karte.z-gewaehlt .ersparnis-gross { color: var(--orange); }
.ersparnis-karte.z-erledigt { border: 2px solid var(--gruen); }
.ersparnis-karte .kn[disabled] { opacity: .45; cursor: not-allowed; }
.umsetzen { padding: 12px 14px; border-radius: 14px; background: var(--orange-hell); }
.umsetzen h3 { font-size: 15px; margin-bottom: 4px; }
.umsetzen .checkliste { background: none; border: 0; box-shadow: none; padding: 0; }
.umsetzen .haken-text > span { color: var(--text); }
.vorschlag.eigen { border-style: dashed; }
/* Kreis „X % vom Durchschnitt“: ab 100 % ganz grün */
.ring.voll .ring-wert { stroke: #2fd08f; }
.ring.voll .ring-moeglich { stroke: #2fd08f; }
.ring-mehr { font-size: 11px; font-weight: 700; color: #2fd08f; text-transform: none; line-height: 1.1; }
button.held-ziel { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; margin-left: -10px; min-height: 44px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14.5px; color: var(--held-text2); }
button.held-ziel:hover { background: rgba(255, 255, 255, .08); }
button.held-ziel small { font-size: 12px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }


.aktion-karte.hervor { border: 2px solid var(--blau); margin-bottom: 16px; }
.start .gruss .orange { color: var(--orange); }
/* Tipps und Tricks: Antwort als Notiz */
.tipp-punkt { display: flex; flex-direction: column; gap: 6px; }
.tipp-frage { display: flex; gap: 6px; align-items: flex-start; color: var(--blau-tief) !important; font-weight: 600; }
.tipp-frage .ic { width: 17px; height: 17px; margin-top: 3px; }
.tipp-antwort { display: flex; gap: 8px; align-items: flex-start; margin-left: 40px; padding: 8px 12px; border-radius: 12px; background: var(--flaeche2); font-size: 14.5px; white-space: pre-line; }
.tipp-antwort .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--text2); }
.tipp-aktionen { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-left: 30px; }
.tipp-aktionen .kn.text { padding: 0 10px; }
.tipp-notiz { margin-left: 40px; display: flex; flex-direction: column; gap: 8px; }
.tipp-notiz textarea, .feld textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie2); background: var(--flaeche); resize: vertical; }
.notiz.mit-frage .notiz-text { font-size: 14.5px; }
/* Geld */
.ansicht-umschalter { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin: 2px 0 12px; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--linie); }
.ansicht-umschalter button { min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--text2); font-weight: 700; font-size: 14.5px; }
.ansicht-umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(11, 31, 58, .14); }
.posten-notiz { display: block; font-size: 12.5px !important; color: var(--text2); font-weight: 400; margin-top: 0 !important; }
.posten.ist-leer .posten-betrag { color: var(--text3); font-weight: 500; }
.liste-titel { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.liste-titel span { font-variant-numeric: tabular-nums; }
.brutto-block { margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--linie2); }
.noch-leer { margin: 12px 0 4px; border-top: 1px solid var(--linie); padding-top: 4px; }
.noch-leer > summary, .mehr-felder > summary, .rechenhilfe > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--blau); list-style: none; }
.noch-leer > summary::-webkit-details-marker, .mehr-felder > summary::-webkit-details-marker, .rechenhilfe > summary::-webkit-details-marker { display: none; }
.noch-leer[open] > summary .ic, .mehr-felder[open] > summary .ic:first-child { transform: rotate(180deg); }
.posten-klein { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.posten-klein li { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.posten-klein li span { display: flex; flex-direction: column; } .posten-klein small { color: var(--text2); }
.posten-klein b { font-variant-numeric: tabular-nums; }
.posten-editor { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.posten-editor legend { font-weight: 700; margin-bottom: 6px; }
.posten-reihe { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 6px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.posten-reihe > input[name=pname], .posten-reihe select, .posten-felder select, .posten-felder input[type=text]:not([inputmode]) { min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linie2); background: var(--flaeche); min-width: 0; width: 100%; }
.posten-reihe > input[name=pname] { grid-column: 1 / -1; }
.posten-reihe .kn.rund { width: 46px; min-height: 46px; justify-self: end; }
.posten-reihe select { grid-column: 1; } .posten-reihe .euro-eingabe { grid-column: 2; grid-row: 2; }
/* Einrichtung */
.einrichtung .auf-inhalt { gap: 14px; }
.auf-abschnitt { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blau); }
.auf-frage { display: flex; gap: 12px; align-items: flex-start; }
.auf-frage > .kat-ic { margin-top: 4px; }
.auf-frage h1 { font-size: 24px !important; }
.wahl-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wahl { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 88px; padding: 14px; border-radius: 16px; border: 2px solid var(--linie); background: var(--flaeche); text-align: left; color: var(--text); }
.wahl b { font-size: 17px; } .wahl small { color: var(--text2); }
.wahl.klein { min-height: 52px; flex-direction: row; align-items: center; justify-content: center; font-weight: 700; }
.wahl[aria-pressed="true"] { border-color: var(--blau); background: var(--blau-hell); }
.wahl .ic { color: var(--blau); }
.betrag-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: end; }
.turnus-feld select, .vertrag-felder select, .kk-block select { min-height: 56px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linie2); background: var(--flaeche); width: 100%; }
.vertrag-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.vertrag-felder input, .kk-block input:not([inputmode]), .kk-block input { min-height: 48px; }
.chip-feld { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; } .chip-feld legend { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; } .chip-feld .chips { margin: 0; }
.rechenhilfe, .mehr-felder { border: 1px solid var(--linie); border-radius: 14px; padding: 2px 14px 8px; }
.rechenhilfe .feld-reihe { margin: 4px 0 8px; }
.kk-block { display: flex; flex-direction: column; gap: 10px; }
.kk-anteil { padding: 12px 14px; border-radius: 12px; background: var(--flaeche2); }
.auf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.auf-chips li { border: 1px solid var(--linie); border-radius: 14px; padding: 4px 8px 4px 4px; }
.auf-chips li.an { border-color: var(--blau); background: color-mix(in srgb, var(--blau-hell) 60%, transparent); }
.auf-chips li.an .haken-ic { color: var(--blau); }
.auf-chips .auf-vertrag small { color: var(--text2); font-weight: 500; }
.auf-vertrag.frei { cursor: default; }
.posten-felder { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px; padding: 0 4px 8px 40px; align-items: center; }
.posten-felder > input[type=text]:not([inputmode]) { grid-column: 1 / -1; }
.posten-felder .kn.rund { width: 46px; min-height: 46px; justify-self: end; }
.frei-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.frei-zeile input { min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linie2); background: var(--flaeche); min-width: 0; }
.summe-zeile { padding: 10px 14px; border-radius: 12px; background: var(--flaeche2); font-variant-numeric: tabular-nums; }
.drei-zahlen.gross dd { font-size: 22px; }
.auf-fuss .kn.text { flex: none; }
.rund-text { width: 54px; padding: 0 !important; }
.start-raster .offen-karte { order: 3; } .start-raster .erledigt-karte { order: 4; } .start-raster .geld-mini { order: 5; } .start-raster .aktion-karte { order: 6; }
.punkt .schritt-text small { white-space: normal; }
.punkt-unter { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; color: var(--text2); }
.punkt-unter.orange, .punkt-unter.orange b { color: var(--orange); }
.punkt-unter.orange { display: block; }
.punkt-unter.gruen { color: var(--gruen); font-weight: 700; }
.punkt-unter .ic { width: 16px; height: 16px; }
.punkt-pfeil { color: var(--text3); }
.ring-label { font-size: 11.5px; line-height: 1.2; text-align: center; color: var(--held-text2); font-weight: 600; }

/* ---------- Echter Betrieb (app.html) ---------- */
.avatar.bild { object-fit: cover; padding: 0; }
.ka-laden { min-height: 60vh; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text2); font-size: 15px; }
.ka-laden-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--blau, #0a6fd6); animation: ka-puls 1s ease-in-out infinite alternate; }
@keyframes ka-puls { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ka-laden-punkt { animation: none; } }
.ka-fehler { max-width: 440px; margin: 15vh auto 0; text-align: center; display: grid; gap: 12px; justify-items: center; }
.code-feld input { font-size: 26px; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.konflikte { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 8px; }
.konflikte li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linie); }
.hinweis-band.verworfen { margin-top: 10px; }
html[data-speichern="offline"] .ka-kopf::after { content: 'Offline'; font-size: 12px; font-weight: 600; color: var(--orange, #c2410c); margin-left: auto; margin-right: 8px; }

/* ---------- Auswahlfelder: eigener Pfeil mit festem Abstand zum Rand (Levi: Pfeil saß zu weit rechts) ---------- */
#ka-rahmen select { -webkit-appearance: none; appearance: none; padding-right: 42px !important; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b72' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px; }
:root.dark #ka-rahmen select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b5c8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#ka-rahmen select::-ms-expand { display: none; }

/* ---------- Finanzen (Einnahmen & Ausgaben, Vermögen) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ka-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.marke-zeichen { display: inline-flex; } .marke-zeichen img { display: block; width: 30px; height: 30px; border-radius: 8px; }
.fz-werkzeug { display: flex; gap: 6px; align-items: center; }
.fz-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 16px; background: var(--flaeche2); border: 1px solid var(--linie); }
.fz-reiter a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 12px; color: var(--text2); font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2; }
.fz-reiter a .ic { width: 18px; height: 18px; flex: none; }
.fz-reiter a.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(11, 31, 58, .14); }
.fz-reiter a.aktiv .ic { color: var(--blau); }
:root.dark .fz-reiter a.aktiv { box-shadow: inset 0 0 0 1px var(--linie2); }
.fz-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fz-rechts, .fz-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fz-umschalter { margin: 0; }
.fz-umschalter button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fz-umschalter .ic { width: 17px; height: 17px; }
/* Kurzübersicht */
.fz-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.fz-z { min-width: 0; }
.fz-z dt { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text2); }
.fz-z dt .ic { width: 14px; height: 14px; }
.fz-z dd { margin: 2px 0 0; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fz-z.gross dd { color: var(--gruen); }
.fz-z dd.minus, .fz-legende b.minus { color: var(--gefahr); }
.fz-balken { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--flaeche2); margin-top: 16px !important; }
.fz-balken > span { display: block; height: 100%; transition: width .3s; }
.t-aus { background: #f79009; } .t-aufbau { background: var(--blau); } .t-frei { background: var(--gruen); }
.fz-legende { list-style: none; margin: 12px 0 0 !important; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fz-legende li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; }
.fz-legende i { width: 12px; height: 12px; border-radius: 4px; }
.fz-legende span { display: flex; flex-direction: column; color: var(--text2); }
.fz-legende small { font-size: 12.5px; color: var(--text3); }
.fz-legende b { font-variant-numeric: tabular-nums; }
.fz-legende li:last-child span { color: var(--text); font-weight: 700; }
.fz-legende li:last-child b { color: var(--gruen); font-size: 17px; }
.fz-gespart { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gruen-hell); font-size: 14.5px; }
.fz-gespart .ic { color: var(--gruen); flex: none; margin-top: 1px; }
.fz-uebersicht .verlauf { margin-top: 16px !important; }
/* Listen */
.fz-karte { padding: 14px; }
.fz-karte .karte-kopf h2 { font-size: 18px; }
.fz-karte .karte-kopf .summe { font-weight: 800; font-size: 18px; }
.fz-ein .karte-kopf .summe { color: var(--gruen); }
.fz-unter { margin-top: 4px !important; }
.fz-abschnitt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 0; padding-bottom: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text2); border-bottom: 1px solid var(--linie); }
.fz-abschnitt span { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--text); }
.fz-liste { list-style: none; margin: 0; padding: 0; }
.fz-liste > li + li { border-top: 1px solid var(--linie); }
.fz-kopf { display: grid; grid-template-columns: 34px minmax(0, 1fr) 104px; gap: 8px; align-items: center; min-height: 62px; padding: 6px 0; }
.fz-kopf .kat-ic { width: 34px; height: 34px; border-radius: 10px; }
.fz-kopf .kat-ic .ic { width: 19px; height: 19px; }
.fz-name { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 0; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.fz-name-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fz-name .fz-pfeil { width: 18px; height: 18px; flex: none; color: var(--text3); transition: transform .2s; }
.fz-name:hover .fz-pfeil { color: var(--text); }
.fz-zeile.offen .fz-name .fz-pfeil { transform: rotate(180deg); color: var(--blau); }
.fz-label { font-weight: 600; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.fz-name small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text2); line-height: 1.3; overflow-wrap: anywhere; }
.fz-notizmarke { display: inline-flex; align-items: center; gap: 1px; color: var(--blau); font-weight: 700; }
.fz-notizmarke .ic { width: 13px; height: 13px; }
.fz-betrag input { width: 100%; min-height: 44px; padding: 6px 26px 6px 8px; border-radius: 10px; border: 1px solid var(--linie2); background: var(--flaeche); font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fz-betrag > span { right: 10px; font-size: 15px; }
.fz-betrag input::placeholder { color: var(--text3); font-weight: 500; }
.fz-betrag input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.fz-zeile.ist-leer .fz-betrag input { background: var(--flaeche2); border-color: var(--linie); }
.fz-zeile.ist-leer .fz-label { color: var(--text2); font-weight: 500; }
.fz-zeile.ist-leer .kat-ic { opacity: .55; }
.fz-summe { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; padding-right: 10px; white-space: nowrap; }
.fz-details { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px 0; padding: 12px; border-radius: 14px; background: var(--flaeche2); }
.fz-details .feld { margin: 0; }
.fz-details .feld > span { display: flex; align-items: center; gap: 6px; }
.fz-details .feld > span .ic { width: 15px; height: 15px; color: var(--blau); }
.fz-details textarea { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie2); background: var(--flaeche); font-size: 16px; resize: vertical; }
.fz-turnus select { max-width: 240px; }
.fz-posten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fz-posten li { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 6px 8px; align-items: center; }
.fz-posten-name { grid-column: 1 / -1; display: flex; flex-direction: column; font-weight: 600; }
.fz-posten-name small { color: var(--text2); font-weight: 400; }
.fz-posten select { min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linie2); background: var(--flaeche); width: 100%; min-width: 0; grid-column: 1; grid-row: 2; }
.fz-posten .euro-eingabe { grid-column: 2; grid-row: 2; }
.fz-notizen .fz-titel { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 0; }
.fz-notizen .fz-titel .ic { width: 15px; height: 15px; color: var(--blau); }
.fz-notizen .notizen { margin: 8px 0 0; }
.fz-notizen .notiz-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fz-link { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blau); font-weight: 700; text-decoration: none; }
.fz-link .ic { width: 17px; height: 17px; flex: none; }
.fz-link span { flex: 1; }
.fz-neu { margin-top: 6px !important; }
.fz-hinweis { display: flex; gap: 6px; align-items: flex-start; }
.fz-hinweis .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.fz-karte .gruppe-posten { margin-left: 8px; padding-left: 12px; }
.fz-karte .brutto-block { margin-top: 18px; }
.leer-karte { display: flex; gap: 14px; align-items: flex-start; }
.leer-karte > * + * { margin-top: 0; }
@container ka (min-width: 560px) {
  .fz-kopf { grid-template-columns: 40px minmax(0, 1fr) 140px; gap: 12px; }
  .fz-kopf .kat-ic { width: 40px; height: 40px; border-radius: 11px; }
  .fz-details { margin-left: 52px; }
  .fz-posten li { grid-template-columns: minmax(0, 1fr) 150px 112px; }
  .fz-posten-name { grid-column: 1; }
  .fz-posten select { grid-column: 2; grid-row: 1; } .fz-posten .euro-eingabe { grid-column: 3; grid-row: 1; }
  .fz-karte { padding: 18px 20px; }
  .fz-z dd { font-size: 24px; }
}
/* Einstellungen am PC: zwei Spalten ohne Lücken (Karten laufen wie in einer Zeitung) */
@container inhalt (min-width: 860px) {
  .einst-raster { display: block; columns: 2; column-gap: 20px; }
  .einst-raster > * { break-inside: avoid; margin: 0 0 20px; display: block; }
}

/* ---------- Datenaufnahme: Fotos, Abschnittsfarbe, Abos mit Logo, Notiz (Levi 04.11.2026) ---------- */
.einrichtung { --af: var(--blau); }
.einrichtung > .fortschritt > span { background: var(--af); }
.auf-stufen { list-style: none; margin: 10px auto 0; padding: 0 16px; width: 100%; max-width: 600px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.auf-stufen li { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text3); background: var(--flaeche2); min-width: 0; }
.auf-stufen li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auf-stufen li .ic { width: 14px; height: 14px; flex: none; }
.auf-stufen li.jetzt { background: var(--sf); color: #fff; }
.auf-stufen li.fertig { color: var(--sf); background: color-mix(in srgb, var(--sf) 14%, transparent); }
:root.dark .auf-stufen li.fertig { color: color-mix(in srgb, var(--sf) 50%, #fff); }
.einrichtung .auf-inhalt { padding-top: 16px; }
.auf-bild { position: relative; height: 150px; border-radius: 20px; overflow: visible; margin-bottom: 18px; background: color-mix(in srgb, var(--af) 16%, var(--flaeche2)); flex: none; }
.auf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.auf-bild::after { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(11, 31, 58, .32) 0%, rgba(11, 31, 58, 0) 45%, rgba(11, 31, 58, .18) 100%); pointer-events: none; }
.auf-bild.ohne-foto::after { display: none; }
.auf-bild-abschnitt { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0b1f3a; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.auf-bild-abschnitt .ic { width: 14px; height: 14px; color: var(--af); }
.auf-bild > .kat-ic { position: absolute; z-index: 1; left: 16px; bottom: -22px; box-shadow: 0 0 0 4px var(--flaeche), 0 6px 16px -6px rgba(11, 31, 58, .4); }
.auf-frage { display: block; margin-top: 6px; }
.auf-titel { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--af); margin: 0 0 4px; }
:root.dark .auf-titel { color: color-mix(in srgb, var(--af) 55%, #fff); }
.auf-hinweis { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--af) 9%, var(--flaeche)); color: var(--text2); font-size: 14.5px; margin: 0; }
.auf-hinweis .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--af); }
:root.dark .auf-hinweis .ic { color: color-mix(in srgb, var(--af) 55%, #fff); }
.einrichtung .betrag-zeile .euro-eingabe input:focus, .einrichtung .feld input:focus { border-color: var(--af); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af) 20%, transparent); }
.einrichtung .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--af) 14%, var(--flaeche)); border-color: var(--af); color: var(--text); font-weight: 700; }
.einrichtung .kn.primaer { background: var(--af); border-color: var(--af); color: #fff; }
:root.dark .einrichtung .kn.primaer { color: #fff; }
.einrichtung .wahl[aria-pressed="true"] { border-color: var(--af); background: color-mix(in srgb, var(--af) 12%, var(--flaeche)); }
.auf-start .auf-bild { margin-bottom: 24px; }
.auf-zwischen { display: flex; align-items: center; gap: 6px; margin: 4px 0 -4px; font-weight: 700; font-size: 14.5px; color: var(--text2); }
.auf-zwischen .ic { width: 16px; height: 16px; color: var(--af); }
/* Abos */
.abo-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.abo-kachel { position: relative; width: 100%; height: 100%; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); text-align: center; cursor: pointer; }
.abo-kachel:hover { border-color: var(--linie2); }
.abo-kachel.an { border: 2px solid var(--kf); background: color-mix(in srgb, var(--kf) 9%, var(--flaeche)); }
.abo-kachel .abo-name { font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.abo-kachel small { color: var(--text2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.abo-haken { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--kf); color: #fff; }
.abo-haken .ic { width: 13px; height: 13px; stroke-width: 3; }
.logo.abo-logo { height: 36px; border-radius: 9px; }
.logo.abo-logo.quadrat { width: 36px; padding: 4px; } .logo.abo-logo.breit { width: 80px; padding: 5px 7px; }
.abo-logo.ohne { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--kf); color: #fff; flex: none; }
.abo-logo.ohne .ic { width: 19px; height: 19px; }
.abo-gewaehlt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.abo-zeile { border: 1px solid var(--linie); border-radius: 16px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--flaeche); }
.abo-zeile-kopf { display: flex; align-items: center; gap: 10px; }
.abo-zeile-kopf b { flex: 1; min-width: 0; }
.abo-zeile-kopf .kn.rund { width: 44px; min-height: 44px; }
.abo-tarife { margin: 0; gap: 6px; }
.abo-tarife .chip { min-height: 44px; padding: 0 12px; font-size: 14px; gap: 8px; }
.abo-tarife .chip b { font-variant-numeric: tabular-nums; }
.abo-zeile .posten-felder { padding: 0; }
/* Notiz */
.auf-notiz { border: 1px dashed var(--linie2); border-radius: 14px; padding: 2px 14px; margin-top: 4px; }
.auf-notiz[open] { border-style: solid; padding-bottom: 12px; }
.auf-notiz > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; font-weight: 700; color: var(--text2); list-style: none; }
.auf-notiz > summary::-webkit-details-marker { display: none; }
.auf-notiz > summary .ic { width: 17px; height: 17px; color: var(--af); }
.auf-notiz > summary small { margin-left: auto; font-weight: 500; color: var(--text3); }
.auf-notiz textarea { width: 100%; min-height: 70px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linie2); background: var(--flaeche); font-size: 16px; resize: vertical; margin: 2px 0 6px; }
.auf-notiz textarea:focus { outline: none; border-color: var(--af); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af) 20%, transparent); }
.auf-notiz-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.auf-notiz-liste li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--flaeche2); white-space: pre-line; }
.auf-notiz-liste small { color: var(--text3); }
/* Bausteine (Versicherungen, Mobilität): Kacheln wie die Abos */
.einrichtung .auf-chips li.an { border-color: var(--af); background: color-mix(in srgb, var(--af) 8%, var(--flaeche)); }
.einrichtung .auf-chips li.an .haken-ic { color: var(--af); }
@container ka (min-width: 560px) { .auf-bild { height: 190px; } .abo-raster { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }
@container ka (min-width: 900px) {
  .einrichtung .auf-inhalt { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 36px; row-gap: 16px; align-content: start; margin-top: 4vh; }
  .einrichtung .auf-inhalt > * { grid-column: 2; }
  .einrichtung .auf-inhalt > .auf-bild, .einrichtung .auf-inhalt > .auf-start > .auf-bild { grid-column: 1; grid-row: 1 / span 30; height: 460px; position: sticky; top: 0; margin: 0; }
  .einrichtung .auf-inhalt > .auf-start { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 36px; row-gap: 14px; align-content: start; }
  .einrichtung .auf-inhalt > .auf-start > * { grid-column: 2; }
  .auf-bild > .kat-ic { left: auto; right: 16px; bottom: 16px; }
  .auf-stufen, .einrichtung .auf-fuss { max-width: 1000px; }
  .einrichtung .auf-fuss { padding-left: calc(340px + 36px + 20px); }
  /* Kopf, Fortschritt und Abschnitte auf derselben Breite wie der Inhalt */
  .einrichtung > .auf-kopf { width: 100%; max-width: 1000px; margin: 0 auto; padding: 8px 20px 6px 10px; }
  .einrichtung > .fortschritt { align-self: center; width: calc(100% - 40px); max-width: 960px; margin: 0 auto; }
  .einrichtung > .auf-stufen { padding: 0 20px; }
}
/* Logos mit weißer Schrift brauchen ihre Markenfläche */
.logo:has(img[src$="/wow.svg"]) { background: #00818a; border-color: #00818a; }
/* Einstellungen: Daten sichern */
.hinweis-box { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--warn-hell); color: var(--warn); }
.hinweis-box .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.sicherung-mehr { border-top: 1px solid var(--linie); padding-top: 4px; }
.sicherung-mehr > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; font-weight: 700; color: var(--text); list-style: none; }
.sicherung-mehr > summary::-webkit-details-marker { display: none; }
.sicherung-mehr > summary .ic { width: 17px; height: 17px; color: var(--text3); transition: transform .2s; }
.sicherung-mehr[open] > summary .ic { transform: rotate(180deg); }
.sicherung-mehr > * + * { margin-top: 10px; }
.sicherung-mehr[open] { padding-bottom: 6px; }
.upload.aus { opacity: .5; cursor: not-allowed; }
/* ---------- Erfolge ---------- */
/* Navigation unten: so viele gleich breite Spalten wie Punkte (5 oder 6), schmalere Pille bei 6 Punkten */
.ka-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ka-tabs:has(> .tab-punkt:nth-child(6)) .tab-punkt .ic { padding: 4px 12px; }
.ka-tabs:has(> .tab-punkt:nth-child(6)) { padding-left: 2px; padding-right: 2px; }
.ka-tabs:has(> .tab-punkt:nth-child(6)) .tab-punkt { font-size: 11px; white-space: nowrap; }
.erfolge-hinweis { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; padding: 10px 14px; border-radius: var(--r); background: var(--warn-hell); color: var(--warn); font-size: 14px; font-weight: 500; }
.erfolge-hinweis .ic { width: 18px; height: 18px; }
.erfolge-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container ka (min-width: 640px) { .erfolge-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ka (min-width: 1100px) { .erfolge-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.erfolg { display: flex; flex-direction: column; text-align: left; padding: 0; margin: 0; min-width: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden; color: var(--text); transition: border-color .15s, transform .15s; }
.erfolg:hover { border-color: var(--linie2); }
.erfolg:active { transform: scale(.99); }
.erfolg-bild, .erfolg-detail-bild { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--flaeche2); overflow: hidden; }
.erfolg-bild { border-bottom: 1px solid var(--linie); }
.erfolg-bild img, .erfolg-detail-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.erfolg-detail-bild { border-radius: 16px; border: 1px solid var(--linie); }
.erfolg-detail-bild img { object-fit: contain; }
.erfolg-grafik { display: block; width: 100%; height: 100%; padding: 4px 6px; }
.erfolg-platzhalter { display: grid; place-items: center; width: 100%; height: 100%; color: var(--blau); background: var(--blau-hell); }
.erfolg-platzhalter .ic { width: 44px; height: 44px; stroke-width: 1.6; }
.erfolg-beispiel { position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--held); color: var(--held-text); letter-spacing: .02em; }
:root.dark .erfolg-beispiel { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie2); }
.erfolg-inhalt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.erfolg-zahl { align-self: flex-start; font-weight: 800; font-size: 14.5px; color: var(--gruen); background: var(--gruen-hell); padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.erfolg-zahl.gross { font-size: 20px; padding: 6px 14px; letter-spacing: -0.01em; }
.erfolg-titel { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.erfolg-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text2); font-size: 15px; overflow-wrap: anywhere; }
.erfolg-mehr { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--blau); font-weight: 700; font-size: 14.5px; }
.erfolg-mehr .ic { width: 18px; height: 18px; }
.erfolg-detail { display: flex; flex-direction: column; gap: 14px; }
.erfolg-detail-text { white-space: pre-line; overflow-wrap: anywhere; }
.erfolge-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.erfolge-leer > * + * { margin-top: 0; }
.erfolge-fuss { margin-top: 22px; max-width: 70ch; }
/* Grafiken (SVG): Farben aus den Tokens, hell und dunkel */
.erfolg-grafik text { fill: var(--text); font-family: inherit; }
.erfolg-grafik .eg-titel { font-size: 14px; font-weight: 700; fill: var(--text2); }
.erfolg-grafik .eg-name { font-size: 13px; fill: var(--text2); }
.erfolg-grafik .eg-name.klein { font-size: 11px; }
.erfolg-grafik .eg-wert { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.erfolg-grafik .eg-plus { font-size: 14px; font-weight: 800; fill: var(--gruen); }
.erfolg-grafik .eg-spur { fill: var(--linie); }
.erfolg-grafik .eg-grau { fill: var(--text3); }
.erfolg-grafik .eg-blau { fill: var(--blau); }
.erfolg-grafik .eg-tuerkis { fill: var(--tuerkis); }
.erfolg-grafik .eg-achse { stroke: var(--linie2); stroke-width: 1; }

/* ---------- Entdecken: Kacheln mit Foto und Logo (Levi 04.11.2026) ---------- */
.themen-chips { flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.themen-chips .chip { min-height: 44px; padding: 0 12px; font-size: 14.5px; }
.thema-chip .ic { color: var(--tf); }
.thema-chip[aria-pressed="true"] { background: var(--tf); border-color: var(--tf); color: #fff; }
.thema-chip[aria-pressed="true"] .ic { color: #fff; }
.feed, .feed[data-testid] { display: grid !important; columns: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feed > .hack { margin: 0 !important; }
.hack { position: relative; padding: 0; gap: 0; border-top: 0; border-radius: 18px; overflow: hidden; }
.hack.gross { grid-column: 1 / -1; }
.hack-flaeche { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.hack-bild { position: relative; display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--tf) 18%, var(--flaeche2)); }
.hack.gross .hack-bild { aspect-ratio: 16 / 8; }
.hack-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hack-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 58, .28) 0%, rgba(11, 31, 58, 0) 40%, rgba(11, 31, 58, 0) 70%, rgba(11, 31, 58, .25) 100%); }
.hack-thema { position: absolute; z-index: 1; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 60px); padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--tf); color: #fff !important; font-size: 12px; font-weight: 700; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hack-thema .ic { width: 13px; height: 13px; flex: none; }
.hack-bild .logo.hack-logo, .hack-detail-bild .logo.hack-logo { position: absolute; z-index: 1; left: 8px; bottom: 8px; height: 34px; box-shadow: 0 4px 12px -4px rgba(11, 31, 58, .35); }
.logo.hack-logo.quadrat { width: 34px; padding: 3px; } .logo.hack-logo.breit { width: 78px; padding: 4px 6px; }
.hack-bild .hack-ic { position: absolute; z-index: 1; left: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 10px; background: var(--tf); color: #fff; }
:root.dark .hack-bild .hack-ic { background: var(--tf); color: #fff; }
.hack-bild .hack-ic .ic { width: 18px; height: 18px; }
.hack-text { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.hack-text b { font-size: 15px; line-height: 1.25; font-weight: 800; letter-spacing: -0.005em; }
.hack.gross .hack-text b { font-size: 19px; }
.hack-kurz { color: var(--text2); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hack-text small { display: flex; align-items: center; gap: 4px; margin-top: auto; color: var(--text2); font-size: 12.5px; }
.hack-text small .ic { width: 13px; height: 13px; }
.hack > .merken { position: absolute; z-index: 2; top: 2px; right: 2px; margin: 0; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.hack > .merken[aria-pressed="true"] { color: #ffc53d; }
/* Detail */
.hack-detail { display: flex; flex-direction: column; gap: 12px; }
.dialog-zu { z-index: 5; }
.hack-detail-bild { position: relative; z-index: 0; margin: -4px 0 4px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--flaeche2); }
.hack-detail-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hack-detail h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.hack-detail p { margin: 0; }
.hack-zwischen { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text) !important; }
.hack-zwischen .ic { width: 17px; height: 17px; color: var(--tf); }
.hack-detail .hack-schritte { gap: 6px; }
.hack-detail .hack-schritte li::marker { color: var(--tf); font-weight: 800; }
.hack-detail .kn[aria-pressed="true"] .ic { fill: currentColor; color: #c8941a; }
:root.dark .thema-chip .ic { color: color-mix(in srgb, var(--tf) 50%, #fff); }
:root.dark .thema-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--tf) 70%, #fff 0%); }
:root.dark .thema-chip[aria-pressed="true"] .ic { color: #fff; }
/* Nach Inhaltsbreite: ab 600 px drei Spalten, ab 900 px vier; die große Karte immer 2 x 2, damit daneben keine gestreckten Karten stehen */
@container inhalt (min-width: 600px) { .feed, .feed[data-testid] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hack.gross { grid-column: span 2; grid-row: span 2; } .hack.gross .hack-bild { aspect-ratio: auto; flex: 1; min-height: 240px; } .hack.gross .hack-text { flex: none; } }
@container inhalt (min-width: 900px) { .feed, .feed[data-testid] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---------- MF-Energie-Anfrage ---------- */
/* Sparvorschlag „Strom/Gas über MF-Energie wechseln“: Ablauf auf der Karte, Formular „Unverbindlich anfragen“ im Dialog (seiten/sparen.js) */
.mf-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 12px; background: var(--blau-hell); border: 1px solid var(--linie); }
.mf-box h4 { margin: 0; font-size: 14.5px; color: var(--text); }
.mf-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: mf; }
.mf-schritte li { position: relative; padding-left: 32px; font-size: 14.5px; line-height: 1.45; color: var(--text2); counter-increment: mf; }
.mf-schritte li::before { content: counter(mf); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--flaeche); border: 1px solid var(--linie2); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--blau); }
.mf-gesendet { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--gruen); }
.mf-gesendet .ic, .mf-hinweis .ic, .mf-dabei .ic, .mf-datenschutz .ic { flex: none; margin-top: 2px; }
.mf-hinweis { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--gruen-hell); color: var(--gruen); font-size: 14.5px; margin: 0 0 4px; }
.mf-form { display: flex; flex-direction: column; gap: 14px; }
.mf-form .feld textarea { min-height: 90px; }
.mf-dabei { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 0; color: var(--text2); }
.mf-datei input[type=file] { min-height: 0; padding: 10px; font-size: 14.5px; color: var(--text2); cursor: pointer; }
.mf-datei input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie2); background: var(--flaeche2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.mf-dateiliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mf-dateiliste:empty { display: none; }
.mf-dateiliste li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--flaeche2); border: 1px solid var(--linie); font-size: 14px; min-width: 0; }
.mf-dateiliste li span { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); font-weight: 600; }
.mf-dateiliste li small { flex: none; color: var(--text3); }
.mf-datenschutz { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--flaeche2); color: var(--text2); }
.mf-fehler { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--gefahr-hell); color: var(--gefahr); font-size: 14.5px; }
.mf-fehler[hidden] { display: none; }
.mf-ok .mf-ok-zeit { margin: 0; font-weight: 700; color: var(--text); }
/* ---------- Mehrere Vorschläge ---------- */
/* Je Vertrag mehrere gewählte Sparvorschläge (seiten/sparen.js, modell.js alleVorschlaege): je Vorschlag eine kompakte Karte mit eigener
   Ersparnis, eigener Checkliste und eigenem Haken. Orange = gewählt, grün = erledigt, neutral = Ersparnis fehlt noch. */
.mv-aufteilung { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; font-weight: 700; }
.mv-aufteilung span { display: inline-flex; align-items: center; gap: 5px; }
.mv-aufteilung .ic { width: 16px; height: 16px; }
.mv-zahl { margin: 14px 0 0; font-weight: 600; }
.mv-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mv-karte { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--linie2); min-width: 0; }
.mv-karte.z-gewaehlt { border-color: var(--orange-rand); border-left-color: var(--orange-rand); background: color-mix(in srgb, var(--orange-hell) 45%, var(--flaeche)); }
.mv-karte.z-erledigt { border-color: var(--gruen); border-left-color: var(--gruen); background: color-mix(in srgb, var(--gruen-hell) 55%, var(--flaeche)); }
.mv-kopf { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mv-kopf > .logo { margin-top: 2px; }
.mv-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--flaeche2); color: var(--text2); border: 1px solid var(--linie); }
.mv-ic .ic { width: 17px; height: 17px; }
.mv-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv-titel h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mv-art { font-size: 12.5px; color: var(--text2); font-weight: 600; }
.mv-betrag { flex: none; margin: 0; text-align: right; font-weight: 800; font-size: 17px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-betrag small { display: block; font-size: 12px; font-weight: 600; color: var(--text2); }
.mv-betrag.orange { color: var(--orange); }
.mv-betrag.gruen { color: var(--gruen); }
.mv-karte > p { margin: 0; }
.mv-karte .erledigt-am { margin: 0; }
.mv-karte .knopf-reihe { gap: 8px; }
.mv-karte .knopf-reihe > .kn.text { flex: 0 0 auto; }
.mv-schritte { padding: 0; border-radius: 12px; background: var(--orange-hell); }
.mv-schritte > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--text); }
.mv-schritte > summary::-webkit-details-marker { display: none; }
.mv-schritte > summary > span:first-child { flex: 1; min-width: 0; }
.mv-schritte > summary .ic { flex: none; width: 18px; height: 18px; transition: transform .2s; color: var(--text2); }
.mv-schritte[open] > summary .ic { transform: rotate(180deg); }
.mv-schritte > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 12px; }
.mv-fortschritt { flex: none; font-size: 13px; font-weight: 700; color: var(--orange); padding: 2px 8px; border-radius: 999px; background: var(--flaeche); }
.mv-schritte .checkliste { padding: 0 12px 10px; }
.mv-dazu { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie2); }
.mv-dazu .kn { align-self: flex-start; }
.mv-dazu p { margin: 0; }
.mv-statt-hinweis, .mv-ersetzt { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-hell); color: var(--warn); }
.mv-statt-hinweis .ic, .mv-ersetzt .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.mv-ersetzt { margin: 0 0 12px; }
.vorschlag.gewaehlt .gewaehlt-chip.s-erledigt { background: var(--gruen-hell); color: var(--gruen); }
@container ka (max-width: 420px) {
  .mv-karte { padding: 12px; }
  .mv-karte .knopf-reihe > .kn.zweit { flex: 1 1 auto; }
}

/* ---------- Partner ---------- */
/* Karte „Partner einladen“, Seite „Gemeinsamer Haushalt“ (Bleibt / Fällt weg), Hinweise auf Start, frühere Stände in „Deine Daten sichern“ */
.partner-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 12px 0 4px; border-radius: 14px; background: var(--flaeche2); border: 1px solid var(--linie); }
.partner-status .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--blau); }
.partner-status span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.partner-status.verbunden { background: var(--gruen-hell); border-color: transparent; }
.partner-status.verbunden .ic { color: var(--gruen); }
.partner-karte .knopf-reihe { margin-top: 10px; flex-wrap: wrap; }
.partner-band { align-items: flex-start; margin: 4px 0 12px; }
.partner-band > .ic { flex: none; width: 20px; height: 20px; color: var(--blau); margin-top: 2px; }
.partner-band p { margin: 0; overflow-wrap: anywhere; }
.partner-beitritt h1 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.partner-beitritt .haken { margin: 14px 0 4px; }
.partner-beitritt .knopf-reihe { margin-top: 14px; flex-wrap: wrap; }
.vergleich-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 12px; }
.vergleich { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linie); background: var(--flaeche); }
.vergleich h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 6px; }
.vergleich h2 .ic { width: 18px; height: 18px; }
.vergleich p { margin: 0; }
.vergleich.bleibt { border-color: var(--gruen); background: var(--gruen-hell); }
.vergleich.bleibt h2 .ic { color: var(--gruen); }
.vergleich.weg h2 .ic { color: var(--text3); }
.vergleich.weg .klein { margin-top: 8px; color: var(--text2); }
.partner-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.partner-hinweis p { display: flex; gap: 8px; align-items: flex-start; margin: 0; flex: 1 1 240px; }
.partner-hinweis p .ic { flex: none; width: 20px; height: 20px; color: var(--blau); margin-top: 2px; }
.historie-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.historie-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--flaeche2); }
.historie-liste li > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; min-width: 0; flex: 1 1 200px; }
.historie-liste li > span .ic { grid-row: span 2; width: 18px; height: 18px; color: var(--text3); margin-top: 2px; }
.historie-liste b { overflow-wrap: anywhere; font-size: 14.5px; }
@container ka (min-width: 640px) { .vergleich-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Monatscheck (Finanzen › Plan und Wirklichkeit, CSV der Bank, Levi 04.11.2026) ---------- */
.fz-reiter.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fz-reiter.drei a { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@container ka (min-width: 640px) { .fz-reiter.drei a { flex-direction: row; gap: 8px; font-size: 15px; padding: 6px 10px; } }
.ma { --ma-gut: var(--gruen); --ma-gut-hell: var(--gruen-hell); --ma-mehr: var(--orange); --ma-mehr-hell: var(--orange-hell); --ma-viel: var(--gefahr); --ma-viel-hell: var(--gefahr-hell); --ma-passt: var(--blau); --ma-passt-hell: var(--blau-hell); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ma > * { min-width: 0; }
.ma-ansicht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--linie); }
.ma-ansicht a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px; color: var(--text2); font-weight: 700; font-size: 14px; text-decoration: none; }
.ma-ansicht a .ic { width: 17px; height: 17px; }
.ma-ansicht a.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(11, 31, 58, .14); }
:root.dark .ma-ansicht a.aktiv { box-shadow: inset 0 0 0 1px var(--linie2); }
@container ka (min-width: 640px) { .ma-ansicht { max-width: 460px; } }
.ma-monatwahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ma-monatwahl .kn.rund { width: 44px; min-height: 44px; flex: none; }
.ma-monatwahl .kn.rund:disabled { opacity: .4; cursor: default; }
.ma-monat-feld { flex: 1 1 160px; min-width: 0; max-width: 280px; }
.ma-monat-feld select { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--linie2); background: var(--flaeche); font-weight: 700; font-size: 16px; }
.ma-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.ma-status .ic { width: 16px; height: 16px; }
.ma-status.gut { background: var(--ma-gut-hell); color: var(--ma-gut); }
.ma-status.offen { background: var(--warn-hell); color: var(--warn); }
.ma-start { display: flex; flex-direction: column; }
.ma-start-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--blau-hell); color: var(--blau); }
.ma-start-ic .ic { width: 28px; height: 28px; }
.ma-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ma-schritte li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.ma-schritte .ma-nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche2); border: 1px solid var(--linie); font-weight: 800; font-size: 14px; }
.ma-upload { min-height: 64px; justify-content: center; font-size: 16.5px; background: var(--blau-hell); border-color: var(--blau); }
.ma-upload .ic { width: 24px; height: 24px; }
.ma-upload-klein { min-height: 48px; font-size: 14.5px; }
.ma-privat { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text2); }
.ma-privat .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gruen); }
.ma-hilfe { border: 1px solid var(--linie); border-radius: var(--r); padding: 0 12px; background: var(--flaeche2); }
.ma-hilfe summary, .ma-regeln summary { display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; cursor: pointer; list-style: none; }
.ma-hilfe summary::-webkit-details-marker, .ma-regeln summary::-webkit-details-marker { display: none; }
.ma-hilfe summary .ic, .ma-regeln summary .ic { width: 18px; height: 18px; color: var(--blau); }
.ma-hilfe summary .pfeil, .ma-regeln summary .pfeil { margin-left: auto; color: var(--text3); transition: transform .15s; }
.ma-hilfe[open] summary .pfeil, .ma-regeln[open] summary .pfeil { transform: rotate(180deg); }
.ma-hilfe > * + * { margin-top: 8px; }
.ma-hilfe > :last-child { margin-bottom: 12px; }
.ma-banken { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ma-banken li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 10px; border-radius: 10px; background: var(--flaeche); font-size: 14px; }
.ma-banken li span { color: var(--text2); font-size: 13.5px; }
@container ka (min-width: 640px) { .ma-banken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-tipp { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--warn-hell); color: var(--text); font-size: 14px; }
.ma-tipp .ic { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 1px; }
.ma-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ma-links, .ma-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ma-held { border-width: 2px; }
.ma-held.gut { border-color: color-mix(in srgb, var(--ma-gut) 45%, var(--linie)); background: linear-gradient(180deg, var(--ma-gut-hell), var(--flaeche) 70%); }
.ma-held.schlecht { border-color: color-mix(in srgb, var(--ma-mehr) 45%, var(--linie)); background: linear-gradient(180deg, var(--ma-mehr-hell), var(--flaeche) 70%); }
.ma-satz { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; line-height: 1.35; font-weight: 600; }
.ma-satz .ic { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.ma-held.gut .ma-satz .ic, .ma-held.gut .ma-satz b { color: var(--ma-gut); }
.ma-held.schlecht .ma-satz .ic, .ma-held.schlecht .ma-satz b { color: var(--ma-mehr); }
.ma-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ma-vergleich > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; }
.ma-vergleich span.klein { color: var(--text2); }
.ma-vergleich b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ma-strich { display: block; height: 6px; border-radius: 999px; background: var(--flaeche2); overflow: hidden; margin-top: 4px; }
.ma-strich i { display: block; height: 100%; border-radius: 999px; }
.ma-strich.plan i { background: var(--text3); }
.ma-held.gut .ma-strich.ist i { background: var(--ma-gut); }
.ma-held.schlecht .ma-strich.ist i { background: var(--ma-mehr); }
.ma-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ma-zahlen > div { min-width: 0; }
.ma-zahlen dt { font-size: 13px; color: var(--text2); }
.ma-zahlen dd { margin: 0; font-weight: 800; font-size: 16px; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.ma-zahlen dd small { font-weight: 500; color: var(--text3); font-size: 12.5px; }
.ma-hinweis { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--blau-hell); color: var(--text); font-size: 13.5px; }
.ma-hinweis .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--blau); }
.ma-zahl { min-width: 32px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--orange-hell); color: var(--orange); font-weight: 800; font-size: 14px; }
.ma-zuordnen { border-color: color-mix(in srgb, var(--orange-rand) 50%, var(--linie)); }
.ma-zuordnen h2 .ic { color: var(--orange); }
.ma-umsaetze { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ma-umsatz { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--flaeche2); border: 1px solid var(--linie); min-width: 0; }
.ma-umsatz.ignoriert { opacity: .7; }
.ma-umsatz.ignoriert .ma-u-betrag { text-decoration: line-through; }
.ma-u-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; min-width: 0; }
.ma-u-text { display: flex; flex-direction: column; min-width: 0; }
.ma-u-text b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.ma-u-text small { color: var(--text2); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ma-u-betrag { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-u-betrag.plus { color: var(--gruen); }
.ma-marke { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 11.5px; font-weight: 700; color: var(--text2); }
.ma-marke .ic { width: 12px; height: 12px; }
.ma-marke.vorschlag { background: var(--orange-hell); border-color: transparent; color: var(--orange); }
.ma-u-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-u-wahl .kn { flex: 1 1 140px; min-width: 0; max-width: 100%; }
.ma-u-wahl .kn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-wahl { flex: 1 1 180px; min-width: 0; }
.ma-wahl select { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linie2); background: var(--flaeche); font-size: 15px; }
.ma-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text2); margin: 0; }
.ma-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ma-legende i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.l-passt { background: var(--ma-passt); } .l-gut { background: var(--ma-gut); } .l-mehr { background: var(--ma-mehr); } .l-viel { background: var(--ma-viel); } .l-plan { background: var(--text3); }
.ma-gruppe { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 14px !important; font-size: 15px; font-weight: 800; }
.ma-gruppe span { font-variant-numeric: tabular-nums; font-size: 15px; }
.ma-gruppe small { color: var(--text3); font-weight: 500; }
.ma-posten-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.ma-posten { border-top: 1px solid var(--linie); }
.ma-posten:first-child { border-top: 0; }
.ma-p-kopf { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 20px; gap: 10px; align-items: center; padding: 10px 0; min-height: 56px; background: none; border: 0; text-align: left; color: inherit; }
.ma-p-kopf .kat-ic { width: 36px; height: 36px; border-radius: 11px; }
.ma-p-kopf .kat-ic .ic { width: 18px; height: 18px; }
.ma-p-kopf .pfeil { width: 18px; height: 18px; color: var(--text3); transition: transform .15s; }
.ma-posten.offen .ma-p-kopf .pfeil { transform: rotate(180deg); }
.ma-p-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ma-p-label { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; line-height: 1.25; }
.ma-p-name small { color: var(--text2); font-size: 12.5px; }
.ma-p-balken { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--linie); }
.ma-p-balken .ist { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.ma-p-balken .ist.passt { background: var(--ma-passt); } .ma-p-balken .ist.gut { background: var(--ma-gut); } .ma-p-balken .ist.mehr { background: var(--ma-mehr); } .ma-p-balken .ist.viel { background: var(--ma-viel); }
.ma-p-balken .plan { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.ma-p-werte { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.ma-p-werte b { font-weight: 800; white-space: nowrap; }
.ma-diff { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-diff.passt { background: var(--ma-passt-hell); color: var(--ma-passt); }
.ma-diff.gut { background: var(--ma-gut-hell); color: var(--ma-gut); }
.ma-diff.mehr { background: var(--ma-mehr-hell); color: var(--ma-mehr); }
.ma-diff.viel { background: var(--ma-viel-hell); color: var(--ma-viel); }
.ma-posten > .ma-hinweis { margin: 0 0 10px; }
.ma-posten > .ma-umsaetze { margin: 0 0 12px; }
.ma-fuss { margin-top: 12px !important; }
.ma-aktionen .knopf-reihe .kn { flex: 1 1 200px; }
.ma-gespeichert { display: flex; gap: 8px; align-items: center; color: var(--gruen); font-weight: 700; font-size: 14.5px; }
.ma-gespeichert .ic { width: 18px; height: 18px; flex: none; }
.ma-regeln { padding-top: 4px; padding-bottom: 4px; }
.ma-regeln ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-regeln li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0 2px 10px; border-radius: 10px; background: var(--flaeche2); }
.ma-regeln li > span { display: flex; flex-direction: column; min-width: 0; }
.ma-regeln li b { font-size: 14px; overflow-wrap: anywhere; }
.ma-regeln li small { color: var(--text2); font-size: 12.5px; }
.ma-regeln li .kn { flex: none; min-width: 44px; color: var(--gefahr); }
.ma-verlauf { margin: 0; }
.ma-verlauf svg { width: 100%; height: auto; display: block; max-height: 200px; max-width: 640px; margin: 0 auto; }
.ma-verlauf .achse { stroke: var(--linie2); stroke-width: 1; }
.ma-verlauf rect.plan { fill: var(--text3); opacity: .55; }
.ma-verlauf rect.gut { fill: var(--ma-gut); }
.ma-verlauf rect.schlecht { fill: var(--ma-mehr); }
.ma-verlauf text.monat { fill: var(--text2); font-size: 11px; font-family: inherit; }
.ma-verlauf figcaption { margin-top: 6px; }
.ma-monate { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ma-monat-zeile { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; gap: 10px; align-items: center; padding: 12px; min-height: 60px; border-radius: 14px; border: 1px solid var(--linie); background: var(--flaeche2); text-align: left; color: inherit; }
.ma-monat-zeile .pfeil { width: 18px; height: 18px; color: var(--text3); }
.ma-m-name, .ma-m-werte { display: flex; flex-direction: column; min-width: 0; }
.ma-m-name small, .ma-m-werte small { color: var(--text2); font-size: 12.5px; }
.ma-m-werte { align-items: flex-end; font-variant-numeric: tabular-nums; }
.ma-m-werte b { white-space: nowrap; }
.ma-zr-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-frei { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ma-frei legend { width: 100%; margin-bottom: 4px; padding: 0; }
.haken-chip { position: relative; display: inline-flex; }
.haken-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.haken-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie2); background: var(--flaeche); font-weight: 600; font-size: 14.5px; }
.haken-chip input:checked + span { background: var(--blau-hell); border-color: var(--blau); color: var(--text); font-weight: 800; }
.haken-chip input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.ma-beispiel { overflow-x: auto; max-width: 100%; border: 1px solid var(--linie); border-radius: 10px; }
.ma-beispiel table { border-collapse: collapse; font-size: 12.5px; }
.ma-beispiel td { padding: 4px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; color: var(--text2); }

/* ---------- PC-Raster (Levi 04.11.2026): Spalten richten sich nach der Breite des Inhalts (Container „inhalt“ = .ka-inhalt),
   nicht nach dem ganzen Fenster. Ab 600 px Inhalt (z. B. 1024er Bildschirm) großzügiger, ab 860 px (ab etwa 1200er Bildschirm)
   mehrspaltig. Kennzahlen stehen oben über die volle Breite, darunter die Listen. Abstände zwischen Karten am PC einheitlich 20 px. ---------- */
.sparplan-werkzeug { max-width: 840px; margin-left: auto; margin-right: auto; }
@container inhalt (min-width: 600px) {
  .fz-raster, .fz-rechts, .fz-spalte, .vermoegen-raster, .vermoegen-gruppen, .ma, .ma-raster, .ma-links, .ma-rechts, .detail-raster, .einst-raster { gap: 20px; }
  .start-raster { gap: 20px; }
  .spar-summe { gap: 16px; }
  .kacheln, .erfolge-raster { gap: 16px; }
  .fz-umschalter { max-width: 420px; }
  /* Kurzübersicht: Legende als drei Kennzahlen nebeneinander */
  .fz-legende { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; }
  .fz-legende li { grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "i t" ". b"; column-gap: 8px; row-gap: 4px; align-items: start; }
  .fz-uebersicht .verlauf svg { max-width: 340px; }
  .fz-legende li i { grid-area: i; margin-top: 5px; }
  .fz-legende li span { grid-area: t; }
  .fz-legende li b, .fz-legende li:last-child b { grid-area: b; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
}
@container inhalt (min-width: 860px) {
  /* Start: zwei Spalten */
  .start-raster { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
  .start-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

  /* Finanzen, Einnahmen & Ausgaben: Übersicht als breites Band, rechts der Verlauf */
  .fz-uebersicht { padding: 24px 26px; }
  .fz-uebersicht:has(> .verlauf) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); column-gap: 28px; row-gap: 18px; align-content: start; }
  .fz-uebersicht:has(> .verlauf) > * { grid-column: 1; margin: 0 !important; }
  .fz-uebersicht > .verlauf { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; padding-left: 28px; border-left: 1px solid var(--linie); display: flex; flex-direction: column; justify-content: center; }
  .fz-uebersicht:not(:has(> .fz-gespart)) > .verlauf { grid-row: 1 / span 3; }
  .fz-uebersicht .verlauf svg { max-width: none; }
  .fz-zahlen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 16px; }
  .fz-z { padding-left: 16px; border-left: 1px solid var(--linie); }
  .fz-z:first-child { padding-left: 0; border-left: 0; }
  .fz-z dd, .fz-z.gross dd { font-size: 32px; }
  .fz-gespart { align-self: start; }
  /* Listenzeilen: ganze Zeile hebt sich beim Überfahren ab, damit Name und Betrag zusammengehören */
  .fz-kopf { margin: 0 -10px; padding: 6px 10px; border-radius: 12px; grid-template-columns: 40px minmax(0, 1fr) 160px; }
  .fz-kopf:hover { background: var(--flaeche2); }
  .fz-karte { padding: 22px 26px; }

  /* Vermögen: Gesamtvermögen als breites Band, darunter die Gruppen in zwei Spalten */
  .held-vermoegen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "titel anteile" "text anteile" "zahl anteile" "zahlen knopf"; column-gap: 48px; row-gap: 8px; padding: 24px 26px; }
  .held-vermoegen > * { margin: 0 !important; }
  .held-vermoegen > h2 { grid-area: titel; } .held-vermoegen > p.klein { grid-area: text; max-width: 46ch; }
  .held-vermoegen > .gross-zahl { grid-area: zahl; margin-top: 6px !important; font-size: 52px; }
  .held-vermoegen > .drei-zahlen { grid-area: zahlen; margin-top: 8px !important; max-width: 360px; align-self: end; }
  .held-vermoegen > .anteile { grid-area: anteile; align-self: center; }
  .held-vermoegen > .kn { grid-area: knopf; justify-self: end; align-self: end; }
  .vermoegen-gruppen:has(> :nth-child(2)) { display: block; columns: 2; column-gap: 20px; }
  .vermoegen-gruppen:has(> :nth-child(2)) > * { break-inside: avoid; margin: 0 0 20px; }
  .vermoegen-gruppen:has(> :nth-child(2)) > .karte { display: block; }

  /* Monatscheck: Ergebnis als breites Band oben, der Satz als Überschrift, darunter links Plan gegen Ist, rechts die Zahlen */
  .ma-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 14px; align-content: start; padding: 22px 26px; }
  .ma-held > * { grid-column: 1 / -1; margin: 0 !important; }
  .ma-held > .ma-vergleich { grid-column: 1; }
  .ma-held > .ma-zahlen { grid-column: 2; align-self: center; padding-left: 32px; border-left: 1px solid var(--linie); }
  .ma-held .ma-satz { font-size: 21px; }
  .ma-vergleich b { font-size: 30px; }
  .ma-zahlen dd { font-size: 18px; }
}

/* ---------- Einwilligungen kompakt (Levi 04.11.2026: alle drei auf einen Blick, Wortlaut zum Aufklappen) ---------- */
.einwilligung.kompakt { padding: 11px 12px; border-radius: 14px; }
.einwilligung.kompakt .haken-text b { font-size: 15px; line-height: 1.3; }
.einwilligung.kompakt .haken-text > span { font-size: 13.5px; line-height: 1.4; }
.einwilligung.kompakt + .einwilligung.kompakt { margin-top: -4px; }
.ew-voll { margin: 0 0 0 40px; font-size: 13px; }
.ew-voll summary { cursor: pointer; color: var(--blau); font-weight: 600; min-height: 32px; display: flex; align-items: center; list-style: none; }
.ew-voll summary::-webkit-details-marker { display: none; }
.ew-voll summary::after { content: '›'; margin-left: 6px; transition: transform .15s; }
.ew-voll[open] summary::after { transform: rotate(90deg); }
.ew-voll p { margin: 2px 0 4px; color: var(--text2); line-height: 1.45; }

/* ---------- Start (Levi 04.11.2026): Ersparnis-Kreis als Band über die volle Breite (steht jetzt vor dem Raster),
   darunter zwei gleich breite Spalten: links Als Nächstes, Zuletzt erledigt, Dein Monat; rechts Hier kannst du sparen und Aktionen. ---------- */
.start > .held { margin-bottom: 14px; }
@container inhalt (min-width: 600px) { .start > .held { margin-bottom: 20px; } }
@container inhalt (min-width: 860px) {
  .start-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .start > .held .held-mitte { justify-content: flex-start; gap: 40px; }
}
/* ---------- Anfrage an deinen Berater (seiten/anfrage.js, Levi 04.11.2026) ---------- */
.anfrage-form .anfrage-nachricht { padding: 12px 14px; border-radius: 12px; background: var(--flaeche2); border-left: 3px solid var(--blau); color: var(--text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.anfrage-form .anfrage-so { margin: -8px 0 0; }
.anfrage-angaben { display: flex; flex-direction: column; gap: 6px; }
.anfrage-angaben > p { margin: 0; color: var(--text2); }
.anfrage-angaben dl { margin: 0; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); }
.anfrage-angaben dl > div { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 10px; font-size: 14px; line-height: 1.4; }
.anfrage-angaben dt { color: var(--text3); }
.anfrage-angaben dd { margin: 0; color: var(--text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* Startseite: „Dein Berater“ als letzter Block ganz unten (Levi 04.11.2026). Breite Karte am PC: siehe .berater-breit (Layout 2). */
.start-berater { margin-top: 14px; }
@container inhalt (min-width: 600px) { .start-berater { margin-top: 20px; } }

/* ==================== Layout 2 (Levi 05.11.2026): PC ohne freie Flächen, Berater unten ====================
   Grundregel am PC: Übersicht oben über die volle Breite, darunter Listen; Spalten enden etwa gleich hoch; keine weißen Lücken.
   Alles über Container-Abfragen (Container „inhalt“), damit die Handy-Ansicht in der Vorschau und in der Berater-Ansicht stimmt. */

/* Berater als breite Karte ganz unten (Start, Sparpunkt, Einstellungen): Person links, Text und Kontakt in der Mitte, Knöpfe rechts */
.berater-breit { min-width: 0; }
@container inhalt (min-width: 860px) {
  .berater-breit .karte.berater { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr) auto; grid-template-areas: "kopf daten knoepfe"; align-items: center; column-gap: 28px; row-gap: 10px; }
  .berater-breit .karte.berater:has(> .berater-text) { grid-template-areas: "kopf text knoepfe" "kopf daten knoepfe"; }
  .berater-breit .karte.berater > * { margin: 0; min-width: 0; }
  .berater-breit .berater-kopf { grid-area: kopf; }
  .berater-breit .berater-text { grid-area: text; }
  .berater-breit .berater-daten { grid-area: daten; }
  .berater-breit .berater-daten:empty { display: none; }
  .berater-breit .karte.berater > .knopf-reihe { grid-area: knoepfe; flex-wrap: nowrap; justify-content: flex-end; }
}

/* Einstellungen: Berater-Karte unter den zwei Spalten (Levi 05.11.2026: Beratername weiter unten) */
.einst-berater { margin-top: 14px; }
@container inhalt (min-width: 600px) { .einst-berater { margin-top: 20px; } }
@container inhalt (min-width: 860px) { .einst-raster + .einst-berater { margin-top: 0; } }

/* Sparpunkt am PC: oben Ersparnis und daneben Vertrag und Notizen (gleich hoch, Notizen füllen den Rest), darunter Vorschläge und
   Tipps über die volle Breite, Vorschläge in zwei ausgeglichenen Spalten, ganz unten der Berater. */
.vs-liste { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@container inhalt (min-width: 860px) {
  .detail-raster { gap: 20px; }
  .detail-oben { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: stretch; min-width: 0; }
  .detail-oben > * { margin: 0; min-width: 0; }
  .detail-seite { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .detail-seite > * { margin: 0; }
  .detail-seite > .notizen-karte { flex: 1 1 auto; display: flex; flex-direction: column; }
  .notizen-karte > .notiz-form { margin-top: auto; padding-top: 12px; }
  /* ohne Notizen: der freie Platz zeigt einen ruhigen Leerzustand statt einer weißen Fläche */
  .detail-seite > .notizen-karte > .notizen-leer, .detail-oben.drei .notizen-karte > .notizen-leer { flex: 1 1 auto; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 16px; border: 1px dashed var(--linie2); border-radius: 14px; color: var(--text3); text-align: center; }
  .notizen-leer .ic { width: 26px; height: 26px; opacity: .7; }
  .detail-oben > .ersparnis-karte { display: flex; flex-direction: column; }
  .detail-oben > .ersparnis-karte > .mv-dazu { margin-top: auto; padding-top: 12px; }
  .mv-dazu { margin-top: 14px; }
  .detail-oben > .ersparnis-karte > .mv-liste { margin-bottom: 14px; }
  /* Ohne gewählten Vorschlag: Ersparnis, Vertrag und Notizen als drei gleich hohe Karten */
  .detail-oben.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-oben.drei > .detail-seite { display: contents; }
  .detail-oben.drei > .ersparnis-karte > .kn.breit { margin-top: auto; }
  /* Mehrere gewählte Vorschläge: Ersparnis als Band über die volle Breite (Vorschläge nebeneinander), darunter Vertrag und Notizen */
  .detail-oben.mv-mehrere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail-oben.mv-mehrere > .ersparnis-karte { grid-column: 1 / -1; }
  .detail-oben.mv-mehrere > .detail-seite { display: contents; }
  .detail-oben.mv-mehrere .mv-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; gap: 14px; }
  .mv-liste .mv-karte > .mv-knoepfe, .mv-liste .mv-karte > .erledigt-am { margin-top: auto; }
  .detail-rechts { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .detail-rechts .reiter { max-width: 640px; }
  /* Vorschläge in zwei Spalten, Karten einer Zeile gleich hoch (Knöpfe unten bündig). Der eigene Vorschlag füllt eine freie Hälfte
     der letzten Zeile als Kachel, sonst steht er als schmale Leiste über die volle Breite darunter. */
  #tafel > .vs-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  #tafel > .vs-liste > .vorschlag > .mehr { margin-bottom: auto; }
  #tafel > .vs-liste > .vorschlag.eigen { justify-content: center; align-items: center; text-align: center; }
  #tafel > .vs-liste > .vorschlag.eigen .vorschlag-kopf { flex-direction: column; }
  #tafel > .vs-liste > .vorschlag.eigen:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; gap: 20px; }
  #tafel > .vs-liste > .vorschlag.eigen:nth-child(odd) .vorschlag-kopf { flex-direction: row; }
  #tafel > .vs-liste > .vorschlag.eigen .knopf-reihe { flex: none; margin: 0; }
  /* Tipps und Tricks: lange Liste am PC in zwei Spalten */
  .tipps > .checkliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tipps > .checkliste > li { padding: 14px 18px; }
  .tipps > .checkliste > li + li { border-top: 0; }
  .tipps > .checkliste > li:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .tipps > .checkliste > li:nth-child(even) { border-left: 1px solid var(--linie); }
  /* Tabellen und ein übriger letzter Tipp (ungerade Zahl, sparen.js Klasse „breit“) über beide Spalten */
  .tipps > .checkliste > .tabelle-tipp, .tipps > .checkliste > .breit { grid-column: 1 / -1; border-left: 0; }
  .tipps > .checkliste > .tabelle-tipp, .tipps > .checkliste > .breit:not(:first-child) { border-top: 1px solid var(--linie); }
}

/* Link zum konkreten Angebot (Levi 05.11.2026): klarer Knopf mit Domain daneben, beim gewählten Vorschlag, in „So setzt du es um“
   und bei „Als Nächstes umsetzen“ auf der Startseite. Ohne Link gibt es den Knopf nicht. */
.kn.angebot-kn { border-color: var(--blau); color: var(--blau); flex-wrap: wrap; row-gap: 0; }
.angebot-kn .angebot-domain { font-weight: 500; font-size: 12.5px; color: var(--text2); }
.mv-angebot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.mv-angebot .klein { flex: 1 1 160px; }
.umsetzen-angebot { margin: 8px 0 2px; }
.punkte li.mit-angebot { display: flex; flex-direction: column; gap: 6px; }
.punkt-angebot { align-self: flex-end; min-height: 40px; font-size: 14px; }
.angebot-hinweis { margin-top: -4px; }