/* Bernhard Klumpe – Stylesheet
   Layout: helle Porzellan-Fläche, Seitenbreite bis 1600 px, Fließtext bleibt bei ca. 65 Zeichen.
   Rot aus dem Logo für Links und Hervorhebungen, Gold aus dem Logo als zweiter Akzent. */

@font-face{font-family:"Jost";src:url("../fonts/jost-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --bg:#f7f7f5;          /* Porzellanweiß */
  --surface:#ffffff;
  --fg:#22252a;          /* Tinte */
  --muted:#5d636b;
  --line:#e2e2de;
  --red:#b8003a;         /* Logo-Rot: Links, Hervorhebungen */
  --red-dark:#8f002d;
  --red-bg:#b8003a;       /* rote Flächen (Topbar, Footer, Leiste) bleiben immer rot */
  --gold:#97681c;        /* Logo-Gold, für Text abgedunkelt */
  --gold-light:#e9d9b4;
  --lake:#3f6f66;        /* Ferienwohnungen */
  --alt:#f3ece3;         /* warmer Wechsel-Hintergrund */
  --ph-a:#ecebe6; --ph-b:#e4e3dd;
  /* Eine Schrift für alles, nah an der Logo-Zeile "Seit 140 Jahren ein Stück Werlte" */
  --font-display:"Jost","Futura","Century Gothic","Segoe UI",system-ui,sans-serif;
  --font-body:"Jost","Futura","Century Gothic","Segoe UI",system-ui,sans-serif;
  --step--1:1rem; --step-0:1.375rem; --step-1:1.375rem; --step-2:1.8rem; --step-3:clamp(2rem,3.2vw,2.6rem); --step-4:clamp(2.4rem,4.6vw,3.9rem);
  --wrap:1600px; --radius:10px; --shadow:0 4px 16px rgb(0 0 0 / .05);
  color-scheme:only light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:8.5rem}
/* Samsung Internet & Co.: Eine eigene Dark-Mode-Regel signalisiert "Seite hat eigenes Design",
   damit der Browser nicht zwangsweise abdunkelt. Werte bleiben bewusst hell. */
@media (prefers-color-scheme:dark){
  :root{color-scheme:only light}
  html,body{background:#f7f7f5;color:#22252a}
}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.15;text-wrap:pretty;margin:0;color:var(--red)}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1)}
p{margin:0;text-wrap:pretty}
li{text-wrap:pretty}
.nw{white-space:nowrap}
.house p,.flat p,.gallery-title{hyphens:auto}
figure{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.eyebrow{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.lead{font-size:var(--step-1);color:var(--muted)}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:.5rem 1rem;z-index:50}
.skip:focus{left:1rem}

/* ---------- Kopf ---------- */
.topbar{background:var(--red-bg);color:#fff;font-size:var(--step--1)}
.topbar .wrap{display:flex;justify-content:center;padding-block:.15rem}
.topicons{list-style:none;margin:0;padding:0;display:flex;gap:.75rem}
.topicons a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);color:#fff}
.topicons a:hover,.topicons a:focus-visible{background:rgb(255 255 255 / .15)}
.topicons a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.topbar a{color:inherit;text-decoration:none}

header.site{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem}
.brand{display:block;flex-shrink:0}
.brand img{width:300px;height:auto}
nav.main ul{list-style:none;margin:0;padding:0}
nav.main>ul{display:flex;gap:.25rem}
nav.main li{position:relative}
nav.main a{display:block;padding:.45rem .9rem;color:var(--fg);text-decoration:none;font-weight:300;font-size:1.5rem;border-radius:var(--radius)}
nav.main .has-sub>a{display:flex;align-items:center;gap:.5rem}
nav.main .has-sub>a::after{content:"";width:.45em;height:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);flex:none}
nav.main a:hover{color:var(--red)}
nav.main>ul>li>a[aria-current]{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
nav.main .sub a[aria-current]{color:var(--red)}
nav.main .sub{position:absolute;left:0;top:100%;min-width:15rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.35rem;box-shadow:var(--shadow);visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s}
nav.main li:hover>.sub,nav.main li:focus-within>.sub,nav.main li.sub-open>.sub{visibility:visible;opacity:1;transform:none}
/* Touch-Geräte (Tablet quer): Untermenü nur per Tipp, nicht per Hover/Fokus */
@media (hover:none){nav.main li.has-sub:not(.sub-open):hover>.sub,nav.main li.has-sub:not(.sub-open):focus-within>.sub{visibility:hidden;opacity:0}}
nav.main .sub a{font-weight:400;padding:.5rem .8rem;font-size:1.25rem}
.ext::after{content:" ↗";font-size:.8em;color:var(--muted)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--fg);border-radius:var(--btn-radius);padding:.5rem .9rem;font:500 1.1rem var(--font-body);cursor:pointer}

