/* ==========================================================================
   seite.css – Seitensatz meinHaus v17 (P16 B3, Stand 29.10.2026)
   Gilt für index, koeln, wuerzburg, denkmal (Bausteine 1–13) und die
   Unterseiten impressum, datenschutz, erstinformation (body.unterseite).
   Alle Farben, Größen, Abstände und Radien nur über tokens.css.
   Rechner-Dateien bleiben unangetastet – der Rechner wird nur per CSS gestaltet.
   ========================================================================== */

/* ---------- Alt-Namen für Inline-Stile aus 16b und rechner.js ----------
   rechner.js und einzelne Inline-Stile nutzen noch die v16-Variablen.
   Sie zeigen hier auf die neuen Rollen – rechner.js bleibt dadurch unverändert. */
:root {
  --blau: var(--farbe-dunkel);
  --blau-hell: var(--farbe-link);
  --teal: var(--farbe-link);
  --orange: var(--farbe-aktion);
  --orange-dunkel: var(--farbe-aktion-hover);
  --text: var(--farbe-text);
  --grau: var(--farbe-text-2);
  --gruen: var(--farbe-zahl);
  --radius: var(--radius-lg);
}

/* Rem-Basis: Inline-Stile aus rechner.js nutzen .8rem bis .92rem.
   Mit 21.25px Basis ergibt .8rem genau 17px = Fußnoten-Minimum.
   Eigene Regeln unten arbeiten nur mit px-Tokens. */
html { font-size: 21.25px; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  font-weight: var(--gewicht-text);
  line-height: var(--zeile-text);
  color: var(--farbe-text);
  background: var(--farbe-grund);
}

img, svg { max-width: 100%; }
a { color: var(--farbe-link); text-underline-offset: 3px; }
a:hover { color: var(--farbe-aktion-hover); }
:focus-visible { outline: 3px solid var(--farbe-aktion); outline-offset: 2px; }
strong { font-weight: 700; }

.wrap { max-width: var(--inhalt-max); margin: 0 auto; padding: 0 var(--space-12); }

/* ---------- Baustein 1: Kopf ---------- */
header {
  background: var(--farbe-karte);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 50;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 80px; padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.logo {
  display: inline-flex; flex-direction: column; gap: var(--space-1);
  text-decoration: none; color: var(--farbe-text-2);
}
.logo img { display: block; width: 168px; min-width: var(--logo-min); height: auto; }
.logo small {
  display: block; font-size: var(--groesse-fussnote); line-height: 1.2;
  font-weight: 500; color: var(--farbe-text-2); white-space: nowrap;
}
.nav a.cta,
.btn,
.pdfbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-hoehe); padding: 0 var(--space-6);
  background: var(--farbe-aktion); color: var(--farbe-aktion-text);
  border: 0; border-radius: var(--radius-md);
  font-family: var(--schrift-sans); font-size: var(--groesse-button); font-weight: var(--gewicht-button);
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
}
.nav a.cta:hover, .btn:hover, .pdfbtn:hover { background: var(--farbe-aktion-hover); color: var(--farbe-aktion-text); }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- Baustein 2: Hero ---------- */
.hero { padding: var(--space-12) 0 var(--space-16); background: var(--farbe-grund); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--space-12); align-items: center; }
h1, h2, h3 { font-family: var(--schrift-ueberschrift); color: var(--farbe-text); }
h1 {
  font-size: var(--groesse-h1); line-height: var(--zeile-h1); font-weight: var(--gewicht-h1);
  letter-spacing: -0.01em; margin-bottom: var(--space-4);
}
h1 em { font-style: normal; color: var(--farbe-akzent); }
.h1-fuss {
  font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote);
  color: var(--farbe-text-2); margin: 0 0 var(--space-4); max-width: var(--zeilenlaenge-max);
}
.hero p.c3 { font-weight: 700; color: var(--farbe-dunkel); margin: 0 0 var(--space-3); }
.hero p.sub { color: var(--farbe-text-2); margin-bottom: var(--space-6); max-width: var(--zeilenlaenge-max); }
.badges { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.badge {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-weight: 600; color: var(--farbe-text); line-height: 1.45;
}
.badge::before {
  content: ""; flex: 0 0 auto; width: var(--symbol-groesse); height: var(--symbol-groesse); margin-top: 1px;
  background-color: var(--farbe-akzent);
  -webkit-mask: url("symbole/haken.svg") center / contain no-repeat;
          mask: url("symbole/haken.svg") center / contain no-repeat;
}
.badge .b-kurz { display: none; }
.hero-note { font-size: var(--groesse-fussnote); color: var(--farbe-text-2); margin-top: var(--space-2); }

/* Bewertungszeile mit Porträt-Miniatur */
.beweis {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 560px; margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--farbe-karte); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  font-size: var(--groesse-fussnote); line-height: 1.45; font-weight: 600; color: var(--farbe-text);
}
.beweis .beweis-bild { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-md); object-fit: cover; display: block; }
.beweis .sterne { color: var(--farbe-akzent); white-space: nowrap; }
.beweis .sterne .symbol { width: 18px; height: 18px; vertical-align: -3px; }
.beweis strong { color: var(--farbe-text); }
.beweis .b-kurz { display: none; }

