/* ============================================================
   ortsvergleich.css — Ortsvergleich (/tools/verguetung/, /tools/compensation/)
   Nur auf dieser Seite geladen (Muster admin-analyse.css). In de/ und en/
   byte-identisch.

   Zeichnung: docs/ortsvergleich/entwurf-v6.html, CSS Z. 45–511, übernommen
   ohne Entwurfs-Leiste, Site-Kopf, Fuß und eigenes :root. Alle Klassen tragen
   das Präfix `ov-` (32 Entwurfsklassen gibt es schon in styles.css);
   ausgenommen .btn*, .wrap, .sr-only, .arrow aus styles.css. Tokens aus
   styles.css, Namen nach HANDOFF Abschnitt 3 (--font-display → --v7-display,
   --l-mono → --mono, --r-card → --s2-r-card). Neue Tokens nur hier in :root.
   Schriften selbst gehostet (@font-face in styles.css), kein Dark Mode.

   Stand Lauf B3: Satz, Ortswahl, Antwort, Monatskarte, Rechtshinweis,
   Tooltip, Marktposition, Rechnung, Rangliste, Grenzen, Quellen, Sperre A
   (B3: Sperr-Abschnitt, grüne Leiste, Leiste unten, Meldung, Sperr-Leisten,
   Skelett der Rangliste).
   ============================================================ */
:root{
  /* Monatskarte: Segmente eines Monats */
  --ov-steuer:#3b4856;--ov-sozial:#7d8a97;--ov-kv:#b9c3cc;--ov-leben:#c99a3e;--ov-frei:#1d5aa0;
  /* Fünfstufige Skala im dunklen Band, deutlich weniger … deutlich mehr */
  --ov-ord-n2:#c9867c;--ov-ord-n1:#e4bdb6;--ov-ord-0:#b8c2cc;--ov-ord-p1:#9cc3ec;--ov-ord-p2:#5d97d6;
  /* Betrag im dunklen Band: mehr / weniger */
  --ov-pos-on-navy:#a9d8bd;--ov-neg-on-navy:#f1b4ab;
}

/* ---------- Seite ----------
   Der Seitenkopf (Rücklink, Kette) steht in .wrap.subpage wie auf den übrigen
   Tool-Seiten; die Abschnitte des Werkzeugs laufen über die volle Breite und
   bringen ihre eigene .wrap mit. .ov setzt die Schrift der Ergebnisseite v7
   und nimmt die Abstände aus .subpage aus dem Werkzeug heraus. */
.ov{font-family:var(--v7-text);letter-spacing:var(--v7-text-track);color:var(--ink);line-height:1.6}
.ov-kopf.subpage{min-height:0;padding-bottom:0}
.ov-kopf .kette{margin-bottom:0}
.ov :where(h1,h2,h3){font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);color:var(--navy);line-height:1.12;text-wrap:balance;margin:0}
.ov :where(p,ol,ul,dl,dd,figure){margin:0;padding:0}
/* Das Anmeldeformular im Sperr-Abschnitt (anmelden.js, .acc-*) behält die Gestalt der Konto-Seite */
.ov :where(button,input,select):where(:not(.acc-auth *)):where(:not(.btn)){font:inherit;color:inherit;letter-spacing:inherit}
/* Knöpfe .btn: Farbe und Fläche aus styles.css, Schrift der Seite (Design-Abnahme 2) */
.ov .btn{font-family:var(--v7-text);font-size:15.5px;font-weight:600;letter-spacing:var(--v7-text-track)}
.ov :where(button:not(.btn)):where(:not(.acc-auth *)){background:none;border:0;cursor:pointer}
.ov :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.ov [hidden]{display:none!important}
.ov-tnum{font-variant-numeric:tabular-nums lining-nums}
.ov-lade{padding-block:48px;color:var(--slate)}

.ov-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1.4;border-radius:20px;padding:3px 10px;white-space:nowrap}
.ov-chip-dash{border:1px dashed var(--slate-3);color:var(--slate);font-weight:500}
.ov-chip-free{background:var(--green-soft);color:var(--green)}
.ov-chip-soft{background:var(--bg-soft-2);color:var(--slate)}
.ov-chip-plan{border:1px dashed var(--line-strong);color:var(--slate-2);font-weight:500}
.ov-note{font-size:13.5px;color:var(--slate);line-height:1.5}
.ov-linkbtn{color:var(--accent);font-weight:600;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ov-linkbtn:hover{color:var(--accent-deep)}

/* ---------- 1 · Frage und Satz-Formular ---------- */
.ov-ask{position:relative;background:var(--bg);padding-block:44px 56px}
.ov-ask::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:repeating-radial-gradient(circle at 88% 12%,transparent 0 34px,var(--contour) 34px 35px);-webkit-mask-image:radial-gradient(ellipse 50% 70% at 88% 8%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 50% 70% at 88% 8%,#000 0%,transparent 72%)}
.ov-ask .wrap{position:relative;display:grid;gap:26px}
.ov-ask-head{display:grid;gap:12px;max-width:62ch}
.ov-ask-head h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.3rem);line-height:1.05;letter-spacing:-.022em}
.ov-ask-head p{font-size:17.5px;color:var(--slate);line-height:1.55}