/* Hamburger-Icon, wird beim Öffnen zum X */
.burger{position:relative;display:inline-block;width:22px;height:16px}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .2s,top .3s}
.burger::before{top:0}.burger span{top:7px}.burger::after{top:14px}
.menu-btn[aria-expanded="true"] .burger::before{top:7px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger span{opacity:0}
.menu-btn[aria-expanded="true"] .burger::after{top:7px;transform:rotate(-45deg)}
.burger.is-x::before{top:7px;transform:rotate(45deg)}
.burger.is-x span{opacity:0}
.burger.is-x::after{top:7px;transform:rotate(-45deg)}
.nav-backdrop,.nav-head{display:none}
.menu-btn,.menu-close{color:var(--red)}

@media (max-width:1230px){
  .brand img{width:190px}
  .js .menu-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--surface);border-color:rgb(184 0 58 / .35)}
  .menu-close{display:inline-flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid rgb(184 0 58 / .35);border-radius:var(--btn-radius);padding:.5rem .9rem;font:500 1.1rem var(--font-body);cursor:pointer}
  header.site .wrap{flex-wrap:wrap;padding-block:1.5rem}
  nav.main{width:100%}
  /* Mobiles Menü: Panel von rechts, volle Bildschirmhöhe */
  .js nav.main{position:fixed;top:0;right:0;bottom:0;width:min(100vw,28rem);height:100vh;height:100dvh;z-index:35;background:var(--alt);
    padding:calc(1rem + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(2rem + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
    overflow-y:auto;overscroll-behavior:contain;box-shadow:-8px 0 24px rgb(0 0 0 / .08);
    transform:translateX(100%);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease,visibility .45s}
  .js nav.main.open{transform:none;opacity:1;visibility:visible}
  .js .nav-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.25rem;margin-bottom:1rem;border-bottom:2px solid var(--red)}
  .nav-logo img{width:190px;height:auto}
  .nav-logo{padding:0!important}
  .js nav.main>ul>li{border-bottom-color:rgb(184 0 58 / .15)}
  .js .nav-backdrop{display:block;position:fixed;inset:0;z-index:30;background:rgb(34 37 42 / .45);opacity:0;transition:opacity .35s ease}
  .js .nav-backdrop.show{opacity:1}
  body.nav-open{overflow:hidden}
  nav.main>ul{flex-direction:column;gap:.25rem}
  nav.main>ul>li{border-bottom:1px solid var(--line);padding-block:.6rem}
  nav.main .sub{position:static;visibility:visible;opacity:1;transform:none;border:0;box-shadow:none;padding:.3rem 0 0 1rem;background:none;min-width:0}
  nav.main a{padding:.4rem .75rem;font-size:1.3rem}
  nav.main>ul>li>a{width:fit-content}
  nav.main .sub a{font-size:1.125rem;padding:.35rem .75rem}
}

