/* ===========================================================================
   GAIA — Othmarscher Kirchenweg 114
   Eigene Gestaltung. Farbwerte: Resources/Branding/gaia-farbwelt.css
   Stand: 06.10.2026 — bislang nur der Hero (above the fold).
   =========================================================================== */

/* --- Schriften, selbst gehostet ------------------------------------------- */
@font-face{font-family:"Caladea";src:url("../fonts/caladea-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caladea";src:url("../fonts/caladea-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- Farbwelt GAIA --------------------------------------------------------- */
:root{
  /* Flächen */
  --papier:#FBF9F3; --dunst:#F3EFE4; --himmelgrau:#DCD8C6; --kalkstein:#C3B48C;
  /* Tiefen */
  --waldschwarz:#1E1708; --rinde:#3B2C15; --moos:#38381F;
  /* Grün */
  --laub:#5E6A3A; --salbei:#8E9478;
  /* Warm */
  --terrakotta:#9B4F2E; --herbstrot:#7A3822; --abendgold:#C9A162;

  --schrift-display:"Caladea",Georgia,"Times New Roman",serif;
  --schrift-ui:"Poppins","Helvetica Neue",Arial,sans-serif;

  --rand:clamp(20px,4vw,64px);
}

/* --- Grundgerüst ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dunst);color:var(--waldschwarz);
  font-family:var(--schrift-ui);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* Sichtbar nur für Screenreader, bis fokussiert */
.sprungmarke{
  position:absolute;left:var(--rand);top:0;transform:translateY(-130%);
  z-index:40;background:var(--papier);color:var(--waldschwarz);
  padding:10px 18px;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .18s ease;
}
.sprungmarke:focus-visible{transform:translateY(16px)}

:focus-visible{outline:2px solid var(--abendgold);outline-offset:3px}

/* --- Hero ------------------------------------------------------------------ */
.hero{
  position:relative;isolation:isolate;
  min-height:600px;height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  color:var(--dunst);
  overflow:hidden;
}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}

/* Zwei Schleier: oben für die Navigation, unten für Headline und Knopf */
.hero__schleier{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(30,23,8,.60) 0%,
      rgba(30,23,8,.18) 26%,
      rgba(30,23,8,.06) 48%,
      rgba(30,23,8,.46) 78%,
      rgba(30,23,8,.80) 100%);
}

/* Navigation */
.nav{
  display:flex;justify-content:center;
  padding:clamp(18px,2.4vw,32px) var(--rand) 0;
}
.nav__liste{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,3.2vw,46px);
  margin:0;padding:0;list-style:none;
}
.nav__liste a{
  display:inline-block;padding:6px 0;
  font-size:clamp(.75rem,.5rem + .4vw,.875rem);
  font-weight:400;letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;color:var(--dunst);
  position:relative;
}
.nav__liste a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--abendgold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.nav__liste a:hover::after,.nav__liste a:focus-visible::after{transform:scaleX(1)}

/* Wortmarke, groß in der Mitte */
.hero__marke{
  display:grid;place-items:center;
  padding-inline:var(--rand);
  padding-block:clamp(24px,5vh,72px);
}
.hero__marke img{
  width:min(560px,74vw);height:auto;
  filter:drop-shadow(0 2px 28px rgba(30,23,8,.45));
}
.hero__ort{
  margin:clamp(30px,4.6vh,54px) 0 0;
  font-size:clamp(.6875rem,.55rem + .25vw,.8125rem);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--dunst);text-align:center;
  text-shadow:0 1px 14px rgba(30,23,8,.75);
}

/* Headline und Knopf unten links */
.hero__fuss{
  padding:0 var(--rand) clamp(32px,6vh,76px);
  display:grid;justify-items:start;gap:clamp(20px,3vh,30px);
  max-width:min(100%,46rem);
}
.hero__titel{
  margin:0;
  font-family:var(--schrift-display);font-weight:400;
  font-size:clamp(2rem,1.1rem + 3.6vw,3.75rem);
  line-height:1.08;letter-spacing:-.01em;text-wrap:balance;
  text-shadow:0 2px 24px rgba(30,23,8,.5);
}
.knopf{
  display:inline-block;
  background:var(--terrakotta);color:var(--papier);
  padding:clamp(14px,1.4vw,18px) clamp(24px,2.6vw,36px);
  font-size:clamp(.75rem,.6rem + .25vw,.875rem);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
  transition:background .22s ease,transform .22s ease;
}
.knopf:hover,.knopf:focus-visible{background:var(--herbstrot);transform:translateY(-2px)}

