/* Zinswecker – Gestaltung (Neufassung 15.10.2026, leichter gemacht 24.10.2026): ein System aus wenigen Größen statt gewachsener Einzelregeln.
   Warmes Papier, tiefes Grün, große Zahlen. Keine fremden Schriften oder Dateien.
   Gewicht  400 Text und Zeilen · 500 Links, Reiter, Wahl · 600 Namen und Beträge · 650 große Zahlen und Titel – kein 700
   Flächen  Karten ohne Rahmen, nur ein Hauch Schatten · Hinweise ohne Kasten (nur Bernstein bleibt Fläche) · nie Füllfeld in Karte
   Schrift  12 · 13 · 14 · 15 · 16 · 17 · 20 · 22 · 32 · 40 px
   Abstand  4 · 8 · 12 · 16 · 20 · 24 · 32 px – Karten innen 16 px, Abschnitte 28 px auseinander
   Rundung  8 Marken · 12 Felder und Knöpfe · 16 Karten · 24 Kopfkarte und Blatt
   Farbe    trägt Bedeutung: Grün = Ertrag/gut · Bernstein = beachten/bald · Rot = Verlust/über der Grenze · Grau = Auskunft */

:root {
  --bg: #F4F3EE; --card: #FFFFFF; --feld: #F1F0EA; --druck: rgba(21, 33, 28, .06); --zu: rgba(21, 33, 28, .07);
  --ink: #15211C; --ink2: #4F5D56; --muted: #626D66; --line: #E4E1D8; --line2: #ECEAE3;
  --brand: #0F5D46; --brand-ink: #FFFFFF; --brand-soft: #E0F0E7; --brand-text: #0F5D46;
  --held: #0E4A39; --held-ink: #F3FAF6; --held-leise: #A9D3C1; --held-akzent: #BDF0D3;
  --warn: #8F5500; --warn-punkt: #D3901C; --warn-bg: #FBF0D9; --rot: #A8352B; --rot-bg: #FAE4E0;
  --schatten: 0 1px 2px rgba(21, 33, 28, .035), 0 4px 14px -8px rgba(21, 33, 28, .1); --spur: rgba(21, 33, 28, .065);
  --r-marke: 8px; --r-feld: 12px; --r: 16px; --r-gross: 24px;
  --unten: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
/* Dunkel: js/ansicht.js setzt data-ansicht (Wahl in den Einstellungen, sonst wie das Gerät) */
:root[data-ansicht="dunkel"] {
  --bg: #0D1411; --card: #161E1A; --feld: #1F2924; --druck: rgba(255, 255, 255, .06); --zu: rgba(255, 255, 255, .1);
  --ink: #E9EFEB; --ink2: #AAB6AF; --muted: #86928B; --line: #27322C; --line2: #222C27;
  --brand: #59C99B; --brand-ink: #06231A; --brand-soft: #173428; --brand-text: #7BDDB3;
  --held: #123A2D; --held-ink: #EAF6F0; --held-leise: #8FBBA8; --held-akzent: #9BE8C4;
  --warn: #F0B55A; --warn-punkt: #E3A23F; --warn-bg: #2E2511; --rot: #F2928A; --rot-bg: #371B19;
  --schatten: none; --spur: rgba(255, 255, 255, .08);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(80px + var(--unten));
}
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-text); }
.zahl, .gross, td, .wert { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mitte { min-width: 0; }
.nw { white-space: nowrap; }

/* ---------- Rahmen: Kopf, Inhalt, Reiter, Meldung ---------- */
.kopf {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(20px, calc(50% - 320px)) 10px; background: color-mix(in srgb, var(--bg) 88%, transparent);  /* breit: bündig mit der Inhaltsspalte (680 px) */
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 650; font-size: 20px; letter-spacing: -.015em; }
.stand { display: flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--ink2); font-size: 13px; padding: 8px 4px; white-space: nowrap; }
.stand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.stand.alt::before { background: var(--warn-punkt); }
.stand:empty { display: none; }

main { max-width: 680px; margin: 0 auto; padding: 4px 16px 24px; outline: none; }
main.rein { animation: rein .2s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } }
section + section { margin-top: 28px; }
.titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 10px; }
.titel h2 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.titel .neben, .titel .textlink { font-size: 15px; font-weight: 500; color: var(--brand-text); text-decoration: none; white-space: nowrap; }
.fuss { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 4px 0; }
.fuss .textlink { font-weight: 500; }
.fuss.rechtlich { margin-top: 6px; } .fuss.rechtlich a { color: var(--muted); }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; gap: 4px; padding: 6px 10px calc(10px + var(--unten));  /* unten 10px: sonst klebt das „g“ von „Angebote“ an der Android-Leiste (Alex 27.10.) */
  background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-top: .5px solid var(--line);
}
.tabs a { flex: 1; max-width: 160px; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 4px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 500; }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabs a[aria-current="page"] { color: var(--brand-text); }
.tabs a[aria-current="page"] svg { stroke-width: 2.3; }