/* Linienzeichnung (Desktop) */
.haus-karte { text-align: center; }
.haus-karte img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.haus-karte p { font-size: var(--groesse-fussnote); color: var(--farbe-text-2); margin-top: var(--space-3); line-height: var(--zeile-fussnote); }

/* Baustein 2a: PLZ-Schnellfeld (nur Handy, nur mit Skript) */
.plz-schnell { display: none; margin-top: var(--space-2); }
.plz-schnell label { display: block; font-weight: 700; margin: 0 0 var(--space-2); color: var(--farbe-text); }
.plz-schnell .plz-zeile { display: flex; flex-direction: column; gap: var(--space-3); }
.plz-schnell input {
  width: 100%; min-height: var(--button-hoehe); padding: 0 var(--space-4);
  font: inherit; font-size: 20px; letter-spacing: .08em; color: var(--farbe-text);
  background: var(--farbe-karte); border: 1.5px solid var(--farbe-feldrand); border-radius: var(--radius-md);
}
.plz-schnell input:focus { outline: 3px solid var(--farbe-aktion); outline-offset: 1px; border-color: var(--farbe-aktion); }
.plz-schnell .btn { width: 100%; }
.plz-schnell .hinweis-klein { margin-top: var(--space-2); }
.plz-schnell .plz-fehler { display: none; margin-top: var(--space-2); font-size: var(--groesse-fussnote); color: var(--farbe-aktion-hover); font-weight: 600; }
.plz-schnell.fehlerhaft .plz-fehler { display: block; }

/* ---------- Abschnitte ---------- */
section { padding: var(--space-16) 0; }
h2 {
  font-size: var(--groesse-h2); line-height: var(--zeile-h2); font-weight: var(--gewicht-h2);
  margin-bottom: var(--space-3); max-width: 28em;
}
h2::before {
  content: ""; display: block; width: 48px; height: 0;
  border-top: 2px solid var(--farbe-dachlinie); margin-bottom: var(--space-4);
}
#rechner h2::before { margin-left: auto; margin-right: auto; border-top-color: var(--farbe-akzent-auf-dunkel); }
p.lead { color: var(--farbe-text-2); margin-bottom: var(--space-8); max-width: var(--zeilenlaenge-max); }
section > .wrap > p { max-width: var(--zeilenlaenge-max); }