@media (max-width:640px){
  .hero{height:100svh;min-height:560px}
  .hero__fuss{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* --- Objektbild ------------------------------------------------------------ */
.objektbild{
  background-color:var(--dunst);
  background-image:url("../images/tapete-dunst-540.jpg");
  background-image:image-set(url("../images/tapete-dunst-540.webp") type("image/webp"),
                             url("../images/tapete-dunst-540.jpg") type("image/jpeg"));
  background-repeat:repeat;
  background-size:270px auto;
  background-position:center top;
  padding:clamp(48px,8vh,104px) var(--rand);
}
.objektbild picture{display:block;max-width:75rem;margin:0 auto}
.objektbild img{width:100%;height:auto}


/* Straßenseite über der Ausstattung: heller Grund, passend zum Abschnitt darunter */
.objektbild--strasse{background-color:var(--papier);background-image:none;padding-bottom:0}

/* --- Zahlen und Fakten ----------------------------------------------------- */
.fakten{
  background:var(--papier);
  padding:clamp(56px,10vh,124px) var(--rand);
}
.fakten__raster{
  max-width:82rem;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:clamp(24px,4vw,64px);
  row-gap:clamp(40px,6vh,76px);
  align-items:start;
}

.fakten__titel{
  margin:0;
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.75rem,1.1rem + 1.8vw,2.5rem);
  line-height:1.1;letter-spacing:-.005em;
  color:var(--terrakotta);
}
.fakten__ort{
  margin:clamp(14px,2vh,22px) 0 0;
  font-size:.9375rem;line-height:1.55;color:var(--rinde);
}

.zahl__wert{
  margin:0;
  font-family:var(--schrift-ui);font-weight:300;
  font-size:clamp(2.25rem,1.1rem + 3.4vw,4rem);
  line-height:1;letter-spacing:-.02em;
  color:var(--laub);
  font-variant-numeric:lining-nums tabular-nums;
}
.zahl--gross .zahl__wert{font-size:clamp(3rem,1.2rem + 5.4vw,6rem);font-weight:500;letter-spacing:-.025em}
/* lange Werte wie „ab 725.000 €" brechen sonst vor dem Eurozeichen um */
.zahl__wert--lang{font-size:clamp(1.75rem,.95rem + 2.4vw,3.125rem);letter-spacing:-.03em}
.zahl__text{
  margin:clamp(10px,1.4vh,18px) 0 0;
  font-size:clamp(.875rem,.8rem + .15vw,1rem);
  line-height:1.45;color:var(--rinde);max-width:22ch;
}

.fakten__aktion{align-self:end}

@media (max-width:860px){
  .fakten__raster{grid-template-columns:repeat(2,1fr)}
  .fakten__kopf{grid-column:1 / -1}
  /* Knopf ans Ende, sonst steht er mitten zwischen den Zahlen */
  .fakten__aktion{grid-column:1 / -1;order:99;align-self:start}
}
@media (max-width:520px){
  .fakten__raster{grid-template-columns:1fr;row-gap:clamp(30px,5vh,48px)}
  .zahl__text{max-width:none}
}

/* --- Hero: Parallaxe -------------------------------------------------------- */
/* Transform und Blur setzt seite.js; hier nur die Voreinstellung,
   damit die Seite auch ohne JavaScript richtig aussieht. */
.hero__bild{
  transform:scale(1.14);
  transform-origin:50% 40%;
  will-change:transform,filter;
  backface-visibility:hidden;
}

/* --- Sticky-Kopfleiste ------------------------------------------------------ */
.kopfleiste{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:rgba(30,23,8,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(195,180,140,.18);
  padding-top:env(safe-area-inset-top,0px);
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform .32s ease,opacity .32s ease,visibility .32s ease;
}
.kopfleiste.ist-sichtbar{transform:translateY(0);opacity:1;visibility:visible}
.kopfleiste__innen{
  max-width:82rem;margin:0 auto;
  padding:0 var(--rand);min-height:4.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px);
}
.kopfleiste__marke img{width:clamp(74px,8vw,104px);height:auto}
.kopfleiste__liste{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2.6vw,38px);
  margin:0;padding:0;list-style:none;
}
.kopfleiste__liste a{
  display:inline-block;padding:4px 0;position:relative;
  font-size:clamp(.6875rem,.55rem + .3vw,.8125rem);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--himmelgrau);
  transition:color .2s ease;
}
.kopfleiste__liste a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--abendgold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.kopfleiste__liste a:hover,.kopfleiste__liste a:focus-visible{color:var(--papier)}
.kopfleiste__liste a:hover::after,.kopfleiste__liste a:focus-visible::after{transform:scaleX(1)}
.kopfleiste__liste a.ist-aktiv{color:var(--abendgold)}
.kopfleiste__liste a.ist-aktiv::after{transform:scaleX(1)}
/* Abschnitt existiert noch nicht */
.kopfleiste__liste a.ist-inaktiv{color:rgba(220,216,198,.34);cursor:default}
.kopfleiste__liste a.ist-inaktiv::after{display:none}

/* Kontakt als Knopf in der Leiste */
.kopfleiste__liste a.kopfleiste__knopf{
  padding:.55rem 1.1rem;background:var(--terrakotta);color:var(--papier);
  transition:background .2s ease,color .2s ease;
}
.kopfleiste__liste a.kopfleiste__knopf::after{display:none}
.kopfleiste__liste a.kopfleiste__knopf:hover,
.kopfleiste__liste a.kopfleiste__knopf:focus-visible{background:var(--herbstrot);color:var(--papier)}
.kopfleiste__liste a.kopfleiste__knopf.ist-aktiv{background:var(--herbstrot);color:var(--papier)}

/* Sprachumschalter DE | EN */
.sprache{display:flex;align-items:center;gap:0;
  font-size:clamp(.6875rem,.55rem + .3vw,.8125rem);letter-spacing:.14em}
.sprache > *{padding:4px 9px;text-decoration:none;line-height:1}
.sprache > * + *{border-left:1px solid rgba(195,180,140,.38)}
.sprache__aktiv{color:var(--abendgold)}
.kopfleiste__liste .sprache a{color:var(--himmelgrau);transition:color .2s ease}
.kopfleiste__liste .sprache a::after{display:none}
.kopfleiste__liste .sprache a:hover,
.kopfleiste__liste .sprache a:focus-visible{color:var(--papier)}
.nav__liste .sprache a{color:inherit;opacity:.78;transition:opacity .2s ease}
.nav__liste .sprache a:hover,.nav__liste .sprache a:focus-visible{opacity:1}

@media (max-width:560px){
  .kopfleiste__liste{gap:10px 14px;justify-content:flex-end}
  .kopfleiste__liste a.kopfleiste__knopf{padding:.45rem .85rem}
  .sprache > *{padding:4px 7px}
}

/* Sprungziele unter die Leiste schieben */
main > section[id]{scroll-margin-top:5.5rem}