.hinweis { position: fixed; left: 50%; bottom: calc(90px + var(--unten)); transform: translate(-50%, 16px); z-index: 50; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: var(--r-feld); background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 550; text-align: center;
  opacity: 0; pointer-events: none; transition: .2s; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.hinweis.an { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Bausteine ---------- */
.karte { background: var(--card); border: 0; border-radius: var(--r); box-shadow: var(--schatten); }
.karte + .karte { margin-top: 12px; }
.polster { padding: 16px; }
button.karte, a.karte { display: block; width: 100%; text-align: left; text-decoration: none; color: inherit; }

/* Zeilen in einer Karte: Trennlinie beginnt am Text, Druck färbt die Zeile */
.reihen, .liste { overflow: hidden; }
.reihen > *, .liste > * { position: relative; display: block; width: 100%; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; transition: background-color .12s; }
.reihen > * + *::before, .liste > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line2); pointer-events: none; }
.liste > * { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; }
.liste > button:active, .liste > a:active, .reihen > button:active, .zeile:active, .tipp .zeilen > button:active { background: var(--druck); }
.liste .l { min-width: 0; }
.liste .l b { display: block; font-weight: 400; }
.liste .l span { display: block; color: var(--ink2); font-size: 14px; }
.liste .r { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 15px; white-space: nowrap; }

/* Zeichen in Zeilen: Pfeil = führt weiter, Pfeil im Kreis = Auswahl, Symbol im Kreis = Art der Zeile */
svg.pfeil { flex: none; color: var(--muted); }
.symbol { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.symbol svg { display: block; }

/* Knöpfe */
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--r-feld);
  border: 1px solid transparent; background: var(--brand); color: var(--brand-ink); font-weight: 600; font-size: 16px; text-decoration: none;
}
.knopf.leise { background: var(--card); color: var(--ink); box-shadow: var(--schatten); }
.knopf.rot { background: var(--card); color: var(--rot); box-shadow: var(--schatten); }
.knopf.breit { flex: 1 1 auto; }
.knopf.klein { min-height: 40px; padding: 0 16px; font-size: 15px; }
.knopf:disabled { opacity: .5; }
.textknopf { min-height: 44px; border: 0; background: none; color: var(--brand-text); font-weight: 500; font-size: 15px; padding: 8px 4px; }
.textlink { border: 0; background: none; padding: 0; color: var(--brand-text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.knopf, .chip, .seg button, .ansicht, .rund, .zu { transition: transform .12s, opacity .12s, background-color .12s; }
.knopf:active, .chip:active, .ansicht:active, .rund:active, .zu:active { transform: scale(.97); opacity: .85; }

/* Wahlknöpfe und Segmente – überall dieselbe Form: graue Spur, die Wahl liegt hell darauf */
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--r-feld);
  border: 0; background: var(--feld); color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); }
