/* V4 – radikal vereinfachte Mobile UX.
   Nutzt die bestehenden Design-Tokens (v3.css / v3-reference.css / v3-plan-reference.css)
   und ergänzt nur die V4-spezifischen Bausteine: Statuskarte zuerst, 2×2-Kennzahlen,
   ein Stellhebel, ein nächster Schritt, Detailzone als Accordion. */

/* ---------- Hero-/Hintergrundbild (zwei verbindliche Assets, eine Komponente) ----------
   `js/v4-hero.js` hängt das Bild einmal ein (Mobile: Background.png, ab 700 px:
   Background_Desktop.png) und schaltet nur die Intensität (`data-mode`): «start» im
   Schnellstart (Landschaft oben klar erkennbar), «calm» auf «Mein Plan» und allen
   Detailseiten (dezenter Übergang). Die Bandhöhe folgt dem Seitenverhältnis des jeweiligen
   Bildes (Mobile 940 × 1672 → 1,78 × Breite), damit nichts hart beschnitten wird; das
   Mobile-Bild läuft unten bereits weich in Creme aus und wird nur leicht überblendet.
   Das Bild liegt mit negativem z-index hinter sämtlichem Inhalt – es kann nie Text oder
   Bedienelemente überdecken. Kein Parallax, kein Fixieren, keine Animation. */
body{position:relative}
.v4-hero{position:absolute;top:0;left:0;right:0;height:var(--v4-hero-height,180px);z-index:-1;overflow:hidden;pointer-events:none}
.v4-hero-media{display:block;width:100%;height:100%}
.v4-hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:var(--v4-hero-image-opacity,1)}
.v4-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(247,246,242,.06) 0%,rgba(247,246,242,.16) 42%,rgba(247,246,242,.55) 72%,var(--v3-bg) 100%)}
/* Schnellstart: kräftiger, warmweisser Schleier bis unter die Titelzeile (Logo + PageTitle
   liegen ruhig auf Creme), danach weiches Ausblenden, damit die Landschaft ab den
   Situations-Tabs wieder deutlich sichtbar ist und unten ruhig in Creme ausläuft.
   Kein Textschatten, keine Kontur, keine Card hinter dem Titel – nur dieser Verlauf. */
.v4-hero[data-mode="start"]{--v4-hero-height:min(178vw,62vh);--v4-hero-image-opacity:1}
.v4-hero[data-mode="start"]::after{background:linear-gradient(to bottom,
  rgba(247,246,242,.90) 0px,
  rgba(247,246,242,.90) 84px,
  rgba(247,246,242,.52) 112px,
  rgba(247,246,242,.26) 146px,
  rgba(247,246,242,.5) 46%,
  var(--v3-bg) 100%)}
/* Startscreen: dasselbe Bild als Vollbild, leicht abgedunkelt, damit die weisse Schrift auf
   Himmel und Wasser ruhig liegt. Kein Creme-Verlauf – der Startscreen ist ein eigenes Bild.
   Höhe über `100%` (nicht `100svh`): der Screen ist damit genau ein Bildschirm hoch, ohne
   18 px Überhang. Nach rechts ist die Bildfläche bewusst **überbreit** (`right:-26px`): so deckt
   sie auch den Scrollleisten-Streifen ab, den manche Browser für das Layout reservieren –
   deshalb war dort ein heller Rand sichtbar. */
.v4-hero[data-mode="landing"]{--v4-hero-image-opacity:1;left:-2px;right:-26px;height:100%}
.v4-hero[data-mode="landing"] .v4-hero-image{object-position:center}
.v4-hero[data-mode="landing"]::after{background:
  radial-gradient(125% 85% at 50% 44%, rgba(9,22,32,.50) 0%, rgba(9,22,32,.34) 58%, rgba(9,22,32,.26) 100%),
  linear-gradient(180deg, rgba(9,22,32,.30) 0%, rgba(9,22,32,.16) 30%, rgba(9,22,32,.24) 70%, rgba(9,22,32,.46) 100%)}
/* Plan und Detailseiten: derselbe Bildaufbau, derselbe ruhige Kopfbereich, darunter
   zurückgenommener als im Schnellstart. */
.v4-hero[data-mode="calm"]{--v4-hero-height:min(74vw,26vh);--v4-hero-image-opacity:.9}
.v4-hero[data-mode="calm"]::after{background:linear-gradient(to bottom,
  rgba(247,246,242,.90) 0px,
  rgba(247,246,242,.90) 84px,
  rgba(247,246,242,.74) 46%,
  rgba(247,246,242,.92) 82%,
  var(--v3-bg) 100%)}
@media(min-width:700px){
  /* Desktop-Panorama 2172 × 724 → 0,333 × Breite. */
  .v4-hero[data-mode="start"]{--v4-hero-height:min(33vw,42vh);--v4-hero-image-opacity:1}
  .v4-hero[data-mode="calm"]{--v4-hero-height:min(13vw,17vh);--v4-hero-image-opacity:.85}
}

/* ---------- PageTitle: die eine verbindliche Titelzeile (jeder V4-Screen) ----------
   Genau EINE horizontale Zeile: Haupttitel links, Kontextzeile rechts daneben – auf
   Mobile genauso. Der Titel schrumpft und bricht nie um; der Kontext nutzt höchstens
   zwei kurze Zeilen in seiner rechten Spalte und springt nie unter den Titel.
   Gerendert ausschliesslich von `js/v4-pagetitle.js` (PageTitle). */