/* --- Schnellkontakt rechts -------------------------------------------------- */
.schnellkontakt{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.schnellkontakt.ist-sichtbar{opacity:1;visibility:visible}
.sk-knopf{
  display:flex;align-items:center;justify-content:flex-end;
  height:3.4rem;overflow:hidden;text-decoration:none;
  background:var(--terrakotta);color:var(--papier);
  border-left:1px solid rgba(195,180,140,.4);
  transition:background .2s ease;
}
.sk-knopf:hover,.sk-knopf:focus-visible{background:var(--herbstrot)}
.sk-knopf--haupt{background:var(--rinde)}
.sk-knopf--haupt:hover,.sk-knopf--haupt:focus-visible{background:var(--moos)}
.sk-icon{flex:0 0 3.4rem;width:3.4rem;height:3.4rem;display:flex;align-items:center;justify-content:center}
.sk-icon svg{width:1.375rem;height:1.375rem;fill:currentColor;display:block}
.sk-text{
  max-width:0;padding:0;white-space:nowrap;overflow:hidden;
  font-size:.75rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  transition:max-width .28s ease,padding .28s ease;
}
.sk-knopf:hover .sk-text,.sk-knopf:focus-visible .sk-text{max-width:16rem;padding:0 0 0 1.25rem}

/* --- Schnellkontakt unten (Handy) ------------------------------------------- */
.mobilkontakt{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;
  background:var(--waldschwarz);
  border-top:1px solid rgba(195,180,140,.2);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(100%);transition:transform .28s ease;
}
.mobilkontakt.ist-sichtbar{transform:translateY(0)}
.mk-knopf{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:10px 6px;text-decoration:none;
  color:var(--himmelgrau);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
}
.mk-knopf svg{width:1.25rem;height:1.25rem;fill:currentColor}
.mk-knopf--haupt{background:var(--terrakotta);color:var(--papier)}

@media (max-width:720px){
  .schnellkontakt{display:none}
  .mobilkontakt{display:flex}
  /* Platz für die feste Leiste am unteren Rand */
  .fuss{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}
  .kopfleiste__marke{display:none}
  .kopfleiste__innen{justify-content:center;min-height:3.75rem}
}

@media (prefers-reduced-motion:reduce){
  .hero__bild{transform:scale(1.02);filter:none !important}
}

/* --- gemeinsame Abschnittsköpfe --------------------------------------------- */
.abschnitt__titel{
  margin:0;
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.75rem,1.1rem + 1.8vw,2.5rem);
  line-height:1.1;color:var(--terrakotta);text-wrap:balance;
}
.abschnitt__titel--hell{color:var(--abendgold)}
.abschnitt__text{
  margin:clamp(14px,2vh,20px) 0 0;
  font-size:clamp(.9375rem,.9rem + .15vw,1.0625rem);
  line-height:1.6;color:var(--rinde);
}

/* Abschnittskopf: große, mittig stehende Überschrift */
.abschnitt__kopf{
  max-width:70rem;margin:0 auto clamp(40px,6vh,76px);
  text-align:center;
}
.abschnitt__kopf .abschnitt__titel{
  font-weight:400;
  font-size:clamp(2.5rem,.6rem + 8.4vw,7.5rem);
  line-height:.94;letter-spacing:-.025em;
  text-wrap:balance;
}
.abschnitt__kopf .abschnitt__text{
  max-width:46rem;margin-left:auto;margin-right:auto;
  margin-top:clamp(20px,3vh,32px);
}
.visuell-versteckt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Ausstattung ------------------------------------------------------------- */
.ausstattung{
  background-color:var(--papier);
  background-image:url("../images/tapete-papier-540.jpg");
  background-image:image-set(url("../images/tapete-papier-540.webp") type("image/webp"),
                             url("../images/tapete-papier-540.jpg") type("image/jpeg"));
  background-repeat:repeat;
  background-size:270px auto;
  background-position:center top;
  padding:clamp(56px,10vh,124px) var(--rand);
}
.ausstattung__innen{max-width:82rem;margin:0 auto}
.ausstattung__vorbehalt{
  margin:clamp(22px,3vh,32px) auto 0;max-width:52rem;
  padding:14px 16px;border-left:3px solid var(--abendgold);background:var(--dunst);
  font-size:.9375rem;line-height:1.55;color:var(--rinde);
}
.aus-gruppe{margin-top:clamp(44px,7vh,86px)}
.aus-gruppe__kopf{
  max-width:70rem;margin:0 auto;text-align:center;
  padding-bottom:clamp(14px,2vh,20px);
  border-bottom:1px solid rgba(195,180,140,.55);
}
.aus-gruppe__titel{
  margin:0;
  font-family:var(--schrift-display);font-weight:400;
  font-size:clamp(1.625rem,1.1rem + 1.8vw,2.75rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--laub);
}
.aus-gruppe__text{
  margin:clamp(8px,1.4vh,14px) 0 0;
  font-size:.9375rem;line-height:1.55;color:var(--rinde);
}

.ausstattung__raster{
  margin-top:clamp(32px,5vh,60px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:clamp(24px,3vw,44px);
}
.aus-karte{margin:0}
.aus-karte__bild{
  aspect-ratio:14 / 9;display:grid;place-items:center;
  background:var(--dunst);border:1px dashed rgba(195,180,140,.9);
}
.aus-karte__bild--foto{margin:0;border:0;padding:0;display:block;overflow:hidden}
.aus-karte__bild--foto img{width:100%;height:100%;object-fit:cover;display:block}
.aus-karte__bild span{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#8E8574;
}
.aus-karte__kategorie{
  margin:clamp(14px,2vh,20px) 0 0;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terrakotta);
}
.aus-karte__titel{
  margin:6px 0 0;font-family:var(--schrift-display);font-weight:400;
  font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.25;color:var(--waldschwarz);
}
.aus-karte__text{
  margin:10px 0 0;font-size:.9375rem;line-height:1.55;color:var(--rinde);
}

/* --- Wohnungen --------------------------------------------------------------- */
.wohnungen{background:var(--dunst);padding:clamp(56px,10vh,124px) var(--rand)}
.wohnungen__innen{max-width:82rem;margin:0 auto}

/* Spaltenraster, von Kopfzeile und Wohnungskopf gemeinsam genutzt */
.wohnungen__kopfzeile,.wohnung__kopf{
  display:grid;
  grid-template-columns:7rem 1fr 7rem 8rem 9rem 6rem 2.5rem;
  align-items:center;
  column-gap:clamp(10px,1.4vw,22px);
}
.wohnungen__kopfzeile{
  padding:0 clamp(14px,1.6vw,24px) 10px;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laub);
  border-bottom:1px solid var(--kalkstein);
}
.wohnungen__liste{display:flex;flex-direction:column}

