/* ==========================================================================
   WOHNEN AM SULZBACH – Kundenerlebnis (V7)
   Startbild-Slider, Baufortschritt, Tag/Nacht, Reiter-Bereiche,
   Energieausweis-Zertifikat.
   ========================================================================== */

/* ---------- Startbild-Slider --------------------------------------------- */
/* Ruhiger Wechsel in drei Schichten:
   1. lange, symmetrische Überblendung (kein hartes Ein- und Aussetzen)
   2. das abgehende Bild verliert leicht die Schärfe – das verhindert den
      matschigen Doppelbelichtungs-Eindruck in der Mitte der Blende
   3. eine langsame, lineare Drift, die über den ganzen Standbild-Zeitraum
      läuft und beim Wechsel nicht zurückspringt (siehe app.js) */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#141816; }
.hero-slide{
  position:absolute; inset:0; margin:0; z-index:1;
  opacity:0; will-change:opacity;
  /* 2,4 Sekunden weiche Überblendung. Die Kurve steigt flach an und läuft
     flach aus – dadurch gibt es keinen erkennbaren Anfangs- oder
     Schlusspunkt, das Bild "kippt" nicht um, es löst sich auf. */
  transition:opacity 2.4s cubic-bezier(.37,0,.28,1);
}
.hero-slide.is-in{ opacity:1; z-index:3; }
/* Das abgehende Bild bleibt scharf und behält Tempo und Richtung seiner
   Bewegung bei; verändert wird nur die Deckkraft. Der frühere
   Weichzeichner plus Extra-Zoom war der Grund für den harten Eindruck. */
.hero-slide.is-out{ z-index:2; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  transform:scale(1.06); will-change:transform;
  /* Wichtig: die alte kenburns-Animation aus style.css muss weg. Eine
     CSS-Animation überschreibt auch Inline-Transforms – dadurch lief über
     allen Bildern derselbe 26-Sekunden-Zoom weiter, jedes neue Motiv setzte
     mitten in dieser Bewegung ein und der Wechsel wirkte hart. */
  animation:none !important;
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{ transition:opacity .35s linear; }
  .hero-slide img{ transform:none !important; transition:none !important; }
}

.hero-slider-ui{
  position:relative; z-index:3; max-width:var(--wrap); width:100%;
  margin-inline:auto; padding:0 var(--gutter) 1.1rem;
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
}
.hero-caption{
  margin:0; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero-dots{ display:flex; gap:.45rem; margin-left:auto; }
.hero-dot{
  width:34px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.hero-dot i{
  display:block; width:26px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.34); transition:background .3s ease, transform .3s ease;
}
.hero-dot.is-active i{ background:#fff; transform:scaleY(2); }
.hero-dot:hover i{ background:rgba(255,255,255,.7); }

@media (max-width:700px){
  .hero-slider-ui{ padding-bottom:.7rem; }
  .hero-caption{ font-size:.66rem; letter-spacing:.1em; }
  .hero-dots{ margin-left:0; }
}

/* ---------- Baufortschritt ------------------------------------------------ */
.split-wide{ align-items:start; }
.progress-block{
  margin:3rem 0 0; padding:1.4rem 1.5rem 1.5rem;
  background:var(--paper); border:1px solid var(--stone); border-radius:var(--radius);
}
.progress-title{
  margin:0 0 1.1rem; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.progress-track{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.1rem;
}
.pg-step{
  position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:.85rem; align-items:start; padding:0 0 1.05rem;
}
.pg-step:last-child{ padding-bottom:0; }
.pg-mark{
  position:relative; width:15px; height:15px; margin-top:.18rem; border-radius:50%;
  border:1.5px solid var(--stone-deep); background:var(--paper); flex:none;
}
.pg-step:not(:last-child) .pg-mark::after{
  content:""; position:absolute; left:50%; top:15px; transform:translateX(-50%);
  width:1.5px; height:calc(100% + 1.05rem - 15px); background:var(--stone);
}
.pg-body strong{
  display:block; font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.3;
}
.pg-body small{ display:block; font-size:.78rem; color:var(--muted); margin-top:.1rem; }

.pg-step.is-done .pg-mark{ background:var(--olive); border-color:var(--olive); }
.pg-step.is-done .pg-mark::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:5px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0;
  transform:translateY(-1px) rotate(45deg);
}
.pg-step.is-done:not(:last-child) .pg-mark::after{ background:var(--olive); opacity:.45; }
.pg-step.is-now .pg-mark{ border-color:var(--brass); border-width:2px; }
.pg-step.is-now .pg-mark::before{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--brass);
  animation:pgPulse 2.2s ease-in-out infinite;
}
@keyframes pgPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.7) } }
.pg-step.is-now .pg-body strong{ color:var(--brass); }
.pg-step.is-next{ opacity:.55; }

.split-actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }

@media (min-width:760px){
  .progress-track{ grid-template-columns:repeat(5,1fr); gap:0; }
  .pg-step{ grid-template-columns:1fr; gap:.6rem; padding:0 .6rem 0 0; }
  .pg-step:not(:last-child) .pg-mark::after{ display:none; }
  .pg-step:not(:last-child)::after{
    content:""; position:absolute; left:21px; top:6.5px; right:.9rem;
    height:1.5px; background:var(--stone);
  }
  .pg-step.is-done:not(:last-child)::after{ background:var(--olive); opacity:.4; }
  .pg-body strong{ font-size:.82rem; }
  .pg-body small{ font-size:.72rem; }
}

@media (min-width:900px){
  .split-wide .split-media{ position:sticky; top:6.5rem; }
  .progress-block{ padding:1.7rem 2rem 1.9rem; }
  .pg-step{ padding-right:1.6rem; }
}

/* ---------- Tag / Abend im Gebäude-Explorer -------------------------------- */
/* Zwei deckungsgleiche Renderings, der Regler blendet zwischen ihnen über. */
.explorer-canvas{ --night-mix:0; }
/* Wichtig: style.css setzt hier position:absolute + inset:-3%. Wir stellen
   auf relative um, damit die Bildmarkierungen mitwandern – dann muss das
   inset aber ausdrücklich zurückgesetzt werden. Sonst schob sich das Bild
   um 3 % (rund 30 px) nach links und rechts blitzte der Rahmen durch. */
.explorer-parallax{ position:relative; inset:auto; }
.explorer-night{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:var(--night-mix); pointer-events:none;
}
.explorer-canvas .hotspot .dot{
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}

.daynight{
  display:flex; align-items:center; gap:.85rem;
  margin:1rem auto 0; max-width:34rem; padding:.55rem .9rem;
  background:var(--sand); border:1px solid var(--stone); border-radius:999px;
}
.daynight[hidden]{ display:none; }
.dn-side{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); flex:none; }
.daynight input[type=range]{
  flex:1 1 auto; min-width:0; height:3px; appearance:none; border-radius:3px; cursor:pointer;
  background:linear-gradient(90deg,#E3D9C6 0%, #C89A5B 55%, #2C3A55 100%);
}
.daynight input[type=range]::-webkit-slider-thumb{
  appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--olive); box-shadow:0 1px 5px rgba(0,0,0,.24); cursor:pointer;
}
.daynight input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--olive); box-shadow:0 1px 5px rgba(0,0,0,.24); cursor:pointer;
}
.dn-readout{ flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; min-width:6.5rem; }
.dn-readout strong{ font-size:.82rem; color:var(--ink); }
.dn-readout small{ font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width:640px){
  .daynight{ flex-wrap:wrap; border-radius:var(--radius); }
  .dn-readout{ min-width:0; margin-left:auto; }
}

/* ---------- Reiter --------------------------------------------------------- */
.tabbar{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:0 0 2.2rem; padding:.35rem;
  background:var(--sand); border:1px solid var(--stone); border-radius:var(--radius);
}
.section-alt .tabbar{ background:var(--paper); }
.tabbar .tab{
  flex:1 1 12rem; display:flex; flex-direction:column; gap:.1rem; align-items:flex-start;
  padding:.75rem 1.1rem; border:1px solid transparent; border-radius:calc(var(--radius) - 1px);
  background:none; cursor:pointer; text-align:left;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tabbar .tab strong{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--ink);
}
.tabbar .tab small{ font-size:.74rem; color:var(--muted); letter-spacing:.01em; }
.tabbar .tab:hover{ background:rgba(255,255,255,.65); }
.section-alt .tabbar .tab:hover{ background:var(--sand); }
.tabbar .tab.is-active{
  background:var(--ink); box-shadow:0 2px 12px rgba(27,33,31,.16);
}
.tabbar .tab.is-active strong{ color:#fff; }
.tabbar .tab.is-active small{ color:rgba(255,255,255,.66); }
.tabbar .tab:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }

.tabpanel[hidden]{ display:none; }
.tab-lead{
  max-width:70ch; margin:0 0 2rem; font-size:1rem; line-height:1.7; color:var(--muted);
}
.tab-lead:empty{ display:none; }

/* Der Bauqualitäts-Reiter behält seinen dunklen Auftritt */
.tabpanel.is-dark{
  background:var(--ink); color:rgba(255,255,255,.86);
  margin-inline:calc(var(--gutter) * -1); padding:2.6rem var(--gutter) 3rem;
  border-radius:var(--radius);
}
.tabpanel.is-dark .tab-lead{ color:rgba(255,255,255,.66); }
@media (min-width:900px){
  .tabpanel.is-dark{ margin-inline:0; padding:3rem 3rem 3.4rem; }
}

@media (max-width:640px){
  .tabbar{ flex-direction:column; }
  .tabbar .tab{ flex:1 1 auto; }
}