.ov-satz{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:30px 34px 26px;display:grid;gap:22px}
.ov-satz-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.ov-satz-top .ov-t{font-size:13px;font-weight:600;color:var(--slate);letter-spacing:.02em}
.ov-satz-text{font-family:var(--v7-display);font-size:clamp(1.45rem,1.05rem + 1.5vw,2.15rem);line-height:1.7;color:var(--navy);letter-spacing:-.012em;font-weight:450}
/* Satzfelder (v8): gefüllt, mit Unterkante in Akzentfarbe, damit sofort klar ist, wo etwas einzutragen ist */
.ov-fld{position:relative;display:inline-flex;align-items:baseline;gap:4px;line-height:1.3;background:var(--accent-soft);border-bottom:2px solid var(--accent);border-radius:10px 10px 3px 3px;padding:.05em .3em 0;transition:background-color .2s,box-shadow .2s;white-space:nowrap;cursor:text}
.ov-fld:hover{background:var(--accent-soft-2)}
.ov-fld:focus-within{background:var(--bg);box-shadow:0 0 0 3px var(--accent-soft-2)}
.ov-fld-ed{flex:none;align-self:center;width:.5em;height:.5em;margin-left:.1em;color:var(--accent)}
.ov-fld input{border:0;background:transparent;outline:0;font:inherit;color:var(--accent-deep);font-weight:560;padding:0;min-width:0;font-variant-numeric:tabular-nums lining-nums}
.ov-fld input::placeholder{color:var(--slate-3);font-weight:450}
.ov-fld-num input{width:5.2ch;text-align:right}
.ov-measure{position:absolute;visibility:hidden;white-space:pre;left:-9999px;top:0}
.ov-fld-cur{font-family:var(--v7-text);font-size:.55em;font-weight:600;color:var(--slate-2);letter-spacing:.02em;align-self:center}
.ov-cb{position:relative;display:inline-flex;align-items:baseline}
.ov-cb .ov-fld{cursor:pointer}
.ov-cb .ov-fld svg{position:absolute;right:.3em;top:50%;transform:translateY(-40%);color:var(--accent);pointer-events:none}
.ov-cb-btn{border:0;background:transparent;font:inherit;color:var(--accent-deep);font-weight:560;padding:0 26px 0 0;margin:0;cursor:pointer;white-space:nowrap;letter-spacing:inherit;text-align:left;line-height:inherit}
.ov-cb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
/* Ortswahl: Suchfeld zuerst, darunter Vorschläge und Länder. Auf dem Handy als Vollbild. */
.ov-pk{position:absolute;z-index:60;left:0;top:calc(100% + 10px);width:min(440px,calc(100vw - 32px));max-height:min(500px,72vh);display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-lg);font-family:var(--v7-text);font-size:15px;line-height:1.35;letter-spacing:0;color:var(--graphite);white-space:normal;font-weight:400}
.ov-pk[hidden]{display:none}
.ov-pk-head{display:none}
.ov-pk-s{display:flex;align-items:center;gap:10px;margin:12px 12px 4px;padding:0 10px 0 12px;border:1px solid var(--line-strong);border-radius:10px;min-height:46px;background:var(--bg);transition:border-color .2s,box-shadow .2s}
.ov-pk-s:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ov-pk-s svg{flex:none;color:var(--slate-2)}
.ov-pk-s input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--navy)}
.ov-pk-s input::placeholder{color:var(--slate-3)}
.ov-pk-clr{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:var(--bg-soft-2);color:var(--slate);cursor:pointer}
.ov-pk-b{flex:1;min-height:0;overflow:auto;padding:4px 8px 10px;overscroll-behavior:contain}
.ov-pk-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);padding:12px 6px 6px}
.ov-pk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 2px}
.ov-pk .ov-o-chip{border:1px solid var(--line-strong);border-radius:20px;padding:5px 12px;font-size:14px;font-weight:500;cursor:pointer;background:var(--bg);color:var(--graphite)}
.ov-pk-lands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 6px}
.ov-pk .ov-o-land{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;min-width:0}
.ov-pk .ov-o-land i{font-style:normal;font-size:12.5px;color:var(--slate-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ov-pk .ov-o-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:8px 10px;border-radius:8px;cursor:pointer}
.ov-pk .ov-o-row small{grid-column:1;font-size:12.5px;color:var(--slate-2);line-height:1.4}
.ov-pk .ov-o-row i{grid-row:1/span 2;grid-column:2;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--slate-2);align-self:center}
.ov-pk .ov-o-row u{text-decoration:none;font-weight:700;color:var(--navy)}
.ov-pk .ov-o-back{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
.ov-pk [role=option]:hover{background:var(--bg-soft)}
.ov-pk .ov-o-chip[aria-selected=true]{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent-deep)}
.ov-pk .ov-o-row[aria-selected=true]{background:var(--accent-soft);color:var(--accent-deep)}
.ov-pk [role=option].ov-act{outline:2px solid var(--accent);outline-offset:-2px}
.ov-pk-hint{margin:6px 4px 4px;padding:10px 12px;border-radius:10px;background:var(--bg-soft);font-size:13.5px;line-height:1.45;color:var(--slate)}
.ov-pk-hint b{color:var(--graphite)}
.ov-pk-empty{padding:12px 8px 2px;font-size:14px;line-height:1.45;color:var(--slate)}
.ov-pk-f{margin:0;border-top:1px solid var(--line-2);padding:10px 16px 12px;font-size:12.5px;line-height:1.45;color:var(--slate-2)}
@media(max-width:640px){
  .ov-pk{position:fixed;inset:0;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;z-index:200}
  .ov-pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 2px 18px}
  .ov-pk-head b{font-family:var(--v7-display);font-size:21px;line-height:1.25;color:var(--navy);font-weight:600}
  .ov-pk-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--slate);cursor:pointer}
  .ov-pk-s{margin:8px 16px 4px}
  .ov-pk-b{padding:4px 12px 20px}
  html.ov-pk-open,html.ov-pk-open body{overflow:hidden}
}
.ov-sub{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--v7-text);font-size:15px;color:var(--slate);vertical-align:middle;margin-left:6px}
.ov-sub select{border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);padding:4px 8px;font-size:15px;color:var(--accent-deep);font-weight:600;max-width:220px}

/* Hinweis unter dem Satz, nur für Orte, deren Name nicht sagt, womit gerechnet wird */
.ov-conf{font-size:13.5px;line-height:1.5;color:var(--slate);margin-top:-6px;max-width:80ch}
.ov-conf b{color:var(--graphite);font-weight:600}
.ov-chip-acc{background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-soft-2);font-weight:500}

/* Szenario-Analyse Gehalt (v8.7, Pro): weiße Fläche, Pro-Grün nur kräftig als Leiste, Kennzeichen und Symbolfeld,
   keine Pastellflächen. Eine Tabelle: Zeilen Grundgehalt, Bonus, Anteile; Spalten Heute und Angebot. */
