:root {
      --bg:#f0f2f5; --card:#fff; --border:#e2e6ea; --text:#1a2332; --muted:#6b7a8d;
      --accent:#c8920a; --accent-light:#fef3d0; --accent2:#1a3a4a; --accent2-light:#e8f2f6;
      --blue:#1e5a8a; --blue-light:#dceef9; --red:#c0392b; --red-light:#fde8e6;
      --green:#1a7a45; --green-light:#d9f2e6; --warn-bg:#fffbeb; --warn-border:#f0d060;
      --radius:14px; --radius-sm:8px;
      --shadow:0 2px 12px rgba(0,0,0,.06); --shadow-lg:0 8px 32px rgba(0,0,0,.10);
      --header-h:56px;
    }
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); line-height:1.5; font-size:15px; }

    /* ── Top Header ── */
    .top-header {
      position:sticky; top:0; z-index:100;
      background:var(--accent2); height:var(--header-h);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 24px; box-shadow:0 2px 8px rgba(0,0,0,.15);
    }
    .top-header-logo { color:#fff; font-size:17px; font-weight:700; letter-spacing:-.3px; display:flex; align-items:center; gap:12px; }
    .top-header-logo-img { height:38px; width:auto; display:block; }
    .top-header-logo-divider { width:1px; height:22px; background:rgba(255,255,255,.24); display:inline-block; }
    .top-header-logo-title { color:#fff; font-size:17px; font-weight:700; letter-spacing:-.3px; white-space:nowrap; }
    .top-header-logo small { color:rgba(255,255,255,.45); font-size:12px; font-weight:400; margin-left:0; }
    .settings-btn {
      width:34px; height:34px; border-radius:50%;
      border:1.5px solid rgba(255,255,255,.24);
      background:transparent; color:#fff; font-size:18px;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:background .15s, border-color .15s, transform .15s;
    }
    .settings-btn:hover {
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.40);
      transform:rotate(10deg);
    }
    .icon-gear { width:18px; height:18px; display:block; }

    /* ── Wrap ── */
    .wrap { max-width:1100px; margin:0 auto; padding:24px 20px 60px; }

    /* ── Cards ── */
    .card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:16px; }
    .card-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
    .card-title .badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--accent-light); color:var(--accent); }

    /* ── Grunddaten-Header ── */
    .grunddaten-card {
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:var(--shadow); margin-bottom:0;
      border-bottom-left-radius:0; border-bottom-right-radius:0;
      border-bottom:none; padding:18px 22px 16px; overflow:hidden;
    }
    .grunddaten-card.standalone {
      border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);
      border-bottom:1px solid var(--border); margin-bottom:16px;
    }
    .grunddaten-title {
      font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
      color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:8px;
    }
    .grunddaten-title-row { justify-content:space-between; }
    .kd-io-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .kd-io-btn {
      font:600 11px/1 'DM Sans',sans-serif; text-transform:none; letter-spacing:normal;
      color:var(--accent2); background:#fff; border:1px solid var(--accent2);
      border-radius:7px; padding:7px 11px; cursor:pointer; white-space:nowrap;
    }
    .kd-io-btn:hover { background:var(--accent2-light,#eef3fb); }
    .shared-grv-card {
      border-radius:0; border-top:1px solid var(--border); padding-top:16px;
    }
    .shared-grv-card .sec { margin:0; }

    /* ── Tab Bar ── */
    .tab-container {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow); margin-bottom:20px;
    }
    .tab-bar {
      display:flex; border-bottom:2px solid var(--border);
      padding:0 22px;
    }
    .tab-btn {
      padding:13px 20px; border:none; background:none; font-family:inherit;
      font-size:14px; font-weight:600; color:var(--muted); cursor:pointer;
      border-bottom:3px solid transparent; margin-bottom:-2px;
      transition:all .15s; display:flex; align-items:center; gap:7px;
    }
    .tab-btn:hover { color:var(--text); }
    .tab-btn.active { color:var(--accent2); border-bottom-color:var(--accent); }
    .tab-content { display:none; padding:20px 22px 22px; }
    .tab-content.active { display:block; }
    /* bAV-Reiter bei Erwerbsstatus Beamter (seit 13.10.2026): nur der Hinweiskasten bleibt sichtbar,
       Eingaben, Ergebnis und Grafiken sind ausgeblendet. Klasse setzt syncBavBeamterAnzeige() in 07. */
    #tab-bav.bav-beamter > :not(#bav-beamte-hinweis) { display:none !important; }
    #shared-grv-anchor.bav-beamter-aus { display:none !important; }

    /* ── Grids ── */
    .g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .g5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
    .g6 { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }

    /* ── Fields ── */
    .field { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .field > div { min-width:0; }
    .field label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
    .field input, .field select {
      height:40px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
      background:#fff; padding:0 10px; font-size:14px; color:var(--text);
      font-family:inherit; transition:border-color .15s;
    }
    .field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
    .field input.fixed, .field input[readonly] { background:var(--bg); color:var(--muted); border-style:dashed; cursor:default; }
    .field input[data-binding-status="pending"], .field select[data-binding-status="pending"] {
      border-color:#d97706;
      box-shadow:0 0 0 1px rgba(217,119,6,.18);
    }
    .field .hint { font-size:11px; color:var(--muted); }
    /* .model-hint: fachliche Modell-Disclaimer (ETF, PKV, sonstige Einkünfte) bleiben immer sichtbar */
    body:not(.show-input-hints) .wrap .field .hint:not(.import-control-hint):not(.model-hint):not(.bav-hand-hint) { display:none !important; }
    .field .hint.bav-hand-hint { color:#8a6a2a; }
    /* Im Foerderrechner wandern Kirchensteuer und Rentenbeginn in den Allgemein-Block; die
       Einkommenszeile (Brutto, Netto, Eingabe) bleibt mit Ueberschrift stehen, die Zeile mit
       Krankenversicherung und GKV-Zusatzbeitrag entfaellt. */
    body.foerder-input-mode #customer-income-grid-2,
    body.foerder-input-mode #field-g-kinder,
    body.foerder-input-mode #field-g-kv,
    body.foerder-input-mode #field-gkv-add,
    body.foerder-input-mode #field-pkv-beitrag { display:none !important; }
    .aligned-label-grid .field label { min-height:28px; display:flex; align-items:flex-end; line-height:1.25; }
    .input-with-info { display:flex; align-items:center; gap:6px; min-width:0; }
    .input-with-info input, .input-with-info select { flex:1; min-width:0; }
    .inline-info-btn {
      flex:0 0 22px; width:22px; height:22px; border-radius:50%;
      border:1px solid var(--border); background:#fff; color:var(--accent2);
      font-size:11px; font-weight:700; line-height:1; cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center;
      transition:background .15s, border-color .15s, color .15s;
    }
    .inline-info-btn:hover { background:var(--accent2-light); border-color:var(--accent2); color:var(--accent2); }
    .req { color:var(--red); }

    /* ── Section headers inside tabs ── */
    .sec { margin-bottom:14px; margin-top:20px; }
    .sec:first-child { margin-top:0; }
    .sec-title { font-size:13px; font-weight:700; color:var(--accent2); padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
    .sec-title .badge { font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--accent-light); color:var(--accent); }

    /* ── Top tabs (page-level switcher) ── */
    .top-tabs {
      display:flex; gap:4px;
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      padding:4px; box-shadow:var(--shadow); margin-bottom:16px;
    }
    .top-tab-btn {
      flex:1; padding:14px 20px; border:none; background:transparent;
      font-family:inherit; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer;
      border-radius:10px; transition:all .15s;
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .top-tab-btn:hover { color:var(--text); background:var(--bg); }
    .top-tab-btn.active { background:var(--accent2); color:#fff; }
    .top-tab-btn.active:hover { background:var(--accent2); }

    /* ── Compact upload zone (bAV XEMPUS-Import) ── */
    .upload-zone.compact { padding:12px 16px; display:flex; align-items:center; gap:14px; text-align:left; border-radius:var(--radius-sm); }
    .upload-zone.compact .upload-icon { font-size:11px; font-weight:700; margin:0; padding:8px 10px; background:var(--card); border:1px solid var(--border); border-radius:6px; color:var(--accent2); letter-spacing:.5px; }
    .upload-zone.compact .upload-text { flex:1; min-width:0; }
    .upload-zone.compact .upload-text p { font-size:13px; color:var(--text); margin:0; }
    .upload-zone.compact .upload-text p.upload-meta { color:var(--muted); font-size:11px; margin-top:2px; }

    /* ── Sub-tabs (GRV) ── */
    .sub-tab-bar { display:flex; gap:4px; background:var(--bg); padding:4px; border-radius:var(--radius-sm); margin-bottom:14px; border:1px solid var(--border); max-width:420px; }
    .sub-tab-btn { flex:1; padding:7px 12px; border:none; border-radius:6px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; background:none; color:var(--muted); transition:all .15s; }
    .sub-tab-btn.active { background:#fff; color:var(--text); box-shadow:var(--shadow); }

    /* ── Buttons ── */
    .btn { height:42px; border:none; border-radius:var(--radius-sm); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:0 18px; transition:all .15s; display:inline-flex; align-items:center; gap:7px; }
    .btn-primary { background:var(--accent); color:#1a2332; }
    .btn-primary:hover { background:#b07d08; }
    .btn-secondary { background:var(--bg); color:var(--text); border:1.5px solid var(--border); }
    .btn-secondary:hover { background:#e8eaed; }
    .btn-upload { background:var(--blue-light); color:var(--blue); }
    .btn-upload:hover { background:#c5e2f5; }
    .btn-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
    .btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; }
    .btn-primary:disabled:hover { background:var(--accent); }
    .btn-secondary:disabled:hover { background:var(--bg); }

    /* ── Results ── */
    .results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
    .result-box { position:relative; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:14px; }
    .result-box.hi  { background:var(--accent-light); border-color:var(--accent); }
    .result-box.red { background:var(--red-light);    border-color:var(--red); }
    .result-box.grn { background:var(--green-light);  border-color:var(--green); }
    .result-box small { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; display:block; margin-bottom:5px; }
    .result-box strong { font-size:24px; font-weight:700; font-family:'DM Mono',monospace; color:var(--text); display:block; }
    .result-box .sub { font-size:11px; color:var(--muted); margin-top:2px; }
    .kpi-info-btn { box-sizing:border-box; position:absolute; top:7px; right:7px; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; border:1px solid var(--accent2); background:#fff; color:var(--accent2); font:700 10px/1 'DM Sans',sans-serif; cursor:pointer; padding:0; }
    .kpi-info-btn:hover { background:var(--accent2-light); }
    .kpi-info-btn + small { padding-right:22px; }
    .bav-rente-result-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .bav-kapital-result-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .bav-overview-title { margin-top:4px; margin-bottom:8px; }
    .bav-result-wide { grid-column:span 2; }
    /* GRV: eine Zeile je Eingabemodus - modusspezifisches Feld, Rentenbeginn und rechts
       daneben die aufklappbaren optionalen Angaben. Rentenbeginn und Optional-Block gibt es
       nur einmal; platziereGrvFelder() haengt sie in die Slots des aktiven Modus. */
    .grv-modus-zeile { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
    .grv-modus-zeile > .field, .grv-rb-slot { flex:0 0 240px; max-width:240px; min-width:0; }
    .grv-opt-slot { flex:0 1 auto; min-width:0; }
    .grv-optional-wrap { display:flex; gap:12px; align-items:flex-start; }
    /* Der Pfeil steckt in einem .field mit leerem Label. Damit erbt er Labelhöhe und den
       4px-gap der Nachbarfelder und liegt exakt auf Höhe der Eingaben – ohne festen Versatz. */
    .grv-arrow-field { flex:none; width:26px; min-width:26px; }
    .grv-optional-arrow { flex:none; width:26px; height:40px; padding:0; cursor:pointer;
      border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg);
      color:var(--accent2); display:inline-flex; align-items:center; justify-content:center; }
    /* Zeichen direkt statt als \-Escape: eine versehentlich doppelte Maskierung wuerde als
       Text ausgegeben werden ("\25B8" stand hier schon einmal sichtbar im Button). */
    .grv-optional-arrow::before { content:'▸'; font-size:13px; line-height:1; }
    .grv-optional-arrow[aria-expanded="true"]::before { content:'◂'; }
    .grv-optional-arrow:hover { background:var(--accent2-light); border-color:var(--accent2); }
    .grv-optional-felder { display:flex; gap:12px; align-items:flex-start; }
    .grv-optional-felder > .field { flex:0 0 220px; max-width:220px; min-width:0; }
    /* Muss nach der display:flex-Regel stehen, sonst gewinnt diese gegen das hidden-Attribut.
       Gilt auch fuer den geparkten Rentenbeginn-Container. */
    .grv-optional-felder[hidden], #grv-shared-fields-grid[hidden] { display:none; }
    /* Aufklapp-Schalter im Beamtenblock: sitzt unter der Zeile und oeffnet die
       weiteren Felder darunter - deshalb ein Textschalter statt des schmalen
       Pfeils, den die GRV-Karte seitlich verwendet. */
    .beamte-more-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
      background:none; border:none; padding:2px 0; font:inherit; font-size:12px;
      font-weight:600; color:var(--accent2); }
    .beamte-more-btn::after { content:'\25BE'; font-size:10px; line-height:1; }
    .beamte-more-btn[aria-expanded="true"]::after { content:'\25B4'; }
    .beamte-more-btn:hover { text-decoration:underline; }
    #beamte-optional-felder[hidden] { display:none; }
    .pflicht-stern { color:var(--accent2); font-weight:700; }
    .pflicht-offen { border-color:var(--accent2) !important; box-shadow:0 0 0 2px var(--accent2-light); }
    /* Schmal: Pfeil und optionale Felder rutschen in eine eigene Zeile unter die Eingaben,
       dann entfaellt der Ausgleich fuer die Labelzeile. */
    @media (max-width:1100px) {
      .grv-opt-slot { flex:1 1 100%; }
      .grv-optional-felder { flex-wrap:wrap; }
      .grv-optional-felder > .field { flex:1 1 220px; max-width:none; }
    }
    /* GRV-Ergebnis als schlichte Zahlenaufstellung: bisherige Anwartschaft + kuenftige Rente
       = GRV brutto. Bewusst ohne Rahmen und Flaechen - nur Label links, Wert rechts. */
    .grv-summe { max-width:560px; margin-top:18px; }
    .grv-summe-row { display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:13px; }
    .grv-summe-row + .grv-summe-row { border-top:1px solid #eef1f4; }
    .grv-summe-op { flex:none; width:11px; color:var(--muted); font-weight:700; font-family:'DM Mono',monospace; }
    .grv-summe-label { flex:1; min-width:0; color:var(--text); }
    .grv-summe-label .inline-info-btn { margin-left:5px; vertical-align:-2px; }
    /* Erlaeuternder Zusatz am Label (z. B. die eingerechnete Rentenanpassung): klein und
       zurueckgenommen, damit die Zeile lesbar bleibt. */
    .grv-summe-zusatz { font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; }
    .grv-summe-val { flex:none; font-family:'DM Mono',monospace; font-weight:700; white-space:nowrap; color:var(--text); }
    .grv-summe-row.is-total { border-top:1.5px solid var(--border); }
    .grv-summe-row.is-total .grv-summe-label { font-weight:700; }
    .grv-summe-row.is-total .grv-summe-val { font-size:15px; }
    /* Herleitungszeile direkt unter der Summe: bewusst klein und ohne Trennlinie,
       sie gehoert optisch zur Summenzeile darueber. */
    .grv-summe-sub { font-size:11px; color:var(--muted); padding:2px 0 0; line-height:1.35; }
    .grv-summe-sub:empty { display:none; }
    /* Hinweis zur GRV-Minderung: haengt an der kuenftigen Rente, in der sie verrechnet ist. */
    .grv-summe-note { padding:0 0 6px 19px; font-size:11px; line-height:1.4; color:var(--accent); }
    .formula-line { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; align-items:end; margin-top:8px; }
    .formula-line.compact { grid-template-columns:repeat(5, minmax(0,1fr)); }
    .formula-line .field { min-width:0; }
    .formula-value { height:40px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:#f8f9fb; padding:9px 10px; font-family:'DM Mono',monospace; font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; }
    .formula-op { align-self:center; justify-self:center; padding-bottom:15px; font-size:18px; font-weight:800; color:var(--muted); line-height:1; }
    .formula-note { margin-top:10px; padding:10px 12px; border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm); font-size:12px; color:var(--muted); }

    /* ── Rechenweg ── */
    .rw-toggle { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; padding:8px 0; border:none; background:none; font-family:inherit; }
    .rw-toggle:hover { color:var(--text); }
    .rw-content { background:#fafbfc; border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; font-family:'DM Mono',monospace; font-size:12px; line-height:1.7; white-space:pre-wrap; color:var(--text); margin-top:6px; max-height:380px; overflow-y:auto; }
    .rw-content.rich { background:transparent; border:none; padding:0; font-family:inherit; font-size:14px; line-height:1.5; white-space:normal; max-height:none; overflow:visible; }
    .calc-card, .calc-section { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-top:10px; }
    .calc-card-title { padding:16px 18px 10px; font-size:16px; font-weight:700; color:#445365; }
    .calc-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:10px 18px; border-top:1px solid #edf1f5; }
    .calc-row:first-child { border-top:none; }
    .calc-row-main { min-width:0; flex:1; }
    .calc-row-label { font-size:14px; color:var(--text); }
    .calc-row-note { font-size:12px; color:var(--muted); margin-top:2px; }
    .calc-row-value { font-family:'DM Mono',monospace; font-weight:600; white-space:nowrap; color:var(--text); }
    .calc-row.negative .calc-row-value { color:var(--red); }
    .calc-row.positive .calc-row-value { color:var(--green); }
    .calc-row-value.negative { color:var(--red); }
    .calc-row.emphasis { background:#f7f9fc; }
    .calc-row.emphasis .calc-row-label, .calc-row.emphasis .calc-row-value { font-weight:700; }
    .calc-row.emphasis .calc-row-value { font-size:18px; }
    .calc-detail { border-top:1px solid var(--border); background:#fafbfc; }
    .calc-detail summary, .calc-section summary { list-style:none; cursor:pointer; }
    .calc-detail summary::-webkit-details-marker, .calc-section summary::-webkit-details-marker { display:none; }
    .calc-detail summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; font-size:14px; font-weight:600; color:#4f5f70; }
    .calc-detail summary::before, .calc-section summary::before { content:'▶'; font-size:11px; color:var(--muted); margin-right:8px; }
    .calc-detail[open] summary::before, .calc-section[open] summary::before { content:'▼'; }
    .calc-detail-body { padding-bottom:8px; }
    .calc-section summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; font-size:15px; font-weight:700; color:#445365; background:#fafbfc; }
    .calc-section summary span:last-child { font-size:12px; font-weight:600; color:var(--muted); }
    .calc-section[open] summary { border-bottom:1px solid var(--border); }
    .calc-section-body { background:#fff; }
    .calc-section-intro { padding:12px 18px 4px; font-size:12px; color:var(--muted); }
    .calc-subhead { padding:10px 18px 6px; font-size:13px; font-weight:700; color:#445365; background:#fafbfc; border-top:1px solid var(--border); }
    .calc-subhead:first-child { border-top:none; }
    .calc-empty { padding:12px 18px 16px; font-size:13px; color:var(--muted); }

    /* ── Info / Warn ── */
    .info-box { background:var(--blue-light); border:1px solid #b3d4ee; border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; color:var(--blue); margin-bottom:12px; }
    .warn-box { background:var(--warn-bg); border:1px solid var(--warn-border); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; color:#7a5f00; display:flex; gap:8px; }

    /* ── Upload zone ── */
    .upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:24px; text-align:center; cursor:pointer; transition:all .2s; background:var(--bg); }
    .upload-zone:hover, .upload-zone.drag { border-color:var(--accent); background:var(--accent-light); }
    .upload-zone .upload-icon { font-size:32px; margin-bottom:8px; }
    .upload-zone p { font-size:13px; color:var(--muted); }
    input[type="file"] { display:none; }

    /* ── Settings Modal ── */
    .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; align-items:flex-start; justify-content:flex-end; padding:64px 20px 0 0; }
    .modal-overlay.open { display:flex; }
    /* Info-Fenster der i-Knöpfe: mittig wie die .overlay-bd-Overlays (gleiche Abdunklung,
       gleicher Schatten, über offenen Overlays). Einstellungen und Feedback bleiben rechts oben. */
    .modal-overlay.modal-mitte { align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.48); z-index:10000; }
    .modal-overlay.modal-mitte .modal { max-height:86vh; box-shadow:0 20px 60px rgba(0,0,0,.28); }
    /* Kopfzeile wie bei den .overlay-hdr-Fenstern (einheitlich 15px fett). */
    .modal-overlay.modal-mitte .modal-header { padding:16px 20px; }
    .modal-overlay.modal-mitte .modal-header h2 { font-size:15px; }
    .modal { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); width:min(680px, calc(100vw - 40px)); max-height:80vh; overflow-y:auto; }
    .modal-header { padding:18px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; }
    .modal-header h2 { font-size:16px; font-weight:700; }
    .modal-close { border:none; background:none; font-size:20px; cursor:pointer; color:var(--muted); padding:0 4px; }
    .modal-body { padding:18px 20px; }
    /* ── PDF-Export Dialog: Inhalts-Auswahl ── */
    .pdf-opt-list { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
    .pdf-opt { display:grid; grid-template-columns:20px minmax(0,1fr); gap:11px; align-items:start; padding:11px 13px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
    .pdf-opt:last-child { border-bottom:none; }
    .pdf-opt:hover { background:#f7f9fc; }
    .pdf-opt input { width:18px; height:18px; margin-top:1px; accent-color:var(--accent2); cursor:pointer; }
    .pdf-opt-title { font-size:13px; font-weight:700; color:var(--text); }
    .pdf-opt-desc { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.4; }
    .pdf-opt-sep { background:#f7f9fc; border-top:1px solid var(--border); }
    .pdf-opt-disabled { opacity:.45; cursor:not-allowed; }
    .pdf-opt-disabled input { cursor:not-allowed; }

    .mini-info-table { width:100%; border-collapse:collapse; font-size:13px; margin:8px 0 12px; }
    .mini-info-table th { text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border); padding:7px 6px; }
    .mini-info-table td { border-bottom:1px solid #eef1f4; padding:8px 6px; }
    .mini-info-table td:last-child { text-align:right; font-family:'DM Mono',monospace; font-weight:600; white-space:nowrap; }
    .mini-info-table .mini-info-group td { text-align:left; font-family:inherit; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; background:#f7f8fa; font-weight:700; }
    /* Netto-Herleitung ("i" neben dem Nettoeinkommen): die Abschnittsköpfe tragen das
       Gespräch, deshalb deutlich abgesetzt statt als graue Zwischenzeile. */
    .netto-info-tbl .mini-info-group td {
      background:var(--accent2); color:#fff; font-size:11.5px; padding:9px 8px;
      border-bottom:none; letter-spacing:.6px;
    }
    .netto-info-tbl thead th { color:var(--accent2); font-weight:700; }
    .netto-info-tbl thead th:last-child { text-align:right; }
    .settings-note { background:#f7f9fc; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; color:var(--muted); font-size:12px; line-height:1.4; margin-bottom:12px; }
    .settings-group { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-top:12px; background:#fff; }
    .settings-group-head { background:#f7f9fc; border-bottom:1px solid var(--border); padding:10px 14px; }
    .settings-group-title { color:var(--accent2); font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
    .settings-group-sub { color:var(--muted); font-size:11px; margin-top:2px; }
    .settings-row { display:grid; grid-template-columns:minmax(0,1fr) 156px; align-items:start; padding:12px 14px; border-bottom:1px solid var(--border); gap:16px; }
    .settings-row:last-child { border-bottom:none; }
    .settings-row-label { font-size:13px; font-weight:700; color:var(--text); }
    .settings-row-desc { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.35; }
    .settings-row-control { width:156px; min-width:0; justify-self:end; }
    .settings-row-input { width:100%; flex-shrink:0; }
    .settings-row-input input { text-align:right; }
    .settings-row-input[data-unit] { display:grid; grid-template-columns:minmax(0,1fr) 34px; align-items:center; gap:6px; }
    .settings-row-input[data-unit]::after { content:attr(data-unit); color:var(--muted); font-size:11px; font-weight:800; text-align:left; }
    .settings-row-input[data-unit="EUR"]::after { content:"\20AC"; }
    .settings-row-input[data-unit="Jahr"] { grid-template-columns:minmax(0,1fr) 38px; }
    .settings-row-check { min-height:40px; display:flex; align-items:center; justify-content:flex-end; }
    .settings-row-check input { width:18px; height:18px; accent-color:var(--accent2); cursor:pointer; }
    .settings-source { display:block; margin-top:4px; text-align:right; font-size:10.5px; font-weight:700; color:var(--blue); text-decoration:none; line-height:1.25; }
    .settings-source:hover { text-decoration:underline; }
    .settings-sources { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:3px 8px; margin-top:4px; }
    .settings-sources .settings-source { margin-top:0; }
    .settings-inline-link { color:var(--blue); font-weight:700; text-decoration:none; }
    .settings-inline-link:hover { text-decoration:underline; }
    .settings-actions { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--border); margin:16px -20px 0; padding:14px 20px 0; }
    .settings-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:14px 0 6px; }
    @media (max-width: 640px) {
      .modal-overlay { padding:64px 10px 0; justify-content:center; }
      .modal { width:100%; }
      .settings-row { grid-template-columns:1fr; gap:8px; }
      .settings-row-control { width:100%; justify-self:stretch; }
      .settings-source { text-align:left; }
      .settings-sources { justify-content:flex-start; }
      .settings-row-check { justify-content:flex-start; }
    }

    /* ── Misc ── */
    .hidden { display:none !important; }
    .mono { font-family:'DM Mono',monospace; }
    .mt-12 { margin-top:12px; }
    .mt-16 { margin-top:16px; }
    .divider { height:1px; background:var(--border); margin:16px 0; }
    .chip { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--accent-light); color:var(--accent); }
    /* ── Versorgungschart ── */
    .vers-outer { position:relative; background:#f4f6f9; border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px 16px; margin-top:18px; overflow:hidden; }

    /* Kontrollwerte / Abweichungshinweise aus dem importierten XEMPUS-Angebot */
    .xempus-grv-notes { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
    .xempus-note { border-radius:var(--radius-sm); padding:8px 10px; font-size:11px; line-height:1.5;
      border:1px solid var(--border); background:var(--bg); color:var(--text); }
    .xempus-note-warn   { background:var(--warn-bg); border-color:var(--warn-border); color:#7a6000; }
    .xempus-note-action { background:var(--warn-bg); border-color:var(--warn-border); color:#7a6000; }
    .xempus-note-info   { background:var(--blue-light); border-color:var(--blue); color:var(--blue); }
    .xempus-note-ref    { background:var(--bg); color:var(--muted); }
    .xempus-note-btn { margin-left:6px; padding:3px 10px !important; font-size:11px !important; }

    /* Anforderungs-Hinweis: welche Seiten das XEMPUS-Angebot enthalten sollte */
    .xempus-seiten-hinweis { border:1px solid var(--border); border-radius:var(--radius-sm);
      background:var(--bg); padding:12px 14px; margin-bottom:10px; font-size:11px; line-height:1.55; }
    .xempus-seiten-intro, .xempus-seiten-outro { margin:0 0 10px; color:var(--muted); }
    .xempus-seiten-outro { margin:10px 0 0; padding-top:8px; border-top:1px solid rgba(0,0,0,.08); }
    .xempus-seiten-intro strong, .xempus-seiten-outro strong { color:var(--text); }
    /* Pflichtseiten zuerst und farbig abgesetzt, optionale darunter zurueckgenommen. */
    .xempus-seiten-gruppe { border-radius:var(--radius-sm); padding:8px 12px; margin-bottom:10px; }
    .xempus-seiten-gruppe.pflicht  { background:var(--warn-bg); border:1px solid var(--warn-border); }
    .xempus-seiten-gruppe.optional { background:#f4f6f9; border:1px solid var(--border); }
    .xempus-seiten-gruppe-titel { font-size:10px; font-weight:700; text-transform:uppercase;
      letter-spacing:.5px; margin-bottom:4px; }
    .xempus-seiten-gruppe.pflicht  .xempus-seiten-gruppe-titel { color:#7a6000; }
    .xempus-seiten-gruppe.optional .xempus-seiten-gruppe-titel { color:var(--muted); }
    .xempus-seite-zeile { padding:5px 0; border-top:1px solid rgba(0,0,0,.08); }
    .xempus-seiten-gruppe > .xempus-seite-zeile:first-of-type { border-top:0; }
    .xempus-seite-titel  { font-weight:700; color:var(--text); }
    .xempus-seite-zeile.pflicht .xempus-seite-titel { color:#7a6000; }
    .xempus-seite-liefert { color:var(--muted); }
    .xempus-seite-fehlt  { color:#7a6000; margin-top:2px; }
    .vers-header { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
    /* 4 Regler-Chips (Freibetraege, Rentenanpassung, Gehalt, dyn. Rente); die Breite haelt
       sie auf demselben Spaltenraster wie die 7 Chips der Rentenluecken-Grafik. Einen
       Inflations-Regler gibt es hier nicht mehr - die Inflation wirkt nur auf die
       Wunschrente und steht deshalb allein in der Rentenluecken-Ansicht. */
    #bav-contribution-visual > .vers-header { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:calc((100% - 48px) / 7 * 4 + 24px); max-width:100%; margin-bottom:24px; }
    #bav-contribution-visual .bav-contrib-summary-chip { display:none; }
    #bav-contribution-visual .bav-contrib-control-chip { padding:8px 10px 10px; border-radius:8px; min-height:0; }
    #bav-contribution-visual .bav-contrib-control-chip .vers-stat-label { min-height:22px; margin-bottom:4px; font-size:9px; line-height:1.25; white-space:normal; }
    #bav-contribution-visual .bav-contrib-control-chip .vers-stat-edit { align-items:baseline; gap:4px; }
    #bav-contribution-visual .bav-contrib-control-chip .vers-stat-edit input { width:54px !important; padding:2px 0 4px; font-size:15px !important; }
    #bav-contribution-visual .bav-contrib-control-chip .vers-stat-edit span { font-size:13px !important; }
    #bav-contribution-visual .bav-contrib-control-chip .vers-stat-edit .inline-info-btn { width:22px !important; height:22px !important; flex-basis:22px !important; font-size:10px !important; }
    @media (max-width: 1100px) {
      .vers-header { grid-template-columns:repeat(4,minmax(0,1fr)); }
    }
    @media (max-width: 760px)  { .vers-header { grid-template-columns:repeat(3,minmax(0,1fr)); } }
    @media (max-width: 520px)  { .vers-header { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    .vers-stat-chip { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 10px 10px; box-shadow:0 1px 3px rgba(0,0,0,.03); display:flex; flex-direction:column; min-width:0; }
    .vers-stat-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); display:block; margin-bottom:4px; line-height:1.25; min-height:22px;
      /* Lange Einzelwoerter wie BESOLDUNGSANPASSUNG sollen umbrechen statt aus dem Chip zu laufen. */
      overflow-wrap:anywhere; hyphens:auto; }
    /* Herkunftshinweis unter der Wunschrente: erklaert den Standardwert. Verschwindet,
       sobald der Wert von Hand geaendert wurde (Steuerung in updateWunschrenteHints). */
    .vers-stat-note { display:block; font-size:9px; line-height:1.3; color:var(--muted); margin-top:4px; font-weight:600; }
    .vers-stat-note:empty { display:none; }
    .vers-stat-val { font-size:15px; font-weight:700; color:var(--text); }
    .vers-stat-sub { font-size:10px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .vers-stat-edit { display:flex; align-items:baseline; gap:4px; margin-top:auto; }
    /* Kleiner Reset neben der Wunschrente: nur sichtbar, wenn ein abweichender Wert steht
       (Steuerung in updateWunschrenteHints). Setzt zurueck auf 80 % des Nettoeinkommens. */
    .vers-stat-reset { flex:none; margin-left:2px; width:18px; height:18px; padding:0; cursor:pointer;
      border:1px solid var(--border); border-radius:50%; background:var(--bg); color:var(--muted);
      font:700 11px/1 'DM Sans',sans-serif; display:inline-flex; align-items:center; justify-content:center;
      align-self:center; }
    .vers-stat-reset:hover { background:var(--accent2-light); border-color:var(--accent2); color:var(--accent2); }
    .vers-stat-edit input { width:54px !important; font-size:15px !important; }
    .vers-stat-edit span { font-size:13px !important; }
    .vers-stat-edit .inline-info-btn { width:22px !important; height:22px !important; flex-basis:22px !important; font-size:10px !important; }
    .vers-stat-edit input {
      width:74px; border:none; border-bottom:1.5px solid #ccd6e1; background:transparent;
      padding:2px 0 4px; font:inherit; font-size:17px; font-weight:700; color:var(--text);
    }
    .vers-stat-edit input:focus { outline:none; border-bottom-color:var(--accent); }

    /* Regler-Chip, der im aktuellen Angebot keine Wirkung hat (z. B. "Dynamische Rente p.a."
       bei einem PDF ohne dynamische Rentenart). Bewusst ausgegraut statt versteckt, damit
       sichtbar bleibt, DASS es den Regler gibt - die Begruendung steht in der Notiz. */
    .vers-stat-chip.chip-inactive .vers-stat-label,
    .vers-stat-chip.chip-inactive .vers-stat-edit { opacity:.45; }
    .vers-stat-chip.chip-inactive .vers-stat-edit input { cursor:not-allowed; }
    .chip-inactive-note { display:none; }
    .vers-stat-chip.chip-inactive .chip-inactive-note {
      display:block; opacity:1; color:var(--muted); font-style:italic; white-space:normal;
    }
    .vers-stat-edit .inline-info-btn {
      width:28px; height:28px; flex-basis:28px; font-size:12px; border-width:1.5px;
    }
    .vers-stat-edit span { font-size:15px; font-weight:700; color:var(--text); }
    .vers-title { font-size:22px; font-weight:500; text-align:center; color:#354657; margin:8px 0 24px; }
    .vers-bars { --vers-bar-width:clamp(80px, 13vw, 150px); --vers-gap:clamp(10px, 2.4vw, 26px); display:flex; flex-wrap:nowrap; gap:var(--vers-gap); align-items:flex-end; justify-content:center; padding:0 8px; min-height:280px; }
    .vers-col { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
    .vers-col-side { flex:1.35 1 0; align-items:stretch; }
    .vers-col-topnote { min-height:32px; display:flex; align-items:flex-end; justify-content:center; color:#8b97a6; font-size:clamp(10px, 1.6vw, 16px); line-height:1.3; text-align:center; }
    .vers-bar-wrap { --vers-track-height:300px; width:min(100%, var(--vers-bar-width)); height:var(--vers-track-height); display:flex; align-items:flex-end; }
    .vers-bar { position:relative; border-radius:4px 4px 0 0; width:100%; transition:height .4s cubic-bezier(.4,0,.2,1); min-height:4px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
    .vers-bar-heute  { background:#1d3a5c; }
    .vers-bar-zukunft { background:#0f2540; }
    #bav-contribution-visual .vers-bar-heute { background:#0f2540; }
    .vers-bar-netto  { background:#00A6A6; border-radius:0; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .vers-bar-luecke { background:#f5c318; border-radius:4px 4px 0 0; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .vers-bar-split-wrap { width:100%; display:flex; flex-direction:column; align-items:stretch; }
    .vers-col-side .vers-bar-wrap { width:100%; justify-content:center; }
    .vers-bar-wrap.has-segment-labels { gap:clamp(5px, 1.2vw, 12px); max-width:100%; min-width:0; }
    .vers-bar-wrap.has-segment-labels .vers-bar-split-wrap { flex:0 1 var(--vers-bar-width); min-width:clamp(42px, 9vw, 110px); max-width:var(--vers-bar-width); }
    .bav-compare-bars { --vers-bar-width:clamp(64px, 16vw, 170px); max-width:680px; margin:0 auto; flex-wrap:nowrap; }
    .bav-compare-col .vers-bar-wrap { width:min(100%, var(--vers-bar-width)); }
    .bav-ratio-mid { flex:0 1 clamp(44px, 16vw, 150px); align-self:stretch; display:flex; align-items:center; justify-content:center; padding:38px 0 42px; min-width:0; }
    .bav-ratio-bridge { width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
    .bav-ratio-line { height:1.5px; background:#b7c3d1; position:relative; }
    .bav-ratio-line:first-child::after,
    .bav-ratio-line:last-child::before { content:''; position:absolute; top:50%; width:5px; height:5px; border-radius:50%; background:#8fa0b2; transform:translateY(-50%); }
    .bav-ratio-line:first-child::after { right:-2px; }
    .bav-ratio-line:last-child::before { left:-2px; }
    .bav-ratio-center { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:70px; }
    .bav-ratio-value { font:700 26px/1.05 'DM Mono',monospace; color:var(--accent2); white-space:nowrap; }
    .bav-ratio-sub { margin-top:5px; font-size:10px; font-weight:700; color:var(--muted); line-height:1.15; max-width:88px; }
    .bav-ratio-rendite { margin-top:6px; display:flex; flex-direction:column; align-items:center; color:var(--green,#1a7a45); max-width:100px; }
    .bav-ratio-rendite-val { font-size:18px; font-weight:800; line-height:1.1; white-space:nowrap; }
    .bav-ratio-rendite-lbl { margin-top:1px; font-size:9px; font-weight:700; line-height:1.15; text-transform:uppercase; letter-spacing:.02em; }
    .bav-compare-note { color:var(--muted); font-size:11px; line-height:1.45; text-align:center; margin-top:12px; }
    .haftung-disclaimer { display:block; margin-top:12px; padding:8px 12px; background:#f6f8fb; border-left:3px solid #b7c3d1; border-radius:0 6px 6px 0; color:var(--muted); font-size:11px; line-height:1.45; }
    .field-fruehrente-blocked label { opacity:.55; }
    .field-fruehrente-blocked input { opacity:.55; background:#f1f3f6; cursor:not-allowed; }
    .fruehrente-hint { display:block; margin-top:4px; font-size:11px; line-height:1.4; color:var(--accent2); font-weight:600; }
    .fruehrente-bridge { margin-bottom:18px; }
    .fruehrente-bridge-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
    .fruehrente-bridge-title { font-size:15px; font-weight:800; color:var(--ink,#1a2332); }
    .fruehrente-bridge-sub { margin-top:4px; font-size:12px; line-height:1.45; color:var(--muted); max-width:420px; }
    .fruehrente-bridge-kpi { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
    .fruehrente-bridge-kpi-val { font:700 26px/1.05 'DM Mono',monospace; color:#c08a00; white-space:nowrap; }
    .fruehrente-bridge-kpi-lbl { margin-top:3px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
    .fruehrente-bridge-chart { display:flex; align-items:flex-end; gap:6px; height:190px; padding-top:18px; }
    .fb-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; height:100%; }
    .fb-val { font-size:10px; font-weight:700; color:var(--ink,#1a2332); margin-bottom:4px; white-space:nowrap; }
    .fb-bar-wrap { flex:1 1 auto; width:100%; max-width:46px; display:flex; align-items:flex-end; }
    .fb-bar { width:100%; min-height:2px; border-radius:4px 4px 0 0; transition:height .2s ease; }
    .fb-age { margin-top:6px; font-size:11px; font-weight:600; color:var(--muted); }
    .fruehrente-bridge-dis { display:block; margin-top:12px; }
    .bav-contrib-rendite { display:block; margin-top:12px; padding:10px 14px; background:var(--green-light,#eafaf1); border-left:4px solid var(--green,#1a7a45); border-radius:0 8px 8px 0; font-size:13px; line-height:1.5; color:var(--ink,#1a2332); text-align:center; }
    .bav-contrib-rendite strong { color:#0f5c32; }
    .rendite-info-btn { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--accent2); color:var(--accent2); background:#fff; font:700 9px/1 'DM Sans',sans-serif; cursor:pointer; vertical-align:middle; margin-left:4px; padding:0; flex:none; text-align:center; }
    .rendite-info-btn:hover { background:var(--accent2-light); }
    .vers-segment-labels { position:relative; flex:1 1 clamp(96px, 22vw, 240px); min-width:clamp(90px, 20vw, 210px); align-self:flex-end; height:4px; }
    .vers-segment-list { position:absolute; inset:0; }
    .vers-segment-label { position:absolute; left:0; right:0; display:flex; align-items:center; gap:7px; min-height:32px; border:0; border-radius:4px; background:transparent; padding:3px 4px; font-family:inherit; text-align:left; transform:translateY(-50%); cursor:pointer; }
    .vers-segment-label:hover { background:#f0f3f7; }
    .vers-segment-line { display:none; }
    .vers-segment-dot { flex:0 0 9px; width:9px; height:9px; border-radius:2px; border:1px solid rgba(0,0,0,.08); }
    .vers-segment-text { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; line-height:1.15; }
    .vers-segment-title { font-size:11px; font-weight:700; color:#445365; text-transform:none; letter-spacing:0; white-space:normal; overflow:visible; text-overflow:clip; }
    .vers-segment-value { flex:0 0 auto; font-size:11px; font-weight:700; font-family:'DM Mono',monospace; color:var(--text); white-space:nowrap; }
    .vers-gap-label .vers-segment-title { color:#7a6010; }
    .vers-gap-label { cursor:default; }
    .vers-gap-label:hover { background:transparent; }
    .vers-static-label { cursor:default; }
    .vers-static-label:hover { background:transparent; }
    .vers-legend-head { position:absolute; top:-44px; right:0; z-index:2; display:flex; align-items:center; gap:8px; }
    .vers-legend-title { display:none; }
    .vers-legend-total { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
    .vers-legend-total-label { font-size:10px; font-weight:700; color:#445365; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
    .vers-legend-total-value { font-size:15px; font-weight:700; font-family:'DM Mono',monospace; color:var(--text); white-space:nowrap; }
    .legend-info-btn { width:18px; height:18px; border-radius:50%; border:1px solid var(--accent2); color:var(--accent2); background:#fff; display:inline-flex; align-items:center; justify-content:center; font:700 10px/1 'DM Sans',sans-serif; cursor:pointer; flex:0 0 18px; }
    .legend-info-btn:hover { background:var(--accent2-light); }
    .vers-bar-inner-label {
      font-size:10px; font-weight:600; color:rgba(255,255,255,.95); text-align:center; line-height:1.4;
      padding:12px 10px 14px; width:100%; height:100%;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    .vers-bar-inner-label.dark { color:rgba(0,0,0,.6); }
    .vers-bar-title { display:block; font-size:11px; font-weight:600; margin-bottom:4px; }
    .vers-bar-year { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
    .vers-bar-value { display:block; font-size:20px; font-weight:700; font-family:'DM Mono',monospace; line-height:1.1; }
    .vers-bar-value.dark { color:#1a2332; }
    #bav-contribution-visual .vers-bar-title,
    #bav-contribution-visual .bav-contrib-bar-subline,
    #bav-contribution-visual .vers-bar-value { max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
    #bav-contribution-visual .vers-bar.bav-label-value-only .vers-bar-inner-label { min-width:0; padding:6px 4px; line-height:1.15; }
    #bav-contribution-visual .vers-bar.bav-label-value-only .vers-bar-title,
    #bav-contribution-visual .vers-bar.bav-label-value-only .bav-contrib-bar-subline,
    #bav-contribution-visual .vers-bar.bav-label-value-only .info-icon-btn { display:none; }
    #bav-contribution-visual .vers-bar.bav-label-compact .vers-bar-inner-label,
    #bav-leistungs-visual .vers-bar.bav-label-compact .vers-bar-inner-label { min-width:0; padding:6px 4px; line-height:1.15; }
    #bav-leistungs-visual .vers-bar.bav-label-compact .vers-bar-title { display:none; }
    #bav-leistungs-visual .vers-bar.bav-label-compact .vers-bar-value { font-size:clamp(10px, 2.4vw, 16px); white-space:normal; overflow-wrap:normal; }
    #bav-leistungs-visual .vers-bar.bav-label-floating { overflow:visible; z-index:4; }
    #bav-leistungs-visual .vers-bar.bav-label-floating .vers-bar-inner-label {
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:max-content; max-width:var(--bav-floating-label-width, 136px); height:auto; min-height:0;
      padding:5px 7px; border:1px solid rgba(160,170,185,.7); border-radius:6px;
      background:rgba(255,255,255,.96); box-shadow:0 2px 8px rgba(15,37,64,.12);
      color:#1a2332; line-height:1.15; pointer-events:none;
    }
    #bav-leistungs-visual .vers-bar.bav-label-floating .vers-bar-title { display:none; }
    #bav-leistungs-visual .vers-bar.bav-label-floating .vers-bar-year { font-size:10px; margin-bottom:3px; }
    #bav-leistungs-visual .vers-bar.bav-label-floating .vers-bar-value { font-size:clamp(10px, 2.3vw, 14px); white-space:normal; overflow-wrap:normal; color:#1a2332; }
    .vers-col-label { font-size:12px; color:var(--muted); text-align:center; line-height:1.5; }
    .vers-col-label strong { font-size:14px; color:var(--text); display:block; }

    /* ── bAV-Balken mit externer Legende (Variante B) ── */
    .bav-bars-v2 .bav-col { align-items:stretch; }
    .bav-bar-flex { width:100%; display:flex; align-items:flex-end; gap:14px; }
    .bav-bar-side { flex:0 0 96px; }
    .bav-bar-stack { width:100%; display:flex; flex-direction:column; align-items:stretch; }
    .bav-bar-stack .vers-bar { width:100%; border-radius:0; min-height:2px; overflow:hidden; transition:height .4s cubic-bezier(.4,0,.2,1); }
    .bav-bar-stack .vers-bar:first-child { border-radius:4px 4px 0 0; }
    .bav-ext-labels { position:relative; flex:1; min-width:150px; }
    .bav-ext-label { position:absolute; left:0; right:0; display:flex; align-items:center; gap:8px; transform:translateY(-50%); transition:top .35s cubic-bezier(.4,0,.2,1), opacity .2s; pointer-events:none; }
    .bav-ext-label.hidden-seg { opacity:0; }
    .bav-ext-line { flex:0 0 14px; height:1px; background:var(--border); }
    .bav-ext-dot { flex:0 0 10px; width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.08); }
    .bav-ext-text { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
    .bav-ext-title { font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.02em; text-transform:uppercase; }
    .bav-ext-value { font-size:15px; font-weight:700; font-family:'DM Mono',monospace; color:var(--text); white-space:nowrap; }
    .info-icon-btn { background:transparent; border:2px solid currentColor; color:#fff; font-size:16px; font-weight:700; cursor:pointer; width:42px; height:42px; border-radius:50%; line-height:1; display:inline-flex; align-items:center; justify-content:center; margin-top:10px; transition:opacity .15s, background .15s; }
    .info-icon-btn:hover { background:rgba(255,255,255,.14); opacity:1; }
    .bav-contrib-info-btn { width:28px; height:28px; font-size:12px; border-width:1.5px; margin-top:8px; }
    .bav-contrib-bar-subline { display:block; margin-top:3px; font-size:9px; font-weight:600; opacity:.92; }
    .bav-bar-under { min-height:30px; font-size:11px; color:var(--muted); text-align:center; line-height:1.35; max-width:230px; }
    .vers-footer { margin-top:14px; text-align:center; }
    .vers-gap-closing {
      margin-bottom:10px;
      text-align:center;
    }
    .vers-gap-closing-copy {
      padding:12px 16px;
      background:#fff0e0;
      border-left:4px solid #e07b1a;
      border-radius:0 8px 8px 0;
      font-size:14px;
      font-weight:600;
      line-height:1.45;
      color:#1a2332;
      text-align:center;
    }
    @media (max-width: 620px) {
      .vers-gap-closing-copy { font-size:13px; }
    }
    .vers-footer small { font-size:11px; color:var(--muted); }
    @media(max-width:940px) {
      .vers-bars { --vers-bar-width:clamp(64px, 12vw, 130px); --vers-gap:clamp(8px, 2vw, 18px); min-height:250px; }
      .vers-bars:not(.bav-compare-bars) .vers-col-side { flex:1.25 1 0; }
      .vers-bars:not(.bav-compare-bars) .vers-bar-wrap { --vers-track-height:240px; height:var(--vers-track-height); }
      .vers-bars:not(.bav-compare-bars) .vers-col:not(.vers-col-side) .vers-bar-wrap { width:min(100%, var(--vers-bar-width)); }
      .vers-bars:not(.bav-compare-bars) .vers-bar-wrap.has-segment-labels { align-items:flex-end; }
      .bav-ratio-mid { flex-basis:clamp(44px, 14vw, 104px); padding-left:0; padding-right:0; }
      .bav-ratio-bridge { gap:6px; }
      .bav-ratio-value { font-size:20px; }
      .bav-ratio-sub { font-size:9px; }
    }
    /* ── Detail Overlay ── */
    .overlay-bd { position:fixed; inset:0; background:rgba(0,0,0,.48); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
    .overlay-box { background:#fff; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.28); width:min(1140px,100%); max-height:86vh; overflow-y:auto; }
    .overlay-box-small { width:min(520px,100%); }
    .overlay-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); font-size:15px; font-weight:700; position:sticky; top:0; background:#fff; z-index:1; }
    .overlay-tabs { display:flex; gap:6px; padding:12px 20px; border-bottom:1px solid var(--border); background:#fafbfc; position:sticky; top:54px; z-index:1; }
    .overlay-tab-btn { border:1.5px solid var(--border); background:#fff; color:var(--muted); border-radius:999px; padding:7px 12px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }
    .overlay-tab-btn.active { background:var(--accent2); border-color:var(--accent2); color:#fff; }
    .overlay-bdy { padding:0; }
    .overlay-section { padding:0 0 18px; }
    .overlay-section-head { padding:18px 20px 10px; }
    .overlay-section-title { font-size:16px; font-weight:700; color:#444; margin-bottom:2px; }
    .overlay-section-sub { font-size:13px; color:var(--muted); }
    .overlay-person { padding:14px 20px; font-size:18px; font-weight:700; color:#0f4470; border-bottom:1px solid var(--border); }
    .overlay-note { padding:12px 20px; font-size:12px; color:#5e6875; border-bottom:1px solid var(--border); }
    .overlay-tbl { width:100%; border-collapse:collapse; font-size:13px; }
    .overlay-tbl th { background:#f0f3f7; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); padding:10px 16px; text-align:left; border-bottom:1px solid var(--border); }
    .overlay-tbl th:last-child { text-align:right; }
    .overlay-tbl td { padding:13px 16px; border-bottom:1px solid #f0f0f0; color:var(--text); vertical-align:middle; }
    .overlay-tbl td:last-child { text-align:right; font-family:'DM Mono',monospace; font-weight:600; white-space:nowrap; }
    .overlay-tbl .tbl-deduct td { color:var(--red); }
    .overlay-tbl .tbl-deduct td:first-child { color:var(--red); }
    .overlay-tbl .tbl-positive td:last-child { color:var(--green); }
    .overlay-tbl .tbl-section td { background:#f7f9fc; color:#445365; font-family:'DM Sans',sans-serif; font-weight:700; text-align:left; }
    .overlay-tbl .tbl-active td { background:var(--green-light); color:var(--green); font-weight:700; }
    .overlay-tbl .tbl-total td { background:#f0f3f7; font-weight:700; font-size:14px; }
    .overlay-tbl .tbl-brutto td { color:var(--muted); font-size:12px; }
    .overlay-tbl .tbl-note td { padding-top:0; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:11px; line-height:1.35; white-space:normal; }
    .overlay-tbl .tbl-note td:first-child { color:var(--muted); }
    .overlay-tbl .tbl-note td:last-child { text-align:left; font-family:'DM Sans',sans-serif; font-weight:400; white-space:normal; }
    .overlay-tbl tr:last-child td { border-bottom:none; }
    /* KPI-Info-Popup: breitere Box + Wortumbruch in der Label-Spalte, damit nichts abgeschnitten wird und nicht horizontal gescrollt werden muss */
    #bav-contrib-info-overlay .overlay-box { width:min(640px, 100%); }
    #bav-contrib-info-table { table-layout:fixed; }
    #bav-contrib-info-table td:first-child { white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
    #bav-contrib-info-table td:last-child { white-space:normal; overflow-wrap:anywhere; }

    @media(max-width:800px) {
      .g2,.g3,.g4,.g5,.g6,.results-grid { grid-template-columns:1fr; }
      #bav-nettoleistung-sec .results-grid { grid-template-columns:1fr !important; }
      .wrap { padding:12px 12px 40px; }
      .grunddaten-title { flex-wrap:wrap; }
      .vers-bars { --vers-bar-width:clamp(48px, 15vw, 110px); --vers-gap:8px; flex-direction:row; flex-wrap:nowrap; align-items:flex-end; min-height:220px; gap:var(--vers-gap); padding:0; }
      .vers-col-side { flex:1.2 1 0; }
      .vers-bar-wrap { --vers-track-height:220px; height:var(--vers-track-height); }
      .vers-bars:not(.bav-compare-bars) .vers-bar-wrap { --vers-track-height:220px; height:var(--vers-track-height); }
      .vers-col:not(.vers-col-side) .vers-bar-wrap { width:min(100%, var(--vers-bar-width)); }
      .vers-bar-wrap.has-segment-labels { align-items:flex-end; }
      .vers-segment-labels { flex-basis:92px; min-width:84px; }
      .vers-bar-wrap.has-segment-labels .vers-bar-split-wrap { flex:0 1 clamp(38px, 11vw, 80px); min-width:38px; max-width:80px; }
      .bav-ratio-mid { flex:0 1 72px; padding-left:0; padding-right:0; }
      .bav-ratio-bridge { width:100%; gap:6px; }
      .bav-ratio-center { min-width:58px; }
      .bav-ratio-value { font-size:20px; }
      .bav-ratio-sub { font-size:9px; }
      .bav-rente-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .bav-result-wide { grid-column:span 1; }
      .overlay-box { width:min(100%, 100%); }
    }
    @media(max-width:760px) {
      #bav-contribution-visual > .vers-header { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media(max-width:520px) {
      #bav-contribution-visual > .vers-header { grid-template-columns:1fr; }
    }
    @media(max-width:560px) {
      .vers-outer { padding:20px 12px 14px; }
      .vers-bars { --vers-bar-width:clamp(42px, 17vw, 90px); --vers-gap:6px; }
      .vers-bar-inner-label { padding:10px 6px 12px; }
      .vers-bar-title { display:none; }
      .vers-bar-year { font-size:10px; margin-bottom:4px; }
      .vers-bar-value { font-size:13px; }
      .vers-segment-labels { flex-basis:44px; min-width:44px; }
      .vers-segment-label { gap:4px; padding:1px 2px; }
      .vers-segment-dot { flex-basis:7px; width:7px; height:7px; }
      .vers-segment-title { display:none; }
      .vers-segment-value { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:9px; }
      .vers-bar-wrap.has-segment-labels .vers-bar-split-wrap { flex-basis:40px; min-width:36px; max-width:70px; }
      .bav-compare-bars { flex-wrap:nowrap; }
      .bav-ratio-mid { flex:0 0 44px; padding:0; }
      .bav-ratio-line { display:none; }
      .bav-ratio-bridge { display:block; }
      .bav-ratio-center { min-width:0; }
      .bav-ratio-value { font-size:16px; }
      .bav-ratio-sub { display:none; }
    }
    @media(max-width:420px) {
      .top-header { padding:0 10px; }
      .top-header-logo { gap:6px; min-width:0; }
      .top-header-logo-img { height:30px; }
      .top-header-logo-divider { display:none; }
      .top-header-logo-title { font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
      .settings-btn { flex:0 0 30px; width:30px; height:30px; }
      .vers-outer { padding-left:8px; padding-right:8px; }
      .vers-bars { --vers-gap:5px; }
      .vers-col-topnote { min-height:24px; font-size:9px; }
      .vers-segment-labels { flex-basis:18px; min-width:18px; }
      .vers-segment-value { display:none; }
      .vers-bar-wrap.has-segment-labels { gap:4px; }
      .vers-bar-wrap.has-segment-labels .vers-bar-split-wrap { flex-basis:36px; min-width:34px; max-width:56px; }
      .bav-ratio-mid { flex-basis:36px; }
      .bav-ratio-value { font-size:14px; }
    }

    /* Förderrechner KPI-Kacheln */
    .kpi { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
    .kpi-label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
    .kpi-val { font-size:20px; font-weight:800; color:var(--ink,#1a2332); margin-top:2px; line-height:1.15; }
    .kpi .hint { margin-top:4px; }

    /* Förderrechner Lösungs-Diagramm */
    .loesung-charttitle { font-size:14px; font-weight:700; color:var(--accent2); padding-left:10px; border-left:4px solid var(--accent); margin-bottom:8px; }
    .loesung-chartsub { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; }
    .loesung-chart { position:relative; display:flex; gap:28px; align-items:flex-end; height:210px; padding:14px 12px 0; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
    .loesung-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; width:90px; }
    .loesung-bar { position:relative; width:64px; height:170px; display:flex; flex-direction:column-reverse; border-radius:6px 6px 0 0; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.08); }
    .loesung-seg { width:100%; }
    .loesung-gap { background:repeating-linear-gradient(45deg, #fde8e6, #fde8e6 6px, #fff 6px, #fff 12px); border-top:1px dashed var(--red,#c0392b); }
    .loesung-cap { font-size:11px; font-weight:600; color:var(--muted); margin-top:6px; text-align:center; }
    .loesung-target { position:absolute; left:8px; right:8px; border-top:2px dashed var(--ink,#1a2332); pointer-events:none; }
    .loesung-target span { position:absolute; right:0; top:-9px; background:var(--ink,#1a2332); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; }
    .loesung-legend { display:flex; flex-direction:column; gap:6px; justify-content:center; font-size:12px; color:var(--ink,#1a2332); margin-left:auto; }
    .loesung-legend span { display:flex; align-items:center; gap:6px; }
    .loesung-legend i, .loesung-tbl .dot { width:11px; height:11px; border-radius:3px; display:inline-block; }
    /* ── Förderrechner-Rechenblock: Annahmen-Leiste, aufklappbare „Tarife & Einstellungen"
       und Vergleichstabelle in EINER Karte mit weichen Ecken. Bewusst schlicht: weiße
       Tabelle, dünne Farbstriche, nur die Netto-Summe dunkel hinterlegt. ── */
    .fr-block { border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden;
      box-shadow:0 1px 3px rgba(16,40,60,.04); }
    /* Die Vergleichstabelle hat eine Mindestbreite. Wird das Fenster schmaler als die Karte,
       schnitt .fr-block sie mit overflow:hidden ersatzlos ab – ausgerechnet die Netto-Rente-
       Spalte ganz rechts, und ohne Scrollbalken, mit dem man sie hätte erreichen können.
       Deshalb scrollt die Tabelle in einem eigenen Rahmen INNERHALB der Karte. */
    .fr-tbl-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
    .fr-tbl-scroll:focus-visible { outline:2px solid var(--accent2); outline-offset:-2px; }
    .foerder-toolbar { display:flex; flex-wrap:nowrap; align-items:stretch; background:#f7f9fb;
      border-bottom:1px solid var(--border); }
    .ftb-item { display:flex; align-items:center; gap:6px; flex:none; padding:8px 14px; min-width:0;
      border-right:1px solid var(--border); }
    .ftb-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
      color:var(--muted); white-space:nowrap; margin-right:4px; }
    .ftb-item input {
      width:46px; height:26px; border:0; border-bottom:1.5px solid #ccd6e1; border-radius:0;
      background:transparent; padding:0 2px; text-align:right;
      font-family:'DM Mono',monospace; font-size:13.5px; font-weight:700; color:var(--text);
      -moz-appearance:textfield; }
    .ftb-item input:focus { outline:none; border-bottom-color:var(--accent); }
    .ftb-item input::-webkit-outer-spin-button,
    .ftb-item input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .ftb-unit { font-size:12px; font-weight:700; color:var(--muted); margin-left:-2px; white-space:nowrap; }
    .ftb-item .inline-info-btn { width:18px !important; height:18px !important; flex:0 0 18px !important; font-size:9px !important; }
    /* Knopf rechts in der Leiste: klappt die Einstellungen je Produkt auf. */
    .fr-set-toggle { margin-left:auto; flex:0 1 auto; display:flex; align-items:center; gap:8px; min-width:0;
      border:0; border-left:1px solid var(--border); background:transparent; padding:8px 16px;
      font:700 12px/1.2 'DM Sans',sans-serif; color:var(--accent2); cursor:pointer; text-align:left; }
    .fr-set-toggle:hover { background:#eef3f7; }
    .fr-set-toggle.offen { background:#fff; }
    .fr-set-ico { width:14px; height:14px; flex:none; }
    .fr-set-label { white-space:nowrap; }
    .fr-set-sum { font-weight:500; font-size:11px; color:var(--muted); white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis; }
    .fr-set-toggle.manuell .fr-set-sum { color:#8a5a00; }
    .fr-set-caret { font-size:10px; transition:transform .15s; }
    .fr-set-toggle.offen .fr-set-caret { transform:rotate(180deg); }
    /* Aufgeklappte Einstellungen: je Produkt eine Karte, darunter die Freibetrags-Dynamik. */
    .fr-settings { background:#f7f9fb; border-bottom:1px solid var(--border); padding:14px 16px 12px; }
    .fr-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .fr-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 12px 13px;
      display:flex; flex-direction:column; gap:10px; min-width:0; }
    .fr-card-head { display:flex; gap:9px; align-items:stretch; }
    .fr-card-bar { width:3px; border-radius:2px; flex:0 0 3px; }
    .fr-bar-ruerup { background:#7b5aa6; } .fr-bar-flex { background:#5a57b3; } .fr-bar-riester { background:#c8792d; }
    .fr-card-name { font-weight:700; font-size:13px; line-height:1.25; color:var(--text); }
    .fr-card-sub { font-size:10.5px; color:var(--muted); line-height:1.3; margin-top:1px; }
    .fr-f { display:flex; flex-direction:column; gap:4px; min-width:0; }
    /* display:flex schlägt das hidden-Attribut – Rentenform-Block ohne Varianten (z. B. Flex ohne Vorschau) muss weg */
    .fr-f[hidden], .rb-quelle[hidden] { display:none; }
    .fr-f > label { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700;
      text-transform:uppercase; letter-spacing:.3px; color:var(--muted); }
    .fr-f > label .inline-info-btn { width:15px !important; height:15px !important; flex:0 0 15px !important; font-size:8.5px !important; }
    .fr-f select, .fr-f input[type="number"] { width:100%; height:32px; padding:0 8px; font-size:12.5px;
      font-family:inherit; color:var(--text); border:1px solid #d5dde6; border-radius:8px; background:#fff; }
    .fr-f input[type="number"] { font-family:'DM Mono',monospace; }
    .fr-f select:focus, .fr-f input:focus { outline:none; border-color:var(--accent2); }
    /* Umschalter garantiert | möglich */
    .fr-seg { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:8px; background:#eef2f6; }
    .fr-seg button { border:0; background:transparent; border-radius:6px; padding:6px 8px; cursor:pointer;
      font:600 12px/1.1 'DM Sans',sans-serif; color:var(--muted); }
    .fr-seg button:hover { color:var(--text); }
    /* Rentenform-Knöpfe: Anzahl hängt am Tarif (2–5), daher automatisch umbrechen */
    .fr-seg.fr-seg-auto { grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); }
    .fr-seg.fr-seg-auto button { padding-left:3px; padding-right:3px; min-width:0; } /* fünf Rentenformen (z. B. Conti) passen sonst nicht in die Zeile */
    /* Quellenhinweis unter den Rentenform-Knöpfen: klein, dezent, Link zur markierten Angebotsseite */
    .rb-quelle { font-size:10.5px; color:#6b7a8d; margin-top:4px; text-align:right; }
    .rb-quelle a { color:var(--accent2); text-decoration:underline dotted; }
    .fr-seg button.on { background:#fff; color:var(--accent2); font-weight:700; box-shadow:0 1px 2px rgba(16,40,60,.12); }
    .fr-kinder { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .fr-hint { font-size:10px; color:var(--muted); line-height:1.35; }
    .fr-card .foerder-manuell { margin:0; background:#fffaf0; border:1px solid #f0dcaf; border-radius:8px; padding:9px 10px; }
    .fr-card .foerder-manuell .man-head { color:#8a5a00; margin-bottom:7px; font-size:10px; }
    .fr-card .foerder-manuell .man-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; align-items:end; }
    .fr-card .foerder-manuell .man-f label { font-size:10px; line-height:1.2; }
    .fr-card .foerder-manuell .man-f label small { display:block; font-size:9px; font-weight:500; color:#9aa7b5; }
    .fr-card .foerder-manuell .man-f input { height:30px; padding:0 7px; text-align:right; border-radius:6px; }
    .fr-card .foerder-manuell .hint { font-size:10px; line-height:1.35; margin-top:7px; color:#8a6a2a; }
    .fr-set-foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; margin-top:12px; }
    .fr-set-foot .ftb-item { border:1px solid var(--border); border-radius:8px; background:#fff; padding:6px 12px; }
    .fr-set-foot .fr-hint { flex:1 1 280px; font-size:11px; }
    @media (max-width:860px) {
      .fr-cards { grid-template-columns:1fr; }
      .fr-set-sum { display:none; }
      .foerder-toolbar { flex-wrap:wrap; }
    }
    /* ── Vergleichstabelle Förderrechner ──
       Weiße Tabelle, Spaltengruppen nur als beschriftete Linie im Kopf, Produkte mit dünnem
       Farbstrich, Netto-Renten in der Produktfarbe. Passt immer in die Breite. */
    .loesung-tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
    .loesung-tbl col.c-prod { width:24%; }
    .loesung-tbl th { font-size:10px; color:var(--muted); font-weight:700; letter-spacing:.35px;
      text-transform:uppercase; padding:2px 10px 9px; text-align:right; vertical-align:bottom;
      white-space:nowrap; border-bottom:1px solid var(--border); }
    .loesung-tbl th.vgl-l { text-align:left; }
    .loesung-tbl tr.vgl-grp th { border-bottom:0; padding:12px 10px 7px; text-align:center;
      font-size:9.5px; letter-spacing:.7px; color:#8a97a6; }
    .loesung-tbl tr.vgl-grp th span { display:block; padding-bottom:5px; border-bottom:2px solid #dbe2e9; border-radius:1px; }
    .loesung-tbl tr.vgl-grp th.vgl-gB span { color:#1a7a45; border-bottom-color:#9fd6b6; }
    .loesung-tbl td { padding:12px 10px; border-bottom:1px solid #edf1f4; vertical-align:middle;
      text-align:right; font-family:'DM Mono',monospace; white-space:nowrap; }
    .loesung-tbl td.vgl-l { text-align:left; font-family:'DM Sans',sans-serif; white-space:normal; }
    .loesung-tbl th:first-child, .loesung-tbl td:first-child { padding-left:16px; }
    .loesung-tbl th:last-child, .loesung-tbl td:last-child { padding-right:16px; }
    /* Gleiche Zeilenhöhe für alle drei Produkte. Die Zeilen tragen unterschiedlich viele
       Unterzeilen (Riester Zulage + Steuer, Flex den Ertragsanteil-Hinweis, Basis nur
       „Steuervorteil"); ohne Boden sprang die Höhe zwischen 61 und 87 px und der Blick
       verlor beim Vergleichen die Netto-Rente-Spalte. `height` auf einer Tabellenzeile
       wirkt als MINDEST-, nicht als Festhöhe – längere Inhalte dürfen weiter wachsen. */
    .loesung-tbl tbody tr { height:88px; }
    .loesung-tbl tbody tr:hover td { background:#fbfcfd; }
    .loesung-tbl tbody tr:last-child td { border-bottom:0; }
    /* Spaltenköpfe mit kleinem „i" */
    .vgl-th { display:inline-flex; align-items:center; gap:4px; }
    .vgl-th-i { width:14px; height:14px; flex:0 0 14px; padding:0; border-radius:50%; cursor:pointer;
      border:1px solid #c9d2dc; background:#fff; color:#8a97a6; font:700 8.5px/1 'DM Sans',sans-serif;
      text-transform:none; display:inline-flex; align-items:center; justify-content:center; }
    .vgl-th-i:hover { border-color:var(--accent2); color:var(--accent2); }
    /* Produktzelle: Farbstrich, Name, darunter Tarif und Rentenfaktor (Klick = Einstellungen). */
    .vgl-prod { display:flex; gap:10px; align-items:stretch; }
    .vgl-prod-bar { width:3px; border-radius:2px; flex:0 0 3px; }
    .vgl-prod-txt { min-width:0; }
    .vgl-prod-name { font-weight:700; font-size:13.5px; line-height:1.25; color:var(--text); }
    .vgl-prod-info { margin-top:3px; font:400 11px/1.35 'DM Sans',sans-serif; color:var(--muted); }
    .vgl-prod-tarif { display:block; }
    .vgl-tag { display:inline-block; margin-right:5px; padding:1px 6px; border-radius:999px;
      font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
      color:#8a5a00; background:#fff1d1; vertical-align:1px; }
    /* Beitrag: das eine sichtbare Eingabefeld je Zeile (Feld + „€" in einem Rahmen). */
    .vgl-feld { display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; height:32px;
      padding:0 9px 0 7px; border:1px solid #d5dde6; border-radius:8px; background:#fff; cursor:text;
      transition:border-color .15s, box-shadow .15s; }
    .vgl-feld:hover { border-color:#b9c5d1; }
    .vgl-feld:focus-within { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(26,58,74,.08); }
    .vgl-feld input { border:0; outline:none; background:transparent; padding:0; min-width:0; text-align:right;
      font-family:'DM Mono',monospace; color:var(--text); -moz-appearance:textfield; }
    .vgl-feld input::-webkit-outer-spin-button,
    .vgl-feld input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .vgl-feld .vgl-eur { font:600 11.5px 'DM Mono',monospace; color:var(--muted); }
    .vgl-feld-beitrag input { width:50px; font-size:14px; font-weight:700; }
    /* Kapital & Brutto-Rente: sehen aus wie feste Werte (Platzhalter = berechneter Wert in
       normaler Schriftfarbe). Beim Überfahren Stift + Hintergrund, beim Klick ein Eingabefeld.
       Ein eingetragener Angebotswert erscheint orange, darunter „zurücksetzen". */
    .vgl-wert { display:inline-flex; flex-direction:column; align-items:flex-end; }
    .vgl-wert-feld { position:relative; display:inline-flex; align-items:center; justify-content:flex-end; gap:4px;
      padding:5px 7px 5px 22px; margin:-5px -7px -5px 0; border:1px solid transparent; border-radius:8px;
      cursor:text; transition:background .15s, border-color .15s, box-shadow .15s; }
    .vgl-wert-feld input { width:64px; border:0; outline:none; background:transparent; padding:0; text-align:right;
      font:600 13px 'DM Mono',monospace; color:var(--text); -moz-appearance:textfield; }
    .vgl-wert-feld input::-webkit-outer-spin-button,
    .vgl-wert-feld input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .vgl-wert-feld input::placeholder { color:var(--text); opacity:1; }
    .vgl-wert-feld .vgl-eur { font:600 13px 'DM Mono',monospace; color:var(--text); }
    .vgl-stift { position:absolute; left:6px; top:50%; width:12px; height:12px; margin-top:-6px;
      color:#8a97a6; opacity:0; transition:opacity .15s; }
    .loesung-tbl tbody tr:hover .vgl-stift { opacity:.45; }
    .vgl-wert-feld:hover { background:#eef2f6; }
    .vgl-wert-feld:hover .vgl-stift { opacity:1; color:var(--accent2); }
    .vgl-wert-feld:focus-within { background:#fff; border-color:var(--accent2); box-shadow:0 0 0 3px rgba(26,58,74,.08); }
    .vgl-wert-feld:focus-within .vgl-stift { opacity:0; }
    .vgl-wert-feld:focus-within input::placeholder { color:#a9b4c0; }
    .vgl-wert:has(input:not(:placeholder-shown)) .vgl-wert-feld { background:#fff5e2; }
    .vgl-wert:has(input:not(:placeholder-shown)) .vgl-wert-feld:focus-within { background:#fff; }
    .vgl-wert:has(input:not(:placeholder-shown)) input,
    .vgl-wert:has(input:not(:placeholder-shown)) .vgl-eur { color:#9a6300; }
    .vgl-wert-reset { display:none; border:0; background:none; padding:0; margin-top:5px; cursor:pointer;
      font:600 9.5px/1.2 'DM Sans',sans-serif; color:#9a6300; white-space:nowrap; }
    .vgl-wert-reset:hover { text-decoration:underline; }
    .vgl-wert:has(input:not(:placeholder-shown)) .vgl-wert-reset { display:block; }
    /* Eigenaufwand: gleicher dezenter Stil, aber immer ein berechneter Wert – fett wie die Spalte. */
    .vgl-wert-aufwand input { font-weight:700; }
    .vgl-wert-aufwand:has(input:placeholder-shown):not(:focus-within) .vgl-eur { display:none; }
    /* Zeile ohne Beitrag: bleibt stehen, Ergebnisse zurückgenommen. */
    .loesung-tbl tr.vgl-inaktiv td { color:#b8c2cc; }
    .loesung-tbl tr.vgl-inaktiv .vgl-prod-name { color:var(--muted); }
    .loesung-tbl tr.vgl-inaktiv .vgl-prod-bar { opacity:.35; }
    .vgl-sub { display:block; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:400;
      color:var(--muted); margin-top:3px; white-space:normal; line-height:1.3; }
    .vgl-aufwand { font-size:15px; font-weight:700; }
    .vgl-foerderung { color:#1a7a45; font-weight:600; }
    .vgl-foerderung.vgl-null { color:#a9b4c0; font-weight:400; }
    .vgl-quote { display:inline-block; min-width:46px; padding:3px 8px; border-radius:999px; text-align:center;
      font-family:'DM Mono',monospace; font-size:12px; font-weight:700; background:var(--green-light); color:#14663a; }
    .vgl-quote.vgl-null { background:#eef1f4; color:var(--muted); }
    .loesung-tbl .vgl-netto-cell { text-align:right; }
    /* Netto-Rente in der Produktfarbe, ohne Fläche */
    .loesung-tbl .vgl-netto-btn { border:0; background:transparent; cursor:pointer; color:var(--c, var(--text));
      font-family:'DM Mono',monospace; font-size:16px; font-weight:800;
      padding:3px 5px; margin:-3px -5px; border-radius:6px; }
    .loesung-tbl .vgl-netto-btn:hover { background:rgba(26,58,74,.06); }
    .loesung-tbl .vgl-netto-btn:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
    /* Gesamtzeile: hell mit feiner Linie; nur die Netto-Summe dunkel hinterlegt
       (die untere rechte Ecke rundet die Karte mit ab). */
    .loesung-tbl tfoot td { padding:13px 10px; font-weight:700; text-align:right; font-family:'DM Mono',monospace;
      white-space:nowrap; background:#f5f7f9; color:var(--accent2); border-top:1.5px solid #cfd8e2; }
    .vgl-sum-row td.vgl-l { text-align:left; font-family:'DM Sans',sans-serif; font-size:11px;
      text-transform:uppercase; letter-spacing:.6px; }
    .vgl-sum-row .vgl-sum-quote { color:var(--muted); }
    .vgl-sum-row td.vgl-netto-cell { background:var(--accent2); color:#fff; font-size:17px; font-weight:800;
      border-top-color:var(--accent2); }
    .vgl-sum-pill { font:inherit; }
    .vgl-sum-row.vgl-sum-leer td { color:#a9b4c0; }
    .vgl-sum-row.vgl-sum-leer td.vgl-netto-cell { background:#e9eef3; color:#a9b4c0; border-top-color:#cfd8e2; }
    /* Dauerhafter Disclaimer unter dem Rechenblock */
    .vgl-disclaimer { display:flex; gap:10px; margin-top:14px; padding:11px 14px; background:#f7f9fb;
      border:1px solid #e8edf1; border-radius:10px; font-size:11px; line-height:1.55; color:var(--muted); }
    .vgl-disclaimer-ico { width:16px; height:16px; flex:none; color:#8a97a6; margin-top:1px; }
    #foerder-loesung-unter .rw-toggle { margin-top:6px; }
    @media (max-width:980px) {
      .loesung-tbl { font-size:12px; }
      .loesung-tbl th, .loesung-tbl td { padding-left:6px; padding-right:6px; }
      .loesung-tbl th:first-child, .loesung-tbl td:first-child { padding-left:10px; }
      .loesung-tbl th:last-child, .loesung-tbl td:last-child { padding-right:10px; }
      .vgl-aufwand { font-size:13.5px; }
      .loesung-tbl .vgl-netto-btn { font-size:14px; }
      .vgl-wert-feld { padding-left:16px; }
      .vgl-stift { left:3px; }
      .vgl-wert-feld input { width:56px; font-size:12px; }
      .vgl-wert-feld .vgl-eur { font-size:12px; }
      .vgl-feld-beitrag input { width:42px; font-size:13px; }
    }
    @media (max-width:900px) {
      .loesung-tbl tbody tr { height:76px; }
      .loesung-tbl { font-size:11px; }
      .loesung-tbl th { white-space:normal; font-size:9px; letter-spacing:.2px; }
      .loesung-tbl th, .loesung-tbl td { padding-left:4px; padding-right:4px; }
      .loesung-tbl col.c-prod { width:auto; }
      .vgl-feld { padding:0 6px 0 5px; height:30px; }
      .vgl-feld .vgl-eur { font-size:10px; }
      .vgl-wert-feld { padding-left:6px; }
      .vgl-stift { display:none; }
      .vgl-wert-feld input { width:48px; font-size:11px; }
      .vgl-wert-feld .vgl-eur { font-size:11px; }
      .vgl-feld-beitrag input { width:36px; font-size:12px; }
      .vgl-aufwand { font-size:12.5px; }
      .loesung-tbl .vgl-netto-btn { font-size:13px; }
      .vgl-sum-row td.vgl-netto-cell { font-size:14px; }
      .vgl-quote { min-width:0; padding:2px 5px; font-size:11px; }
      .vgl-prod-name { font-size:12px; }
      .vgl-th-i { display:none; }
      /* Schmales Fenster: Tarifname auf eine Zeile klemmen. Er ist der grösste Treiber
         ungleicher Zeilenhoehen (zwei Zeilen bei Riester, eine bei Basis) – vollstaendig
         steht er weiter im title der Zelle und unter „Tarife & Einstellungen". */
      .vgl-prod-tarif { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    }
    /* Unter dem Rechenblock: Merksatz links; rechts, bündig unter der Netto-Rente, erst der
       Übernehmen-Button, danach die Lücken-Rechnung mit dem Sprung in die Grafik darunter. */
    .vgl-unter { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 24px;
      flex-wrap:wrap; margin-top:12px; }
    .vgl-unter .vgl-back-btn { padding:6px 12px; font-size:12px; }
    .vgl-luecke-rechts { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding-right:17px; }
    /* Offene Lücke unter der Tabelle: rechts bündig unter der Netto-Rente das Ergebnis (rot,
       grün sobald geschlossen), links daneben der Sprung in die Grafik. */
    .vgl-luecke-zeile { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
      gap:8px 18px; margin-top:12px; padding:0 17px; }
    .vgl-luecke-zeile .vgl-back-btn { padding:6px 12px; font-size:12px; }
    .vgl-luecke-zeile .vgl-rl-ergebnis { align-items:flex-end; text-align:right; }
    .vgl-rl-term { display:flex; flex-direction:column; gap:2px; min-width:0; }
    .vgl-rl-label { display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
      font-size:10px; font-weight:700; letter-spacing:.35px; text-transform:uppercase; color:var(--muted); }
    .vgl-rl-wert { font:600 14px 'DM Mono',monospace; color:var(--text); white-space:nowrap; }
    .vgl-rl-ergebnis .vgl-rl-label { color:#a3342b; }
    .vgl-rl-ergebnis .vgl-rl-wert { font-size:19px; font-weight:700; color:var(--red,#c0392b); }
    .vgl-luecke-zeile.ok .vgl-rl-ergebnis .vgl-rl-label,
    .vgl-luecke-zeile.ok .vgl-rl-ergebnis .vgl-rl-wert { color:#1a7a45; }
    @media (max-width:700px) {
      .vgl-luecke-rechts { padding-right:0; }
      .vgl-luecke-zeile { padding:0; }
    }
    .vgl-leer-hint { font-size:12px; color:var(--muted); margin-top:12px; }
    /* Manuelle Ablaufwerte je Produkt – Box erscheint, wenn im Produkt-Dropdown „manuell" gewählt ist. */
    .foerder-manuell { margin-top:8px; border:1px solid var(--border); border-radius:var(--radius-sm);
      padding:8px 10px; background:var(--bg,#f7f9fb); }
    .foerder-manuell .man-head { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
      color:var(--muted); text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px; }
    .foerder-manuell .man-fields { display:flex; flex-direction:column; gap:8px; }
    .foerder-manuell .man-f { display:flex; flex-direction:column; gap:3px; }
    .foerder-manuell .man-f label { font-size:10.5px; font-weight:600; color:var(--muted); line-height:1.2; }
    .foerder-manuell .man-f input { width:100%; padding:5px 7px; font-size:13px; font-family:'DM Mono',monospace;
      border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
    .foerder-manuell .man-f input:focus { outline:none; border-color:var(--accent2); }
    /* Gesellschaft / Tarif des manuellen Angebots (02.10.2026): Text, linksbündig, normale Schrift. */
    .foerder-manuell .man-f.man-text input, .fr-card .foerder-manuell .man-f.man-text input { text-align:left; font-family:inherit; }
    /* Eigene Werte direkt im Produkt-Abschnitt (2–4): klappt als volle Zeile unter den
       Eingabefeldern auf, drei Felder nebeneinander. */
    .sec-manuell { grid-column:1 / -1; margin-top:0; }
    .sec-manuell .man-fields { flex-direction:row; flex-wrap:wrap; gap:8px 12px; }
    .sec-manuell .man-f { flex:0 1 170px; min-width:120px; }
    .sec-manuell .man-f label { min-height:24px; }
    .sec-manuell .man-f label small { display:block; font-size:9px; font-weight:500; color:#9aa7b5; }
    .sec-manuell .man-f input { text-align:right; }
    .sec-manuell .hint { margin-top:6px; font-size:10px; line-height:1.35; color:#8a6a2a; }
    .vgl-head { display:flex; justify-content:flex-end; margin-bottom:10px; }
    /* Kleines „i" in der Lücken-Rechnung (Herleitung der Mehrsteuer). */
    .vgl-luecke-i { width:15px; height:15px; flex:0 0 15px; padding:0; border-radius:50%; cursor:pointer;
      border:1px solid #c9d2dc; background:#fff; color:var(--accent2); font:700 9px/1 'DM Sans',sans-serif;
      text-transform:none; display:inline-flex; align-items:center; justify-content:center; }
    .vgl-luecke-i:hover { border-color:var(--accent2); }
    .vgl-luecke-i:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
    /* Riester in der Vergleichstabelle: Förderung klein aufgeteilt, Kinder-Regler unter dem Tarif. */
    .vgl-auf { display:grid; gap:1px; margin-top:4px; justify-items:end; }
    .vgl-auf-z { font:400 10px/1.3 'DM Sans',sans-serif; color:var(--muted); white-space:nowrap; text-align:right; }
    .vgl-auf-z b { font-weight:600; color:#4b5a6a; }
    .vgl-foerderung-rente { font-family:'DM Sans',sans-serif; font-size:12px; }
    .rk { display:grid; gap:4px; margin-top:7px; }
    /* Beschriftung darf bei schmaler Spalte umbrechen („Kinder" über „vor 2008"), sonst würde
       die Kinder-Zeile die Tabelle breiter machen als ihren Rahmen. */
    .rk-zeile { display:flex; align-items:center; justify-content:space-between; gap:8px; max-width:160px;
      font:400 10.5px/1.2 'DM Sans',sans-serif; color:var(--muted); }
    .rk-step { display:inline-flex; align-items:center; flex:none; height:20px; border:1px solid #d5dde6; border-radius:999px; background:#fff; }
    .rk-step button { width:20px; height:18px; padding:0; border:0; border-radius:999px; background:transparent; cursor:pointer;
      color:var(--accent2); font:700 12px/1 'DM Sans',sans-serif; }
    .rk-step button:hover:not(:disabled) { background:#eef3f6; }
    .rk-step button:disabled { color:#c3ccd5; cursor:default; }
    .rk-step button:focus-visible { outline:2px solid var(--accent2); outline-offset:1px; }
    .rk-step b { min-width:14px; text-align:center; font:700 11px 'DM Mono',monospace; color:var(--text); }
    /* Vergleichstabelle: nur ein Chip, der das Kinder-Fenster öffnet. Die Regler selbst stehen
       im Fenster und in der Titelzeile von Abschnitt 3 – so bleiben die drei Produktzeilen
       gleich hoch und der Blick kann die Netto-Rente-Spalte hinunterlaufen. */
    .vgl-kinder-btn { display:inline-flex; align-items:center; margin-top:6px; padding:2px 9px;
      border:1px solid #d5dde6; border-radius:999px; background:#fff; cursor:pointer;
      font:600 10.5px/1.5 'DM Sans',sans-serif; color:var(--muted); white-space:nowrap; }
    .vgl-kinder-btn:hover { background:#f2f6f9; border-color:#c2cdd8; color:var(--text); }
    .vgl-kinder-btn:focus-visible { outline:2px solid var(--accent2); outline-offset:1px; }
    .vgl-kinder-btn.on { border-color:#b7d8c6; background:#eef8f2; color:#1a7a45; }
    /* Kinder-Fenster: dieselben Regler, nur luftiger als in der Titelzeile. */
    .rk-modal { gap:8px; margin-top:0; }
    .rk-modal .rk-zeile { max-width:280px; font-size:13px; font-weight:600; color:var(--text); }
    .rk-modal .rk-step { height:26px; }
    .rk-modal .rk-step button { width:26px; height:24px; font-size:15px; }
    .rk-modal .rk-step b { min-width:20px; font-size:13px; }
    /* Geburtsjahr je Kind (Kinder-Fenster), leiser Link in der Titelzeile, Herkunftsmarke aus dem Beratungskonzept. */
    .rk-jahre { margin-top:14px; display:grid; gap:6px; max-width:420px; }
    .rk-jahre-kopf { font:600 12.5px/1.3 'DM Sans',sans-serif; color:var(--text); }
    .rk-jahre-kopf small { font-weight:400; color:var(--muted); }
    .rk-jahr { display:grid; grid-template-columns:52px 104px 1fr; align-items:center; gap:8px;
      font:400 12px/1.3 'DM Sans',sans-serif; color:var(--muted); }
    .rk-jahr input { box-sizing:border-box; width:100%; height:28px; padding:0 8px; border:1px solid #d5dde6; border-radius:6px;
      background:#fff; font:500 13px 'DM Mono',monospace; color:var(--text); }
    .rk-jahr input:focus-visible { outline:2px solid var(--accent2); outline-offset:1px; }
    .rk-link { padding:0; border:0; background:none; cursor:pointer; font:600 11.5px/1.2 'DM Sans',sans-serif;
      color:var(--accent2); text-decoration:underline; text-underline-offset:2px; }
    .rk-bk, .vgl-kinder-bk { margin-top:3px; font:400 11px/1.3 'DM Sans',sans-serif; color:var(--green); opacity:.85; }
    /* Abschnitt 3: dieselben Regler nebeneinander rechts in der Titelzeile. */
    .riester-titel { flex-wrap:wrap; row-gap:6px; }
    .riester-kinder-slot { margin-left:auto; }
    .rk-sec { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:0; }
    .rk-sec .rk-zeile { max-width:none; font-size:11.5px; font-weight:600; }
    /* Disclaimer/Hinweise im Förderrechner kompakt halten – wie in den übrigen Tabs (11px, muted). */
    #tab-foerder .hint.mt-12 { font-size:11px; color:var(--muted); line-height:1.5; }
    @media (max-width:560px) {
      .loesung-chart { gap:16px; }
      .loesung-legend { width:100%; margin:10px 0 0; flex-direction:row; flex-wrap:wrap; }
    }

    /* Förderrechner: abgesetzte Abschnitts-Karten zur besseren Gliederung */
    /* scroll-margin-top: der Header ist sticky (56px). Ohne den Ausgleich schiebt
       scrollIntoView() die Abschnitts-Überschrift darunter und sie ist nicht lesbar. */
    .sec-foerder { position:relative; background:#fff; border:1px solid var(--border); border-left:4px solid var(--muted); border-radius:var(--radius-sm); padding:14px 16px 16px; margin-top:16px; scroll-margin-top:calc(var(--header-h) + 14px); }
    .sec-foerder > .sec-title { font-size:15px; }
    /* Einleitungszeile eines Förder-Abschnitts: ersetzt die früheren formula-note/info-box-Blöcke. */
    .foerder-lead { font-size:12px; color:var(--muted); line-height:1.5; }
    /* Dropdown im Parameter-Chip (Rentenfaktor) – optisch wie die Zahlenfelder daneben. */
    .vers-stat-edit select {
      height:auto !important; border:none !important; border-bottom:1.5px solid #ccd6e1 !important;
      border-radius:0 !important; background:transparent !important; padding:2px 0 4px !important;
      font-family:inherit; font-size:14px !important; font-weight:700; color:var(--text);
      flex:1; min-width:0; }
    .vers-stat-edit select:focus { outline:none; border-bottom-color:var(--accent) !important; }
    /* Aufklappbare Rechendetails unter der Vergleichstabelle. Ersetzt die vier
       dauerhaft sichtbaren Hinweisblöcke – sichtbar bleibt nur die Kurzzeile. */
    .foerder-details-box { border-left:3px solid var(--border); padding:2px 0 2px 12px; margin-top:2px; }
    .foerder-details-box .hint { display:block; font-size:11px; color:var(--muted); line-height:1.55; margin-top:8px; }
    .foerder-details-box .hint:first-child { margin-top:0; }
    .sec-step { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent2); color:#fff; font:800 12px/1 'DM Sans',sans-serif; flex:0 0 22px; }
    .sec-opt     { border-left-color:#6b7a8d; background:#fafbfc; }
    .sec-basis   { border-left-color:#3a9e7a; background:#f3faf6; }
    .sec-basis   .sec-step { background:#3a9e7a; }
    .sec-riester { border-left-color:#8b6db5; background:#f8f5fc; }
    .sec-riester .sec-step { background:#8b6db5; }
    .sec-flex    { border-left-color:#d07a45; background:#fdf6f1; }
    .sec-flex    .sec-step { background:#d07a45; }

    /* Modus-Auswahl (Radiogruppe, z. B. Riester-Eigenbeitrag) */
    .radio-row { display:flex; flex-direction:column; gap:7px; margin-top:5px; }
    .radio-row label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; color:var(--text); cursor:pointer; }
    .radio-row input[type=radio] { width:16px; height:16px; accent-color:var(--accent2); cursor:pointer; flex:0 0 auto; }
    .field input:disabled { background:#f1f3f5; color:var(--muted); cursor:not-allowed; }
    @media (min-width:680px) { .radio-row { flex-direction:row; flex-wrap:wrap; gap:8px 20px; } }

    /* Förder-Tabelle (Basis & Riester) im Kundenkonzept-Stil */
    .foerder-foerdertbl { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
    .foerder-foerdertbl th { text-align:left; font-size:11px; font-weight:700; color:var(--accent2); padding:8px 10px; border-bottom:2px solid var(--accent2); }
    .foerder-foerdertbl td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text); }
    .foerder-foerdertbl .ff-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .foerder-foerdertbl .ff-used { background:var(--accent-light); font-weight:600; }
    .foerder-foerdertbl .ff-owner-row td { font-weight:800; background:#fff; }
    .foerder-foerdertbl tr:last-child td, .foerder-foerdertbl .ff-strong td { font-weight:800; }
    .foerder-foerdertbl .ff-strong td { border-top:2px solid var(--accent2); border-bottom:none; }
    .ff-foot { font-size:11px; font-style:italic; color:var(--muted); margin-top:6px; }
    .ffc-title { font-size:14px; font-weight:700; color:var(--accent2); margin-bottom:8px; padding-left:10px; border-left:4px solid var(--accent); }

    /* Förder-Balkendiagramm (Fördersituation nach Umsetzung) */
    .foerder-foerderchart { border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; padding:16px 14px 14px; }
    .ffc-head { text-align:center; font-weight:800; color:var(--text); margin-bottom:10px; }
    .ffc-bars { position:relative; display:flex; align-items:flex-end; justify-content:center; gap:26px; height:240px; padding-top:34px; }
    .ffc-year { position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:12px; font-weight:700; color:var(--accent2); border:1px solid var(--border); border-radius:6px; padding:3px 18px; background:#fff; }
    .ffc-bar { width:120px; height:200px; display:flex; flex-direction:column; border-radius:4px 4px 0 0; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.10); }
    .ffc-seg { display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.25; padding:2px 4px; box-sizing:border-box; overflow:hidden; }
    .ffc-seg span { display:block; }
    .ffc-seg-tax { background:#dbe2ea; color:var(--accent2); font-size:13px; font-weight:700; }
    .ffc-seg-eff { background:var(--accent2); color:#fff; font-size:13px; font-weight:700; }
    .ffc-total { align-self:center; text-align:center; min-width:120px; }
    .ffc-total-label { font-size:12px; color:var(--muted); }
    .ffc-total-val { font-size:22px; font-weight:800; color:var(--text); margin-top:2px; }
    .ffc-total-sub { font-size:12px; color:var(--muted); }
    .ffc-quote { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); text-align:center; font-size:13px; color:var(--text); }
    .ffc-quote .ffc-arrow { color:var(--accent); font-weight:700; margin:0 6px; }
    .ffc-savings { margin-top:10px; padding:10px 14px; background:var(--green-light,#d9f2e6); border-left:4px solid var(--green,#1a7a45); border-radius:0 8px 8px 0; font-size:13px; color:var(--text); }
    /* ── Beitrags-Leistungsvergleich Basis & Flex – Aufbau wie die bAV-Grafik ──
       Säulenhöhe in % der Spur. Beschriftung je nach Säulenhöhe voll, nur Betrag oder darüber. */
    .frv.vers-outer { margin-top:14px; padding:16px 20px 14px; }
    .frv-kopf { display:flex; justify-content:center; }
    .frv-seg { display:inline-grid; grid-template-columns:auto auto; }
    .frv-seg button { padding:6px 16px; font-size:12px; }
    .frv-titel { margin:12px 0 16px; font-size:19px; }
    .frv-saeule { position:relative; width:100%; display:flex; flex-direction:column; transition:height .4s cubic-bezier(.4,0,.2,1); }
    .frv-saeule > .vers-bar { flex:1 1 0; min-height:0; }
    .frv-saeule > .frv-top ~ .vers-bar { border-radius:0; }
    /* Segmente über der Säule (Farbe je Segment inline); nur das oberste bekommt die Rundung. */
    .frv-top { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; overflow:hidden;
      margin-bottom:2px; padding:0 4px; border-radius:0; text-align:center; line-height:1.15; }
    .frv-aussen-label + .frv-top { border-radius:4px 4px 0 0; }
    .frv-top-wert { font:700 13px 'DM Mono',monospace; }
    .frv-top-txt { margin-top:1px; font-size:10px; font-weight:600; }
    .frv-top.eng .frv-top-txt { display:none; }
    .frv-top.leer > span { display:none; }
    .frv-bar .vers-bar-inner-label { padding:8px 6px; }
    .frv-bar .vers-bar-title, .frv-bar .vers-bar-value, .frv-bar .bav-contrib-bar-subline {
      max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; }
    /* Beträge immer einzeilig; zu lange verkleinert foerderVglLabelsAnpassen. */
    .frv-bar .vers-bar-value { font-size:18px; white-space:nowrap; overflow-wrap:normal; }
    .frv-kompakt .vers-bar-inner-label { padding:4px; }
    /* Leistungssäule mit Bruttowert: brutto klein direkt über dem Nettoblock, beide zusammen mittig.
       Der Nettowert bleibt einzeilig; zu lange Beträge verkleinert foerderVglLabelsAnpassen. */
    .frv-brutto { display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:10px; }
    .frv-brutto-lbl { font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.7); }
    .frv-brutto-wert { font:700 12px 'DM Mono',monospace; color:rgba(255,255,255,.85); white-space:nowrap; }
    .frv-netto { width:100%; display:flex; flex-direction:column; align-items:center; }
    .frv-kompakt .vers-bar-title, .frv-kompakt .bav-contrib-bar-subline, .frv-kompakt .frv-brutto { display:none; }
    .frv-kompakt .vers-bar-value { font-size:15px; }
    .frv-aussen .vers-bar-inner-label { display:none; }
    .frv-aussen-label { display:none; position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
      white-space:nowrap; font:700 14px 'DM Mono',monospace; color:var(--text); }
    .frv-aussen .frv-aussen-label { display:block; }
    .frv-i { width:16px; height:16px; flex:0 0 16px; margin-left:5px; padding:0; border-radius:50%; cursor:pointer;
      border:1px solid #c9d2dc; background:#fff; color:var(--accent2); font:700 9px/1 'DM Sans',sans-serif;
      display:inline-flex; align-items:center; justify-content:center; }
    .frv-i:hover { border-color:var(--accent2); }
    .frv-i:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
    .frv .vers-col-topnote { align-items:center; }
    /* Hinweis unter der Beitrags-Säule bei Beitragsdynamik (Anfangsbeitrag, letzter Beitrag). */
    .frv-dyn { display:block; margin-top:5px; font-weight:600; color:#9a6300; }
    /* Einmalbetrag (Riester-Teilkapital) groß über den Säulen. */
    .frv-extra { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 36px; max-width:520px; margin:-6px auto 18px;
      padding:10px 18px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); }
    .frv-extra > div { display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.2; }
    .frv-extra-label { font-size:10px; font-weight:700; letter-spacing:.35px; text-transform:uppercase; color:var(--muted); }
    .frv-extra-wert { margin-top:3px; font:700 24px 'DM Mono',monospace; color:var(--accent2); }
    .frv-extra-netto { color:var(--green,#1a7a45); }
    .frv-extra-sub { margin-top:2px; font-size:10.5px; color:var(--muted); }
    /* Riester: aufklappbare Förderkurve unter dem Beitrags-Leistungsvergleich. */
    .riester-kurve-btn { margin-top:10px; }
    .rkv { margin-top:8px; padding:14px 16px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
    .rkv-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-bottom:6px; }
    .rkv-titel { font-size:13px; font-weight:700; color:var(--text); }
    .rkv-legende { display:flex; gap:14px; font-size:11.5px; color:var(--muted); }
    .rkv-legende i { display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:2px; vertical-align:-1px; }
    .rkv-chart { position:relative; }
    .rkv-chart svg { display:block; width:100%; height:auto; overflow:visible; }
    .rkv-chart text { font-family:'DM Sans',sans-serif; }
    .rkv-tip { position:absolute; transform:translateX(-50%); pointer-events:none; min-width:190px; padding:7px 10px;
      background:#fff; border:1px solid #d5dde6; border-radius:8px; box-shadow:0 4px 14px rgba(15,37,64,.14);
      font-size:11.5px; line-height:1.5; color:var(--text); }
    .rkv-tip[hidden] { display:none; }
    .rkv-tip div { display:flex; justify-content:space-between; gap:12px; }
    .rkv-tip b { font-family:'DM Mono',monospace; font-weight:600; }
    .rkv-tip i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:2px; }
    .rkv-tip .rkv-tip-sum { margin-top:2px; padding-top:2px; border-top:1px solid #edf1f4; font-weight:700; }
    @media (max-width:560px) {
      .ffc-bars { gap:14px; height:auto; flex-wrap:wrap; }
      .ffc-bar { width:90px; }
      .ffc-total { width:100%; margin-top:10px; }
    }


    /* Leiste „Aus dem Beratungskonzept" (17-uebergabe-beratungskonzept.js, seit 30.09.2026):
       klebt unter der Kopfzeile, damit der Rücksprung von jedem Tab aus erreichbar ist. */
    .bk-leiste {
      position:sticky; top:var(--header-h); z-index:99;
      display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
      padding:8px 24px; background:var(--accent2-light); border-bottom:1px solid var(--border);
      font-size:13px; color:var(--text);
    }
    .bk-leiste-text em { font-style:normal; color:var(--red); font-weight:600; }
    .bk-leiste-offen { color:#8a6a2a; }
    /* Marken an den Feldern (01.10.2026): übernommen / nicht übernommen, bewusst leise. Eigene Klasse,
       weil .hint ohne „Eingabehinweise" ausgeblendet ist. */
    .field .bk-marke { display:block; margin-top:3px; font-size:11px; line-height:1.3; }
    .field .bk-ok { color:var(--green); opacity:.85; }
    .field .bk-offen { color:#8a6a2a; }
    .field.bk-frisch :is(input, select) { animation: bk-puls 1s ease-in-out 3; }
    @keyframes bk-puls {
      0%, 100% { box-shadow:0 0 0 0 rgba(30,90,138,0); }
      50% { box-shadow:0 0 0 4px rgba(30,90,138,.22); }
    }
    @media (prefers-reduced-motion: reduce) {
      .field.bk-frisch :is(input, select) { animation:none; box-shadow:0 0 0 3px rgba(30,90,138,.15); }
    }
    .bk-leiste-btn { white-space:nowrap; padding:7px 14px; }
    @media (max-width: 700px) { .bk-leiste { padding:8px 10px; } }
    /* Vorschau-Modus (Issue #6): dezentes Band unter dem Kopf, nur wenn die Vorschau aktiv ist */
    .vorschau-band { background:#fff8dc; color:#6b5a1e; border-bottom:1px solid #eadfae; font-size:11.5px; line-height:1.4; padding:3px 24px; text-align:center; }
    .vorschau-band a { color:#6b5a1e; text-decoration:underline; cursor:pointer; font-weight:600; }
    @media print { .vorschau-band { display:none; } }

/* PKV im Ruhestand: Teile des Beitrags, die im Alter wegfallen (Vorschau, Issues #16/#17/#20) */
.pkv-alter-felder { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 8px; margin-top:8px; }
.pkv-alter-felder[hidden] { display:none; }
.pkv-alter-feld label { font-size:11px; text-transform:none; letter-spacing:0; margin-bottom:2px; }
.pkv-alter-feld input, .pkv-alter-feld select { width:100%; }
.pkv-alter-hint { grid-column:1 / -1; }