.wohnung{border-bottom:1px solid rgba(195,180,140,.55)}
.wohnung__titel{margin:0;font:inherit}
.wohnung__kopf{
  width:100%;background:none;border:0;cursor:pointer;
  padding:clamp(16px,2vh,22px) clamp(14px,1.6vw,24px);
  text-align:left;font-family:var(--schrift-ui);color:var(--waldschwarz);
  transition:background .18s ease;
}
.wohnung__kopf:hover{background:rgba(251,249,243,.75)}
.wohnung__nr{font-weight:500;font-size:1.0625rem}
.wohnung__geschoss,.wohnung__zimmer{font-size:.9375rem;color:var(--rinde)}
.wohnung__flaeche{font-size:.9375rem;font-variant-numeric:tabular-nums}
.wohnung__preis{
  font-size:1.0625rem;font-weight:500;color:var(--laub);
  font-variant-numeric:tabular-nums;
}
.wohnung__status{
  justify-self:start;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--laub);color:var(--laub);
}
.wohnung__pfeil{
  justify-self:end;width:.75rem;height:.75rem;
  border-right:1.5px solid var(--terrakotta);border-bottom:1.5px solid var(--terrakotta);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .26s ease;
}
.wohnung__kopf[aria-expanded="true"] .wohnung__pfeil{transform:rotate(225deg) translate(-2px,-2px)}