/* Bausteine 4/5: Kacheln */
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.karte {
  background: var(--farbe-karte); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.karte h3 { font-size: 22px; line-height: var(--zeile-h3); font-weight: var(--gewicht-h3); margin-bottom: var(--space-2); }
.karte p { color: var(--farbe-text-2); }
.karte .ico { display: block; color: var(--farbe-akzent); margin-bottom: var(--space-3); }
.karte .ico .symbol { width: 36px; height: 36px; }

/* Baustein 3: Beispielrechnung */
.beispiel {
  background: var(--farbe-karte); border: 1px solid var(--linie); border-top: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); max-width: 860px;
}
.beispiel .satz strong { color: var(--farbe-text); }
.beispiel .betrag-gross { display: inline-block; font-size: var(--groesse-h2); line-height: 1.2; font-weight: 800; color: var(--farbe-zahl); }
.beispiel .weitere { color: var(--farbe-text-2); margin-top: var(--space-3); }
.beispiel .pflicht {
  font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote); color: var(--farbe-text-2);
  margin-top: var(--space-4); border-top: 1px solid var(--linie); padding-top: var(--space-3);
}
.beispiel .pflicht a { font-weight: 700; white-space: nowrap; }

/* Baustein 6: Denkmal-Vergleich und „Ehrlichkeit vorab“ */
.gegen { }
.gegen-zeile {
  background: var(--farbe-karte); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-bottom: var(--space-4); max-width: 920px;
}
.gegen-zeile h3 { font-size: 22px; line-height: var(--zeile-h3); margin-bottom: var(--space-4); }
.gegen-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.gegen-paar div { color: var(--farbe-text-2); padding-left: var(--space-4); }
.gegen-paar .wir { border-left: 3px solid var(--farbe-akzent); color: var(--farbe-text); }
.gegen-paar .andere { border-left: 3px solid var(--linie); }
.gegen-paar b {
  display: block; font-size: var(--groesse-fussnote); letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: var(--space-1); font-weight: 700;
}
.gegen-paar .wir b { color: var(--farbe-zahl); }
.gegen-paar .andere b { color: var(--farbe-text-2); }
.gegen-fuss { font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote); color: var(--farbe-text-2); margin-top: var(--space-4); max-width: 920px; }
.info-band {
  background: var(--farbe-flaeche); border-left: 3px solid var(--farbe-akzent); border-radius: var(--radius-md);
  padding: var(--space-6); max-width: 860px;
}
.info-band p { color: var(--farbe-text); }