.seg { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--r-feld); background: var(--spur); }
.seg button { position: relative; min-height: 34px; border: 0; border-radius: 9px; background: none; color: var(--ink2); font-size: 14px; font-weight: 500; padding: 0 4px; white-space: nowrap; }
/* Trefferfläche 44 px hoch, sichtbar bleibt das schlanke Segment */
.seg button::before { content: ""; position: absolute; inset: -5px -1px; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(21, 33, 28, .14), 0 0 0 .5px rgba(21, 33, 28, .05); }
[data-ansicht="dunkel"] .seg button[aria-pressed="true"] { background: #33413A; box-shadow: none; }

/* Schieber */
.schieber { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 50px; height: 30px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background .15s; }
.schieber::before { content: ""; position: absolute; inset: -7px -6px; }  /* Trefferfläche 44 px */
.schieber::after { content: ""; position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.schieber[aria-checked="true"] { background: var(--brand); }
.schieber[aria-checked="true"]::after { transform: translateX(20px); }

/* Marken: kleine Angaben mit Punkt davor, ohne Kästchen – Bernstein = beachten (dasselbe wie „!“ im Bank-Check), grau = Auskunft.
   Nur „gelb“ (veraltet, unklar, über dem Höchstbetrag) steht als getönte Fläche: das soll man nicht überlesen. */
.marken { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.marke-klein { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.marke-klein::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.marke-klein.acht::before { background: var(--warn-punkt); }
.marke-klein.gruen::before { background: var(--brand); }
.marke-klein.gelb { padding: 3px 8px; border-radius: var(--r-marke); background: var(--warn-bg); color: var(--warn); font-weight: 550; }
.marke-klein.gelb::before { background: var(--warn-punkt); }
.marke-klein.rot { color: var(--rot); } .marke-klein.rot::before { background: var(--rot); }

/* Hinweise: Zeichen links – grau = Auskunft (ohne Kasten, nur Zeichen und Text), Bernstein = beachten (getönte Fläche) */
.info { position: relative; padding: 0 4px 0 30px; color: var(--ink2); font-size: 14px; line-height: 1.45; }
.info.gelb, #vorschlag .info { padding: 12px 14px 12px 42px; border-radius: var(--r-feld); color: var(--ink); }
.info::before { content: ""; position: absolute; left: 4px; top: 1px; width: 18px; height: 18px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 8v4.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='5.4' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 8v4.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='5.4' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.info.gelb { background: var(--warn-bg); }
.info.gelb::before, #vorschlag .info::before { left: 14px; top: 13px; }
.info.gelb::before { background: var(--warn-punkt);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7.7 2.3a1.5 1.5 0 0 1 2.6 0l6.4 11.4A1.5 1.5 0 0 1 15.4 16H2.6a1.5 1.5 0 0 1-1.3-2.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7.7 2.3a1.5 1.5 0 0 1 2.6 0l6.4 11.4A1.5 1.5 0 0 1 15.4 16H2.6a1.5 1.5 0 0 1-1.3-2.3z'/%3E%3C/svg%3E"); }
.info.gelb::after { content: "!"; position: absolute; left: 14px; top: 14px; width: 18px; text-align: center; font-size: 11.5px; font-weight: 800; line-height: 18px; color: var(--warn-bg); }
.info + .info { margin-top: 10px; }
.info b { font-weight: 600; color: var(--ink); }
.leer { text-align: center; color: var(--ink2); padding: 28px 20px; font-size: 15px; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 6px; }
.punkt.alt { background: var(--warn-punkt); }

/* Beispieldaten-Hinweis über der Übersicht */
.beispiel { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 6px 4px 16px; margin-bottom: 14px;
  border-radius: var(--r-feld); background: var(--warn-bg); color: var(--ink); font-size: 14px; }
.beispiel .textknopf { color: var(--warn); }

/* Bank-Kachel: Farbe je Bank aus einer abgestimmten, gedämpften Reihe (format.js farbton) */
.bank { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13.5px; letter-spacing: -.01em;
  background: hsl(var(--h, 152) 26% 91%); color: hsl(var(--h, 152) 40% 28%);
  background: oklch(93.5% .03 var(--h, 152)); color: oklch(40% .07 var(--h, 152)); }
.bank.l1 { font-size: 17px; }
.bank.l4 { font-size: 10.5px; }
.bank.grau { background: var(--feld); color: var(--muted); }
[data-ansicht="dunkel"] .bank { background: hsl(var(--h, 152) 18% 21%); color: hsl(var(--h, 152) 40% 80%); background: oklch(31% .035 var(--h, 152)); color: oklch(86% .06 var(--h, 152)); }
[data-ansicht="dunkel"] .bank.grau { background: var(--feld); color: var(--muted); }

/* ---------- Übersicht ---------- */
/* Kopf der Übersicht: dunkelgrüne Karte – hebt Summe, Zins und „Mehr möglich“ als Einziges auf der Seite hervor (Alex 26.10.: den Block behalten) */
.held { position: relative; overflow: hidden; padding: 22px 22px 18px; border-radius: var(--r-gross); background: var(--held); color: var(--held-ink); }
.held::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(189, 240, 211, .16), transparent); pointer-events: none; }
.held .klein { font-size: 13px; color: var(--held-leise); }
.held .gross { margin-top: 2px; font-size: 40px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
/* Zinsen im Zeitraum: ohne Wechsel → mit Empfehlungen, darunter (Fußleiste .mehr) der Unterschied */
.held .zinsen { margin-top: 18px; }
.held .zinsen .zkopf { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.held .zinsen .zkopf b { margin-left: auto; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.held .zinsen .zwert { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; }
.held .zinsen .zwert + .zwert { border-top: 1px solid rgba(255, 255, 255, .12); }
.held .zinsen .zwert b { font-size: 20px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.held .mehr { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px -22px -18px; padding: 14px 22px; background: rgba(0, 0, 0, .18); font-size: 15px; }
.held .mehr b { color: var(--held-akzent); font-size: 17px; font-weight: 650; white-space: nowrap; }
/* Begrüßung ohne Konten: Satz, drei Haken, zwei Knöpfe – in derselben Karte */
.held h1 { font-size: 28px; font-weight: 650; line-height: 1.15; letter-spacing: -.025em; }
.held ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--held-ink); }
.held li { display: flex; gap: 10px; align-items: flex-start; }
.held li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--held-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.3 2.6 2.6L13 6.5' fill='none' stroke='%230E4A39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.held .knoepfe { margin-top: 22px; }
.held .knopf { background: var(--held-akzent); color: #0B3A2C; }
.held .knopf.leise { background: rgba(255, 255, 255, .1); color: var(--held-ink); box-shadow: none; }
/* Zeitraum: sichtbar ist die Pille, darüber liegt unsichtbar die echte Auswahl (16 px, damit iOS beim Antippen nicht hineinzoomt) */
.held .pille { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: -3px 0 -3px 3px; padding: 0 9px; border-radius: 9px;
  background: rgba(255, 255, 255, .13); color: var(--held-ink); vertical-align: middle; white-space: nowrap; }
.held .pille::after { content: ""; width: 9px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23CFE9DD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.held .pille select { position: absolute; left: 0; top: -9px; width: 100%; height: 44px; opacity: 0; font-size: 16px; cursor: pointer; }
.held .pille:has(select:focus-visible) { outline: 2px solid var(--held-akzent); outline-offset: 2px; }
.held .pille:active { background: rgba(255, 255, 255, .2); }

/* Empfehlung: Termin als Marke oben, Kalender als runder Knopf, Bank mit Auswahl-Pfeil, Zeilen am Fuß */
.tipp { position: relative; padding: 14px 16px 16px; overflow: hidden; }
/* Die ganze Karte öffnet das Angebot (Deckknopf unter dem Inhalt); Glocke, Bankname und Plan-Zeile liegen darüber */
.tipp .deck { position: absolute; inset: 0; z-index: 0; width: 100%; border: 0; border-radius: inherit; background: none; transition: background-color .12s; }
.tipp .deck:active { background: var(--druck); }
.tipp .rund, .tipp .zeilen > button, .tipp .ohne .textlink { position: relative; z-index: 1; }
.tipp .art { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; margin-bottom: 8px; }
.tipp .art > span:first-child { min-width: 0; padding: 3px 9px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; font-weight: 600; }
.tipp.spaeter .art > span:first-child { background: var(--feld); color: var(--ink2); }
.tipp.bald .art > span:first-child { background: var(--warn-bg); color: var(--warn); }
.tipp .kopfzeile { display: flex; gap: 12px; align-items: flex-start; }
.tipp h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.tipp h3 .von { display: block; margin-bottom: 1px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink2); }  /* von → zu: die neue Bank steht immer groß in eigener Zeile */
.tipp p { margin-top: 4px; color: var(--ink2); font-size: 14px; }
.tipp p span { display: inline-block; }
.tipp .plus { margin-left: auto; flex: none; text-align: right; }
.tipp .plus b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; color: var(--brand-text); white-space: nowrap; }
.tipp .plus span { font-size: 12px; color: var(--muted); }
.tipp > .marken { margin-top: 12px; }
.tipp .ohne { margin-top: 6px; font-size: 14px; color: var(--ink2); }
.tipp .ohne .textlink { font-weight: 500; }
.tipp .zeilen { margin: 12px -16px -16px; }
.tipp .zeilen > button { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; background: none;
  color: var(--ink); font-size: 15px; font-weight: 400; text-align: left; transition: background-color .12s; }
.tipp .zeilen > button::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line2); }
.tipp .zeilen .pfeil { margin-left: auto; }
.planzeile .zusatz, .band .zusatz { margin-left: auto; color: var(--ink2); font-size: 14px; white-space: nowrap; }
.planzeile .zusatz b, .band .zusatz b { margin-left: 2px; color: var(--brand-text); font-size: 15px; font-weight: 600; }
.tipp .zeilen .planzeile .pfeil { margin-left: 4px; }
.rund { position: relative; flex: none; width: 34px; height: 34px; margin: -4px -4px -4px 0; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; }
.rund::after { content: ""; position: absolute; inset: -6px; }
.rund.an { background: var(--brand); color: var(--brand-ink); }  /* Erinnerung gesetzt */
.bankknopf { position: relative; z-index: 1; display: inline; margin: -10px 0; padding: 10px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; }
.wahlpfeil { width: 20px; height: 20px; margin-left: 1px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink2); vertical-align: -4px; transition: background-color .12s; }
.bankknopf:active .wahlpfeil { background: color-mix(in srgb, var(--ink) 20%, transparent); }
.ruhig { display: flex; gap: 14px; align-items: center; padding: 16px; }
.ruhig .haken { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; }
.ruhig b { display: block; }
.ruhig span { color: var(--ink2); font-size: 14px; }
section > .info { margin-top: 12px; }

/* Konten und frühere Konten */
.reihen > .konto, .reihen > .frueher { padding: 14px 16px 16px; }
.konto .oben, .frueher .oben { display: flex; gap: 12px; align-items: center; }
.konto .name, .frueher .name, .angebot .name { font-weight: 600; font-size: 16px; line-height: 1.25; }
.konto .unter, .frueher .unter { color: var(--ink2); font-size: 14px; }
.konto .rechts { margin-left: auto; text-align: right; }
.konto .rechts b { display: block; font-size: 17px; letter-spacing: -.01em; }
.konto .rechts span { color: var(--ink2); font-size: 14px; }
.konto .ertrag { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink2); }
.konto .ertrag b { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.reihen > .neu { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; color: var(--brand-text); font-size: 16px; font-weight: 500; }
.pluszeichen { flex: none; width: 22px; height: 22px; margin: 0 10px; }
/* Frist: Balken + Zeile darunter; bricht nicht mitten im Satz um (rechter Teil rutscht als Ganzes nach unten) */
.frist { margin-top: 12px; }
.frist .balken { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.frist .balken i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.frist .text { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 10px; margin-top: 7px; font-size: 13px; color: var(--ink2); }
.frist .text > * { white-space: nowrap; }
.frist .text b { font-weight: 600; color: var(--ink); }
.frist .glocke { display: inline-block; margin-left: 6px; vertical-align: -2px; color: var(--brand-text); }
.frist .glocke svg { display: block; width: 13px; height: 13px; }
.frist.bald .balken i { background: var(--warn-punkt); } .frist.bald .text b { color: var(--warn); }
.frist.vorbei .balken i { background: var(--rot); } .frist.vorbei .text b { color: var(--rot); }
.frist.frei { margin-top: 10px; }
.frist.frei .text { margin-top: 0; }
.frist.frei .text b { color: var(--brand-text); }

/* Freibetrag: Jahre als Zeilen einer Karte; kräftiger Balken = heute, heller dahinter = mit Empfehlungen (Farbpunkt als Legende);
   über dem Freibetrag wächst der Maßstab, ein Strich zeigt die Grenze, dahinter rot */
.freib { padding: 0 16px 2px; }
.freib .frist { margin: 0; padding: 14px 0 16px; }
.freib .frist + .frist { border-top: 1px solid var(--line2); }
.freib .frist .text:first-child { margin: 0 0 9px; font-size: 15px; }
.freib .frist .text:first-child span:first-child { font-size: 16px; font-weight: 600; color: var(--ink); }
.freib .skala { position: relative; padding: 4px 0; }
.freib .balken { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: visible; }
.freib .balken i, .freib .balken em { position: absolute; inset: 0 auto 0 0; min-width: 8px; border-radius: 4px; }
.freib .balken i { background: var(--brand); }
.freib .balken i.rot { background: var(--rot); }
.freib .balken em { background: color-mix(in srgb, var(--brand) 36%, var(--line)); }
.freib .balken em.rot { background: color-mix(in srgb, var(--rot) 42%, var(--line)); }
.freib .balken .kante { border-radius: 4px 0 0 4px; }
.freib .grenze { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.freib .frist.vorbei .text b { color: var(--ink); }
.freib .frist .skala + .text:not(.mit) span:first-child { color: var(--ink2); }
.freib .frist.vorbei .skala + .text:not(.mit) span:first-child { color: var(--rot); font-weight: 600; }
.freib .frist .text.mit { margin-top: 9px; }
.freib .frist .text.mit > span:first-child { display: inline-flex; align-items: center; gap: 0 5px; color: var(--ink2); }
.freib .punkt { width: 9px; height: 9px; margin-right: 2px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 36%, var(--line)); }
.freib .frist .text.mit b { color: var(--ink); }
.freib .text.mit.drueber .punkt { background: color-mix(in srgb, var(--rot) 42%, var(--line)); }
.freib .frist .text.mit.drueber b { color: var(--rot); }
.abschnitt .freib + .liste { margin-top: 8px; }

/* ---------- Angebote ---------- */
.steuer { padding: 0; }
.steuer .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Betrag und Zeitraum: Beschriftung im Feld (spart eine Zeile) */
.feld { position: relative; min-width: 0; }
.feld label { position: absolute; left: 14px; top: 8px; z-index: 1; font-size: 12px; font-weight: 500; color: var(--muted); pointer-events: none; }
.betragfeld { position: relative; }
.feld .betragfeld input, .feld select { width: 100%; height: 56px; padding: 20px 36px 0 14px; border: 1px solid transparent; border-radius: var(--r-feld); background: var(--card);
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-align: left; appearance: none; -webkit-appearance: none; }
.feld select { background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%237F8A84' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; }
.betragfeld span { position: absolute; right: 14px; top: calc(50% + 9px); transform: translateY(-50%); color: var(--muted); font-size: 17px; pointer-events: none; }
.feld .betragfeld input:focus, .feld select:focus, .suchfeld input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.suchfeld { position: relative; margin-top: 8px; color: var(--muted); }
.suchfeld svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.suchfeld input { width: 100%; height: 44px; padding: 0 44px 0 40px; border: 1px solid transparent; border-radius: var(--r-feld); background: var(--card); color: var(--ink); font-size: 16px; }
.suchfeld input::placeholder { color: var(--muted); }
.suchfeld .leeren { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.suchfeld .leeren svg { position: static; transform: none; }
.leiste { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.leiste .chip { min-height: 40px; }
.leiste .chip:not([aria-pressed="true"]) { background: var(--card); }
.chip.filter svg { flex: none; }
.listenkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin: 14px 4px 6px; font-size: 13px; color: var(--muted); }
.ansicht { flex: none; width: 40px; height: 36px; margin-right: -6px; border: 0; border-radius: 10px; background: none; color: var(--ink2); display: grid; place-items: center; }
.ansicht[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); }

/* Zeilen über der Liste (Zinsänderungen, Plan) und Vergleichs-Band */
.band { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; font-size: 15px; }
.band b { font-weight: 600; }
.band.plan b { color: var(--brand-text); white-space: nowrap; }
.reihen > .band { display: flex; }
.reihen > .band + .band::before { left: 58px; }
.band .textknopf { min-height: 0; margin: -6px 0; padding: 6px 4px; }
.band.vergleich { margin-top: 12px; }

/* Angebot in der Liste: groß steht die Zahl, nach der sortiert ist */
.reihen > .angebot { padding: 13px 16px; }
.reihen > .angebot + .angebot::before { left: 66px; }
.angebot .oben { display: flex; gap: 12px; align-items: center; }
.namezeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.angebot .unter { margin-top: 2px; color: var(--ink2); font-size: 14px; line-height: 1.35; }
.angebot .satz { margin-left: auto; flex: none; text-align: right; }
.angebot .satz b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; }
.angebot .satz small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink2); }
.angebot.gesperrt .satz b { color: var(--muted); }
.reihen > .angebot .marken { margin: 6px 0 0 50px; }
/* Gesuchte Banken über der Liste */
.gesucht { margin-bottom: 4px; }
.gesucht .listenkopf { margin-top: 4px; }
.gesucht .textknopf { min-height: 36px; padding: 4px; }
.gesucht.haftet { position: sticky; top: var(--kopfhoehe, 0px); z-index: 4; padding-bottom: 6px; background: var(--bg); box-shadow: 0 8px 10px -10px rgb(0 0 0 / .35); }
/* Kompakte Liste */
.karte.kompakt { overflow: hidden; }
.zeile { position: relative; display: grid; grid-template-columns: 1fr 64px 74px; gap: 10px; align-items: center; width: 100%; padding: 11px 16px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.zeile + .zeile::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line2); }
.zeile .l { display: grid; min-width: 0; }
.zeile .l b { font-size: 15px; font-weight: 600; }
.zeile .l span { font-size: 12px; color: var(--muted); }
.zeile .z, .zeile .e { text-align: right; font-weight: 600; font-size: 15px; }
.zeile .e { color: var(--brand-text); }
.zeile.gesperrt .z, .zeile.gesperrt .e { color: var(--muted); }  /* wie .angebot.gesperrt: nur die Zahlen leiser, Text bleibt lesbar (vorher ganze Zeile 55 % → Kontrast ~2,2 : 1) */
.zeile.kopfz { padding-top: 10px; padding-bottom: 6px; font-size: 12px; color: var(--muted); cursor: default; }
.zeile.kopfz .z, .zeile.kopfz .e { font-weight: 500; font-size: 12px; color: var(--muted); }

/* ---------- Blatt (Angebot, Formulare, Hilfe) ---------- */
.blatt { display: none; width: min(680px, 100%); max-width: 100%; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--r-gross) var(--r-gross) 0 0; overflow: hidden;
  background: var(--bg); color: var(--ink); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); transition: transform .2s ease-out; }
