/* Haldern Immobilien · Gomedio Musterseite
   Idee: „Jedes Haus bekommt eine Karte.“ Das Büro arbeitet wie ein Karteikasten:
   Abschnitte und Objekte sind Karten mit Reitern, die Bewertungsanfrage legt
   Schritt für Schritt eine Hauskarte an. Pflaume für das Büro, Senf für alles,
   was man anklicken soll. Text steht immer auf glatter Fläche. */

@font-face{font-family:"Inter";src:url("/fonts/Inter-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --pflaume:#2b1a30;
  --pflaume-2:#3b2542;
  --pflaume-3:#5b3d63;
  --flieder:#f0eaf1;
  --flieder-2:#e2d7e4;
  --weiss:#fffdfb;
  --tinte:#22162a;
  --grau:#5b5061;
  --linie:#d8cddb;
  --senf:#e3a93f;
  --senf-2:#f0c26a;
  --senf-hell:#f8e6bd;
  --auf-dunkel:#f7f1f7;
  --auf-dunkel-grau:#cbbccf;
  --dunkel-linie:#4c3554;
  --rand:clamp(16px,4vw,56px);
  --breite:1280px;
  --abschnitt:clamp(72px,9vw,128px);
  --t-h1:clamp(2.6rem,1.4rem + 4.6vw,5.4rem);
  --t-h2:clamp(1.95rem,1.3rem + 2.3vw,3.2rem);
  --t-gross:clamp(1.12rem,1.02rem + .45vw,1.38rem);
  --aus:cubic-bezier(.2,.75,.25,1);
  --r:12px;
  --schatten:0 1px 2px rgba(43,26,48,.06),0 18px 40px -18px rgba(43,26,48,.32);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 17px/1.62 "Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-feature-settings:"cv11","ss03";-webkit-font-smoothing:antialiased;overflow-x:clip}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3,p,ul,ol,dl,dd,fieldset{margin:0}
ul,ol{padding:0}
h1,h2,h3{font-weight:780;letter-spacing:-.038em;line-height:1.04;text-wrap:balance}
h1{font-size:var(--t-h1);letter-spacing:-.045em;line-height:.98}
h2{font-size:var(--t-h2)}
h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem);letter-spacing:-.025em;line-height:1.15}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pflaume-3);outline-offset:3px;border-radius:3px}
.dunkel :focus-visible,.kopf :focus-visible,.fuss :focus-visible,.auftakt :focus-visible{outline-color:var(--senf-2)}
.wrap{width:min(var(--breite),100% - 2*var(--rand));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zahl{font-variant-numeric:tabular-nums}
.skip{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-160%);background:var(--weiss);padding:12px 16px;border-radius:6px;font-weight:600}
.skip:focus{transform:none}

/* Demo-Leiste */
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px var(--rand);background:#150d18;color:#ece4ee;font-size:11px;line-height:1.4}
.demo-bar a{color:#ece4ee;text-decoration:none;white-space:nowrap;padding:6px 0}
.demo-bar a:hover{text-decoration:underline}
.embedded .demo-bar{display:none}

/* Kopf */
.kopf{position:sticky;top:0;z-index:30;background:var(--pflaume);color:var(--auf-dunkel);border-bottom:1px solid var(--dunkel-linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1.05;min-height:44px}
.marke-zeichen{width:34px;height:44px;flex:none}
.marke b{display:block;font-size:22px;font-weight:800;letter-spacing:-.045em}
.marke small{display:block;font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--auf-dunkel-grau);margin-top:3px}
#site-nav{display:flex;align-items:center;gap:4px}
#site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:550;text-decoration:none;border-radius:8px 8px 0 0;transition:background .2s}
#site-nav a:hover{background:var(--pflaume-2)}
#site-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--senf)}
#site-nav a.nav-knopf{margin-left:12px;background:var(--senf);color:var(--tinte);border-radius:8px;padding:0 18px;font-weight:650}
#site-nav a.nav-knopf:hover{background:var(--senf-2)}
#site-nav a.nav-knopf[aria-current="page"]{box-shadow:none}
.menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--dunkel-linie);border-radius:8px;background:var(--pflaume-2);color:var(--auf-dunkel);font-size:15px;font-weight:550;cursor:pointer}
.menu-linien{position:relative;width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:border-color .2s}
.menu-linien::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;transition:transform .2s}
.menu-toggle[aria-expanded="true"] .menu-linien{border-color:transparent}
.menu-toggle[aria-expanded="true"] .menu-linien::after{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-linien::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;transform:rotate(-45deg)}