.v4-head{display:flex;flex-direction:row;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.v4-head .v4-page-title{margin:0;flex:0 0 auto;font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.035em;color:var(--v3-ink);white-space:nowrap}
.v4-head .v4-page-context{flex:1 1 auto;min-width:0;margin:0;text-align:right;font:500 13px/1.35 system-ui,sans-serif;color:#2b3a41;overflow-wrap:break-word;hyphens:auto}
@media(max-width:430px){.v4-head .v4-page-title{font-size:24px}.v4-head .v4-page-context{font-size:12.5px}}
/* Lange Haupttitel («Angaben & Grundlagen.») bekommen auf schmalen Screens eine Stufe weniger,
   damit der Kontext rechts daneben nicht buchstabenweise umbricht. Immer einzeilig, nie
   unter dem Titel. */
@media(max-width:520px){.v4-head-long .v4-page-title{font-size:21px}}
/* Fokussierte Screens: genau EIN Rückweg «‹ Mein Plan» unter der Titelzeile. Kein «✕» –
   das gehört ausschliesslich Modals (`#v4Modal .v3-modal-close`). Ausserhalb der Titelzeile,
   damit der Kontext seine zwei Zeilen behält. */
.v4-detailbar{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.v4-head-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px 0 10px;border:0;border-radius:999px;background:var(--v3-soft);color:var(--v3-green);font:600 13px system-ui,sans-serif;cursor:pointer}
.v4-head-back:hover,.v4-head-back:focus-visible{box-shadow:inset 0 0 0 1px var(--v3-green)}

/* ---------- Planstatus: die wichtigste Karte ---------- */
.v4-verdict{border:1px solid var(--v3-line);border-radius:14px;padding:14px;margin:0 0 12px;background:var(--v3-surface)}
.v4-verdict.covered{border-color:#cfe3d6;background:#f2f8f3}
.v4-verdict.watch{border-color:#f0e0be;background:#fdf8ee}
.v4-verdict.gap{border-color:#f2cfcb;background:#fdf3f2}
.v4-verdict h2{margin:0;font:600 20px/1.25 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-verdict p{margin:6px 0 0;font:14.5px/1.45 system-ui,sans-serif;color:var(--v3-ink)}
.v4-verdict .v4-verdict-note{margin:6px 0 0;font:12px/1.4 system-ui,sans-serif;color:var(--v3-muted)}
.v4-verdict .v4-verdict-icon{display:inline-flex;align-items:center;gap:8px;font:600 12px system-ui,sans-serif;color:var(--v3-muted);text-transform:none}

/* ---------- Vier Kennzahlen ---------- */
.v4-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
@media(max-width:359px){.v4-tiles{grid-template-columns:1fr}}
.v4-tile{border:1px solid var(--v3-line);border-radius:12px;padding:10px;background:var(--v3-surface)}
.v4-tile span{display:flex;align-items:center;gap:6px;font:12px/1.3 system-ui,sans-serif;color:var(--v3-muted)}
.v4-tile strong{display:block;margin-top:6px;font:600 20px/1.2 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-tile small{display:block;margin-top:4px;font:11px system-ui,sans-serif;color:var(--v3-muted)}
.v4-tile.warn{background:#fdf3f2;border-color:#f2cfcb}

/* ---------- Stellhebel PK-Bezug ---------- */
.v4-lever{margin:0 0 12px}
.v4-lever .v4-lever-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.v4-lever h2{margin:0;font:600 17px system-ui,sans-serif;color:var(--v3-ink)}
.v4-lever .v4-lever-value{font:600 17px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-lever input[type="range"]{width:100%;margin:10px 0 2px}
.v4-lever .v4-lever-labels{display:flex;justify-content:space-between;font:12px system-ui,sans-serif;color:var(--v3-muted)}
.v4-lever-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}

/* ---------- Ein nächster Schritt: GENAU EINE zustandsabhängige Card ---------- */
.v4-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:12px;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface);text-align:left;cursor:pointer;font-family:system-ui,sans-serif}
.v4-next:hover,.v4-next:focus-visible{border-color:var(--v3-green)}
.v4-next-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--v3-soft);color:var(--v3-green)}
.v4-next strong{display:block;font:600 15px system-ui,sans-serif;color:var(--v3-ink)}
.v4-next small{display:block;margin-top:2px;font:12px/1.4 system-ui,sans-serif;color:var(--v3-muted)}
.v4-next svg{color:var(--v3-muted)}

/* ---------- Sekundäre Aktionen: maximal zwei kompakte Zeilen ---------- */
.v4-rows{list-style:none;margin:0 0 4px;padding:0}
.v4-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:38px;padding:0;border:0;border-top:1px solid var(--v3-line);background:transparent;text-align:left;cursor:pointer;font:600 14px system-ui,sans-serif;color:var(--v3-ink)}
.v4-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-row svg{flex:none;color:var(--v3-muted)}
.v4-row:hover span,.v4-row:focus-visible span{color:var(--v3-green)}

/* ---------- «Plan präzisieren»: offene bzw. geschätzte Angaben ---------- */
.v4-section{margin:6px 0 8px;font:600 13px system-ui,sans-serif;color:var(--v3-muted);text-transform:none}
.v4-open-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.v4-open{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface)}
.v4-open-body{flex:1 1 auto;min-width:0}
.v4-open-body strong{display:block;font:600 14px system-ui,sans-serif;color:var(--v3-ink)}
.v4-open-body small{display:block;margin-top:2px;font:12px/1.35 system-ui,sans-serif;color:var(--v3-muted)}
.v4-open-body small.done{color:var(--v3-green)}
.v4-open-body small.estimated{color:#8a6100}
.v4-open-cta{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--v3-green);background:var(--v3-surface);color:var(--v3-green);font:600 13px system-ui,sans-serif;cursor:pointer}

/* ---------- Detailzone (nur noch Zustandslabels) ---------- */
.v4-detail-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--v3-soft);color:var(--v3-green)}
.v4-detail-state{font:600 12px system-ui,sans-serif;color:var(--v3-muted);white-space:nowrap}
.v4-detail-state.estimated{color:#8a6100}
.v4-detail-state.open{color:var(--v3-muted)}
.v4-detail-state.done{color:var(--v3-green)}

/* ---------- Schnellstart ---------- */
.v4-start{display:grid;gap:12px;margin:14px 0 0}
@media(min-width:700px){.v4-start{grid-template-columns:1fr 1fr}}
.v4-start-card{border:1px solid var(--v3-line);border-radius:12px;padding:14px;background:var(--v3-surface)}
.v4-start-card label{display:block;margin:8px 0 8px;font:600 16px system-ui,sans-serif;color:var(--v3-ink)}
.v4-start-card input{width:100%;min-height:48px;padding:8px 10px;border:1px solid var(--v3-line);border-radius:10px;background:transparent;color:var(--v3-ink);font:22px Georgia,"Times New Roman",serif}
.v4-start-card input:focus-visible{outline:2px solid var(--v3-green);outline-offset:1px}
.v4-start-unit{margin-top:6px;font:12px system-ui,sans-serif;color:var(--v3-muted)}
.v4-start-hint{margin:0 0 10px;font:12px/1.45 system-ui,sans-serif;color:var(--v3-muted)}
.v4-segments{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.v4-segment{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--v3-line);background:var(--v3-surface);font:600 14px system-ui,sans-serif;color:var(--v3-green);cursor:pointer}
.v4-segment[aria-pressed="true"]{background:var(--v3-green);border-color:var(--v3-green);color:#fff}
.v4-assumptions{margin:16px 0 0;font:13px/1.5 system-ui,sans-serif;color:var(--v3-muted)}
.v4-cta{width:100%;margin:16px 0 0}
@media(min-width:700px){.v4-cta{width:auto;min-width:280px}}

/* ---------- Varianten ---------- */
.v4-variant{border:1px solid var(--v3-line);border-radius:12px;padding:14px;background:var(--v3-surface);margin-bottom:10px}
.v4-variant.current{border-color:var(--v3-green)}
.v4-variant-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v4-variant-head strong{font:600 17px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-variant-head .v4-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:600 12px system-ui,sans-serif;color:var(--v3-green)}
.v4-variant-status{display:block;margin:8px 0 0;font:600 13px system-ui,sans-serif;color:var(--v3-muted)}
.v4-variant-status.covered{color:var(--v3-green)}
.v4-variant-status.watch{color:#8a6100}
.v4-variant-status.gap{color:#a0443c}
.v4-variant dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:12px 0 0}
.v4-variant dl>div{display:flex;flex-direction:column}
.v4-variant dt{font:12px system-ui,sans-serif;color:var(--v3-muted)}
.v4-variant dd{margin:2px 0 0;font:600 15px system-ui,sans-serif;color:var(--v3-ink)}
.v4-variant-actions{margin-top:12px}
/* Der aktuelle Plan steht zuerst und offen; die weiteren Varianten sind zugeklappt und zeigen
   nur ihre Reichweite – die Kennzahlen kommen auf Tap, «Übernehmen» bleibt sichtbar. */
.v4-variant-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;cursor:pointer;list-style:none}
.v4-variant-summary::-webkit-details-marker{display:none}
.v4-variant-summary .v4-variant-head{grid-column:1}
.v4-variant-summary .v4-variant-status{grid-column:1}
.v4-variant-summary .v4-variant-chevron{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;color:var(--v3-muted)}
.v4-variant-summary:hover .v4-variant-head strong,.v4-variant-summary:focus-visible .v4-variant-head strong{color:var(--v3-green)}
.v4-variant-summary:hover .v4-variant-chevron,.v4-variant-summary:focus-visible .v4-variant-chevron{color:var(--v3-green)}
.v4-variant-summary:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px;border-radius:8px}
.v4-variant-fold[open] .v4-variant-chevron .v3-icon{transform:rotate(180deg)}
.v4-variant-fold[open] .v4-variant-summary{margin-bottom:2px}
.v4-variant-actions button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--v3-green);background:var(--v3-surface);color:var(--v3-green);font:600 14px system-ui,sans-serif;cursor:pointer}

