/* Abfindungs-Optimierer - Gestaltung.

   ENTWURF 3 (ab 6.0.0): Die Gestaltung folgt dem Briefkopf der Kanzlei -
   geometrische Grotesk, gesperrte Versalien in der Ueberschrift, tiefes
   Marineblau auf hellem Papierton, viel Weiszraum, feine Linien statt
   Rahmen. Der Aufbau der Rechenstrecke folgt den Rechnern von Finanzfluss:
   Angaben links in einer Karte, Ergebnis rechts als grosze Zahl mit einem
   erklaerenden Satz und einer Grafik darunter.
   Der vorherige Stand liegt unveraendert in entwurf-2/. */
:root{
  /* --- Farbwelt nach dem Briefkopf ---
     Der Papierton ist leicht warm (das Original ist gestrichenes Papier, kein
     reines Weisz), die Schrift ein gedecktes Marineblau. Bewusst KEIN reines
     Schwarz: der Briefkopf hat keines, und Blau-auf-Papier traegt den ganzen
     Auftritt. */
  --plane:#f4f4f1; --surface:#ffffff;
  --ink:#232c44; --ink-2:#4f5768; --ink-3:#878d9c; --ink-4:#b0b5c0;
  --line:#e5e4e0; --line-strong:#cfcec9;
  /* Hoehe der klebenden Kopfzeile plus Luft - die rechten Spalten setzen
     dort an, damit sie nicht darunter verschwinden. */
  /* Genau die Hoehe der Kopfzeile plus dem Innenabstand oben. Nur wenn der
     Klebepunkt der Ausgangslage entspricht, bewegen sich die Spalten beim
     Scrollen ueberhaupt nicht. */
  --klebe-oben:89px;
  /* Hoehe der Fusszeile - siehe Raster-Padding weiter unten. */
  --fuss-hoehe:175px;
  --akzent:#2b3a5e; --akzent-schleier:#eef0f5; --akzent-rand:#d8dce6;
  /* Serienfarben der Schaubilder. NICHT dieselben wie --akzent: Das Blau des
     Briefkopfs ist zu dunkel und zu grau, um als Datenfarbe zu taugen (Chroma
     0,066 - der Validator meldet "liest sich grau"). Diese beiden sind daraus
     aufgehellt und gesaettigt, bis alle sechs Pruefungen bestehen:
       node scripts/validate_palette.js "#33518f,#b0763a" --mode light
     Wer sie aendert, laesst den Validator erneut laufen. Farbe allein traegt
     die Aussage ohnehin nicht - jede Flaeche ist zusaetzlich beschriftet. */
  --serie-1:#33518f; --serie-2:#b0763a; --serie-3:#9aa8c6;
  --gut:#1c6142; --warn:#8a6417; --krit:#a33228;
  --radius:10px;
  /* Jost ist eine freie Nachbildung der Futura (SIL Open Font License) und
     kommt der Schrift des Briefkopfs sehr nah. Sie liegt IM PLUGIN und wird
     vom eigenen Server geladen - Google Fonts waere eine Uebermittlung der
     IP-Adresse an Google und damit ein Datenschutzproblem (LG Muenchen I,
     3 O 17493/20). Siehe doku/01-website-aufbau.md. */
  --font-body:400 16px/1.6 Jost,"Century Gothic",Futura,"Avenir Next",Avenir,"Segoe UI",Roboto,sans-serif;
  --font-marke:400 19px/1.2 Jost,"Century Gothic",Futura,"Avenir Next",Avenir,sans-serif;
  /* Bemessen so, dass "WAS BLEIBT VON IHRER ABFINDUNG?" gesperrt in EINE
     Zeile passt, sobald der Bildschirm breiter als rund 850 px ist. */
  --font-h1:300 clamp(23px,2.7vw,34px)/1.25 Jost,"Century Gothic",Futura,"Avenir Next",Avenir,sans-serif;
  --font-zahl:300 clamp(38px,6vw,50px)/1.05 Jost,"Century Gothic",Futura,"Avenir Next",Avenir,sans-serif;
  --pfeil:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2379818a' stroke-width='1.6'/%3E%3C/svg%3E");
}


/* Nur drei Schnitte, nur Latin, nur woff2 - zusammen rund 30 KB. Mehr braucht
   diese Seite nicht, und jeder weitere Schnitt kostet Ladezeit.
   font-display:swap zeigt sofort die Ersatzschrift und tauscht dann - besser
   als ein leerer Bildschirm, wenn die Datei einmal spaeter kommt. */
@font-face{font-family:Jost;font-style:normal;font-weight:300;font-display:swap;
  src:url(schrift/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;
  src:url(schrift/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;
  src:url(schrift/jost-latin-500-normal.woff2) format("woff2")}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plane);color:var(--ink);font:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased}
/* Jost hat Versalziffern in normaler Laufweite; in Tabellen und Ergebnissen
   sollen die Ziffern untereinander stehen. */
input,table,.erg-zahl,.zahl,dd,.bal-wert{font-variant-numeric:tabular-nums}

/* Die Kopfzeile bleibt beim Scrollen stehen - das Menue soll jederzeit
   erreichbar sein. */
.kopf{border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20}
/* Angemeldete Nutzer haben die WordPress-Adminleiste ueber der Seite. Ohne
   diesen Versatz wuerde die eigene Kopfzeile beim Scrollen dahinter rutschen -
   das sieht aus, als verschoebe sie sich. */
.admin-bar .kopf{top:32px}
.admin-bar{--klebe-oben:121px}
@media(max-width:782px){.admin-bar .kopf{top:46px}}
/* Drei Bereiche: Wortmarke links, Menue in der Mitte, rechts bleibt Raum.
   Das Menue steht damit optisch mittig, ohne dass die Wortmarke wandert. */
.kopf .innen{max-width:1560px;margin:0 auto;padding:14px 22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.kopf .menue{grid-column:2;justify-content:center}

/* Wortmarke im Ton des Briefkopfs: gesperrte Versalien, leichter Schnitt,
   ein kleiner Punkt als Trenner. Kein Fettdruck - der Briefkopf hat keinen. */
.marke{font-family:inherit;font-size:15px;line-height:1.1;white-space:nowrap;
  grid-column:1;letter-spacing:.18em;text-transform:uppercase}
.marke a{color:inherit;text-decoration:none;display:inline-flex;
  align-items:center;gap:9px}
.marke-wort{font-weight:400;color:var(--ink)}
.marke-punkt{width:5px;height:5px;border-radius:50%;background:var(--akzent);
  flex:none;opacity:.75}
.marke-zusatz{font-weight:300;color:var(--ink-2)}
@media(max-width:900px){.marke{font-size:13px;letter-spacing:.14em}.marke a{gap:7px}}

/* Menü. Punkt 2 und 3 sind noch nicht gebaut und deshalb keine Links,
   sondern gedämpfte Beschriftungen mit Hinweis - ein toter Link wäre
   schlechter als eine ehrliche Vorschau. */
.menue{display:flex;align-items:baseline;gap:28px;font-size:13.5px;font-weight:300;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  margin:-6px 0;padding:6px 0}
.menue::-webkit-scrollbar{display:none}
.menue>*{white-space:nowrap;flex:none}
.menue a{color:var(--ink-2);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.menue a:hover{color:var(--ink)}
.menue a.hier{color:var(--ink);font-weight:400;border-bottom-color:var(--akzent)}
.menue .bald{color:var(--ink-3);display:inline-flex;align-items:baseline;gap:7px;cursor:default}
.menue .bald i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);
  border-radius:99px;padding:2px 7px;line-height:1.3}
/* Auf schmalen Displays kurze Beschriftungen, damit nichts abgeschnitten wird. */
.menue .kurz{display:none}
@media(max-width:640px){
  /* Zu schmal fuer drei Spalten - Marke oben, Menue darunter ueber die
     volle Breite und scrollbar. */
  .kopf .innen{display:flex;flex-wrap:wrap;gap:11px;padding:14px 22px 12px}
  .menue{gap:22px;font-size:14px;width:100%;justify-content:flex-start;
    margin:0 -22px;padding:0 22px}
  .menue .bald i{display:none}
  .menue .lang{display:none}
  .menue .kurz{display:inline}
}

main{max-width:1560px;margin:0 auto;padding:34px 22px 28px}

/* Sprungziele müssen unter der klebenden Kopfzeile landen, nicht darunter
   verschwinden. Ohne scroll-margin-top schiebt der Browser das Ziel genau an
   den oberen Rand - und die Kopfzeile deckt es ab. Der Wert entspricht dem
   Klebepunkt der Spalten und wächst mit der WordPress-Adminleiste mit. */
:target{scroll-margin-top:var(--klebe-oben)}
#massKarte,.details,.nachher,#detailBlock{scroll-margin-top:var(--klebe-oben)}

/* ---------- Kopfzone und Raster (Entwurf 3) ----------
   Der Briefkopf setzt den Ton: gesperrte Versalien, viel Luft darum, eine
   feine Linie als einziges Ornament. Die Ueberschrift ist deshalb LEICHT
   gesetzt (300) und gesperrt, nicht fett - Gewicht kommt aus dem Weiszraum,
   nicht aus der Strichstaerke. */