/* Knöpfe und Links */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border:0;border-radius:10px;background:var(--senf);color:var(--tinte);font-size:16px;font-weight:680;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s var(--aus)}
.knopf:hover{background:var(--senf-2)}
.knopf:active{transform:translateY(1px)}
.knopf .pfeil{transition:transform .25s var(--aus)}
.knopf:hover .pfeil{transform:translateX(4px)}
.knopf.pflaume{background:var(--pflaume);color:var(--auf-dunkel)}
.knopf.pflaume:hover{background:var(--pflaume-3)}
.knopf.leise{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--linie)}
.knopf.leise:hover{box-shadow:inset 0 0 0 1.5px var(--pflaume-3);background:var(--flieder)}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em;text-decoration-color:var(--senf)}
.textlink:hover{text-decoration-color:currentColor}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* Karten mit Reiter: das Grundelement der Seite */
.karte{position:relative;background:#fff;border:1px solid var(--linie);border-radius:0 var(--r) var(--r) var(--r);box-shadow:var(--schatten)}
.reiter{position:absolute;left:-1px;bottom:100%;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;background:#fff;border:1px solid var(--linie);border-bottom:0;border-radius:10px 10px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.reiter::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:#fff}
.mit-reiter{margin-top:32px}

/* Auftakt Startseite */
.auftakt{background:var(--pflaume);color:var(--auf-dunkel);padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,112px)}
.auftakt-raster{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:980px){.auftakt-raster{grid-template-columns:1fr 1.02fr}}
.auftakt-raster>*{min-width:0}
.ort-zeile{font-size:15px;font-weight:550;color:var(--senf-2);margin-bottom:22px}
.auftakt h1{margin-bottom:26px;max-width:11ch}
.auftakt .lead{font-size:var(--t-gross);line-height:1.5;color:var(--auf-dunkel-grau);max-width:36ch;margin-bottom:34px}
.auftakt .lead strong{color:var(--auf-dunkel);font-weight:600}
.auftakt .textlink{color:var(--auf-dunkel)}
.auftakt-bild{position:relative;padding-bottom:clamp(120px,14vw,170px)}
.foto{position:relative;border-radius:var(--r);overflow:hidden;background:var(--pflaume-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.ki-etikett{position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:4px;background:rgba(21,13,24,.78);color:#fff;font-size:11px;font-weight:600;letter-spacing:.03em}
.auftakt .foto{aspect-ratio:3/2}
.start-karte{position:absolute;left:clamp(-28px,-2vw,0px);bottom:0;width:min(400px,88%);padding:22px 22px 18px;color:var(--tinte)}
.start-karte .reiter{color:var(--pflaume-3)}
.sk-frage{font-size:20px;font-weight:760;letter-spacing:-.025em;line-height:1.2;margin-bottom:14px}
.sk-wahl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sk-wahl a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border:1.5px solid var(--linie);border-radius:8px;font-size:14.5px;font-weight:600;line-height:1.25;text-decoration:none;transition:border-color .2s,background .2s}
.sk-wahl a:hover{border-color:var(--pflaume-3);background:var(--flieder)}
.sk-fuss{margin-top:12px;font-size:13px;color:var(--grau);line-height:1.45}

/* Abschnitte */
.abschnitt{padding:var(--abschnitt) 0}
.abschnitt.flieder{background:var(--flieder)}
.kopfzeile{display:grid;gap:18px 48px;margin-bottom:clamp(36px,5vw,56px)}
@media (min-width:900px){.kopfzeile{grid-template-columns:1.1fr .9fr;align-items:end}}
.kopfzeile h2{max-width:17ch}
.kopfzeile p{color:var(--grau);font-size:var(--t-gross);line-height:1.5;max-width:44ch}

/* Ablauf als Register */
.register{position:relative}
.register-reiter{display:flex;gap:4px;align-items:flex-end;position:relative;z-index:2}
.register-reiter button{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border:1px solid var(--linie);border-bottom:0;border-radius:12px 12px 0 0;background:var(--flieder);color:var(--grau);font-size:15px;font-weight:620;cursor:pointer;transition:background .2s,color .2s}
.register-reiter button b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--flieder-2);color:var(--tinte);font-size:13px;font-weight:750;font-variant-numeric:tabular-nums}
.register-reiter button:hover{background:#fff;color:var(--tinte)}
.register-reiter button[aria-selected="true"]{background:#fff;color:var(--tinte);min-height:60px;margin-bottom:-1px;padding-bottom:1px}
.register-reiter button[aria-selected="true"] b{background:var(--senf);color:var(--tinte)}
.register-blatt{background:#fff;border:1px solid var(--linie);border-radius:0 var(--r) var(--r) var(--r);box-shadow:var(--schatten);padding:clamp(24px,4vw,52px)}
.schritt-tafel{display:grid;gap:28px 56px}
@media (min-width:900px){.schritt-tafel{grid-template-columns:1.25fr 1fr}}
.schritt-tafel h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);margin-bottom:14px}
.schritt-tafel>div>p{color:var(--grau);font-size:var(--t-gross);line-height:1.55;max-width:46ch}
.schritt-nr{display:block;font-size:13px;font-weight:700;color:var(--pflaume-3);letter-spacing:.04em;margin-bottom:10px}
.wer-macht{display:grid;gap:0;border-top:1px solid var(--linie)}
.wer-macht div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linie)}
.wer-macht dt{font-size:13px;font-weight:700;color:var(--pflaume-3);padding-top:2px}
.wer-macht dd{color:var(--tinte);line-height:1.5}
.register-blatt.bewegt [role="tabpanel"]{animation:blatt .35s var(--aus)}
@keyframes blatt{from{transform:translateY(8px)}to{transform:none}}
.no-js-titel{display:none}
html:not(.js) .register-reiter{display:none}
html:not(.js) .register-blatt{border-radius:var(--r)}
html:not(.js) [role="tabpanel"]+[role="tabpanel"]{margin-top:40px;padding-top:40px;border-top:1px solid var(--linie)}
.ehrlich{display:flex;gap:14px;align-items:flex-start;margin-top:28px;max-width:70ch;color:var(--grau);font-size:15.5px;line-height:1.55}
.ehrlich::before{content:"";flex:none;width:4px;align-self:stretch;border-radius:2px;background:var(--senf)}