/* ---------- Detail-Editoren als Tabelle (Label links, Wert rechts) ----------
   Eine ruhige Tabelle statt gestapelter Karten: gleiche Zeilenhöhe, gemeinsame
   Spaltenkanten, Beträge rechtsbündig mit Tabellenziffern, Einheit als eigene Spalte. */
.v4-form{margin:0}
.v4-form-table{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface);overflow:hidden}
.v4-form-table>*{padding:10px;min-width:0}
.v4-form-table>*:nth-child(n+3){border-top:1px solid var(--v3-line)}
.v4-form-table label{display:flex;align-items:center;gap:4px;font:600 14px/1.3 system-ui,sans-serif;color:var(--v3-ink);hyphens:auto;overflow-wrap:break-word}
.v4-form-value{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.v4-form-value input{width:94px;max-width:44vw;padding:2px 3px;border:0;border-bottom:1px solid var(--v3-line);background:transparent;text-align:right;font:600 17px/1.2 Georgia,"Times New Roman",serif;font-variant-numeric:tabular-nums;color:var(--v3-ink)}
.v4-form-value input:focus-visible{outline:2px solid var(--v3-green);outline-offset:1px;border-radius:8px;border-bottom-color:transparent;background:var(--v3-soft)}
.v4-form-value .v4-form-unit{flex:none;min-width:40px;font:12px system-ui,sans-serif;color:var(--v3-muted)}
.v4-form-value select{max-width:52vw;padding:6px 8px;border:1px solid var(--v3-line);border-radius:8px;background:var(--v3-surface);color:var(--v3-ink);font:14px system-ui,sans-serif}
.v4-form-value .canton-picker{width:100%}
.v4-form-value .canton-trigger{min-height:32px;padding:0;border:0;background:transparent;justify-content:flex-end;gap:6px;font:600 15px system-ui,sans-serif}
.v4-form-value .canton-trigger img{width:16px;height:20px}
.v4-form-value .canton-trigger span:not(.canton-chevron){flex:0 1 auto;font-weight:600;color:var(--v3-ink)}
.v4-form-hint{margin:10px 0 0;font:12px/1.45 system-ui,sans-serif;color:var(--v3-muted)}
.v4-form-submit{width:100%;margin-top:12px;min-height:46px}
.v4-lead{margin:0 0 12px;font:14px/1.5 system-ui,sans-serif;color:var(--v3-muted)}
.v4-dev{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;padding:8px 10px;border:1px dashed var(--v3-line);border-radius:8px;background:#f4f1e8;font:12px system-ui,sans-serif;color:var(--v3-muted)}
.v4-dev button{border:1px solid var(--v3-green);background:var(--v3-surface);color:var(--v3-green);border-radius:6px;min-height:30px;padding:0 10px;font:600 12px system-ui,sans-serif;cursor:pointer}
.v4-year-nav{display:grid;gap:6px;margin:0 0 14px}
.v4-year-nav .v4-year-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v4-year-meta{display:inline-flex;align-items:center;gap:2px}
.v4-year-meta .v3-modal-icon{padding:5px;margin:-5px -5px -5px 0;border-radius:50%;color:var(--v3-green)}
.v4-year-meta .v3-modal-icon:hover{background:var(--v3-soft)}
.v4-year-nav strong{font:600 16px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
/* Jahresnavigation: «‹ ein Jahr» · Regler · «ein Jahr ›» – die Schritte sind an den Enden aus. */
.v4-year-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.v4-year-slider input[type="range"]{width:100%;margin:0;accent-color:var(--v3-green)}
.v4-year-step{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--v3-soft);color:var(--v3-green);cursor:pointer}
.v4-year-step:hover:not([disabled]),.v4-year-step:focus-visible{box-shadow:inset 0 0 0 1px var(--v3-green)}
.v4-year-step[disabled]{opacity:.4;cursor:default}
.v4-year-block{border-top:1px solid var(--v3-line);padding:12px 0}
.v4-year-block h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 15px system-ui,sans-serif;color:var(--v3-ink)}
/* Das Donut-Icon direkt neben den Vermögens-Überschriften öffnet das Töpfe-Modell: neutrale
   Bedienfarbe (kein Topf-Farbcode), 36 px Touchfläche, mint Kreis erst bei Hover/Tastatur-Focus,
   negativer Aussenabstand – so bleibt die Überschriftenzeile gleich hoch. */
.v4-year-pot{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-8px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--v3-green);cursor:pointer}
.v4-year-pot:hover,.v4-year-pot:focus-visible{background:var(--v3-soft)}
.v4-year-pot:focus-visible{outline:2px solid var(--v3-green);outline-offset:-2px}
.v4-year-pot .v3-icon{display:block}
.v4-year-strategy{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:600 13px system-ui,sans-serif;color:var(--v3-green)}
.v4-year-strategy .v3-modal-icon{color:var(--v3-green)}
.v4-year-carry{margin:0 0 8px;font:12px/1.45 system-ui,sans-serif;color:var(--v3-muted)}
.v4-year-line{display:flex;justify-content:space-between;gap:12px;font:13px system-ui,sans-serif;color:var(--v3-muted);padding:3px 0}
.v4-year-line strong{color:var(--v3-ink)}
.v4-year-line .v3-pot-icon{display:inline-flex;align-items:center;margin-right:6px;vertical-align:-2px}
/* Jahresverlauf als Übersicht: jeder Abschnitt zeigt zugeklappt genau seine Kennzahl, der Rest
   kommt auf Tap. Die Kennzahl ist eine gewöhnliche Zeile (`.v4-year-line`) plus Chevron. */
.v4-year-fold{margin:0}
.v4-year-fold>summary.v4-year-line{justify-content:flex-start;gap:0;cursor:pointer;list-style:none}
.v4-year-fold>summary.v4-year-line::-webkit-details-marker{display:none}
.v4-year-fold>summary.v4-year-line strong{margin-left:auto;padding-left:10px}
.v4-year-fold>summary.v4-year-line .v3-icon{flex:none;margin-left:6px;color:var(--v3-muted)}
.v4-year-fold>summary.v4-year-line:hover span,.v4-year-fold>summary.v4-year-line:focus-visible span{color:var(--v3-green)}
.v4-year-fold>summary.v4-year-line:hover .v3-icon,.v4-year-fold>summary.v4-year-line:focus-visible .v3-icon{color:var(--v3-green)}
.v4-year-fold>summary.v4-year-line:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px}
.v4-year-fold[open]>summary.v4-year-line{margin-bottom:4px}
.v4-year-fold[open]>summary.v4-year-line .v3-icon{transform:rotate(180deg)}
.v4-year-fold-body{padding:0}

/* Wohnkanton direkt im Schnellstart (ein Klick, Steuern geklärt). */
.v4-canton{display:grid;gap:4px;margin:16px 0 0}
.v4-canton label{font:600 13px system-ui,sans-serif;color:var(--v3-muted)}
.v4-canton select{min-height:48px;padding:8px 10px;border:1px solid var(--v3-line);border-radius:10px;background:var(--v3-surface);color:var(--v3-ink);font:16px system-ui,sans-serif}

/* Situationswahl in einer Zeile: zwei gleich breite Pillen, auch bei 390 px. */
.v4-segments{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.v4-segment{justify-content:center;min-width:0;padding:0 10px;font-size:14px;white-space:nowrap}
.v4-segment span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:430px){.v4-segment{font-size:13px;gap:6px;padding:0 10px}.v4-segment svg{width:16px;height:16px}}
/* Kleine Screens: Regel bleibt (eine Zeile), aber ohne Kürzung – Beschriftungen sind kurz. */
.v4-segment span{overflow:visible;text-overflow:clip}