.wohnung.ist-verkauft .wohnung__kopf{cursor:pointer}
.wohnung.ist-verkauft .wohnung__nr,
.wohnung.ist-verkauft .wohnung__geschoss,
.wohnung.ist-verkauft .wohnung__zimmer,
.wohnung.ist-verkauft .wohnung__flaeche{color:#8E8574}
.wohnung.ist-verkauft .wohnung__preis{color:#8E8574;font-weight:400}
.wohnung.ist-verkauft .wohnung__status{border-color:#B3A991;color:#8E8574}

.wohnung__inhalt{padding:0 clamp(14px,1.6vw,24px) clamp(28px,4vh,44px)}
.wohnung__spalten{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.wohnung__tabelle{width:100%;border-collapse:collapse;font-size:.9375rem}
.wohnung__tabelle th,.wohnung__tabelle td{
  text-align:left;padding:7px 0;border-bottom:1px solid rgba(195,180,140,.45);
  font-weight:400;
}
.wohnung__tabelle th{color:var(--rinde);width:58%}
.wohnung__tabelle td{text-align:right;font-variant-numeric:tabular-nums}
.wohnung__tabelle tr.ist-hervorgehoben th,
.wohnung__tabelle tr.ist-hervorgehoben td{font-weight:500;color:var(--laub)}
.wohnung__tabelle--raeume th{width:68%}
.wohnung__untertitel{
  margin:clamp(22px,3vh,30px) 0 8px;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--laub);font-family:var(--schrift-ui);
}
.wohnung__liste{margin:0;padding-left:1.1rem;font-size:.9375rem;color:var(--rinde)}
.wohnung__liste li{margin-bottom:4px}
.knopf--klein{margin-top:clamp(22px,3vh,30px);padding:12px 22px;font-size:.75rem}

.wohnung__grundriss{margin:0;background:var(--papier);padding:clamp(16px,2vw,28px)}
.wohnung__grundriss img{width:100%;height:auto;max-width:26rem;margin:0 auto}
.wohnung__grundriss figcaption{
  margin-top:14px;font-size:.75rem;line-height:1.5;color:#8E8574;text-align:center;
}

/* Zusammenlegung WE 05 + 06: Variante, keine zusätzliche Einheit */
.wohnung.ist-variante{background:rgba(201,161,98,.10)}
.wohnung.ist-variante .wohnung__nr{color:var(--terrakotta)}
.wohnung__hinweis{
  margin:0 0 clamp(18px,2.6vh,26px);padding:14px 16px;
  border-left:3px solid var(--abendgold);background:var(--papier);
  font-size:.9375rem;line-height:1.55;color:var(--rinde);
}
.wohnung__grundriss--offen{display:flex;flex-direction:column;justify-content:center}
.wohnung__platzhalter{
  display:grid;place-items:center;min-height:14rem;max-width:26rem;margin:0 auto;width:100%;
  border:1px dashed rgba(195,180,140,.9);
  font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase;color:#8E8574;
}

.wohnungen__fuss{
  margin:clamp(28px,4vh,44px) 0 0;
  font-size:.8125rem;line-height:1.6;color:#8E8574;max-width:62rem;
}

@media (max-width:900px){
  .wohnungen__kopfzeile{display:none}
  .wohnung__kopf{
    grid-template-columns:1fr auto;
    grid-template-areas:"nr status" "geschoss geschoss" "zahlen pfeil";
    row-gap:6px;
  }
  .wohnung__nr{grid-area:nr}
  .wohnung__status{grid-area:status;justify-self:end}
  .wohnung__geschoss{grid-area:geschoss}
  .wohnung__zimmer{display:none}
  .wohnung__flaeche{grid-area:zahlen}
  .wohnung__preis{grid-area:zahlen;justify-self:start;margin-left:9rem}
  .wohnung__pfeil{grid-area:pfeil}
  .wohnung__spalten{grid-template-columns:1fr}
}

/* --- Kontakt ---------------------------------------------------------------- */
.kontakt{background:var(--waldschwarz);color:var(--dunst);padding:clamp(56px,10vh,124px) var(--rand)}
.kontakt__innen{
  max-width:82rem;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,88px);align-items:start;
}
.kontakt__spalte{display:grid;gap:clamp(28px,4vh,44px);min-width:0}
.kontakt__lead{margin:clamp(16px,2.4vh,24px) 0 clamp(28px,4vh,40px);font-size:1.0625rem;line-height:1.6;color:var(--himmelgrau);max-width:34ch}
.kontakt__person{margin:0;font-family:var(--schrift-display);font-size:1.5rem;color:var(--papier)}
.kontakt__rolle{margin:4px 0 clamp(20px,3vh,28px);font-size:.9375rem;color:var(--salbei)}
.kontakt__wege{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kontakt__wege a{color:var(--abendgold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.kontakt__wege a:hover,.kontakt__wege a:focus-visible{border-color:var(--abendgold)}

.formular{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.feld{display:grid;gap:7px;min-width:0}
.feld--breit{grid-column:1 / -1}
.feld label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--salbei)}
.feld input,.feld select,.feld textarea{
  font-family:var(--schrift-ui);font-size:1rem;color:var(--dunst);
  background:rgba(243,239,228,.06);
  border:1px solid rgba(195,180,140,.3);border-radius:0;
  padding:12px 14px;width:100%;
}
.feld textarea{resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:2px solid var(--abendgold);outline-offset:1px;background:rgba(243,239,228,.1);
}
.feld select option{color:#1E1708;background:#F3EFE4}
.feld--einwilligung{grid-template-columns:auto 1fr;align-items:start;gap:11px}
.feld--einwilligung input{width:1.125rem;height:1.125rem;margin-top:3px;accent-color:var(--terrakotta)}
.feld--einwilligung label{font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--himmelgrau);line-height:1.5}
.feld--einwilligung label a{color:var(--abendgold);text-decoration:none;border-bottom:1px solid rgba(201,161,98,.45)}
.feld--einwilligung label a:hover,.feld--einwilligung label a:focus-visible{border-color:var(--abendgold)}
.formular .knopf{grid-column:1 / -1;justify-self:start}
.formular__hinweis{grid-column:1 / -1;margin:0;font-size:.875rem;color:var(--abendgold)}
.formular__hinweis.ist-erfolg{color:var(--abendgold)}
.formular__hinweis.ist-fehler{color:#E08A62}
.formular__hinweis:empty{display:none}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:860px){
  .kontakt__innen{grid-template-columns:1fr}
  .formular{grid-template-columns:1fr}
}

/* --- Fußzeile ---------------------------------------------------------------- */
.fuss{background:var(--rinde);color:var(--himmelgrau);padding:clamp(48px,8vh,88px) var(--rand)}
.fuss__innen{
  max-width:82rem;margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.fuss__marke img{width:clamp(150px,16vw,210px);height:auto}
.fuss__claim{margin:16px 0 0;font-family:var(--schrift-display);font-size:1rem;color:var(--kalkstein)}
.fuss__kopf{margin:0 0 10px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--salbei)}
.fuss__block p{margin:0;font-size:.875rem;line-height:1.65}
.fuss__block a{color:var(--kalkstein);text-decoration:none;border-bottom:1px solid transparent}
.fuss__block a:hover,.fuss__block a:focus-visible{border-color:var(--kalkstein)}
.fuss__recht{margin-top:14px}
.fuss__recht span{margin:0 .45em;color:var(--salbei)}
.fuss__zeile{
  max-width:82rem;margin:clamp(36px,5vh,56px) auto 0;
  padding-top:20px;border-top:1px solid rgba(195,180,140,.22);
  font-size:.75rem;line-height:1.6;color:var(--salbei);
}
@media (max-width:860px){
  .fuss__innen{grid-template-columns:1fr 1fr}
  .fuss__marke{grid-column:1 / -1}
}
@media (max-width:520px){
  .fuss__innen{grid-template-columns:1fr}
}

/* --- Lage -------------------------------------------------------------------- */
.lage{background:var(--himmelgrau);padding:clamp(56px,10vh,124px) var(--rand)}
/* Tapete nur im Textabschnitt, nicht unter der Karte */
.lage:not(.lage--karte){
  background-image:url("../images/tapete-himmelgrau-540.jpg");
  background-image:image-set(url("../images/tapete-himmelgrau-540.webp") type("image/webp"),
                             url("../images/tapete-himmelgrau-540.jpg") type("image/jpeg"));
  background-repeat:repeat;
  background-size:270px auto;
  background-position:center top;
}
.lage__innen{
  max-width:82rem;margin:0 auto;
  display:grid;gap:clamp(28px,4.5vh,56px);
}
.lage__bild{margin:0}
.lage__bild img{width:100%;height:auto;display:block}
.lage__bildquelle{margin:10px 0 0;font-size:.75rem;line-height:1.5;color:#7D7560}
.lage__text p{
  margin:clamp(14px,2vh,20px) 0 0;
  font-size:clamp(.9375rem,.9rem + .15vw,1.0625rem);
  line-height:1.65;color:var(--rinde);max-width:40ch;
}
.lage__text p:first-of-type{margin-top:clamp(18px,2.6vh,26px)}
.lage__notiz{
  margin:clamp(8px,1.6vh,18px) 0 0;
  padding-top:clamp(18px,2.6vh,24px);
  border-top:1px solid rgba(94,106,58,.35);
  font-size:.9375rem;line-height:1.6;color:var(--laub);max-width:52rem;
}
@media (max-width:860px){
  .lage__innen{grid-template-columns:1fr}
  .lage__text p{max-width:none}
}

/* --- Lage: Banner mit Bild und Text ----------------------------------------- */
.banner{
  display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  align-items:stretch;
}

/* Bildfeld: zwei Fotos, die sich abwechseln */
.banner__bild{
  position:relative;margin:0;overflow:hidden;
  min-height:clamp(260px,24vw,360px);
}
/* beide Fotos liegen übereinander; die Höhe gibt der Textblock vor */
.banner__foto{position:absolute;inset:0;display:block}
.banner__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Bildausschnitt je Motiv, damit die Menschen im Bild bleiben */
.banner__foto--shopping img      {object-position:50% 34%}
.banner__foto--artischocke img   {object-position:50% 50%}
.banner__foto--paar img          {object-position:50% 28%}
.banner__foto--splash img        {object-position:50% 48%}
.banner__foto--treppenviertel img{object-position:50% 46%}
.banner__foto--elbstrand img     {object-position:46% 62%}
.banner__foto--zwei{opacity:0;animation:banner-wechsel 16s ease-in-out infinite}
@keyframes banner-wechsel{
  0%,44%  {opacity:0}
  52%,94% {opacity:1}
  100%    {opacity:0}
}
/* versetzt, damit nicht alle drei gleichzeitig springen */
.banner:nth-of-type(2) .banner__foto--zwei{animation-delay:-5.3s}
.banner:nth-of-type(3) .banner__foto--zwei{animation-delay:-10.6s}
@media (prefers-reduced-motion:reduce){
  .banner__foto--zwei{animation:none;opacity:0}
}

.banner__text{padding:clamp(26px,3vw,52px)}
.banner__titel{
  margin:0 0 clamp(14px,2vh,22px);
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.375rem,1.05rem + 1.1vw,2rem);line-height:1.2;
  text-wrap:balance;
}
.banner__text p{
  margin:0 0 clamp(12px,1.6vh,18px);
  font-size:clamp(.9375rem,.9rem + .15vw,1.0625rem);line-height:1.6;max-width:68ch;
}
.banner__text p:last-child{margin-bottom:0}

/* Bild rechts statt links */
.banner--bild-rechts .banner__bild{order:2}
.banner--bild-rechts{grid-template-columns:minmax(0,1fr) minmax(0,.58fr)}

/* Farbfassungen */
.banner--waldschwarz{background:var(--waldschwarz)}
.banner--waldschwarz .banner__titel{color:var(--abendgold)}
.banner--waldschwarz .banner__text p{color:var(--himmelgrau)}

.banner--kalkstein{background:var(--kalkstein)}
.banner--kalkstein .banner__titel{color:var(--waldschwarz)}
.banner--kalkstein .banner__text p{color:var(--rinde)}

.banner--dunst{background:var(--dunst)}
.banner--dunst .banner__titel{color:var(--terrakotta)}
.banner--dunst .banner__text p{color:var(--rinde)}

@media (max-width:820px){
  .banner,.banner--bild-rechts{grid-template-columns:1fr}
  .banner--bild-rechts .banner__bild{order:0}
  .banner__bild{min-height:0;aspect-ratio:16 / 10}
}

/* --- Lage: Karte und Nachbarschaft ------------------------------------------ */
.lage__karte{
  grid-column:1 / -1;
  margin-top:clamp(36px,6vh,72px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.lage__kartenbild{margin:0}
.lage__kartenbild img{width:100%;height:auto;display:block}
.lage__untertitel{
  margin:0 0 clamp(16px,2.4vh,22px);
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.125rem,1rem + .5vw,1.5rem);color:var(--laub);
}
.nachbar{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.8vh,18px)}
.nachbar li{
  display:grid;grid-template-columns:4.75rem 1fr;gap:16px;align-items:baseline;
  padding-bottom:clamp(12px,1.8vh,18px);border-bottom:1px solid rgba(94,106,58,.28);
}
.nachbar li:last-child{border-bottom:0;padding-bottom:0}
.nachbar__wert{
  font-size:clamp(1.25rem,1rem + .8vw,1.625rem);font-weight:300;color:var(--terrakotta);
  font-variant-numeric:tabular-nums;
}
.nachbar__text{font-size:.9375rem;line-height:1.5;color:var(--rinde)}
.lage__quelle{margin:clamp(16px,2.4vh,22px) 0 0;font-size:.75rem;line-height:1.5;color:#7D7560}

@media (max-width:860px){ .lage__karte{grid-template-columns:1fr} }

/* Karte als eigener Abschnitt, damit die Bildbänder dazwischen passen */
.lage--karte{padding-top:clamp(44px,8vh,96px)}
.lage--karte .lage__karte{
  grid-column:auto;margin:0 auto;max-width:82rem;
}

/* --- Bildband (Parallaxe-Streifen, wie loewenstein-immo.de) ------------------ */
.bildband{
  position:relative;height:clamp(220px,32vh,330px);
  background-size:cover;background-position:center 55%;background-repeat:no-repeat;
  background-attachment:fixed;
}
.bildband::before,.bildband::after{content:"";position:absolute;inset:0;pointer-events:none}
/* laubbrauner Filter */
.bildband::before{background:var(--moos);mix-blend-mode:multiply;opacity:.42}
.bildband::after{background:linear-gradient(0deg,
  rgba(59,44,21,.44) 0%, rgba(59,44,21,.08) 46%, rgba(59,44,21,.34) 100%)}

.bildband--eins{
  background-image:url("../images/atmo-1-1400.jpg");
  background-image:image-set(url("../images/atmo-1-1400.webp") type("image/webp"),
                             url("../images/atmo-1-1400.jpg") type("image/jpeg"));
}
.bildband--zwei{
  background-image:url("../images/atmo-2-1240.jpg");
  background-image:image-set(url("../images/atmo-2-1240.webp") type("image/webp"),
                             url("../images/atmo-2-1240.jpg") type("image/jpeg"));
}
.bildband--drei{
  background-image:url("../images/atmo-3-1400.jpg");
  background-image:image-set(url("../images/atmo-3-1400.webp") type("image/webp"),
                             url("../images/atmo-3-1400.jpg") type("image/jpeg"));
}
@media (min-width:1401px){
  .bildband--eins{
    background-image:url("../images/atmo-1-1800.jpg");
    background-image:image-set(url("../images/atmo-1-1800.webp") type("image/webp"),
                               url("../images/atmo-1-1800.jpg") type("image/jpeg"));
  }
  .bildband--drei{
    background-image:url("../images/atmo-3-1800.jpg");
    background-image:image-set(url("../images/atmo-3-1800.webp") type("image/webp"),
                               url("../images/atmo-3-1800.jpg") type("image/jpeg"));
  }
}
/* fixed trägt auf Touch-Geräten nicht, dort ruhig stehendes Bild */
@media (max-width:860px){ .bildband{height:200px;background-attachment:scroll} }
@media (hover:none){ .bildband{background-attachment:scroll} }
@media (prefers-reduced-motion:reduce){ .bildband{background-attachment:scroll} }

/* --- Projektfortschritt ------------------------------------------------------ */
.fortschritt{background:var(--papier);padding:clamp(56px,10vh,124px) var(--rand)}
.fortschritt__innen{max-width:82rem;margin:0 auto}
.fortschritt__liste{
  list-style:none;margin:0;padding:0;max-width:46rem;
  counter-reset:schritt;
}
.fortschritt__schritt{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:18px;align-items:center;
  padding:clamp(12px,1.8vh,16px) 0;
}
/* senkrechte Linie */
.fortschritt__schritt::before{
  content:"";position:absolute;left:.4375rem;top:0;bottom:0;width:1px;
  background:rgba(195,180,140,.9);
}
.fortschritt__schritt:first-child::before{top:50%}
.fortschritt__schritt:last-child::before{bottom:50%}
.fortschritt__punkt{
  position:relative;z-index:1;
  width:.9375rem;height:.9375rem;border-radius:50%;
  background:var(--papier);border:1.5px solid var(--kalkstein);
}
.fortschritt__schritt.ist-erreicht .fortschritt__punkt{
  background:var(--terrakotta);border-color:var(--terrakotta);
}
.fortschritt__text{font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);color:#8E8574}
.fortschritt__schritt.ist-erreicht .fortschritt__text{color:var(--waldschwarz);font-weight:500}
.fortschritt__status{
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terrakotta);border:1px solid var(--terrakotta);padding:3px 9px;
}
.fortschritt__termin{
  margin-left:.6em;
  font-size:.8125rem;letter-spacing:.1em;color:var(--laub);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
}
.fortschritt__zahlung{
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--waldschwarz);background:var(--abendgold);padding:4px 10px;white-space:nowrap;
}
@media (max-width:560px){
  .fortschritt__zahlung{white-space:normal;text-align:center}
}
.fortschritt__hinweis{
  margin:clamp(28px,4vh,40px) 0 0;max-width:58rem;
  font-size:.8125rem;line-height:1.6;color:#8E8574;
}

/* --- Löwenstein -------------------------------------------------------------- */
.loewenstein{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--moos);color:var(--himmelgrau);
  padding:clamp(56px,10vh,124px) var(--rand);
}
/* großflächiger Löwenkopf, nur eine Spur heller als der Grund */
.loewenstein::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:50%;translate:-50% -50%;
  height:104%;aspect-ratio:1 / 1;
  background:url("../logo/loewenstein-signet-kalkstein.png") center/contain no-repeat;
  opacity:.08;
}
@media (max-width:860px){
  .loewenstein::before{height:auto;width:min(130%,620px)}
}
.loewenstein__innen{
  max-width:82rem;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,72px);align-items:start;
}
.loewenstein__text p{margin:0 0 clamp(14px,2vh,20px);font-size:1.0625rem;line-height:1.65;max-width:46ch}
.loewenstein__credo{color:var(--abendgold);font-family:var(--schrift-display);font-size:1.125rem !important}
.loewenstein__zahlen{
  grid-column:1 / -1;margin:clamp(24px,4vh,40px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  padding-top:clamp(24px,3.4vh,34px);border-top:1px solid rgba(195,180,140,.25);
}
.loewenstein__zahlen dt{
  font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);font-weight:300;color:var(--kalkstein);
  font-variant-numeric:tabular-nums;
}
.loewenstein__zahlen dd{margin:6px 0 0;font-size:.875rem;line-height:1.5;color:var(--salbei)}
@media (max-width:860px){
  .loewenstein__innen{grid-template-columns:1fr}
  .loewenstein__zahlen{grid-template-columns:1fr;gap:18px}
}