/* ---------- Energieausweis als Zertifikat ---------------------------------- */
.energy-cert{
  margin:0 0 2.4rem; padding:1.8rem 1.9rem 1.9rem;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
}
.ec-head{ margin-bottom:1.6rem; }
.ec-head .eyebrow{ color:rgba(255,255,255,.55); margin-bottom:.35rem; }
.ec-head h4{ margin:0 0 .4rem; font-size:1.35rem; color:#fff; }
.ec-meta{ margin:0; font-size:.74rem; color:rgba(255,255,255,.5); letter-spacing:.02em; }

.ec-scales{ display:grid; gap:2rem; }
@media (min-width:860px){ .ec-scales{ grid-template-columns:1fr 1fr; gap:2.6rem; } }

.ec-scale{ position:relative; padding-left:4.6rem; }
.ec-scale-label{
  margin:0 0 .9rem; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.ec-badge{
  position:absolute; left:0; top:2.1rem;
  width:3.5rem; height:3.5rem; display:grid; place-items:center;
  background:var(--olive); border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.ec-badge strong{
  font-family:var(--display); font-size:1.9rem; line-height:1; color:#fff;
  font-variant-numeric:lining-nums;
}
.ec-steps{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.ec-step{
  position:relative; display:flex; align-items:center; gap:.6rem;
  height:1.15rem;
}
.ec-step::before{
  content:""; display:block; width:var(--w,40%); height:100%;
  border-radius:2px; opacity:.34;
  background:linear-gradient(90deg,#4F7A3A,#7E9B3C);
}
.ec-step:nth-child(4)::before{ background:linear-gradient(90deg,#7E9B3C,#B8A63C); }
.ec-step:nth-child(5)::before,
.ec-step:nth-child(6)::before{ background:linear-gradient(90deg,#C09339,#C2762F); }
.ec-step:nth-child(n+7)::before{ background:linear-gradient(90deg,#B85C39,#9E3C2C); }
.ec-step.is-on::before{ opacity:1; box-shadow:0 0 0 1px rgba(255,255,255,.35) inset; }
.ec-code{
  position:absolute; left:.5rem; font-size:.66rem; font-weight:600; letter-spacing:.06em;
  color:rgba(255,255,255,.62);
}
.ec-step.is-on .ec-code{ color:#fff; }
.ec-here{
  font-size:.76rem; font-weight:600; color:#fff; white-space:nowrap;
  font-variant-numeric:lining-nums;
}
.ec-download{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.7rem;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:.25rem; transition:color .25s, border-color .25s;
}
.ec-download:hover{ color:#fff; border-color:#fff; }

/* ---------- Grundrisse kompakter ------------------------------------------ */
@media (min-width:900px){
  .plan-grid{ grid-template-columns:repeat(3,1fr); gap:1.2rem; }
}
@media (min-width:1400px){
  .plan-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Aufklappbarer Zusatzblock ------------------------------------- */
.more-block{ margin-top:2.4rem; border-top:1px solid var(--stone); }
.more-block > summary{
  list-style:none; cursor:pointer; padding:1.15rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.8rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
}
.more-block > summary::-webkit-details-marker{ display:none; }
.more-block > summary i{
  position:relative; width:22px; height:22px; flex:none;
  border:1px solid var(--stone-deep); border-radius:50%;
  transition:transform .3s var(--ease), border-color .3s;
}
.more-block > summary i::before,
.more-block > summary i::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--ink);
}
.more-block > summary i::before{ width:9px; height:1px; }
.more-block > summary i::after{ width:1px; height:9px; transition:opacity .3s; }
.more-block[open] > summary i{ transform:rotate(180deg); border-color:var(--olive); }
.more-block[open] > summary i::after{ opacity:0; }
.more-block > summary:hover i{ border-color:var(--olive); }
.more-block > .material-grid,
.more-block > div{ margin-top:.6rem; padding-bottom:.8rem; }


/* ---------- Startseite auf dem Telefon ------------------------------------ */
@media (max-width:700px){
  .hero{ min-height:100svh; }
  .hero-inner{ padding-top:5.5rem; }
  .hero-title{ font-size:clamp(2.1rem,10vw,2.9rem); }
  .hero-sub{ font-size:1rem; line-height:1.5; margin-bottom:1.4rem; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .hero-facts{ grid-template-columns:1fr 1fr; }
  .hero-fact{ padding:1rem .6rem 0 0; }
  .hf-num{ font-size:1.9rem; }
  .hero-scroll{ display:none; }
}

/* Bühne folgt dem Seitenverhältnis der gewählten Ansicht, damit die Punkte
   exakt auf dem Gebäude sitzen. Die Punkte liegen jetzt in derselben Ebene
   wie das Bild und bewegen sich beim Parallax mit. */
.explorer-canvas{ aspect-ratio:var(--exp-ar, 1448/1086); }
.explorer-parallax .hotspot-layer{ position:absolute; inset:0; }
@media (min-width:900px){
  .explorer-canvas{ aspect-ratio:var(--exp-ar, 1448/1086); max-height:74vh; margin-inline:auto; width:auto; }
  .explorer-canvas{ aspect-ratio:var(--exp-ar, 1448/1086); }
}

/* ==========================================================================
   KOMPAKTER (V8)
   Weniger Luft zwischen den Abschnitten, ohne dass es eng wirkt.
   ========================================================================== */
:root{ --sp-section: clamp(3.4rem, 6vw, 6.4rem); }
.section-head{ margin-bottom:clamp(1.9rem, 3.4vw, 2.8rem); }
.stat-row{ margin-top:2.2rem; }
.tabbar{ margin-bottom:1.6rem; }
.tab-lead{ margin-bottom:1.5rem; }

/* Partnerkarten: eine Reihe statt zwei */
@media (min-width:1000px){
  .partner-grid{ grid-template-columns:repeat(4,1fr); gap:1rem; }
  .partner-card{ padding:1.4rem 1.3rem; }
  .partner-card h3{ font-size:1.02rem; }
  .partner-card p{ font-size:.82rem; }
  .partner-contact span{ font-size:.76rem; }
}

/* Grundrisse: kleinere Kacheln, mehr pro Reihe */
@media (min-width:700px){ .plan-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
@media (min-width:1100px){ .plan-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1400px){ .plan-grid{ grid-template-columns:repeat(5,1fr); } }

/* Bühne des Explorers etwas flacher halten */
.explorer-canvas{ max-height:76vh; }
.explorer-canvas{ margin-inline:auto; }

/* Wohnungsfinder: echtes Rendering, kein Farbfilter, Bild bleibt beim
   Scrollen stehen statt auf die volle Spaltenhöhe zu wachsen. */
.finder-image img{ filter:none; }
.finder-image-overlay{ background:linear-gradient(90deg,rgba(21,27,24,.46),rgba(21,27,24,.02) 62%,rgba(21,27,24,.12)); }
@media (min-width:981px){
  .finder-visual{
    min-height:0; height:clamp(380px, 54vh, 560px);
    align-self:start; position:sticky; top:6.5rem;
  }
}
@media (max-width:980px){ .finder-visual{ min-height:0; height:clamp(320px,54vw,460px); } }

/* ==========================================================================
   V9 – Baufortschritt als Ladebalken
   ========================================================================== */
.progress-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.progress-head .progress-title{ margin-bottom:.9rem; }
.progress-share{ margin:0 0 .9rem; display:flex; align-items:baseline; gap:.25rem; }
.progress-share strong{
  font-family:var(--display); font-size:1.7rem; line-height:1; color:var(--olive);
  font-variant-numeric:lining-nums;
}
.progress-share span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.progress-meter{
  position:relative; height:9px; border-radius:99px; overflow:hidden;
  background:var(--sand); box-shadow:inset 0 0 0 1px rgba(29,35,33,.08);
}
.section-alt .progress-meter{ background:#EFE9DF; }
.pm-fill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:99px;
  background:linear-gradient(90deg,#5D6B4C 0%, #7A8B5E 62%, #A8763E 100%);
  transition:width 1.5s cubic-bezier(.2,.75,.25,1);
}
.progress-block.is-in .pm-fill{ width:var(--f,78%); }
/* Der Balken bleibt in Bewegung – er signalisiert: hier läuft etwas. */
.pm-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 90%);
  background-size:180px 100%; background-repeat:no-repeat;
  animation:pmShine 2.4s linear infinite;
}
@keyframes pmShine{ from{ background-position:-190px 0 } to{ background-position:calc(100% + 190px) 0 } }
@media (prefers-reduced-motion:reduce){
  .pm-fill{ width:var(--f,78%); transition:none; }
  .pm-fill::after{ animation:none; opacity:0; }
}
.progress-note{
  margin:.85rem 0 1.6rem; font-size:.84rem; line-height:1.6; color:var(--muted); max-width:62ch;
}

/* ==========================================================================
   V9 – Hinweise, damit niemand die Interaktion übersieht
   ========================================================================== */
.hint-pill{
  display:inline-flex; align-items:center; gap:.4rem; flex:none;
  padding:.22rem .6rem .22rem .5rem; border-radius:99px;
  background:rgba(93,107,76,.12); color:var(--olive);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.hint-dot{
  width:.45rem; height:.45rem; border-radius:50%; background:var(--olive); flex:none;
  animation:hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.6) } }
@media (prefers-reduced-motion:reduce){ .hint-dot{ animation:none; } }

.explorer-hint{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  flex-wrap:wrap; text-align:left; max-width:60ch; margin-inline:auto;
}
.explorer-hint strong{ color:var(--ink); }

/* Der erste Punkt meldet sich kurz zu Wort */
.explorer.is-hinting .hotspot:first-child .dot{
  transform:scale(1.3); background:var(--olive); color:#fff; border-color:rgba(255,255,255,.9);
}
.explorer.is-hinting .hotspot:first-child .tip{
  opacity:1; transform:translate(-50%,-110%);
}
.explorer.is-hinting .hotspot:first-child .tip::after{
  content:" · antippen"; opacity:.65;
}
.explorer.is-hinting .hotspot .dot::before{ animation-duration:1.2s; }

/* ---------- Ausstattung: echte Muster statt Zoom-Effekt -------------------- */
.material-stage-visual.is-tiles{ background:var(--sand); }
.ms-tiles{
  position:absolute; inset:0; padding:1.1rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-content:center;
}
.material-stage-visual.is-tiles:has(.ms-tile:nth-child(2):last-child) .ms-tiles{ grid-template-columns:1fr 1fr; }
.ms-tile{
  position:relative; padding:0; border:1px solid rgba(29,35,33,.1); background:#fff;
  border-radius:var(--radius); overflow:hidden; cursor:zoom-in; text-align:left;
  display:flex; flex-direction:column; transition:border-color .25s, transform .25s, box-shadow .25s;
}
.ms-tile:hover{ border-color:var(--olive); transform:translateY(-2px); box-shadow:0 6px 18px rgba(29,35,33,.12); }
.ms-tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ms-tile span{ padding:.5rem .6rem .55rem; display:block; }
.ms-tile strong{ display:block; font-size:.78rem; color:var(--ink); font-weight:600; }
.ms-tile small{ display:block; font-size:.68rem; color:var(--muted); margin-top:.1rem; }
.ms-hint{
  position:absolute; right:1.1rem; bottom:.45rem; margin:0;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.material-demo-btn{
  display:inline-flex; align-items:center; gap:.45rem;
}
.material-demo-btn::after{ content:"→"; transition:transform .25s var(--ease); }
.material-demo-btn:hover::after{ transform:translateX(3px); }
@media (max-width:520px){ .ms-tiles{ grid-template-columns:1fr 1fr; gap:.5rem; padding:.7rem; } }

/* Die Muster-Kacheln dürfen nicht von der alten Bildregel überlagert werden.
   Seitenverhältnis 4:3 – die Vorschaubilder (…-tile.webp) sind genau so
   beschnitten, dadurch wirkt keine Kachel gestaucht oder angeschnitten. */
.material-stage-visual .ms-tile img{
  position:static; inset:auto; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; transform:none;
}
/* Die Kacheln werden mittig gesetzt statt auf volle Höhe gezogen – sonst
   klebt das Bild oben und darunter steht ein leeres Feld. */
.ms-tiles{ align-content:center; justify-content:center; padding:1rem 1rem 2rem; }
.ms-tile{ min-height:0; align-self:center; width:100%; }
.ms-tile span{ margin-top:0; }
/* Nur zwei Muster: nicht über die halbe Bühne hinaus aufblasen */
.material-stage-visual.is-tiles:has(.ms-tile:nth-child(2):last-child) .ms-tiles{
  grid-template-columns:repeat(2, minmax(0, 15rem));
}

/* ---------- Vergleich sichtbarer machen ----------------------------------- */
.tip-line{
  display:flex; align-items:flex-start; gap:.7rem; flex-wrap:wrap;
  margin:-.6rem 0 1.6rem; font-size:.84rem; line-height:1.6; color:var(--muted); max-width:70ch;
}
.tip-line b{ color:var(--olive); font-weight:600; }

.compare-drawer{ position:sticky; bottom:5.4rem; z-index:20; box-shadow:0 6px 24px rgba(29,35,33,.14); }
@media (max-width:720px){ .compare-drawer{ bottom:6.4rem; } }
.compare-panel{
  margin-top:1.4rem; border:1px solid var(--stone); border-radius:var(--radius);
  background:var(--paper); padding:1.4rem 1.5rem 1.5rem;
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.compare-panel.is-flash{
  border-color:var(--olive); box-shadow:0 0 0 4px rgba(93,107,76,.14);
}
.compare-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.compare-head h3{ margin:0; font-size:1.25rem; }
.compare-close{
  border:1px solid var(--stone-deep); background:none; cursor:pointer;
  padding:.35rem .8rem; border-radius:var(--radius);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:border-color .25s, color .25s;
}
.compare-close:hover{ border-color:var(--olive); color:var(--olive); }
.compare-scroll{ overflow-x:auto; }
.compare-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  flex-wrap:wrap; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--stone);
}
.compare-foot .micro{ margin:0; max-width:48ch; }

/* ---------- Vermarktungsstart im Hero ------------------------------------- */
.hero-flag{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem;
  padding:.36rem .85rem .36rem .4rem; border-radius:99px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);
  font-size:.74rem; letter-spacing:.06em; color:rgba(255,255,255,.92);
}
.hero-flag span{
  padding:.2rem .6rem; border-radius:99px; background:var(--brass); color:#fff;
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; font-weight:600;
}
@media (max-width:700px){ .hero-flag{ font-size:.68rem; margin-bottom:.75rem; } }

/* ==========================================================================
   V9 – Lage: „In Reichweite" mit Zahlen statt Fülltext
   ========================================================================== */
.proximity-panel .proximity-filters{ margin:1.2rem 0 1.4rem; }
.proximity-selected{
  padding:1.15rem 1.25rem 1.2rem; border-radius:var(--radius);
  background:var(--paper); border:1px solid var(--stone);
  box-shadow:0 2px 14px rgba(29,35,33,.05);
}
.ps-kicker{
  margin:0 0 .3rem; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--olive);
}
.ps-name{
  display:block; font-family:var(--display); font-size:1.5rem; line-height:1.15;
  color:var(--ink); margin-bottom:.9rem;
}
.ps-metrics{ display:flex; flex-wrap:wrap; gap:0; }
.ps-metrics > div{
  flex:1 1 auto; min-width:5.5rem; padding-right:1rem;
  border-left:1px solid var(--stone); padding-left:1rem;
}
.ps-metrics > div:first-child{ border-left:0; padding-left:0; }
.ps-metrics b{
  display:block; font-size:1.02rem; color:var(--ink); font-weight:600;
  font-variant-numeric:lining-nums;
}
.ps-metrics small{
  display:block; font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-top:.15rem;
}

.proximity-list{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:1px; }
.pl-item{
  width:100%; display:grid; grid-template-columns:minmax(6.5rem,auto) 1fr auto;
  align-items:center; gap:.85rem; padding:.55rem .6rem;
  background:none; border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-align:left; transition:background .22s, border-color .22s;
}
.pl-item:hover{ background:var(--paper); border-color:var(--stone); }
.pl-item.is-active{ background:var(--paper); border-color:var(--olive); }
.pl-name{ font-size:.84rem; color:var(--ink); }
.pl-item.is-active .pl-name{ font-weight:600; }
.pl-bar{ height:3px; border-radius:3px; background:var(--stone); overflow:hidden; }
.pl-bar i{
  display:block; height:100%; width:var(--w,20%); border-radius:3px;
  background:linear-gradient(90deg,var(--olive),var(--brass));
  transform-origin:left; animation:plGrow .7s var(--ease) both;
}
@keyframes plGrow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.pl-dist{
  font-size:.78rem; color:var(--muted); white-space:nowrap;
  font-variant-numeric:lining-nums;
}
.pl-item.is-active .pl-dist{ color:var(--brass); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .pl-bar i{ animation:none; } }
@media (max-width:520px){
  .pl-item{ grid-template-columns:1fr auto; gap:.5rem .7rem; }
  .pl-bar{ grid-column:1/-1; order:3; }
}

/* Galerie-Einstieg in der Slider-Zeile */
.hero-gallery-link{
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:0; padding:.2rem 0; cursor:pointer;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.3);
  transition:color .25s, border-color .25s;
}
.hero-gallery-link:hover{ color:#fff; border-color:#fff; }
.hero-gallery-link span{ transition:transform .25s var(--ease); }
.hero-gallery-link:hover span{ transform:translateX(3px); }
.tabpanel .tip-line{ margin-top:-.4rem; }

/* Lage: Radar etwas flacher, Ringe leben leicht */
.proximity-stage{ min-height:0; aspect-ratio:1/.86; }
@media (max-width:980px){ .proximity-stage{ min-height:0; aspect-ratio:1/.9; } }
.proximity-rings span{ animation:ringBreathe 5s ease-in-out infinite; }
.proximity-rings span:nth-child(2){ animation-delay:.7s; }
.proximity-rings span:nth-child(3){ animation-delay:1.4s; }
@keyframes ringBreathe{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.035); }
}
@media (prefers-reduced-motion:reduce){ .proximity-rings span{ animation:none; } }

/* ==========================================================================
   V10 – Baufortschritt: jeder Schritt lädt einzeln
   ========================================================================== */
.pg-line{ display:none; }
.progress-block.is-in .pm-fill{ transition-duration:2.4s; }

@media (min-width:760px){
  .pg-step:not(:last-child)::after{ display:none; }
  .pg-line{
    display:block; position:absolute; left:21px; top:6px; right:1.6rem; height:3px;
    border-radius:3px; background:var(--stone); overflow:hidden;
  }
  .pg-step:last-child .pg-line{ display:none; }
  .pg-line i{
    display:block; height:100%; width:0; border-radius:3px;
    background:var(--olive);
    transition:width 1.1s cubic-bezier(.25,.8,.3,1);
  }
  .pg-step.is-now .pg-line i{ background:linear-gradient(90deg,var(--olive),var(--brass)); }
  .pg-step.is-filled .pg-line i{ width:var(--pf,0%); }
  /* Solange ein Schritt läuft, wandert ein Lichtpunkt über seinen Balken */
  .pg-step.is-now .pg-line::after{
    content:""; position:absolute; inset:0; border-radius:3px;
    background:linear-gradient(90deg,rgba(168,118,62,0) 0%,rgba(168,118,62,.55) 50%,rgba(168,118,62,0) 100%);
    background-size:60px 100%; background-repeat:no-repeat;
    animation:pgRun 1.9s linear infinite;
  }
  @keyframes pgRun{ from{ background-position:-70px 0 } to{ background-position:calc(100% + 70px) 0 } }
}

/* Der Haken zeichnet sich beim Laden ein */
.pg-step.is-done .pg-mark::before{ opacity:0; transform:translateY(-1px) rotate(45deg) scale(.5); }
.pg-step.is-done.is-filled .pg-mark::before{
  opacity:1; transform:translateY(-1px) rotate(45deg) scale(1);
  transition:opacity .3s ease .1s, transform .35s cubic-bezier(.2,1.5,.4,1) .1s;
}
.pg-step.is-done .pg-mark{ background:var(--stone); border-color:var(--stone-deep); transition:background .4s ease, border-color .4s ease; }
.pg-step.is-done.is-filled .pg-mark{ background:var(--olive); border-color:var(--olive); }
.pg-step.is-now .pg-mark::before{ opacity:0; }
.pg-step.is-now.is-filled .pg-mark::before{ opacity:1; transition:opacity .4s ease; }
@media (prefers-reduced-motion:reduce){
  .pg-line i{ transition:none; }
  .pg-step.is-now .pg-line::after{ animation:none; }
}

/* ==========================================================================
   V10 – Große Handlungshinweise
   ========================================================================== */
.action-hint{
  display:flex; align-items:center; gap:1.1rem;
  max-width:64rem; margin:0 auto 1.6rem; padding:1.05rem 1.4rem;
  background:linear-gradient(100deg, rgba(93,107,76,.10), rgba(168,118,62,.08));
  border:1px solid rgba(93,107,76,.24); border-radius:var(--radius);
}
.ah-icon{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--olive);
  box-shadow:0 4px 14px rgba(93,107,76,.32);
  animation:ahTap 2.6s ease-in-out infinite;
}
@keyframes ahTap{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  12%{ transform:translateY(-4px) rotate(-6deg) }
  24%{ transform:translateY(0) rotate(0deg) }
  36%{ transform:translateY(-2px) rotate(-3deg) }
  48%{ transform:translateY(0) rotate(0deg) }
}
.ah-text{ font-size:.95rem; line-height:1.6; color:var(--muted); }
.ah-text strong{ display:block; font-size:1.06rem; color:var(--ink); margin-bottom:.15rem; }
.ah-text b{ color:var(--olive); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .ah-icon{ animation:none; } }
@media (max-width:640px){
  .action-hint{ gap:.85rem; padding:.9rem 1rem; }
  .ah-icon{ width:38px; height:38px; }
  .ah-text{ font-size:.86rem; }
  .ah-text strong{ font-size:.96rem; }
}

/* Die Punkte selbst deutlicher: fester Ring + kräftigerer Puls */
.hotspot .dot{ box-shadow:0 3px 14px rgba(0,0,0,.34), 0 0 0 3px rgba(93,107,76,.28); }
.hotspot:hover .dot,.hotspot:focus-visible .dot,.hotspot.is-open .dot{
  box-shadow:0 3px 16px rgba(0,0,0,.4), 0 0 0 5px rgba(93,107,76,.34);
}

/* ==========================================================================
   V10 – Objektliste: eine Zeile je Einheit
   ========================================================================== */
.unit-cards{ display:grid; grid-template-columns:1fr; gap:.6rem; }
.unit-row{
  display:grid; gap:.9rem 1.6rem; align-items:center;
  grid-template-columns:minmax(9.5rem,13rem) 1fr minmax(11rem,14rem);
  padding:1.15rem 1.3rem; background:var(--paper);
  border:1px solid var(--stone); border-radius:var(--radius);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.unit-row:hover{ border-color:var(--olive); box-shadow:0 6px 20px rgba(29,35,33,.09); transform:translateY(-1px); }
.unit-row.is-taken{ opacity:.62; }

.ur-id{ display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; }
.ur-name{ font-family:var(--display); font-size:1.4rem; line-height:1.05; color:var(--ink); }
.ur-type{ font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.ur-id .status{ margin-top:.25rem; }

.ur-facts{ margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4rem 1.1rem; }
.ur-facts div{ min-width:0; }
.ur-facts dt{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ur-facts dd{ margin:0; font-size:.92rem; color:var(--ink); font-variant-numeric:lining-nums; }

.ur-end{ display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; text-align:right; }
.ur-price{ margin:0; font-size:1rem; font-weight:600; color:var(--ink); }
.ur-price.has-price{ font-family:var(--display); font-size:1.3rem; font-weight:400; }
.ur-price small{ display:block; font-size:.68rem; font-weight:400; color:var(--muted); margin-top:.15rem; }
.ur-actions{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }

.ur-more{ grid-column:1/-1; border-top:1px solid var(--stone); margin-top:.15rem; padding-top:.5rem; }
.ur-more > summary{
  list-style:none; cursor:pointer; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem;
}
.ur-more > summary::-webkit-details-marker{ display:none; }
.ur-more > summary::after{ content:"+"; font-size:.95rem; line-height:1; }
.ur-more[open] > summary::after{ content:"–"; }
.ur-more > summary:hover{ color:var(--olive); }
.ur-highlights{ margin:.7rem 0 .4rem; padding-left:1.05rem; font-size:.85rem; color:var(--muted); }
.ur-highlights li{ margin-bottom:.2rem; }

@media (max-width:1000px){
  .unit-row{ grid-template-columns:1fr; gap:.85rem; }
  .ur-facts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ur-end{ align-items:flex-start; text-align:left; flex-direction:row;
           justify-content:space-between; width:100%; flex-wrap:wrap; }
  .ur-actions{ justify-content:flex-start; }
}
@media (max-width:520px){ .ur-facts{ grid-template-columns:1fr 1fr; } }
.ur-facts dd{ line-height:1.35; }
.ur-facts div:last-child dd{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:.82rem;
}

/* ==========================================================================
   V10 – Beschriftetes Luftbild, anklickbar
   ========================================================================== */
.site-map{ position:relative; }
.site-map img{ display:block; width:100%; height:auto; border-radius:var(--radius); }
.sm-ping{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; pointer-events:none;
}
.sm-ping::before,.sm-ping::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(240,200,120,.95);
  animation:smPing 2.6s cubic-bezier(.2,.7,.4,1) infinite;
}
.sm-ping::after{ animation-delay:1.3s; }
.sm-ping-2::before{ animation-delay:.65s; }
.sm-ping-2::after{ animation-delay:1.95s; }
@keyframes smPing{
  0%{ transform:scale(.35); opacity:0 }
  18%{ opacity:.95 }
  100%{ transform:scale(1.5); opacity:0 }
}
.sm-hit{
  position:absolute; padding:0; border:1.5px solid transparent; border-radius:6px;
  background:none; cursor:pointer; display:grid; place-items:end center;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.sm-hit span{
  transform:translateY(120%); opacity:0; pointer-events:none;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:#fff; background:var(--brass); padding:.16rem .5rem; border-radius:99px;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.sm-hit:hover,.sm-hit:focus-visible{
  border-color:rgba(240,200,120,.9); background:rgba(240,200,120,.14); outline:none;
}
.sm-hit:hover span,.sm-hit:focus-visible span{ opacity:1; transform:translateY(140%); }
.sm-caption{
  margin-top:.8rem; font-size:.78rem; color:var(--muted);
  display:flex; align-items:center; gap:.45rem;
}
.sm-caption::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--brass);
  animation:hintPulse 1.8s ease-in-out infinite; flex:none;
}
@media (prefers-reduced-motion:reduce){
  .sm-ping::before,.sm-ping::after,.sm-caption::before{ animation:none; }
  .sm-ping::before{ opacity:.9; }
}

/* ==========================================================================
   V10 – Lage: Umkreisanalyse und Google-Maps-Karte nebeneinander
   ========================================================================== */
.loc-banner{ margin:0 0 2.2rem; }
.loc-banner img{ width:100%; height:auto; display:block; border-radius:var(--radius); }
.loc-banner figcaption{ margin-top:.7rem; }

.loc-split{ display:grid; gap:1.4rem; align-items:start; }
@media (min-width:1000px){ .loc-split{ grid-template-columns:1.05fr .95fr; gap:1.6rem; } }

.loc-analysis,
.loc-map{
  background:var(--paper); border:1px solid var(--stone);
  border-radius:var(--radius); padding:1.6rem 1.7rem 1.7rem;
}
.loc-map{ display:flex; flex-direction:column; gap:1.2rem; padding-bottom:1.7rem; }

.la-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.la-head h3{ margin:.1rem 0 0; font-size:1.55rem; }
.la-summary{
  margin:0; padding:.4rem .8rem; border-radius:99px;
  background:rgba(93,107,76,.1); color:var(--olive);
  font-size:.76rem; white-space:nowrap;
}
.la-summary strong{ font-size:.95rem; font-variant-numeric:lining-nums; }
.la-copy{ margin:.7rem 0 0; font-size:.9rem; color:var(--muted); }
.loc-analysis .proximity-filters{ margin:1.1rem 0 1.2rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.loc-analysis .proximity-selected{ background:var(--sand); border-color:var(--stone-deep); }
.loc-analysis .micro{ margin-top:1.1rem; }

.lm-address{ border-bottom:1px solid var(--stone); padding-bottom:1.2rem; }
.lm-street{ margin:.35rem 0 1rem; }
.lm-street strong{ display:block; font-family:var(--display); font-size:1.55rem; color:var(--ink); line-height:1.15; }
.lm-street span{ display:block; font-size:.86rem; color:var(--muted); margin-top:.15rem; }
.lm-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.loc-map .map-consent{
  flex:1 1 auto; display:grid; place-items:center; min-height:19rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(93,107,76,.10), transparent 58%),
    repeating-linear-gradient(0deg, rgba(29,35,33,.05) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(29,35,33,.05) 0 1px, transparent 1px 42px),
    var(--sand);
  border:1px dashed var(--stone-deep); border-radius:var(--radius); padding:1.6rem;
}
.map-consent-inner{ text-align:center; max-width:26rem; }
.mc-pin{
  display:grid; place-items:center; width:50px; height:50px; margin:0 auto .8rem;
  border-radius:50%; background:var(--olive); color:#fff;
  box-shadow:0 6px 18px rgba(93,107,76,.3);
  animation:mcDrop 2.8s ease-in-out infinite;
}
@keyframes mcDrop{ 0%,100%{ transform:translateY(0) } 45%{ transform:translateY(-5px) } }
.map-consent-inner h4{ margin:0 0 .4rem; font-size:1.12rem; }
.map-consent-inner p{ font-size:.84rem; color:var(--muted); margin:0 0 1rem; }
.map-consent-inner .micro{ margin-top:.8rem; }
.loc-map .map-frame{ flex:1 1 auto; min-height:19rem; border-radius:var(--radius); overflow:hidden; }
.loc-map .map-frame iframe{ width:100%; height:100%; min-height:19rem; border:0; display:block; }

.loc-facts{ display:grid; gap:1.6rem; margin-top:2.2rem; }
@media (min-width:820px){ .loc-facts{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.loc-facts h3{ font-size:1.05rem; margin:0 0 .45rem; }
.loc-facts p{ font-size:.88rem; color:var(--muted); margin:0; }
@media (prefers-reduced-motion:reduce){ .mc-pin{ animation:none; } }
.loc-map .map-consent[hidden], .map-consent[hidden]{ display:none !important; }

/* ---------- Vergleich: unübersehbar ---------------------------------------- */
.finder-unit-check{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--olive); color:var(--olive);
  font-size:1rem; font-weight:600; line-height:1;
  box-shadow:0 2px 8px rgba(29,35,33,.12);
  transition:background .22s, color .22s, transform .22s;
}
.finder-unit:hover .finder-unit-check{ transform:scale(1.12); }
.finder-unit-check.is-on{ background:var(--olive); color:#fff; }
#compareHint{ display:block; font-size:.74rem; color:var(--muted); margin-top:.2rem; font-weight:400; }
#openCompare.is-ready{ animation:cmpReady 2.2s ease-in-out infinite; }
@keyframes cmpReady{
  0%,100%{ box-shadow:0 0 0 0 rgba(93,107,76,.45) }
  50%{ box-shadow:0 0 0 7px rgba(93,107,76,0) }
}
@media (prefers-reduced-motion:reduce){ #openCompare.is-ready{ animation:none; } }

/* ==========================================================================
   V10 – „Passt zu Ihnen?"-Finder
   ========================================================================== */
.matcher{
  margin:0 0 2rem; padding:1.6rem 1.7rem 1.7rem;
  background:var(--paper); border:1px solid var(--stone); border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(29,35,33,.05);
}
.mt-head{ margin-bottom:1.3rem; }
.mt-head h3{ margin:.15rem 0 0; font-size:1.5rem; }
.mt-steps{ display:grid; gap:1.1rem; }
@media (min-width:900px){ .mt-steps{ grid-template-columns:repeat(3,1fr); gap:1.6rem; } }
.mt-step{ border:0; padding:0; margin:0; min-width:0; }
.mt-step legend{
  display:flex; align-items:center; gap:.55rem; padding:0; margin-bottom:.6rem;
  font-size:.76rem; letter-spacing:.06em; color:var(--muted);
}
.mt-num{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--sand); color:var(--muted); font-size:.68rem; font-weight:600; flex:none;
  transition:background .25s, color .25s;
}
.mt-step.is-done .mt-num{ background:var(--olive); color:#fff; }
.mt-opts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.mt-opt{
  padding:.5rem .85rem; border:1px solid var(--stone-deep); border-radius:99px;
  background:none; cursor:pointer; font-size:.82rem; color:var(--ink);
  transition:background .22s, border-color .22s, color .22s;
}
.mt-opt:hover{ border-color:var(--olive); }
.mt-opt.is-active{ background:var(--olive); border-color:var(--olive); color:#fff; }

.mt-result{ margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--stone); }
.mt-open{ margin:0; font-size:.88rem; color:var(--muted); }
.mt-open strong{ color:var(--olive); }
.mt-found{ margin:0 0 .9rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.mt-hits{ display:grid; gap:.7rem; }
@media (min-width:760px){ .mt-hits{ grid-template-columns:repeat(3,1fr); } }
.mt-hit{
  position:relative; padding:1rem 1.1rem 1.1rem; border:1px solid var(--stone);
  border-radius:var(--radius); background:var(--sand);
  display:flex; flex-direction:column; gap:.2rem;
  animation:mtIn .45s var(--ease) both;
}
.mt-hit:nth-child(2){ animation-delay:.07s } .mt-hit:nth-child(3){ animation-delay:.14s }
@keyframes mtIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.mt-hit.is-top{ background:#fff; border-color:var(--olive); box-shadow:0 6px 20px rgba(93,107,76,.13); }
.mt-badge{
  position:absolute; top:-.6rem; left:1rem; padding:.18rem .55rem; border-radius:99px;
  background:var(--olive); color:#fff; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
}
.mt-hit strong{ font-family:var(--display); font-size:1.2rem; color:var(--ink); }
.mt-hit span{ font-size:.84rem; color:var(--ink); }
.mt-hit small{ font-size:.76rem; color:var(--muted); }
.mt-hit-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.7rem; }
@media (prefers-reduced-motion:reduce){ .mt-hit{ animation:none; } }

/* Wunschzeit für den Rückruf */
.field-slot{ margin-top:.2rem; }
.field-label-inline{
  display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem;
}
.slot-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.slot-chip{
  padding:.42rem .8rem; border:1px solid var(--stone-deep); border-radius:99px;
  background:none; cursor:pointer; font-size:.8rem; color:var(--ink);
  transition:background .22s, border-color .22s, color .22s;
}
.slot-chip:hover{ border-color:var(--olive); }
.slot-chip.is-active{ background:var(--olive); border-color:var(--olive); color:#fff; }

/* ---------- Baustellen-Tagebuch ------------------------------------------- */
.diary-track{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; }
@media (min-width:820px){ .diary-track{ grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); } }
.diary-item{
  background:var(--paper); border:1px solid var(--stone); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.diary-item figure{ margin:0; }
.diary-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.di-body{ padding:1.1rem 1.2rem 1.3rem; }
.di-date{ margin:0 0 .3rem; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brass); }
.di-body h3{ margin:0 0 .4rem; font-size:1.12rem; }
.di-body p{ margin:0; font-size:.86rem; color:var(--muted); }

/* ==========================================================================
   V11 – Kopfzeile und Startbild aufgeräumt
   ========================================================================== */
/* Über dem Bild braucht die Navigation einen Schleier, sonst konkurriert sie
   mit dem Motiv und wirkt unruhig. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,22,20,.55) 0%, rgba(18,22,20,.28) 55%, rgba(18,22,20,0) 100%);
  opacity:1; transition:opacity .35s var(--ease);
}
.site-header.is-solid::before{ opacity:0; }
.site-header{ position:fixed; }

/* Etwas mehr Luft zwischen Navigation und Startbild-Inhalt */
.hero-inner{ padding-top:clamp(4.5rem,9vw,7rem); }
.hero-flag{ margin-bottom:1.15rem; }
.hero-inner .eyebrow{ margin-bottom:1rem; }

/* Bildunterschrift blendet mit dem Bild */
.hero-caption{ transition:opacity .7s var(--ease); }
.hero-caption.is-out{ opacity:0; }

/* Auswahl-Leiste soll nie das Titelbild überdecken */
.selection-bar[hidden]{ display:none !important; }

/* ---------- Schwebende Leisten stapeln sich nicht mehr -------------------- */
.to-top{ transition:opacity .3s var(--ease), transform .3s var(--ease), bottom .3s var(--ease); }
.has-selbar .to-top{ bottom:6.2rem; }
@media (max-width:720px){ .has-selbar .to-top{ bottom:8.5rem; } }
@media (max-width:520px){ .has-selbar .to-top{ bottom:10.5rem; } }
.has-selbar .compare-drawer{ bottom:7.4rem; }
@media (max-width:720px){ .has-selbar .compare-drawer{ bottom:9.6rem; } }
@media (max-width:520px){ .has-selbar .compare-drawer{ bottom:11.6rem; } }
/* Der Zurück-nach-oben-Knopf weicht auch der Vergleichsleiste aus */
.compare-drawer{ padding-right:4.2rem; }
@media (min-width:1100px){ .compare-drawer{ padding-right:1.2rem; } }

/* ==========================================================================
   V11 – Preisliste als echte Tabelle
   ========================================================================== */
.unit-table-wrap{
  background:var(--paper); border:1px solid var(--stone); border-radius:var(--radius);
  padding:1.5rem 1.6rem 1.6rem;
}
.pl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.pl-head h3{ margin:.15rem 0 .35rem; font-size:1.5rem; }
.pl-sub{ margin:0; font-size:.8rem; color:var(--muted); }
.pl-head-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.price-table{ width:100%; border-collapse:collapse; min-width:62rem; font-variant-numeric:lining-nums tabular-nums; }
.price-table thead th{
  position:sticky; top:0; z-index:2; background:var(--paper);
  padding:.55rem .6rem; text-align:left; white-space:nowrap;
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  border-bottom:1.5px solid var(--stone-deep); font-weight:600;
}
.price-table th.num, .price-table td.num{ text-align:right; }
.price-table tbody td, .price-table tbody th{
  padding:.6rem .6rem; border-bottom:1px solid var(--stone);
  font-size:.84rem; color:var(--ink); vertical-align:top; text-align:left; font-weight:400;
}
.price-table tbody td.num{ text-align:right; white-space:nowrap; }
.price-table td.strong{ font-weight:600; }
.price-table td.price{ font-weight:600; white-space:nowrap; }
.price-table .pl-unit strong{ display:block; font-size:.9rem; font-weight:600; white-space:nowrap; }
.price-table .pl-unit small{ display:block; font-size:.7rem; color:var(--muted); margin-top:.1rem; line-height:1.3; }
.price-table .pl-none{ color:var(--stone-deep); }
.price-table tbody tr:hover td, .price-table tbody tr:hover th{ background:rgba(93,107,76,.045); }
.price-table tr.is-taken td, .price-table tr.is-taken th{ opacity:.55; }

.price-table .pl-group th{
  padding:1.1rem .6rem .45rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--olive); border-bottom:1px solid var(--olive); font-weight:600; background:none;
}
.price-table .pl-group span{ color:var(--muted); letter-spacing:.04em; text-transform:none; font-weight:400; }
.price-table .pl-sum th, .price-table .pl-sum td{
  background:var(--sand); font-weight:600; font-size:.82rem;
  border-bottom:1.5px solid var(--stone-deep);
}
.price-table .status{ white-space:nowrap; }
#priceTableNote{ margin-top:1.1rem; max-width:none; }

@media (max-width:720px){
  .unit-table-wrap{ padding:1.1rem 1rem 1.2rem; }
  .pl-head h3{ font-size:1.25rem; }
}

/* Druckansicht: nur die Preisliste */
@media print{
  body.is-printing-prices > *:not(main){ display:none !important; }
  body.is-printing-prices main > section:not(#einheiten){ display:none !important; }
  body.is-printing-prices #einheiten .tabbar,
  body.is-printing-prices #einheiten .matcher,
  body.is-printing-prices #einheiten .tab-lead,
  body.is-printing-prices #einheiten .tip-line,
  body.is-printing-prices #einheiten .unit-toolbar,
  body.is-printing-prices #einheiten .availability-bar,
  body.is-printing-prices #einheiten .price-info,
  body.is-printing-prices #einheiten .result-count,
  body.is-printing-prices .pl-head-actions,
  body.is-printing-prices .compare-drawer,
  body.is-printing-prices .compare-panel,
  body.is-printing-prices .selection-bar,
  body.is-printing-prices .to-top{ display:none !important; }
  body.is-printing-prices #tabWohnanlage,
  body.is-printing-prices #tabDoppelhaus{ display:none !important; }
  body.is-printing-prices #tabPreise{ display:block !important; }
  body.is-printing-prices #unitCards{ display:none !important; }
  body.is-printing-prices #unitTableWrap{ display:block !important; border:0; padding:0; }
  body.is-printing-prices .price-table{ min-width:0; font-size:8.5pt; }
  body.is-printing-prices .price-table thead th{ position:static; }
  @page{ size:A4 landscape; margin:12mm; }
}
.price-table{ min-width:52rem; }
.price-table td.nowrap{ white-space:nowrap; }
.price-table thead th{ padding-top:.4rem; }

/* Die Preisliste darf auf großen Bildschirmen die volle Breite nutzen,
   damit alle zwölf Spalten ohne Scrollen sichtbar sind. */
@media (min-width:1150px){
  #unitTableWrap{
    width:min(calc(100vw - 3rem), 1440px);
    margin-left:calc((100% - min(100vw - 3rem, 1440px)) / 2);
  }
  .price-table tbody td, .price-table tbody th{ padding:.5rem .5rem; font-size:.8rem; }
  .price-table thead th{ padding:.5rem .5rem; font-size:.62rem; }
  .price-table .pl-unit strong{ font-size:.85rem; }
}

/* Auf schmalen Geräten scrollt die Preisliste seitlich – das sagen wir dazu. */
.pl-scroll{ position:relative; }
.pl-hint{
  display:none; margin:0 0 .7rem; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
@media (max-width:1149px){ .pl-hint{ display:block; } }

/* ==========================================================================
   Sicherheitsnetz: hidden bedeutet unsichtbar.
   Mehrere Bausteine (Vergleichsleiste, Video, Tagebuch, Tabelle) werden über
   das hidden-Attribut gesteuert; einzelne display-Regeln haben das vorher
   überstimmt und Elemente sichtbar gelassen, die leer waren.
   ========================================================================== */
[hidden]{ display:none !important; }

/* Beim seitlichen Scrollen bleibt die Einheit stehen */
@media (max-width:1149px){
  .price-table th.pl-unit{
    position:sticky; left:0; z-index:1; background:var(--paper);
    box-shadow:1px 0 0 var(--stone);
  }
  .price-table tbody tr:hover th.pl-unit{ background:#F6F2EA; }
  .price-table .pl-sum th{ position:sticky; left:0; z-index:1; background:var(--sand); box-shadow:1px 0 0 var(--stone-deep); }
  .price-table .pl-group th{ position:sticky; left:0; z-index:1; background:var(--paper); }
}

/* ==========================================================================
   FEHLER BEHOBEN: dunkler Reiter „Bauqualität"
   Der Block hatte früher die Klasse .section-dark und damit helle Schrift.
   Als Reiter fehlten diese Regeln – Überschriften standen dunkel auf dunkel.
   ========================================================================== */
.tabpanel.is-dark h2,
.tabpanel.is-dark h3,
.tabpanel.is-dark h4{ color:#fff; }
.tabpanel.is-dark .eyebrow{ color:var(--brass-soft, #E0C08A); }
.tabpanel.is-dark p{ color:rgba(255,255,255,.78); }
.tabpanel.is-dark .lead{ color:rgba(255,255,255,.74); }
.tabpanel.is-dark .micro{ color:rgba(255,255,255,.48); }
.tabpanel.is-dark strong{ color:#fff; }
.tabpanel.is-dark .chip{ border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.8); background:none; }
.tabpanel.is-dark .chip.is-active{ background:var(--olive-light,#7A8B5E); border-color:var(--olive-light,#7A8B5E); color:#fff; }
.tabpanel.is-dark .btn-outline{ --btn-fg:#fff; --btn-bd:rgba(255,255,255,.3); }
.tabpanel.is-dark .btn-outline:hover{ --btn-bd:#fff; --btn-bg:rgba(255,255,255,.09); }
.tabpanel.is-dark .quality-card{ border-color:rgba(255,255,255,.16); }
.tabpanel.is-dark .quality-num{ color:var(--brass-soft, #E0C08A); }
.tabpanel.is-dark a:not(.btn){ color:#fff; }

/* ==========================================================================
   FEHLER BEHOBEN: mobiles Menü
   Der Aufruf-Knopf hatte dunkle Schrift auf dunklem Grün, und die Kopfzeile
   behielt über dem hellen Menü ihren dunklen Schleier.
   ========================================================================== */
.mobile-nav .btn-primary{ color:#fff; }
.mobile-nav .btn-primary:hover{ color:#fff; }
body.nav-open .site-header::before{ opacity:0; }
body.nav-open .site-header{
  background:var(--paper); border-bottom:1px solid var(--stone);
}
body.nav-open .site-header .brand-name,
body.nav-open .site-header .brand-sub,
body.nav-open .site-header .brand-mark{ color:var(--ink); }
body.nav-open .header-actions .btn-primary{ color:#fff; }
/* Solange die Vergleichsleiste offen ist, tritt der Nach-oben-Knopf zurück –
   sonst liegen zwei runde Elemente übereinander. */
body.has-compare .to-top{ opacity:0 !important; pointer-events:none !important; }
@media (min-width:1100px){ body.has-compare .to-top{ opacity:1 !important; pointer-events:auto !important; } }

/* ==========================================================================
   V12 – Grundrisse als Liste mit Planvorschau
   ========================================================================== */
.plan-list-wrap{
  background:var(--paper); border:1px solid var(--stone); border-radius:var(--radius);
  padding:1.5rem 1.6rem 1.6rem;
}
.plan-list-wrap .plan-filters{ margin:0 0 1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.plan-table{ width:100%; border-collapse:collapse; min-width:56rem; }
.plan-table thead th{
  position:sticky; top:0; z-index:2; background:var(--paper);
  padding:.5rem .6rem; text-align:left; white-space:nowrap;
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  border-bottom:1.5px solid var(--stone-deep); font-weight:600;
}
.plan-table th.num, .plan-table td.num{ text-align:right; }
.plan-table tbody td, .plan-table tbody th{
  padding:.7rem .6rem; border-bottom:1px solid var(--stone);
  font-size:.84rem; color:var(--ink); vertical-align:middle; text-align:left; font-weight:400;
}
.plan-table tbody tr:hover td, .plan-table tbody tr:hover th{ background:rgba(93,107,76,.045); }
.plan-table tr.is-taken td, .plan-table tr.is-taken th{ opacity:.55; }
.plan-table .pl-unit strong{ display:block; font-size:.92rem; font-weight:600; white-space:nowrap; }
.plan-table .pl-unit small{ display:block; font-size:.7rem; color:var(--muted); margin-top:.1rem; line-height:1.3; }
.plan-table td.nowrap{ white-space:nowrap; }
.plan-table td.strong{ font-weight:600; }

/* Planvorschau */
td.pt-plan{ display:flex; gap:.4rem; align-items:center; padding-top:.6rem; padding-bottom:.6rem; }
.pt-thumb{
  position:relative; width:74px; height:54px; flex:none; padding:0; cursor:zoom-in;
  border:1px solid var(--stone); border-radius:4px; overflow:hidden; background:#fff;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.pt-thumb:hover{ border-color:var(--olive); transform:translateY(-1px); box-shadow:0 4px 12px rgba(29,35,33,.14); }
.pt-thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#fff; }
.pt-zoom{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(27,33,31,.42); color:#fff; font-size:1.1rem; line-height:1;
  opacity:0; transition:opacity .2s;
}
.pt-thumb:hover .pt-zoom, .pt-thumb:focus-visible .pt-zoom{ opacity:1; }
.pt-thumb small{
  position:absolute; left:0; bottom:0; padding:.08rem .25rem;
  background:rgba(27,33,31,.72); color:#fff; font-size:.58rem; letter-spacing:.06em;
}
.pt-none{ font-size:.78rem; color:var(--stone-deep); }

/* Downloads */
.pt-dls{ white-space:nowrap; }
.pt-dl{
  display:inline-flex; align-items:center; gap:.3rem; margin-right:.5rem;
  font-size:.78rem; color:var(--olive); border-bottom:1px solid rgba(93,107,76,.4);
  padding-bottom:.1rem; transition:color .2s, border-color .2s;
}
.pt-dl:last-child{ margin-right:0; }
.pt-dl:hover{ color:var(--olive-deep,#3E4A34); border-color:var(--olive); }
.pt-cta{ text-align:right; white-space:nowrap; }

@media (min-width:1150px){
  #details .plan-list-wrap{
    width:min(calc(100vw - 3rem), 1440px);
    margin-left:calc((100% - min(100vw - 3rem, 1440px)) / 2);
  }
}
@media (max-width:720px){
  .plan-list-wrap{ padding:1.1rem 1rem 1.2rem; }
  .pt-thumb{ width:62px; height:46px; }
}
@media (max-width:1149px){
  .plan-table th.pl-unit{
    position:sticky; left:0; z-index:1; background:var(--paper); box-shadow:1px 0 0 var(--stone);
  }
}

/* =====================================================================
   START: Text sofort sichtbar
   Der Text im Startbereich hing bisher am Scroll-Effekt (.reveal). Der
   wird erst gesetzt, wenn das Skript durchgelaufen ist – die Überschrift
   war dadurch gut eine Sekunde lang unsichtbar. Das ist schlecht für den
   ersten Eindruck und zählt bei Google als langsamer Seitenaufbau.
   Deshalb blendet der Startbereich jetzt rein über CSS ein, direkt beim
   ersten Bildaufbau, gestaffelt von oben nach unten.
   ===================================================================== */
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); }
                     to  { opacity:1; transform:none; } }

.hero .hero-inner .reveal{
  opacity:0;
  animation:heroRise .9s cubic-bezier(.22,.7,.25,1) forwards;
}
.hero .hero-inner .reveal.is-in{ opacity:1; }         /* Skript darf nichts kaputt machen */
.hero .hero-flag   { animation-delay:.05s; }
.hero .eyebrow     { animation-delay:.14s; }
.hero .hero-title  { animation-delay:.22s; }
.hero .hero-sub    { animation-delay:.34s; }
.hero .hero-actions{ animation-delay:.44s; }
.hero .hero-note   { animation-delay:.54s; }

@media (prefers-reduced-motion: reduce){
  .hero .hero-inner .reveal{ opacity:1; animation:none; transform:none; }
}

/* =====================================================================
   Detailfenster: Hinweiszeile nicht mehr über den Ablauf legen
   Die Zeile "Schematische Darstellung …" lag als absolut positionierter
   Streifen über dem unteren Rand der Bühne. Sobald der Ablauf
   (Außenluft → Wärmepumpe → …) auf schmalen Displays mehrzeilig wurde,
   schoben sich beide ineinander. Jetzt steht der Hinweis normal im Fluss.
   ===================================================================== */
.stage-visual{ padding-bottom:0; }
.stage-note{
  position:static; background:none; padding:.75rem 1rem 0;
  border-top:1px solid var(--stone); margin-top:1rem;
}
.viz-flow{ margin-bottom:.2rem; }
.flow-step{
  font-size:.86rem; line-height:1.35; letter-spacing:.01em;
  padding:.3rem .65rem; border-radius:99px;
  background:rgba(93,107,76,.10); color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.flow-step.is-active{ background:var(--olive); color:#fff; }
.flow-arrow{ align-self:center; color:var(--muted); font-size:.8rem; }

/* =====================================================================
   Beschriftung der Punkte im Bild
   Am Rand wurde der Text bisher abgeschnitten, und auf dem Handy war er
   gar nicht zu sehen (dort gibt es kein "Mouseover"). Jetzt richtet sich
   die Beschriftung am Rand nach innen aus und erscheint beim Antippen.
   ===================================================================== */
.hotspot .tip{ max-width:min(56vw, 16rem); white-space:normal; text-align:center; line-height:1.3; }
.hotspot.tip-start .tip{ left:0; transform:translate(-14%,-100%); }
.hotspot.tip-start:hover .tip,.hotspot.tip-start:focus-visible .tip,
.hotspot.tip-start.is-open .tip{ transform:translate(-14%,-110%); }
.hotspot.tip-end .tip{ left:auto; right:0; transform:translate(14%,-100%); }
.hotspot.tip-end:hover .tip,.hotspot.tip-end:focus-visible .tip,
.hotspot.tip-end.is-open .tip{ transform:translate(14%,-110%); }
.hotspot.is-open .tip{ opacity:1; }

/* =====================================================================
   Kontaktformular: freiwillige Angaben eingeklappt
   Sichtbar bleiben nur Name, E-Mail, Telefon, Nachricht und der Rückruf.
   Alles Weitere steht hinter "Angaben ergänzen" – kurze Formulare werden
   deutlich häufiger abgeschickt.
   ===================================================================== */
.form-more{ border-top:1px solid var(--stone); margin:.2rem 0 .4rem; }
.form-more > summary{
  list-style:none; cursor:pointer; padding:.85rem .2rem .85rem 1.55rem;
  position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  font-size:.83rem; letter-spacing:.02em; color:var(--ink-soft);
}
.form-more > summary::-webkit-details-marker{ display:none; }
.form-more > summary::before{
  content:""; position:absolute; left:.25rem; top:50%; width:.5rem; height:.5rem;
  border-right:1.5px solid var(--olive); border-bottom:1.5px solid var(--olive);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.form-more[open] > summary::before{ transform:translateY(-25%) rotate(225deg); }
.form-more > summary:hover{ color:var(--ink); }
.form-more > summary span{ font-weight:600; color:var(--ink); }
.form-more > summary small{ color:var(--muted); font-size:.76rem; }
.form-more-body{ padding-bottom:.4rem; }

/* Energiekennzahlen im Fuß – klein, aber lesbar (Pflichtangabe) */
.footer-energy{
  font-size:.74rem; line-height:1.65; color:var(--muted);
  margin:0 0 .5rem; padding-left:.85rem; border-left:2px solid var(--stone);
}

/* =====================================================================
   EINZELSEITE JE EINHEIT  (/einheit/top-1.html usw.)
   Erzeugt von tools/einheiten-seiten.js. Bewusst schlicht gehalten – die
   Seite soll schnell laden und in der Google-Suche sauber aussehen.
   ===================================================================== */
.unit-page{ background:var(--paper); }
.unit-page-main{ padding:7.5rem 0 4rem; max-width:1100px; }
.crumbs{ font-size:.78rem; color:var(--muted); margin-bottom:1.6rem; }
.crumbs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--stone); }
.crumbs a:hover{ color:var(--olive); }
.unit-page-head h1{ margin:.2rem 0 .5rem; font-size:clamp(2rem,5vw,3.1rem); }
.unit-page-lead{ font-size:1.05rem; color:var(--ink-soft); margin:0 0 .9rem; }
.unit-page-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin:0 0 2.2rem; }
.unit-page-price{ font-family:var(--display); font-size:1.5rem; color:var(--olive); }
.unit-page-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.6rem; align-items:start; }
@media (max-width:860px){ .unit-page-grid{ grid-template-columns:1fr; gap:1.8rem; } }
.unit-page-plan{ margin:0 0 1.4rem; }
.unit-page-plan img{ width:100%; height:auto; border:1px solid var(--stone); border-radius:var(--radius); background:#fff; }
.unit-page-plan figcaption{ font-size:.78rem; color:var(--muted); margin-top:.45rem; }
.unit-page-table{ width:100%; border-collapse:collapse; margin-bottom:1.8rem; }
.unit-page-table th,.unit-page-table td{
  text-align:left; padding:.62rem .2rem; border-bottom:1px solid var(--stone);
  font-size:.9rem; vertical-align:top;
}
.unit-page-table th{ width:38%; font-weight:500; color:var(--muted); }
.unit-page-facts h2{ font-size:1.05rem; margin:1.6rem 0 .6rem; }
.unit-page-list{ margin:0 0 1.2rem; padding-left:1.1rem; font-size:.9rem; line-height:1.75; }
.unit-page-energy{ font-size:.86rem; line-height:1.7; color:var(--ink-soft); }
.unit-page-energy small{ display:block; color:var(--muted); font-size:.74rem; margin-top:.35rem; }
.unit-page-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.6rem 0 1rem; }
.unit-page-note{ font-size:.72rem; color:var(--muted); line-height:1.6; }
.unit-page-more{ margin-top:3.5rem; border-top:1px solid var(--stone); padding-top:1.6rem; }
.unit-page-more h2{ font-size:1rem; margin:0 0 .8rem; }
.unit-page-siblings{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.unit-page-siblings li a,.unit-page-siblings li span{
  display:inline-block; padding:.35rem .8rem; border-radius:99px; font-size:.82rem;
  border:1px solid var(--stone); color:var(--ink-soft); text-decoration:none;
}
.unit-page-siblings li a:hover{ border-color:var(--olive); color:var(--olive); }
.unit-page-siblings li span{ background:var(--olive); border-color:var(--olive); color:#fff; }

/* Kopfzeile der Einheiten-Seiten: heller Hintergrund, also dunkle Schrift.
   Auf der Startseite liegt sie über dem Bild und ist deshalb hell. */
.unit-page .site-header{ position:sticky; background:var(--paper); border-bottom:1px solid var(--stone); }
.unit-page .site-header::before{ display:none; }
.unit-page .brand{ color:var(--ink); }
.unit-page .brand-name{ color:var(--ink); }
.unit-page .brand-sub{ color:var(--muted); white-space:nowrap; }
.unit-page .header-inner{ justify-content:space-between; }
.unit-page .btn-sm{ padding:.6rem 1.2rem; font-size:.74rem; }
@media (max-width:620px){
  .unit-page .brand-sub{ display:none; }
  .unit-page .unit-page-main{ padding-top:6rem; }
}

/* =====================================================================
   KAUF & SICHERHEIT  (Reiter im Abschnitt "Alles Weitere im Detail")
   Beantwortet die häufigste unausgesprochene Sorge beim Neubaukauf:
   Wann fließt welches Geld und was passiert, wenn etwas schiefgeht.
   ===================================================================== */
.safety-steps{
  list-style:none; margin:1.6rem 0 2.4rem; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
}
.safety-step{
  display:flex; gap:.85rem; align-items:flex-start;
  background:#fff; border:1px solid var(--stone); border-radius:var(--radius);
  padding:1.1rem 1.15rem;
}
.safety-num{
  flex:0 0 auto; width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--olive); color:#fff; display:grid; place-items:center;
  font-size:.82rem; font-weight:600;
}
@media (max-width:1000px){ .safety-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .safety-steps{ grid-template-columns:1fr; } }
.safety-step h3{ margin:.1rem 0 .3rem; font-size:.95rem; }
.safety-step p{ margin:0; font-size:.83rem; line-height:1.6; color:var(--ink-soft); }

.safety-split{ display:grid; grid-template-columns:1.25fr .95fr; gap:2.2rem; align-items:start; }
@media (max-width:900px){ .safety-split{ grid-template-columns:1fr; gap:1.6rem; } }
.safety-plan h3,.safety-facts h3{ font-size:1.05rem; margin:0 0 .6rem; }
.safety-plan-note{ font-size:.82rem; line-height:1.7; color:var(--muted); margin:.5rem 0 1rem; }

.rate-plan{ list-style:none; margin:0; padding:0; }
.rate-row{
  display:grid; grid-template-columns:3.1rem 5.5rem 1fr; align-items:center; gap:.7rem;
  padding:.5rem 0; border-bottom:1px solid var(--stone);
}
@media (max-width:520px){
  .rate-row{ grid-template-columns:3.1rem 1fr; }
  .rate-bar{ display:none; }
}
.rate-pct{ font-family:var(--display); font-size:1.05rem; color:var(--olive); }
.rate-bar{ height:5px; border-radius:99px; background:var(--stone); overflow:hidden; }
.rate-bar i{ display:block; height:100%; background:var(--olive); border-radius:99px; }
.rate-text{ font-size:.8rem; line-height:1.55; color:var(--ink-soft); }

.safety-facts{
  background:var(--sand); border-radius:var(--radius); padding:1.4rem 1.5rem;
}
.safety-dl{ margin:0 0 1.2rem; }
.safety-dl dt{ font-size:.8rem; font-weight:600; color:var(--ink); margin-top:.85rem; }
.safety-dl dt:first-child{ margin-top:0; }
.safety-dl dd{ margin:.15rem 0 0; font-size:.82rem; line-height:1.6; color:var(--ink-soft); }
.safety-legal{ font-size:.72rem; line-height:1.65; color:var(--muted); margin-top:1.8rem;
  border-left:2px solid var(--stone); padding-left:.9rem; }

/* =====================================================================
   VORMERKLISTE
   Steht direkt unter der Verfügbarkeitsanzeige – genau dort, wo jemand
   "Preis auf Anfrage" liest und sonst abspringt. Drei Felder, mehr nicht.
   ===================================================================== */
.waitlist{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:2rem;
  align-items:start; margin:1.6rem 0 2rem;
  background:var(--sand); border-radius:var(--radius-lg,18px);
  padding:1.7rem 1.9rem;
}
@media (max-width:840px){ .waitlist{ grid-template-columns:1fr; gap:1.2rem; padding:1.4rem 1.2rem; } }
.wl-intro h3{ margin:.25rem 0 .5rem; font-size:1.3rem; }
.wl-intro p{ margin:0; font-size:.88rem; line-height:1.7; color:var(--ink-soft); }
.wl-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:.8rem; }
.wl-wide{ grid-column:1 / -1; }
@media (max-width:480px){ .wl-row{ grid-template-columns:1fr; } }
.wl-field{ display:block; }
.wl-field span{
  display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.3rem;
}
.wl-field input{
  width:100%; padding:.68rem .8rem; font:inherit; font-size:.9rem; color:var(--ink);
  background:#fff; border:1px solid var(--stone); border-radius:var(--radius);
}
.wl-field input:focus-visible{ outline:2px solid var(--olive); outline-offset:1px; }
.wl-check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.76rem; line-height:1.55;
  color:var(--ink-soft); margin-bottom:1rem; }
.wl-check input{ margin-top:.2rem; flex:0 0 auto; width:1rem; height:1rem; accent-color:var(--olive); }
.wl-micro{ font-size:.72rem; color:var(--muted); margin:.6rem 0 0; }

/* WhatsApp-Knopf im Kontaktbereich. Bewusst zurückhaltend gestaltet –
   er soll eine Möglichkeit sein, nicht der Hauptweg. */
.wa-link{
  display:inline-flex; align-items:center; gap:.8rem; margin:1.4rem 0 0;
  padding:.75rem 1.1rem; border:1px solid var(--stone); border-radius:var(--radius);
  background:#fff; color:var(--ink); text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.wa-link:hover{ border-color:#25d366; transform:translateY(-1px); }
.wa-link svg{ width:1.5rem; height:1.5rem; color:#25d366; flex:0 0 auto; }
.wa-link strong{ display:block; font-size:.87rem; font-weight:600; }
.wa-link small{ display:block; font-size:.74rem; color:var(--muted); margin-top:.05rem; }

/* Die zusammengefasste Zeile für das Handy stört auf großen Bildschirmen */
.pt-meta{ display:none; }

/* Link auf die eigene Seite der Einheit (im aufgeklappten Detailbereich) */
.ur-page{ margin:.7rem 0 0; font-size:.82rem; }
.ur-page a{ color:var(--olive); text-decoration:none; border-bottom:1px solid var(--stone); padding-bottom:1px; }
.ur-page a:hover{ border-color:var(--olive); }

/* =====================================================================
   FEINSCHLIFF V15
   ===================================================================== */

/* Beschriftung der Raum-Vorschaubilder: Der Verlauf war zu schwach, auf
   hellen Bildern (Küche, Kinderzimmer) verschwand die Schrift. */
.interior-thumb span{
  padding:.85rem .45rem .35rem;
  background:linear-gradient(180deg,rgba(20,25,23,0) 0%,rgba(20,25,23,.45) 45%,rgba(20,25,23,.9) 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  font-weight:600;
}

/* m² in großen Anzeigezahlen: In der Auszeichnungsschrift wurde die
   hochgestellte 2 mitskaliert und ragte über die Zeile hinaus. Die
   Einheit steht deshalb jetzt in einer eigenen, kleineren Auszeichnung. */
.rr-unit{
  font-family:var(--body); font-size:.42em; font-weight:500;
  letter-spacing:.02em; margin-left:.3em; vertical-align:.5em; color:var(--muted);
}

/* "Website öffnen ↗" soll nicht mit dem Pfeil allein umbrechen */
.company-link small{ text-wrap:pretty; }
.company-link small .arrow,.company-link small::after{ white-space:nowrap; }

/* Adresse im Fuß: Postleitzahl und Ort gehören in eine Zeile */
.footer-col address,.footer-col p{ text-wrap:pretty; }

/* Abschluss-CTA liegt auf dunklem Grund – der Hauptknopf braucht dort
   hellen Grund, sonst verschwimmt Oliv auf Dunkelgrün. */
.cta-final .btn-primary{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
}
.cta-final .btn-primary:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* Kennzahlen: Die Einheit gehört neben die Zahl, nicht darunter. */
.hero-fact .hf-num{ white-space:nowrap; }
.stat{ display:block; }          /* war Spalten-Flex – dadurch stand die Einheit unter der Zahl */
.stat-num{ display:inline; }
.stat-label{ display:block; margin-top:.6rem; }
.stat-unit:not(:empty){
  display:inline; margin-left:.35em; font-size:.9rem; letter-spacing:.06em;
  color:var(--wood); vertical-align:.35em;
}
.stat-unit:empty{ display:none; }

/* Kontrollkästchen-Beschriftungen brechen sinnvoller um */
.field-check .checkbox span,.wl-check span{ text-wrap:pretty; }
.cl-go{ color:var(--olive); white-space:nowrap; }

/* Die Titelzeile braucht etwas mehr Laufweite, damit "Am Sulzbach gebaut."
   auf einer Zeile steht und der Startbereich nicht so hoch wird. */
.hero-title{ max-width:22ch; }
@media (max-width:700px){ .hero-title{ max-width:15ch; } }

/* Überschriften ausgewogen umbrechen, damit kein einzelnes Wort
   ("an.", "Ihnen.") allein auf der letzten Zeile steht. */
h1,h2,h3,.hero-title,.tab-lead,.lead{ text-wrap:balance; }
p,li,dd{ text-wrap:pretty; }

/* =====================================================================
   REITER „ALLE EINHEITEN" – die sachliche Gesamtübersicht
   Wohnanlage und Doppelhaus laden zum Entdecken ein; hier stehen alle
   zwölf Einheiten nebeneinander und lassen sich vergleichen.
   ===================================================================== */
.ov-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin:1.6rem 0 1rem;
}
.ov-bar .chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ov-bar .result-count{ margin:0; font-size:.85rem; color:var(--muted); }

.ov-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.overview-table{
  width:100%; border-collapse:collapse; min-width:52rem;
  font-size:.9rem; background:#fff; border:1px solid var(--stone); border-radius:var(--radius-lg);
  overflow:hidden;
}
.overview-table th,.overview-table td{
  text-align:left; padding:.85rem .9rem; border-bottom:1px solid var(--stone); vertical-align:middle;
}
.overview-table thead th{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-weight:500; background:var(--sand); border-bottom:1px solid var(--stone); white-space:nowrap;
}
.overview-table tbody tr:last-child th,.overview-table tbody tr:last-child td{ border-bottom:0; }
.overview-table tbody tr:hover{ background:rgba(93,107,76,.04); }
.overview-table .num{ text-align:right; white-space:nowrap; }
.overview-table .strong{ font-weight:600; color:var(--ink); }
.overview-table td small{ display:block; font-size:.7rem; color:var(--muted); margin-top:.1rem; font-weight:400; max-width:11rem; margin-left:auto; white-space:normal; }
.overview-table tr.is-taken{ opacity:.62; }

.ov-unit{ min-width:10rem; }
/* "Erdgeschoss + Obergeschoss" soll höchstens zweizeilig brechen */
.overview-table td:nth-child(2){ min-width:9rem; }
.ov-unit a{
  font-family:var(--display); font-size:1.12rem; color:var(--ink); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.ov-unit a:hover{ color:var(--olive); border-color:var(--olive); }
.ov-unit small{ display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }

/* Vorschaubilder nebeneinander – als Tabellenzelle darf hier kein Flex
   stehen, sonst wächst die Zelle aus der Zeile heraus. */
.ov-plans{ white-space:nowrap; font-size:0; }
.ov-plan + .ov-plan{ margin-left:.35rem; }
.ov-plan{ display:inline-block; vertical-align:middle; }
.ov-plan{
  position:relative; padding:0; border:1px solid var(--stone); background:#fff;
  border-radius:4px; overflow:hidden; cursor:zoom-in; line-height:0;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.ov-plan:hover{ border-color:var(--olive); transform:translateY(-1px); }
.ov-plan img{ width:3.4rem; height:2.4rem; object-fit:cover; object-position:center; display:block; }
.ov-plan small{
  position:absolute; left:0; bottom:0; padding:.05rem .25rem; line-height:1.3;
  font-size:.58rem; letter-spacing:.08em; background:rgba(29,35,33,.82); color:#fff;
}
.ov-noplan{ color:var(--muted); }
.ov-cta .btn{ white-space:nowrap; }

@media (max-width:900px){
  .overview-table{ min-width:48rem; font-size:.85rem; }
  .overview-table th,.overview-table td{ padding:.7rem .65rem; }
  .ov-plan img{ width:3.6rem; height:2.5rem; }
}

/* Auf schmalen Displays wird aus jeder Tabellenzeile eine Karte – acht
   Spalten quer zu scrollen ist am Handy unbrauchbar. Die Spaltennamen
   stehen dann links neben dem Wert (data-label im Markup). */
@media (max-width:760px){
  .ov-scroll{ overflow-x:visible; }
  .ov-scroll .pl-hint{ display:none; }
  .overview-table{ min-width:0; border:0; background:none; }
  .overview-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .overview-table tbody tr{
    display:block; background:#fff; border:1px solid var(--stone);
    border-radius:var(--radius-lg); padding:1rem 1.1rem; margin-bottom:.8rem;
  }
  .overview-table tbody tr:hover{ background:#fff; }
  .overview-table th,.overview-table td{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.2rem 1rem;
    padding:.45rem 0; border-bottom:1px solid rgba(29,35,33,.08);
    text-align:right;
  }
  .overview-table td::before{
    content:attr(data-label); flex:0 0 auto; text-align:left;
    font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  }
  .overview-table th.ov-unit{
    display:block; text-align:left; border-bottom:1px solid var(--stone);
    padding-bottom:.6rem; margin-bottom:.3rem; min-width:0;
  }
  .overview-table td small{ max-width:none; width:100%; text-align:right; margin-left:0; }
  .overview-table td.ov-cta{ border-bottom:0; padding-top:.8rem; }
  .overview-table td.ov-cta::before{ content:""; }
  .overview-table td.ov-cta .btn{ width:100%; }
  .overview-table td:nth-child(2){ min-width:0; }
}

/* "SE Immobilien GmbH" soll in der Partnerkarte nicht zwischen Firma und
   Rechtsform brechen */
.partner-card h3,.partner-grid h3{ text-wrap:balance; }

/* Kontaktbereich: Beim Aufklappen von „Angaben ergänzen" ist die Spalte
   vorher breiter geworden, weil die Rasterspalten sich am Inhalt orientiert
   haben – das Formular ist dabei sichtbar gesprungen. Feste Anteile und
   minmax(0,…) halten die Breite konstant. */
/* WICHTIG: nur ab Tablet – sonst überschreibt diese Regel den einspaltigen
   Aufbau für schmale Displays, und das Formular läuft aus dem Bild. */
@media (min-width:901px){
  .contact-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
}
.contact-form{ min-width:0; }

/* Fingerfreundliche Mindestgrößen am Handy: Die beiden Flächen auf dem
   Luftbild und die Download-Links in der Grundrissliste waren mit rund
   20–24 px zu klein zum sicheren Antippen. */
@media (max-width:760px){
  .sm-hit{ min-height:34px; }
  .pt-dl{ min-height:32px; padding-top:.35rem; padding-bottom:.35rem; }
}

/* Kleingedruckter Hinweis unter den Stichpunkten der Ausstattung */
.material-stage-note{
  font-size:.74rem; line-height:1.6; color:var(--muted);
  margin:.2rem 0 1rem; padding-left:.85rem; border-left:2px solid var(--stone);
}

/* Baufortschritt: statt Prozentzahl ein kurzer Satz */
.progress-claim{
  margin:0; font-family:var(--display); font-size:clamp(1.05rem,1.4vw,1.35rem);
  color:var(--olive); text-align:right;
}
@media (max-width:640px){ .progress-claim{ text-align:left; } }

/* Anzahl der Punkte im Gebäude – als kleiner Zusatz, nicht im Satz */
.ah-count{
  display:inline-block; margin-left:.5rem; padding:.1rem .5rem; border-radius:99px;
  background:rgba(93,107,76,.12); color:var(--olive);
  font-size:.72rem; letter-spacing:.04em; white-space:nowrap;
}

/* Die zweizeilige Überschrift im Ausstattungsteil braucht etwas mehr
   Laufweite, sonst bricht sie auf drei Zeilen und wirkt gedrängt. */
#ausstattung .section-head{ max-width:min(100%, 82ch); }
#ausstattung .section-head h2{ max-width:none; }
#ausstattung .section-head .lead{ max-width:62ch; }
@media (max-width:760px){ #ausstattung .section-head h2{ max-width:100%; } }

/* =====================================================================
   Ausstattung am Handy: Die Musterkacheln standen in einem Feld mit
   fester Höhe (250 px) und wurden dadurch abgeschnitten bzw. lagen über
   dem Hinweis. Auf schmalen Displays wächst das Feld jetzt mit dem
   Inhalt, die Kacheln stehen normal im Fluss.
   ===================================================================== */
@media (max-width:720px){
  .material-stage-visual{ min-height:0; height:auto; }
  .material-stage-visual.is-tiles .ms-tiles{
    position:static; inset:auto; padding:.9rem .9rem 0;
  }
  .material-stage-visual.is-tiles .ms-hint{
    position:static; text-align:right; padding:.55rem .9rem .9rem; margin:0;
  }
  .material-stage-visual:not(.is-tiles){ min-height:14rem; }
}

/* =====================================================================
   HANDYVERSION – Überarbeitung
   Die Seite war auf dem Telefon fast 27 Bildschirmlängen lang, weil
   Textgrößen, Zeilenabstände und Abschnittsabstände vom Schreibtisch
   übernommen wurden. Und die Grundrisstabelle lief seitlich aus dem Bild.
   ===================================================================== */

/* --- 1. Luftbild nutzt die volle Breite ---------------------------------
   figure hat im Browser standardmäßig 40 px Rand links und rechts. Beim
   Luftbild waren das auf dem Handy 80 von 350 Pixeln – fast ein Viertel. */
.split-media,.loc-media{ margin-inline:0; }

@media (max-width:760px){

  /* --- 2. Ruhigere Textmaße -------------------------------------------
     17,3 px Fließtext ergaben nur rund 40 Zeichen je Zeile. Mit 16 px und
     etwas engerem Zeilenabstand sind es rund 45 – das liest sich besser
     und spart auf der ganzen Seite mehrere Bildschirmlängen. */
  .lead{ font-size:1rem; line-height:1.58; }
  .section-head .lead,.split-text .lead{ font-size:1.02rem; line-height:1.58; }
  .split-text p,.section-head p{ line-height:1.6; }
  .loc-facts p{ font-size:.95rem; line-height:1.6; }

  /* --- 3. Abstände zusammenziehen ------------------------------------- */
  .section{ padding-block:2.6rem; }
  .section-head{ margin-bottom:1.9rem; }
  .split{ gap:1.8rem; }
  .split-text .split-actions{ margin-top:1.2rem; }
  .progress-block{ margin-block:2rem; }
  .stat-row{ margin-top:1.6rem; }
  .stat{ padding:1.25rem 1rem; }
  .loc-facts{ gap:1.5rem; }
  .tab-lead{ margin-bottom:1.2rem; }

  /* --- 4. Nach-oben-Knopf kleiner und tiefer --------------------------
     Er lag auf Höhe der Merk-Knöpfe in den Einheitenkarten. */
  .to-top{ width:42px; height:42px; right:.9rem; bottom:.9rem; opacity:.92; }

  /* --- 5. Die beiden Lageknöpfe gleich breit -------------------------- */
  .lm-actions{ display:grid; grid-template-columns:1fr; gap:.6rem; }
  .lm-actions .btn{ width:100%; justify-content:center; }
}

/* --- 6. Grundrissliste am Handy als Karten ----------------------------
   Die Tabelle war 1145 px breit bei 316 px sichtbarer Fläche – man sah
   ein Viertel und ahnte nicht, dass rechts noch sieben Spalten stehen.
   Gleiche Darstellung wie bei der Gesamtübersicht. */
@media (max-width:760px){
  #tabPlaene .pl-scroll{ overflow-x:visible; }
  #tabPlaene .pl-hint{ display:none; }
  .plan-table{ min-width:0; border:0; background:none; }
  .plan-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  /* Zwei Spalten je Karte: Der Plan ist hier die Hauptsache und bekommt
     die volle Breite, die Zahlen stehen kompakt nebeneinander. */
  .plan-table tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:0 1rem;
    background:#fff; border:1px solid var(--stone);
    border-radius:var(--radius-lg); padding:1rem 1.1rem; margin-bottom:.8rem;
  }
  .plan-table th,.plan-table td{
    display:block; padding:.4rem 0; border-bottom:1px solid rgba(29,35,33,.08);
    text-align:left; white-space:normal;
  }
  .plan-table td::before{
    content:attr(data-label); display:block;
    font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
    margin-bottom:.1rem;
  }
  .plan-table th.pl-unit,
  .plan-table td.pt-plan,
  .plan-table td[data-label="Status"],
  .plan-table td.pt-dls,
  .plan-table td.pt-cta{ grid-column:1 / -1; }
  /* Die Außenfläche steht in der Gesamtübersicht; auf dem Plan-Blatt
     würde sie die Karte nur verlängern. */
  .plan-table td[data-label="Geschoss"],
  .plan-table td[data-label="Zimmer"],
  .plan-table td[data-label="Wohnfläche"],
  .plan-table td[data-label="Freifläche"]{ display:none; }
  .plan-table td.pt-meta{
    display:block; grid-column:1 / -1; font-size:.82rem; color:var(--ink-soft);
    padding:.5rem 0; border-bottom:1px solid rgba(29,35,33,.08);
  }
  .plan-table td.pt-plan{ border-bottom:0; padding-bottom:.7rem; }
  .plan-table td.pt-plan::before{ content:""; display:none; }
  /* Der Grundriss ist in diesem Reiter die Hauptsache – auf 62 × 46 px
     war davon nichts zu erkennen. */
  .plan-table td.pt-plan{ display:flex; gap:.5rem; }
  .plan-table .pt-thumb{
    width:auto; height:auto; flex:1 1 0; min-width:0; max-width:none;
    /* 3:2 passt besser zum Format der Pläne als 4:3 – weniger leerer Rand
       und die Karte wird kürzer. */
    aspect-ratio:3/2;
  }
  .plan-table .pt-thumb img{ width:100%; height:100%; object-fit:contain; }
  .plan-table th.pl-unit{
    display:block; text-align:left; background:none; border-bottom:1px solid var(--stone);
    padding:0 0 .6rem; margin-bottom:.3rem;
  }
  /* Beschriftung und Wert nebeneinander statt untereinander – spart je
     Zeile rund 20 px und liest sich wie eine Datenzeile. */
  .plan-table td[data-label="Status"],
  .plan-table td.pt-dls{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem;
  }
  .plan-table td[data-label="Status"]::before,
  .plan-table td.pt-dls::before{ margin-bottom:0; }
  .plan-table th.pl-unit strong{ font-family:var(--display); font-size:1.15rem; }
  .plan-table th.pl-unit small{
    display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); margin-top:.15rem;
  }
  .plan-table td.pt-plan{ padding-top:.2rem; }
  .plan-table td.pt-plan .pt-thumb{ margin:0 .3rem 0 0; }
  .plan-table td.pt-dls{ flex-wrap:wrap; row-gap:.4rem; }
  .plan-table td.pt-cta{ border-bottom:0; padding-top:.8rem; }
  .plan-table td.pt-cta::before{ content:""; }
  .plan-table td.pt-cta .btn{ width:100%; }
}

/* --- 7. Startbereich am Handy ----------------------------------------
   Die Überschrift stand mit 39 px auf vier Zeilen, die Unterlängen der
   Kursiven wurden angeschnitten, und der Startbereich war mit 889 px
   höher als der Bildschirm – die vier Kennzahlen unten waren dadurch
   halb abgeschnitten. */
@media (max-width:760px){
  .hero-title{
    font-size:clamp(1.95rem,8.4vw,2.35rem); line-height:1.1;
    max-width:100%; text-wrap:balance;
  }
  .hero-inner .eyebrow{ font-size:.62rem; letter-spacing:.18em; line-height:1.7; }
  .hero-sub{ font-size:1rem; line-height:1.5; margin-bottom:1.4rem; }
  .hero-inner{ padding-bottom:1.6rem; }
  .hero-actions{ gap:.6rem; }
  .hero-slider-ui{ padding-bottom:.5rem; }
  .hero-facts{ padding-block:1rem; }
  .hero-fact{ padding-block:.55rem; }
  .hf-num{ font-size:1.75rem; }
  .hero-fact .hf-label{ font-size:.76rem; line-height:1.35; }
  .hero-fact small{ font-size:.68rem; }
}

/* --- 8. Kennzahlen im Projektteil zweispaltig -------------------------
   Vier gestapelte Kacheln waren rund 560 px hoch. */
@media (max-width:760px){
  .stat-row{ display:grid; grid-template-columns:1fr 1fr; }
  .stat{ padding:1.1rem .9rem; }
  .stat-num{ font-size:1.9rem; }
  .stat-label{ font-size:.74rem; line-height:1.4; }
}

/* --- 9. Formularfelder am Handy mindestens 16 px ----------------------
   Safari auf dem iPhone zoomt automatisch in die Seite hinein, sobald ein
   Eingabefeld kleiner als 16 px ist. Der Sprung wirkt wie ein Fehler und
   der Besucher muss danach von Hand herauszoomen. */
@media (max-width:760px){
  input[type=text],input[type=email],input[type=tel],input[type=search],
  textarea,select,.wl-field input{
    font-size:16px;
  }
}

/* --- 10. Sehr schmale Displays (320 px) -------------------------------
   Kennzahlen und Partnerkarten ragten dort einige Pixel über den Rand,
   weil die Rasterspalten den Abstand nicht mitgerechnet haben. */
@media (max-width:400px){
  .stat-row{ gap:1px; }
  .stat,.partner-card{ min-width:0; }
  .partner-grid{ grid-template-columns:1fr; }
}
@media (max-width:360px){
  .stat-row{ grid-template-columns:1fr; }
  .hero-title{ font-size:1.85rem; }
  .hero-inner .eyebrow{ font-size:.58rem; letter-spacing:.14em; }
}

/* ==========================================================================
   V23 – Detailgrafiken mit räumlicher Tiefe
   Die Grafik liegt auf einer eigenen Ebene (.viz-tilt), die sich leicht mit
   dem Zeiger neigt. Bewegungsebene und Markierungen schweben davor, ein
   weicher Lichtschimmer folgt dem Zeiger. So wirkt der Schnitt plastisch,
   ohne unruhig zu werden.
   ========================================================================== */
.viz-photo{ perspective:1400px; }
.viz-tilt{
  position:relative; line-height:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  border-radius:var(--radius);
  box-shadow:0 18px 40px -22px rgba(20,26,22,.55), 0 4px 14px -8px rgba(20,26,22,.35);
  animation:vizTiltIn 1.15s cubic-bezier(.2,.7,.2,1) both;
  will-change:transform;
}
.viz-tilt img{ animation:none; }
.viz-tilt .viz-anim{ transform:translateZ(10px); }
.viz-tilt .viz-zones{ transform:translateZ(1px); }
.viz-sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), rgba(255,255,255,0) 42%);
  mix-blend-mode:soft-light; opacity:.55; transition:opacity .4s ease;
}
.viz-tilt.is-tilting .viz-sheen{ opacity:1; }
@keyframes vizTiltIn{
  0%   { opacity:0; transform:translateY(18px) rotateX(9deg) scale(.965); }
  100% { opacity:1; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
}
@media (prefers-reduced-motion:reduce){
  .viz-tilt{ animation:none; transform:none; }
  .viz-sheen{ display:none; }
}

/* Kennzahlen statt Schnitt (Doppelhaus-Gärten ohne Deckenaufbau) */
.viz-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
  width:min(100%, 760px); margin-inline:auto; text-align:left;
}
.viz-stat{
  background:var(--paper, #fff); border:1px solid rgba(40,48,42,.12); border-radius:var(--radius);
  padding:1.4rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.45rem;
  box-shadow:0 14px 30px -24px rgba(20,26,22,.5);
  animation:vizStatIn .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * .12s + .15s);
}
.viz-stat strong{ font-family:var(--display); font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.05; font-weight:500; color:var(--ink,#1b211f); }
.viz-stat span{ font-size:.82rem; line-height:1.45; color:var(--muted); }
@keyframes vizStatIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:640px){ .viz-stats{ gap:.5rem; } .viz-stat{ padding:.9rem .7rem; } .viz-stat strong{ font-size:1.3rem; } .viz-stat span{ font-size:.7rem; } }
@media (prefers-reduced-motion:reduce){ .viz-stat{ animation:none; } }

/* Foto im Reiter „Doppelhaus" – die Wohnanlage hat im Reiter daneben
   ebenfalls ein Gebäudebild. */
.house-photo{
  margin:1.1rem 0 0; position:relative; overflow:hidden;
  border:1px solid var(--line); background:#fff; border-radius:var(--radius);
}
.house-photo img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(.94); transition:transform .9s var(--ease);
}
.house-photo:hover img{ transform:scale(1.03); }
.house-photo figcaption{
  padding:.65rem .9rem; font-size:.74rem; line-height:1.45; color:var(--muted);
  border-top:1px solid var(--line); background:var(--paper,#fff);
}
@media (max-width:980px){ .house-photo{ margin-top:1rem; } }
/* Das Foto steht in derselben Spalte wie die beiden Auswahlkarten,
   der Grundrissbereich behält die rechte Spalte. */
@media (min-width:981px){
  .house-explorer > .house-selector{ grid-column:1; grid-row:1; }
  .house-explorer > .house-photo{ grid-column:1; grid-row:2; align-self:start; }
  .house-explorer > .house-stage{ grid-column:2; grid-row:1 / span 2; }
}

/* Hochformat-Video (YouTube Short): mittig, in Handy-Breite, damit links und
   rechts keine schwarzen Flächen entstehen. */
.section-video.is-portrait .video-frame{
  aspect-ratio:9/16;
  width:min(100%, 420px);
  margin-inline:auto;
}
.section-video.is-portrait .video-consent-copy small{ font-size:.66rem; line-height:1.4; }
@media (min-width:900px){
  .section-video.is-portrait .video-frame{ width:min(100%, 430px); }
}

/* Projektfilm: Text links, Video rechts – das Hochformat steht damit nicht
   mehr mittig über die ganze Breite. */
@media (min-width:900px){
  .section-video .wrap{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px);
    gap:clamp(2rem,5vw,4rem); align-items:center;
  }
  .section-video .section-head{ margin-bottom:0; }
  .section-video.is-portrait .video-frame{ width:100%; max-width:380px; margin-inline:0; }
  .section-video .micro{ grid-column:1; margin-top:1rem; }
}

/* Projektvideo als Link: Die Karte ist ein <a>, nicht mehr ein <button>.
   Gleiche Optik, aber mit Linkverhalten und sichtbarem Fokusrahmen. */
a.video-consent{ display:block; text-decoration:none; color:inherit; }
a.video-consent:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }