/* ============================================================
   twenti wohn, Stylesheet des Themes.
   Die Akzentfarben kommen aus dem Customizer und werden im
   Kopfbereich der Seite als Variablen gesetzt, siehe tw_farben().
   ============================================================ */

/* ============================================================
   twenti wohn, Mockup
   Farben aus der Logo-Vorgabe: Anthrazit #595959, Grün #60A500,
   Oliv #989800, Gold #DEAF04. Akzent ist ein Violett, das
   zwischen dem Anthrazit und dem Grün gut steht.
   ============================================================ */

@property --r{syntax:'<length>';inherits:false;initial-value:0px}

:root{
  --papier:#F6F3EE;
  --papier2:#EDE8E0;
  --weiss:#FFFFFF;
  --ink:#221E2A;
  --ink2:#6C6577;
  --lila:#6B3FD4;
  --lila-satt:#5A2FC2;
  --lila-tief:#241645;
  --lila-hell:#EEE8FD;
  --gruen:#60A500;
  --gold:#DEAF04;
  --linie:rgba(34,30,42,.14);
  --linie2:rgba(34,30,42,.08);
  --rand:clamp(20px,5vw,72px);
  --gap:clamp(64px,9vw,140px);
  --sf:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sbw:0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sf);font-weight:400;font-size:16.5px;line-height:1.6;
  color:var(--ink);background:var(--papier);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lila);color:#fff}
:focus-visible{outline:2px solid var(--lila);outline-offset:3px}

.hu{width:100%;max-width:1560px;margin:0 auto;padding-inline:var(--rand)}
.sek{padding-block:var(--gap)}

h1,h2,h3{font-weight:300;letter-spacing:-.028em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(44px,8.4vw,124px)}
h2{font-size:clamp(34px,5.4vw,76px)}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
h1 em,h2 em{font-style:normal;font-weight:600;color:var(--lila)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--ink2);max-width:52ch}
.klein{font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--ink2)}

/* ---------- Schaltflächen ---------- */
.kn{
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 28px;border:0;border-radius:2px;cursor:pointer;
  font-size:14.5px;font-weight:600;letter-spacing:.005em;text-decoration:none;
  background:var(--lila);color:#fff;transition:background .25s,transform .25s;
}
.kn:hover{background:var(--lila-satt);transform:translateY(-2px)}
.kn svg{width:15px;height:15px}
.kn-leer{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--linie)}
.kn-leer:hover{background:var(--ink);color:var(--papier)}
.tlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;
  border-bottom:1.5px solid var(--lila);padding-bottom:3px;transition:gap .25s,color .25s;
}
.tlink:hover{gap:13px;color:var(--lila)}

/* ---------- Vorhang beim Laden ---------- */
#intro{
  position:fixed;inset:0;z-index:120;background:var(--papier);
  display:grid;place-items:center;gap:28px;grid-auto-rows:min-content;
}
#intro .wm{font-size:clamp(30px,5vw,58px);font-weight:800;letter-spacing:-.03em}
#intro .balken{width:min(240px,44vw);height:2px;background:var(--linie);overflow:hidden}
#intro .balken i{display:block;height:100%;width:0;background:var(--lila)}
body.geladen #intro{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}

/* ---------- Kopf ---------- */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--rand);transition:background .35s,box-shadow .35s,padding .35s;
}
.kopf.fest{background:rgba(246,243,238,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie);padding-block:13px}
.wortmarke{font-size:22px;font-weight:800;letter-spacing:-.032em;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:10px}
.wortmarke img,.custom-logo{max-height:38px;width:auto}
.wortmarke b{font-weight:800;color:var(--ink)}
.wortmarke span{color:var(--lila)}
.menue{display:flex;gap:30px;list-style:none}
.menue a{font-size:14.5px;font-weight:500;text-decoration:none;opacity:.78;position:relative;padding-block:4px}
.menue a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--lila);transition:right .3s}
.menue a:hover{opacity:1}
.menue a:hover::after{right:0}
.kopf .kn{padding:12px 20px;font-size:13.5px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s}
body.menue-auf .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menue-auf .burger span:nth-child(2){opacity:0}
body.menue-auf .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobilmenue{
  position:fixed;inset:0;z-index:55;background:var(--papier);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--rand);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