/* Objektkarten */
.objekte{display:grid;gap:56px 28px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.objekt{display:flex;flex-direction:column;margin-top:32px}
.objekt .reiter{color:var(--pflaume-3)}
.objekt[data-art="miete"] .reiter{background:var(--senf-hell);border-color:#e3c98f;color:#5a3c06}
.objekt[data-art="miete"] .reiter::after{background:var(--senf-hell)}
.objekt-bild{position:relative;aspect-ratio:3/2;border-radius:0 calc(var(--r) - 1px) 0 0;overflow:hidden;background:var(--flieder)}
.objekt-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--aus)}
.objekt:hover .objekt-bild img{transform:scale(1.025)}
.objekt-bild.leer{display:grid;place-items:center;align-content:center;gap:6px;padding:24px;text-align:center;background:var(--flieder-2)}
.objekt-bild.leer b{font-size:18px;letter-spacing:-.02em}
.objekt-bild.leer span{font-size:14px;color:var(--grau)}
.objekt-bild.plan{background:#f7f3f8;display:grid;place-items:center;padding:18px}
.objekt-bild.plan svg{width:100%;height:100%}
.objekt-text{display:flex;flex-direction:column;gap:14px;padding:20px 22px 22px;flex:1}
.objekt-ort{font-size:13.5px;font-weight:600;color:var(--grau)}
.objekt h3{font-size:21px;letter-spacing:-.025em;line-height:1.2}
.objekt h3 a{text-decoration:none}
.objekt h3 a:hover{text-decoration:underline}
.preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.preis b{font-size:26px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.preis span{font-size:13.5px;color:var(--grau)}
.eckdaten{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.eckdaten div{padding:10px 8px 10px 0}
.eckdaten div+div{padding-left:10px;border-left:1px solid var(--linie)}
.eckdaten dt{font-size:11.5px;color:var(--grau);line-height:1.3}
.eckdaten dd{font-size:15.5px;font-weight:680;font-variant-numeric:tabular-nums;white-space:nowrap}
.energie-zeile{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--grau)}
.energie-zeile strong{color:var(--tinte);font-weight:650}
.klasse{flex:none;display:inline-grid;place-items:center;min-width:38px;height:28px;padding:0 6px;border-radius:4px 14px 14px 4px;font-size:13.5px;font-weight:800;color:var(--tinte)}
.k-ap{background:#3fae5a}.k-a{background:#5fbb4a}.k-b{background:#a6d96a}.k-c{background:#d4ec86}.k-d{background:#fee08b}.k-e{background:#fdbf6f}.k-f{background:#f99853}.k-g{background:#f46d43}.k-h{background:#c9301f;color:#fff}
.k-keine{background:var(--flieder-2)}
.objekt-fuss{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:4px}
.objekt-fuss .knopf{min-height:46px;padding:0 18px;font-size:15px}
.provision-hinweis{font-size:13px;color:var(--grau);line-height:1.45}

/* Filter */
.filter-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:12px}
.filter{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--flieder);border:1px solid var(--linie)}
.filter button{min-height:44px;padding:0 18px;border:0;border-radius:9px;background:transparent;font-size:15px;font-weight:600;color:var(--grau);cursor:pointer;transition:background .2s,color .2s}
.filter button:hover{color:var(--tinte);background:#fff}
.filter button[aria-pressed="true"]{background:var(--pflaume);color:var(--auf-dunkel)}
.filter button span{font-variant-numeric:tabular-nums;opacity:.75;margin-left:4px}
.treffer{font-size:15px;color:var(--grau)}
.objekt.raus{display:none}

/* Seitenkopf Unterseiten */
.seitenkopf{background:var(--pflaume);color:var(--auf-dunkel);padding:clamp(44px,6vw,84px) 0 clamp(48px,6vw,80px)}
.seitenkopf h1{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.4rem);max-width:15ch;margin-bottom:22px}
.seitenkopf p{font-size:var(--t-gross);line-height:1.5;color:var(--auf-dunkel-grau);max-width:46ch}
.seitenkopf .ort-zeile{margin-bottom:18px}
.seitenkopf-raster{display:grid;gap:32px 64px;align-items:end}
@media (min-width:980px){.seitenkopf-raster{grid-template-columns:1.2fr .8fr}}
.kopf-notiz{border-left:3px solid var(--senf);padding:4px 0 4px 18px;font-size:15.5px!important;line-height:1.55!important}
.kopf-notiz strong{color:var(--auf-dunkel)}

/* Objekt im Detail */
.detail{display:grid;gap:40px 56px}
@media (min-width:1000px){.detail{grid-template-columns:1.15fr .85fr;align-items:start}}
.detail>*{min-width:0}
.galerie{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.galerie .foto:first-child{grid-column:1/-1;aspect-ratio:3/2}
.galerie .foto{aspect-ratio:4/3}
.galerie figcaption:not(.ki-etikett){position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;background:linear-gradient(transparent,rgba(21,13,24,.78));color:#fff;font-size:13.5px;font-weight:550}
.detail-kopf .objekt-ort{margin-bottom:8px}
.detail-kopf h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem);margin-bottom:22px}
.detail-zahlen{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie);margin-bottom:28px}
.detail-zahlen div{padding:14px 0;border-bottom:1px solid var(--linie)}
.detail-zahlen div:nth-child(even){padding-right:14px}
.detail-zahlen div:nth-child(odd):not(.gross){padding-left:16px;border-left:1px solid var(--linie)}
.detail-zahlen dt{font-size:13px;color:var(--grau)}
.detail-zahlen dd{font-size:22px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.detail-zahlen .gross{grid-column:1/-1;padding-right:0!important}
.detail-zahlen .gross dd{font-size:34px;letter-spacing:-.035em}
.energieausweis{padding:22px 22px 20px;margin:60px 0 28px}
.energieausweis .reiter{color:var(--pflaume-3)}
.ea-daten{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15px;margin-bottom:20px}
.ea-daten dt{color:var(--grau)}
.ea-daten dd{font-weight:600}
.skala{position:relative;padding-top:40px}
.skala-band{display:flex;height:30px;border-radius:6px;overflow:hidden}
.skala-band span{display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--tinte);min-width:0}
.skala-band .k-h{color:#fff}
.skala-marke{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:12.5px;font-weight:750;white-space:nowrap}
.skala-marke::after{content:"";width:2px;height:14px;background:var(--tinte);margin-top:2px}
.skala-zahlen{position:relative;height:18px;font-size:11.5px;color:var(--grau);margin-top:6px;font-variant-numeric:tabular-nums}
.detail-text h3{font-size:20px;margin:30px 0 10px}
.detail-text p{color:var(--grau);max-width:62ch}
.liste{list-style:none;display:grid;gap:0;border-top:1px solid var(--linie)}
.liste li{padding:11px 0 11px 26px;border-bottom:1px solid var(--linie);position:relative;line-height:1.5}
.liste li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:2px;background:var(--senf)}
.provision-box{margin-top:30px;padding:20px 22px;border-radius:var(--r);background:var(--flieder);border:1px solid var(--linie)}
.provision-box h3{margin:0 0 8px!important;font-size:18px}
.provision-box p{color:var(--tinte)!important;font-size:15.5px;line-height:1.55}
.provision-box p+p{margin-top:8px;color:var(--grau)!important}