/* Kompakter Schnellstart: Einheit im Feld, auf einem Mobilbildschirm ohne Scrollen. */
.v4-start{gap:8px;margin:10px 0 0}
.v4-start-card{padding:12px}
.v4-start-head{display:flex;align-items:center;gap:6px}
.v4-start-head .v4-detail-icon{width:24px;height:24px;border-radius:7px}
.v4-start-head label{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:0;font:600 14px system-ui,sans-serif}
.v4-start-head label small{font:11px system-ui,sans-serif;font-weight:400;color:var(--v3-muted)}
.v4-start-head .v3-modal-icon{margin-left:auto}
.v4-entry{position:relative;margin-top:8px}
.v4-entry input{width:100%;min-height:44px;padding:6px 78px 6px 10px;border:1px solid var(--v3-line);border-radius:10px;background:transparent;color:var(--v3-ink);font:20px Georgia,serif}
.v4-entry input:focus-visible{outline:2px solid var(--v3-green);outline-offset:1px}
.v4-entry-unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font:12px system-ui,sans-serif;color:var(--v3-muted);white-space:nowrap}
.v4-canton{margin:12px 0 0}
.v4-canton select{min-height:44px;font-size:15px}
.v4-assumptions{margin:12px 0 0;font-size:12px}
.v4-cta{margin-top:12px;min-height:50px}
.v4-head{margin-bottom:10px}

/* Feinschliff für einen Mobilbildschirm ohne Scrollen (390 × 844 als Referenz). */
body{padding-bottom:18px}
.masthead{min-height:44px}
.v4-head{margin-bottom:8px}
.v4-segments{margin:8px 0 0}
.v4-canton{margin:10px 0 0}
.v4-canton select{min-height:42px}
.v4-start{gap:6px}
.v4-start-card{padding:10px}
.v4-start-head label{font-size:13.5px}
.v4-entry{margin-top:6px}
.v4-assumptions{margin:8px 0 0}
.v4-cta{margin-top:8px;min-height:46px}
/* Der Rückweg zur Sicherung kostet auf dem Referenzbildschirm keine Höhe: kompakter Link. */
.v4-report-open{margin-top:0}
/* Reserve für kleine Geräte (360 × 780): Karten minimal dichter, damit nichts scrollt. */
@media(max-width:430px){.v4-start-card{padding:9px}}

/* Kompaktheitsregel für Eingaben (V4-Spec):
   genau zwei Zeilen je Karte (Label + Feld), kein Umbruch, gleiche Höhe und Rhythmik.
   Erklärungen stehen im Feld (Placeholder) oder hinter dem ⓘ – nie darunter. */
.v4-start{min-width:0}
.v4-start .v4-start-card{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;min-height:0}
.v4-start-head{flex:none;flex-wrap:nowrap}
.v4-start-head label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.v4-entry{flex:none}
.v4-entry input{height:42px;min-height:42px;line-height:1.2;text-overflow:ellipsis}
.v4-entry input::placeholder{font:13px system-ui,sans-serif;color:var(--v3-muted);opacity:1}
.v4-start-card select{height:42px;min-height:42px;width:100%;margin-top:6px;text-overflow:ellipsis}
/* Wohnkanton im Feld kompakt: nur der Code links, kurzer Hinweis rechts im Feld. */
.v4-start-card .canton-trigger{height:42px;min-height:42px;margin-top:6px;padding:6px 10px;border-radius:10px;gap:8px}
.v4-start-card .canton-trigger img{width:18px;height:22px}
.v4-start-card .canton-trigger .canton-trigger-hint{flex:0 0 auto;font:12px system-ui,sans-serif;color:var(--v3-muted);white-space:nowrap}
.v4-start-card .v4-start-head+.v4-entry,
.v4-start-card .v4-start-head+select{margin-top:6px}
/* Auf Desktop gleichmässige Karten; der Kanton läuft als fünfte Karte mit. */
@media(min-width:700px){.v4-start{align-items:stretch}}
/* ---------- «Plan präzisieren» / «Plan optimieren»: nummerierte Hebel ---------- */
.v4-hebel{border:1px solid var(--v3-line);border-radius:14px;background:var(--v3-surface);padding:14px;margin:0 0 12px}
.v4-hebel-head{display:flex;gap:10px;align-items:flex-start}
.v4-hebel-num{flex:none;width:28px;height:28px;border-radius:999px;background:var(--v3-soft);color:var(--v3-green);font:600 14px system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center}
.v4-hebel-intro{min-width:0}
.v4-hebel-intro h2{display:flex;align-items:center;gap:6px;margin:0;font:600 17px/1.25 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-hebel-intro p{margin:4px 0 0;font:13px/1.45 system-ui,sans-serif;color:var(--v3-muted)}
.v4-hebel-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--v3-line)}
.v4-hebel-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--v3-line);background:transparent;text-align:left;cursor:pointer;font-family:system-ui,sans-serif}
.v4-hebel-row:last-child{border-bottom:0}
.v4-hebel-copy{display:grid;gap:2px;min-width:0}
.v4-hebel-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.v4-hebel-line strong{font:600 14px system-ui,sans-serif;color:var(--v3-ink)}
.v4-hebel-line small{font:12px system-ui,sans-serif;color:var(--v3-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-hebel-value{font:600 13px system-ui,sans-serif;color:var(--v3-ink);white-space:nowrap}
.v4-hebel-row svg{color:var(--v3-muted)}
.v4-badge-tone{flex:none;padding:3px 8px;border-radius:999px;font:600 11px system-ui,sans-serif;white-space:nowrap;background:#f0efeb;color:var(--v3-muted)}
.v4-badge-tone.estimated{background:#fdf3e3;color:#8a6100}
.v4-badge-tone.done{background:var(--v3-soft);color:var(--v3-green)}
.v4-block-action{width:100%;margin-top:12px;min-height:44px;font:600 14px system-ui,sans-serif}
.v4-strategy-head{margin:12px 0 4px;font:12px system-ui,sans-serif;color:var(--v3-muted);text-align:right}
.v4-strategy-list{list-style:none;margin:0;padding:0}
.v4-strategy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;padding:8px 0;border-top:1px solid var(--v3-line)}
.v4-strategy:first-child{border-top:0}
.v4-strategy-mark{width:14px;height:14px;border-radius:999px;border:2px solid var(--v3-line);flex:none}
.v4-strategy.current .v4-strategy-mark{border-color:var(--v3-green);background:var(--v3-green);box-shadow:inset 0 0 0 2px var(--v3-surface)}
.v4-strategy-copy{min-width:0}
.v4-strategy-copy strong{display:block;font:600 14px system-ui,sans-serif;color:var(--v3-ink)}
.v4-strategy-outcome{display:block;margin-top:2px;font:12.5px system-ui,sans-serif;color:var(--v3-muted)}
.v4-strategy-bar{display:block;grid-column:2;height:8px;border-radius:999px;background:#ecebe6;overflow:hidden;min-width:32px}
.v4-strategy-bar span{display:block;height:100%;border-radius:999px;background:#3f6fa8}
.v4-strategy-value{display:none}
.v4-need-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin:12px 0 0}
.v4-need-amount{font:600 26px/1.15 Georgia,"Times New Roman",serif;color:var(--v3-ink);font-variant-numeric:tabular-nums}
.v4-need-amount small{font:13px system-ui,sans-serif;color:var(--v3-muted)}
.v4-chips{display:flex;flex-wrap:wrap;gap:6px}
.v4-chip{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--v3-line);background:var(--v3-surface);color:var(--v3-ink);font:600 13px system-ui,sans-serif;cursor:pointer}
.v4-chip[aria-pressed="true"]{border-color:var(--v3-green);background:var(--v3-soft);color:var(--v3-green)}
.v4-impact{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--v3-soft);font:13px/1.45 system-ui,sans-serif;color:var(--v3-ink)}

/* Strategie-Szenarien: ganze Zeile antippbar, Auswahl sichtbar, Wirkung darunter. */
.v4-strategy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;width:100%;padding:8px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;cursor:pointer;font-family:system-ui,sans-serif}
.v4-strategy-list{display:grid;gap:4px;margin:6px 0 0;padding:0;border:0}
.v4-strategy.selected{border-color:var(--v3-green);background:var(--v3-soft)}
.v4-block-action[disabled]{opacity:.6;cursor:default}
.v4-hebel-done{padding:0}
.v4-hebel-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px;cursor:pointer;list-style:none}
.v4-hebel-summary::-webkit-details-marker{display:none}
.v4-hebel-summary .v4-hebel-intro strong{display:flex;align-items:center;gap:6px;font:600 17px/1.25 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-hebel-summary .v4-hebel-intro small{display:block;margin-top:2px;font:13px system-ui,sans-serif;color:var(--v3-muted)}
.v4-hebel-summary svg{color:var(--v3-muted);transition:none}
.v4-hebel-done[open] .v4-hebel-summary svg{transform:rotate(90deg)}
.v4-hebel-done .v4-hebel-list{margin:0 14px}
.v4-hebel-done .v4-block-action{width:calc(100% - 28px);margin:12px 14px 14px}
/* Hebel 2 «Anlagestrategie»: im Ruhezustand nur die aktuelle Strategie mit ihrer Annahme und
   Wirkung; die drei Vorschau-Szenarien erscheinen erst auf Tap («zum Ändern aufklappen»). */
.v4-hebel-fold{padding:0}
.v4-hebel-strategy .v4-hebel-panel{padding:0 14px 14px}
.v4-hebel-strategy .v4-strategy-head{margin-top:4px}
.v4-hebel-strategy[open] .v4-hebel-summary{padding-bottom:6px}
.v4-hebel-strategy[open] .v4-hebel-summary svg{transform:rotate(90deg)}
/* ---------- Angaben & Grundlagen (Daten-Hub) ---------- */
.v4-basics-title{margin:0 0 8px;font:600 17px/1.25 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
/* Erfasste Werte stehen hier rechts; die Beschreibung links darf umbrechen statt abzuschneiden,
   damit sichtbar bleibt, WAS erfasst wurde. */
.v4-basics .v4-hebel-line small{white-space:normal;overflow:visible;text-overflow:clip}
.v4-basics .v4-hebel-row{align-items:start}
.v4-basics .v4-hebel-copy{padding-top:2px}
/* ---------- Aufgabengruppen im Menü ---------- */
.v4-menu-group{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 4px;padding:0 2px;font:600 11.5px system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--v3-muted)}
.v4-menu-group:first-child{margin-top:4px}
.v4-menu-badge{padding:2px 7px;border-radius:999px;background:var(--v3-soft);color:var(--v3-green);font:600 10.5px system-ui,sans-serif;letter-spacing:.02em}
/* Pilotbereich ganz unten: dezent, klar abgesetzt, kein Navigationsziel im engeren Sinn. */
.v4-menu-quiet{margin-top:10px;padding-top:8px;border-top:1px solid var(--v3-line);display:grid;gap:2px}
.v4-menu-quiet button{border:0;background:transparent;text-align:left;padding:8px 2px;min-height:36px;font:13px system-ui,sans-serif;color:var(--v3-muted);cursor:pointer}
.v4-menu-quiet button:hover,.v4-menu-quiet button:focus-visible{color:var(--v3-green);text-decoration:underline}
.v4-formed-note{margin:14px 0 0}
.v4-readonly{display:grid;margin:0;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface);overflow:hidden}
.v4-readonly>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-top:1px solid var(--v3-line)}
.v4-readonly>div:first-child{border-top:0}
.v4-readonly dt{font:600 14px/1.3 system-ui,sans-serif;color:var(--v3-ink);min-width:0;overflow-wrap:break-word}
.v4-readonly dd{margin:0;font:600 14px/1.3 system-ui,sans-serif;color:var(--v3-ink);text-align:right;white-space:nowrap}
/* Auf schmalen Screens stehen Beschriftung und Wert untereinander: lange Werte wie
   «Chancenorientiert · 6 % p.a.» können sonst nicht neben das Label passen. */