.blatt[open] { display: flex; flex-direction: column; animation: hoch .34s cubic-bezier(.22, 1, .36, 1); }
.blatt:focus { outline: none; }
.blatt::backdrop { background: rgba(10, 16, 13, .42); }
.blatt[open]::backdrop { animation: abdunkeln .25s ease-out; }
.blatt::before { content: ""; flex: none; width: 36px; height: 5px; margin: 8px auto -6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.blatt[open].geht { animation: runter .2s ease-in forwards; }
.blatt.geht::backdrop { background: transparent; transition: background .2s; }
@keyframes hoch { from { transform: translateY(56px); opacity: 0; } }
@keyframes abdunkeln { from { background: transparent; } }
@keyframes runter { to { transform: translateY(100%); } }
@keyframes weg { to { transform: translateY(16px); opacity: 0; } }
.blattkopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 20px; flex: none; touch-action: none; }
.blattkopf h2 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.blattkopf .unter { color: var(--ink2); font-size: 14px; }
.blattkopf .bank { margin-left: -4px; }
.zu { position: relative; flex: none; width: 32px; height: 32px; margin-left: auto; border: 0; border-radius: 50%; background: var(--zu); color: var(--ink2); display: grid; place-items: center; }
.zu svg { width: 12px; height: 12px; }
.zu::after { content: ""; position: absolute; inset: -8px; }
.blattinhalt { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(24px + var(--unten)); -webkit-overflow-scrolling: touch; }
.blattinhalt > .filterhinweis { margin: 0 4px 10px; }
.blattfuss { flex: none; padding: 12px 16px calc(14px + var(--unten)); border-top: 1px solid var(--line2); background: var(--bg); }
.abschnitt { margin-top: 24px; }
.abschnitt > h3 { margin: 0 4px 8px; font-size: 15px; font-weight: 600; color: var(--ink2); }
.abschnitt > h3.mitknopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.abschnitt > h3.mitknopf .textknopf { min-height: 0; margin: -10px 0; padding: 10px 4px; font-size: 15px; }
.text { font-size: 15px; color: var(--ink2); }
.text p + p { margin-top: 12px; }
.text b { color: var(--ink); }