.ov-pro{position:relative;display:grid;gap:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);padding:18px 20px 8px}
.ov-pro::before{content:"";position:absolute;left:16px;right:16px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--pro-sig-vivid)}
.ov-pro .fein-pro{background:var(--pro-sig);border-color:var(--pro-sig);color:var(--on-navy);letter-spacing:.02em}
.ov-pro-k{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
.ov-pro-t{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;line-height:1.4;color:var(--graphite)}
.ov-pro-k .ov-linkbtn{font-size:14px;color:var(--pro-sig);min-height:44px;display:inline-flex;align-items:center;gap:6px;margin-block:-10px}
.ov-pro-k .ov-linkbtn:hover{color:var(--navy)}
.ov-pro-d{font-size:13.5px;line-height:1.5;color:var(--slate);max-width:72ch;margin-top:-4px}
.ov-gz{display:grid;min-width:0}
.ov-gz-r{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:10px 16px;align-items:center;padding:12px 0}
.ov-gz-r+.ov-gz-r{border-top:1px solid var(--line-2)}
.ov-gz-h{padding:4px 0 10px;align-items:end}
.ov-gz-h+.ov-gz-r{border-top-color:var(--line)}
.ov-gz-sp{display:grid;gap:1px;min-width:0;padding-left:2px}
.ov-gz-sp:nth-child(2){grid-column:2}
.ov-gz-k{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2)}
.ov-gz-ang .ov-gz-k{color:var(--pro-sig)}
.ov-gz-sp b{font-size:14.5px;font-weight:600;color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-gz-p{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.ov-gz-tw{display:grid;gap:1px;min-width:0}
.ov-gz-t{font-size:15px;font-weight:600;line-height:1.35;color:var(--graphite)}
.ov-gz-was{font-size:12.5px;line-height:1.4;color:var(--slate)}
.ov-gz-z{min-width:0}
.ov-gz .ov-in{min-height:44px;padding:0 10px}
/* Bonus und Anteile laut Angebot ohne Grundgehalt laut Angebot: leiser, mit dem Marktwert als Platzhalter */
.ov-gz-aus .ov-in{background:var(--bg-soft);border-style:dashed}
.ov-gz-aus input{cursor:not-allowed}
.ov-gz-aus .ov-seg2{opacity:.45;pointer-events:none}
.ov-gz .ov-in input:focus-visible{outline:none}   /* der Ring liegt am Feld (.ov-in:focus-within) */
/* Symbole: weiß auf Pro-Dunkel, Flächen halbtransparent. Die Akzentlinie zeichnet sich beim Laden und beim
   Darüberfahren (pathLength 1, Technik wie bei motion.dev, ohne Bibliothek). */
.ov-szk-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--pro-sig);color:var(--on-navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(13,27,46,.12);transition:background-color .2s,transform .2s var(--ease)}
.ov-szk-ic svg{width:24px;height:24px}
.ov-gz-r:hover .ov-szk-ic,.ov-gz-r:focus-within .ov-szk-ic{background:color-mix(in srgb,var(--pro-sig) 82%,black);transform:translateY(-1px)}
.ov-szk-ic .ov-ic-f{fill:currentColor;fill-opacity:.2}
.ov-szk-ic .ov-draw{stroke-dasharray:1;stroke-dashoffset:0}
.ov-zeichne .ov-draw{animation:ov-zeichne .9s var(--ease) both}
.ov-zeichne .ov-pop{animation:ov-pop .45s .6s var(--ease) both;transform-box:fill-box;transform-origin:center}
@keyframes ov-zeichne{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ov-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ov-zeichne .ov-draw,.ov-zeichne .ov-pop{animation:none}.ov-gz-r:hover .ov-szk-ic{transform:none}}
/* Ohne Pro: jedes Feld ist schraffiert wie eine gesperrte Fläche im Plan, mit Schloss und „mit Pro“, ohne
   Platzhalter, Währung und Umschalter. Ein Klick auf die Zeile führt zu Konto oder Pro. */
.ov-lock,.ov-zu-t{display:none}
.ov-pro-zu .ov-lock{display:block;flex:none;color:var(--slate)}
.ov-pro-zu .ov-zu-t{display:block;flex:none;font-size:12.5px;font-weight:600;color:var(--slate);background:var(--bg);border-radius:4px;padding:1px 6px;margin-left:-4px}
.ov-pro-zu .ov-gz-r:not(.ov-gz-h){cursor:pointer}
.ov-pro-zu .ov-gz-r:not(.ov-gz-h):hover .ov-in{border-color:var(--pro-sig-vivid)}
.ov-pro-zu .ov-mf .ov-in{background-color:var(--bg-soft-2);background-image:repeating-linear-gradient(135deg,var(--line-strong) 0 1px,transparent 1px 6px);border:1px solid var(--line-strong)}
.ov-pro-zu .ov-mf .ov-in:focus-within{border-color:var(--line-strong);box-shadow:none}
.ov-pro-zu .ov-mf input{cursor:pointer;caret-color:transparent}
.ov-pro-zu .ov-mf .ov-in>span:not(.ov-zu-t),.ov-pro-zu .ov-seg2{display:none}
@media(max-width:720px){
  .ov-pro{padding:14px 14px 6px}
  .ov-gz-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px}
  .ov-gz-p{grid-column:1/-1}
  .ov-gz-sp:nth-child(2){grid-column:1}
  .ov-gz-h{padding-bottom:6px}
  .ov-gz .ov-in{padding:0 8px;gap:6px}
  .ov-pro-zu .ov-zu-t{display:none}
  .ov-gz .ov-mf .ov-in .ov-seg2{margin-right:-4px}
  .ov-gz .ov-mf .ov-in .ov-seg2 button{min-width:30px;padding:0 6px}
}
.ov-mf{display:grid;gap:6px;min-width:0}
.ov-mf label{font-size:14px;font-weight:600;color:var(--graphite)}
.ov-mf .ov-in{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);padding:0 12px;min-height:46px;transition:border-color .2s}
.ov-mf .ov-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ov-mf input{border:0;outline:0;background:transparent;flex:1;width:0;min-width:0;font-size:16px;font-variant-numeric:lining-nums proportional-nums}
.ov-mf .ov-in span{font-size:13px;font-weight:600;color:var(--slate-2);white-space:nowrap}

.ov-prof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;border-top:1px solid var(--line-2);padding-top:16px}
.ov-prof .ov-k{font-size:13px;color:var(--slate);margin-right:2px}
.ov-prof .ov-pc{font-size:13.5px;font-weight:500;color:var(--graphite);background:var(--bg-soft-2);border-radius:20px;padding:3px 11px;line-height:1.5}
.ov-prof-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--bg-soft);border-radius:10px;padding:14px}
.ov-prof-panel label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--graphite);min-width:0}
.ov-prof-panel select{border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);padding:8px 10px;font-size:14.5px;font-weight:500;min-width:0;width:100%}
@media(max-width:860px){.ov-prof-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.ov-prof-panel{grid-template-columns:minmax(0,1fr)}}
.ov-satz-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
@media(max-width:640px){.ov-satz{padding:22px 18px 20px;border-radius:14px}}