/* ---------- Baustein 7: Rechner (Dateien unverändert, Optik nur hier) ---------- */
#rechner { background: var(--farbe-dunkel); color: var(--farbe-text-auf-dunkel); }
#rechner h2, #rechner > .wrap > p.lead { color: var(--farbe-text-auf-dunkel); margin-left: auto; margin-right: auto; text-align: center; }
#rechner > .wrap > p.lead { color: var(--farbe-text-auf-dunkel); }
.box {
  background: var(--farbe-karte); color: var(--farbe-text); border-radius: var(--radius-lg);
  padding: var(--space-8); max-width: 680px; margin: 0 auto;
}
.steps { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.step-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--linie); }
.step-dot.aktiv { background: var(--farbe-aktion); }
.schritt { display: none; }
.schritt.aktiv { display: block; }
.schritt h3 { font-size: var(--groesse-h3); line-height: var(--zeile-h3); margin-bottom: var(--space-2); }
.box label { display: block; font-weight: 700; margin: var(--space-4) 0 var(--space-2); color: var(--farbe-text); }
.box input[type=text], .box input[type=number], .box input[type=email], .box input[type=tel], .box select {
  width: 100%; min-height: var(--touch-min); padding: 0 var(--space-4);
  font: inherit; color: var(--farbe-text); background: var(--farbe-karte);
  border: 1.5px solid var(--farbe-feldrand); border-radius: var(--radius-md);
}
.box input:focus, .box select:focus { outline: 3px solid var(--farbe-aktion); outline-offset: 1px; border-color: var(--farbe-aktion); }
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.radio-row.drei { grid-template-columns: 1fr 1fr 1fr; }
.box .radio-karte {
  display: flex; align-items: center; justify-content: center; min-height: var(--touch-min);
  margin: 0; padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--farbe-feldrand); border-radius: var(--radius-md);
  background: var(--farbe-karte); color: var(--farbe-text);
  font-weight: 600; text-align: center; line-height: 1.3; cursor: pointer;
}
.radio-karte input { display: none; }
.box .radio-karte.gewaehlt { border-color: var(--farbe-aktion); background: var(--farbe-grund); color: var(--farbe-aktion-hover); box-shadow: inset 0 0 0 1px var(--farbe-aktion); }
.nav-btns { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }
.btn-zurueck {
  min-height: var(--button-hoehe); padding: 0 var(--space-6);
  background: transparent; color: var(--farbe-text); border: 1.5px solid var(--farbe-feldrand); border-radius: var(--radius-md);
  font-family: var(--schrift-sans); font-size: var(--groesse-button); font-weight: var(--gewicht-button); cursor: pointer;
}
.btn-zurueck:hover { border-color: var(--farbe-text); }
.fehler {
  display: none; margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--farbe-flaeche); border-left: 3px solid var(--farbe-aktion-hover); border-radius: var(--radius-md);
  color: var(--farbe-text); font-size: var(--groesse-fussnote); font-weight: 600;
}
.hinweis-klein, .sb-hinweis {
  font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote); color: var(--farbe-text-2);
  margin-top: var(--space-2);
}
.sb-hinweis { margin: var(--space-4) auto 0; max-width: 560px; text-align: center; }
.weiter-zeile {
  background: var(--farbe-flaeche); border-left: 3px solid var(--farbe-akzent); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-top: var(--space-6); color: var(--farbe-text);
}
.ergebnis { text-align: center; padding: var(--space-2) 0; }
.ergebnis .betrag { font-size: var(--groesse-h1); line-height: 1.15; font-weight: 800; color: var(--farbe-zahl); margin: var(--space-2) 0; }
.ergebnis .pro { color: var(--farbe-text-2); }
.ergebnis .monat { color: var(--farbe-zahl); font-weight: 700; margin-top: var(--space-1); }
.ergebnis .disclaimer {
  font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote); color: var(--farbe-text-2);
  margin: var(--space-4) auto 0; max-width: 480px;
}
#rechner .erreichbar-zeile {
  max-width: 680px; margin: var(--space-6) auto 0; text-align: center;
  color: var(--farbe-text-auf-dunkel); font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote);
}
#rechner .erreichbar-zeile strong { color: var(--weiss); }
#rechner .erreichbar-zeile a { color: var(--farbe-akzent-auf-dunkel); }

/* Baustein 8: Quartiere */
.quartiere dl { margin-top: var(--space-3); max-width: 860px; }
.quartiere dt { font-weight: 700; color: var(--farbe-text); margin-top: var(--space-4); }
.quartiere dd { color: var(--farbe-text-2); margin-left: 0; }
.quartiere .plz { font-variant-numeric: tabular-nums; color: var(--farbe-text); font-weight: 600; }

/* Baustein 9: Methode */
.methode ul { margin: var(--space-3) 0 0 1.2em; color: var(--farbe-text-2); max-width: 860px; }
.methode li { margin-bottom: var(--space-2); }
.methode li strong { color: var(--farbe-text); }

/* Baustein 10: FAQ */
.faq { max-width: 860px; }
.faq details {
  background: var(--farbe-karte); border: 1px solid var(--linie); border-radius: var(--radius-md);
  padding: 0 var(--space-6); margin-bottom: var(--space-3);
}
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; min-height: var(--touch-min); font-weight: 700; color: var(--farbe-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 8px;
  border-right: 2px solid var(--farbe-akzent); border-bottom: 2px solid var(--farbe-akzent);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 14px; }
.faq details p { color: var(--farbe-text-2); padding-bottom: var(--space-4); }

