/* Generated by wr_wagtail_build.js. Edit wr_v52_dev.html instead. */

@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/ubuntu-regular.5b23eeb3a32b.woff2") format('woff2')}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:500;font-display:swap;
src:url("fonts/ubuntu-500.b4e565dcfc8f.woff2") format('woff2')}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;
src:url("fonts/ubuntu-700.b91fae466c69.woff2") format('woff2')}
/* Farbwelt der Website: blue-dark, blue-light, brown-light und brown-dark stammen
   aus pericon.at (main.463e859b7083.css, geprueft 04.09.2026). --ink folgt der
   Website-Textfarbe schwarz. --muted hat dort keine Entsprechung: die Website nutzt
   fuer Nebentext brown-dark, das auf Weiss nur 2,3:1 Kontrast bringt und damit unter
   dem Mindestwert fuer Fliesstext liegt. Im Rechner traegt diese Farbe Legenden,
   Zahlenbeschriftungen und Fussnoten, deshalb bleibt es bei #5A5C6B (6,6:1).
   brown-dark steht als --calm weiterhin fuer Flaechen und Linien. */
.webrechner{--navy:#1F2A94;--accent:#3B28C8;--gold:#C08A00;--calm:#B4A89D;--ink:#000;--muted:#5A5C6B;
--surface:#EDF1FE;--rule:#DDD7D2;--paper:#FFF;--warn:#8A5A00;
--site-blue:#1F2A94;--site-blue-light:#EDF1FE;--site-beige:#DDD7D2;
/* Hoehe der eingeblendeten Kopfleiste. Wird beim Aufbau und bei jeder Groessenaenderung
   gemessen und hier eingetragen - auf schmalen Schirmen bricht sie um und wird hoeher.
   Alle Sprungziele haengen an dieser Zahl, sonst landet eine Ueberschrift darunter. */
--stickyH:76px;
--stickyTop:0px;
 /* ---------- Typografische Skala ----------
    Vorher: 18 Groessen zwischen 11 und 23 px in Halb-Pixel-Schritten. Das ist keine
    Hierarchie, sondern Rauschen - 12,5 und 13 und 13,5 sind fuer ein Auge nicht
    unterscheidbar. Jetzt sieben Stufen. Jede font-size im Dokument nimmt eine davon,
    freie Werte laufen im Typo-Gate rot.
    Die Zielgruppe traegt die Entscheidung: wer 48 % Grenzsteuersatz hat, ist meist
    zwischen 45 und 65 und damit alterssichtig. Diese Leser vergroessern nicht,
    sie ueberspringen. */
 --t1:12px;     /* Rechtstext, Quellenangaben, Annahmenliste */
 --t2:13.5px;   /* Beschriftungen, Legenden, Achsen */
 --t3:15px;     /* Nebentext, Aufklapperinhalt, Klappzeilen, Hinweise */
 --t4:16.5px;   /* Fliesstext, Risikolisten, Pflichtkaesten */
 --t5:19px;     /* Abschnittstitel, Kernaussagen */
 --t6:23px;     /* Ergebniszahlen */
 --t7:28px;     /* Eigenkapital */
 /* Die Spalte selbst ist seit Paket H auf Lesebreite begrenzt (760 px). Die
    zusaetzliche Begrenzung des Textes auf 68 Zeichen hat danach ein zweites Mal
    geschnitten: Kaesten in voller Spaltenbreite, Text darin nur 560 px - rechts
    blieb in jedem Kasten ein leerer Streifen. Sie bleibt als Sicherung fuer den
    Fall stehen, dass die Spalte einmal breiter wird. */
 --lesebreite:100%}
.webrechner *{box-sizing:border-box}
.webrechner{-webkit-text-size-adjust:100%}
/* iOS zoomt beim Antippen jedes Feldes unter 16 px. Grundregel fuer alle Eingaben. */
.webrechner input:not([type=range]),.webrechner select,.webrechner textarea{font-size:var(--t4)}
.webrechner{margin:0;background:var(--surface);color:var(--ink);
font-family:Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-size:var(--t4);line-height:1.5;padding-bottom:env(safe-area-inset-bottom)}
/* ---------- Paket H · Desktop ----------
   Die Fassung war als Handy-Ansicht gebaut, die bei Bedarf breiter wird. Auf dem
   Desktop stand der Text dann in einer 680 px schmalen Spalte innerhalb eines
   864 px breiten Rahmens - links buendig, rechts eine leere Bahn. Der Rahmen
   folgt jetzt der Lesespalte. Tabellen und Grafiken duerfen die volle Breite
   nutzen, Fliesstext nicht. */
.webrechner .wrap{max-width:760px;margin:0 auto;padding:0 18px}
/* In der Wagtail-Komponente wird der Teaser entfernt. Dann folgt der Inhaltsrahmen
   direkt auf die Sticky-Leiste und braucht einen eigenen oberen Innenabstand. */
.webrechner .sticky + .wrap{padding-top:24px}
.webrechner .sticky + .wrap>.einleitung:first-child{margin-top:0}
/* Bei 900 px Breite und 16,5 px Schrift laufen ueber 100 Zeichen in eine Zeile,
   lesbar sind 60 bis 75. Tabellen, Zeitstrahl und Grafiken behalten die volle Breite. */
.webrechner .lede,.webrechner .gegen,.webrechner .offen,.webrechner .info,.webrechner .note,.webrechner .risk ul,.webrechner .stop p,.webrechner .hl p,.webrechner .pinfo,.webrechner .privacy,.webrechner .weg p,.webrechner .abraten p,.webrechner .schluss p,.webrechner .legal,.webrechner .qctx{max-width:var(--lesebreite)}
.webrechner .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.webrechner .review{background:#FFF6DF;border-bottom:1px solid #E8D9A8;color:var(--warn);
font-size:var(--t2);padding:9px 18px;text-align:center}
.webrechner header.site{background:var(--paper);border-bottom:3px solid var(--navy);
padding:calc(14px + env(safe-area-inset-top)) 0 12px}
.webrechner .is-embedded header.site,.webrechner .is-embedded footer{display:none}
/* C5 · Originallogo. Seitenverhaeltnis 765:178 = 4,2978 - die Hoehe wird daraus
   berechnet, nie geschaetzt. Weisser Grund, weil das Logo Navy- und Schwarzanteile
   traegt und auf dunklem Grund verschwindet. */
