/* ============================================================
   SELLINER FEWO — Landingpage, Designsystem v1.0
   ============================================================ */
:root{
  --gruen-900:#0B2318; --gruen-800:#123222; --gruen-700:#1A4630;
  --gruen-600:#235B3E; --gruen-500:#2E7350; --gruen-400:#5C9A78;
  --gruen-300:#94BFA7; --gruen-200:#C7DCCF; --gruen-100:#E4EFE8; --gruen-50:#F3F8F4;
  --weiss:#FFFFFF; --papier:#FBF9F4;
  --grau-700:#46534B; --grau-500:#63726A; --grau-300:#C9D3CC; --grau-100:#EDF1EE;
  --bernstein-600:#95601E; --bernstein-500:#C1802F; --bernstein-300:#E3B579; --bernstein-100:#F6EAD8;

  --text:var(--gruen-900); --text-koerper:var(--grau-700); --text-leise:var(--grau-500);
  --linie:var(--grau-300); --linie-leise:var(--grau-100);

  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-text:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --fs-display:clamp(2.6rem,1.6rem + 4.4vw,5rem);
  --fs-h2:clamp(1.8rem,1.3rem + 2vw,2.75rem);
  --fs-h3:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --fs-lead:clamp(1.05rem,1rem + .45vw,1.3rem);
  --fs-small:.9375rem; --fs-mini:.8125rem; --fs-label:.75rem;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:2.5rem; --s-8:3rem; --s-9:4rem; --s-10:5rem;
  --sektion:clamp(4rem,8vw,7.5rem);
  --bund:clamp(1.25rem,5vw,3rem);
  --max:1200px; --max-text:64ch;

  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:32px; --r-rund:999px;
  --sh-1:0 1px 2px rgba(11,35,24,.06),0 2px 6px rgba(11,35,24,.05);
  --sh-2:0 2px 4px rgba(11,35,24,.05),0 10px 24px -6px rgba(11,35,24,.12);
  --sh-3:0 4px 8px rgba(11,35,24,.06),0 24px 48px -12px rgba(11,35,24,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-schnell:160ms var(--ease); --t-normal:280ms var(--ease); --t-ruhig:640ms var(--ease);
  --nav-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--weiss);color:var(--text-koerper);font-family:var(--font-text);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);color:var(--text);font-weight:500;letter-spacing:-.015em;margin:0 0 var(--s-4)}
h1{font-size:var(--fs-display);line-height:1.05;font-weight:400}
h2{font-size:var(--fs-h2);line-height:1.14}
h3{font-size:var(--fs-h3);line-height:1.25}
h4{font-family:var(--font-text);font-size:1.0625rem;font-weight:700;color:var(--text);margin:0 0 var(--s-2)}
p{margin:0 0 var(--s-4);max-width:var(--max-text)}
a{color:var(--gruen-600)}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--bund)}
.sektion{padding-block:var(--sektion)}
.bg-hell{background:var(--gruen-50)}
.bg-papier{background:var(--papier)}
.eyebrow{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--bernstein-600);margin:0 0 var(--s-4);display:block}
.lead{font-size:var(--fs-lead);color:var(--text-koerper);max-width:56ch}
.kopf-mitte{text-align:center;max-width:62ch;margin:0 auto var(--s-8)}
.kopf-mitte p{margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--gruen-700);color:#fff;
  padding:.8em 1.4em;border-radius:0 0 var(--r-s) 0;z-index:200}
.skip:focus{left:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-size:var(--fs-small);
  font-weight:700;padding:.95em 1.7em;border-radius:var(--r-rund);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;font-family:var(--font-text);
  transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell),
    transform var(--t-schnell),box-shadow var(--t-schnell)}