/* KEINE Breitenbegrenzung. Zwei Versuche sind hier schon gescheitert:
   erst "max-width:22ch" - die Einheit ch bezieht sich auf die Schriftgroesze
   des Elements, auf dem sie steht (16 px), nicht auf die der Ueberschrift
   (40 px); der Kasten war 196 px breit und die Zeile brach fuenfmal um.
   Dann 660 px - zweizeilig, aber in der Mitte eingeschnuert.
   Der Briefkopf setzt "LAWYER OFFICE" in EINER Zeile ueber die volle Breite.
   Genau so hier: die Ueberschrift laeuft, so weit sie will, und ist im
   Schriftgrad so bemessen, dass sie auf dem Schreibtisch in eine Zeile passt. */
.kopfzone{text-align:center;margin:14px auto 44px}
.kopfzone h1{font:var(--font-h1);margin:0 0 14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  /* Verteilt die Woerter gleichmaeszig auf die Zeilen, statt die letzte als
     Stummel stehen zu lassen. Browser ohne Unterstuetzung ignorieren es. */
  text-wrap:balance}
/* Der Untertitel darf breiter laufen als die gesperrte Ueberschrift, sonst
   bricht er in Stummel. Deshalb eigene Breite statt der des Kastens. */
.kopfzone p{margin:0 auto;color:var(--ink-2);font-size:16.5px;font-weight:300;
  letter-spacing:.01em;max-width:46ch;width:max-content;max-width:min(46ch,86vw)}
/* Dieselbe Linie wie ueber der Fusszeile des Briefkopfs: duenn, mittig,
   deutlich schmaler als der Text. */
.kopfzone::after{content:"";display:block;width:132px;height:1px;
  background:var(--line-strong);margin:26px auto 0}
/* Auf schmalen Schirmen wird die Sperrung zurueckgenommen und die Breite
   freigegeben: gesperrte Versalien in 22 Zeichen Breite brachen dort auf
   fuenf Zeilen um. */
@media(max-width:640px){
  .kopfzone{max-width:none;margin:4px auto 32px}
  .kopfzone h1{letter-spacing:.07em;font-size:25px}
  .kopfzone p{font-size:15.5px}
  .kopfzone::after{margin-top:22px;width:104px}
}
.intro{max-width:34ch;margin-bottom:34px}
.intro h1{font:var(--font-h1);margin:0 0 10px}
.intro p{margin:0;color:var(--ink-2);font-size:17px}

/* Zwei Karten nebeneinander - links wird gefragt, rechts geantwortet.
   Bewusst nur ZWEI: die dritte Spalte des vorigen Entwurfs (Liste der
   Moeglichkeiten mit Betraegen) ist entfallen, die Massnahmen stehen jetzt
   ohne Zahlen in der rechten Karte. */
.raster{display:grid;gap:26px;margin:0 auto;max-width:1240px}
@media(min-width:1000px){
  .raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .spalte{min-width:0;grid-column:1}
  .ergebnisspalte{grid-column:2;min-width:0}
}
/* Unter 1000 px untereinander. Die Reihenfolge steht hier im HTML und nicht
   in order-Zahlen - die Falle aus 5.0.0 (siehe doku/01-website-aufbau.md)
   entsteht gar nicht erst, weil .spalte kein display:contents mehr bekommt. */
@media(max-width:999px){
  main{padding-bottom:96px}
}

/* ---------- Karte: der eine Baustein, aus dem die Seite besteht ---------- */
.karte{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 26px 24px}
.karte+.karte{margin-top:20px}
.karte-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin:0 0 4px}
.karte-kopf h2{font-size:17px;font-weight:500;letter-spacing:.02em;margin:0;color:var(--ink)}
.karte-sub{margin:0 0 18px;font-size:14px;color:var(--ink-3);font-weight:300}
@media(max-width:560px){.karte{padding:20px 17px 18px}}

/* Nummerierte Abschnitte innerhalb der Eingabekarte - wie bei den Rechnern
   von Finanzfluss. Die Ziffer ordnet, ohne zu schreien. */
.abschnitt{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.abschnitt:first-of-type{padding-top:0;margin-top:0;border-top:0}
.abschnitt>h3{font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}

/* ---------- Formular ---------- */
.feld{margin-bottom:20px}
.feld label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px}
.feld .hilfe{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:2px}
.paar{display:grid;gap:20px;margin-bottom:20px}
@media(min-width:520px){
  .paar{grid-template-columns:1fr 1fr}
  /* Labels sind unterschiedlich hoch (mal mit, mal ohne Hilfetext). Subgrid legt
     Beschriftung und Eingabefeld beider Spalten auf dieselben Zeilen, damit die
     Felder immer auf gleicher Hoehe stehen. */
  @supports (grid-template-rows: subgrid){
    .paar{grid-template-rows:auto auto}
    .paar>.feld{display:grid;grid-template-rows:subgrid;grid-row:span 2;
      align-content:start;margin-bottom:0}
  }
  /* Aeltere Browser ohne Subgrid: Beschriftung auf eine feste Mindesthoehe. */
  @supports not (grid-template-rows: subgrid){
    .paar>.feld>label{min-height:3.05em}
  }
}

.eingabe{position:relative}
input[type=number],input[type=text],select{
  width:100%;padding:12px 13px;font:inherit;font-size:17px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius)}
input[type=number],input[type=text]{font-variant-numeric:tabular-nums;padding-right:34px}
select{font-size:16px;appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:var(--pfeil);background-repeat:no-repeat;background-position:right 12px center}
.eingabe .euro{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:16px;pointer-events:none}
input:hover,select:hover{border-color:var(--ink-3)}
input:focus,select:focus{outline:none;border-color:var(--akzent);
  box-shadow:0 0 0 3px var(--akzent-schleier)}
.gross input{font-size:22px;font-weight:600;padding:14px 34px 14px 13px}

.schalter{display:flex;align-items:center;gap:10px;margin:14px 0}
.schalter input{width:18px;height:18px;margin:0;accent-color:var(--akzent);flex:none}
.schalter label{font-size:15px;margin:0}

.aus{display:none !important}

/* Aufklappbereich */
.mehr{border-top:1px solid var(--line);margin-top:30px;padding-top:4px}
.mehr>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:14px 0;font-size:15px;font-weight:500;color:var(--akzent)}
.mehr>summary::-webkit-details-marker{display:none}
.mehr>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:auto;
  margin-top:-3px;transition:transform .18s}