/* Angebot im Blatt: Ergebnis und Zinsverlauf zuerst, in einer Karte */
.ergebnis { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ergebnis > div:first-child { min-width: 0; }
.ergebnis .l { font-size: 13px; color: var(--ink2); }
.ergebnis .gross { font-size: 32px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.ergebnis .mehr { flex: none; padding: 7px 12px 8px; border-radius: var(--r-feld); background: var(--brand-soft); color: var(--brand-text); text-align: right; }
.ergebnis .mehr b { display: block; font-size: 17px; letter-spacing: -.01em; }
.ergebnis .mehr span { font-size: 12px; }
.ergebnis .mehr.minus { background: var(--feld); color: var(--ink2); }
.ergebniskarte .verlauf { margin-top: 14px; }
.verlauf { display: block; width: 100%; height: auto; }
.verlauf text { font: 600 12px system-ui, sans-serif; fill: var(--ink); font-variant-numeric: tabular-nums; }
.verlauf text.achse { font-weight: 450; fill: var(--muted); font-size: 11.5px; }
.verlauf text.eigen { fill: var(--muted); font-weight: 500; }  /* Zeit beim eigenen Konto bis zum Wechsel */
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; overflow: hidden; border-radius: var(--r); background: var(--line2); box-shadow: var(--schatten); }
.fakten > div { padding: 12px 14px; background: var(--card); }
.fakten .l { font-size: 12px; color: var(--muted); }
.fakten .wert { margin-top: 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.fakten .wert small { font-size: 13px; font-weight: 450; color: var(--ink2); }
.fakten .ganz { grid-column: 1 / -1; }
.fakten .wert small.staffel { display: block; margin-top: 2px; }
.abschnitt.hinweise { margin-top: 12px; }
.rechnung { width: 100%; border-collapse: collapse; font-size: 14px; }
.rechnung td { padding: 10px 0; border-top: 1px solid var(--line2); vertical-align: top; }
.rechnung tr:first-child td { border-top: 0; padding-top: 0; }
.rechnung td:last-child { padding-left: 12px; text-align: right; font-weight: 500; white-space: nowrap; }
.rechnung tr.summe td { padding-top: 12px; padding-bottom: 0; border-top: 1px solid var(--ink); font-weight: 650; font-size: 16px; }
.rechnung small { display: block; color: var(--muted); font-size: 12px; font-weight: 450; }
blockquote { margin: 0; padding: 14px 16px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-feld) var(--r-feld) 0; background: var(--card); color: var(--ink2); font-size: 14px; }
blockquote footer { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* Bank-Check: Sicherung, Steuer, Kundenstimmen – das Zeichen links sagt auf einen Blick, ob etwas zu beachten ist */
.bankcheck > * + *::before { left: 56px; }
.bankcheck > a, .bankcheck > div { padding: 12px 16px; }
.bankcheck .zeichen { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--feld); color: var(--ink2); }
.bankcheck .zeichen.gut { background: var(--brand-soft); color: var(--brand-text); }
.bankcheck .zeichen.acht { background: var(--warn-bg); color: var(--warn); }
.bankcheck .l b { font-size: 16px; font-weight: 500; }
.bankcheck a .r { color: var(--muted); }
.bankcheck > details { display: block; padding: 0; }
.bankcheck summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; list-style: none; cursor: pointer; }
.bankcheck summary::-webkit-details-marker { display: none; }
.bankcheck summary:active { background: var(--druck); }
.bankcheck .r.auf::before { content: ""; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.bankcheck details[open] .r.auf::before { transform: rotate(-135deg); margin-bottom: -4px; }
.bankcheck .erkl { margin: 0; padding: 0 16px 14px 56px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
/* Weitere Wege im Angebot (Wechsel, Begriffe, ausblenden) als Zeilen */
.wege .weg-rot { color: var(--rot); }

/* ---------- Formular ---------- */
.form { display: grid; gap: 16px; }
.form label, .form .gruppe { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink2); }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r-feld); background: var(--card);
  color: var(--ink); font-size: 16.5px; font-weight: 400; appearance: none; -webkit-appearance: none; }