.btn:focus-visible{outline:3px solid var(--bernstein-500);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-primaer{background:var(--gruen-700);color:#fff;box-shadow:var(--sh-1)}
.btn-primaer:hover{background:var(--gruen-800);box-shadow:var(--sh-2)}
.btn-sekundaer{background:transparent;color:var(--gruen-700);border-color:var(--gruen-300)}
.btn-sekundaer:hover{border-color:var(--gruen-700);background:var(--gruen-50)}
.btn-invers{background:#fff;color:var(--gruen-800)}
.btn-invers:hover{background:var(--gruen-100)}
.btn-akzent{background:var(--bernstein-500);color:#241403}
.btn-akzent:hover{background:var(--bernstein-600);color:#fff}
.btn-klein{padding:.7em 1.25em;font-size:var(--fs-mini)}
.btn-text{display:inline-flex;align-items:center;gap:.4em;color:var(--gruen-600);text-decoration:none;
  font-weight:700;font-size:var(--fs-small);border-bottom:1.5px solid var(--bernstein-300);padding-bottom:2px}
.btn-text:hover{border-bottom-color:var(--bernstein-500);color:var(--gruen-800)}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-mini);font-weight:600;
  color:var(--gruen-700);background:var(--gruen-50);border:1px solid var(--gruen-100);
  padding:.42em .85em;border-radius:var(--r-rund);line-height:1.2}
.chip-liste{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,0);border-bottom:1px solid transparent;
  transition:background var(--t-normal),box-shadow var(--t-normal),border-color var(--t-normal)}
.nav.fest{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--linie-leise);box-shadow:0 2px 16px -8px rgba(11,35,24,.2)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);width:100%}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--gruen-900)}
.logo svg{width:34px;height:34px;flex:none}
.logo .wort{font-family:var(--font-display);font-size:1.18rem;font-weight:500;line-height:1.05;letter-spacing:-.01em}
.logo .ort{display:block;font-family:var(--font-text);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--bernstein-600)}
.nav-links{display:none;align-items:center;gap:var(--s-6)}
.nav-links a{color:var(--gruen-800);text-decoration:none;font-size:var(--fs-small);font-weight:600;
  position:relative;padding-block:.3em}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--bernstein-500);transition:right var(--t-normal)}
.nav-links a:hover::after{right:0}
.nav-cta{display:none}
@media(min-width:940px){.nav-links{display:flex}.nav-cta{display:inline-flex}.burger{display:none!important}}

.burger{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--gruen-200);
  border-radius:var(--r-s);background:rgba(255,255,255,.7);cursor:pointer;padding:0}
.burger:focus-visible{outline:3px solid var(--bernstein-500);outline-offset:2px}
.burger span{display:block;width:19px;height:1.8px;background:var(--gruen-800);border-radius:2px;
  transition:transform var(--t-normal),opacity var(--t-schnell)}
.burger span + span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

/* Mobilmenü: visibility + opacity (kein display-Toggle) */
.mobilmenue{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;background:#fff;
  border-bottom:1px solid var(--linie-leise);box-shadow:var(--sh-2);
  padding:var(--s-5) 0 var(--s-6);
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity var(--t-normal),transform var(--t-normal),visibility 0s linear var(--t-normal)}
.mobilmenue.offen{visibility:visible;opacity:1;transform:translateY(0);transition-delay:0s}
.mobilmenue ul{display:flex;flex-direction:column;gap:var(--s-1)}
.mobilmenue a{display:block;padding:.85em 0;color:var(--gruen-800);text-decoration:none;
  font-weight:600;border-bottom:1px solid var(--linie-leise)}
.mobilmenue .btn{margin-top:var(--s-5);width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + var(--s-8));padding-bottom:var(--s-9);
  background:linear-gradient(168deg,#F3F8F4 0%,#FFFFFF 46%,#FBF9F4 100%);overflow:hidden}
.hero::before{content:"";position:absolute;top:-18%;right:-14%;width:52vw;height:52vw;max-width:680px;max-height:680px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(228,239,232,.95),rgba(251,249,244,0) 68%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:var(--s-8);align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.02fr .98fr;gap:var(--s-9)}}
.hero h1{max-width:13ch}
.hero h1 em{font-style:normal;color:var(--gruen-700)}
.hero .lead{margin-bottom:var(--s-6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-7)}
.hero-marken{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);padding-top:var(--s-5);
  border-top:1px solid var(--gruen-100)}