body.menue-auf .mobilmenue{opacity:1;visibility:visible}
.mobilmenue a{font-size:clamp(28px,8vw,44px);font-weight:300;letter-spacing:-.03em;text-decoration:none;padding:10px 0}
.mobilmenue a:last-child{margin-top:22px;font-size:15px;font-weight:600;color:var(--lila)}

/* ---------- Start ---------- */
#start{position:relative;padding-top:clamp(104px,13.5vh,152px)}
.start-txt{position:relative;z-index:2}
.start-kopf{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,64px);align-items:end}
.start-kopf > *{min-width:0}
#start h1{margin-bottom:26px}
#start .lead{max-width:44ch}
.start-meta{display:flex;flex-direction:column;gap:18px;padding-bottom:8px}
.start-meta div{border-top:1px solid var(--linie);padding-top:11px}
.start-meta b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:3px}
.knopfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Zeichnung über Foto, randlos über die ganze Breite. Das Bild
   behält sein Seitenverhältnis und läuft unten aus dem Bild heraus. */
.bau{position:relative;width:100%;margin-top:clamp(26px,4vh,54px);
  aspect-ratio:2000/1310;overflow:hidden;background:var(--papier)}
.bau-rahmen{position:absolute;inset:0}
/* Oben läuft das Bild ins Papier aus, damit beim Hovern keine Kante steht. */
.bau::before{content:"";position:absolute;left:0;right:0;top:0;height:11%;z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,var(--papier) 0%,rgba(246,243,238,.72) 42%,rgba(246,243,238,0) 100%)}
.bau-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bau-zeichnung{
  position:absolute;inset:0;
  --r:0px;--mx:50%;--my:50%;
  --lupe:radial-gradient(circle var(--r) at var(--mx) var(--my),
    rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 26%,rgba(0,0,0,.16) 44%,
    rgba(0,0,0,.42) 62%,rgba(0,0,0,.74) 80%,rgba(0,0,0,.94) 92%,#000 100%);
  -webkit-mask-image:var(--lupe);mask-image:var(--lupe);
  transition:--r .45s cubic-bezier(.22,1,.36,1);
}
.bau-papier{position:absolute;inset:0;background:var(--papier)}
.bau-sweep{
  position:absolute;inset:0;--p:0%;
  -webkit-mask-image:linear-gradient(96deg,#000 var(--p),transparent calc(var(--p) + 14%));
  mask-image:linear-gradient(96deg,#000 var(--p),transparent calc(var(--p) + 14%));
}
.bau-tinte{
  position:absolute;inset:0;background:var(--lila);
  -webkit-mask-image:var(--strich);mask-image:var(--strich);
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;
}
.bau-hinweis{
  position:absolute;left:clamp(16px,2.4vw,34px);top:clamp(16px,2.4vw,34px);z-index:6;
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:2px;
  background:rgba(246,243,238,.9);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.bau-hinweis i{width:7px;height:7px;border-radius:50%;background:var(--lila);animation:puls 2.4s infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.bau-bild{
  position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:3;
  font-size:12px;color:var(--ink2);background:rgba(246,243,238,.86);padding:7px 12px;border-radius:2px;
}

/* ---------- Zahlenband ---------- */
.zahlen{background:var(--lila-tief);color:#fff}
.zahlen .gitter{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.14)}
.zahlen article{background:var(--lila-tief);padding:clamp(28px,3.4vw,46px) clamp(16px,1.8vw,26px)}
.zahlen b{display:block;font-size:clamp(30px,3.6vw,54px);font-weight:300;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.zahlen article > span{display:block;margin-top:12px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.66)}
.zahlen article:nth-child(1) b,.zahlen article:nth-child(5) b{color:#C9B3FF}

/* ---------- Sorglos ---------- */
.zwei{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,110px);align-items:start}
.zwei > *{min-width:0}
.haft{position:sticky;top:120px}
.punkte{list-style:none;border-top:1px solid var(--linie)}
.punkte li{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--linie)}
.punkte .nr{font-size:12.5px;font-weight:600;color:var(--lila);padding-top:4px;font-variant-numeric:tabular-nums}
.punkte h3{margin-bottom:7px}
.punkte p{color:var(--ink2);font-size:16px;max-width:46ch}

/* ---------- Silhouette ---------- */
.silhouette{padding-block:clamp(40px,6vw,80px)}
.silhouette svg{width:100%;height:auto;display:block}
.silhouette path,.silhouette line{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;opacity:.65}
.silhouette .akz{stroke:var(--lila);stroke-width:2;opacity:1}

/* ---------- Hof ---------- */
#hof{background:var(--papier2);padding-block:var(--gap)}
.hof-kopf{display:grid;grid-template-columns:1fr .8fr;gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.hof-rahmen{position:relative;aspect-ratio:2000/1014;overflow:hidden;background:var(--papier)}
.hof-rahmen .bau-foto{position:absolute;inset:0}
.hof-zeichnung{
  position:absolute;inset:0;--p:-25%;
  -webkit-mask-image:linear-gradient(180deg,transparent var(--p),#000 calc(var(--p) + 22%));
  mask-image:linear-gradient(180deg,transparent var(--p),#000 calc(var(--p) + 22%));
}
.hof-tinte{
  position:absolute;inset:0;background:var(--ink);
  -webkit-mask-image:var(--strich);mask-image:var(--strich);
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;
}
.hof-daten{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);margin-top:1px}
.hof-daten div{background:var(--papier2);padding:24px 22px}
.hof-daten b{display:block;font-size:clamp(24px,2.6vw,36px);font-weight:300;letter-spacing:-.03em}
.hof-daten div > span{font-size:12.5px;color:var(--ink2)}

/* ---------- Wohnungen ---------- */
.wohn-kopf{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:34px}
.filter{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:22px}
.filter-gruppe{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  padding:9px 17px;border-radius:2px;border:1px solid var(--linie);background:transparent;cursor:pointer;
  font-size:13.5px;font-weight:600;transition:background .2s,color .2s,border-color .2s;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--papier);border-color:var(--ink)}
.filter-trenn{width:1px;height:22px;background:var(--linie);margin-inline:6px}
.schalter{display:inline-flex;border:1px solid var(--linie);border-radius:2px;overflow:hidden;margin-left:auto}
.schalter button{padding:9px 15px;background:transparent;border:0;cursor:pointer;font-size:13px;font-weight:600}
.schalter button[aria-pressed="true"]{background:var(--lila);color:#fff}

.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle thead th{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;
}
.tabelle th.re,.tabelle td.re{text-align:right}
.tabelle tbody tr{border-bottom:1px solid var(--linie2);transition:background .2s}
.tabelle tbody tr:hover{background:var(--lila-hell)}
.tabelle td{padding:17px 16px;font-size:15.5px}
.tabelle td.top{font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap;width:92px}
.tabelle td.zi span{display:inline-block;min-width:26px}
.tabelle td.frei small{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.tabelle td.preis{font-weight:600;font-size:16.5px;white-space:nowrap}
.tabelle td.tun{width:120px;text-align:right}
.tabelle td.tun a{font-size:13px;font-weight:600;text-decoration:none;color:var(--lila);white-space:nowrap}
.tabelle td.tun a:hover{text-decoration:underline}
.hr-marke{display:inline-block;padding:3px 9px;border:1px solid var(--linie);border-radius:2px;font-size:11.5px;font-weight:600}
.tabelle td.tun .mehr{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;padding:0;
  font-size:13px;font-weight:600;color:var(--lila);
}
.tabelle td.tun .mehr svg{width:12px;height:12px;transition:transform .3s}
.tabelle tr.offen .mehr svg{transform:rotate(180deg)}
.tabelle tr.offen{background:var(--lila-hell)}
.tabelle tr.detail td{padding:0 16px 22px;background:var(--lila-hell)}
.dok{display:flex;flex-wrap:wrap;gap:9px}
.dok-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:13.5px;font-weight:500;padding:9px 15px;border-radius:2px;
  background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie);transition:box-shadow .2s,background .2s;
}
.dok-link::before{
  content:"";width:13px;height:15px;flex:none;background:currentColor;opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23000' d='M9.5 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6.5L9.5 0zm0 2.2L13.8 6.5H9.5V2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23000' d='M9.5 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6.5L9.5 0zm0 2.2L13.8 6.5H9.5V2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dok-link:hover{box-shadow:inset 0 0 0 1px var(--lila);color:var(--lila)}
.dok-stark{background:var(--lila);color:#fff;box-shadow:none;font-weight:600}
.dok-stark::before{display:none}
.dok-stark:hover{background:var(--lila-satt);color:#fff;box-shadow:none}

.tab-fuss{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;margin-top:20px;font-size:13px;color:var(--ink2)}
.haus-dok{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px;
  border-top:1px solid var(--linie);padding-top:24px}
.haus-dok .klein{margin-right:6px}

/* ---------- Ausstattung ---------- */
#ausstattung{background:var(--ink);color:var(--papier)}
#ausstattung h2{color:var(--papier)}
#ausstattung .lead{color:rgba(246,243,238,.66)}
.aus-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(246,243,238,.16);margin-top:clamp(36px,4vw,60px)}
.aus-gitter article{background:var(--ink);padding:clamp(26px,2.6vw,38px)}
.aus-gitter h3{margin-bottom:9px;color:var(--papier)}
.aus-gitter p{font-size:15px;color:rgba(246,243,238,.62);max-width:36ch}
.aus-gitter .zeichen{display:block;width:34px;height:34px;margin-bottom:20px;color:var(--lila)}
.aus-gitter .zeichen svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.aus-gitter article.gruen .zeichen{color:var(--gruen)}
.aus-gitter article.gold .zeichen{color:var(--gold)}

/* ---------- Lage ---------- */
.lage-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px)}
.lage-liste div{padding:20px 0 24px;border-bottom:1px solid var(--linie)}
.lage-liste b{display:block;font-size:clamp(21px,2.1vw,29px);font-weight:300;letter-spacing:-.02em;
  color:var(--lila);line-height:1.1}
.lage-liste p{margin-top:9px;margin-left:clamp(22px,3.4vw,58px);font-size:15.5px;color:var(--ink2);max-width:44ch}
.lage-liste strong{display:block;font-weight:600;color:var(--ink);font-size:16.5px;margin-bottom:3px}

/* ---------- Innen ---------- */
.rail{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:auto;
  padding-inline:var(--rand);padding-block:6px 26px;scrollbar-width:none;width:100%}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:0 0 min(760px,82vw);scroll-snap-align:center;position:relative;cursor:pointer}
.rail figure img{transition:filter .4s}
.rail figure:hover img{filter:brightness(1.04)}
.rail figure::after{
  content:"Ansehen";position:absolute;left:16px;top:16px;padding:8px 14px;border-radius:2px;
  background:rgba(246,243,238,.92);font-size:12px;font-weight:600;letter-spacing:.02em;
  opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;
}
.rail figure:hover::after{opacity:1;transform:none}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(20,14,38,.94);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.an{opacity:1;visibility:visible}
.lb img{max-width:min(1500px,92vw);max-height:82vh;width:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-kopf{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px clamp(16px,3vw,34px);padding-right:clamp(78px,8vw,110px);color:#fff}
.lb-text{font-size:15px;font-weight:600}
.lb-zaehler{font-size:13px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.lb button{background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;border-radius:2px;
  width:46px;height:46px;display:grid;place-items:center;transition:background .25s}
.lb button:hover{background:var(--lila)}
.lb button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.lb-zu{position:absolute;top:16px;right:clamp(16px,3vw,34px)}
.lb-vor,.lb-zurueck{position:absolute;top:50%;transform:translateY(-50%)}
.lb-zurueck{left:clamp(10px,2vw,28px)}
.lb-vor{right:clamp(10px,2vw,28px)}
.rail img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rail figure.hoch img{aspect-ratio:1/1}
.rail figcaption{margin-top:12px;font-size:13px;color:var(--ink2);display:flex;justify-content:space-between;gap:14px}
.rail figcaption b{font-weight:600;color:var(--ink)}

/* ---------- Kontakt ---------- */
#kontakt{background:var(--lila-tief);color:#fff}
#kontakt h2{color:#fff}
#kontakt .lead{color:rgba(255,255,255,.66)}
.kontakt-gitter{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,90px);align-items:start}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:flex;flex-direction:column;gap:8px}
.feld.voll{grid-column:1 / -1}
.feld label{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.feld input,.feld select,.feld textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);
  padding:12px 2px;color:#fff;font-size:16px;border-radius:0;
}
.feld select option{color:var(--ink)}
.feld textarea{resize:vertical;min-height:92px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-bottom-color:var(--lila)}
.dsgvo{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,.66);grid-column:1 / -1}
.dsgvo input{width:17px;height:17px;accent-color:var(--lila);flex:none;margin-top:2px}
.kontakt-info{border-top:1px solid rgba(255,255,255,.2);padding-top:22px;margin-top:30px;font-size:14.5px;color:rgba(255,255,255,.72)}
.kontakt-info b{display:block;color:#fff;font-weight:600;margin-bottom:4px}
.platzhalter{display:inline-block;padding:2px 8px;border:1px dashed rgba(255,255,255,.4);border-radius:2px;font-size:11.5px;letter-spacing:.06em}

/* ---------- Fuß ---------- */
.fuss{padding-block:clamp(40px,5vw,64px);background:var(--papier)}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--linie);padding-top:26px;font-size:13.5px;color:var(--ink2)}
.fuss-zeile nav{display:flex;gap:22px;flex-wrap:wrap}
.fuss-zeile a{text-decoration:none}
.fuss-zeile a:hover{color:var(--lila)}
.fuss .claim{font-size:clamp(30px,6vw,84px);font-weight:300;letter-spacing:-.035em;line-height:1;margin-bottom:38px}
.fuss .claim em{font-style:normal;font-weight:600;color:var(--lila)}

/* ---------- Bewegung ---------- */
.rv{opacity:0;transform:translateY(28px)}
.rw{clip-path:inset(0 0 100% 0)}
.rz{opacity:0}
html.kein-js .rv,html.kein-js .rw,html.kein-js .rz{opacity:1;transform:none;clip-path:none}

/* ---------- Schmal ---------- */
@media (max-width:1080px){
  .start-kopf,.zwei,.hof-kopf,.kontakt-gitter{grid-template-columns:1fr}
  .haft{position:static}
  .zahlen .gitter{grid-template-columns:repeat(3,1fr)}
  .aus-gitter{grid-template-columns:repeat(2,1fr)}
  .lage-liste{grid-template-columns:1fr}
  .start-meta{flex-direction:row;flex-wrap:wrap;gap:26px}
  .start-meta div{flex:1 1 160px}
}
@media (max-width:820px){
  .menue,.kopf .kn{display:none}
  .burger{display:block}
  .zahlen .gitter{grid-template-columns:repeat(2,1fr)}
  .aus-gitter,.hof-daten{grid-template-columns:1fr}
  .formular{grid-template-columns:1fr}
  .hof-rahmen{margin-inline:calc(var(--rand) * -1);width:calc(100% + var(--rand) * 2)}
  /* Hochkant zeigt das Bild lieber ganz, der Rest ist Papier. */
  .knopfe{flex-direction:column;align-items:stretch;margin-top:26px}
  .knopfe .kn{justify-content:center}
  /* Eckdaten als schmale Zeilen, damit die Zeichnung noch ins Bild ragt */
  #start{padding-top:clamp(92px,12vh,124px)}
  .start-meta{gap:0;margin-top:30px}
  .start-meta div{flex:1 1 100%;display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:10px 0}
  .start-meta b{margin-top:0;font-size:15.5px;text-align:right}
  .bau-hinweis{left:14px;top:14px;font-size:11px;padding:7px 11px;max-width:70vw;line-height:1.35}
  .filter-trenn{display:none}
  .filter{gap:12px}
  .tabelle tbody tr{padding:22px 4px}
  .tabelle td.frei small{color:var(--ink2)}
  .tabelle thead{display:none}
  .tabelle tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:20px 4px;position:relative}
  .tabelle td{padding:0;font-size:15px}
  .tabelle td.top{grid-column:1;font-size:19px}
  .tabelle td.geschoss{grid-column:2;grid-row:1;justify-self:end;color:var(--ink2)}
  .tabelle td.zi,.tabelle td.wfl,.tabelle td.frei,.tabelle td.hr{grid-column:1 / -1;display:flex;justify-content:space-between;
    border-top:1px solid var(--linie2);padding-top:8px;margin-top:6px}
  .tabelle td.zi::before{content:"Zimmer";color:var(--ink2);font-size:13px}
  .tabelle td.wfl::before{content:"Wohnfläche";color:var(--ink2);font-size:13px}
  .tabelle td.frei::before{content:"Freifläche";color:var(--ink2);font-size:13px}
  .tabelle td.hr::before{content:"Ausrichtung";color:var(--ink2);font-size:13px}
  .tabelle td.frei small{display:inline;margin-left:6px}
  .tabelle td.preis{grid-column:1;margin-top:12px;font-size:19px}
  .tabelle td.tun{grid-column:2;margin-top:12px;align-self:center}
  .tabelle td.re{text-align:left}
  .tabelle tbody tr.detail{display:block;padding:0}
  .tabelle tr.detail td{display:block;padding:0 16px 20px}
  .dok{gap:8px}
  .dok-link{font-size:13px;padding:8px 13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv,.rw,.rz{opacity:1 !important;transform:none !important;clip-path:none !important}
}

/* ---------- Ergänzungen für WordPress ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;padding:14px 22px;background:var(--lila);color:#fff;
  font-size:14px;font-weight:600;border-radius:0 0 2px 0;
}
.skip:focus{left:0}

.menue,.mobilliste{list-style:none;margin:0;padding:0}
.mobilmenue .mobilliste{display:flex;flex-direction:column;gap:6px}
.mobilmenue .mobilliste a{font-size:clamp(28px,8vw,44px);font-weight:300;letter-spacing:-.03em;text-decoration:none;padding:10px 0;display:block}

/* Honigtopf gegen Formularroboter */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.meldung{
  margin-bottom:26px;padding:16px 20px;border-radius:2px;font-size:15px;line-height:1.5;
  background:rgba(255,255,255,.1);color:#fff;border-left:3px solid var(--lila);
}
.meldung--ok{border-left-color:#7BD16A}
.meldung--fehler{border-left-color:#FF8A7A}

.tabelle tr[hidden]{display:none !important}

/* Status in der Wohnungsliste */
.pill{
  display:inline-block;padding:4px 11px;border-radius:2px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.pill--frei{background:var(--lila-hell);color:var(--lila)}
.pill--reserviert{background:rgba(222,175,4,.18);color:#8A6B00}
.pill--verkauft{background:rgba(34,30,42,.09);color:var(--ink2)}
.tabelle tr.zeile--verkauft{color:var(--ink2)}
.tabelle tr.zeile--verkauft .top,.tabelle tr.zeile--verkauft .preis{font-weight:500}
.tabelle tr.zeile--verkauft .wfl,.tabelle tr.zeile--verkauft .frei{opacity:.75}

/* Einzelne Seiten wie Impressum */
.seite{padding-top:clamp(120px,16vh,180px);max-width:78ch}
.seite h1{margin-bottom:26px}
.entry p{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.entry h2{font-size:clamp(24px,3vw,34px);margin-top:38px}
.entry h3{margin-top:28px}
.entry ul,.entry ol{margin:16px 0 0 22px;color:var(--ink2)}
.entry li{margin-top:8px}
.entry a{color:var(--lila)}
.entry img{margin-top:20px}

/* Vom Editor gesetzte Ausrichtungen */
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
.aligncenter{margin-inline:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:820px){
  .tabelle td.status{grid-column:2;grid-row:2;justify-self:end}
  .tabelle td.status::before{content:none}
}