/* ---------- Bausteine ---------- */
.btn{display:inline-block;padding:.75rem 1.3rem;border-radius:var(--btn-radius);background:var(--red);color:#fff;text-decoration:none;font-weight:500;border:1px solid var(--red);font-family:var(--font-body);font-size:1.1rem;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn.ghost{background:none;color:var(--red)}
.btn.ghost:hover{background:var(--red);color:#fff}
.actions{display:flex;gap:.75rem;flex-wrap:wrap}
.more{font-weight:700;text-decoration:none}
.more::after{content:" →"}

.brands{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.brands li{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:.2rem .8rem;font-size:var(--step--1)}
ul.plain{margin:0;padding-left:1.15rem;display:grid;gap:.35rem}
ul.plain li::marker{color:var(--red)}

/* ---------- Seitenkopf der Unterseiten ---------- */
main{padding-bottom:0}
.pagehead{padding-block:clamp(2.5rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem)}
/* Bereiche: großzügige Abstände, Hintergrund im Wechsel */
.block{padding-block:clamp(3.5rem,8vw,7rem)}
.block.alt{background:var(--alt)}
.pagehead + .block{padding-top:clamp(1rem,2vw,1.5rem)}
.hero + .block{padding-top:clamp(3rem,6vw,5rem)}
.block .section-title{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
/* Einblenden: nur mit JavaScript, sonst sofort sichtbar */
/* Einblenden: von Anfang an unsichtbar und leicht tiefer, gleitet nur nach oben - Liste muss zu REVEAL in site.js passen */
.js :is(.pagehead .wrap > *, .hero .text, .hero .facts, .section-title, .band, .cols > *, .chronik-intro, .gallery-title, .news-card, .house, .flat, .gallery li, .mosaic li, .historie li, ol.timeline > li, .signature, .map, .group > h2, form.contact, .legal-text > *, .compare, .prose, .topic, .link-band, .infoblock, .vorteile, .claim){transition:opacity .8s ease,transform .8s cubic-bezier(.25,.6,.3,1)}
.js :is(.pagehead .wrap > *, .hero .text, .hero .facts, .section-title, .band, .cols > *, .chronik-intro, .gallery-title, .news-card, .house, .flat, .gallery li, .mosaic li, .historie li, ol.timeline > li, .signature, .map, .group > h2, form.contact, .legal-text > *, .compare, .prose, .topic, .link-band, .infoblock, .vorteile, .claim):not(.in){opacity:0;transform:translateY(18px)}
.pagehead .wrap{display:grid;gap:1rem}
/* Einleitungen nutzen die ganze Containerbreite */
.pagehead p,.hero .text p,.chronik-intro p,.signature p{max-width:none}
.band{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.band img{width:100%;aspect-ratio:16/5;object-fit:cover}
@media (max-width:700px){.band img{aspect-ratio:16/9}}

/* ---------- Startseite ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(26rem,62vh,42rem)}
.hero>picture{position:absolute;inset:0;z-index:-2}
.hero>picture img,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(255 255 255 / .55),rgb(255 255 255 / 0) 65%)}
.hero .wrap{width:100%;padding-block:clamp(2rem,5vw,4rem)}
.hero .text{display:grid;gap:1.1rem;max-width:min(100%,54rem);background:rgb(255 255 255 / .94);border-radius:var(--radius);padding:clamp(1.5rem,3.5vw,2.75rem);box-shadow:var(--shadow)}
.motto{font-family:var(--font-display);font-size:clamp(1.3rem,4.6vw,var(--step-2));color:var(--fg);font-weight:400}
.motto span{color:var(--gold);padding-inline:.35em}
.jubilee{display:inline-flex;align-items:baseline;gap:.6rem;width:fit-content;border-top:1px solid var(--gold-light);border-bottom:1px solid var(--gold-light);padding-block:.4rem;color:var(--gold);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:var(--step--1)}
.jubilee b{font-size:1.6rem;letter-spacing:0;font-weight:600}
@media (max-width:700px){
  .hero{min-height:0;flex-direction:column;align-items:stretch}
  .hero>picture{position:static;display:block}
  .hero>picture img,.hero>img{position:static;height:auto;aspect-ratio:3/2}
  .hero::after{display:none}
  .hero .wrap{margin-top:-3rem}
  .hero .text{box-shadow:var(--shadow)}
}

.houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.5rem)}
.house{display:grid;gap:.9rem;grid-template-rows:auto auto auto 1fr auto;min-width:0}
.brands-title{font-size:var(--step-0);margin:1.5rem 0 .6rem}
.brands-block{margin-top:clamp(1.5rem,3vw,2.5rem)}
.house img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.house .place{font-size:var(--step--1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}

.mapbox{margin-top:clamp(2.5rem,5vw,4rem);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface)}
.mapbox p{color:var(--muted);font-size:var(--step--1)}

@media (max-width:1024px){.houses{grid-template-columns:1fr;gap:3.5rem}.house img{aspect-ratio:16/9}}
@media (max-width:700px){.houses{grid-template-columns:1fr}}

/* ---------- Inhalt + Infokasten ---------- */
:root{--facts-w:25rem;--btn-radius:6px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) var(--facts-w);gap:clamp(1.5rem,4vw,5rem);align-items:start}
.prose{display:grid;gap:1.1rem;min-width:0}
.prose h2{font-size:var(--step-2);margin-top:1rem}
aside.facts{display:grid;gap:2.25rem;font-size:1.125rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem;position:sticky;top:9rem}
aside.facts h2{font-weight:600;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}
aside.facts address{font-style:normal}
dl.hours{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:0;font-variant-numeric:tabular-nums}
dl.hours dt{color:var(--muted)} dl.hours dd{margin:0;text-align:right}
@media (max-width:860px){.cols{grid-template-columns:1fr} aside.facts{position:static}}

.gallery-title{font-size:var(--step-2);margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.25rem;list-style:none;margin:0;padding:0}
.gallery-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.gallery,.gallery-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.gallery,.gallery-3{grid-template-columns:1fr;gap:1.5rem}}
.gallery a{display:block;border-radius:var(--radius);overflow:hidden}
.gallery img{aspect-ratio:25/17;object-fit:cover;width:100%;transition:transform .3s}
.gallery a:hover img{transform:scale(1.03)}

/* ---------- Zeitleiste ---------- */
ol.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);margin-left:.4rem}
ol.timeline li{position:relative;padding:0 0 1.8rem 1.8rem;display:grid;gap:.3rem}
ol.timeline li::before{content:"";position:absolute;left:-8px;top:.5rem;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--red)}
ol.timeline li:last-child{padding-bottom:0}
ol.timeline time{font-size:var(--step-2);color:var(--red);font-weight:600;line-height:1}
.portrait img{border-radius:var(--radius);aspect-ratio:3/4;object-fit:cover;width:100%}
.portrait figcaption{font-size:var(--step--1);color:var(--muted);margin-top:.5rem}