.hero-marken li{display:flex;align-items:center;gap:.5em;font-size:var(--fs-mini);font-weight:600;color:var(--grau-500)}
.hero-marken svg{width:15px;height:15px;color:var(--gruen-500);flex:none}
.hero-bild{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  background:var(--gruen-100);aspect-ratio:3/2}
.hero-bild img{width:100%;height:100%;object-fit:cover;display:block}
.hero-karte{position:absolute;left:auto;bottom:var(--s-4);right:var(--s-4);max-width:calc(100% - 2*var(--s-4));
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-m);padding:var(--s-4) var(--s-5);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;box-shadow:var(--sh-1)}
.hero-karte .adresse{font-size:var(--fs-mini);color:var(--text-leise);line-height:1.4}
.hero-karte .adresse strong{display:block;font-family:var(--font-display);font-size:1.05rem;
  color:var(--text);font-weight:500;letter-spacing:-.01em}

/* ---------- Merkmale ---------- */
.merkmal-grid{display:grid;gap:var(--s-6) var(--s-7);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media(min-width:900px){.merkmal-grid{grid-template-columns:repeat(3,1fr)}}
.merkmal{display:flex;gap:var(--s-4);align-items:flex-start}
.merkmal .icon{flex:none;width:48px;height:48px;border-radius:var(--r-m);display:grid;place-items:center;
  background:#fff;border:1px solid var(--gruen-100);color:var(--gruen-600);box-shadow:var(--sh-1)}
.merkmal .icon svg{width:22px;height:22px}
.merkmal p{margin:0;font-size:var(--fs-small);color:var(--text-leise)}

/* ---------- Wohnungen ---------- */
.wohnungen{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.karte{background:#fff;border:1px solid var(--linie-leise);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform var(--t-normal),box-shadow var(--t-normal),border-color var(--t-normal)}
.karte:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gruen-200)}
/* FOTOFLÄCHE: <img src="..." alt="..."> einfügen; der Platzhalter darunter entfällt dann */
.foto{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--gruen-100),var(--gruen-50) 55%,var(--bernstein-100));
  display:grid;place-items:center;border-bottom:1px solid var(--gruen-100)}
.foto .signet{width:74px;height:74px;opacity:.95}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto .platzhalter{position:absolute;bottom:8px;right:10px;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--gruen-400)}
.karte-koerper{padding:var(--s-5) var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);flex:1}
.karte-koerper > p{margin:0;font-size:var(--fs-small);color:var(--text-leise)}
.karte-titel{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:0}
.karte-titel h3{margin:0}
.karte-titel .etage{font-size:var(--fs-mini);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bernstein-600);white-space:nowrap}
.karte-fuss{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--linie-leise);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.preis{font-family:var(--font-display);font-size:1.5rem;color:var(--text);line-height:1.1}
.preis small{display:block;font-family:var(--font-text);font-size:var(--fs-mini);font-weight:600;
  color:var(--text-leise);letter-spacing:.02em}

/* ---------- Haus / Lage ---------- */
.split{display:grid;gap:var(--s-8);align-items:center}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr;gap:var(--s-9)}}
.lage-liste li{display:flex;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--linie-leise);align-items:flex-start}
.lage-liste li:last-child{border-bottom:0}
.lage-liste .pin{flex:none;width:36px;height:36px;border-radius:var(--r-rund);display:grid;place-items:center;
  background:var(--gruen-50);border:1px solid var(--gruen-100);color:var(--gruen-600)}
.lage-liste .pin svg{width:17px;height:17px}
.lage-liste strong{display:block;color:var(--text);font-size:var(--fs-small)}
.lage-liste span{font-size:var(--fs-mini);color:var(--text-leise)}
.haus-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:var(--gruen-50);
  aspect-ratio:3/2;border:1px solid var(--gruen-100);position:relative}
.haus-bild img{width:100%;height:100%;object-fit:cover;display:block}
.haus-bild .platzhalter{position:absolute;bottom:12px;left:14px;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--gruen-400)}