/* Baustein 11: Betreuung */
.betreiber {
  display: flex; align-items: flex-start; gap: var(--space-6);
  background: var(--farbe-karte); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  padding: var(--space-6); max-width: 860px;
}
.betreiber .portraet { width: 132px; height: auto; aspect-ratio: 480 / 632; object-fit: cover; border-radius: var(--radius-md); flex: 0 0 auto; display: block; }
.betreiber p { color: var(--farbe-text-2); }
.betreiber strong { color: var(--farbe-text); }
.erreichbar { display: block; margin-top: var(--space-3); color: var(--farbe-text); }

/* ---------- Baustein 12: Fuß ---------- */
footer {
  background: var(--farbe-dunkel); color: var(--farbe-text-auf-dunkel);
  padding: var(--space-12) 0; font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote);
}
footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
footer a { color: var(--farbe-akzent-auf-dunkel); text-decoration: none; margin-left: var(--space-4); }
footer a:hover { color: var(--weiss); text-decoration: underline; }
footer .fuss-marke { display: flex; flex-direction: column; gap: var(--space-2); }
footer .fuss-marke img { display: block; width: 140px; min-width: var(--logo-min); height: auto; }
footer .fuss-anschrift a { margin: 0; color: var(--farbe-text-auf-dunkel); }
footer .fuss-links { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; }
footer .seiten-liste {
  flex-basis: 100%; border-top: 1px solid var(--tinte-2); padding-top: var(--space-4); margin-top: var(--space-2);
  color: var(--farbe-text-auf-dunkel);
}
footer .seiten-liste a { margin: 0 var(--space-4) 0 0; display: inline-block; }