@media(max-width:520px){
  .v4-readonly>div{grid-template-columns:minmax(0,1fr)}
  .v4-readonly dd{text-align:left;white-space:normal}
}
.v4-readonly .v4-readonly-note{grid-column:1 / -1;margin:2px 0 0;font:12px/1.4 system-ui,sans-serif;color:var(--v3-muted)}
.v4-formed-note .v4-form-table label small{display:block;font-weight:400}
.v4-formed-note strong{font:600 14px system-ui,sans-serif;color:var(--v3-ink);text-align:right}
.v4-warning{margin:10px 0 0;padding:10px 12px;border:1px solid #f0e0be;border-radius:10px;background:#fdf8ee;font:13px/1.5 system-ui,sans-serif;color:#8a6100}
.v4-warning + .v4-chip{margin-top:8px}

/* ---------- Info-Dialoge: Betrag prominent, Herkunft klein, Werte als Tabelle ---------- */
.v4-info-amount{margin:0 0 10px;font:600 26px/1.15 Georgia,"Times New Roman",serif;color:var(--v3-ink);font-variant-numeric:tabular-nums}
.v4-info-amount small{font:13px system-ui,sans-serif;color:var(--v3-muted)}
.v4-info-source{margin:10px 0 0;font:12px/1.45 system-ui,sans-serif;color:var(--v3-muted)}
.v4-info-detail{margin:10px 0 0}
.v3-modal-body .v3-info-list dd{font-variant-numeric:tabular-nums}
/* Vermögen: eine Tabelle, Gruppenzeile für die optionalen Immobilienangaben. */
.v4-form-group{grid-column:1 / -1;padding:8px 10px;background:var(--v3-soft);font:600 12px system-ui,sans-serif;color:var(--v3-ink)}
.v4-form-group small{font-weight:400;color:var(--v3-muted)}
.v4-asset-form .v4-form-table label{font-size:13.5px}
.v4-form-value input::placeholder{font:13px system-ui,sans-serif;color:var(--v3-muted);opacity:1}
/* Datenstand: Textfeld zum Einlesen bzw. Kopieren (JSON) und Zustandshinweis darunter. */
.v4-report{width:100%;min-height:240px;padding:10px;border:1px solid var(--v3-line);border-radius:10px;background:var(--v3-surface);color:var(--v3-ink);font:12.5px/1.5 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;white-space:pre;overflow:auto;resize:vertical}
.v4-report-state{margin:8px 0 0;font:13px system-ui,sans-serif;color:var(--v3-green)}
/* Rückweg zur Sicherung: als dezenter Textlink, damit der Schnellstart ohne Scrollen bleibt. */
.v4-report-open{display:block;margin:2px auto 0;padding:0 8px;min-height:0;width:auto;border:0;background:transparent;color:var(--v3-green);font:600 13px/1.3 system-ui,sans-serif;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.v4-report-open:hover,.v4-report-open:focus-visible{background:var(--v3-soft);border-radius:8px}
/* Info-Dialoge: Schliessen-Knopf als reines «✕» (IconX, 22 px, Strichstärke 1,7) in der
   dunkelgrünen Textfarbe – kein Kreis, kein Hintergrund, kein Rahmen, kein Schatten.
   Mindestens 40 × 40 px unsichtbare Touchfläche, sauber oben rechts im Kopf; erst Hover
   oder Tastatur-Focus zeigt einen sehr dezenten mintfarbenen Kreis. */
#v4Modal .v3-modal-head{gap:12px;padding:12px 14px 12px 16px}
#v4Modal .v3-modal-head h2:focus{outline:none}
#v4Modal .v3-modal-close{display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--v3-green);cursor:pointer}
#v4Modal .v3-modal-close svg{display:block}
#v4Modal .v3-modal-close:hover,#v4Modal .v3-modal-close:focus-visible{background:var(--v3-soft);border-radius:50%}
#v4Modal .v3-modal-close:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px}

/* ---------- Töpfe-Dialog (V4): kompakt, ohne internes Scrollen ----------
   Der Dialog erklärt die Aufteilung genau einmal: helles, neutrales Zentrum mit dem Vermögen,
   darunter die drei Töpfe als kompakte Zeilen, danach eine einzige Card zur Anlagestrategie. */
#v4Modal .v3-modal-body{max-height:76vh;padding:12px 16px 14px}
#v4Modal .v3-modal-lead{margin:0 0 6px}
#v4Modal .v3-donut-wrap{margin:2px 0 8px}
/* Helles Creme/Mint statt grauer Fläche; Betrag und Label in Navy, einzeilig im Zentrum. */
#v4Modal .v3-donut{width:196px;height:196px}
#v4Modal .v3-donut-total{width:121px;height:121px;border-radius:50%;background:var(--v3-soft);color:var(--v3-brand);place-content:center;justify-items:center;text-align:center}
#v4Modal .v3-donut-total span{font:11.5px/1.25 system-ui,sans-serif;color:var(--v3-brand);opacity:.72}
#v4Modal .v3-donut-total strong{margin-top:2px;font:600 15px/1.15 Georgia,"Times New Roman",serif;color:var(--v3-brand);font-variant-numeric:tabular-nums;white-space:nowrap}
#v4Modal .v3-donut-legend{margin:0 0 10px;gap:0}
#v4Modal .v3-donut-legend li{grid-template-columns:24px minmax(0,1fr) auto auto auto;padding:5px 0;gap:8px}
#v4Modal .v3-donut-legend strong{font:600 15px system-ui,sans-serif;color:var(--v3-ink)}
.v4-pot-year{margin:0 0 6px;font:600 15px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-pot-year span{margin-left:6px;font:12px system-ui,sans-serif;font-weight:400;color:var(--v3-muted)}
.v4-pot-strategy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-soft)}
.v4-pot-strategy-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--v3-surface);color:var(--v3-green)}
.v4-pot-strategy-copy{min-width:0}
.v4-pot-strategy-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.v4-pot-strategy-head>span:first-child{font:12px system-ui,sans-serif;color:var(--v3-muted)}
.v4-pot-strategy-copy strong{display:block;margin-top:3px;font:600 16px/1.25 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-pot-strategy-rate{display:block;margin-top:1px;font:600 14px/1.3 system-ui,sans-serif;color:var(--v3-green)}
.v4-pot-strategy-copy small{display:flex;align-items:center;gap:4px;margin-top:2px;font:12px/1.4 system-ui,sans-serif;color:var(--v3-muted)}
.v4-pot-strategy .v3-modal-icon{flex:none}
/* Der Herkunfts-Badge liegt auf der mintfarbenen Card und braucht dort Flächenkontrast. */
#v4Modal .v4-pot-strategy .v4-badge-tone{background:var(--v3-surface)}
/* «Rente oder Kapital?» – Variantenvergleich (mobile Referenz, kein Y-Achsen-Plot) */
.v4-cmp{max-width:640px;margin:0 auto;--cmp-current:var(--v3-green);--cmp-current-soft:var(--v3-soft);--cmp-second:var(--v3-pot-bonds);--cmp-second-soft:#eaf1f8}
.v4-cmp h2{margin:0;font:600 16px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
/* Kompakte Action-Card «Rente oder Kapital?» – stärker als die sekundären Zeilen, dezenter als
   die Karte «Plan optimieren» (kleiner, ohne Icon-Kachel, grüner statt grauer Rahmen). */
.v4-cmp-entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;margin:10px 0 0;padding:9px 11px;border:1px solid var(--v3-green);border-radius:12px;background:var(--v3-soft);cursor:pointer;text-align:left;font-family:system-ui,sans-serif}
.v4-cmp-entry:hover,.v4-cmp-entry:focus-visible{background:#e2ece4}
.v4-cmp-entry:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px}
.v4-cmp-entry-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--v3-green)}
.v4-cmp-entry-copy{display:grid;gap:1px;min-width:0}
.v4-cmp-entry-title{font:600 14px Georgia,"Times New Roman",serif;color:var(--v3-green)}
.v4-cmp-entry-line{font:11.5px/1.35 system-ui,sans-serif;color:var(--v3-muted)}
.v4-cmp-entry>svg{flex:none;color:var(--v3-green)}
.v4-cmp-entry-last{margin-top:14px}
.v4-cmp-cards-wrap{margin:0 0 8px}
.v4-cmp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v4-cmp-card{display:grid;grid-template-rows:17px 30px auto;gap:1px;border:1.5px solid var(--v3-line);border-radius:14px;padding:9px 10px;background:var(--v3-surface);min-width:0}
.v4-cmp-card.current{border-color:var(--cmp-current);background:var(--cmp-current-soft)}
.v4-cmp-card.second{border-color:var(--cmp-second);background:var(--cmp-second-soft)}
.v4-cmp-badge{display:inline-flex;align-items:center;gap:5px;font:600 11px system-ui,sans-serif;color:var(--v3-muted);white-space:nowrap}
.v4-cmp-card.current .v4-cmp-badge{color:var(--cmp-current)}
.v4-cmp-card.second .v4-cmp-badge{color:var(--cmp-second)}
.v4-cmp-dot{width:14px;height:14px;border:1.7px solid var(--cmp-second);border-radius:50%;flex:none}
.v4-cmp-sub{display:flex;align-items:center;margin:0;font:600 13px system-ui,sans-serif;color:var(--cmp-current)}
.v4-cmp-select{display:flex;align-items:center;gap:2px;margin:0;color:var(--cmp-second);min-width:0;overflow:hidden}
.v4-cmp-select select{-webkit-appearance:none;appearance:none;min-height:0;height:28px;border:1px solid var(--cmp-second);border-radius:8px;background:var(--v3-surface);color:var(--cmp-second);font:600 12px system-ui,sans-serif;padding:0 4px;max-width:100%;line-height:1.4}
.v4-cmp-select svg{flex:none;margin-left:-20px;pointer-events:none}
.v4-cmp-select{padding-right:0}
.v4-cmp-select select{padding-right:20px}
.v4-cmp-values{display:grid;gap:4px;margin:5px 0 0}
.v4-cmp-values div{display:grid;gap:1px}
.v4-cmp-values dt{font:11px/1.3 system-ui,sans-serif;color:var(--v3-muted)}
.v4-cmp-values dd{margin:0;font:700 15px/1.25 system-ui,sans-serif;color:var(--v3-ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.v4-cmp-card.current .v4-cmp-values dd{color:var(--cmp-current)}
.v4-cmp-card.second .v4-cmp-values dd{color:var(--cmp-second)}
.v4-cmp-summary{display:flex;gap:9px;align-items:flex-start;margin:7px 0 0;padding:9px 10px;border-radius:12px;background:#f6f1e4;border:1px solid #ecdfc4;font:12.5px/1.45 system-ui,sans-serif;color:var(--v3-ink)}
.v4-cmp-summary-icon{flex:none;color:var(--v3-muted);margin-top:1px}
.v4-cmp-chart-card{margin:0 0 8px;padding:9px 9px 6px;border:1px solid var(--v3-line);border-radius:14px;background:var(--v3-surface)}
.v4-cmp-chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.v4-cmp-seg{display:inline-flex;border:1px solid var(--v3-line);border-radius:999px;padding:2px;background:#f1f3f0}
.v4-cmp-seg-item{min-height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:600 12px system-ui,sans-serif;color:var(--v3-muted);cursor:pointer}
.v4-cmp-seg-item[aria-pressed="true"]{background:var(--v3-green);color:#fff}
.v4-cmp-seg-item:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px}
.v4-cmp-legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:6px 0 0;font:600 11px system-ui,sans-serif}
.v4-cmp-legend .current{color:var(--cmp-current)}
.v4-cmp-legend .second{color:var(--cmp-second)}
.v4-cmp-legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:currentColor}
.v4-cmp-canvas{margin:4px 0 0}
.v4-cmp-canvas svg{display:block;width:100%}
.v4-cmp-chart .grid{stroke:var(--v3-line);stroke-width:1}
.v4-cmp-chart .tick{font:11px system-ui,sans-serif;fill:var(--v3-muted)}
.v4-cmp-chart .line-current{fill:none;stroke:var(--cmp-current);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.v4-cmp-chart .line-second{fill:none;stroke:var(--cmp-second);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.v4-cmp-chart .leader{stroke-width:1;stroke-dasharray:2 2;fill:none}
.v4-cmp-chart .leader-current{stroke:var(--cmp-current)}
.v4-cmp-chart .leader-second{stroke:var(--cmp-second)}
.v4-cmp-chart .dot-current{fill:var(--cmp-current)}
.v4-cmp-chart .dot-second{fill:var(--cmp-second)}
.v4-cmp-chart .pill rect{stroke-width:1}
.v4-cmp-chart .pill text{font:600 10px system-ui,sans-serif}
.v4-cmp-chart .pill-current rect{fill:var(--cmp-current-soft);stroke:var(--cmp-current);stroke-opacity:.45}
.v4-cmp-chart .pill-current text{fill:var(--cmp-current)}
.v4-cmp-chart .pill-second rect{fill:var(--cmp-second-soft);stroke:var(--cmp-second);stroke-opacity:.45}
.v4-cmp-chart .pill-second text{fill:var(--cmp-second)}
.v4-cmp-hint{display:flex;gap:7px;align-items:flex-start;margin:6px 0 0;font:11.5px/1.4 system-ui,sans-serif;color:var(--v3-muted)}
.v4-cmp-hint svg{flex:none;margin-top:2px}
.v4-cmp-rows{display:grid;gap:6px;padding:2px 0 12px}
.v4-cmp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px}
.v4-cmp-row-icon{display:grid;place-items:center;color:var(--v3-muted)}
.v4-cmp-row-label{font:11.5px/1.35 system-ui,sans-serif;color:var(--v3-muted);min-width:0;overflow-wrap:break-word;hyphens:auto}
.v4-cmp-row-label small{display:block;font-size:11px;opacity:.9}
.v4-cmp-val{min-width:74px;padding:5px 6px;border-radius:8px;font:600 12px system-ui,sans-serif;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-cmp-val.current{background:var(--cmp-current-soft);color:var(--cmp-current)}
.v4-cmp-val.second{background:var(--cmp-second-soft);color:var(--cmp-second)}
.v4-cmp-fold{border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface);margin:0 0 5px;padding:0 10px}
.v4-cmp-fold>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;min-height:40px;cursor:pointer;list-style:none}
.v4-cmp-fold>summary::-webkit-details-marker{display:none}
.v4-cmp-fold-head{display:inline-flex;align-items:center;gap:7px;font:600 14px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-cmp-fold-head svg{color:var(--v3-green)}
.v4-cmp-fold-line{grid-column:1;font:11.5px/1.35 system-ui,sans-serif;color:var(--v3-muted)}
.v4-cmp-fold>summary>svg{grid-column:2;grid-row:1/span 2;color:var(--v3-muted)}
.v4-cmp-fold[open]>summary>svg{transform:rotate(180deg)}
.v4-cmp-fold[open]>summary{padding-bottom:2px}
.v4-cmp-fold>summary:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px;border-radius:8px}
.v4-cmp-cta-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 9px;width:100%;margin:0 0 6px;padding:8px 11px;border:1.5px solid var(--cmp-current);border-radius:12px;background:var(--v3-soft);color:var(--v3-ink);text-align:left;cursor:pointer}
.v4-cmp-cta-row:hover,.v4-cmp-cta-row:focus-visible{background:#e2ece4}
.v4-cmp-cta-row:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px}
.v4-cmp-cta-icon{grid-column:1;grid-row:1 / span 2;align-self:start;margin-top:2px;color:var(--cmp-current)}
.v4-cmp-cta-title{grid-column:2;grid-row:1;font:600 14px Georgia,"Times New Roman",serif;color:var(--cmp-current)}
.v4-cmp-cta-line{grid-column:2;grid-row:2;font:11.5px/1.35 system-ui,sans-serif;color:var(--v3-muted)}
.v4-cmp-cta-action{grid-column:1 / span 2;grid-row:3;justify-self:end;display:inline-flex;align-items:center;gap:4px;font:600 12px system-ui,sans-serif;color:var(--cmp-current);white-space:nowrap}
.v4-cmp-cta{min-height:40px;padding:0 14px;border-radius:999px;font:600 13px system-ui,sans-serif}
.v4-cmp-basis{border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface);margin:0;padding:0 10px}
.v4-cmp-basis>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;min-height:40px;cursor:pointer;list-style:none}
.v4-cmp-basis>summary::-webkit-details-marker{display:none}
.v4-cmp-basis-head{display:inline-flex;align-items:center;gap:7px;font:600 14px Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-cmp-basis-head svg{color:var(--v3-muted)}
.v4-cmp-basis-line{grid-column:1;font:11.5px/1.4 system-ui,sans-serif;color:var(--v3-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-cmp-basis>summary>svg{grid-column:2;grid-row:1/span 2;color:var(--v3-muted)}
.v4-cmp-basis[open]>summary>svg{transform:rotate(180deg)}
.v4-cmp-basis>summary:focus-visible{outline:2px solid var(--v3-green);outline-offset:2px;border-radius:8px}
.v4-cmp-basis-body{padding:0 0 12px}
.v4-cmp-basis-body .v3-info-list dd{white-space:normal;overflow-wrap:break-word}
@media(max-width:389px){
  .v4-cmp-card{padding:8px 9px;border-radius:12px}
  .v4-cmp-values dd{font-size:13.5px}
  .v4-cmp-row{gap:6px}
  .v4-cmp-val{min-width:74px;padding:4px 6px;font-size:12px}
  .v4-cmp-row-label{font-size:11.5px}
}
/* Schwebendes Hinweis-Banner (Speicherstände, Updates): nie stillschweigend, aber schliessbar. */
.v4-notice{position:fixed;left:10px;right:10px;top:10px;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;max-width:720px;margin:0 auto;padding:10px 12px;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-surface);box-shadow:0 8px 24px #142b3426}
.v4-notice[data-tone="warn"]{border-color:#d9b36a;background:#fdf8ee}
.v4-notice[hidden]{display:none}
.v4-notice-text{margin:0;font:13px/1.45 system-ui,sans-serif;color:var(--v3-ink)}
.v4-notice-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--v3-muted);cursor:pointer}
.v4-notice-close:hover,.v4-notice-close:focus-visible{background:var(--v3-soft);color:var(--v3-green)}
@media(min-width:700px){.v4-notice{left:auto;right:18px;max-width:520px}}
.v4-menu-version{margin:6px 0 0;padding:0 14px;font:11px/1.4 system-ui,sans-serif;color:var(--v3-muted);white-space:nowrap}

/* ---------- «Beratung vorbereiten»: Fortschritt, Angaben, Dossier, Datenstand ---------- */
.v4-advice-stand{border:1px solid var(--v3-line);border-radius:14px;background:var(--v3-surface);padding:14px;margin:0 0 12px}
.v4-advice-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.v4-advice-kicker{margin:0;font:600 11px/1.2 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--v3-muted)}
.v4-advice-count{margin:0;font:13px/1.4 system-ui,sans-serif;color:var(--v3-muted)}
.v4-advice-count strong{font:600 20px/1.1 Georgia,"Times New Roman",serif;color:var(--v3-ink)}
.v4-advice-bar{height:8px;margin:10px 0 0;border-radius:999px;background:#ecebe6;overflow:hidden}
.v4-advice-bar span{display:block;height:100%;border-radius:999px;background:var(--v3-green)}
.v4-advice-open{margin:8px 0 0;font:12.5px/1.45 system-ui,sans-serif;color:var(--v3-muted)}
.v4-advice-facts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.v4-advice-facts li{padding:5px 10px;border-radius:999px;background:var(--v3-soft);font:600 12px/1.2 system-ui,sans-serif;color:var(--v3-green);white-space:nowrap}
.v4-advice-backup{background:#faf9f5}
.v4-backup-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:12px 0 0}
.v4-backup-actions .v4-block-action{margin-top:0}
.v4-quiet-link{align-self:center;min-height:36px;padding:0 6px;border:0;background:transparent;color:var(--v3-muted);font:12.5px system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.v4-quiet-link:hover,.v4-quiet-link:focus-visible{color:var(--v3-green)}
.v4-file{display:block;margin:12px 0 6px;font:600 13px system-ui,sans-serif;color:var(--v3-ink)}
.v4-file-input{display:block;width:100%;font:13px system-ui,sans-serif;color:var(--v3-muted)}

/* ---------- Keine klassische Scrollleiste (verbindlich) ----------
   Die App ist mobile-first: Gescrollt wird mit Finger, Rad, Tastatur und Scrollgeste. Die
   klassische Leiste am rechten Rand reserviert aber 15 px im **Layout** und bleibt als heller
   (bzw. auf dem Startscreen dunkler) Streifen sichtbar – sie kostet Platz, ohne etwas zu
   erklären. Deshalb ist sie ausgeblendet; das Scrollen selbst bleibt unverändert möglich. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- Startscreen (Landing) ----------
   Das verbindliche Hintergrundbild liegt als Vollbild dahinter (Hero-Modus «landing»), der
   Inhalt steht mittig darauf: Logo, Slogan, Aussage, ein Satz, genau ein Weg in die App.
   Hier ist die Schrift weiss auf dem Foto und trägt einen weichen Schatten – die Regel
   «kein Textschatten» gilt für die Creme-Köpfe der App, nicht für dieses Vollbild. */
/* Der Startscreen füllt genau einen Bildschirm und scrollt nicht. Die Sperre sitzt am
   **Wurzelelement** (`html.v4-landing-open`, gesetzt in `renderLanding()`/`setMenuAvailable()`):
   so entsteht gar keine Scrollleiste und damit auch kein heller Rand rechts. `height:100%`
   über die Kette html → body → #app gibt dem Screen genau die Fensterhöhe – ohne `100svh`,
   das in manchen Umgebungen 18 px zu hoch ausfällt. Die Hintergrundfarbe sitzt bewusst am
   **body** (und nicht am `html`): nur so wird sie auf die Zeichenfläche übertragen und liegt
   hinter dem Bild statt darüber. */
html.v4-landing-open{overflow:hidden}
html.v4-landing-open,html.v4-landing-open body{height:100%}
html.v4-landing-open #app{height:100%}
body.v4-landing-open{overflow:hidden;background:#0d1f2a}
.v4-landing{position:relative;z-index:1;display:grid;place-items:center;min-height:100%;padding:44px 22px;text-align:center}
.v4-landing-body{display:flex;flex-direction:column;align-items:center;max-width:660px}
.v4-landing-brand{display:flex;align-items:center;gap:10px;margin:0}
.v4-landing-name{font-family:Georgia,"Times New Roman",serif;font-size:21px;font-weight:600;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 10px rgba(9,22,32,.55)}
.v4-landing-slogan{margin:9px 0 0;font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(9,22,32,.55)}
.v4-landing-title{margin:30px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,9vw,58px);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:#fff;text-wrap:balance;text-shadow:0 2px 18px rgba(9,22,32,.55)}
.v4-landing-sub{margin:16px 0 0;font:15.5px/1.5 system-ui,sans-serif;color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(9,22,32,.5)}
.v4-landing-cta{display:inline-flex;align-items:center;gap:10px;margin:30px 0 0;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:var(--v3-green);color:#fff;font:600 16.5px system-ui,sans-serif;cursor:pointer;box-shadow:0 12px 28px rgba(9,22,32,.32)}
.v4-landing-cta svg{flex:none}
.v4-landing-cta:hover,.v4-landing-cta:focus-visible{background:#17503f;box-shadow:0 14px 30px rgba(9,22,32,.4)}
.v4-landing-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v4-landing-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:24px 0 0;padding:0;list-style:none}
.v4-landing-facts li{display:inline-flex;align-items:center;gap:7px;font:600 12.5px system-ui,sans-serif;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(9,22,32,.5)}
.v4-landing-facts svg{color:rgba(255,255,255,.85)}
@media(min-width:700px){
  .v4-landing-sub{font-size:17px}
  .v4-landing-facts{gap:8px 26px}
}
/* Kurze Fenster (kleine Handys, Querformat): Abstände und Schrift verdichten, damit der
   Startscreen ohne Scrollen auskommt – der Inhalt bleibt vollständig sichtbar. */
@media(max-height:700px){
  .v4-landing{padding:26px 20px}
  .v4-landing-title{margin-top:20px}
  .v4-landing-sub{margin-top:12px}
  .v4-landing-cta{margin-top:22px;min-height:50px}
  .v4-landing-facts{margin-top:18px}
}
@media(max-height:560px){
  .v4-landing{padding:18px 18px}
  .v4-landing-name{font-size:19px}
  .v4-landing-title{margin-top:14px;font-size:clamp(24px,5.4vh,34px)}
  .v4-landing-sub{margin-top:8px;font-size:14px}
  .v4-landing-cta{margin-top:16px;min-height:46px;padding:0 22px;font-size:15px}
  .v4-landing-facts{margin-top:12px;gap:6px 16px}
}
/* Notfall (sehr niedrige Fenster): der Startscreen darf dann selbst scrollen, statt Inhalt
   abzuschneiden – die Seite bleibt trotzdem gesperrt. */
@media(max-height:430px){
  .v4-landing{overflow-y:auto;align-content:start}
}
@media(max-width:430px){
  .v4-landing-title{font-size:clamp(28px,8.4vw,34px)}
}
@media(max-width:389px){
  .v4-landing{padding:32px 18px}
  .v4-landing-title{margin-top:22px}
  .v4-landing-cta{margin-top:24px;min-height:50px;font-size:15.5px}
}