.form select { padding-right: 38px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%237F8A84' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; }
.form textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
.form input[aria-invalid="true"] { border-color: var(--rot); }
.form .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .hilfe { font-size: 13px; font-weight: 400; color: var(--muted); }
.form .fehler { color: var(--rot); font-size: 14px; font-weight: 550; }
.form .fehler:empty { display: none; }
.form .gruppe { gap: 10px; }
.einheit { position: relative; display: block; }
.form .einheit input { padding-right: 104px; }
.einheit i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 15px; color: var(--muted); pointer-events: none; }
/* Auswahl als Segment (wie die Sortierung): graue Spur, die Wahl liegt hell darauf */
.form .wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 13px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.form .wahl label { position: relative; display: block; }
.form .wahl input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.form .wahl span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: 11px; color: var(--ink2); font-size: 15px; font-weight: 500; text-align: center; transition: background-color .12s; }
.form .wahl input:checked + span { background: var(--card); color: var(--brand-text); font-weight: 600; box-shadow: 0 1px 3px rgba(21, 33, 28, .14), 0 0 0 .5px rgba(21, 33, 28, .05); }
[data-ansicht="dunkel"] .form .wahl input:checked + span { background: #33413A; box-shadow: none; }
.form .wahl input:focus-visible + span { outline: 2px solid var(--brand); }
.form .wahl.drei { grid-template-columns: 1fr 1fr 1fr; }
.form .wahl.drei span { flex-direction: column; min-height: 56px; line-height: 1.25; }
.form .wahl span small { font-size: 12px; font-weight: 500; opacity: .8; }
.vorschlag { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-feld); background: var(--brand-soft); color: var(--brand-text); font-size: 14px; }
#vorschlag:empty { display: none; }
#vorschlag .info { background: var(--brand-soft); border-color: transparent; }
#vorschlag .info::before { background: var(--brand-text); }
.klapp > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; list-style: none; cursor: pointer; color: var(--brand-text); font-weight: 500; font-size: 15px; }
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::before { content: ""; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.klapp[open] > summary::before { transform: rotate(45deg); }
.klapp { margin-top: 12px; }
.form .klapp { margin-top: -4px; }
.klapp > .gruppe { padding-top: 4px; }
.hilfen { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.hilfen .textlink { min-height: 44px; }

/* ---------- Mehr, Filter, Datenstand ---------- */
.liste select { min-height: 40px; max-width: 60vw; padding: 0 22px 0 8px; border: 0; border-radius: 10px; color: var(--ink2); font-size: 15px; text-align: right; text-align-last: right; appearance: none; -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%237F8A84' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center / 11px; }
/* Erinnerungen: Zeile im Kontoblatt, Liste im Blatt „Erinnerungen“ */
.erinnerzeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-feld); background: var(--card); }
.erinnerzeile .l { flex: 1; min-width: 0; }
.erinnerzeile .l b { display: block; font-weight: 400; }
.erinnerzeile .l span { display: block; color: var(--ink2); font-size: 14px; }
.erinnerliste .r { gap: 4px; }
.erinnerliste .weg { flex: none; width: 40px; height: 40px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; }
.erinnerliste .weg:active { background: var(--druck); }
.liste select:focus-visible { outline: 2px solid var(--brand); }
.erweitert > .karte { margin-top: 4px; }
.freifeld { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.freifeld input { width: 72px; min-height: 40px; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--feld); color: var(--ink); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.freifeld input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.bankwahl { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 0; }
.bankwahl .chip { min-height: 36px; font-size: 14px; background: var(--brand-soft); color: var(--brand-text); }
.bankwahl .chip[aria-pressed="false"] { background: var(--feld); color: var(--muted); text-decoration: line-through; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { padding: 0 8px 8px 0; text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; }
.tabelle td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line2); }
.tabelle td:last-child, .tabelle th:last-child { padding-right: 0; text-align: right; }
.schritt { position: relative; display: flex; gap: 14px; padding: 12px 0; }
.schritt + .schritt { border-top: 1px solid var(--line2); }
.schritt:first-child { padding-top: 0; }
.schritt:last-child { padding-bottom: 0; }
.schritt .nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); font-weight: 600; font-size: 14px; }
.schritt b { color: var(--ink); }
.schritt p { margin: 3px 0 0; color: var(--ink2); font-size: 14px; }