/* --- Kontakt: Porträt und Terminbox ------------------------------------------ */
.kontakt__portraet{margin:0 0 clamp(20px,3vh,28px);max-width:15rem}
.kontakt__portraet img{width:100%;height:auto;display:block}
.terminbox{
  margin-top:clamp(28px,4vh,40px);padding:clamp(20px,3vw,28px);
  background:rgba(243,239,228,.06);border:1px solid rgba(195,180,140,.28);
}
.terminbox__titel{margin:0;font-family:var(--schrift-display);font-size:1.1875rem;color:var(--papier)}
.terminbox__text{margin:10px 0 clamp(18px,2.6vh,24px);font-size:.9375rem;line-height:1.6;color:var(--himmelgrau)}
.terminbox__knoepfe{display:grid;gap:10px}
.terminknopf{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;text-decoration:none;
  background:rgba(243,239,228,.05);border:1px solid rgba(201,161,98,.45);
  color:var(--abendgold);
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease;
}
.terminknopf svg{width:1.125rem;height:1.125rem;fill:currentColor;flex:0 0 auto}
.terminknopf:hover,.terminknopf:focus-visible{background:rgba(201,161,98,.14);border-color:var(--abendgold)}
@media (min-width:560px){ .terminbox__knoepfe{grid-template-columns:1fr 1fr} }