/* ---------- Gedicht ---------- */
.gedicht{position:relative;background:var(--gruen-800);color:#EAF2EC;overflow:hidden;text-align:center}
.gedicht .welle{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:.28;pointer-events:none}
.gedicht .wrap{position:relative;z-index:1}
.gedicht .strich{width:44px;height:2px;background:var(--bernstein-500);margin:0 auto var(--s-6);border:0}
.gedicht blockquote{margin:0;padding:0}
.gedicht p{font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.35rem,1.05rem + 1.5vw,2.15rem);line-height:1.62;letter-spacing:-.01em;
  color:#F2F8F3;max-width:32ch;margin:0 auto;text-wrap:pretty}
.gedicht cite{display:block;margin-top:var(--s-6);font-family:var(--font-text);font-style:normal;
  font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--bernstein-300)}
.gedicht cite span{display:block;margin-top:var(--s-1);letter-spacing:.04em;text-transform:none;
  font-weight:500;color:rgba(234,242,236,.6)}

/* ---------- Galerie & Lightbox ---------- */
.galerie{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie button{padding:0;border:0;background:var(--gruen-100);cursor:pointer;border-radius:var(--r-m);
  overflow:hidden;aspect-ratio:3/2;position:relative;display:block;
  transition:transform var(--t-normal),box-shadow var(--t-normal)}
.galerie button:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.galerie button:focus-visible{outline:3px solid var(--bernstein-500);outline-offset:3px}
.galerie img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-ruhig)}
.galerie button:hover img{transform:scale(1.04)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(11,35,24,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  visibility:hidden;opacity:0;transition:opacity var(--t-normal),visibility 0s linear var(--t-normal)}
.lightbox.offen{visibility:visible;opacity:1;transition-delay:0s}
.lightbox figure{margin:0;max-width:1200px;width:100%;text-align:center}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-m);background:#0B2318}
.lightbox figcaption{color:rgba(234,242,236,.82);font-size:var(--fs-small);margin-top:var(--s-4)}
.lightbox figcaption span{display:block;font-size:var(--fs-mini);color:rgba(234,242,236,.5);margin-top:var(--s-1)}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:var(--r-rund);
  border:1.5px solid rgba(255,255,255,.28);background:rgba(11,35,24,.6);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background var(--t-schnell),border-color var(--t-schnell)}
.lb-btn:hover{background:var(--gruen-700);border-color:var(--gruen-400)}
.lb-btn:focus-visible{outline:3px solid var(--bernstein-500);outline-offset:3px}
.lb-btn svg{width:22px;height:22px}
.lb-prev{left:clamp(.5rem,2vw,2rem)}
.lb-next{right:clamp(.5rem,2vw,2rem)}
.lb-zu{top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);transform:none}

/* ---------- Preise ---------- */
.preis-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:var(--s-7)}
.preis-karte{background:#fff;border:1px solid var(--linie-leise);border-radius:var(--r-l);padding:var(--s-6) var(--s-5);
  text-align:center;box-shadow:var(--sh-1)}
.preis-karte .signet{width:44px;height:44px;margin:0 auto var(--s-3)}
.preis-karte h3{font-size:1.3rem;margin-bottom:var(--s-2)}
.preis-karte .ab{font-family:var(--font-display);font-size:2.35rem;color:var(--gruen-700);line-height:1;margin:var(--s-3) 0 var(--s-2)}
.preis-karte .hoch{font-size:var(--fs-mini);color:var(--text-leise)}
.preis-hinweise{background:var(--bernstein-100);border:1px solid var(--bernstein-300);border-radius:var(--r-l);
  padding:var(--s-6);display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.preis-hinweise h4{margin-bottom:var(--s-1)}
.preis-hinweise p{margin:0;font-size:var(--fs-small);color:#5B4218}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin:0 auto}
.akk{border-bottom:1px solid var(--linie-leise)}
.akk summary{cursor:pointer;list-style:none;padding:var(--s-5) 0;display:flex;gap:var(--s-4);
  align-items:center;justify-content:space-between;font-weight:700;color:var(--text);font-size:1.0625rem}
.akk summary::-webkit-details-marker{display:none}
.akk summary:focus-visible{outline:3px solid var(--bernstein-500);outline-offset:3px;border-radius:var(--r-s)}
.akk summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--gruen-500);
  border-bottom:2px solid var(--gruen-500);transform:rotate(45deg) translateY(-3px);transition:transform var(--t-normal)}