/* ---------- 2 · Antwort (dunkles Band) ---------- */
.ov-res{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);padding-block:72px 80px}
.ov-res::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--navy-hair) 1px,transparent 1px),linear-gradient(90deg,var(--navy-hair) 1px,transparent 1px);background-size:48px 48px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 6% 12%,#000,transparent 70%);mask-image:radial-gradient(ellipse 55% 75% at 6% 12%,#000,transparent 70%)}
.ov-res-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:52px;align-items:start}
.ov-res-copy{display:grid;gap:18px;min-width:0}
.ov-res-kick{font-size:14.5px;font-weight:500;color:var(--on-navy-3)}
.ov-res-kick b{color:var(--on-navy-2);font-weight:600}
.ov-res-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.ov-res-val{font-family:var(--v7-display);font-weight:560;font-size:clamp(3.2rem,2.2rem + 4.2vw,5.6rem);line-height:1;letter-spacing:-.03em;color:var(--on-navy)}
.ov-res-val.ov-pos{color:var(--ov-pos-on-navy)}
.ov-res-val.ov-neg{color:var(--ov-neg-on-navy)}
.ov-res-unit{font-size:18px;font-weight:500;color:var(--on-navy-2)}
.ov-ordv{display:grid;gap:8px}
.ov-ordv ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ov-ordv li{display:grid;gap:7px;min-width:0}
.ov-ordv i{display:block;height:7px;border-radius:4px;background:var(--navy-hair-2);transition:background .3s,transform .3s var(--ease)}
.ov-ordv li span{font-size:12.5px;line-height:1.3;color:var(--on-navy-3)}
.ov-ordv li.ov-on span{color:var(--on-navy);font-weight:600}
.ov-ordv li.ov-on i{transform:scaleY(1.7)}
.ov-ordv li.ov-on[data-s="-2"] i{background:var(--ov-ord-n2)}.ov-ordv li.ov-on[data-s="-1"] i{background:var(--ov-ord-n1)}.ov-ordv li.ov-on[data-s="0"] i{background:var(--ov-ord-0)}.ov-ordv li.ov-on[data-s="1"] i{background:var(--ov-ord-p1)}.ov-ordv li.ov-on[data-s="2"] i{background:var(--ov-ord-p2)}
@media(max-width:520px){.ov-ordv li span{font-size:11px}}
.ov-res-satz{font-size:17.5px;line-height:1.55;color:var(--on-navy-2);max-width:52ch}
.ov-res-satz b{color:var(--on-navy);font-weight:600}
.ov-facts{list-style:none;display:grid;gap:0;border-top:1px solid var(--navy-hair)}
.ov-facts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--navy-hair);font-size:14.5px;color:var(--on-navy-3)}
.ov-facts li b{color:var(--on-navy);font-weight:600;text-align:right;font-variant-numeric:lining-nums}
.ov-facts li small{grid-column:1/-1;font-size:12.5px;color:var(--on-navy-3)}
.ov-warn{list-style:none;display:grid;gap:8px}
.ov-warn:empty{display:none}
.ov-warn li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--on-navy-2);background:rgba(255,255,255,.06);border:1px solid var(--navy-hair);border-radius:10px;padding:9px 12px}
.ov-warn li svg{flex:none;margin-top:2px;color:var(--sky)}
@media(max-width:980px){.ov-res-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
@media(max-width:640px){.ov-res{padding-block:52px 60px}}

/* Monatskarte */
.ov-bud{background:var(--bg);color:var(--ink);border-radius:16px;padding:24px 26px 22px;box-shadow:var(--shadow-deep);display:grid;gap:18px;min-width:0}
.ov-bud-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ov-bud-top h3{font-family:var(--v7-text);letter-spacing:0;font-size:15px;font-weight:600;color:var(--graphite)}
.ov-bud-top span{font-size:12.5px;color:var(--slate)}
/* Abrechnung (v8.9): ein Monat, beide Orte in einer Grafik. Hauptzeile: Rechenzeichen und Posten; darunter zwei
   Balken, Länge = Anteil am Brutto des jeweiligen Orts, am Ende der Anteil und leiser der Betrag. Hinter dem Balken
   dort der Unterschied zu heute in Prozentpunkten (beim Brutto als Betrag). Teilzeilen (Zweige der Sozialabgaben,
   Bereiche der Lebenshaltung): Anteile heute → dort, leiser die Beträge. Netto mit einfachem Strich, Zur freien
   Verfügung mit Doppelstrich darüber. */
.ov-bud{--ov-a:var(--slate-3);--ov-b:var(--accent);grid-template-columns:minmax(0,1fr)}
.ov-abr{display:grid;font-size:13.5px;line-height:1.35;min-width:0;font-variant-numeric:lining-nums proportional-nums}
.ov-abr-r{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:10px 0}
.ov-abr-r+.ov-abr-r{border-top:1px solid var(--line-2)}
.ov-abr-op{grid-column:1;grid-row:1;text-align:center;font-weight:600;color:var(--slate-2)}
.ov-abr-l{grid-column:2;grid-row:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-weight:600;color:var(--graphite)}
.ov-abr-les{font-size:12.5px;line-height:1.45;color:var(--slate);margin-top:-8px;max-width:64ch}
.ov-abr-s{grid-column:2;grid-row:3;font-size:12px;line-height:1.4;color:var(--slate);margin-top:6px;max-width:62ch}
.ov-abr-ba{--c:var(--ov-a)}
.ov-abr-bb{--c:var(--ov-b)}
/* Zwei Balken: die Breite ist ein Bruchteil der Spur ohne Platz für die Beschriftung, damit Betrag und Unterschied
   immer hinter das Balkenende passen. Beide Balken teilen die Skala, also auch die Reserve. */
.ov-abr-bars{grid-column:2;grid-row:2;display:grid;gap:4px;margin-top:8px;min-width:0}
.ov-abr-bar{--lab:12rem;display:flex;align-items:center;gap:8px;min-height:22px;min-width:0}
.ov-abr-bar i{flex:none;display:block;height:10px;width:calc((100% - var(--lab)) * var(--w));border-radius:2px;background:var(--c);transform-origin:left center}
.ov-abr-bar em{font-style:normal;display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;font-size:13px}
.ov-abr-bar em b{font-weight:600;color:var(--navy)}
.ov-abr-bar em small{font-size:12px;color:var(--slate-2)}
.ov-abr-bar.ov-null{gap:0}
.ov-abr-bar.ov-null i{display:none}
.ov-abr-bar.ov-null em{margin-right:8px}
.ov-abr-bar.ov-hatch i{background:repeating-linear-gradient(135deg,var(--c) 0 3px,var(--bg) 3px 6px);box-shadow:inset 0 0 0 1px var(--c)}
/* Unterschied dort gegenüber heute: eine Marke hinter dem Betrag dort, Euro kräftig, Prozent leiser */
.ov-abr-dl{display:inline-flex;align-items:baseline;gap:6px;font-style:normal;font-size:12px;line-height:1.3;color:var(--graphite);background:var(--bg-soft-2);border-radius:999px;padding:2px 9px;white-space:nowrap}
.ov-abr-dl b{font-weight:600}
.ov-abr-dl span{color:var(--slate)}
.ov-abr-dl.ov-pos{background:var(--green);color:var(--bg)}
.ov-abr-dl.ov-neg{background:var(--red);color:var(--bg)}
.ov-abr-dl.ov-pos span,.ov-abr-dl.ov-neg span{color:var(--bg);opacity:.85}
/* Kopf: Legende mit der Farbe der Balken und der Marke für den Unterschied */
.ov-abr-h{padding:0 0 10px;align-items:end;font-size:12px;font-weight:600;color:var(--slate)}
.ov-abr-leg{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;gap:4px 16px;min-width:0}
.ov-abr-leg>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.ov-abr-leg>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-abr-dot{flex:none;width:9px;height:9px;border-radius:2px;background:var(--c)}
#abrBody .ov-abr-r:first-child{border-top:1px solid var(--line)}
/* Teilzeilen: eingerückt, leiser, ohne Balken */
.ov-abr-r.ov-abr-t{grid-template-columns:14px minmax(0,1fr) auto;padding:2px 0 3px;font-size:12.5px}
.ov-abr-r+.ov-abr-t{border-top:0}
.ov-abr-t .ov-abr-l{display:block;padding-left:12px;font-weight:400;color:var(--slate);hyphens:auto}
.ov-abr-ab{grid-column:3;grid-row:1;display:grid;grid-template-columns:4.5em auto 4.5em minmax(8.5em,auto);align-items:baseline;white-space:nowrap;color:var(--graphite)}
.ov-abr-ab.ov-nur-eur{grid-template-columns:6em auto 6em}
.ov-abr-ab>span:first-child{justify-self:end}
.ov-abr-eur{justify-self:end;padding-left:14px;font-size:12px;color:var(--slate-2)}
.ov-abr-pf{color:var(--slate-3);margin:0 6px}
.ov-abr-t+.ov-abr-r:not(.ov-abr-t){border-top:1px solid var(--line-2)}
.ov-res .ov-bud .ov-msk{background:repeating-linear-gradient(135deg,var(--line-strong) 0 5px,var(--bg-soft-2) 5px 10px)}
/* Netto: einfacher Strich darüber; Zur freien Verfügung: Doppelstrich darüber, wie unter einer Summe in der Abrechnung */
.ov-abr-r.ov-abr-sum{border-top:1px solid var(--slate-3)}
.ov-abr-r.ov-abr-end{border-top:3px double var(--navy);padding:12px 0 4px}
.ov-abr-end .ov-abr-l,.ov-abr-end .ov-abr-op{color:var(--accent-deep);font-size:15px}
.ov-abr-end .ov-abr-ant{font-size:12px}
.ov-abr-end .ov-abr-bar em b{color:var(--accent-deep);font-size:14px}
.ov-abr-end .ov-abr-dl{font-size:12.5px}
.ov-abr-r.ov-abr-end+.ov-abr-r{border-top:1px solid var(--line-2)}
.ov-abr-akt .ov-abr-l{color:var(--slate);font-weight:500}
.ov-abr-akt .ov-abr-bar em b{color:var(--slate);font-weight:500}
.ov-ant-note{font-size:12px;line-height:1.45;color:var(--slate)}
/* Schmal: die Reserve deckt nur den Betrag; passt der Unterschied nicht mehr dahinter, rückt er unter den Balken */
@media(max-width:560px){
  .ov-abr-bar{--lab:6rem;flex-wrap:wrap;row-gap:4px}
  .ov-abr-t .ov-abr-l{padding-left:0}
  .ov-abr-ab{display:block;text-align:right}
  .ov-abr-pf{margin:0 4px}
  .ov-abr-eur{display:block;padding:0}
}
.ov-bud-note{font-size:12.5px;color:var(--slate);line-height:1.5}
/* Rechtshinweis: eine Marke im Stil der Chips, bei jedem Steuerthema. Kurz, ruhig, immer sichtbar. */
.ov-rh.ov-rh{display:inline-flex;align-items:center;gap:8px;justify-self:start;align-self:start;max-width:100%;font-size:13px;font-weight:500;line-height:1.35;color:var(--slate);background:var(--bg);border:1px solid var(--line-strong);border-radius:20px;padding:4px 12px 4px 4px;margin:0;width:auto;text-wrap:pretty}
.ov-rh.ov-rh i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bg-soft-2);color:var(--navy);font-style:normal;font-family:var(--v7-display);font-size:13px;font-weight:600;line-height:1}
.ov-rh.ov-rh-dunkel{background:transparent;border-color:var(--navy-hair-2);color:var(--on-navy-2)}
.ov-rh.ov-rh-dunkel i{background:rgba(255,255,255,.10);color:var(--on-navy)}
@media(max-width:640px){.ov-bud{padding:18px 16px}}