/* ---------- Baustein 13: Bewertungsleiste (Markup und Skript unverändert) ---------- */
#pe-leiste {
  --pe-marke: var(--farbe-text); --pe-text: var(--farbe-text); --pe-grau: var(--farbe-text-2); --pe-linie: var(--linie);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--farbe-karte); border-top: 1px solid var(--pe-linie);
  color: var(--pe-text); font-family: var(--schrift-sans); font-size: var(--groesse-fussnote); line-height: 1.4;
  transform: translateY(110%); transition: transform .4s ease;
}
#pe-leiste.pe-an { transform: none; }
#pe-leiste[hidden] { display: none; }
#pe-leiste .pe-in { max-width: var(--inhalt-max); margin: 0 auto; padding: var(--space-2) 56px var(--space-2) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1) var(--space-4); position: relative; min-height: var(--touch-min); }
#pe-leiste a { color: var(--farbe-link); }
#pe-leiste .pe-link { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--pe-text); min-height: var(--touch-min); }
#pe-leiste .pe-link:hover .pe-mehr { text-decoration: underline; }
#pe-leiste .pe-sterne { position: relative; display: inline-block; width: 88px; height: 16px; flex: none; }
#pe-leiste .pe-sterne svg { position: absolute; top: 0; left: 0; width: 88px; height: 16px; }
#pe-leiste .pe-voll svg { max-width: none; }
#pe-leiste .pe-voll { position: absolute; top: 0; left: 0; height: 16px; overflow: hidden; }
#pe-leiste .pe-note { font-weight: 800; color: var(--pe-marke); }
#pe-leiste .pe-mehr { font-weight: 700; color: var(--farbe-link); white-space: nowrap; }
#pe-leiste .pe-info { background: none; border: 0; padding: var(--space-1) var(--space-2); min-height: var(--touch-min); font: inherit; color: var(--pe-grau); text-decoration: underline; cursor: pointer; }
#pe-leiste .pe-zu { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); background: none; border: 0; width: var(--touch-min); height: var(--touch-min); font-size: 24px; line-height: 1; color: var(--pe-grau); cursor: pointer; }
#pe-leiste .pe-text { flex-basis: 100%; max-width: 760px; margin: var(--space-1) auto var(--space-2); color: var(--pe-grau); }
#pe-leiste .pe-text[hidden] { display: none; }
#pe-leiste .pe-kurz { display: none; }
@media (prefers-reduced-motion: reduce) { #pe-leiste { transition: none; } }

/* ---------- Unterseiten (Impressum, Datenschutz, Erstinformation) ---------- */
body.unterseite header .nav { max-width: 860px; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
body.unterseite .nav a.zurueck { color: var(--farbe-link); font-weight: 700; text-decoration: none; min-height: var(--touch-min); display: inline-flex; align-items: center; }
body.unterseite main { max-width: 860px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-16); }
body.unterseite main h1 { font-size: var(--groesse-h2); line-height: var(--zeile-h2); margin-bottom: var(--space-2); }
body.unterseite main h2 { font-size: var(--groesse-h3); line-height: var(--zeile-h3); margin: var(--space-8) 0 var(--space-2); }
body.unterseite main h2::before { display: none; }
body.unterseite main h3 { font-size: var(--groesse-text); color: var(--farbe-text); margin: var(--space-4) 0 var(--space-1); }
body.unterseite main p { margin-bottom: var(--space-3); }
body.unterseite main p.unter { color: var(--farbe-text-2); margin-bottom: var(--space-6); }
body.unterseite main ul { margin: 0 0 var(--space-3) 1.3em; }
body.unterseite main li { margin-bottom: var(--space-1); }
body.unterseite main .karte { margin-bottom: var(--space-4); }
body.unterseite main .karte p { color: var(--farbe-text); }
body.unterseite main dt { font-weight: 700; color: var(--farbe-text); margin-top: var(--space-2); }
body.unterseite main dd { margin-left: 0; margin-bottom: var(--space-2); }
body.unterseite .klein { font-size: var(--groesse-fussnote); color: var(--farbe-text-2); }
body.unterseite footer .wrap { max-width: 860px; padding: 0 var(--space-4); }

/* ---------- Responsiv ---------- */
@media (max-width: 1020px) {
  .karten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 var(--space-4); }
  .hero { padding: var(--space-8) 0 var(--space-12); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .haus-karte { display: none; }
  .karten { grid-template-columns: 1fr; gap: var(--space-4); }
  section { padding: var(--space-12) 0; }
  h2 { font-size: 26px; }
  .beispiel { padding: var(--space-6) var(--space-4); }
  .gegen-paar { grid-template-columns: 1fr; gap: var(--space-4); }
  .box { padding: var(--space-6) var(--space-4); }
  .betreiber { flex-direction: column; padding: var(--space-4); }
  .betreiber .portraet { width: 120px; }
  footer .wrap { flex-direction: column; }
  footer a { margin: 0 var(--space-4) 0 0; }
  /* PLZ-Schnellfeld ersetzt auf dem Handy den Button – nur wenn das Skript läuft */
  .js-plz .plz-schnell { display: block; }
  .js-plz .hero .btn-hero { display: none; }
}
@media (max-width: 600px) {
  .badge .b-lang, .beweis .b-lang { display: none; }
  .badge .b-kurz, .beweis .b-kurz { display: inline; }
  .beweis .pe-inline { display: none; }
  .radio-row.drei { grid-template-columns: 1fr; }
  #pe-leiste .pe-in { gap: var(--space-1) var(--space-3); padding: var(--space-1) 52px var(--space-1) var(--space-3); }
  #pe-leiste .pe-lang { display: none; }
  #pe-leiste .pe-kurz { display: inline; }
  #pe-leiste .pe-sterne, #pe-leiste .pe-sterne svg { width: 70px; height: 13px; }
  #pe-leiste .pe-voll { height: 13px; }
  #pe-leiste .pe-link { white-space: nowrap; gap: 6px; }
  #pe-leiste .pe-info { text-decoration: none; }
}
@media (max-width: 480px) {
  .nav { min-height: 0; padding-top: var(--space-4); padding-bottom: var(--space-3); }
  .nav a.cta { display: none; }
  .logo img { width: 150px; }
}

/* Sterne der Bewertungsleiste in Markenfarben (Markup unverändert, Füllung per CSS) */
#pe-leiste .pe-sterne > svg g { fill: var(--linie); }
#pe-leiste .pe-voll svg g { fill: var(--farbe-akzent); }

/* Schmale Handys (360 px): nichts darf seitlich überstehen */
.box .radio-karte { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.nav { flex-wrap: wrap; }
@media (max-width: 480px) {
  body.unterseite .nav a.zurueck { min-height: 0; }
}
.gegen-paar div, body.unterseite main { overflow-wrap: anywhere; hyphens: auto; min-width: 0; }
@media (max-width: 400px) { .gegen-zeile { padding: var(--space-4); } }

/* ==========================================================================
   B11 (30.10.2026): Startseite – Hero mit Rechner-Karte (Variante B, Ja Thomas)
   Nur .hero--start (index.html); Stadtseiten unverändert.
   Desktop: links Text, rechts Karte „Ihr Beitrag in 2 Minuten“ mit PLZ-Feld,
   darunter Bewertungszeile – ab 650 px Fensterhöhe über dem Rand.
   Handy: H1 → Sternchen-Zeile → PLZ-Feld → Einleitung → Vorteile → Bewertung.
   Ohne Skript zeigt die Karte den Button statt des PLZ-Felds.
   ========================================================================== */
.hero--start .start-cap { font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote); color: var(--farbe-text-2); margin: var(--space-3) 0 0; }
.hero--start .start-titel { font-family: var(--schrift-ueberschrift); font-size: var(--groesse-h3); line-height: var(--zeile-h3); font-weight: var(--gewicht-h3); color: var(--farbe-text); margin: 0 0 var(--space-4); }
.js-plz .hero--start .btn-hero { display: none; }
.js-plz .hero--start .plz-schnell { display: block; margin: 0; }
.hero--start .start-karte .btn-hero { width: 100%; }
@media (min-width: 821px) {
  .hero--start { padding: var(--space-8) 0 var(--space-12); }
  .hero--start .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-12); align-items: start; }
  .hero--start .badges { margin-bottom: 0; }
  .hero--start .start-karte {
    background: var(--farbe-karte); border: 1px solid var(--linie); border-top: 3px solid var(--farbe-akzent);
    border-radius: var(--radius-lg); padding: var(--space-6);
  }
  .hero--start .beweis { max-width: none; margin-top: var(--space-4); }
}
/* Kleine Hauszeichnung oben rechts in der Karte (Leitmotiv Altbau); Karte bleibt oben bündig mit der H1 */
@media (min-width: 821px) {
  .hero--start .start-karte { position: relative; }
  .hero--start .start-bild { display: block; position: absolute; top: var(--space-4); right: var(--space-4); width: 44px; height: auto; }
  .hero--start .start-titel { padding-right: 56px; }
}
/* Niedrige Fenster (650–699 px): Karte dichter */
@media (min-width: 821px) and (max-height: 699px) {
  .hero--start .start-karte { padding: var(--space-4) var(--space-6); }
  .hero--start .start-titel { margin-bottom: var(--space-2); }
  .hero--start .beweis { margin-top: var(--space-3); }
}
/* Schmale Desktop-/Tablet-Fenster: Bewertungszeile etwas näher an die Karte */
@media (min-width: 821px) and (max-width: 1100px) {
  .hero--start .beweis { margin-top: var(--space-3); }
}
@media (max-width: 820px) {
  .hero--start .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero--start .hero-text, .hero--start .start-spalte, .hero--start .start-karte { display: contents; }
  .hero--start h1 { order: 1; }
  .hero--start p.c3 { order: 2; }
  .hero--start .btn-hero, .js-plz .hero--start .plz-schnell { order: 3; margin-bottom: var(--space-6); }
  .hero--start p.sub { order: 4; }
  .hero--start .badges { order: 5; margin-bottom: 0; }
  .hero--start .beweis { order: 6; }
  .hero--start .start-bild, .hero--start .start-titel, .hero--start .start-cap { display: none; }
}