/* Formulare */
.formular-karte{padding:clamp(22px,3.5vw,40px)}
.formular-karte .reiter{color:var(--pflaume-3)}
.formular-raster{display:grid;gap:18px 20px}
@media (min-width:700px){.formular-raster{grid-template-columns:1fr 1fr}.formular-raster .breit{grid-column:1/-1}}
.feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.feld>label,.feld legend,.gruppe legend{font-size:14.5px;font-weight:650}
.feld small,.hilfe{font-size:13px;color:var(--grau);font-weight:400}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea{width:100%;min-height:50px;padding:11px 14px;border:1.5px solid var(--linie);border-radius:9px;background:#fff;font-size:16px;transition:border-color .2s,box-shadow .2s}
textarea{min-height:110px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinte) 50%),linear-gradient(135deg,var(--tinte) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
input:hover,select:hover,textarea:hover{border-color:#b8a8bd}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--pflaume-3);box-shadow:0 0 0 3px rgba(91,61,99,.22)}
fieldset{border:0;padding:0;min-width:0}
.gruppe legend{margin-bottom:10px;padding:0}
.optionen{display:flex;flex-wrap:wrap;gap:8px}
.option{position:relative}
.option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.option span{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border:1.5px solid var(--linie);border-radius:9px;background:#fff;font-size:15px;font-weight:550;transition:border-color .2s,background .2s}
.option span::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #9c8ea1;background:#fff;transition:all .2s}
.option input[type="checkbox"]+span::before{border-radius:4px}
.option input:hover+span{border-color:#b8a8bd}
.option input:checked+span{border-color:var(--pflaume-3);background:var(--flieder)}
.option input:checked+span::before{border:5px solid var(--pflaume-3)}
.option input[type="checkbox"]:checked+span::before{border:0;background:var(--pflaume-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.option input:focus-visible+span{outline:3px solid var(--pflaume-3);outline-offset:2px}
.form-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.form-fuss p{font-size:13.5px;color:var(--grau);max-width:48ch;line-height:1.45}
.ergebnis{margin-top:24px;padding:22px 24px;border-radius:var(--r);background:var(--flieder);border:1px solid var(--linie)}
.ergebnis:focus{outline:3px solid var(--pflaume-3);outline-offset:3px}
.ergebnis h3{font-size:20px;margin-bottom:10px}
.ergebnis dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:15px;margin-bottom:12px}
.ergebnis dt{color:var(--grau)}
.ergebnis dd{font-weight:600;overflow-wrap:anywhere}
.lokal{display:block;margin-top:6px;font-size:13px;font-weight:650;color:var(--pflaume-3)}

/* Bewertungsanfrage mit Hauskarte */
.bewertung{display:grid;gap:56px 48px;align-items:start}
@media (min-width:1000px){.bewertung{grid-template-columns:1.2fr .8fr}}
.bewertung>*{min-width:0}
.fortschritt{display:flex;gap:6px;margin-bottom:22px}
.fortschritt span{flex:1;height:5px;border-radius:3px;background:var(--flieder-2);transition:background .3s}
.fortschritt span.fertig{background:var(--pflaume-3)}
.fortschritt span.jetzt{background:var(--senf)}
.schritt-zaehler{font-size:13.5px;font-weight:650;color:var(--pflaume-3);margin-bottom:8px}
.frage{display:block;font-size:clamp(1.4rem,1.15rem + 1vw,2rem);font-weight:780;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px;text-wrap:balance}
.frage-hilfe{color:var(--grau);margin-bottom:22px;max-width:52ch}
.schritt{padding-bottom:6px}
html:not(.js) .schritt+.schritt{margin-top:36px;padding-top:36px;border-top:1px solid var(--linie)}
.js .bewertung-form .schritt:not(.aktiv){display:none}
.js .bewertung-form.bewegt .schritt.aktiv{animation:blatt .35s var(--aus)}
.wahl-gross{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:10px}
.wahl-gross .option span{min-height:64px;font-size:16px;font-weight:620}
.zeile-felder{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.einheit{position:relative}
.einheit input{padding-right:52px}
.einheit i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--grau);font-size:15px;pointer-events:none}
.schritt-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.html-only{display:none}
html:not(.js) .schritt-nav [data-weiter],html:not(.js) .schritt-nav [data-zurueck]{display:none}
.fehler{color:#9a2b1d;font-size:14px;font-weight:600;margin-top:12px}

.hauskarte{padding:24px 24px 22px;position:sticky;top:110px}
.hauskarte .reiter{color:var(--pflaume-3)}
.hk-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--tinte);margin-bottom:4px}
.hk-kopf b{font-size:19px;letter-spacing:-.02em}
.hk-kopf span{font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hk-zeilen div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px dashed var(--linie);align-items:baseline}
.hk-zeilen dt{font-size:13px;color:var(--grau)}
.hk-zeilen dd{font-size:16px;font-weight:650;min-height:1.5em;overflow-wrap:anywhere}
.hk-zeilen dd.leer{color:#6e6375;font-weight:450}
.hk-zeilen dd.neu{animation:tinte .7s var(--aus)}
@keyframes tinte{from,40%{background:var(--senf-hell)}to{background:transparent}}
.hk-wert{margin-top:16px;padding:14px 16px;border-radius:9px;background:var(--flieder);font-size:14.5px;line-height:1.5}
.hk-wert b{display:block;font-size:13px;color:var(--pflaume-3);margin-bottom:2px}
.hauskarte.angelegt .hk-wert{background:var(--senf-hell)}
.stempel{display:none;position:absolute;right:18px;top:58px;padding:6px 12px;border:2px solid var(--pflaume-3);border-radius:6px;color:var(--pflaume-3);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-6deg);background:#fff}
.hauskarte.angelegt .stempel{display:block;animation:stempel .4s var(--aus)}
@keyframes stempel{from{transform:rotate(-6deg) scale(1.4);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}

/* Unterlagen-Liste */
.unterlagen{display:grid;gap:40px 56px}
@media (min-width:900px){.unterlagen{grid-template-columns:.85fr 1.15fr}}
.check-liste{list-style:none;border-top:1px solid var(--linie)}
.check-liste li{border-bottom:1px solid var(--linie)}
.check-liste label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 4px;cursor:pointer;min-height:44px}
.check-liste input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--pflaume-3);cursor:pointer}
.check-liste b{display:block;font-weight:650}
.check-liste span span{display:block;font-size:14.5px;color:var(--grau);line-height:1.45;margin-top:2px}
.check-liste input:checked+span b{text-decoration:line-through;text-decoration-color:var(--senf);text-decoration-thickness:3px}
.check-stand{font-size:var(--t-gross);font-weight:700;margin:18px 0 6px;font-variant-numeric:tabular-nums}

/* Dunkler Abschnitt */
.dunkel{background:var(--pflaume);color:var(--auf-dunkel)}
.dunkel p{color:var(--auf-dunkel-grau)}
.dunkel .textlink{color:var(--auf-dunkel)}
.zwei-spalten{display:grid;gap:48px 72px}
@media (min-width:900px){.zwei-spalten{grid-template-columns:1fr 1fr}}
.zwei-spalten>*{min-width:0}
.dunkel h2{margin-bottom:22px;max-width:15ch}
.gross-satz{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem)!important;line-height:1.4!important;color:var(--auf-dunkel)!important;font-weight:550;letter-spacing:-.015em;margin-bottom:18px}
.nicht-liste{list-style:none;border-top:1px solid var(--dunkel-linie)}
.nicht-liste li{padding:18px 0;border-bottom:1px solid var(--dunkel-linie)}
.nicht-liste b{display:block;font-size:18px;margin-bottom:4px;color:var(--auf-dunkel)}
.nicht-liste span{color:var(--auf-dunkel-grau);line-height:1.55}
.dunkel .knopf.leise{color:var(--auf-dunkel);box-shadow:inset 0 0 0 1.5px var(--dunkel-linie)}
.dunkel .knopf.leise:hover{background:var(--pflaume-2);box-shadow:inset 0 0 0 1.5px var(--auf-dunkel-grau)}

/* Gegend */
.gegend{display:grid;gap:40px 64px;align-items:center}
@media (min-width:900px){.gegend{grid-template-columns:1fr 1fr}}
.gegend>*{min-width:0}
.gegend .foto{aspect-ratio:3/2}
.gegend h2{margin-bottom:20px;max-width:14ch}
.gegend p{color:var(--grau);max-width:50ch;margin-bottom:16px}
.orte{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.orte li{padding:7px 13px;border-radius:7px;background:var(--flieder);border:1px solid var(--linie);font-size:14.5px;font-weight:600}
.orte li.buero{background:var(--pflaume);color:var(--auf-dunkel);border-color:var(--pflaume)}

/* Kontakt */
.kontakt-raster{display:grid;gap:56px 64px;align-items:start}
@media (min-width:980px){.kontakt-raster{grid-template-columns:.8fr 1.2fr}}
.kontakt-raster>*{min-width:0}
.buero-karte{padding:24px}
.buero-karte .reiter{color:var(--pflaume-3)}
.buero-karte h2{font-size:24px;margin-bottom:6px}
.buero-karte>p{color:var(--grau);margin-bottom:18px}
.zeiten{display:grid;grid-template-columns:auto 1fr;gap:0;border-top:1px solid var(--linie);margin-bottom:20px}
.zeiten dt,.zeiten dd{padding:10px 0;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums}
.zeiten dt{font-weight:650;padding-right:20px}
.zeiten dd{color:var(--grau)}
.wege{display:grid;gap:10px}
.weg-zeile{display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 14px;border-radius:9px;background:var(--flieder);font-weight:600}
.weg-zeile small{display:block;font-weight:450;color:var(--grau);font-size:13px}
.weg-zeile svg{flex:none;width:22px;height:22px;color:var(--pflaume-3)}
.pflicht{margin-top:22px;font-size:13.5px;color:var(--grau);line-height:1.5}
.kontakt-bild{margin-top:28px;aspect-ratio:3/2}

/* Fuß */
.fuss{background:#1d1121;color:var(--auf-dunkel);padding:clamp(56px,7vw,88px) 0 28px}
.fuss p{color:var(--auf-dunkel-grau);font-size:15px;line-height:1.55}
.fuss-raster{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));padding-bottom:40px;border-bottom:1px solid var(--dunkel-linie)}
.fuss-name{font-size:22px!important;font-weight:800;letter-spacing:-.04em;color:var(--auf-dunkel)!important;margin-bottom:6px}
.fuss nav{display:flex;flex-direction:column;align-items:flex-start}
.fuss nav a,.fuss-raster a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;font-weight:550}
.fuss nav a:hover,.fuss-raster a:hover{text-decoration:underline}
.fuss-recht{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding-top:22px}
.fuss-recht p{font-size:13px;max-width:80ch}