/* ---------- Sperre ---------- */
.ov-msk{display:inline-block;vertical-align:-.12em;width:calc(var(--n,6) * .56em);max-width:100%;height:.95em;border-radius:5px;background:repeating-linear-gradient(135deg,var(--line-strong) 0 5px,var(--bg-soft-2) 5px 10px)}
/* Landeswährung in Klammern unter dem Betrag */
.ov-fx{display:block;font-family:var(--v7-text);font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--slate);line-height:1.35;margin-top:1px;font-variant-numeric:lining-nums}
.ov-res .ov-fx,.ov-facts .ov-fx{color:var(--on-navy-3);text-align:right}
.ov-res .ov-msk{background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 5px,rgba(255,255,255,.07) 5px 10px)}
.ov-res-val.ov-rng{font-size:clamp(2.3rem,1.6rem + 3vw,4.1rem);letter-spacing:-.025em}
.ov-res-val.ov-word{font-size:clamp(2.5rem,1.7rem + 3.2vw,4.3rem);font-style:italic;font-weight:500;letter-spacing:-.02em}

/* Knopf „Ergebnis ansehen“ in der Höhe des Entwurfs (48 px) */
.ov-satz-go .btn{min-height:48px;padding:12px 22px}

/* ---------- Abschnitte 3 bis 7 ---------- */
.ov-sec{padding-block:76px}
.ov-sec+.ov-sec{border-top:1px solid var(--line)}
.ov-sec-soft{background:var(--bg-soft)}
.ov-sec-head{display:grid;gap:10px;margin-bottom:32px;max-width:68ch}
.ov-sec-head h2{font-size:clamp(1.7rem,1.25rem + 1.6vw,2.35rem)}
.ov-sec-head p{color:var(--slate);font-size:16.5px;line-height:1.55}
@media(max-width:640px){.ov-sec{padding-block:52px}.ov-sec-head{margin-bottom:24px}}
.ov-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--s2-r-card);padding:22px 24px}
@media(max-width:640px){.ov-card{padding:18px 16px}}