.akk[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.akk .akk-inhalt{padding:0 0 var(--s-5);font-size:var(--fs-small);color:var(--text-koerper)}
.akk .akk-inhalt p{margin:0;max-width:none}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--gruen-800);color:#EAF2EC}
.kontakt h2{color:#fff}
.kontakt .eyebrow{color:var(--bernstein-300)}
.kontakt p{color:rgba(234,242,236,.8)}
.kontakt-grid{display:grid;gap:var(--s-8)}
@media(min-width:940px){.kontakt-grid{grid-template-columns:.92fr 1.08fr;gap:var(--s-9)}}
.gastgeber{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);border-radius:var(--r-m);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);margin-bottom:var(--s-5)}
.gastgeber .initialen{flex:none;width:46px;height:46px;border-radius:var(--r-rund);display:grid;place-items:center;
  background:var(--bernstein-500);color:#241403;font-weight:700;font-size:var(--fs-small)}
.gastgeber strong{color:#fff;display:block;font-size:var(--fs-small)}
.gastgeber span{font-size:var(--fs-mini);color:rgba(234,242,236,.7)}
.kontakt-daten li{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-3) 0}
.kontakt-daten svg{width:18px;height:18px;color:var(--bernstein-300);flex:none;margin-top:3px}
.kontakt-daten a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(227,181,121,.5)}
.kontakt-daten a:hover{border-bottom-color:var(--bernstein-300)}
.kontakt-daten .klein{font-size:var(--fs-mini);color:rgba(234,242,236,.65);display:block}
.formular{background:#fff;border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--sh-3)}
.formular h3{margin-bottom:var(--s-2)}
.formular > p{font-size:var(--fs-small);color:var(--text-leise);margin-bottom:var(--s-5)}
.feld-reihe{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:560px){.feld-reihe{grid-template-columns:1fr 1fr}}
.feld-gruppe{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.feld-gruppe label{font-size:var(--fs-mini);font-weight:700;color:var(--text);letter-spacing:.02em}
.feld-gruppe input,.feld-gruppe select,.feld-gruppe textarea{font:inherit;font-size:var(--fs-small);
  color:var(--text);background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);
  padding:.8em 1em;width:100%;transition:border-color var(--t-schnell),box-shadow var(--t-schnell)}
.feld-gruppe textarea{resize:vertical;min-height:110px}
.feld-gruppe input:focus,.feld-gruppe select:focus,.feld-gruppe textarea:focus{outline:none;
  border-color:var(--gruen-500);box-shadow:0 0 0 3px var(--gruen-100)}
.dsgvo{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--fs-mini);color:var(--text-leise);margin-bottom:var(--s-5)}
.dsgvo input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--gruen-600)}
.dsgvo a{color:var(--gruen-600)}