/* ---------- Plan: einfach und mit mehreren Wechseln ---------- */
.band.plan { width: 100%; text-align: left; }
.planwahl { margin-left: auto; }
.planwahl select { height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 10px; color: var(--ink); font-size: 16px; font-weight: 500; appearance: none; -webkit-appearance: none;
  background: var(--zu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%237F8A84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px; }
.planwahl + .zu { margin-left: 0; }
.plan.polster { padding: 16px 16px 6px; }
.plan .ergebnis { margin: 0 0 14px; }
.plan .ergebnis .gross { font-size: 30px; }
.planbalken { display: flex; gap: 2px; height: 8px; margin-bottom: 6px; overflow: hidden; border-radius: 4px; }
.planbalken i, .pschritt .punkt { background: hsl(var(--h, 152) 30% 48%); background: oklch(60% .085 var(--h, 152)); }
.planbalken i.eigen, .pschritt .punkt.eigen { background: var(--muted); }
[data-ansicht="dunkel"] .planbalken i, [data-ansicht="dunkel"] .pschritt .punkt { background: hsl(var(--h, 152) 34% 62%); background: oklch(74% .085 var(--h, 152)); }
[data-ansicht="dunkel"] .planbalken i.eigen, [data-ansicht="dunkel"] .pschritt .punkt.eigen { background: var(--muted); }
/* Schritte als Zeitstrahl: Name mit Pfeil wählt eine andere Bank, die Zeile öffnet das Angebot */
.pschritt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.pschritt:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 31px; bottom: -13px; width: 2px; border-radius: 1px; background: var(--line); }
.pschritt .punkt { flex: none; width: 10px; height: 10px; margin: 7px 0 0; border-radius: 50%; }
.pschritt .mitte { flex: 1; display: grid; gap: 2px; justify-items: start; }
.pschritt .mitte > b, .pschritt .bankknopf { font-size: 16px; font-weight: 600; }
.pschritt .mitte > span { font-size: 14px; color: var(--ink2); }
.pschritt .marken { margin-top: 4px; gap: 4px; }
.pschritt .r { flex: none; padding-right: 18px; }
.pschritt .r b { font-size: 16px; line-height: 24px; }
.pschritt .zum { position: absolute; inset: 0 -8px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 16px 8px 0 0; border: 0; border-radius: 10px; background: none; }
.pschritt .zum:active { background: var(--druck); }