/* ===========================================================================
   Feinschliff 06.10.2026
   =========================================================================== */

/* Hero ohne Schriftzug: Knopf allein, etwas höher gesetzt */
.hero__fuss{gap:0}

/* Textknopf (Google Maps) */
.textknopf{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--terrakotta);color:var(--papier);text-decoration:none;
  padding:clamp(12px,1.2vw,15px) clamp(20px,2.2vw,28px);
  font-size:clamp(.75rem,.6rem + .25vw,.8125rem);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:background .22s ease,transform .22s ease;
}
.textknopf svg{width:1.0625rem;height:1.0625rem;fill:currentColor;flex:0 0 auto}
.textknopf:hover,.textknopf:focus-visible{background:var(--herbstrot);transform:translateY(-2px)}
.lage__aktion{margin:clamp(20px,3vh,28px) 0 0}

/* Löwenstein: Löwenkopf über der Überschrift */
.loewenstein__kopf{display:grid;gap:clamp(18px,2.6vh,28px);justify-items:start}
.loewenstein__signet{
  width:clamp(84px,9vw,132px);height:auto;display:block;
  opacity:.95;
}

/* Porträt wärmer, damit es sich in die Farbwelt einfügt */
.kontakt__portraet{position:relative;isolation:isolate}
.kontakt__portraet img{filter:sepia(.34) saturate(1.08) contrast(1.02) brightness(1.02)}
.kontakt__portraet::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, rgba(201,161,98,.26), rgba(123,56,34,.18));
  mix-blend-mode:multiply;
}

/* Terminbox über die volle Breite unter dem Formular */
.terminbox--unterm-formular{margin:0}
.terminbox--unterm-formular .terminbox__text{max-width:62ch}

/* Pflichtfeld-Hinweis */
.formular__pflicht{
  grid-column:1 / -1;margin:0 0 4px;
  font-size:.75rem;letter-spacing:.06em;color:var(--salbei);
}
.feld input:user-invalid,.feld select:user-invalid,.feld textarea:user-invalid{
  border-color:rgba(201,115,74,.8);
}

/* ===========================================================================
   3D-Wohnungsfinder (assets/3d/wohnungsfinder.js), sitzt über der Wohnungsliste
   Statusfarben über Klassen, keine Inline-Stile (Content-Security-Policy).
   =========================================================================== */