/* ---------- B13 Feinschliff (31.10.2026) ---------- */
/* Anlass-Absatz unter den Leistungskarten: drei Zeilen mit Leerzeile, Text in normaler Größe (≥ 17 px) */
.anlass { margin-top: var(--space-8); max-width: var(--zeilenlaenge-max); color: var(--farbe-text-2); }
.anlass p { margin: 0 0 var(--space-6); }
.anlass p:last-child { margin-bottom: 0; }
/* Kästchen im Rechner mittig zur ersten Textzeile (rechner.js setzt margin-top:3px inline, darum !important) */
#rechnerForm label > input[type=checkbox] { font: inherit; line-height: inherit; flex: 0 0 auto; width: 18px !important; height: 18px; margin: calc((1lh - 18px) / 2) 0 0 !important; }

/* ==========================================================================
   B12 (30.10.2026): Stadtseiten Köln, Würzburg, Denkmal – Hero wie Startseite
   (Variante B „Rechner-Karte rechts“). .hero--stadt ergänzt .hero--start:
   Die Sternchen-Auflösung (.h1-fuss) bleibt direkt unter der H1 (Blickfang).
   Handy: H1 → Sternchen-Auflösung → PLZ-Feld → Leistungszeile → Einleitung → Vorteile → Bewertung.
   Desktop: H1 im Hero 40 statt 44 px – Startseite und Köln kommen so auf 3 Zeilen
   (Grundsätze Abschnitt 2); Unterseiten behalten das Token.
   ========================================================================== */