.webrechner .logo img{display:block;width:132px;height:30.7px}
.webrechner .logo .name{display:block;font-size:var(--t2);line-height:1.3;color:var(--muted);margin-top:6px}
.webrechner .logo .name b{color:var(--navy);font-weight:650}
.webrechner .teaser{background:var(--navy);color:#fff;padding:28px 0}
.webrechner .teaser h2{margin:0 0 6px;font-size:var(--t5);line-height:1.25;font-weight:650;letter-spacing:-.01em}
.webrechner .teaser p{margin:0 0 8px;font-size:var(--t3);color:#C9CBE4;max-width:var(--lesebreite)}
/* C3 · Der Ablaufsatz: keine Aussage ueber ein Ergebnis, nur ueber Aufwand und
   Gegenstand. Er traegt den Einstieg, deshalb steht er abgesetzt. */
.webrechner .teaser p.ablauf{color:#fff;font-size:var(--t4);margin:0 0 14px;font-weight:600}
.webrechner .trow{display:flex;gap:9px;flex-wrap:wrap}
.webrechner .trow input{flex:1 1 190px;min-width:0;font-size:var(--t4);padding:12px 13px;border:0;border-radius:3px;
font-variant-numeric:tabular-nums}
.webrechner .trow button{background:#fff;color:var(--navy);border:0;border-radius:3px;font-size:var(--t4);
font-weight:650;padding:12px 22px;cursor:pointer;min-height:46px}
.webrechner .teaser small{display:block;margin-top:10px;font-size:var(--t2);color:#9A9DC4}
.webrechner section{padding:30px 0;border-top:1px solid var(--rule);
scroll-margin-top:calc(var(--stickyTop) + var(--stickyH) + 14px)}
.webrechner h3.sec{margin:0 0 3px;font-size:var(--t6);line-height:1.2;letter-spacing:-.015em;font-weight:650}
/* Die Wegbeschreibung gehoert zu keinem Abschnitt, sondern zwischen sie. Als Zeile
   wurde sie ueberlesen - jetzt ein eigener Block mit Ueberschrift und den vier
   Schritten als nummerierte Liste. Sie ist zugleich das Sprungziel des
   Berechnen-Knopfs, deshalb der Abstand zur Kopfleiste. */
.webrechner .einleitung{background:var(--paper);border:1px solid var(--rule);
border-left:3px solid var(--navy);border-radius:4px;padding:18px 20px;
margin:24px 0 6px;scroll-margin-top:calc(var(--stickyTop) + var(--stickyH) + 20px)}
.webrechner .einleitung h3{margin:0 0 12px;font-size:var(--t5);font-weight:700;color:var(--navy)}
.webrechner .einleitung ol{margin:0;padding-left:22px;list-style:decimal outside;
font-size:var(--t3);line-height:1.55;color:var(--muted)}
.webrechner .einleitung li{margin-bottom:9px}
.webrechner .einleitung li::marker{color:var(--navy);font-weight:700}
.webrechner .einleitung li b{color:var(--ink);font-weight:650}
.webrechner .einleitung p{margin:14px 0 0;font-size:var(--t3);color:var(--muted);
border-top:1px solid var(--rule);padding-top:12px}
.webrechner .lede{margin:0 0 20px;color:var(--muted);font-size:var(--t4);max-width:58ch}
/* ---------- B1/B2 · Eingaben sehen aus wie Eingaben ----------
   Jede Stellschraube ist ein eigenes umrandetes Feld auf hellem Grund. Die beiden
   Pflichtangaben tragen sichtbar 1 und 2 - damit ist ohne Erklaerung erkennbar,
   was veraendert werden kann und was Ergebnis ist. */
.webrechner .inp{margin-bottom:16px}
.webrechner .feldk{background:var(--paper);border:1px solid var(--rule);border-radius:4px;
padding:13px 15px;margin-bottom:9px}
.webrechner .feldk>label{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.webrechner .nr{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
border-radius:50%;background:var(--navy);color:#fff;font-size:var(--t2);font-weight:700;
flex:none;letter-spacing:0}
/* B2a · Voreinstellungen rechnen, also tragen sie das Erscheinungsbild der Eingabe -
   ohne Nummer, mit dem Zusatz "aendern". Kein Aufklappmuster fuer etwas, das rechnet. */
/* P2 (03.09.2026) · Block "Was Sie vergleichen". Er steht zwischen den Eingaben und
   dem ersten Ergebnis und nennt die Vergleichsgrundlage, die bis dahin nirgends stand
   (Befund Stefan aus der Rittler-Besprechung). Zwei Spalten auch am Telefon:
   nebeneinander ist die Aussage, untereinander waere es eine Liste. */
 /* P3 · Legende der Ergebnisgrafik in Schritt 2. Gleiche Bauart wie .szleg, aber
    ohne Farbpunkte je Weg - hier unterscheiden sich die Flaechen, nicht die Wege. */
.webrechner .wgfuss{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;max-width:560px;margin:6px auto 0;
text-align:center;font-size:var(--t2);color:var(--muted);line-height:1.3}
.webrechner .wgfuss b{font-weight:650;align-self:end}
.webrechner .wgleg{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin:10px 0 0;
font-size:var(--t2);color:var(--muted)}
.webrechner .wgleg span{display:inline-flex;align-items:center;gap:6px}
.webrechner .wgleg i{width:11px;height:11px;border-radius:2px;background:var(--navy);display:inline-block}
.webrechner .wgleg i.wgh{opacity:.18}
 /* Die gestrichelte Linie liegt quer ueber beiden Saeulen. Ihre Beschriftung stand
    im SVG und lief bei 320 px aus der Flaeche - sie steht jetzt in der Legende. */
.webrechner .wgleg i.wgl{width:16px;height:0;border-top:1px dashed #8A8CA0;border-radius:0}
.webrechner .wgleg .wgs{color:var(--muted)}
.webrechner .vgl{margin:0 0 14px}
.webrechner .vgltitel{font-weight:650;color:var(--navy);font-size:var(--t3);margin:0 0 8px}
.webrechner .vglgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.webrechner .vglk{border:1px solid var(--rule);border-radius:4px;padding:12px 11px;background:#fff;
min-width:0;overflow-wrap:break-word}
 /* Beide Bilder tragen dieselbe viewBox und dieselbe Grundlinie. Das rechte Haus
    steht in der Mitte seiner Flaeche, damit die Traufhoehen auf einer Linie liegen. */
.webrechner .vglpik{width:100%;max-width:132px;height:auto;display:block;margin:0 0 10px}
.webrechner .vglname{font-weight:650;color:var(--navy);font-size:var(--t4);margin:0 0 5px}
.webrechner .vgltext{margin:0 0 8px;font-size:var(--t3);line-height:1.45;color:var(--ink)}
 /* t2 wie die uebrigen Beschriftungen. Hier stand t5 - das ist die Groesse der
    Abschnittstitel, die Merkmale standen damit groesser als der Text darueber. */
.webrechner .vglliste{margin:0;padding:0;list-style:none;font-size:var(--t2);line-height:1.45;color:var(--muted)}
.webrechner .vglliste li{position:relative;padding-left:12px;margin-bottom:4px}
.webrechner .vglliste li::before{content:'';position:absolute;left:0;top:.55em;width:4px;height:4px;
background:var(--gold);transform:rotate(45deg)}
 /* Die Wohnungsauswahl steht unter den beiden Kacheln ueber die volle Breite. In der
    schmalen rechten Spalte brach der Profilname um und sprengte das Raster. */
.webrechner .vgl .vorein{margin-top:10px}
@media(max-width:359px){.webrechner .vglgrid{grid-template-columns:1fr}}
 /* Der Finanzierungskasten traegt seit 03.09.2026 die Voreinstellungszeile im Kopf. */
.webrechner .vorein-fin{margin:0 0 10px}
.webrechner .vorein{background:var(--paper);border:1px solid var(--rule);border-radius:4px;
padding:11px 13px;margin-bottom:9px;display:flex;align-items:center;gap:12px}
.webrechner .vorein .vt{font-size:var(--t4);line-height:1.35;min-width:0}
.webrechner .vorein .vt b{color:var(--navy);font-weight:650}
.webrechner .vorein .vt em{display:block;font-style:normal;color:var(--muted);font-size:var(--t2);margin-top:1px}
.webrechner .vorein .vl{font-size:var(--t2);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
font-weight:700;margin-bottom:3px}
.webrechner .vorein .aend{margin-left:auto;flex:none;background:none;border:1px solid var(--rule);
border-radius:3px;color:var(--navy);font-size:var(--t3);font-weight:650;font-family:inherit;
padding:9px 13px;min-height:44px;cursor:pointer}
.webrechner .vorein .aend[aria-expanded=true]{border-color:var(--navy);border-width:2px}
.webrechner .voreinAuf{margin:-2px 0 9px;padding:12px 13px;background:var(--paper);
border:1px solid var(--rule);border-top:0;border-radius:0 0 4px 4px}
.webrechner .grid2{display:grid;grid-template-columns:1fr;gap:0}
.webrechner label{display:block;font-size:var(--t2);font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.webrechner .big{font-size:var(--t7);font-weight:650;color:var(--navy);line-height:1.2}
/* Trefferflaeche des Reglers auf Daumenmass. Die Spur bleibt gleich dick,
   sie wird nur vertikal zentriert. */
.webrechner input[type=range]{width:100%;accent-color:var(--navy);height:44px;margin-top:0}
.webrechner input.euro{width:100%;font-size:var(--t4);padding:10px 11px;border:1px solid var(--rule);
border-radius:3px;font-variant-numeric:tabular-nums}
.webrechner .pills{display:flex;gap:5px;flex-wrap:wrap}
.webrechner .pill{border:1px solid var(--rule);background:#fff;border-radius:3px;padding:8px 11px;
font-size:var(--t3);cursor:pointer;min-height:44px;font-variant-numeric:tabular-nums}
.webrechner .pill[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:650}
.webrechner .seg{display:flex;gap:5px;margin-top:14px}
.webrechner .seg button{flex:1;border:1px solid var(--rule);background:#fff;border-radius:3px;padding:9px 6px;
cursor:pointer;min-height:48px;font-size:var(--t3);line-height:1.25;text-align:center}
.webrechner .seg button[aria-pressed=true]{border-color:var(--navy);border-width:2px;font-weight:650;color:var(--navy)}
.webrechner .seg small{display:block;color:var(--muted);font-size:var(--t2);font-weight:400}
.webrechner .note{font-size:var(--t3);color:var(--muted);margin-top:8px}
/* B1 · Erklaerung zum Profil: Information, deshalb grau und ohne Akzentkante. */
.webrechner .pinfo{margin-top:8px;font-size:var(--t3);line-height:1.5;background:var(--surface);
border-radius:3px;padding:11px 13px;color:var(--muted)}
.webrechner .pinfo b{color:var(--ink)}
/* ---------- A3 · ein Aufklappmuster ----------
   Alle Aufklapper sehen gleich aus und heissen gleich: Zeile in Akzentfarbe, Winkel
   rechts, Haarlinie darueber. B5: die 44 px Trefferflaeche kommt aus einer
   unsichtbaren Flaeche ueber der Zeile, nicht aus Innenabstand - die Zeile selbst
   baut damit nur noch halb so hoch. */
/* Bis 22.08.2026 war die Klappzeile blau gefaerbter Text auf einer Haarlinie. Sie
   war damit leiser als der Inhalt - aber auch nicht mehr als Bedienelement zu
   erkennen. Jetzt eine eigene Flaeche mit Rahmen und einem Winkel im Kreis: sofort
   als anklickbar lesbar, ohne die Lautstaerke eines gefuellten Knopfes. Der Rahmen
   loest zugleich den Versatz - die Zeile steht buendig mit den Kaesten darunter. */
.webrechner details{margin:12px 0 0}
.webrechner details>summary{list-style:none;position:relative;cursor:pointer;margin:0;
padding:13px 48px 13px 15px;font-size:var(--t3);font-weight:600;color:var(--accent);
background:var(--surface);border:1px solid var(--rule);border-radius:4px}
/* Klebender Hover, gemeldet am 25.08.2026: Auf iOS bleibt der Hover-Zustand am
   zuletzt beruehrten Punkt haengen. Bei den vier Fragen wird der Kasten nach jeder
   Antwort neu aufgebaut - der neue Knopf an derselben Stelle erbt den Zustand und
   sieht aus wie vorbelegt. Hover gilt jetzt nur, wo es einen echten Zeiger gibt. */
@media(hover:hover){
.webrechner details>summary:hover{background:#EDEEF4;border-color:var(--calm)}
.webrechner details>summary::-webkit-details-marker{display:none}
/* Der Kreis gehoert zum Aufklappmuster. Die drei Wege am Abschluss haben ihre
   eigene Zeile mit eigener Winkelposition - dort lag der Kreis unter dem Winkel
   statt um ihn herum. */
.webrechner details.erkl>summary::before{content:'';position:absolute;right:11px;top:50%;
width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--paper);
border:1px solid var(--rule)}
.webrechner .weg>summary{background:none;border:0;border-radius:0;padding:14px 16px;
font-size:inherit;font-weight:inherit;color:inherit}
.webrechner .weg>summary:hover{background:rgba(17,3,110,.02);border:0}}
.webrechner .weg[open]>summary{background:none;border:0}
.webrechner details[open]>summary{background:var(--paper);border-color:var(--navy);
border-bottom-left-radius:0;border-bottom-right-radius:0}
/* Ein Winkel nach rechts ist die Konvention fuer "fuehrt woanders hin". Fuer einen
   Aufklapper zeigt er nach unten und beim Oeffnen nach oben. */
.webrechner details>summary::after{content:'';position:absolute;right:20px;top:50%;margin-top:-6px;
width:7px;height:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:rotate(45deg);transition:transform .15s}
.webrechner details[open]>summary::after{transform:rotate(225deg);margin-top:-2px;border-color:var(--navy)}
.webrechner details[open]>summary{color:var(--navy)}
/* Gebuendelter Kernkasten: die drei Saetze, die immer sichtbar bleiben muessen. */
/* Klammerwert: klar untergeordnet, damit die Hauptzahl dominiert - wie im PDF. */
.webrechner .kl{font-size:.8em;color:var(--muted);font-weight:400;white-space:nowrap}

/* Sichtbare Rechnung statt Definition: Vorsprung geteilt durch Mehrertrag. */
/* Der Kasten war ein umbrechender Flex-Streifen: Beschriftung, Zahl und Rechenzeichen
   sind am Telefon in beliebige Zeilen gefallen. Jetzt eine feste Folge - Zeile,
   Rechenzeichen, Zeile - die untereinander steht und nicht umbrechen kann. */
.webrechner .rechnung{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:14px 0 4px;
padding:14px 16px;background:var(--paper);border:1px solid var(--rule);border-radius:4px}
.webrechner .rechnung .rz{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.webrechner .rechnung .rz span{flex:1 1 auto}
.webrechner .rechnung .rz b{flex:0 0 auto;white-space:nowrap}
.webrechner .rechnung .rop{align-self:flex-start;padding:3px 0 4px}
.webrechner .rechnung .rz.erg{border-top:1px solid var(--rule);margin-top:5px;padding-top:8px}
.webrechner .rechnung .rz span{font-size:var(--t2);color:var(--muted)}
.webrechner .rechnung .rz b{font-size:var(--t4);color:var(--navy);font-weight:700}
/* B1 · Ergebnis: Navy, nicht anklickbar. Frueher Akzent - das las sich wie ein Link. */
.webrechner .rechnung .rz.erg b{color:var(--navy)}
.webrechner .rechnung .rop{font-size:var(--t2);color:var(--muted)}


/* Vor und nach Steuer als zwei gleich gebaute Zeilen - so ist der Unterschied ablesbar. */
.webrechner .zwei{margin:10px 0 2px;font-size:var(--t3)}
/* Bei "praktisch gleichauf" wurde die rechte Spalte so breit, dass links der
   Eurobetrag umbrach. Jetzt darf rechts umbrechen und links nicht. */
.webrechner .zwei>div{display:flex;align-items:baseline;gap:7px;padding:7px 0;border-top:1px solid var(--rule)}
.webrechner .zwei>div>b,.webrechner .zwei>div>i{flex:none}
.webrechner .zwei span{text-align:right;max-width:44%}
.webrechner .zwei>div:last-child{border-bottom:1px solid var(--rule)}
.webrechner .zwei i{width:9px;height:9px;border-radius:2px;background:var(--navy);flex:none}
.webrechner .zwei i.st{background:var(--accent)}
.webrechner .zwei b{color:var(--ink);font-weight:700;white-space:nowrap}
/* Der Wert rechts stand auf nowrap. Bei "gleichauf" schob er die Spalte so weit
   auf, dass links der Eurobetrag umbrach - also genau falsch herum. */
.webrechner .zwei span{margin-left:auto;font-weight:700;color:var(--navy);white-space:normal}
.webrechner .zwei>div:last-child span{color:var(--accent)}

.webrechner .hint2.kern>b{display:block;margin-bottom:5px}
.webrechner .hint2.kern .kz{position:relative;padding-left:14px;margin-bottom:4px;line-height:1.5}
.webrechner .hint2.kern .kz::before{content:'';position:absolute;left:2px;top:8px;width:4px;height:4px;
border-radius:50%;background:var(--gold)}

.webrechner details.erkl[open]>summary{margin-bottom:2px}
.webrechner .taxbox{margin-top:10px;padding:12px;background:var(--surface);border-radius:3px;font-size:var(--t3)}
.webrechner .taxbox b{color:var(--navy);font-size:var(--t5)}
.webrechner .take{margin-top:8px;background:var(--navy);color:#fff;border:0;border-radius:3px;
padding:9px 14px;font-size:var(--t3);font-family:inherit;cursor:pointer;min-height:44px}
.webrechner .cmp{background:var(--paper);border:1px solid var(--rule);border-radius:4px 4px 0 0;overflow:hidden}
/* Die Kopfzeile stand auf 150 px, die Datenzeilen seit Paket H auf 186 - dadurch
   begann "Bauherrenmodell" 36 px weiter links als die Zahl darunter. */
.webrechner .chead{display:grid;grid-template-columns:186px 1fr 1fr;gap:0;background:transparent}
.webrechner .chead .leer{background:transparent}
@media(max-width:760px){.webrechner .chead{grid-template-columns:1fr 1fr}.webrechner .chead .leer{display:none}}
.webrechner .chead div{padding:12px 14px;font-size:var(--t3);font-weight:700;line-height:1.25}
.webrechner .chead div:nth-child(2){background:rgba(17,3,110,.028)}
.webrechner .chead div:nth-child(3){background:rgba(59,40,200,.028)}
.webrechner .chead div:nth-child(2){color:var(--navy)}
.webrechner .chead div:nth-child(3){color:var(--accent)}
.webrechner .chead small{display:block;font-weight:400;font-size:var(--t2);color:var(--muted);margin-top:2px}
/* 150 px reichten fuer "IHRE GRÖSSENORDNUNG" nicht - die Beschriftung lief in die
   Zahl daneben. Die Spalte traegt jetzt das laengste Wort ohne Bruch. */
.webrechner .crow{border-top:1px solid var(--rule);display:grid;grid-template-columns:186px 1fr 1fr;
align-items:stretch}
/* Gruppenueberschrift, gleiche Bauart wie .fzgruppe in der Zahlentafel. Sie traegt,
   was sonst jede Zeile einzeln wiederholen muesste. */
.webrechner .cgruppe{border-top:1px solid var(--rule);padding:12px 12px 8px;
font-size:var(--t2);letter-spacing:.08em;text-transform:uppercase;
font-weight:700;color:var(--navy);background:rgba(17,3,110,.045)}
.webrechner .cgruppe+.crow{border-top:0}
/* Grossbuchstaben mit Sperrung wirken schon bei 13,5 px wie eine Ueberschrift.
   Auf 15 px gesetzt konkurrierten sie mit den Zahlen darunter. */
/* Die Legende beschreibt die Balken in der Tabelle und steht deshalb in ihr.
   Frueher stand sie im naechsten Kasten - ein Aufklapper dazwischen hat sie von
   dem getrennt, was sie erklaert. */
.webrechner .cfuss{padding:10px 12px 12px;font-size:var(--t2);color:var(--muted);
border-top:1px solid var(--rule);line-height:1.45}
.webrechner .clbl{font-size:var(--t2);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
font-weight:700;padding:14px 12px 12px;display:flex;align-items:center;line-height:1.35}
.webrechner .crow.key .clbl{background:transparent}
.webrechner .cvals{display:contents}
.webrechner .cvals>div{padding:12px 14px}
@media(max-width:760px){
 .webrechner .crow{grid-template-columns:1fr 1fr}
 .webrechner .clbl{grid-column:1 / -1;padding:11px 12px 0}
 .webrechner .cvals>div{padding:2px 12px 12px}}
.webrechner .cvals>div:nth-child(1){background:rgba(17,3,110,.028)}
.webrechner .cvals>div:nth-child(2){background:rgba(59,40,200,.028)}
.webrechner .v{font-size:var(--t5);font-weight:650;letter-spacing:-.01em;line-height:1.25}
.webrechner .v.hero{font-size:inherit}
.webrechner .a{font-size:var(--t2);color:var(--muted);line-height:1.4;margin-top:3px}
.webrechner .strike{color:var(--muted);font-weight:400}
.webrechner .save{color:var(--navy);font-weight:650}
.webrechner .ebar{display:flex;height:11px;border-radius:2px;overflow:hidden;margin:7px 0 6px;min-width:12%}
.webrechner .eseg{height:100%}
.webrechner .eseg.net{background:var(--navy)}
.webrechner .eseg.tax{background:repeating-linear-gradient(135deg,#C7CBE0 0 3px,#EDEEF5 3px 6px)}
.webrechner .panel{background:var(--paper);border:1px solid var(--rule);border-top:0;padding:16px 14px}
.webrechner .panel:last-of-type{border-radius:0 0 4px 4px}
.webrechner .ptitle{font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
font-weight:700;margin-bottom:12px}
.webrechner .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}
.webrechner .donut{width:118px;height:118px;border-radius:50%;margin:0 auto 8px;position:relative}
.webrechner .donut::after{content:"";position:absolute;inset:26px;background:var(--paper);border-radius:50%}
 /* Ohne Beschriftung musste man wissen, dass links das Bauherrenmodell steht.
    Gleiche Bauart wie im PDF: Name ueber dem Ring, in der Farbe der Datenreihe. */
.webrechner .dname{font-size:var(--t2);font-weight:650;margin:0 0 7px;line-height:1.3;min-height:2.6em}
.webrechner .dnb{color:var(--navy)} .webrechner .dnw{color:var(--accent)}
.webrechner .dsum{font-size:var(--t2);color:var(--muted)}
.webrechner .dleg{display:flex;flex-wrap:wrap;gap:9px 16px;justify-content:center;margin-top:12px;font-size:var(--t2)}
.webrechner .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.webrechner .tl{margin-bottom:14px}
.webrechner .tlname{font-size:var(--t2);font-weight:700;margin-bottom:5px}
.webrechner .tlbar{display:flex;height:32px;border-radius:3px;overflow:hidden;font-size:var(--t2)}
/* Ein Abschnitt von einem Jahr ist zu schmal fuer "1 J." - die Zahl wurde
   abgeschnitten. Zu schmale Abschnitte tragen ihre Zahl jetzt darunter. */
.webrechner .tlseg{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:650;
overflow:hidden;
overflow:hidden;white-space:nowrap}
.webrechner .tlfoot{display:flex;font-size:var(--t2);color:var(--muted);margin-top:4px;gap:10px;align-items:baseline}
.webrechner .tlfoot .l{flex:0 0 auto;white-space:nowrap}
.webrechner .tlfoot .m{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.webrechner .tlfoot .r{flex:0 0 auto;white-space:nowrap;margin-left:auto;text-align:right}
.webrechner .hl{margin-top:16px;background:var(--navy);color:#fff;border-radius:4px;padding:18px 20px}
.webrechner .hl b{display:block;font-size:var(--t5);font-weight:650;line-height:1.3;margin-bottom:6px;letter-spacing:-.01em}
.webrechner .hl p{margin:0;font-size:var(--t4);color:#C9CBE4}
/* Die Schrittanzeige lief in der Leiste als fetter Text mit und wurde uebersehen.
   Jetzt eine Navy-Pille plus ein Fortschrittsstreifen als unterer Rand der Leiste -
   der sagt ohne Zahl, wie weit man ist. */
/* Sarah, 24.08.2026: Die Leiste wurde beim ersten Mal uebersehen. Der Grund war
   nicht die Groesse, sondern der Kontrast - fast weiss auf weiss, mit einer
   Trennlinie in Regelstaerke. Jetzt: hellblauer Grund statt Weiss, kraeftigerer
   Schatten, Fortschrittslinie von 3 auf 4 px und ueber die volle Kante. */
.webrechner .sticky{position:sticky;top:var(--stickyTop);z-index:30;margin:0 auto;
background:rgba(244,244,251,.97);
backdrop-filter:blur(8px);border-bottom:1px solid rgba(17,3,110,.16);
padding:9px 0 11px;display:none;box-shadow:0 2px 10px rgba(17,3,110,.11)}
.webrechner .sticky::after{content:'';position:absolute;left:0;bottom:-1px;height:4px;
background:var(--accent);width:var(--fortschritt,20%);transition:width .25s}
.webrechner .sticky .schritt b{background:var(--navy);color:#fff;border-radius:999px;
padding:4px 10px;font-size:var(--t2);letter-spacing:.01em;white-space:nowrap}
.webrechner .sticky.an{display:block}
/* C2 · Eine Zeile: Schritt, Eigenkapital, Steuersatz, "aendern". Vergleichsprofil und
   Finanzierungsvariante sind hier entfallen - sie stehen ohnehin in Abschnitt 1.
   nowrap, damit die Leiste auch am Telefon nicht zweizeilig wird und die Sprungziele
   nicht wandern. */
.webrechner .sticky .inner{max-width:900px;margin:0 auto;padding:0 18px;display:flex;flex-wrap:nowrap;
gap:0 14px;align-items:center;font-size:var(--t2);color:var(--muted);overflow:hidden;white-space:nowrap}
.webrechner .sticky b{color:var(--navy);font-variant-numeric:tabular-nums}
.webrechner .sticky .schritt{flex:none}
.webrechner .sticky .wert{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.webrechner .sticky .zurueck{margin-left:auto;flex:none;background:none;border:0;color:var(--accent);
font-size:var(--t2);cursor:pointer;text-decoration:underline;padding:6px 0;min-height:44px}
/* Die vier Fortschrittsstriche sind entfallen. 14 px breite Striche liest niemand
   als Fortschritt, "2/4" sagt dasselbe - und der Platz traegt jetzt die
   Beschriftungen. Ohne sie waren "60.000 €" und "48 %" nicht zuzuordnen. */
@media(max-width:400px){.webrechner .sticky .inner{gap:0 9px}}
/* Ein 480 px breiter Knopf ueber einem Kasten in voller Spaltenbreite sah
   willkuerlich aus. Beide nehmen jetzt die Spalte. */
/* Eine Nutzerin hat die blauen Flaechen nicht als Knoepfe erkannt - sie sahen aus
   wie Ueberschriften auf farbigem Grund. Ein Winkel im Kreis rechts sagt, dass es
   weitergeht, ohne die Flaeche lauter zu machen. */
.webrechner .cta{display:block;width:100%;margin:20px auto 0;background:var(--navy);
color:#fff;border:0;border-radius:4px;padding:16px 52px 16px 20px;font-size:var(--t4);
font-weight:650;cursor:pointer;min-height:54px;line-height:1.3;font-family:inherit;
position:relative;text-align:left}
/* Die Einwaende stehen als Kurzsatz sichtbar, die Begruendung liegt dahinter.
   Ohne die Kurzsaetze waere der Abschnitt eine Reihe geschlossener Balken. */
.webrechner .gegenkurz{margin:0 0 4px}
.webrechner .gegenkurz p{margin:0 0 7px;padding-left:16px;position:relative;
font-size:var(--t4);line-height:1.5;color:var(--ink)}
.webrechner .gegenkurz p::before{content:'';position:absolute;left:0;top:.62em;
width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
/* Sarah, 24.08.2026: Der Kasten wurde nicht als Weiter-Knopf erkannt, weil
   darunter fast immer noch etwas kommt. Die Zielstufe steht jetzt darueber. */
.webrechner .ctaz{display:block;font-size:var(--t2);font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:3px}
.webrechner .cta::before{content:'';position:absolute;right:16px;top:50%;width:28px;height:28px;
margin-top:-14px;border-radius:50%;background:rgba(255,255,255,.14)}
.webrechner .cta::after{content:'';position:absolute;right:27px;top:50%;margin-top:-4px;
width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg)}
@media(hover:hover){.webrechner .cta:hover::before{background:rgba(255,255,255,.24)}}
.webrechner .cta small{display:block;font-weight:400;font-size:var(--t2);color:#A9ACD0;margin-top:3px}
/* Der Risikokasten stiess ohne Abstand an das, was nach ihm kam. */
/* Der Risikokasten war navyfarben gefuellt und stand unmittelbar ueber dem
   navyfarbenen Weiterknopf - zwei grosse dunkle Flaechen uebereinander, von denen
   nur eine anklickbar ist. Nach B3 warnt ohnehin Gold, nicht Navy. Der Knopf ist
   damit wieder die einzige gefuellte Flaeche im Abschnitt. */
.webrechner .risk{margin:14px 0 6px;background:var(--paper);border:1px solid var(--rule);
border-left:3px solid var(--gold);border-radius:4px;padding:16px 18px;color:var(--ink)}
.webrechner .risk b{display:block;font-size:var(--t5);font-weight:650;margin-bottom:7px;
letter-spacing:-.01em;color:var(--navy)}
/* list-style ausdruecklich: Der Wagtail-Reset setzt alle Listen auf none, dann
   laeuft der goldene Marker ins Leere. Gesehen am Staging, 02.09.2026. */
.webrechner .risk ul{margin:0;padding-left:16px;list-style:disc outside;font-size:var(--t4);color:var(--ink);line-height:1.45}
.webrechner .risk li{margin-bottom:5px}
.webrechner .risk li::marker{color:var(--gold)}
.webrechner .risk .fuss{margin-top:12px;font-size:var(--t3);color:var(--muted)}
/* Pflichthinweise und Aufklapperinhalt tragen die Aussagen, an denen der Rechner
   rechtlich haengt. Sie standen in der blassesten Stufe der Seite - ein Hinweis,
   der wie Kleingedrucktes gesetzt ist, wirkt auch so. */
.webrechner .hint2{margin-top:10px;font-size:var(--t3);color:var(--ink);line-height:1.55;
border-left:2px solid var(--gold);padding-left:11px}
.webrechner .hint2 b{color:var(--ink);font-weight:650}
.webrechner .privacy{margin-top:12px;background:var(--surface);border-radius:3px;
padding:11px 13px;font-size:var(--t3);color:var(--muted);line-height:1.5}
.webrechner .privacy b{color:var(--navy);font-weight:650}
.webrechner .ctx b.warn{color:var(--navy)}
.webrechner .ctx{margin-top:12px;background:var(--paper);border:1px solid var(--rule);
border-left:3px solid var(--navy);border-radius:3px;padding:13px 15px;font-size:var(--t4)}
.webrechner .stop{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--gold);
border-radius:4px;padding:20px}
.webrechner .stop b{display:block;color:var(--navy);font-size:var(--t5);margin-bottom:8px}
.webrechner .stop p{margin:0 0 10px;font-size:var(--t4)}
.webrechner .stop p:last-child{margin:0;color:var(--muted);font-size:var(--t3)}
.webrechner .legal{margin-top:14px;font-size:var(--t1);color:var(--muted)}
.webrechner .legal .ann{margin-top:8px;font-size:var(--t1);line-height:1.65}
.webrechner .step{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:20px}
.webrechner .prog{display:flex;gap:5px;margin-bottom:14px}
.webrechner .prog i{flex:1;height:3px;background:var(--rule);border-radius:2px}
.webrechner .prog i.on{background:var(--navy)}
.webrechner .qctx{font-size:var(--t3);color:var(--muted);background:var(--surface);border-radius:3px;padding:10px 12px;margin-bottom:11px}
.webrechner .qtxt{font-weight:650;font-size:var(--t4);margin-bottom:12px;line-height:1.35}
.webrechner .qopt{display:flex;flex-direction:column;gap:6px}
.webrechner .qopt button{text-align:left;border:1px solid var(--rule);background:#fff;border-radius:3px;
padding:11px 13px;font-size:var(--t4);cursor:pointer;min-height:44px}
@media(hover:hover){.webrechner .qopt button:hover{border-color:var(--navy)}}
.webrechner .qnav{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.webrechner .qnav button{background:none;border:0;color:var(--accent);cursor:pointer;
text-decoration:underline;padding:8px 0;min-height:44px;font-size:var(--t3)}
.webrechner .tog{display:inline-flex;gap:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-left:auto}
.webrechner .tog button{border:0;background:#fff;padding:7px 13px;font-size:var(--t2);cursor:pointer;min-height:44px}
/* Zweiter Umschalter unmittelbar an der Grafik: sie fuellt am Telefon den ganzen
   Schirm, und wer dort steht, scrollt nicht nach oben zurueck, um umzuschalten. */
.webrechner .toggfx{margin:0 0 10px}
.webrechner .tog button[aria-pressed=true]{background:var(--navy);color:#fff;font-weight:650}
.webrechner .tophead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.webrechner .tophead div{font-size:var(--t2);color:var(--muted)}
.webrechner .tophead b{color:var(--ink)}
.webrechner .szen{background:var(--paper);border:1px solid var(--rule);border-top:0;padding:16px 14px}
.webrechner .szen svg{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.webrechner .panel svg{max-width:560px;margin:0 auto}
.webrechner .szleg{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--t2);color:var(--muted);margin-top:10px}
/* "37.168 € bzw. 62.848 €" liess offen, welche Zahl zu welchem Weg gehoert. Jetzt
   steht der Weg dabei, und das Strichmuster zeigt, welche Linie gemeint ist. */
.webrechner .szleg .voll{flex-basis:100%}
.webrechner .szleg .li{display:inline-block;width:20px;height:0;vertical-align:middle;margin-right:5px}
.webrechner .szleg .li.navy{border-top:1.4px dashed var(--navy)}
.webrechner .szleg .li.akz{border-top:1px dotted var(--accent)}
/* B1/B3 · Information: grauer Grund, keine Akzentflaeche, nicht anklickbar. */
.webrechner .info{margin-top:12px;background:var(--surface);border-radius:3px;padding:12px 14px;
font-size:var(--t3);line-height:1.5;color:var(--muted)}
.webrechner .info b{color:var(--ink);font-weight:650}
/* Die Einwaende standen bis 22.08.2026 in je einem eigenen Kasten - zwei bis drei
   Kaesten untereinander je Ueberschrift. Jetzt ein Kasten je Ueberschrift mit
   Absaetzen darin, getrennt durch eine Haarlinie. */
.webrechner .gegen p{margin:0}
.webrechner .gegen p+p{margin-top:13px;padding-top:13px;border-top:1px solid var(--rule)}
.webrechner .gegen{margin-top:10px;font-size:var(--t4);background:var(--paper);border:1px solid var(--rule);
border-radius:3px;padding:14px 16px}
.webrechner .gegen b{display:block;margin-bottom:3px}
.webrechner .gegen+.gegen{margin-top:8px}
/* Die drei Wege als Akkordeon ueber die volle Breite. Dreispaltig passten acht
   Woerter in eine Zeile, der Abschnitt wurde dadurch zwei Bildschirme hoch.
   Zugeklappt sind alle drei gleich gross - die Tendenz zeigt die Marke, nicht die
   Oeffnung, sonst sieht der Vergleich nach Steuerung aus. */
.webrechner .wege{margin-top:12px}
.webrechner .weg{background:var(--paper);border:1px solid var(--rule);border-radius:4px;margin-bottom:8px}
.webrechner .weg.tend{border-color:var(--navy);border-width:2px;
box-shadow:0 0 0 4px rgba(17,3,110,.06)}
.webrechner .weg.tend>summary{background:rgba(17,3,110,.035)}
.webrechner .weg>summary{list-style:none;cursor:pointer;padding:14px 16px;display:block;position:relative}
.webrechner .weg>summary::-webkit-details-marker{display:none}
.webrechner .weg>summary::after{content:'';position:absolute;right:18px;top:22px;width:8px;height:8px;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:rotate(45deg);transition:transform .15s}
.webrechner .weg[open]>summary::after{transform:rotate(-135deg);top:26px}
/* Die drei Wege sind Ueberschriften und muessen groesser stehen als der
   Pflichtkasten darunter. */
.webrechner .weg h4{margin:0 0 2px;font-size:var(--t5);font-weight:700;color:var(--navy);padding-right:26px}
.webrechner .weg .sub{margin:0;font-size:var(--t2);line-height:1.4;color:var(--muted);font-weight:500;
padding-right:26px}
.webrechner .weg .marke{font-size:var(--t2);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
font-weight:700;margin-bottom:6px}
.webrechner .weg .inh{padding:0 16px 16px}
.webrechner .weg p{margin:0 0 8px;font-size:var(--t3);line-height:1.55;color:var(--muted)}
/* "Spricht fuer Sie" ist die eigentliche Antwort auf die Frage, die jemand hier hat.
   Sie stand als schwarzer Absatz nach einem grauen - der Wechsel allein traegt das
   nicht. Jetzt auf hellem Grund abgesetzt. */
.webrechner .weg p.fuer{color:var(--ink);margin:2px 0 0;background:var(--surface);
border-radius:3px;padding:11px 13px}
/* Tobias, 24.08.2026: In Schritt 5 stand dreimal Abstand hintereinander - 20 px
   unter der Unterzeile, 12 px ueber dem Kasten, 13 px Innenabstand. Der Kasten
   liegt auf hellem Grund, also liest sich die Summe als Leerraum. Der Abschnitt
   setzt die drei Werte zusammen auf ein Mass, das dem Zusammenhang entspricht. */
.webrechner #ab .lede{margin-bottom:10px}
.webrechner #abschluss>.offen:first-child,.webrechner #abschluss>.abraten:first-child{margin-top:0}
.webrechner #abschluss>.offen:first-child{padding-top:11px;padding-bottom:11px}
.webrechner .offen{background:var(--surface);border-radius:3px;
padding:13px 15px;font-size:var(--t3);line-height:1.5;margin-top:12px;color:var(--muted)}
.webrechner .offen b{color:var(--navy)}
/* A4 · Pflichthinweis zu Verkauf und Uebertragung. Geht ausdruecklich nicht in der
   einheitlichen Optik auf (B3): dass er anders aussieht, ist seine Funktion. */
.webrechner .offen.pflicht{background:var(--paper);border:1px solid var(--rule);
border-left:3px solid var(--gold);color:var(--ink);font-size:var(--t4)}
.webrechner .abraten{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--gold);
border-radius:4px;padding:16px 18px;margin-top:14px}
.webrechner .abraten b{display:block;color:var(--navy);font-size:var(--t4);margin-bottom:5px}
.webrechner .abraten p{margin:0;font-size:var(--t4)}
.webrechner .schluss{margin-top:16px;background:var(--navy);color:#fff;border-radius:4px;padding:22px 20px}
.webrechner .schluss b{display:block;font-size:var(--t5);font-weight:650;margin-bottom:8px;letter-spacing:-.01em}
.webrechner .schluss p{margin:0 0 14px;font-size:var(--t4);color:#C9CBE4}
.webrechner .schluss .aktion{display:flex;gap:9px;flex-wrap:wrap}
.webrechner .schluss .aktion button{background:#fff;color:var(--navy);border:0;border-radius:3px;
padding:13px 20px;font-size:var(--t4);font-weight:650;cursor:pointer;min-height:48px;font-family:inherit}
.webrechner .schluss .aktion button.zweit{background:transparent;color:#fff;border:1px solid #6C6FA8}

/* ---------- Anforderungsformular ---------- */
.webrechner #anfrage{margin-top:16px;background:var(--paper);border:1px solid var(--rule);border-radius:4px;
padding:22px 20px;scroll-margin-top:calc(var(--stickyTop) + var(--stickyH) + 20px)}
/* Die globale label-Regel schreibt alles gross - im Formular zuruecknehmen. */
.webrechner #anfrage label{text-transform:none;letter-spacing:normal}
.webrechner #anfrage[hidden]{display:none}
.webrechner #anfrage h4{margin:0 0 4px;font-size:var(--t5);color:var(--navy);font-weight:650;letter-spacing:-.01em}
.webrechner #anfrage .vor{margin:0 0 16px;font-size:var(--t3);color:var(--muted)}
.webrechner .feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.webrechner .feldpaar{grid-template-columns:1fr}}
.webrechner .feld{margin-bottom:12px}
.webrechner .feld label{display:block;font-size:var(--t2);font-weight:600;color:var(--navy);margin-bottom:4px}
.webrechner .feld label .opt{font-weight:400;color:var(--muted)}
.webrechner .feld input{width:100%;font-size:var(--t4);padding:11px 12px;border:1px solid var(--rule);
border-radius:3px;font-family:inherit;background:var(--paper);color:var(--ink);min-height:44px}
.webrechner .feld input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.webrechner .feld.fehlt input{border-color:#B3261E}
.webrechner .feld .hinweis{display:none;margin-top:4px;font-size:var(--t2);color:#B3261E}
.webrechner .feld.fehlt .hinweis{display:block}
.webrechner .anrede{display:flex;gap:8px}
.webrechner .anrede button{flex:1;background:var(--paper);border:1px solid var(--rule);border-radius:3px;
padding:11px 8px;font-size:var(--t4);font-family:inherit;color:var(--ink);cursor:pointer;min-height:44px}
.webrechner .anrede button[aria-pressed=true]{border-color:var(--navy);border-width:2px;
font-weight:650;color:var(--navy)}
.webrechner .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Beide Wahlmoeglichkeiten gleich gross und gleich gestaltet - die Entscheidung
   wird ueber den Inhalt gefuehrt, nicht ueber die Optik. */
.webrechner .wahlfeld{margin:16px 0 6px}
.webrechner .wahlfeld>p{margin:0 0 3px;font-size:var(--t3);font-weight:600;color:var(--navy)}
/* Die Zusage traegt den Abschnitt: Sie steht ueber der Wahl und haengt an keiner
   der beiden Optionen. Deshalb groesser als die Frage darunter. */
.webrechner .wahlfeld>p.zusage{font-size:var(--t5);line-height:1.35;font-weight:700;color:var(--navy);
margin:0 0 5px;letter-spacing:-.01em}
.webrechner .wahlfeld>p.beides{margin:0 0 8px;font-weight:400;color:var(--muted);font-size:var(--t3)}
.webrechner .wahlfeld>p.frage{margin:14px 0 8px;font-size:var(--t4);font-weight:650;color:var(--ink)}
.webrechner .wopt{display:block;border:1px solid var(--rule);border-radius:4px;padding:13px 14px;
margin-bottom:8px;cursor:pointer;background:var(--paper)}
.webrechner .wopt:has(input:checked),.webrechner .wopt.gewaehlt{border-color:var(--navy);border-width:2px;padding:12px 13px}
.webrechner .wopt input{margin:0 9px 0 0;accent-color:var(--navy);width:18px;height:18px;vertical-align:-3px}
.webrechner .wopt b{font-size:var(--t4);font-weight:650;color:var(--ink);line-height:1.45}
.webrechner .wopt span{display:block;margin:4px 0 0 27px;font-size:var(--t3);color:var(--muted);line-height:1.5}
.webrechner #anfrage .senden{margin-top:12px;background:var(--navy);color:#fff;border:0;border-radius:3px;
padding:14px 24px;font-size:var(--t4);font-weight:650;cursor:pointer;min-height:50px;
font-family:inherit;width:100%}
.webrechner #anfrage .senden[disabled]{background:#C9CBD8;color:#6E7080;cursor:not-allowed}
.webrechner #anfrage .dsatz{margin-top:11px;font-size:var(--t1);color:var(--muted);line-height:1.55}
.webrechner #anfrage .dsatz a{color:var(--accent)}
.webrechner .rueckfall{margin-top:12px;border-left:3px solid var(--gold);background:#FFF6DF;
padding:12px 14px;font-size:var(--t3);line-height:1.55}
.webrechner .rueckfall a{color:var(--navy);font-weight:650}
.webrechner .fertig{scroll-margin-top:calc(var(--stickyTop) + var(--stickyH) + 20px);background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--navy);
border-radius:4px;padding:22px 20px;margin-top:16px}
.webrechner .fertig b{display:block;font-size:var(--t5);color:var(--navy);margin-bottom:6px;font-weight:650}
.webrechner .fertig.klein{padding:13px 16px}
.webrechner .fertig.klein b{font-size:var(--t4);margin-bottom:3px}
.webrechner .fertig.klein p{font-size:var(--t3);margin:0 0 9px}
.webrechner .fertig .nach{background:var(--navy);color:#fff;border:0;border-radius:3px;padding:10px 16px;
font-size:var(--t4);font-weight:650;font-family:inherit;cursor:pointer;min-height:44px}
.webrechner .neustart{margin-top:18px;text-align:center}
.webrechner .neustart button{background:none;border:0;color:var(--muted);font-size:var(--t3);font-family:inherit;
text-decoration:underline;cursor:pointer;padding:10px 14px;min-height:44px}
.webrechner .fertig p{margin:0 0 8px;font-size:var(--t4)}
.webrechner .fertig .vnr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t2);
color:var(--muted)}
/* ---------- Kastensorten ----------
   Drei Sorten, die auch beim schnellen Blaettern unterscheidbar bleiben sollen:
   Gold mit Kante links warnt, Grau ohne Kante erklaert, Hell mit Akzentkante oben
   fasst zusammen. Dazu je ein kleines Zeichen vor der Kopfzeile - bewusst geometrisch,
   ohne Wertung: gefuellte Raute = Hinweis, offener Kreis = Erklaerung,
   gefuellter Punkt = Zusammenfassung. */
.webrechner .punkt{background:#EDECFA;border:1px solid #C9C6EF;border-top:4px solid var(--accent);
border-radius:0 0 4px 4px;padding:15px 18px 17px;margin:0 0 18px}
.webrechner .punkt .kopf{font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.webrechner .punkt .kopf::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
/* B4 · 15,5 px statt 17. Der farbige Grund traegt die Hervorhebung,
   die Schriftgroesse muss es nicht mehr tun. */
/* Drei Zahlenzeilen ueber dem Fazit. Keine Grafik - die Werte stehen anderswo schon
   in Balken und Zeitstrahl. Neu ist nur, dass sie einmal nebeneinander stehen. */
/* Der Zusammenfassungsabschnitt traegt bewusst nicht die Optik von "Auf den Punkt
   gebracht" - er ist kein Einwurf im Lesefluss, sondern ein eigener Schritt. */
.webrechner .fzhinweis{margin:-8px 0 16px;font-size:var(--t2);color:var(--muted);line-height:1.45}
 /* details traegt nur oben Abstand. Vor dem Fazit steht seit 04.09.2026 die
    Klappzeile mit der Lesehilfe - ohne diese Regel klebt der Absatz am Kasten. */
.webrechner details.erkl+.zusammen{margin-top:18px}
.webrechner .zusammen p{margin:0 0 12px;font-size:var(--t4);line-height:1.55}
.webrechner .zusammen p:last-child{margin-bottom:0}
 /* Der Schlussgedanke stand als Fliesstext in einem Absatz und war schwer zu lesen.
    Er hat jetzt eine eigene Zeile als Ueberschrift, darunter die beiden Wege als
    getrennte Absaetze (Befund Stefan, 05.09.2026). */
.webrechner .zusammen .uzueber{font-weight:650;color:var(--navy);margin:18px 0 8px}
 /* Die Zuordnungsoption ist eine Vertragsbesonderheit und soll auffallen, ohne die
    Karte zu dominieren: abgesetzte Zeile mit goldener Marke, keine eigene Flaeche. */
 /* Verweis im Fliesstext: sieht aus wie ein Link, ist aber eine Schaltflaeche,
    weil sie einen Schritt oeffnet statt eine Adresse aufzurufen. */
.webrechner .sprung{background:none;border:0;padding:0;min-height:0;font:inherit;color:var(--navy);
font-weight:650;text-decoration:underline;cursor:pointer;text-align:left}
.webrechner .weg .wegplus{position:relative;margin:10px 0 12px;padding-left:14px;font-size:var(--t3);
line-height:1.5;color:var(--ink)}
.webrechner .weg .wegplus::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
background:var(--gold);transform:rotate(45deg)}
 /* Die drei Punkte, die keine Zahl kennt. Seit 03.09.2026 Kopf von Schritt 5,
    vorher Schluss von Schritt 4. Bauart wie .gegenkurz. */
.webrechner .s1liste{margin:0 0 16px;padding:0;list-style:none;font-size:var(--t4);
line-height:1.5;color:var(--ink)}
.webrechner .s1liste li{position:relative;padding-left:18px;margin-bottom:4px}
.webrechner .s1liste li::before{content:'';position:absolute;left:0;top:.62em;
width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.webrechner #fr .lede+.s1liste{margin-top:-4px}
 /* Der Beratungshinweis stand bis 03.09.2026 als Gesprächszeile am Ende des
    Schlussblocks in Schritt 4. Ohne ihn nennen die drei Punkte offene Fragen,
    ohne zu sagen, wer sie beantwortet (Befund Stefan, 03.09.2026). */
 /* Der Beratungshinweis stand als eine Zeile zwischen zwei Textbloecken und ging in
    der Farbvielfalt des Abschnitts unter. Er ist jetzt ein eigener Kasten mit
    ruhigem Grund und einer Aussage statt eines Etiketts (Befund Stefan, 05.09.2026). */
.webrechner .beratbox{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--navy);
border-radius:3px;padding:13px 15px;margin:0 0 16px}
.webrechner .beratkopf{margin:0 0 5px;font-weight:650;color:var(--navy);font-size:var(--t4)}
.webrechner .berattext{margin:0;font-size:var(--t3);line-height:1.5;color:var(--ink)}
 /* P4 · Kacheln ueber der Zahlentafel. Balkenlaenge = Betrag, ohne Wertung: bei den
    Einzahlungen ist der kuerzere Balken der guenstigere Fall, beim Zuwachs der
    laengere. Die Farben folgen den Datenreihen des ganzen Rechners. */
.webrechner .kpikopf{font-weight:650;color:var(--navy);font-size:var(--t3);margin:0 0 8px}
.webrechner .kpigrid{display:grid;gap:10px;margin:0 0 16px}
@media(min-width:620px){.webrechner .kpigrid{grid-template-columns:repeat(3,1fr)}}
.webrechner .kpi{border:1px solid var(--rule);border-radius:4px;padding:11px 12px;background:#fff}
.webrechner .kpit{font-size:var(--t2);font-weight:650;color:var(--muted);letter-spacing:.02em;
text-transform:uppercase;margin:0 0 8px}
.webrechner .kpiz{margin:0 0 8px}
.webrechner .kpiz:last-of-type{margin-bottom:0}
.webrechner .kpiz span{display:block;font-size:var(--t2);color:var(--muted);line-height:1.3}
.webrechner .kpiz b{display:block;font-size:var(--t5);font-weight:650;color:var(--navy);
line-height:1.2;font-variant-numeric:tabular-nums}
.webrechner .kpiz b em{font-style:normal;font-weight:400;font-size:var(--t2);color:var(--muted);
margin-left:5px}
.webrechner .kpik{display:block;font-size:var(--t2);color:var(--muted);line-height:1.3;margin-top:1px}
.webrechner .kpib{display:flex}
.webrechner .kpib i.kpih{background:var(--navy);opacity:.42}
.webrechner .kpiw .kpib i.kpih{background:var(--accent);opacity:.42}
.webrechner .kpib{height:5px;background:var(--rule);border-radius:3px;overflow:hidden;margin-top:4px}
.webrechner .kpib i{display:block;height:100%;background:var(--navy)}
.webrechner .kpiw b{color:var(--accent)}
.webrechner .kpiw .kpib i{background:var(--accent)}
.webrechner .kpin{margin-top:9px;font-size:var(--t1);color:var(--muted);line-height:1.35}
.webrechner .fztafel{margin:0 0 18px;padding:0;background:var(--paper);overflow:hidden;
border:1px solid var(--rule);border-left:3px solid var(--navy);border-radius:4px}
/* Die Spaltenteilung bleibt bei 1,5fr - die Zeilentitel der Tafel sind laenger als
   die der Vergleichstabelle ("Objektwert nach 20 Jahren, bei 2,5 % Wertsteigerung").
   In einer festen 186-px-Spalte brachen sie auf vier Zeilen. */
/* Feste Wertspalten: Die Zahlen brauchen auch im groessten Fall keine 200 px,
   die Beschriftungen dagegen jeden Millimeter - sonst brechen sie auf drei und
   vier Zeilen und treiben die Zeilenhoehe hoch. */
.webrechner .fzz{display:grid;grid-template-columns:minmax(0,1fr) 200px 200px;gap:0;
align-items:stretch;font-size:var(--t3)}
.webrechner .fzz+.fzz{border-top:1px solid var(--rule)}
/* Spaltentoenung wie .cvals - sie traegt die Zuordnung, nicht der Fettdruck. */
.webrechner .fzz b:nth-of-type(1){background:rgba(17,3,110,.028)}
.webrechner .fzz b:nth-of-type(2){background:rgba(59,40,200,.028)}
/* Beschriftung wie .clbl in der Vergleichstabelle: 13,5 px, Grossbuchstaben,
   gesperrt. Auf 15 px normal gesetzt konkurrierte sie mit den Zahlen daneben -
   und die Tafel traegt die drei wichtigsten Zahlen des Rechners. */
/* Nur das direkte Kind: Der Spannenbalken bringt eigene Spans mit, die sonst
   Innenabstand und Grossbuchstaben der Beschriftung erben. */
.webrechner .fzz>span{font-size:var(--t2);letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);font-weight:600;line-height:1.35;padding:11px 14px 11px 15px}
/* Werte wie .v in der Vergleichstabelle. */
/* Ergebniszeile: der Vermoegenszuwachs ist das Ergebnis der beiden Zeilen
   darueber. Markiert wird das durch die Linie, nicht durch die Schriftgroesse -
   alle fuenf Zahlen der Tafel stehen gleich gross. */
.webrechner .fzz.erg{border-top:1px solid rgba(17,3,110,.30)}
.webrechner .fzz.erg>span{color:var(--navy)}
/* Gruppenueberschrift. Sie traegt den Zeitbezug, den sonst jede Zeile einzeln
   wiederholen muesste, und trennt Vermoegen von laufendem Ertrag. */
.webrechner .fzgruppe{padding:12px 15px 8px;font-size:var(--t2);letter-spacing:.08em;
text-transform:uppercase;font-weight:700;color:var(--navy);
background:rgba(17,3,110,.045)}
.webrechner .fzgruppe:not(:first-child){border-top:1px solid var(--rule)}
.webrechner .fzgruppe+.fzz{border-top:0}
@media(max-width:760px){.webrechner .fzgruppe{padding:11px 12px 7px}}
.webrechner .zwei i.st2{background:rgba(59,40,200,.40)}
/* Der Spannenbalken. Volle Breite ist der Ertrag vor Einkommensteuer, dunkel
   der Teil, der beim gewaehlten Satz bleibt, hell der Teil, der bei niedrigerem
   Satz dazukaeme. Der ungefuellte Rest ist die Steuer. */
.webrechner .sp{display:block;margin-top:7px;max-width:170px}
.webrechner .sp .tr{position:relative;display:block;height:5px;border-radius:3px;
background:rgba(17,3,110,.10);overflow:hidden}
.webrechner .sp .a1,.webrechner .sp .a2{position:absolute;top:0;bottom:0}
.webrechner .sp .a1{left:0;background:var(--navy)}
.webrechner .sp .a2{background:rgba(59,40,200,.40)}
@media(max-width:760px){.webrechner .sp{max-width:none}}
/* Jede Zelle traegt zwei bis drei Bloecke, die alle auf derselben linken Kante
   sitzen. Feste Zeilenhoehen statt Umbruchverhalten - die Tafel ist die
   wichtigste Zahlenflaeche des Rechners und muss buendig stehen. */
.webrechner .fzz b{color:var(--navy);font-variant-numeric:tabular-nums;font-weight:400;
padding:9px 14px 10px}
.webrechner .fzz b i{display:block;font-style:normal}
.webrechner .fzz .tw{font-size:var(--t5);font-weight:650;letter-spacing:-.01em;line-height:1.2}
.webrechner .fzz .tk{font-size:var(--t2);color:var(--muted);line-height:1.3;margin-top:1px}

/* Kopfzeile in den Farben der Vergleichstabelle: Bauherrenmodell navy,
   Vergleichswohnung lila. Vorher waren beide navy - dieselbe Seite hatte
   in Schritt 1 und 2 eine andere Farbe als hier. */
.webrechner .fzz.fzk b{font-size:var(--t3);letter-spacing:normal;font-weight:700;padding:11px 14px}
.webrechner .fzz.fzk b:nth-of-type(1){color:var(--navy)}
.webrechner .fzz.fzk b:nth-of-type(2){color:var(--accent)}
/* Umbruchpunkt von 520 auf 760 px, wie .crow. Mit Werten auf 19 px reicht der
   Platz fuer drei Spalten nicht mehr bis 520 px hinunter. */
@media(max-width:760px){
 .webrechner .fzz{grid-template-columns:1fr 1fr}
 .webrechner .fzz>span{grid-column:1 / -1;padding:11px 12px 0}
 .webrechner .fzz b{padding:3px 12px 11px}
 .webrechner .fzz.fzk>span{display:none}}
.webrechner .punkt p{margin:0;font-size:var(--t4);line-height:1.5;color:var(--ink)}
.webrechner .punkt b{color:var(--navy);font-weight:700}
.webrechner .hint2>b::before,.webrechner .abraten>b::before{content:'';display:inline-block;width:6px;height:6px;
background:var(--gold);transform:rotate(45deg);margin-right:9px;vertical-align:1px}
/* ---------- Innerhalb eines Aufklappers steht Text, keine Kastensammlung ----------
   Jeder Absatz hatte einen eigenen grauen Grund. Das kostet Hoehe und zerlegt einen
   Gedanken in Kacheln. Der Aufklapper ist durch Haarlinie und Einzug abgegrenzt -
   mehr Abgrenzung braucht er nicht.
   Dazu eine echte Ebene: Zwischentitel (.zt) stehen buendig und ohne Kante, die
   Absaetze darunter eingerueckt. Vorher sahen Titel und Absatz gleich aus. */
.webrechner .hint2.erkl2,.webrechner details.erkl .hint2{background:none;border-left:2px solid var(--rule);
border-radius:0;padding:0 0 0 13px;margin-top:10px}
.webrechner .hint2.erkl2>b::before,.webrechner details.erkl .hint2>b::before{display:none}
.webrechner .hint2.erkl2>b,.webrechner details.erkl .hint2>b{color:var(--navy)}
.webrechner details.erkl>.hint2:first-of-type{margin-top:10px}
.webrechner details.erkl[open]{border:1px solid var(--navy);border-top:0;border-radius:0 0 4px 4px;
padding:0 15px 13px}
.webrechner details.erkl[open]>summary{margin:-1px -16px 0;border-radius:4px 4px 0 0}
.webrechner details.erkl>.zt{border-left:0;padding-left:0;margin-top:18px;color:var(--navy);
font-weight:700;font-size:var(--t3)}
.webrechner details.erkl>.zt:first-of-type{margin-top:6px}
.webrechner details.erkl>.zt+.hint2{margin-top:6px}
/* Abzweig in die Vertiefung: deutlich flacher als der Hauptknopf und als Nebenweg lesbar. */
/* Die Breitengrenze stammte aus der Zeit vor Paket H, als die Spalte 864 px breit
   war. Am Telefon griff sie nie, am Desktop stand der Kasten schmaler als der
   Weiterknopf daneben - beide sind Wege aus dem Abschnitt heraus. */
.webrechner .vertief{display:block;width:100%;margin:12px auto 0;background:var(--paper);
border:2px solid var(--accent);border-radius:4px;padding:13px 50px 14px 16px;font-size:var(--t4);
font-family:inherit;color:var(--navy);font-weight:650;cursor:pointer;min-height:56px;line-height:1.35;
text-align:left;position:relative}
.webrechner .vertief .vk{display:block;font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;
color:var(--accent);font-weight:700;margin-bottom:3px}
/* Kreis mit Winkel: derselbe Blickfang wie ein Knopf, aber ohne gefuellte Flaeche -
   der Abzweig bleibt dem Hauptweg damit deutlich untergeordnet. */
.webrechner .vertief::after{content:'';position:absolute;right:15px;top:50%;margin-top:-13px;width:26px;height:26px;
border-radius:50%;background:var(--accent)}
.webrechner .vertief::before{content:'';position:absolute;right:25px;top:50%;margin-top:-4px;width:7px;height:7px;
border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);z-index:1}
.webrechner .vmarke{font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
font-weight:700;margin-bottom:5px}
.webrechner footer{background:var(--navy);color:#9A9DC4;font-size:var(--t1);padding:22px 0;margin-top:30px}
.webrechner footer b{color:#fff;display:block;margin-bottom:2px;font-weight:600}
.webrechner footer .footer-links{display:flex;flex-wrap:wrap;margin-top:16px;font-size:var(--t2);font-weight:700;
line-height:1;text-transform:uppercase}
.webrechner footer .footer-links a{color:var(--site-beige);padding:2px 10px;border-right:2px solid #9A9DC4;
text-decoration:none;transition:color .15s}
.webrechner footer .footer-links a:first-child{padding-left:0}
.webrechner footer .footer-links a:last-child{border-right:0}
.webrechner footer .recaptcha-hinweis{display:block;margin-top:7px}
.webrechner footer .recaptcha-hinweis a{color:#C9CBE4}

/* ---------- Einbindung in die Wagtail-Gestaltung ----------
   Die Website arbeitet mit Ubuntu und voll gerundeten Aktionsflaechen. Lange
   Entscheidungsfragen bleiben in normaler Schreibweise, kurze Aktionen tragen
   wie auf pericon.at Versalien und die groessere Laufweite. */
 /* Safari auf iOS faerbt Schaltflaechen ohne eigene Textfarbe mit der
    System-Akzentfarbe blau, Chrome nimmt Schwarz. Am iPad standen die Steuersaetze
    deshalb blau, am Notebook schwarz (Befund Stefan, 05.09.2026). Die Grundfarbe
    wird hier gesetzt; Regeln mit eigener color-Angabe ueberschreiben sie. */
.webrechner button{font-family:inherit;color:var(--ink);transition:background-color .15s,color .15s,border-color .15s}
.webrechner .trow button,.webrechner .take,.webrechner #anfrage .senden,.webrechner .fertig .nach{
border:1px solid transparent;border-radius:9999px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.webrechner .take,.webrechner #anfrage .senden,.webrechner .fertig .nach{background:var(--site-blue);color:#fff}
.webrechner .trow button{background:var(--site-beige);color:var(--site-blue)}
.webrechner .cta{background:var(--site-blue);border:1px solid transparent;border-radius:9999px;padding-left:28px;font-weight:700;
transition:background-color .15s,color .15s}
.webrechner .vertief{border-color:var(--site-blue);border-radius:9999px;padding-left:24px}
.webrechner .vertief::after{background:var(--site-blue)}
.webrechner .vorein .aend,.webrechner .pill,.webrechner .seg button,.webrechner .qopt button,.webrechner .anrede button{border-radius:9999px}
.webrechner .vorein .aend{background:var(--site-beige);border-color:var(--site-beige);font-weight:700;
letter-spacing:.05em;text-transform:uppercase}
.webrechner .tog{border-radius:9999px}
.webrechner .pill[aria-pressed=true],.webrechner .seg button[aria-pressed=true],.webrechner .tog button[aria-pressed=true],.webrechner .anrede button[aria-pressed=true]{background:var(--site-blue);border-color:var(--site-blue);color:#fff}
.webrechner .seg button[aria-pressed=true] small{color:#fff}
.webrechner .schluss .aktion button{border-radius:9999px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.webrechner .schluss .aktion button.zweit{border-color:var(--site-beige)}
.webrechner #anfrage .senden[disabled]{background:#C9CBD8;color:#6E7080}
@media(hover:hover){
.webrechner footer .footer-links a:hover{color:#fff}
 .webrechner .take:hover,.webrechner #anfrage .senden:not([disabled]):hover,.webrechner .fertig .nach:hover,.webrechner .cta:hover{
  background:var(--site-blue-light);border-color:var(--site-blue);color:var(--site-blue)}
 .webrechner .cta:hover .ctaz,.webrechner .cta:hover small{color:var(--site-blue)}
 .webrechner .cta:hover::after{border-color:var(--site-blue)}
 .webrechner .trow button:hover{background:#fff;border-color:var(--site-blue);color:var(--site-blue)}
 .webrechner .vorein .aend:hover,.webrechner .pill:not([aria-pressed=true]):hover,.webrechner .seg button:not([aria-pressed=true]):hover,.webrechner .qopt button:hover,.webrechner .anrede button:not([aria-pressed=true]):hover,.webrechner .vertief:hover{
  background:var(--site-blue-light);border-color:var(--site-blue);color:var(--site-blue)}
}
.webrechner .grecaptcha-badge{visibility:hidden}
@media(max-width:640px){
  .webrechner h3.sec{font-size:var(--t6)}.webrechner .teaser h2{font-size:var(--t5)}
  .webrechner .v{font-size:var(--t5)}
  .webrechner .chead div{font-size:var(--t3);padding:10px 11px}
  .webrechner .donut{width:96px;height:96px}.webrechner .donut::after{inset:21px}
  .webrechner .seg{flex-direction:column}
}
/* A1: Unter 480 px steht der Klammerwert unter der Hauptzahl statt daneben.
   Nebeneinander laeuft die Zelle sonst ueber oder die Hauptzahl bricht mitten
   im Betrag um. Die Dreispalten-Struktur bleibt unveraendert. */
@media(max-width:480px){
  .webrechner .v .kl{display:block;margin-top:2px;font-size:var(--t2);line-height:1.35}
  .webrechner .cvals>div{padding:2px 10px 12px}
  .webrechner .clbl{padding:11px 10px 0}
}
/* A4: Auf sehr schmalen Schirmen entfaellt jede zweite Achsenbeschriftung.
   Die Teilstriche selbst bleiben stehen, nur die Zahl darunter faellt weg. */
@media(max-width:399px){
  .webrechner svg text.tk-odd{display:none}
}
@media(prefers-reduced-motion:no-preference){.webrechner .tlseg{transition:flex-grow .25s ease}}
.webrechner :focus-visible{outline:2px solid var(--accent);outline-offset:2px}