/* Bewegung nur auf Wunsch */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Tablet und Handy */
@media (max-width:899px){
  .menu-toggle{display:inline-flex}
  #site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--rand) 20px;background:var(--pflaume);border-bottom:1px solid var(--dunkel-linie);box-shadow:0 20px 30px -20px rgba(0,0,0,.5)}
  #site-nav.open{display:flex}
  #site-nav a{min-height:52px;font-size:17px;border-radius:8px}
  #site-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--senf)}
  #site-nav a.nav-knopf{margin:10px 0 0;justify-content:center}
  .register-reiter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
  .register-reiter button{justify-content:center;padding:0 4px;min-height:52px}
  .register-reiter button[aria-selected="true"]{min-height:56px}
  .register-reiter button .reiter-wort{display:none}
  .hauskarte{position:relative;top:0}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .demo-bar{font-size:10px;gap:10px}
  .kopf-innen{min-height:68px}
  .marke b{font-size:20px}
  .marke small{font-size:10.5px}
  .auftakt-bild{padding-bottom:0}
  .start-karte{position:relative;left:auto;bottom:auto;width:auto;margin:-28px 12px 0}
  .eckdaten{grid-template-columns:repeat(2,1fr)}
  .eckdaten div:nth-child(3){padding-left:0;border-left:0}
  .eckdaten div:nth-child(n+3){border-top:1px solid var(--linie)}
  .wer-macht div{grid-template-columns:1fr;gap:2px}
  .detail-zahlen dd{font-size:19px}
  .detail-zahlen .gross dd{font-size:28px}
  .hk-zeilen div{grid-template-columns:96px 1fr}
  .knopf{width:100%}
  .aktionen .textlink{width:100%;justify-content:center}
  .objekt-fuss .knopf{width:auto}
  .filter{width:100%}
  .filter button{flex:1;padding:0 8px}
}

/* Nachträge */
.foto svg{display:block;width:100%;height:100%}
.plan-foto{background:#fff;border:1px solid var(--linie)}
.galerie .plan-foto figcaption{background:none;color:var(--grau);padding:8px 12px;top:0;bottom:auto;font-size:12.5px}

.seitenkopf .ort-zeile{font-size:15px;color:var(--senf-2);font-weight:550;line-height:1.5}
.kopf-notiz .textlink,.kopfzeile p .textlink{display:inline;min-height:0}
.skala-zahlen span{position:absolute;top:0;transform:translateX(-50%)}
.skala-zahlen span:first-child{transform:none}
.skala-zahlen span:last-child{right:0;transform:none}
.hk-kopf{flex-wrap:wrap}.hk-kopf b{white-space:nowrap}