@media (min-width: 821px) {
  .hero--start h1 { font-size: 40px; }
}
@media (max-width: 820px) {
  .hero--stadt .h1-fuss { order: 2; }
  .hero--stadt .btn-hero, .js-plz .hero--stadt .plz-schnell { order: 3; }
  .hero--stadt p.c3 { order: 4; }
  .hero--stadt p.sub { order: 5; }
  .hero--stadt .badges { order: 6; }
  .hero--stadt .beweis { order: 7; }
}

/* ==========================================================================
   UWG-Runde 6 (31.10.2026): Karte „Vermieter-Spezialfälle inklusive“ –
   aufklappbare Liste „Alle Vermieter-Leistungen“ (Beleg: Exklusivvereinbarung FINAS).
   ========================================================================== */
.karte-mehr { margin-top: var(--space-3); }
.karte-mehr summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min); font-weight: 700; color: var(--farbe-link);
}
.karte-mehr summary::-webkit-details-marker { display: none; }
.karte-mehr summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.karte-mehr[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.karte-mehr ul { margin: var(--space-2) 0 0 1.2em; color: var(--farbe-text-2); }
.karte-mehr li { margin-bottom: var(--space-2); }
.karte .karte-mehr p { margin-top: var(--space-3); font-size: var(--groesse-fussnote); line-height: var(--zeile-fussnote); }
@media (prefers-reduced-motion: reduce) { .karte-mehr summary::after { transition: none; } }

/* UWG-Runde 6, Punkt 5 (31.10.2026): kleine Handys (≤ 380 px, z. B. 360×640, 375×667) –
   PLZ-Feld auf allen Einstiegsseiten über dem Rand: Bewertungsleiste einzeilig (Schrift bleibt 17 px),
   H1 30 statt 32 px, Hero oben 16 statt 32 px. */
@media (max-width: 380px) {
  .hero--start { padding-top: var(--space-4); }
  .hero--start h1 { font-size: 30px; }
  #pe-leiste .pe-in { gap: var(--space-1); padding-left: var(--space-2); }
  #pe-leiste .pe-link { gap: 4px; }
  #pe-leiste .pe-sterne, #pe-leiste .pe-sterne svg { width: 60px; height: 11px; }
  #pe-leiste .pe-voll { height: 11px; }
  #pe-leiste .pe-info { padding: var(--space-1) 6px; }
}