/* ---------- Footer ---------- */
.footer{background:var(--gruen-900);color:rgba(234,242,236,.65);padding-block:var(--s-8) var(--s-6);font-size:var(--fs-small)}
.footer-grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:var(--s-6);border-bottom:1px solid rgba(234,242,236,.13)}
.footer h4{color:#fff;font-size:var(--fs-mini);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-4)}
.footer a{color:rgba(234,242,236,.8);text-decoration:none}
.footer a:hover{color:#fff}
.footer li{padding:.28em 0}
.footer .logo .wort{color:#fff}
.footer .logo .ort{color:var(--bernstein-300)}
.footer-unten{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;
  padding-top:var(--s-5);font-size:var(--fs-mini)}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-ruhig),transform var(--t-ruhig)}
.reveal.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   UNTERSEITEN — Seitenkopf, Tabellen, Kalender, Rechtstexte
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.nav-links a.aktiv{color:var(--gruen-700)}
.nav-links a.aktiv::after{right:0}
.mobilmenue a.aktiv{color:var(--gruen-600)}

/* ---------- Brotkrumen ---------- */
.krumen{font-size:var(--fs-mini);color:var(--text-leise);margin:0 0 var(--s-5);max-width:none}
.krumen ol{display:flex;flex-wrap:wrap;gap:.45em;align-items:center;margin:0;padding:0;list-style:none}
.krumen li::after{content:"›";margin-left:.45em;color:var(--gruen-300)}
.krumen li:last-child::after{content:none}
.krumen a{color:var(--text-leise);text-decoration:none;border-bottom:1px solid transparent}
.krumen a:hover{color:var(--gruen-700);border-bottom-color:var(--gruen-300)}
.krumen [aria-current]{color:var(--text);font-weight:600}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf{position:relative;padding-top:calc(var(--nav-h) + var(--s-7));padding-bottom:var(--s-8);
  background:linear-gradient(168deg,#F3F8F4 0%,#FFFFFF 52%,#FBF9F4 100%);overflow:hidden}
.seitenkopf-grid{display:grid;gap:var(--s-7);align-items:center}
@media(min-width:1000px){.seitenkopf-grid{grid-template-columns:1fr 1fr;gap:var(--s-9)}}
.seitenkopf h1{font-size:clamp(2.3rem,1.6rem + 3vw,4rem);line-height:1.04;margin-bottom:var(--s-4)}
.seitenkopf .lead{margin-bottom:var(--s-6)}
.seitenkopf .chip-liste{margin-bottom:var(--s-6)}
.kopf-cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.kopf-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:3/2;
  background:linear-gradient(150deg,var(--gruen-100),var(--gruen-50) 55%,var(--bernstein-100));
  display:grid;place-items:center;position:relative}
.kopf-bild img{width:100%;height:100%;object-fit:cover;display:block}
.kopf-bild .signet{width:96px;height:96px}
.kopf-bild .platzhalter{position:absolute;bottom:12px;right:14px;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--gruen-400)}

/* ---------- Ausstattungslisten ---------- */
.raeume{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.raum{background:#fff;border:1px solid var(--linie-leise);border-radius:var(--r-l);padding:var(--s-5);
  box-shadow:var(--sh-1)}
.raum h3{font-size:1.2rem;margin-bottom:var(--s-3);display:flex;align-items:center;gap:var(--s-3)}
.raum h3 svg{width:20px;height:20px;color:var(--gruen-500);flex:none}
.raum ul{display:flex;flex-direction:column;gap:var(--s-2)}
.raum li{position:relative;padding-left:1.35em;font-size:var(--fs-small);color:var(--text-koerper)}
.raum li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--gruen-300)}

/* ---------- Belegungskalender ---------- */
.kalender{max-width:900px;margin:0 auto}
.kalender-einbettung{min-width:330px;max-width:520px;margin:0 auto;background:#fff;
  border:1px solid var(--linie-leise);border-radius:var(--r-l);box-shadow:var(--sh-2);overflow:hidden}
.kalender-einbettung iframe{width:100%;border:0;display:block;min-height:320px}
.kalender-quelle{margin:0;padding:var(--s-3) var(--s-4);text-align:center;font-size:var(--fs-mini);
  color:var(--text-leise);border-top:1px solid var(--linie-leise);max-width:none}
.kalender-quelle a{color:var(--gruen-600)}
.kalender-hinweis{max-width:48ch;margin:var(--s-5) auto 0;text-align:center;
  font-size:var(--fs-mini);color:var(--text-leise)}
.kalender-platzhalter{border:2px dashed var(--gruen-200);border-radius:var(--r-l);background:#fff;
  padding:clamp(2rem,5vw,3.5rem);text-align:center}
.kalender-platzhalter svg{width:46px;height:46px;color:var(--gruen-400);margin-bottom:var(--s-4)}
.kalender-platzhalter p{margin:0 auto var(--s-3);max-width:46ch;font-size:var(--fs-small);color:var(--text-leise)}
.kalender-platzhalter p strong{color:var(--text);font-size:1rem}
.kalender-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-5)}

/* ---------- Preistabelle ---------- */
.tabelle-rahmen{overflow-x:auto;border:1px solid var(--linie-leise);border-radius:var(--r-l);
  background:#fff;box-shadow:var(--sh-1);-webkit-overflow-scrolling:touch}
.preistabelle{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-small)}
.preistabelle th,.preistabelle td{padding:var(--s-4) var(--s-4);text-align:center;
  border-bottom:1px solid var(--linie-leise)}