.wf{margin:0 0 clamp(40px,6vh,64px);--wf-frei:var(--laub);--wf-reserviert:var(--abendgold);--wf-verkauft:#A39C8A}
.ist-frei{--c:var(--wf-frei)} .ist-reserviert{--c:var(--wf-reserviert)} .ist-verkauft{--c:var(--wf-verkauft)}
.wf-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.wf-intro{margin:0;font-size:.9375rem;line-height:1.55;color:var(--rinde);max-width:60ch}
.wf-etagen{display:flex;flex-wrap:wrap;gap:6px}
.wf-etagen button{font:inherit;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--kalkstein);background:var(--papier);color:var(--waldschwarz);cursor:pointer;transition:background .18s ease}
.wf-etagen button:hover{background:#fff}
.wf-etagen button[aria-pressed="true"]{background:var(--moos);border-color:var(--moos);color:var(--papier)}
.wf-etagen button:focus-visible,.wf-whg:focus-visible,.wf-zurueck:focus-visible,.wf-link:focus-visible{outline:2px solid var(--terrakotta);outline-offset:2px}
.wf-haupt{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1024px){.wf-haupt{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}
.wf-stage{position:relative;height:52vh;min-height:320px;max-height:640px;overflow:hidden;background:linear-gradient(#E4E3D6,#F6F3EA);border:1px solid rgba(195,180,140,.55)}
@media (min-width:1024px){.wf-stage{height:600px}}
.wf-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.wf-labels{position:absolute;inset:0;pointer-events:none}
.wf-laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:.9375rem;color:var(--rinde)}
.wf.is-bereit .wf-laden{display:none}
.wf-hinweis{position:absolute;right:12px;top:12px;font-size:.75rem;color:var(--rinde);background:rgba(251,249,243,.88);padding:4px 9px}
.wf-legende{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:12px;font-size:.75rem;background:rgba(251,249,243,.92);padding:6px 10px;color:var(--waldschwarz)}
.wf-legende span{display:inline-flex;align-items:center;gap:6px}
.wf-punkt{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--c)}
.wf-tip{position:absolute;pointer-events:none;background:var(--papier);color:var(--waldschwarz);border:1px solid var(--kalkstein);padding:6px 10px;font-size:.8125rem;white-space:nowrap;box-shadow:0 4px 14px rgba(30,23,8,.14);transform:translate(-50%,-130%)}
.wf-tip[hidden]{display:none}
.wf-lbl{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--waldschwarz);background:rgba(251,249,243,.85);padding:3px 8px;white-space:nowrap}
.wf-side{background:var(--papier);border:1px solid rgba(195,180,140,.55);padding:20px;display:grid;gap:16px;align-content:start;color:var(--waldschwarz)}
.wf-eyebrow{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--laub)}
.wf-zahl{font-family:var(--schrift-display);font-size:1.5rem;line-height:1.15;margin-top:4px}
.wf-gruppe{display:grid;gap:6px}
.wf-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.wf-whg{font:inherit;font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums;padding:10px 0;border:1px solid var(--kalkstein);background:transparent;color:var(--waldschwarz);cursor:pointer;position:relative;transition:background .18s ease}
.wf-whg:hover{background:#fff}
.wf-whg::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--c)}
.wf-whg[aria-current="true"]{border-color:var(--moos);box-shadow:inset 0 0 0 1px var(--moos)}
.wf-whg.ist-verkauft{color:#8E8574;border-color:#D9D2BF;background:rgba(220,216,198,.35)}
.wf-whg.is-breit{grid-column:1 / -1;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 24px 10px 10px}
.wf-fein{margin:0;font-size:.8125rem;line-height:1.5;color:var(--rinde)}
.wf-karte{display:grid;gap:14px}
.wf-zurueck{background:none;border:0;padding:0;font:inherit;font-size:.8125rem;font-weight:500;color:var(--terrakotta);cursor:pointer;justify-self:start}
.wf-pill{display:inline-block;font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;color:var(--papier);background:var(--c)}
.wf-titel{font-family:var(--schrift-display);font-size:1.75rem;line-height:1.1;margin-top:8px}
.wf-meta{font-size:.875rem;color:var(--rinde);margin-top:2px}
.wf-werte{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;font-size:.9375rem;font-variant-numeric:tabular-nums}
.wf-werte dt{color:var(--rinde)}
.wf-werte dd{margin:0;font-weight:500;text-align:right}
.wf-preis{font-size:1.0625rem;color:var(--laub)}
.wf-knoepfe{display:grid;gap:10px;justify-items:stretch}
.wf-knoepfe .knopf{width:100%;text-align:center;border:0;cursor:pointer;font-family:var(--schrift-ui)}
.wf-link{text-align:center;font-size:.875rem;font-weight:500;color:var(--terrakotta)}
.wf-quelle{margin:10px 0 0;font-size:.75rem;color:var(--rinde)}
@media (max-width:600px){.wf-hinweis{display:none}.wf-legende{left:8px;top:8px;gap:8px}}
.wohnung{scroll-margin-top:5.5rem}

/* Innenvisualisierungen über dem 3D-Wohnungsfinder */
.innenbilder{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,18px);margin:0 0 clamp(36px,5vh,56px)}
@media (min-width:700px){.innenbilder{grid-template-columns:1fr 1fr}}
.innenbilder__bild{margin:0;overflow:hidden;background:var(--himmelgrau)}
.innenbilder__bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.innenbilder__hinweis{grid-column:1 / -1;margin:0;font-size:.75rem;color:var(--rinde)}
.wohnungen__fuss + .wohnungen__fuss{margin-top:8px}
.wohnungen__fuss strong{font-weight:500;color:var(--waldschwarz)}

/* Bestätigung nach dem Absenden des Formulars (Overlay) */
.danke{border:0;padding:0;background:transparent;max-width:min(92vw,30rem);width:100%}
.danke::backdrop{background:rgba(30,23,8,.62)}
.danke__inhalt{background:var(--papier);color:var(--waldschwarz);padding:clamp(28px,5vw,44px);text-align:center;box-shadow:0 18px 50px rgba(30,23,8,.35)}
.danke__titel{margin:0 0 12px;font-family:var(--schrift-display);font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem);line-height:1.15;color:var(--terrakotta)}
.danke__text{margin:0 0 26px;font-size:1rem;line-height:1.6}
.danke__knopf{border:0;cursor:pointer;font-family:var(--schrift-ui)}
.danke[open]{animation:danke-ein .25s ease}
@keyframes danke-ein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.danke[open]{animation:none}}