/* ---------- Ferienwohnungen ---------- */
.t-fewo .eyebrow,.t-fewo .loc-head{color:var(--lake)}
.dtv{display:inline-flex;gap:.5rem;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:.3rem .9rem;font-size:var(--step--1);font-weight:700;color:var(--lake);width:fit-content}
.group + .hint,.group ~ .hint{margin-top:2rem}
.group h2{font-size:var(--step-2);margin-bottom:1.25rem}
.flats{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.flats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.flats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flats-2 .flat img{aspect-ratio:16/9}
@media (max-width:980px){.flats-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.flats-3,.flats-2{grid-template-columns:1fr}}
.flat{display:grid;gap:.75rem;align-content:start;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.flat img{aspect-ratio:3/2;object-fit:cover;width:100%}
.flat .body{display:grid;gap:.6rem;padding:0 1.25rem 1.25rem}
.flat .meta{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.flat .stars{color:var(--gold);letter-spacing:.1em}
.flat p{color:var(--muted);font-size:var(--step--1)}
.flat .btn{font-size:.95rem;padding:.6rem 1rem}

/* ---------- Formular ---------- */
form.contact{display:grid;gap:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem}
.row.plz{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}
.field{display:grid;gap:.3rem;min-width:0}
.field label,fieldset legend{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;padding:.65rem .75rem;border:1px solid #c9c9c3;border-radius:var(--radius);background:var(--bg);color:var(--fg);font:inherit}
.field textarea{min-height:9rem;resize:vertical}
fieldset{border:0;margin:0;padding:0;display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
fieldset legend{float:left;margin-right:1rem}
.check{display:flex;gap:.6rem;align-items:flex-start}
.check input{margin-top:.35rem;accent-color:var(--red);width:1.1rem;height:1.1rem}
.req{color:var(--red)}
.hint{font-size:var(--step--1);color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Rechtstexte ---------- */
.legal-text{display:grid;gap:1rem}
.legal-text p,.consent-box,.consent-box p{max-width:none}
.legal-text h2{font-size:var(--step-2);margin-top:1.5rem}
.legal-text h3{font-family:var(--font-body);font-weight:700;font-size:var(--step-0);margin-top:.75rem}
.legal-text ul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
.legal-text p{overflow-wrap:anywhere}

/* ---------- Fuß: Logo-Rot ---------- */
footer.site{background:var(--red-bg);color:#fff;font-size:var(--step-0)}
footer.site>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-block:3rem}
footer.site h2{font-size:var(--step-1);font-weight:500;color:#fff;margin-bottom:.5rem}
footer.site a{color:#fff}
footer.site a:hover{color:var(--gold-light)}
footer.site address{font-style:normal;line-height:1.7}
.copy{border-top:1px solid rgb(255 255 255 / .25);font-size:var(--step--1)}
.copy .wrap{padding-block:1.1rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap}
.copy ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem 1.5rem;flex-wrap:wrap}
.copy li{white-space:nowrap}
.copy .linkbtn{color:#fff;font-size:inherit}
.copy .linkbtn:hover{color:var(--gold-light)}
@media (max-width:600px){
  .copy .wrap{flex-direction:column-reverse;justify-content:center;text-align:center;gap:.9rem}
  .copy ul{justify-content:center;gap:.4rem 1.1rem;font-size:.95rem}
  .copy .consent-item{flex-basis:100%}
}
@media (max-width:600px){footer.site>.wrap{grid-template-columns:1fr}}

/* ---------- Geöffnet / geschlossen ---------- */
.open-status{display:block;font-weight:600;font-size:var(--step--1);line-height:1.4;margin:.1rem 0 .8rem;padding:.6rem .9rem;border-radius:var(--radius);background:#fdecef;color:var(--red-dark)}
.open-status::before{content:"";display:inline-block;width:.6rem;height:.6rem;margin-right:.5rem;border-radius:50%;background:currentColor;vertical-align:.05em}
.open-status.is-open{background:#e7f4ea;color:#1e6b33}
.open-status.is-open::before{animation:pulse 2s ease-in-out infinite}
.open-status small{display:block;font-weight:400;font-size:inherit;padding-left:1.1rem}
@keyframes pulse{50%{opacity:.35}}

/* ---------- Google Maps mit Einwilligung ---------- */
.map{position:relative;width:100%;height:clamp(24rem,38vw,36rem);border-radius:var(--radius);overflow:hidden;background:repeating-linear-gradient(135deg,var(--ph-a) 0 14px,var(--ph-b) 14px 28px);border:1px solid var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-consent{position:absolute;inset:0;display:grid;place-content:center;padding:1.5rem}
.map-consent>*{max-width:34rem}
.map-consent{gap:1rem;background:rgb(255 255 255 / .82)}
.map-consent h3{font-size:var(--step-1)}
.map-consent p{font-size:var(--step--1);color:var(--muted)}
.map.loaded .map-consent{display:none}
.map-links{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center}
.map-optin{font-size:var(--step--1);display:flex;gap:.6rem;align-items:flex-start;text-align:left;cursor:pointer}
.map-optin input{margin-top:.35em;width:1.1rem;height:1.1rem;accent-color:var(--red);flex:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--red);font:inherit;font-size:var(--step--1);cursor:pointer}
.linkbtn:hover{color:var(--red-dark)}
.consent-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.4rem;display:grid;gap:.6rem}
.consent-box h2{font-size:var(--step-1);margin:0}
@media (max-width:700px){.map{height:28rem}}

/* ---------- Handy: mehr Luft zwischen den Containern ---------- */
@media (max-width:700px){
  .block{padding-block:4.5rem}
  .pagehead{padding-block:3rem 1.5rem}
  .houses,.flats-3,.flats-2{gap:3rem}
  .cols{gap:3rem}
  .band{margin-bottom:3rem}
  .gallery-title{margin-bottom:1.5rem}
  .prose{gap:1.4rem}
  ol.timeline li{padding-bottom:2.5rem}
  footer.site>.wrap{gap:2.5rem;padding-block:3.5rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.js :is(.pagehead .wrap > *, .hero .text, .hero .facts, .section-title, .band, .cols > *, .chronik-intro, .gallery-title, .news-card, .house, .flat, .gallery li, .mosaic li, .historie li, ol.timeline > li, .signature, .map, .group > h2, form.contact, .legal-text > *){opacity:1!important;transform:none!important}}

/* Hinweis im Entwurf, vor dem Livegang entfernen */
.draft-note{background:#fff6e0;border:1px solid var(--gold-light);border-left:4px solid var(--gold);border-radius:var(--radius);padding:1rem 1.2rem;font-size:var(--step--1)}
.flat h3,.house h3{font-size:var(--step-2)}
.flat h3{font-size:var(--step-1)}
.chronik-intro{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem)}
ol.timeline h2{font-size:var(--step-1);color:var(--fg);font-weight:600}
ol.timeline .entry{display:grid;gap:.6rem}
ol.timeline strong{font-weight:600}
.signature{display:grid;gap:.6rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center;justify-items:center}
.signature blockquote{margin:0 0 .75rem;justify-self:stretch;background:var(--alt);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,4vw,3rem);font-size:var(--step-1);color:var(--red);font-weight:500}
.signature .name{font-style:italic}
nav.main>ul>li:nth-last-child(-n+2)>.sub{left:auto;right:0}

/* ---------- Aktuelles (Startseite, ragt in den Hero) ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero.has-news .wrap{padding-bottom:calc(clamp(2rem,5vw,4rem) + var(--news-overlap))}
:root{--news-overlap:clamp(3rem,6vw,5.5rem)}
.news{position:relative;z-index:2;margin-top:calc(-1 * var(--news-overlap))}
.news-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:clamp(1rem,2.5vw,1.75rem);padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,3rem);display:flex;justify-content:center;align-items:center}
.news-card picture,.news-card a{display:block;width:100%;max-width:900px;margin-inline:auto}
.news-card img{width:100%;height:auto}
.news + .block{padding-top:clamp(3rem,6vw,5rem)}
.news:has(+ .block.alt){padding-bottom:clamp(3rem,6vw,5rem)}
.news + .block.alt{padding-top:clamp(3.5rem,8vw,7rem)}
@media (max-width:700px){
  :root{--news-overlap:1.5rem}
  .hero.has-news .wrap{padding-bottom:calc(2rem + var(--news-overlap))}
}
.news-card h3{text-align:center;margin:0}
.map-links .more{font-size:var(--step--1)}
.house .btn{justify-self:start;margin-top:.25rem}
/* Bildschirmmeldung */
.toast{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,1rem);opacity:0;transition:opacity .3s,transform .3s;
  background:var(--fg);color:#fff;border-radius:var(--radius);padding:.85rem 1.25rem;box-shadow:var(--shadow);font-size:var(--step--1);max-width:calc(100vw - 2rem);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* Dialog Cookie-Einstellungen */
.consent-dialog{border:0;border-radius:var(--radius);padding:clamp(1.25rem,4vw,2rem);max-width:min(36rem,calc(100vw - 2rem));box-shadow:0 8px 30px rgb(0 0 0 / .15);color:var(--fg);background:var(--surface)}
.consent-dialog::backdrop{background:rgb(34 37 42 / .5)}
.consent-dialog h2{font-size:var(--step-2);margin:0 0 .75rem}
.consent-dialog p{font-size:var(--step--1);color:var(--muted);margin-bottom:1rem}
.consent-opt{font-size:var(--step--1);margin-bottom:1.25rem;cursor:pointer}
.consent-dialog .actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* Etikett für das Hero-Mockup (entfällt mit echtem Foto) */
.mock-label{position:absolute;top:1rem;right:max(16px,env(safe-area-inset-right,0px));z-index:1;background:rgb(255 255 255 / .85);color:var(--red-dark);border-radius:var(--radius);padding:.35rem .75rem;font-size:var(--step--1);font-weight:600;line-height:1.3}
.mock-label small{display:block;font-weight:400;opacity:.75;font-size:.8em}
@media (min-width:701px){.hero:has(.mock-label) .wrap{padding-top:5.5rem}}
/* Leiste unten (nur Handy) */
.dock{display:none}
@media (max-width:700px){
  .js .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--red-bg);border-top:1px solid rgb(255 255 255 / .3);box-shadow:0 -4px 16px rgb(0 0 0 / .08);
    padding:.25rem max(16px,env(safe-area-inset-right,0px)) calc(.25rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    transform:translateY(100%);visibility:hidden;transition:transform .3s ease,visibility .3s,background-color .3s ease}
  .js .dock.show{transform:none;visibility:visible}
  .dock .topicons{justify-content:center;gap:1.25rem}
  .js .dock.inv{background:#fff;border-top-color:var(--line);box-shadow:0 -4px 16px rgb(0 0 0 / .12)}
  .dock.inv .topicons a{color:var(--red);transition:color .3s ease}
  .dock.inv .topicons a:hover,.dock.inv .topicons a:focus-visible{background:var(--alt)}
  .dock.inv .topicons a:focus-visible{outline-color:var(--red)}
  /* Platz unter dem Footer, damit er nicht von der Leiste verdeckt wird */
  .js footer.site{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.dock{transition:none!important}}
@media (max-width:700px){body.dock-on .toast{bottom:calc(64px + env(safe-area-inset-bottom,0px))}}
/* Nach oben */
.to-top{display:none}
.js .to-top{display:flex;align-items:center;justify-content:center;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:26;
  width:48px;height:48px;border-radius:50%;border:1px solid rgb(255 255 255 / .5);background:var(--red-bg);color:#fff;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .25s,transform .25s,visibility .25s,bottom .3s}
.js .to-top.show{opacity:1;visibility:visible;transform:none}
.js .to-top:hover{background:var(--red-dark)}
.js .to-top:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:700px){body.dock-on .to-top{bottom:calc(64px + env(safe-area-inset-bottom,0px))}}
body.nav-open .to-top{visibility:hidden}
@media (prefers-reduced-motion:reduce){.to-top{transition:none!important}}
.js .to-top.inv{background:#fff;color:var(--red);border-color:#fff}
.js .to-top.inv:hover{background:var(--alt)}
.js .to-top.inv:focus-visible{outline-color:#fff}
/* Handy: kleinere Typo (Fließtext 18px) */
@media (max-width:700px){
  aside.facts{font-size:1.0625rem}
  :root{--step--1:.9375rem; --step-0:1.125rem; --step-1:1.125rem; --step-2:1.5rem; --step-3:1.75rem; --step-4:1.875rem}
  body{line-height:1.6}
  nav.main a{font-size:1.25rem}
  nav.main .sub a{font-size:1.0625rem}
  .jubilee b{font-size:1.35rem}
}
/* Hero mit echtem Foto: Bild frei, Text darunter (leicht überlappend), auf allen Breiten */
.hero{min-height:0;flex-direction:column;align-items:stretch}
.hero::after{display:none}
.hero>picture{position:static;display:block}
@media (min-width:701px){
  .hero>picture img{position:static;width:100%;height:auto;aspect-ratio:2000/770;max-height:75vh;object-fit:cover}
  .hero .wrap{margin-top:clamp(-5rem,-5vw,-3rem);padding-top:0}
  .hero .text{max-width:none}
}
/* Startseite: Öffnungszeiten rechts neben der Hero-Textkarte */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--facts-w);gap:clamp(1.25rem,2.5vw,2.5rem);align-items:stretch}
.hero-grid .facts{position:static;box-shadow:var(--shadow);align-content:start}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr}}

.facts .info{margin-top:1.25rem}
.special-range{font-size:var(--step--1);margin:.2rem 0 .1rem}
.facts .call-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin-top:1.25rem;font-size:inherit;white-space:nowrap}
.facts .call-btn svg{flex:none}
.facts .call-btn{background:#2a7a43;border-color:#2a7a43}
.facts .call-btn:hover{background:#1e6b33;border-color:#1e6b33}
.info-head{display:flex;gap:.5rem;align-items:center;font-size:var(--step--1);font-weight:600;color:var(--red);margin:0 0 .3rem}
.info-head svg{flex:none}
.band.foto img{aspect-ratio:auto;height:auto;border-radius:var(--radius)}
@media (max-width:700px){.band.foto img{aspect-ratio:auto}}
/* Galerie-Fotos: Hochformat in der Vorschau etwas höher ansetzen */
.gallery img.hoch{object-position:50% 30%}
/* Lightbox */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgb(20 20 22 / .92);padding:3.5rem max(16px,env(safe-area-inset-right,0px)) 3.5rem max(16px,env(safe-area-inset-left,0px));opacity:0;transition:opacity .25s}
.lb.show{opacity:1}
.lb img{transition:opacity .2s ease}
.lb img.fade{opacity:0}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:100%;max-height:100%}
.lb img{display:block;max-width:min(100%,1600px);max-height:calc(100vh - 8rem);max-height:calc(100dvh - 8rem);width:auto;height:auto;border-radius:var(--radius);box-shadow:0 10px 40px rgb(0 0 0 / .4);background:#2a2a2d}
.lb figcaption{color:#fff;font-size:var(--step--1);opacity:.85}
.lb button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgb(255 255 255 / .35);border-radius:50%;background:rgb(0 0 0 / .35);color:#fff;cursor:pointer;padding:0}
.lb button:hover{background:var(--red-bg);border-color:var(--red-bg)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-close{top:max(.75rem,env(safe-area-inset-top,0px));right:max(.75rem,env(safe-area-inset-right,0px))}
.lb-prev{left:max(.75rem,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-next{right:max(.75rem,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
@media (max-width:700px){.lb{padding-inline:8px}.lb-prev,.lb-next{top:auto;bottom:max(.75rem,env(safe-area-inset-bottom,0px));transform:none}.lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}
/* Bildslider (Ferienwohnungen) */
.slider{position:relative}
.slider .slides{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--radius);overscroll-behavior-x:contain}
.slider .slides::-webkit-scrollbar{display:none}
.slider .slides:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.slider .slide{flex:0 0 100%;scroll-snap-align:start}
.slider .slide img{display:block;width:100%;height:auto;aspect-ratio:8/3;object-fit:cover}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:0;background:rgb(255 255 255 / .9);color:var(--red);cursor:pointer;box-shadow:var(--shadow);padding:0}
.slider-btn:hover{background:#fff}
.slider-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.slider-prev{left:1rem}.slider-next{right:1rem}
.slider-dots{display:flex;justify-content:center;gap:.25rem;list-style:none;margin:.75rem 0 0;padding:0}
.slider-dots button{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}
.slider-dots button::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--red);background:transparent;transition:background .2s}
.slider-dots button[aria-current="true"]::before{background:var(--red)}
.slider-dots button:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
@media (max-width:700px){.slider-btn{width:40px;height:40px}.slider-prev{left:.5rem}.slider-next{right:.5rem}.slider .slide img{aspect-ratio:3/2}}
@media (prefers-reduced-motion:reduce){.slider .slides{scroll-behavior:auto}}
.flat-img{display:block;overflow:hidden}
.flat-img img{display:block;transition:transform .3s}
.flat-img:hover img{transform:scale(1.03)}
.flat-img:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.lead-list{margin:.6rem 0;padding-left:1.4em;display:grid;gap:.3rem}
.lead-list li::marker{color:var(--red)}
.pagehead .lead + .lead{margin-top:0}
/* Bild-Mosaik Startseite */
.mosaic{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(10rem,17vw,17rem);gap:clamp(.75rem,1.5vw,1.25rem)}
.mosaic .m1{grid-column:1 / 3;grid-row:1 / 3}
.mosaic li{min-width:0}
.mosaic a{position:relative;display:block;height:100%;border-radius:var(--radius);overflow:hidden;color:#fff;text-decoration:none}
.mosaic picture,.mosaic img{display:block;width:100%;height:100%}
.mosaic img{object-fit:cover;transition:transform .5s ease}
.mosaic a:hover img{transform:scale(1.04)}
.mosaic a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mosaic .cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem .9rem;background:linear-gradient(to top,rgb(0 0 0 / .55),rgb(0 0 0 / 0));font-size:var(--step--1);font-weight:600;letter-spacing:.02em}
.mosaic .m1 .cap{font-size:var(--step-1);padding:3rem 1.5rem 1.25rem}
@media (max-width:700px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:9rem}.mosaic .m1{grid-column:1 / 3;grid-row:auto / span 2}.mosaic .m6{grid-column:1 / 3}.mosaic .cap{padding:2rem .8rem .7rem}.mosaic .m1 .cap{font-size:var(--step--1);padding:2.5rem 1rem .9rem}}
/* Logo im Seitenkopf (Engel & Co) */
.pagehead .wrap:has(.pagehead-logo){grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2rem,5vw,5rem)}
.pagehead .wrap:has(.pagehead-logo) > :not(.pagehead-logo){grid-column:1}
.pagehead-logo{grid-column:2;grid-row:1 / span 4;align-self:center;width:clamp(150px,14vw,210px);height:auto}
@media (max-width:700px){.pagehead .wrap:has(.pagehead-logo){grid-template-columns:1fr}.pagehead-logo{grid-column:1;grid-row:auto;order:-1;width:120px;justify-self:center;margin-bottom:.5rem}}
.house-img{display:block;border-radius:var(--radius);overflow:hidden}
.house-img img{display:block;transform:scale(1.06);transition:transform .6s ease}
.house-img:hover img{transform:scale(1)}
.historie{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.historie figure{margin:0}
.historie a{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.historie img{display:block;width:100%;height:auto;transition:transform .6s ease}
.historie a:hover img{transform:scale(1.03)}
.historie figcaption{font-size:var(--step--1);color:var(--muted);margin-top:.6rem}
@media (max-width:860px){.historie{grid-template-columns:1fr 1fr;align-items:start}}
.topics{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);margin-top:clamp(2rem,4vw,3rem)}
.topic{border-top:1px solid var(--line);padding-top:clamp(1.25rem,2.5vw,1.75rem)}
.topic h2{margin-top:0}
.topic > :last-child{margin-bottom:0}
.topic.feature{border-top:0;background:var(--alt);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,3vw,2.5rem)}
.topic.feature h2{color:var(--red)}
.topic-label{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold);margin:0 0 .35rem}
.mosaic .m1 a.ms picture,.mosaic .m1 a.ms > img{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.mosaic .m1 a.ms picture.on,.mosaic .m1 a.ms > img.on{opacity:1}
.mosaic .m1 .cap{transition:opacity .35s ease}
.mosaic .m1 .cap.fade{opacity:0}
.mosaic li a{transition:box-shadow .4s ease}
.mosaic li.ms-current:not(.m1) a{box-shadow:0 0 0 3px var(--red)}

.topic.topic-solo{border-top:0;padding-top:0}
.link-band{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2.5rem;text-align:center;margin:clamp(3rem,6vw,4.5rem) 0 0;padding:clamp(1.5rem,3vw,2rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:700px){.mosaic .m6{grid-column:auto}.mosaic li:last-child:nth-child(even){grid-column:1 / 3}}
.infoblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,26rem);gap:clamp(2rem,5vw,5rem);align-items:start}
.infoblock h2{margin-top:0}
.vorteile{background:var(--surface);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 10px 30px rgb(80 40 20 / .07)}
.vorteile h3{font-size:var(--step-1);color:var(--red);margin:0 0 1rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;font-size:var(--step--1)}
.checks li{position:relative;padding-left:2rem;line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:.05em;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--red)}
.checks li::after{content:"";position:absolute;left:.45rem;top:.3em;width:.35rem;height:.65rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.claim{margin:clamp(2.5rem,5vw,3.5rem) auto 0;max-width:46rem;text-align:center;font-family:var(--font-display);font-size:var(--step-2);line-height:1.35;color:var(--fg)}
.claim::before{content:"";display:block;width:3rem;height:2px;background:var(--gold);margin:0 auto 1.25rem}
@media (max-width:1024px){.infoblock{grid-template-columns:1fr}}
.topic > p + p,.topic > p + ul{margin-top:1rem}
.credit{display:inline-block;border-radius:var(--radius);transition:opacity .25s ease}.credit:hover{opacity:.8}.credit img{display:block;width:min(250px,70vw);height:auto}
/* Vorher/Nachher-Regler */
.compare{margin:0 0 clamp(2rem,4vw,3rem)}
.cmp-frame{--pos:50%;position:relative;aspect-ratio:16/9;max-height:80vh;width:100%;border-radius:var(--radius);overflow:hidden;background:var(--alt);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp-frame picture,.cmp-frame img{display:block;width:100%;height:100%}
.cmp-frame img{object-fit:cover}
.cmp-after{position:absolute;inset:0}
.cmp-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-before img{object-position:50% 66%;filter:sepia(.15)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 8px rgb(0 0 0 / .35);pointer-events:none}
.cmp-handle span{position:absolute;top:50%;left:50%;width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 4px 14px rgb(0 0 0 / .3)}
.cmp-handle span::before,.cmp-handle span::after{content:"";position:absolute;top:50%;width:.6rem;height:.6rem;margin-top:-.3rem;border:solid #fff;border-width:0 0 2.5px 2.5px}
.cmp-handle span::before{left:.55rem;transform:rotate(45deg)}
.cmp-handle span::after{right:.55rem;transform:rotate(-135deg)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp-range:focus-visible ~ .cmp-handle span,.cmp-frame:has(.cmp-range:focus-visible) .cmp-handle span{outline:3px solid var(--gold-light);outline-offset:3px}
.cmp-tag{position:absolute;top:1rem;padding:.3rem .8rem;border-radius:var(--radius);background:rgb(0 0 0 / .55);color:#fff;font-size:var(--step--1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;transition:opacity .35s ease}
.cmp-tag-before{left:1rem}
.cmp-tag-after{right:1rem}
.cmp-cap{position:absolute;bottom:1rem;max-width:min(26rem,calc(100% - 2rem));display:grid;gap:.2rem;padding:.9rem 1.15rem;border-radius:var(--radius);background:rgb(255 255 255 / .94);color:var(--fg);box-shadow:0 8px 24px rgb(0 0 0 / .18);font-size:var(--step--1);line-height:1.45;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.cmp-cap strong{color:var(--red);font-size:var(--step-0)}
.cmp-cap-before{left:1rem}
.cmp-cap-after{right:1rem}
.cmp-frame.show-before .cmp-cap-before,.cmp-frame.show-after .cmp-cap-after{opacity:1;transform:none}
.cmp-frame.show-before .cmp-tag-after,.cmp-frame.show-after .cmp-tag-before{opacity:0}
.cmp-hint{margin-top:.6rem;text-align:center;font-size:var(--step--1);color:var(--muted)}
@media (max-width:700px){.cmp-frame{aspect-ratio:4/3}.cmp-cap{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;padding:.7rem .9rem}.cmp-cap strong{font-size:1.05rem}.cmp-cap span{font-size:.9rem}.cmp-tag{top:.75rem}.cmp-tag-before{left:.75rem}.cmp-tag-after{right:.75rem}.cmp-handle span{width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem}}
a.pagehead-logo{display:block;width:clamp(180px,17vw,250px);border-radius:var(--radius);cursor:zoom-in;transition:transform .3s ease}
a.pagehead-logo:hover{transform:scale(1.04)}
a.pagehead-logo:focus-visible{outline:2px solid var(--red);outline-offset:6px}
a.pagehead-logo img{display:block;width:100%;height:auto}
.lb img.light{background:#fff;padding:clamp(1.25rem,4vw,3rem);width:min(90vw,720px);max-width:100%;box-sizing:border-box}
@media (max-width:700px){a.pagehead-logo{width:150px}}
dl.hours [hidden]{display:none}
.special{margin:0 0 1.1rem;padding:.85rem 1rem;border-radius:var(--radius);background:var(--alt)}
.special[hidden]{display:none}
.special-head{margin:0 0 .4rem;font-size:var(--step--1);font-weight:600;color:var(--red)}
.special dl.hours dt{color:var(--fg)}
.hero .text{align-content:center}.hero .actions{align-items:flex-start}
.seo-text h2{margin-top:0}
/* Spamschutz */
.captcha{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:fit-content;max-width:100%}
.captcha .captcha-box{margin:0}
.captcha-state{font-size:var(--step--1);color:var(--muted)}
.captcha-state:empty{display:none}
.captcha.busy .captcha-state::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.45em;vertical-align:-.1em;border:2px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:capspin .8s linear infinite}
.captcha.ok{border-color:#9cc9a6;background:#eef7f0}
.captcha.ok .captcha-state{color:#25703a;font-weight:600}
.captcha.ok .captcha-state::before{content:"✓ "}
.captcha.err .captcha-state{color:var(--red)}
@keyframes capspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.captcha.busy .captcha-state::before{animation-duration:2.4s}}

/* Danke-Seite */
.danke .wrap{justify-items:center;text-align:center}
.danke-bild{margin:0 0 clamp(1rem,2.5vw,2rem);width:100%}
.danke-bild img{display:block;width:100%;height:auto;aspect-ratio:16/7;max-height:48vh;object-fit:cover;border-radius:10px}
@media (max-width:700px){.danke-bild img{aspect-ratio:4/3}}
.danke.fehler .fehlerliste{list-style:none;margin:0;padding:1rem 1.4rem;background:var(--alt);border-radius:10px;display:grid;gap:.4rem;text-align:left}
.danke.fehler .fehlerliste li::before{content:"!";display:inline-grid;place-items:center;width:1.4em;height:1.4em;margin-right:.6rem;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:.8em;vertical-align:.1em}
.danke .actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
/* Fehlerseite: alles inkl. Buttons ohne Scrollen sichtbar */
.pagehead.danke.fehler{padding-block:clamp(1rem,2.5vw,1.75rem) clamp(1.5rem,3vw,2.5rem)}
.danke.fehler .wrap{gap:.6rem}
.danke.fehler .danke-bild{margin-bottom:.4rem}
.danke.fehler .danke-bild img{aspect-ratio:16/3;max-height:20vh}
.danke.fehler h1{font-size:clamp(1.6rem,3.2vw,2.6rem)}
.danke.fehler .lead{margin:0}
.danke.fehler .fehlerliste{padding:.75rem 1.2rem;gap:.3rem}
@media (max-height:740px){.danke.fehler .danke-bild img{max-height:14vh}}
@media (max-width:700px){.danke.fehler .danke-bild,.danke.fehler .eyebrow{display:none}.danke.fehler h1{font-size:1.6rem}.danke.fehler .lead{font-size:1rem}.danke.fehler .fehlerliste{font-size:1rem}.danke.fehler .actions{gap:.5rem}.danke.fehler .actions .btn{padding:.55rem 1rem;font-size:1rem}}