.preistabelle thead th{background:var(--gruen-700);color:#fff;font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:0;white-space:nowrap}
.preistabelle thead th:first-child{text-align:left}
.preistabelle tbody th{text-align:left;font-weight:700;color:var(--text);white-space:nowrap}
.preistabelle tbody th span{display:block;font-weight:500;font-size:var(--fs-mini);color:var(--text-leise);
  letter-spacing:.01em;margin-top:2px}
.preistabelle tbody tr:nth-child(even){background:var(--gruen-50)}
.preistabelle tbody tr:last-child th,.preistabelle tbody tr:last-child td{border-bottom:0}
.preistabelle td{font-variant-numeric:tabular-nums;color:var(--text-koerper)}
.preistabelle td.pauschal{font-weight:700;color:var(--gruen-700);background:var(--bernstein-100)}
.preistabelle td.pauschal span{display:block;font-weight:500;font-size:var(--fs-mini);color:#5B4218}
.preistabelle .wohnungskopf th{background:var(--gruen-800)}
.tabelle-hinweis{font-size:var(--fs-mini);color:var(--text-leise);text-align:center;margin:var(--s-3) auto 0}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:74ch;margin:0 auto}
.rechtstext h2{font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);margin:var(--s-8) 0 var(--s-4)}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext h3{font-size:1.1rem;margin:var(--s-6) 0 var(--s-3)}
.rechtstext p,.rechtstext li{max-width:none;font-size:var(--fs-small)}
.rechtstext ul{list-style:none;padding:0;margin:0 0 var(--s-4)}
.rechtstext ul li{position:relative;padding-left:1.35em;margin-bottom:var(--s-2)}
.rechtstext ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--gruen-300)}
.rechtstext .kasten{background:var(--gruen-50);border:1px solid var(--gruen-100);border-radius:var(--r-m);
  padding:var(--s-5);margin-bottom:var(--s-5)}
.rechtstext .kasten p:last-child{margin-bottom:0}
.rechtstext address{font-style:normal}
.stand{font-size:var(--fs-mini);color:var(--text-leise);border-top:1px solid var(--linie-leise);
  padding-top:var(--s-4);margin-top:var(--s-8)}

/* ---------- Wohnungswechsler ---------- */
.wechsler{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wechsler a{display:flex;gap:var(--s-4);align-items:center;background:#fff;border:1px solid var(--linie-leise);
  border-radius:var(--r-l);padding:var(--s-4) var(--s-5);text-decoration:none;box-shadow:var(--sh-1);
  transition:transform var(--t-normal),box-shadow var(--t-normal),border-color var(--t-normal)}
.wechsler a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--gruen-200)}
.wechsler .signet{width:42px;height:42px;flex:none}
.wechsler strong{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:500;
  color:var(--text);letter-spacing:-.01em}
.wechsler span{font-size:var(--fs-mini);color:var(--text-leise)}

.karte-link{color:inherit;text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color var(--t-schnell)}
.karte-link:hover{border-bottom-color:var(--bernstein-500)}

/* Grundmaß für die Wohnungs-Signets, falls kein Kontext eine Größe setzt */
.signet{width:56px;height:56px;flex:none;display:block}

/* ============================================================
   BANNERKOPF — vollflächiges Headerbild (Startseite)
   ============================================================ */
.bannerkopf{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--gruen-900);min-height:clamp(480px,74vh,760px);
  padding-top:calc(var(--nav-h) + var(--s-7));padding-bottom:var(--s-9)}
.bannerkopf picture{position:absolute;inset:0;display:block}
.bannerkopf img{width:100%;height:100%;object-fit:cover;object-position:66% 58%;display:block}
.bannerkopf::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,35,24,.90) 0%,rgba(11,35,24,.78) 26%,rgba(11,35,24,.34) 54%,rgba(11,35,24,.06) 76%),
    linear-gradient(to top,rgba(11,35,24,.60),rgba(11,35,24,0) 46%)}
.bannerkopf-inhalt{position:relative;z-index:1;width:100%}
.bannerkopf .eyebrow{color:var(--bernstein-300)}
.bannerkopf h1{color:#fff;max-width:14ch;margin-bottom:var(--s-5);
  text-shadow:0 2px 28px rgba(11,35,24,.45)}