/* 5 · Rangliste. Die Spalte der Beträge ist mindestens 116 px (Entwurf) und
   wächst mit dem längsten Betrag (--ov-rk-v, gesetzt in ranking()). */
.ov-rk-top{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ov-rk-top button{font-size:13.5px;font-weight:600;color:var(--slate);border:1px solid var(--line-strong);background:var(--bg);border-radius:20px;padding:5px 13px;min-height:34px}
.ov-rk-top button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.ov-rk{list-style:none;display:grid;gap:2px}
@media(pointer:coarse){.ov-rk-top button,.ov-pk .ov-o-chip,.ov-pk .ov-o-land,.ov-lockbar button{min-height:44px}.ov-pk-clr{width:32px;height:32px}.ov-rk{gap:4px}}
.ov-rk li button{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) max(116px,var(--ov-rk-v,0px));gap:14px;align-items:center;width:100%;text-align:left;padding:6px 10px;border-radius:8px;min-height:40px}
.ov-rk li button:hover{background:var(--bg-soft-2)}
.ov-rk li.ov-cur button{background:var(--accent-soft)}
.ov-rk .ov-nm{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:14.5px;font-weight:600;color:var(--graphite)}
.ov-rk .ov-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-rk .ov-nm i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--slate)}
.ov-rk .ov-tr{position:relative;height:18px}
.ov-rk .ov-tr::before{content:"";position:absolute;left:50%;top:-5px;bottom:-5px;width:1px;background:var(--line-strong)}
.ov-rk .ov-b{position:absolute;top:3px;height:12px}
.ov-rk .ov-b.ov-p{left:50%;background:var(--accent);border-radius:0 4px 4px 0}
.ov-rk .ov-b.ov-n{right:50%;background:var(--red);border-radius:4px 0 0 4px}
.ov-rk .ov-v{text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums lining-nums;color:var(--graphite);white-space:nowrap}
.ov-rk .ov-v.ov-p{color:var(--accent-deep)}.ov-rk .ov-v.ov-n{color:var(--red)}
.ov-rk-axis{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) max(116px,var(--ov-rk-v,0px));gap:14px;padding:0 10px 8px;font-size:12px;color:var(--slate)}
.ov-rk-axis div{display:flex;justify-content:space-between}
@media(max-width:640px){.ov-rk li button,.ov-rk-axis{grid-template-columns:minmax(0,1fr) max(92px,var(--ov-rk-v,0px));gap:4px 10px}.ov-rk .ov-tr{grid-column:1/-1;grid-row:2}.ov-rk-axis>span:first-child{display:none}.ov-rk-axis div{grid-column:1/-1}.ov-rk-axis>span:last-child{display:none}}

/* 6 · Grenzen (ohne Partner-Platz, volle Breite) */
/* Zum Schluss (v8.9): bis zu drei Karten nebeneinander. Konto mit Akzentleiste, Pro mit Pro-Leiste, Check ruhig. */
.ov-weiter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px;align-items:stretch}
.ov-wk{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--s2-r-card);padding:28px 26px 24px}
.ov-wk[hidden]{display:none}
.ov-wk-konto,.ov-wk-pro{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.ov-wk-konto::before,.ov-wk-pro::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.ov-wk-pro::before{background:var(--pro-sig-vivid)}
.ov-wk-k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2)}
.ov-wk-konto .ov-wk-k{color:var(--accent-deep)}
.ov-wk-pro .ov-wk-k{color:var(--pro-sig)}
.ov-wk h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.75rem);line-height:1.15}
.ov-wk p{color:var(--slate);font-size:15.5px;line-height:1.55;max-width:56ch}
.ov-wk-l{list-style:none;display:grid;gap:9px;align-content:start}
.ov-wk-l li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;font-size:15px;line-height:1.45;color:var(--graphite)}
.ov-wk-l svg{margin-top:3px;color:var(--accent)}
.ov-wk-pro .ov-wk-l svg{color:var(--pro-sig)}
.ov-wk-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:6px}
.ov-wk-go small{font-size:13px;color:var(--slate)}
.btn-pro{background:var(--pro-sig);color:var(--on-navy);box-shadow:var(--shadow-sm)}
.btn-pro:hover{background:color-mix(in srgb,var(--pro-sig) 82%,black);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.ov-weiter-grid[data-n="1"]{grid-template-columns:minmax(0,760px)}
@media(max-width:820px){.ov-wk{padding:22px 20px}}
/* Mehrere Orte nebeneinander (v8.9, Pro): eine Tabelle, je Ort eine Spalte; Anteil groß, Betrag leise, darunter ein
   dünner Balken in der Länge des Anteils. Schmal: waagerecht scrollbar in der Karte, die Postenspalte bleibt stehen. */
.ov-mehr{--ov-a:var(--slate-3);--ov-b:var(--accent)}
.ov-mehr h2 .fein-pro{background:var(--pro-sig);border-color:var(--pro-sig);color:var(--on-navy);vertical-align:middle;font-family:var(--sans);letter-spacing:.02em;margin-left:6px}
.ov-mehr .ov-lockbar a{font-weight:600;font-size:14.5px;color:var(--pro-sig);min-height:36px;display:inline-flex;align-items:center}
.ov-mehr .wrap{position:relative}
.ov-mehr-pk{position:absolute;z-index:60;width:0;height:0}
.ov-mehr-pk>.ov-fld{display:none}
.ov-mehr-tab{overflow-x:auto;border:1px solid var(--line);border-radius:var(--s2-r-card);background:var(--bg);-webkit-overflow-scrolling:touch}
.ov-mehr-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ov-mehr-t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:lining-nums proportional-nums}
.ov-mehr-t th,.ov-mehr-t td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line-2);min-width:140px}
.ov-mehr-t thead th{border-top:0;vertical-align:bottom;padding-top:16px}
.ov-mehr-t thead th b{display:block;font-size:15px;font-weight:600;color:var(--graphite)}
.ov-mehr-k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-2)}
.ov-mehr-t thead th{position:relative}
.ov-mehr-t thead th:has(.ov-mehr-x){padding-right:40px}
.ov-mehr-x{position:absolute;top:10px;right:6px;width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--slate)}
.ov-mehr-x:hover{background:var(--bg-soft-2);color:var(--navy)}
/* Postenspalte: schmal, lange Posten brechen um */
.ov-mehr-t .ov-mehr-p{position:sticky;left:0;z-index:1;background:var(--bg);width:118px;min-width:0;max-width:118px;padding-right:8px;font-weight:600;color:var(--graphite);hyphens:auto;line-height:1.3}
tbody .ov-mehr-p{font-size:13.5px}
.ov-mehr-p abbr{text-decoration:none;cursor:help}
/* Freier Platz: schraffiert über alle Zeilen, in der Mitte das Plus */
.ov-mehr-t .ov-mehr-leer{background-color:var(--bg-soft);background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 7px);text-align:center;vertical-align:middle;border-left:1px solid var(--line-2)}
.ov-mehr-t thead .ov-mehr-leer{text-align:left;vertical-align:bottom}
.ov-mehr-t thead .ov-mehr-leer b{color:var(--slate-2);font-weight:500}
.ov-mehr-plus{display:inline-grid;justify-items:center;gap:8px;padding:14px 18px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;cursor:pointer;background:none;border:0}
.ov-mehr-plus svg{box-sizing:content-box;width:22px;height:22px;padding:13px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s var(--ease)}
.ov-mehr-plus:hover svg,.ov-mehr-plus:focus-visible svg{border-color:var(--accent);transform:scale(1.06)}
.ov-pro-zu .ov-mehr-plus,a.ov-mehr-plus{color:var(--pro-sig)}
.ov-mehr-t td b{display:block;font-size:15px;font-weight:600;color:var(--navy)}
.ov-mehr-t td small{display:block;font-size:12.5px;color:var(--slate-2);margin-top:1px}
.ov-mehr-bar{display:block;height:4px;margin-top:7px;border-radius:2px;background:var(--line-2);position:relative;overflow:hidden}
.ov-mehr-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(100% * var(--w));background:var(--c);border-radius:2px}
.ov-mehr-netto th,.ov-mehr-netto td{border-top-color:var(--slate-3)}
.ov-mehr-frei th,.ov-mehr-frei td{border-top:3px double var(--navy)}
.ov-mehr-frei th,.ov-mehr-frei td b{color:var(--accent-deep)}
.ov-mehr-diff th,.ov-mehr-diff td{background:var(--bg-soft)}
.ov-mehr-d.ov-pos b{color:var(--green)}
.ov-mehr-d.ov-neg b{color:var(--red)}
.ov-mehr-fuss{font-size:12.5px;color:var(--slate);padding:10px 16px 14px;border-top:1px solid var(--line-2)}
@media(max-width:640px){.ov-mehr-t th,.ov-mehr-t td{padding:10px 12px;min-width:120px}.ov-mehr-t .ov-mehr-p{width:102px;max-width:102px;font-size:12.5px}}
.ov-limits{display:grid;gap:10px}
.ov-limits h3{font-family:var(--v7-text);letter-spacing:0;font-size:16px;font-weight:600;color:var(--graphite)}
.ov-limits ul{list-style:none;display:grid;gap:10px;margin-top:2px}
.ov-limits li{font-size:15px;line-height:1.5;color:var(--graphite);padding-left:18px;position:relative}
.ov-limits li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--slate-3)}
.ov-limits li b{font-weight:600}
.ov-limits ul,.ov-limits h3{max-width:60ch}