.mehr[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.mehr .inhalt{padding:6px 0 10px}
.gruppe{margin-bottom:26px}
.gruppe h3{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.unterzeile{font-size:13px;font-weight:500;color:var(--ink-2);margin:4px 0 14px;
  padding-top:14px;border-top:1px solid var(--line)}

/* ---------- Ist-Zustand: farbig abgesetzt ---------- */
.ist{background:var(--akzent-schleier);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 16px;margin:-4px -2px 0}
.ist .posten{border-top-color:var(--line-strong)}
.ist .p:last-child{border-bottom:0;padding-bottom:0}

/* ---------- Was noch geht ---------- */
.tun{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.tun h3{font-size:16px;font-weight:600;margin:0;color:var(--ink)}
.tun-kopf{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.tun-kopf b{color:var(--gut);font-weight:600}
.tun-gruppe{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 2px}
.mrow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;column-gap:10px;row-gap:1px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.mrow:last-of-type{border-bottom:0}
a.mrow:hover .mrow-n{color:var(--akzent)}
.mp{width:8px;height:8px;border-radius:99px;align-self:start;margin-top:5px}
.mp.gruen{background:var(--gut)}
.mp.gelb{background:var(--warn)}
.mp.grau{background:var(--line-strong)}
.mrow-n{grid-column:2;font-size:14px;font-weight:500;color:var(--ink);line-height:1.35}
.mrow-w{grid-column:3;text-align:right;white-space:nowrap;font-size:15px;font-weight:600;
  color:var(--gut);font-variant-numeric:tabular-nums}
.mrow-u{grid-column:2/4;font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.4}
.mrow.grau .mrow-n{color:var(--ink-3);font-weight:400}
.tun-stufen{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.tun-stufen b{color:var(--ink-2);font-weight:600}
.tun-fuss{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.tun-fuss a{color:var(--akzent);text-decoration:none;border-bottom:1px solid var(--line-strong)}

/* Link unter dem Abfindungsfeld */
.feldlink{margin:7px 0 0;font-size:13.5px;line-height:1.45}
.feldlink a{color:var(--akzent);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.opt-leer{margin:0;padding:14px 16px;font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* ---------- Ergebnis ---------- */
.ergebnis{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px}
.erg-frage{font-size:14px;color:var(--ink-2);margin:0}
.erg-zahl{font:var(--font-zahl);letter-spacing:-.03em;margin:2px 0 0;color:var(--ink)}
.erg-von{font-size:13.5px;color:var(--ink-3);margin:4px 0 0}

.posten{margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.p{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.p dt{font-size:14px;color:var(--ink-2);margin:0}
.p dd{margin:0;font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.p dd.gut{color:var(--gut)}
.p.klein dt,.p.klein dd{font-size:13.5px;color:var(--ink-3);font-weight:400}


.tipp{margin:16px 0 0;padding:11px 13px;background:var(--akzent-schleier);
  border-radius:var(--radius)}
.tipp p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.tipp p+p{margin-top:9px}
.tipp b{color:var(--ink);font-weight:600}
.tipp .kopfzeile{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:4px}

.achtung{margin:14px 0 0;padding-left:12px;border-left:2px solid var(--warn)}
.achtung p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.achtung b{color:var(--ink)}
.achtung.krit{border-left-color:var(--krit)}

/* Details / Rechenweg */
.rechenweg{margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
.rechenweg>summary{cursor:pointer;list-style:none;font-size:14px;font-weight:500;
  color:var(--akzent);padding:10px 0;display:flex;align-items:center;gap:7px}
.rechenweg>summary::-webkit-details-marker{display:none}
.rechenweg>summary::before{content:"";width:0;height:0;border:4px solid transparent;
  border-left-color:currentColor;transition:transform .15s;flex:none}
.rechenweg[open]>summary::before{transform:rotate(90deg) translateX(-1px)}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:4px 0 0}
caption{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 0 8px;font-weight:600}
th,td{padding:7px 3px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;font-weight:600;color:var(--ink-3)}
td.z,th.z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.summe td{font-weight:600;border-top:1px solid var(--line-strong);border-bottom:0}
tr.endsumme td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0;padding-top:9px}
tr.neben td{color:var(--ink-3)}
.methodik{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:14px}

/* Fuss */
.fuss{border-top:1px solid var(--line);background:var(--surface)}
.fuss .innen{max-width:1560px;margin:0 auto;padding:18px 22px 22px}
.fuss p{font-size:12px;line-height:1.55;color:var(--ink-3);margin:0;max-width:none}
.fuss b{color:var(--ink-2)}
/* =====================================================================
   SZENARIEN
   Drei bis vier Karten in der linken Spalte, VOR der Masznahmenliste.
   Grosz steht, was nach Steuern bleibt, darunter die Ersparnis als eigener
   Streifen - siehe doku/08-szenarien.md.
   ===================================================================== */
.szenarien{margin:34px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.szenarien.aus{display:none}
.sz-kopf h2{font-size:23px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.sz-intro{margin:0 0 20px;color:var(--ink-2);max-width:62ch}
.sz-intro b{color:var(--ink)}

/* auto-fit statt fester Spaltenzahl: die Zahl der Karten haengt vom Fall ab -
   mal drei, mal vier, bei kleinen Abfindungen auch nur zwei. */
.sz-karten{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}

.sz-karte{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 16px 15px;display:flex;flex-direction:column}
/* Der hervorgehobene Weg bekommt einen Rahmen in Akzentfarbe, KEINE farbige
   Flaeche - sonst liest er sich wie ein Werbebanner statt wie ein Ergebnis. */
.sz-karte.hervor{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}

.sz-marken{display:flex;flex-wrap:wrap;gap:5px;min-height:20px;margin-bottom:6px}
.sz-marke{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 7px;border-radius:99px;line-height:1.3}
.sz-marke.frei{background:var(--akzent-schleier);color:var(--akzent);
  border:1px solid var(--akzent-rand)}
.sz-marke.steuer{background:#eef6f0;color:#14532d;border:1px solid #cfe4d6}

.sz-karte h3{margin:0 0 12px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.sz-label{margin:0;font-size:12.5px;color:var(--ink-3)}
.sz-zahl{margin:1px 0 0;font-size:27px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-family:inherit;}
/* Die Ersparnis als eigener Streifen. Sie ist die Botschaft des Blocks und war
   vorher nur eine beilaeufige Zeile zwischen zwei Zahlen. Die Ausgangskarte
   bekommt denselben Streifen in Grau, damit alle Karten gleich hoch beginnen
   und die Zahlen darunter auf einer Linie liegen. */
.sz-spar{margin:10px 0 0;padding:7px 10px;border-radius:4px;
  background:#eef6f0;border:1px solid #cfe4d6;color:#14532d;
  font-size:13.5px;line-height:1.35}
.sz-spar b{font-size:16.5px;font-weight:600;font-variant-numeric:tabular-nums}
.sz-spar.aus-grau{background:var(--plane);border-color:var(--line);
  color:var(--ink-3)}

.sz-posten{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.sz-posten .p{display:flex;justify-content:space-between;gap:10px;
  align-items:baseline;font-size:13.5px;margin:0 0 5px}
.sz-posten dt{color:var(--ink-2)}
.sz-posten dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sz-posten .neben{font-size:12.5px;margin-top:-2px}
.sz-posten .neben dt{color:var(--ink-3)}
.sz-posten dd.gut{color:var(--gut)}

.sz-jahr{margin:11px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.sz-hinweis{margin:9px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
/* Hinweis auf fachliche Pruefung. Bewusst KEIN Warnkasten: es ist ein Rat,
   keine Fehlermeldung. Ruhige Flaeche, Akzentlinie links, damit er sich vom
   Fliesztext abhebt, ohne den Blick zu kapern. Siehe ui.js, ratKasten(). */
.rat{margin:16px 0 0;padding:11px 14px;border-left:3px solid var(--akzent);
  background:var(--akzent-schleier);border-radius:0 var(--radius) var(--radius) 0;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:74ch}
.rat b{color:var(--ink)}
.sz-fuss{margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:74ch}
.sz-fuss b{color:var(--ink)}
.sz-fuss a{color:var(--akzent);text-decoration:none;
  border-bottom:1px solid var(--akzent-rand);white-space:nowrap}
.sz-fuss a:hover{border-bottom-color:var(--akzent)}
#szenarien{scroll-margin-top:var(--klebe-oben)}

@media(max-width:620px){
  .sz-karten{grid-template-columns:1fr}
  .sz-zahl{font-size:25px}
}

/* Verantwortlichkeit mit Berufsbezeichnung - etwas kraeftiger als der uebrige
   Fusstext, weil es kein Kleingedrucktes ist, sondern die Angabe, wer hier
   steht. Siehe assets/fuss.php. */
.fuss-autor{color:var(--ink-2);margin-top:18px !important;
  padding-top:14px;border-top:1px solid var(--line-strong)}
.fuss-autor b{color:var(--ink)}
.fussmenue{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px !important}
.fussmenue a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:1px}
.fussmenue a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext{max-width:1060px;margin:0 auto;padding:44px 22px 70px}
.rechtstext h1{font:var(--font-h1);margin:0 0 6px;letter-spacing:-.02em}
.rechtstext h2{font-size:17px;font-weight:600;color:var(--ink);margin:34px 0 8px;
  max-width:72ch;letter-spacing:-.005em}
.rechtstext p{margin:0 0 12px;max-width:72ch;color:var(--ink-2);font-size:15.5px;line-height:1.65}
.rechtstext b{color:var(--ink);font-weight:600}
.rechtstext .vorspann{font-size:17px;color:var(--ink);margin-top:14px;max-width:64ch}
.rechtstext .anschrift{font-variant-numeric:tabular-nums;color:var(--ink)}
.rechtstext a{color:var(--akzent)}
.rechtstext .zurueck{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:15px}
.rechtstext .zurueck a{text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
/* Fehlende Anbieterangabe - soll auffallen, solange die Seite nicht oeffentlich ist. */
mark.offen{background:#fdf3d6;color:#7a5a00;padding:1px 6px;border-radius:3px;
  font-size:.92em;font-weight:600}
/* Hinweis vor der Freischaltung. Faellt weg, sobald die Anschrift gepflegt ist. */
.warnkasten{max-width:72ch;margin:20px 0 8px;padding:13px 15px;border-radius:var(--radius);
  background:#fdf3d6;border-left:3px solid var(--warn);color:#6b4e00;
  font-size:14.5px;line-height:1.6}
.warnkasten b{color:#4d3800}

/* ---------- Leiste am unteren Bildschirmrand ----------
   Was von der Abfindung bleibt, steht dauerhaft unten im Bild - auf jeder
   Breite, nicht nur auf dem Telefon. Unten und nicht oben, weil dort die
   Kopfzeile mit dem Menue sitzt und zwei Leisten uebereinander den Blick auf
   den Inhalt einschnueren wuerden.
   Auf dem Telefon laeszt sie sich zusaetzlich antippen und faehrt die volle
   Uebersicht aus; auf dem Schreibtisch steht die Uebersicht ohnehin daneben,
   dort ist sie nur Anzeige. */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);
  border-top:1px solid var(--line-strong);display:flex;justify-content:space-between;
  align-items:center;gap:14px;width:100%;border-left:0;border-right:0;border-bottom:0;
  padding:11px 20px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -1px 10px rgba(0,0,0,.06);font:inherit;text-align:left;cursor:pointer}
@media(min-width:900px){
  /* Auf dem Schreibtisch mittig gesetzt wie der uebrige Inhalt, ruhiger im
     Schriftgrad, und der Pfeil entfaellt - es gibt nichts auszufahren. */
  .leiste{cursor:default;padding:10px 22px calc(10px + env(safe-area-inset-bottom))}
  .leiste-innen{max-width:1240px;margin:0 auto;width:100%;
    display:flex;justify-content:space-between;align-items:center;gap:22px}
  .leiste-pfeil{display:none}
  .leiste b{font-size:20px}
  /* Damit die Fusszeile nicht unter der Leiste verschwindet. */
  .fuss{padding-bottom:64px}
}
.leiste span{font-size:13px;color:var(--ink-3)}
.leiste b{font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.leiste-pfeil{flex:none;font-size:11px;color:var(--ink-3);transition:transform .18s}
.leiste-schleier{display:none;position:fixed;inset:0;z-index:35;
  background:rgba(15,25,35,.34);opacity:0;transition:opacity .18s}

@media(max-width:899px){
  .leiste-schleier{display:block;pointer-events:none}
  /* Die Uebersicht faehrt von unten ueber die Seite - zugeklappt ist sie
     vollstaendig aus dem Bild, damit sie nichts verdeckt. */
  .ergebnisspalte{position:fixed;left:0;right:0;bottom:0;z-index:38;
    background:var(--surface);border-top:1px solid var(--line-strong);
    border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.14);
    padding:18px 18px calc(74px + env(safe-area-inset-bottom));
    max-height:82vh;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(102%);transition:transform .22s ease;visibility:hidden}
  body.leiste-offen .ergebnisspalte{transform:translateY(0);visibility:visible}
  body.leiste-offen .leiste-schleier{opacity:1;pointer-events:auto}
  body.leiste-offen .leiste-pfeil{transform:rotate(180deg)}
  body.leiste-offen{overflow:hidden}
  .ergebnisspalte .ergebnis-rest{margin-top:14px}
}

/* ---------- Optimierungsblock ---------- */
.optimierung{padding:44px 0 0;border-top:1px solid var(--line);margin-top:48px}
.optimierung h2{font:600 24px/1.2 inherit;
  margin:0 0 6px;letter-spacing:-.015em}
.opt-intro{margin:0 0 22px;color:var(--ink-2);font-size:15.5px;max-width:60ch}

.opt-liste{display:grid;gap:12px}
.massnahme{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;transition:border-color .12s}
.massnahme:hover{border-color:var(--line-strong)}
.mz{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:13px;
  padding:15px 17px;cursor:pointer}
.mz input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--akzent);flex:none}
.mz-text{min-width:0}
.mz-text b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35}
.mz-sub{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.mz-wert{font-size:16px;font-weight:600;color:var(--gut);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:1px}
.mz-feld{padding:0 17px 16px 50px;border-top:1px solid var(--line);margin-top:-1px}
.mz-feld .eingabe{max-width:220px;margin-top:14px}
.mz-label{display:block;font-size:13.5px;color:var(--ink-2);margin-top:14px}
.mz-info{margin:11px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3);max-width:68ch}
/* Zwischenüberschrift in einem Erklärtext: eigene Zeile mit etwas Luft davor,
   damit die Absätze nicht ineinanderlaufen. */
.mz-info .ih{display:block;margin-top:11px;color:var(--ink-2);font-weight:600}
.mz-info .ih:first-child{margin-top:0}
.mz-info b{color:var(--ink-2);font-weight:600}

.opt-summe{margin-top:20px;padding:14px 16px;background:var(--akzent-schleier);
  border-radius:var(--radius);font-size:15px;color:var(--ink-2);line-height:1.55}
.opt-summe b{color:var(--ink)}
.opt-kante{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-3)}
.opt-kante b{color:var(--ink-2)}

@media(max-width:640px){
  .optimierung{padding-top:34px;margin-top:36px}
  .mz{grid-template-columns:20px 1fr;gap:11px;padding:14px}
  .mz-wert{grid-column:2;padding-top:6px}
  .mz-feld{padding:0 14px 14px 45px}
}
.erg-potenzial{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.erg-potenzial b{color:var(--ink-2);font-weight:600}
.erg-potenzial a{color:var(--akzent);text-decoration:none;
  border-bottom:1px solid var(--line-strong);white-space:nowrap}
.opt-gruppe{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 0 4px}
.opt-liste+.opt-gruppe{margin-top:30px}
.opt-gruppe-sub{margin:0 0 13px;font-size:13.5px;color:var(--ink-3);max-width:62ch;line-height:1.5}

/* Mobilleiste mit zwei Werten */
.leiste-teil{display:flex;flex-direction:column;gap:1px;min-width:0}
.leiste-teil.rechts{text-align:right;align-items:flex-end}
.leiste-teil.rechts b{color:var(--gut)}

/* ---------- Was nach der Abfindung zu regeln ist ---------- */
.nachher{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.nachher-titel{font:300 clamp(21px,2.4vw,26px)/1.25 inherit;
  letter-spacing:.1em;text-transform:uppercase;letter-spacing:-.015em;
  margin:0 0 24px}
.nachher-sub{margin:-14px 0 24px;font-size:15.5px;line-height:1.6;
  color:var(--ink-2);max-width:80ch}
.nb{margin-bottom:38px}
/* Aufzählung innerhalb eines Schritts - kompakter als eigene Absätze. */
.s-inhalt p br + b{display:inline}
.s-inhalt p{max-width:86ch}
.nb h3{font-size:19px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.nb-sub{margin:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:78ch}
.nb-sub b{color:var(--ink);font-weight:600}
.nb-paar{display:grid;gap:20px}
@media(min-width:900px){.nb-paar{grid-template-columns:1fr 1fr;gap:24px}}
.nb-karte{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;border-top-width:3px}
.nb-karte.krit{border-top-color:var(--krit)}
.nb-karte.warn{border-top-color:var(--warn)}
.nb-marke{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;margin-bottom:9px}
.nb-karte.krit .nb-marke{background:#fbeeed;color:#7f2620}
.nb-karte.warn .nb-marke{background:#fdf3d6;color:#6b4e00}
.nb-karte h4{font-size:17px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.nb-karte p{margin:0 0 11px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.nb-karte p:last-child{margin-bottom:0}
.nb-karte b{color:var(--ink);font-weight:600}
.nb-fein{font-size:13.5px!important;color:var(--ink-3)!important}
.nb-warn,.nb-gut{padding:11px 13px;border-radius:var(--radius);font-size:14px!important}
.nb-warn{background:#fbeeed}
.nb-gut{background:#eef6f0}
.nb-tun{margin-top:20px;padding:15px 17px;border-radius:var(--radius);
  background:var(--akzent-schleier);border:1px solid var(--akzent-rand);
  font-size:15px;line-height:1.6;color:var(--ink-2);max-width:88ch}
.nb-tun b{color:var(--ink);font-weight:600}

/* Ueber die volle Breite: Auf dem Schreibtisch stehen die Schritte in zwei
   Spalten nebeneinander statt untereinander. Das halbiert die Hoehe des
   Blocks und nutzt den Platz, der rechts sonst leer bliebe. Die Ziffern
   laufen dabei weiter durch - counter-reset steht am ol, nicht an der Spalte. */
.schritte{list-style:none;margin:0;padding:0;counter-reset:s}
@media(min-width:1100px){
  /* Mehrspaltensatz, NICHT Raster: Ein Raster fuellt zeilenweise, und weil die
     Schritte sehr unterschiedlich lang sind, stand neben einem kurzen Schritt
     ein halber Bildschirm Leerraum. columns fuellt der Hoehe nach und laeszt
     die Spalten von selbst gleich lang werden. */
  .schritte{columns:2;column-gap:48px}
  .schritte li{break-inside:avoid;-webkit-column-break-inside:avoid;
    border-top:1px solid var(--line)}
  /* Der erste Schritt jeder Spalte soll ohne Strich beginnen. Welcher das ist,
     weisz nur der Umbruch - deshalb bleibt der Strich stehen und der allererste
     wird gezielt entfernt. */
  .schritte li:first-child{border-top:0}
  .s-inhalt p{max-width:none}
}
.schritte li{display:grid;grid-template-columns:30px 1fr;gap:14px;
  padding:16px 0;border-top:1px solid var(--line)}
.schritte li:first-child{border-top:0;padding-top:0}
.s-nr{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:99px;background:var(--akzent);color:#fff;
  font-size:14px;font-weight:600;flex:none}
.s-frist{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.s-inhalt>b{display:block;font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.4;margin-bottom:5px}
.s-inhalt p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:82ch}
.s-inhalt p b{color:var(--ink);font-weight:600}
.s-inhalt a{color:var(--akzent);white-space:nowrap}
.nb-fuss{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:82ch}

/* ---------- Prüfschema "Begünstigung sichern" ---------- */
.pruef{max-width:1060px;margin:0 auto;padding:40px 22px 80px}
/* Auf den Unterseiten steht die Einleitung allein und darf breiter laufen als
   im Rechner, wo daneben die Zahlenspalte liegt. */
.pruef .intro{max-width:56ch}
/* Einleitung und Warnkasten stehen in der linken Spalte, damit der Kasten
   rechts auf gleicher Höhe beginnt - wie im Rechner. */
.pruef-raster{display:grid;gap:34px;margin-top:0}
@media(min-width:900px){
  .pruef-raster{grid-template-columns:minmax(0,1fr) 380px;gap:52px}
  /* Der Kasten bleibt über den ganzen Scrollweg stehen. Klebepunkt ist die
     Unterkante der klebenden Kopfzeile, sonst verschwindet er darunter.
     Ist er höher als das Fenster, scrollt er in sich selbst. */
  .pruef-spalte,.pruef-ergebnis{position:sticky;top:var(--klebe-oben);align-self:start;
    max-height:calc(100vh - var(--klebe-oben) - 24px);
    overflow-y:auto;overscroll-behavior:contain}
  .pruef-spalte::-webkit-scrollbar,.pruef-ergebnis::-webkit-scrollbar{width:7px}
  .pruef-spalte::-webkit-scrollbar-thumb,
  .pruef-ergebnis::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
  /* Die linke Spalte trägt die Zeilenhöhe - ohne Mindestmaß hätte der klebende
     Kasten bei kurzen Seiten keinen Scrollweg. */
  .pruef-fragen{min-height:calc(100vh - var(--klebe-oben))}
}
.pruef-fragen>.warnkasten{margin:0 0 26px}
.frage{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 8px;margin-bottom:16px}
.frage h2{font-size:17px;font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.frage .nr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:99px;background:var(--akzent);color:#fff;font-size:13px;font-weight:600;flex:none}
.frage-sub{margin:0 0 14px;font-size:14px;color:var(--ink-3);line-height:1.5}
.wahl{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.wahl input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--akzent);flex:none}
.wahl b{display:block;font-size:15px;font-weight:500;color:var(--ink);line-height:1.4}
.wahl i{display:block;font-style:normal;font-size:13px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.unterfrage{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.frage .paar{margin-bottom:14px}

.ampel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.ampel-kopf{padding:18px}
.ampel-kopf.gut{background:#eef6f0;border-bottom:1px solid #cfe4d6}
.ampel-kopf.warn{background:#fdf3d6;border-bottom:1px solid #ecdcae}
.ampel-kopf.krit{background:#fbeeed;border-bottom:1px solid #f0d3d0}
.ampel-titel{margin:0;font:600 20px/1.25 inherit;
  letter-spacing:-.01em}

.ampel-kopf.gut .ampel-titel{color:#14532d}
.ampel-kopf.warn .ampel-titel{color:#6b4e00}
.ampel-kopf.krit .ampel-titel{color:#7f2620}
.ampel-unter{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ampel-liste{padding:4px 18px 6px}
.ap{padding:13px 0;border-bottom:1px solid var(--line)}
.ap:last-child{border-bottom:0}
.ap .apk{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px;padding-left:16px;position:relative}
.ap .apk::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:99px}
.ap.gut .apk::before{background:var(--gut)}
.ap.warn .apk::before{background:var(--warn)}
.ap.krit .apk::before{background:var(--krit)}
.ap p b{font-weight:600;color:var(--ink)}
.ap p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-3);padding-left:16px}
.ampel-fuss{margin:0;padding:12px 18px 16px;font-size:13px;color:var(--ink-3);
  border-top:1px solid var(--line)}
.ampel-fuss a{color:var(--akzent)}

/* ---------- Seite "Abfindungshöhe" ---------- */
.pruef-ergebnis{min-width:0}
.erg-box{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.erg-box .erg-frage{margin:0;font-size:14px;color:var(--ink-3)}
.erg-box .erg-zahl{margin:4px 0 2px;font:300 clamp(26px,3.4vw,34px)/1.15 inherit;
  letter-spacing:-.02em;color:var(--ink)}
.erg-box .erg-zahl .bis{display:block;font:400 14px/1.4 "Segoe UI",Roboto,-apple-system,sans-serif;
  color:var(--ink-3);margin:2px 0}
.erg-box .erg-von{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.erg-box .erg-von b{color:var(--ink-2);font-weight:600}
.erg-box .posten{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.erg-box .posten-zeile{display:flex;justify-content:space-between;gap:14px;
  padding:5px 0;font-size:14px}
.erg-box .posten-zeile dt{color:var(--ink-3);margin:0}
.erg-box .posten-zeile dd{margin:0;color:var(--ink);font-weight:600}
.erg-box .posten-zeile.hin dd{color:var(--warn)}
.erg-box .erg-hinweis{margin:14px 0 0;padding:11px 13px;background:var(--plane);
  border-radius:var(--radius);font-size:13px;line-height:1.55;color:var(--ink-3)}
.erg-box .erg-hinweis b{color:var(--ink-2)}
.erg-box .erg-fuss{margin:14px 0 0;font-size:12.5px;color:var(--ink-4);line-height:1.5}

.hoehe-text{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);max-width:76ch}
.hoehe-text h2{font-size:19px;font-weight:600;margin:30px 0 12px;letter-spacing:-.01em}
.hoehe-text h2:first-child{margin-top:0}
.hoehe-text p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.hoehe-text a{color:var(--akzent)}
.gruende,.quellen{list-style:none;margin:0 0 18px;padding:0}
.gruende li{position:relative;padding:0 0 0 26px;margin-bottom:13px;
  font-size:15px;line-height:1.6;color:var(--ink-2)}
.gruende li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-radius:99px;background:var(--ink-4)}
.gruende li.g-plus::before{background:var(--gut)}
.gruende li.g-minus::before{background:var(--krit)}
.gruende li.g-basis::before{background:var(--akzent)}
.gruende li b{color:var(--ink);font-weight:600}
.quellen li{padding:0 0 0 18px;margin-bottom:9px;font-size:15px;line-height:1.6;
  color:var(--ink-2);position:relative}
.quellen li::before{content:"–";position:absolute;left:0;color:var(--ink-4)}
.quellen li b{color:var(--ink);font-weight:600}
.warnkasten.schluss{max-width:76ch;margin-top:26px}
.hoehe .warnkasten{max-width:76ch}

.pruef-fuss{margin-top:40px;padding-top:26px;border-top:1px solid var(--line);max-width:72ch}
.pruef-fuss h2{font-size:17px;font-weight:600;margin:0 0 8px}
.pruef-fuss p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pruef-fuss .zurueck{margin-top:22px;font-size:15px}
.pruef-fuss .zurueck a{color:var(--akzent);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.mz-eng{white-space:nowrap}
/* Warum diese Zeile eine andere Quote hat als ihre Nachbarn. Gedaempft, weil
   es eine Fuszsnote ist - aber sie muss dastehen, sonst liest sich die Liste
   wie ein Rechenfehler. Siehe ui.js, mZeile(). */
.mz-warum{white-space:nowrap;font-style:italic;color:var(--ink-4)}
.mp.haken{width:auto;height:auto;margin-top:0;background:none;color:var(--gut);
  font-size:12px;line-height:1.35;font-weight:700}
.mrow.fertig .mrow-n{color:var(--ink-3);font-weight:400}
.erg-vorher{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.erg-vorher b{color:var(--ink-2);font-weight:600}
.erg-vorher .gut{color:var(--gut);font-weight:600}
.erg-vorher .warn{color:var(--warn);font-weight:600}
.mz-staffel{display:block;margin-bottom:12px;padding:11px 13px;background:var(--akzent-schleier);
  border-radius:8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.mz-staffel b{color:var(--ink);font-weight:600}

/* ---------- Wirkung der Massnahmen ---------- */
.wirkung{margin-top:16px;padding:16px;border-radius:var(--radius);
  background:#eef6f0;border:1px solid #cfe4d6}
.wirkung-kopf{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#2b6e48}
.wirkung-zahl{margin:4px 0 0;font:400 30px/1.1 inherit;color:#14532d;
  font-variant-numeric:tabular-nums}
.wirkung-unter{margin:2px 0 0;font-size:13.5px;color:#2b6e48}
.wirkung-posten{margin:12px 0 0;padding:0;border-top:1px solid #cfe4d6}
.wirkung-posten .p{border-bottom:0;padding:6px 0 0}
.wirkung-posten dt{font-size:13.5px;color:#2b6e48}
.wirkung-posten dd{font-size:14.5px;color:#14532d}

.feldwarnung{margin:7px 0 0;padding:9px 11px;border-radius:8px;background:#fdf3d6;
  border:1px solid #ecdcae;font-size:13px;line-height:1.5;color:#6b4e00}
.wirkung-posten .p.stark{border-top:1px solid #cfe4d6;margin-top:6px;padding-top:8px}

.opt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:6px}
.opt-kopf h2{margin:0}
.zuruecksetzen{border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);border-radius:99px;padding:7px 15px;font:inherit;font-size:13.5px;
  cursor:pointer;white-space:nowrap}
.zuruecksetzen:hover{border-color:var(--akzent);color:var(--akzent)}
.mz-tab{width:100%;border-collapse:collapse;margin:9px 0 0}
.mz-tab td{padding:5px 0;border-top:1px solid rgba(27,58,92,.14);font-size:13.5px;
  color:var(--ink-2)}
.mz-tab td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mz-staffel i{display:block;margin-top:9px;font-style:normal;font-size:12.5px;
  color:var(--ink-3);line-height:1.5}
.erg-spar{margin:14px 0 0;padding:11px 13px;border-radius:8px;background:#eef6f0;
  border:1px solid #cfe4d6;font-size:13.5px;line-height:1.45;color:#2b6e48}
.erg-spar span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase}
.erg-spar b{font-size:19px;font-weight:600;color:#14532d;font-variant-numeric:tabular-nums}
.wirkung{margin-top:0}

/* Zwei Felder nebeneinander in einer Massnahme: unterschiedlich lange
   Beschriftungen duerfen die Eingabefelder nicht gegeneinander verschieben. */
.mz-feld .paar{align-items:end;margin-bottom:0}
.mz-feld .paar .feld{display:flex;flex-direction:column;margin-bottom:0}
.mz-feld .paar .feld label{flex:1;align-content:start}
.mz-feld .paar .eingabe{margin-top:8px}
.posten-rest{margin-top:0;border-top:0}

/* Der mitscrollende Teil bekommt denselben Rahmen wie der klebende Kopf -
   sonst stuenden einzelne Zeilen frei auf der Seitenflaeche. */
.ergebnis-rest{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 18px;margin-top:16px}
.ergebnis-rest .posten-rest{margin-top:0;border-top:0}
.ergebnis-rest .posten-rest .p:first-child{padding-top:0}

/* ---------- Spalte der Moeglichkeiten ---------- */
.liste-box{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 16px}
.liste-box:empty,.listenspalte:has(.liste-box:empty){display:none}
.liste-box .tun{margin-top:0;padding-top:0;border-top:0}

/* Hinweise und Rechenweg unter den Massnahmen */
/* Der Block steht jetzt unter allen drei Spalten - eine Trennlinie macht
   den Wechsel vom Bedienen zum Erklaeren sichtbar. */
.details{margin-top:40px;padding-top:34px;border-top:1px solid var(--line)}
.details .rechenweg{margin-top:22px}
.details .tipp,.details .achtung{max-width:72ch}
details.tun-fuss{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
details.tun-fuss summary{cursor:pointer;font-size:12.5px;color:var(--akzent);
  list-style:none;padding-left:14px;position:relative}
details.tun-fuss summary::-webkit-details-marker{display:none}
details.tun-fuss summary::before{content:"▸";position:absolute;left:0;font-size:11px}
details.tun-fuss[open] summary::before{content:"▾"}
details.tun-fuss p{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* Umschalter zum Ein- und Ausklappen einer Massnahme */
.mz-klapp{display:block;width:100%;text-align:left;border:0;background:none;
  border-top:1px solid var(--line);padding:9px 16px 9px 45px;font:inherit;
  font-size:12.5px;color:var(--akzent);cursor:pointer}
.mz-klapp:hover{background:var(--akzent-schleier)}
.mz-tab tr.jetzt td{color:var(--ink);font-weight:600}
.mz-tab tr:first-child td{border-top:0;padding-top:0}

/* Hinweis auf ein Zusammenspiel zweier Massnahmen - steht unter der Gruppe,
   nicht in einer Karte, weil er keine eigene Massnahme ist. */
.opt-hebel{margin:12px 0 0;padding:12px 14px;border-radius:var(--radius);
  background:var(--akzent-schleier);border:1px solid var(--akzent-rand);
  font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.opt-hebel b{color:var(--ink);font-weight:600}
.opt-hebel.aus{display:none}

/* ---------- Schaubilder ---------- */
.schaubilder{display:grid;gap:26px;margin-top:6px}
@media(min-width:940px){.schaubilder{grid-template-columns:1fr 1fr;gap:30px}}
.schaubild{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 18px 16px}
.schaubild figcaption{margin-bottom:14px;position:relative;padding-right:0}
/* Die Gesamtersparnis sitzt in der oberen rechten Ecke der Karte. */
.gesamt-marke{position:absolute;top:-4px;right:0;text-align:right;
  background:#eef5f0;border:1px solid #cfe3d6;border-radius:8px;
  padding:6px 11px;line-height:1.25}
.gesamt-marke b{display:block;font-size:16px;font-weight:600;color:#1a6b3c;
  white-space:nowrap}
.gesamt-marke em{display:block;font-style:normal;font-size:11.5px;
  color:var(--ink-3);white-space:nowrap}
@media(max-width:560px){
  .gesamt-marke{position:static;display:inline-block;margin-top:10px;text-align:left}
}
.schaubild figcaption b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.schaubild figcaption>span{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}
.schaubild figcaption b{padding-right:0}
.kurve-huelle{width:100%;position:relative}
.kurve{display:block;width:100%;height:265px;overflow:visible}
/* Waagerechte und senkrechte Linien ohne Kantenglaettung: sonst landen sie auf
   halben Bildpunkten und wirken weich statt gerade. */
.kurve .gitter{stroke:var(--line);stroke-width:1;
  vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.kurve .achslinie{stroke:var(--line-strong);stroke-width:1;
  vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
/* Die Achsenbeschriftung liegt als HTML ueber dem Bild - im SVG wuerde sie
   mit der Zeichenflaeche in die Breite gezogen. left entspricht BILD.lx. */
.y-marke{position:absolute;right:calc(100% - 11% + 6px);transform:translateY(-50%);
  font-size:12px;line-height:1;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums;pointer-events:none}
/* Die Klammer ueber dem Fuenftel-Abschnitt: senkrecht gestrichelt hoch,
   oben durchgezogen verbunden. */
/* Die Punkte der Tarifkurve. Kurze Linien mit runder Kappe statt <circle>:
   die Zeichenfläche ist ungleich gestreckt, echte Kreise würden zu Ovalen. */
.kurve .tp{stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media(max-width:620px){
  /* Schmal wirken sie sonst wie eine fette Linie: halbe Dichte, dünner. */
  .kurve .tp{stroke-width:1.7}
  .kurve .tp.dicht{display:none}
}
.kurve .klammer{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3;
  vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.kurve .klammer.voll{stroke-dasharray:none;stroke-width:1.4;stroke:var(--ink-2)}
.kurve .klammer.zart{stroke:var(--ink-4)}
.kurve .klammer.zart.voll{stroke:var(--ink-3);stroke-width:1.2}

/* Beschriftung der Klammer - liegt als HTML ueber dem Bild, damit die
   Schrift nicht mit dem SVG verzerrt wird. */
/* Die Schilder liegen MITTIG AUF der waagerechten Klammerlinie und decken sie
   dort ab. Dadurch entsteht die Lücke, die den Beschriftungen Luft gibt -
   vorher saßen sie oben auf der Linie und wirkten angeklebt. */
.klammer-schild,.normal-schild{position:absolute;transform:translate(-50%,-50%);
  text-align:center;width:max-content;max-width:100%;
  line-height:1.3;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:8px;
  padding:5px 10px;pointer-events:none;
  box-shadow:0 0 0 4px var(--surface)}
/* Zwei Haelften: die Steuer auf das Fuenftel und - direkt daneben - das
   Ergebnis der Verfuenffachung. Das Rechenzeichen steht dazwischen, damit
   der Schritt im Bild selbst ablesbar ist. */
.klammer-schild{display:flex;align-items:center;gap:9px;padding:5px 11px}
.ks-teil{display:block}
.ks-mal{flex:none;font-size:12px;font-weight:700;color:#8a6212;
  padding:0 1px;border-left:1px solid var(--line);padding-left:9px}
.klammer-schild b{display:block;color:var(--ink);font-weight:600;
  font-size:14px;white-space:nowrap}
.klammer-schild em{display:block;font-style:normal;font-size:11.5px;
  color:var(--ink-3);white-space:nowrap}
.ks-teil.erg b{color:#8a6212}
/* Das Schild ueber dem uebrigen Einkommen - kleiner, weil es den
   Nebenschauplatz zeigt. */
.normal-schild{display:block;border-color:var(--line);background:var(--plane)}
.normal-schild b{display:block;color:#1a6b3c;font-weight:600;font-size:13px;
  white-space:nowrap}
.normal-schild em{display:block;font-style:normal;font-size:11px;
  color:var(--ink-3);white-space:nowrap}
.schaubild.leer .klammer-schild,.schaubild.leer .normal-schild{display:none}
/* Auf schmalen Schirmen reicht die Breite nicht, um das Schild ueber der
   Klammer zu halten, ohne dass es aus der Karte ragt - dort steht es
   mittig. Die Klammer im Bild zeigt weiterhin, worauf es sich bezieht. */
@media(max-width:620px){
  .klammer-schild{left:50%!important;gap:7px;padding:5px 9px}
  .klammer-schild b{font-size:13px}
  .normal-schild{left:26%!important}
}

/* Der zweite Schritt der Fuenftelregelung - bewusst als eigene Zeile,
   damit im Bild selbst nur eine kurze Zahl steht. */
.mal-fuenf{display:flex;align-items:baseline;gap:9px;margin:12px 0 0;
  padding:9px 12px;background:var(--plane);border-radius:8px;
  font-size:13px;line-height:1.5;color:var(--ink-3)}
.mal-fuenf span{flex:none;font-weight:700;font-size:13px;color:#8a6212}
.mal-fuenf em{flex:1 1 auto;min-width:0;font-style:normal}
.mal-fuenf b{color:var(--ink);font-weight:600}

/* Das Band unter der Waagerechten zeigt die Laenge der beiden Abschnitte.
   --a und --b sind ihre Breitenanteile. */
.x-band{display:flex;gap:2px;margin-top:9px;height:5px}
.x-band .xb{flex:none;border-radius:2px;display:block}
.x-band .xb.eink{width:var(--a);background:var(--serie-1);opacity:.45}
.x-band .xb.abf{width:var(--b);flex:1 1 auto;background:var(--serie-2);opacity:.8}
/* Die Beschriftung darunter laeuft frei, damit sie in schmalen Spalten
   nicht in die Breite des jeweiligen Abschnitts gezwaengt wird. */
.x-legende{display:flex;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;margin-top:8px}
.x-legende .xl{display:flex;align-items:baseline;gap:6px;font-size:12.5px;
  line-height:1.4;color:var(--ink-3);flex:0 1 auto}
.x-legende .xl:last-child{text-align:right}
.x-legende .xl i{width:9px;height:9px;border-radius:3px;flex:none;
  align-self:center}
.x-legende .xl.eink i{background:var(--serie-1);opacity:.55}
.x-legende .xl.abf i{background:var(--serie-2);opacity:.85}
.x-legende .xl b{color:var(--ink-2);font-weight:600;white-space:nowrap}
@media(max-width:520px){.x-legende .xl{font-size:12px}}

.kurve-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.kurve-legende .lg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--ink-2)}
.kurve-legende i{width:14px;height:3px;border-radius:2px;flex:none}
.kurve-legende i.strich{background:repeating-linear-gradient(90deg,
  var(--ink-4) 0 4px,transparent 4px 7px);height:2px}
.kurve-fuss{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.kurve-fuss b{color:var(--ink-2);font-weight:600}
.schaubild.leer{background:var(--plane);border-style:dashed}
.schaubild.leer figcaption b{color:var(--ink-2)}

/* ==================================================================
   ENTWURF 3 - neue Bausteine
   Aufbau nach dem Vorbild der Finanzfluss-Rechner, Gestaltung nach dem
   Briefkopf. Alles darunter ist neu ab 6.0.0.
   ================================================================== */

/* ---------- Eingabe: Schieber und Feld nebeneinander ----------
   Der Schieber macht die Groeszenordnung begreifbar und laedt zum Spielen
   ein; das Feld daneben bleibt fuer den, der den genauen Betrag kennt.
   Beide schreiben denselben Wert - wer tippt, sieht den Schieber wandern
   und umgekehrt. */
.zeile{margin-bottom:18px}
.zeile:last-child{margin-bottom:0}
.zeile>label,.zeile>.lbl{display:block;font-size:14.5px;font-weight:400;
  color:var(--ink);margin-bottom:9px;letter-spacing:.01em}
.zeile .hilfe{display:block;font-size:12.5px;font-weight:300;color:var(--ink-3);
  margin-top:3px;letter-spacing:.005em}
.regler{display:grid;grid-template-columns:minmax(0,1fr) 128px;
  column-gap:16px;align-items:center}
@media(max-width:420px){.regler{grid-template-columns:minmax(0,1fr) 104px;column-gap:10px}}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  background:transparent;height:22px;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:var(--line-strong)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--line-strong)}
/* Die gefuellte Strecke links vom Griff wird per Farbverlauf gezeichnet -
   ui.js setzt dafuer --f (Anteil in Prozent). Ohne das koennte man den
   zurueckgelegten Weg nicht sehen; genau der macht den Schieber lesbar. */
input[type=range]{--f:0%}
input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--akzent) var(--f),var(--line-strong) var(--f))}
input[type=range]::-moz-range-track{
  background:linear-gradient(90deg,var(--akzent) var(--f),var(--line-strong) var(--f))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:var(--akzent);
  border:2px solid var(--surface);box-shadow:0 1px 3px rgba(35,44,68,.28);
  margin-top:-7px;transition:transform .1s}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;
  background:var(--akzent);border:2px solid var(--surface);
  box-shadow:0 1px 3px rgba(35,44,68,.28)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--akzent-schleier)}
.regler .eingabe input{padding:9px 30px 9px 11px;font-size:15.5px;text-align:right}
.regler .eingabe .euro{font-size:14px;right:11px}

/* ---------- Ergebnis ----------
   Eine grosze Zahl, ein Satz dazu, darunter das Bild. Genau die Reihenfolge,
   in der ein Mensch fragt: wie viel? warum? woraus? */
.erg-haupt{padding-bottom:20px}
.erg-frage{margin:0;font-size:13px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.erg-zahl{font:var(--font-zahl);margin:8px 0 0;letter-spacing:-.01em;color:var(--ink)}
/* Feste Mindesthoehe wie beim Balkenbereich: Der Satz waechst beim Anhaken
   von zwei auf drei Zeilen ("Davon legen Sie X an ..."), und jede Aenderung
   oberhalb der Massnahmenliste verschiebt die Zeile, auf die gerade geklickt
   wurde. Drei Zeilen sind der Hoechstfall im Regelbetrieb. */
.erg-satz{margin:12px 0 0;font-size:14.5px;font-weight:300;color:var(--ink-2);
  max-width:46ch;min-height:4.6em}
@media(max-width:999px){.erg-satz{min-height:0}}
.erg-satz b{font-weight:500;color:var(--ink)}

/* ---------- Vergleichsbalken ----------
   Zwei gestapelte Balken uebereinander: oben, wie es ohne Zutun kaeme, unten
   mit den angehakten Massnahmen. Waagerecht, weil die Beschriftung dann
   lesbar im Balken steht und kein Kopfdrehen noetig ist.
   Zwischen den Segmenten 2 px Papierfarbe - ohne diese Fuge verschwimmen
   zwei Flaechen gleicher Helligkeit zu einer. */
/* Feste Mindesthoehe. Der Bereich waechst sonst beim ersten Anhaken von
   158 auf 243 px (zweiter Balken, Legende, Gewinnzeile) - und weil die
   Massnahmenkarte im Fluss darunter liegt, rutscht die Zeile, auf die man
   gerade geklickt hat, um 85 px nach unten weg. Genau das war gemeint mit
   "wenn ich Massnahmen anklicke, springe ich woanders hin".
   Gemessen bei 1100 und 1400 px; der Wert deckt den hoechsten Zustand ab. */
.bal-satz{margin:22px 0 0;min-height:248px}
@media(max-width:999px){.bal-satz{min-height:0}}
.bal-titel{font-size:12.5px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
.bal{display:flex;height:38px;border-radius:5px;overflow:hidden;gap:2px;
  background:var(--plane)}
.bal+.bal-titel{margin-top:20px}
.bal-teil{display:flex;align-items:center;padding:0 11px;min-width:0;
  font-size:13px;color:#fff;white-space:nowrap;overflow:hidden}
.bal-teil.netto{background:var(--serie-1)}
.bal-teil.steuer{background:var(--serie-2)}
.bal-teil.gebunden{background:var(--serie-3);color:var(--ink)}
/* Wird das Segment zu schmal fuer seine Beschriftung, verschwindet die
   Beschriftung - stehen bliebe sonst ein abgeschnittenes Wort. Die Legende
   darunter traegt die Zuordnung dann allein. */
.bal-teil.schmal{padding:0}
.bal-teil b{font-weight:500}
.bal-legende{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;
  font-size:12.5px;color:var(--ink-2)}
.bal-legende span{display:inline-flex;align-items:center;gap:7px}
.bal-legende i{width:9px;height:9px;border-radius:2px;flex:none}
.bal-legende .netto{background:var(--serie-1)}
.bal-legende .steuer{background:var(--serie-2)}
.bal-legende .gebunden{background:var(--serie-3)}
/* Der Gewinn zwischen beiden Balken - die eine Zahl, auf die es ankommt. */
.bal-gewinn{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14.5px;color:var(--ink-2)}
.bal-gewinn b{font-size:19px;font-weight:500;color:var(--gut)}

/* ---------- Massnahmen: nur Namen, keine Betraege ----------
   Bewusst OHNE Eurobetraege in der Zeile. Der vorige Entwurf zeigte je Zeile
   Betrag, Quote und Grenze - vier Zahlen, bevor ueberhaupt klar war, worum es
   geht. Was eine Massnahme bringt, steht jetzt eine Ebene tiefer, und was sie
   zusammen bringen, oben in der einen groszen Zahl. */
.mass-liste{margin:0;padding:0;list-style:none}
.mass-gruppe{font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin:20px 0 6px}
.mass-gruppe:first-child{margin-top:4px}
.mass{border-bottom:1px solid var(--line)}
.mass:last-child{border-bottom:0}
.mass-zeile{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;
  column-gap:12px;align-items:start;padding:13px 0;margin:0}
/* 24 px statt 17: Unter etwa 24 px wird ein Kaestchen auf dem Telefon zur
   Zielscheibe. Die eigentliche Klickflaeche ist ohnehin das Label daneben,
   das ueber die volle Zeilenbreite reicht - aber wer auf das Kaestchen
   zielt, soll es auch treffen. */
.mass-zeile input[type=checkbox]{width:24px;height:24px;margin:0;
  accent-color:var(--akzent);flex:none;cursor:pointer}
/* Das Label traegt den Zeiger, nicht die ganze Zeile: Sonst sieht auch der
   Aufklappknopf daneben nach "hier haken" aus. */
.mass-name{cursor:pointer}
.mass-name{font-size:15px;font-weight:400;color:var(--ink);letter-spacing:.005em}
.mass-sub{display:block;font-size:12.5px;font-weight:300;color:var(--ink-3);margin-top:2px}
/* Grau, solange die Massnahme im vorliegenden Fall nichts bringt - anhaken
   laeszt sie sich trotzdem, damit sichtbar bleibt, dass es sie gibt. */
.mass.leer .mass-name,.mass.leer .mass-sub{color:var(--ink-4)}
.mass-auf{border:0;background:none;padding:0;cursor:pointer;color:var(--ink-4);
  width:24px;height:24px;margin-top:0;line-height:1}
.mass-auf::after{content:"";display:block;width:6px;height:6px;margin:6px auto;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);transition:transform .18s}
.mass.offen .mass-auf::after{transform:rotate(-135deg);margin-top:9px}
.mass-auf:hover{color:var(--ink-2)}
.mass-box{padding:0 0 14px 34px}
.mass-box .eingabe{max-width:190px}
.mass-box .eingabe input{padding:8px 30px 8px 11px;font-size:15px;text-align:right}
.mass-info{margin:9px 0 0;font-size:12.5px;font-weight:300;color:var(--ink-3);line-height:1.5}

/* ---------- Aufklappbare Karte fuer die Einzelheiten ---------- */
.klapp{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);margin-top:20px}
.klapp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:10px;padding:18px 24px;font-size:15px;font-weight:400;color:var(--ink);
  letter-spacing:.01em}
.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary::after{content:"";width:7px;height:7px;margin-left:auto;
  border-right:1.4px solid var(--ink-3);border-bottom:1.4px solid var(--ink-3);
  transform:rotate(45deg);margin-top:-3px;transition:transform .18s}
.klapp[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.klapp .inhalt{padding:0 24px 22px}
@media(max-width:560px){.klapp>summary{padding:16px 17px}.klapp .inhalt{padding:0 17px 18px}}

/* ---------- Nachtrag 6.1.0: Ergebniszeile, Hinweiskarte, Aufklappbereich ---------- */

/* Die Fuenftelregelung als eine ruhige Zeile unter dem Balken - sie ist
   Ergebnis, nicht Rechenweg. */
.erg-fuenftel{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14px;color:var(--ink-3)}
.erg-fuenftel b{font-size:16px;font-weight:500;color:var(--ink-2)}

/* Hinweise stehen jetzt in einer eigenen Karte unter den Massnahmen. */
.hinweis-karte .tipp,.hinweis-karte .achtung{margin:0 0 14px}
.hinweis-karte>*:last-child{margin-bottom:0}

/* Der Aufklappbereich traegt nur noch Schaubilder und Rechenweg. Die
   Schaubilder brachten eigene Rahmen mit - im Kasten waren das Rahmen im
   Rahmen. Innen bleibt deshalb nur die Flaeche. */
.klapp .schaubilder{gap:22px}
.klapp .schaubild{border:0;background:transparent;padding:0}
.klapp .schaubild.leer{display:none}
.klapp .rechenweg{margin-top:22px}
@media(min-width:1000px){
  /* Zwei Schaubilder nebeneinander, solange Platz ist. */
  .klapp .schaubilder{display:grid;grid-template-columns:1fr 1fr}
}
.klapp .methodik{font-size:12.5px;color:var(--ink-4);line-height:1.55}


/* ---------- Klebende Ergebnisleiste ----------
   Das Ergebnis soll sichtbar bleiben, egal wo man steht. Zwei Wege sind
   dafuer schon gescheitert:
   1. die ganze rechte Spalte klebend und in sich scrollend - dann verschwand
      die Massnahmenliste in einem inneren, verdeckten Scrollweg;
   2. nur die Ergebniskarte klebend - sie ist rund 530 px hoch und deckte auf
      einem 900-px-Schirm die halbe Massnahmenliste zu.
   Deshalb jetzt eine schmale Leiste: Die grosze Karte steht normal im Fluss,
   und sobald sie oben aus dem Bild laeuft, faehrt unter der Kopfzeile eine
   Zeile mit den zwei Zahlen ein, die zaehlen. */
.erg-leiste{display:none;position:sticky;top:var(--klebe-oben);z-index:9;
  margin:0 0 -1px;padding:0 22px;
  background:var(--surface);border-bottom:1px solid var(--line);
  /* Zusammengefahren unsichtbar - kein display:none, sonst gaebe es keine
     Bewegung, sondern ein Springen. */
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .18s ease,opacity .14s ease}
.erg-leiste.da{max-height:64px;opacity:1}
.erg-leiste .innen{max-width:1240px;margin:0 auto;
  display:flex;align-items:baseline;gap:10px 26px;flex-wrap:wrap;padding:13px 0}
.erg-leiste .l-frage{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.erg-leiste .l-zahl{font-size:22px;font-weight:400;color:var(--ink);
  font-variant-numeric:tabular-nums}
.erg-leiste .l-plus{font-size:14.5px;color:var(--gut);margin-left:auto}
.erg-leiste .l-plus b{font-weight:500;font-variant-numeric:tabular-nums}
/* Auf schmalen Schirmen traegt die Leiste am unteren Rand dieselbe Zahl -
   zwei Leisten uebereinander waeren eine zu viel. */
@media(max-width:999px){.erg-leiste{display:none}}

/* Zweite, kleine Klappe innerhalb einer Massnahme - siehe massListeBauen(). */
.mass-mehr{margin-top:10px}
.mass-mehr>summary{cursor:pointer;list-style:none;font-size:12.5px;
  color:var(--akzent);display:inline-flex;align-items:center;gap:6px;
  padding:3px 0}
.mass-mehr>summary::-webkit-details-marker{display:none}
.mass-mehr>summary::after{content:"";width:5px;height:5px;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .18s}
.mass-mehr[open]>summary::after{transform:rotate(-135deg);margin-top:1px}
.mass-mehr .mass-info{margin-top:8px}

/* ---------- Unterseiten im Stil des Rechners (6.2.0) ----------
   Beguenstigung und Abfindungshoehe hatten noch die Anmutung von Entwurf 2:
   Ueberschrift links in Kleinbuchstaben, Fragen ohne Karte, Kaesten mit
   eigenen Farben. Sie bekommen dieselbe Kopfzone, dieselben Karten und
   dieselben Linien wie der Rechner - eine Seite, ein Auftritt. */
.kopfzone.links{text-align:left;margin:6px 0 30px}
.kopfzone.links::after{margin-left:0}
.kopfzone.links p{margin-left:0;max-width:52ch}

/* Die Fragen der Pruefstrecke werden zu Karten wie im Rechner. */
.pruef .frage{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:16px}
.pruef .frage>h2,.pruef .frage>h3{font-size:16px;font-weight:500;letter-spacing:.01em}
.pruef .warnkasten{border-radius:var(--radius)}
/* Die rechte Spalte der Unterseiten ebenfalls als Karte. */
.pruef-ergebnis>*{border-radius:var(--radius)}
@media(max-width:560px){.pruef .frage{padding:18px 17px}}

/* ---------- Vergleich: zwei Bahnen, eine Aussage (6.3.0) ----------
   Ersetzt den gestapelten Balken mit Legende. Jede Bahn zeigt nur, was von
   der Abfindung bleibt; der helle Rest ist, was nicht bleibt. Keine Legende
   noetig, weil es nichts zuzuordnen gibt. */
.verg-zeile{margin-bottom:18px}
.verg-zeile:last-of-type{margin-bottom:0}
.verg-titel{margin:0 0 7px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.verg-zeile.betont .verg-titel{color:var(--ink-2)}
.verg-bahn{height:30px;border-radius:5px;background:var(--plane);
  border:1px solid var(--line);overflow:hidden}
.verg-fuell{height:100%;background:var(--serie-3);
  transition:width .25s ease}
.verg-zeile.betont .verg-fuell{background:var(--serie-1)}
.verg-wert{margin:7px 0 0;display:flex;align-items:baseline;gap:10px;
  justify-content:space-between}
.verg-wert b{font-size:19px;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.verg-zeile.betont .verg-wert b{font-size:22px;color:var(--ink)}
.verg-wert span{font-size:12.5px;color:var(--ink-3)}
.verg-einsatz{margin:10px 0 0;font-size:13px;font-weight:300;color:var(--ink-3);
  line-height:1.5}
.verg-einsatz b{font-weight:500;color:var(--ink-2)}

/* Der Kantenhinweis ueber der Massnahmenliste - eine Grenze, einmal genannt. */
.kanten-hinweis{margin:0 0 4px;padding:13px 15px;border-radius:var(--radius);
  background:var(--akzent-schleier);border:1px solid var(--akzent-rand);
  font-size:13px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.kanten-hinweis b{font-weight:500;color:var(--ink)}
/* Die Rahmenangabe je Massnahme steht jetzt als eine Zeile, nicht als Tabelle. */
.mz-staffel{display:block;font-size:13px;color:var(--ink-2);margin-bottom:9px}

/* ---------- Die zwei Wege (6.4.0) ---------- */
.wege{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--line)}
.wege-kopf{margin:0 0 9px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.wege-zeile{margin:0;padding:8px 0;display:flex;align-items:baseline;
  justify-content:space-between;gap:14px;font-size:14.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
.wege-zeile:last-child{border-bottom:0}
.wege-zeile b{font-weight:500;color:var(--gut);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.wege-zeile.stark{color:var(--ink)}
.wege-zeile.stark b{font-size:16px}

/* Die Weiche ueber der Massnahmenliste: der Zeitpunkt kommt vor allem
   anderen und ist deshalb abgesetzt. */
.mass-block.weiche{background:var(--akzent-schleier);
  border:1px solid var(--akzent-rand);border-radius:var(--radius);
  padding:4px 15px 2px;margin-bottom:18px}
.mass-block.weiche .mass-gruppe{margin-top:11px;color:var(--ink-3)}
.mass-block.weiche .mass{border-bottom:0}
.mass-block.weiche .mass-box{padding-left:34px}
/* Der Pfeil zwischen "ohne" und "mit" - er macht aus zwei Zahlen eine
   Ueberleitung. Ohne ihn stehen sie unverbunden nebeneinander. */
.leiste-pfeilchen{color:var(--ink-4);font-size:17px;flex:none;align-self:center;
  margin:0 -8px}
@media(max-width:899px){.leiste-pfeilchen{display:none}}