.bannerkopf h1 em{font-style:normal;color:var(--bernstein-300)}
.bannerkopf .lead{color:rgba(255,255,255,.92);max-width:52ch;margin-bottom:var(--s-6);
  text-shadow:0 1px 16px rgba(11,35,24,.5)}
.bannerkopf .hero-cta{margin-bottom:var(--s-7)}
.bannerkopf .hero-marken{border-top:1px solid rgba(255,255,255,.24);padding-top:var(--s-5)}
.bannerkopf .hero-marken li{color:rgba(255,255,255,.88)}
.bannerkopf .hero-marken svg{color:var(--bernstein-300)}
@media(max-width:700px){
  .bannerkopf{min-height:clamp(540px,86vh,720px)}
  .bannerkopf img{object-position:72% 62%}
}

/* Navigation über dem Headerbild — hell, bis gescrollt wird */
.nav.auf-bild:not(.fest) .nav-links a{color:#fff}
.nav.auf-bild:not(.fest) .nav-links a.aktiv{color:#fff}
.nav.auf-bild:not(.fest) .logo .wort{color:#fff}
.nav.auf-bild:not(.fest) .logo .ort{color:var(--bernstein-300)}
.nav.auf-bild:not(.fest) .nav-cta{background:#fff;color:var(--gruen-800)}
.nav.auf-bild:not(.fest) .nav-cta:hover{background:var(--gruen-100)}
.nav.auf-bild:not(.fest) .burger{border-color:rgba(255,255,255,.55);background:rgba(11,35,24,.4)}
.nav.auf-bild:not(.fest) .burger span{background:#fff}

/* Faktenleiste unter dem Headerbild */
.fakten{background:var(--gruen-800);color:#EAF2EC}
.fakten .wrap{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-8);align-items:center;
  justify-content:space-between;padding-block:var(--s-5)}
.fakten dl{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-8);margin:0}
.fakten div{display:flex;flex-direction:column;gap:2px}
.fakten dt{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--bernstein-300)}
.fakten dd{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:#fff;
  letter-spacing:-.01em}
.fakten dd small{font-family:var(--font-text);font-size:var(--fs-mini);font-weight:500;
  color:rgba(234,242,236,.7);letter-spacing:0}

.fakten dl{flex:1}
.fakten dd small{display:block}

/* Haus & Lage: zwei Bilder übereinander (Haus + Garten) */
.haus-bild-paar{aspect-ratio:auto;display:grid;gap:var(--s-3);background:none;border:0;box-shadow:none;
  border-radius:0;overflow:visible}
.haus-bild-paar picture{display:block;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);
  border:1px solid var(--gruen-100)}
.haus-bild-paar picture:first-child{aspect-ratio:3/2}
.haus-bild-paar picture:last-child{aspect-ratio:2/1}
.haus-bild-paar img{width:100%;height:100%;object-fit:cover;display:block}

/* Zwischenüberschrift über einem Merkmal-Raster */
.zwischentitel{text-align:center;font-size:clamp(1.2rem,1.1rem + .6vw,1.5rem);
  color:var(--text);margin:0 auto var(--s-6);max-width:30ch}

/* Hinweis unter dem Absende-Button */
.formular-hinweis{margin:var(--s-4) 0 0;padding:var(--s-4);border-radius:var(--r-s);
  background:var(--gruen-50);border:1px solid var(--gruen-100);
  font-size:var(--fs-mini);color:var(--text-koerper);max-width:none;text-align:center}
.formular-hinweis a{color:var(--gruen-600)}

/* Die weiße Formularkarte liegt in der dunkelgrünen Kontaktsektion.
   Ohne diese Regel erbt jeder Absatz darin die helle Schrift von .kontakt p
   und wird auf Weiß unlesbar. */
.formular p{color:var(--text-koerper)}
.formular .formular-hinweis{color:var(--grau-700);background:var(--gruen-50);
  border-color:var(--gruen-200)}
.formular .formular-hinweis a{color:var(--gruen-600);font-weight:600}