/* Liste „Bank wählen“ */
.bankliste > button { cursor: pointer; padding: 10px 16px; }
.bankliste > * + *::before { left: 64px; }
.bankliste .bank { width: 34px; height: 34px; }
.bankliste .l b { font-size: 16px; font-weight: 500; }
.bankliste .l span { font-size: 13px; }
.bankliste .r b { color: var(--ink); font-size: 16px; }
.bankliste > button[aria-pressed=true] { background: var(--brand-soft); }
.bankliste > button[aria-pressed=true] .r b { color: var(--brand-text); }
.bankliste > button[aria-pressed=true] .r::after { content: '✓'; color: var(--brand-text); font-weight: 700; }

/* ---------- Bewegung, schmale und breite Schirme ---------- */
@media (min-width: 720px) {
  .blatt { margin: auto; border-radius: var(--r-gross); max-height: 88dvh; }
  .blatt::before { display: none; }
  .blatt[open].geht { animation-name: weg; }
}
@media (prefers-reduced-motion: reduce) { .blatt { transition: none; } .blatt[open], .blatt[open]::backdrop, main.rein { animation: none; } }
@media (max-width: 380px) {
  .held .pille { padding: 0 7px; gap: 4px; }
  .frist .text { font-size: 12.5px; }
}
@media (max-width: 360px) {
  main { padding-left: 12px; padding-right: 12px; }
  .held .gross { font-size: 34px; }
  .angebot .satz b, .tipp .plus b { font-size: 20px; }
  .feld .betragfeld input, .feld select { font-size: 17px; }
  .feld select { padding-right: 28px; background-position: right 10px center; }
  .tipp p span { display: inline; }
  .tipp .art > span:first-child { padding: 3px 8px; font-size: 12px; }
  .stand { font-size: 12px; }
}