/* Sperr-Leiste über Marktposition, Rechnung und Rangliste; Skelett der Rangliste (B3) */
.ov-lockbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;border:1px dashed var(--line-strong);background:var(--bg);border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:14.5px;color:var(--slate)}
.ov-sec-soft .ov-lockbar{background:var(--paper)}
.ov-lockbar span{display:inline}
.ov-lockbar svg{flex:none;color:var(--accent);vertical-align:-3px;margin-right:8px}
.ov-lockbar b{color:var(--graphite);font-weight:600}
.ov-lockbar button{font-weight:600;font-size:14.5px;color:var(--accent);min-height:36px}
.ov-lockbar button:hover{color:var(--accent-deep)}
.ov-rk li.ov-skel .ov-nm .ov-msk{width:calc(var(--n) * .5em)}
.ov-rk li.ov-skel{opacity:.55}
.ov-rk li.ov-skel button{cursor:default}
.ov-rk li.ov-skel .ov-b{background:var(--line-strong)}
.ov-rk li.ov-rk-more{padding:10px 10px 0}
.ov-rk li.ov-rk-more p{font-size:14.5px;color:var(--slate)}
.ov-rk li.ov-rk-more button{display:inline;width:auto;min-height:0;padding:0;color:var(--accent);font-weight:600}

/* ---------- 2a · Sperre A: Abschnitt, grüne Leiste, Leiste unten, Meldung (B3) ----------
   Entwurf Z. 462–506 ohne Abo-Schritte, Plan-Kasten und E-Mail-Link-Feld (E3):
   rechts steht das Formular aus anmelden.js (mountAuth, Klassen acc-* aus styles.css). */
.ov-gate{background:var(--bg-soft);border-bottom:1px solid var(--line);padding-block:56px}
.ov-gate-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.ov-gate-l{padding:30px 34px;display:grid;gap:16px;align-content:start;min-width:0}
.ov-gate-r{padding:30px 32px;background:var(--paper);border-left:1px solid var(--line);display:grid;gap:14px;align-content:start;min-width:0}
.ov-gate h2{font-size:clamp(1.55rem,1.15rem + 1.4vw,2.15rem)}
.ov-gate-l>p{font-size:16px;color:var(--slate);line-height:1.55;max-width:56ch}
.ov-gate-l .ov-chip{justify-self:start}
.ov-incl{list-style:none;display:grid;gap:11px}
.ov-incl li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5;color:var(--graphite)}
.ov-incl svg{color:var(--accent);margin-top:3px}
.ov-incl b{font-weight:600}
.ov-gate-r h3{font-family:var(--v7-text);letter-spacing:0;font-size:16.5px;font-weight:600;color:var(--graphite)}
.ov-gate-r small{font-size:12.5px;color:var(--slate);line-height:1.45}
.ov-gate-r .acc-auth{grid-template-columns:minmax(0,1fr);gap:0;max-width:none;margin:0}
.ov-gate-r .acc-card{max-width:none;width:100%;border:0;box-shadow:none;background:transparent}
.ov-gate-r .acc-form .btn-primary{background:var(--accent)}
.ov-gate-r .acc-form .btn-primary:hover{background:var(--accent-deep)}
/* Ein Datenschutz-Satz: der von texte.md (small unter dem Formular) */
.ov-gate-r .acc-fine{display:none}
@media(max-width:860px){.ov-gate-card{grid-template-columns:minmax(0,1fr)}.ov-gate-r{border-left:0;border-top:1px solid var(--line)}.ov-gate-l,.ov-gate-r{padding:22px 18px}}
@media(max-width:640px){.ov-gate{padding-block:40px}}
.ov-okbar{background:var(--green-soft);border-bottom:1px solid var(--line)}
.ov-okbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-block:12px;font-size:14.5px;color:var(--green)}
.ov-okbar b{font-weight:600}
.ov-okbar a{font-size:14px;font-weight:600;color:var(--slate);text-decoration:underline;text-underline-offset:3px}
.ov-stick{position:fixed;z-index:70;left:0;right:0;bottom:0;background:var(--navy);color:var(--on-navy);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 24px rgba(13,27,46,.2);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
.ov-stick.ov-on{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
.ov-stick .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.ov-stick p{font-size:14.5px;color:var(--on-navy-2);min-width:0}
.ov-stick p b{color:var(--on-navy);font-weight:600}
.ov-stick .btn{background:var(--on-navy);color:var(--navy);min-height:42px;padding:9px 16px;font-size:14.5px;flex:none}
.ov-stick-k{display:none}
@media(max-width:560px){.ov-stick p span{display:none}.ov-stick-x{display:none}.ov-stick-k{display:inline}}
html.ov-stick-on footer{padding-bottom:72px}
#gate,#ergebnis{scroll-margin-top:84px}
.ov-toast{position:fixed;z-index:90;left:50%;bottom:84px;transform:translate(-50%,12px);background:var(--graphite);color:#fff;font-size:14px;line-height:1.45;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-lg);max-width:min(460px,calc(100vw - 32px));opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ov-toast.ov-on{opacity:1;transform:translate(-50%,0)}

/* ---------- v7 · Grundgehalt, Bonus, Aktien in drei Stufen (JAN-91) ----------
   Zeichnung: docs/ortsvergleich/entwurf-v7.html, CSS Z. 528–599, ohne den
   Abnahme-Kasten (.v7note). Gast: Spanne ohne Aktien. Konto: genaue Zahlen
   ohne Aktien. Freigeschaltet (Einzelkauf oder Pro): Bonus und Aktien. */
:root{--ov-aktien:var(--accent-light)}
/* Feld Bonus: Umschalter Betrag/Prozent im Feld */
.ov-seg2{display:inline-flex;gap:2px;margin-right:-8px}
.ov-mf .ov-in .ov-seg2 button{min-width:40px;min-height:38px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:600;color:var(--slate);border:1px solid transparent}
.ov-mf .ov-in .ov-seg2 button:hover{background:var(--bg-soft-2)}
.ov-mf .ov-in .ov-seg2 button[aria-pressed=true]{background:var(--navy);color:var(--on-navy)}
/* Zweite Ergebniszeile „mit Aktien“: klar unter der Hauptzahl, Risiko als Chip */
.ov-res-alt{display:grid;gap:8px;border-top:1px solid var(--navy-hair);padding-top:14px}
.ov-res-alt-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ov-res-alt .ov-k{font-size:14.5px;font-weight:500;color:var(--on-navy-2)}
.ov-res-alt b{font-family:var(--v7-display);font-weight:560;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.1;letter-spacing:-.02em;color:var(--on-navy)}
.ov-res-alt b.ov-pos{color:var(--ov-pos-on-navy)}.ov-res-alt b.ov-neg{color:var(--ov-neg-on-navy)}
.ov-res-alt .ov-u{font-size:14.5px;color:var(--on-navy-2)}
.ov-chip-risk{border:1px solid var(--navy-hair-2);color:var(--on-navy-2);font-weight:500;justify-self:start;white-space:normal;text-align:left}
/* Aktien in der Monatskarte: schraffiert, nach Abgaben, hinter „Bleibt frei“ */
/* Sicht-Umschalter ohne Aktien | mit Aktien: dasselbe Muster wie der Filter der Rangliste */
.ov-sicht{display:flex;flex-wrap:wrap;gap:8px}
.ov-rk-top .ov-sicht{margin-left:auto}
.ov-sicht button{font-size:13.5px;font-weight:600;color:var(--slate);border:1px solid var(--line-strong);background:var(--bg);border-radius:20px;padding:5px 13px;min-height:34px}
.ov-sicht button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.ov-sicht .ov-k{font-size:12.5px;color:var(--slate-2);align-self:center;margin-right:2px}
@media(max-width:640px){.ov-rk-top .ov-sicht{margin-left:0;flex-basis:100%}}
@media(pointer:coarse){.ov-sicht button{min-height:44px}}
/* Textlink im dunklen Band: Zielfläche 44px hoch über Innenabstand, ohne die Zeile zu verschieben */
.ov-res-alt .ov-u a,.ov-res-alt .ov-u button{color:var(--sky);font-weight:600;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding-block:11px;margin-block:-11px}
.ov-res-alt .ov-u button:hover{color:var(--on-navy)}
/* Kaufkarte im Sperr-Abschnitt (Konto ohne Freischaltung) */
.ov-gate-teil{display:grid;gap:14px;align-content:start;min-width:0}
.ov-gate-l>p.ov-gate-note{font-size:13.5px;color:var(--slate);line-height:1.5;max-width:56ch}
.ov-gate-r .btn{width:100%;justify-content:center}
.ov-gate-r .ov-gate-teil .btn-primary{background:var(--accent)}
.ov-gate-r .ov-gate-teil .btn-primary:hover{background:var(--accent-deep)}
.ov-gate-r .ov-gate-teil .btn-primary:disabled{opacity:.6;cursor:progress;transform:none}
.ov-plan{border:1px solid var(--accent-soft-2);background:var(--bg);border-radius:12px;padding:14px 16px;display:grid;gap:6px}
.ov-plan b{font-size:15px;color:var(--navy)}
.ov-plan span{font-size:13.5px;color:var(--slate)}
.ov-plan .ov-price{font-family:var(--v7-display);font-size:21px;font-weight:var(--v7-display-wght);color:var(--navy);line-height:1.15;font-variant-numeric:lining-nums}
.ov-plan .ov-price small{font-family:var(--v7-text);font-size:13px;font-weight:500;color:var(--slate);margin-left:6px}
.ov-who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--slate)}
.ov-who i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.ov-okbar .ov-okpk{color:var(--slate)}

@media (prefers-reduced-motion:reduce){.ov-ordv i,.ov-fld,.ov-stick,.ov-toast{transition:none!important}}