/* WEISSHALDE EXKLUSIV — Rundgang mit echtem Bildmaterial (scrollgesteuert, rundgang.js) und das 3D-Konzeptmodell nur im Abschnitt „Das Haus im Aufriss“.
   Standbild und Canvas des Modells liegen fest im Hintergrund, die Kamera folgt dem Scrollen (exklusiv.js); überall sonst deckt die Seite die Bühne ab.
   „Löcher“ (.loch) sind leere Flächen im Layout, in denen das Modell erscheinen soll. Zusätzlich zu weisshalde.css. */

/* ---------- Bühne des Konzeptmodells ---------- */
.buehne-bild{position:fixed;inset:0;z-index:0;overflow:hidden;background:#05080d}
.buehne-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity 1.4s ease}
.szene-bereit .buehne-bild img{opacity:0}
.buehne{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.szene-bereit .buehne{opacity:1}
.ohne-gl .buehne{display:none}
.schleier{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.schleier-l{background:linear-gradient(90deg,rgba(6,9,14,.96) 0%,rgba(6,9,14,.74) 36%,rgba(6,9,14,.14) 68%,rgba(6,9,14,0) 100%)}
.schleier-v{background:rgba(6,9,14,.96)}
main,.fuss{position:relative;z-index:2}
.loch{pointer-events:none}

/* ---------- Rundgang: Titelbild und scrollgesteuerter Film (rundgang.js) ----------
   Grundzustand = ohne Fahrt: eine Bildschirmhöhe Titelbild, darunter die Stationen als Bilder. Mit html.js-rg klebt die Bühne im Fenster und das Scrollen führt den Film. */
.rundgang{position:relative;background:#05080d}
.rg-buehne{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#05080d}
.rg-medium{position:absolute;inset:0}
.rg-bild{position:absolute;inset:0;background:#05080d url("film/rg1-d.webp") 50% 50%/cover no-repeat}
.rg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .7s ease}
.js-rg-video .rg-video{opacity:1}
.rg-flaeche{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,9,14,.82) 0%,rgba(6,9,14,.22) 22%,rgba(6,9,14,0) 40%),linear-gradient(180deg,rgba(6,9,14,.55) 0%,rgba(6,9,14,0) 18%)}
.rg-flaeche::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,14,.82) 0%,rgba(6,9,14,.5) 32%,rgba(6,9,14,.06) 60%,rgba(6,9,14,0) 100%);transition:opacity .6s ease}
.rg-buehne.los .rg-flaeche::before{opacity:0}
.rg-text{position:absolute;z-index:2;left:var(--rand);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;width:min(48rem,calc(100% - 2*var(--rand)));padding:calc(var(--kopf) + 1.2rem) 0 9.5rem;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.rg-text.weg{opacity:0;transform:translate3d(0,-14px,0);pointer-events:none}
.rg-text h1{margin:0;font:400 clamp(4rem,11.4vw,12.6rem)/.84 var(--serif);letter-spacing:-.025em;margin-left:-.04em}
.rg-text .lead{margin-top:1.4rem}
.rg-text .untertitel em{color:#ecd3a6}
/* Kleine Schrift über dem Foto bekommt eine dunkle, durchscheinende Fläche (gemessen mit kontrast-pruefung.mjs: Etikett und Hinweis erreichten über Himmel/Hauswand 1,2–3 : 1) */
.rg-text .etikett{display:block;width:fit-content;max-width:100%;padding:.35rem .65rem;margin-left:-.65rem;background:rgba(6,9,14,.62);border-radius:2px}
.rg-hinweis{padding:.35rem .6rem;background:rgba(6,9,14,.6);border-radius:2px}
.rg-text .etikett,.rg-text .untertitel,.rg-text .lead{text-shadow:0 1px 14px rgba(6,9,14,.7),0 0 2px rgba(6,9,14,.45)}   /* der Untertitel läuft bei 1366 px über die helle Hauswand (gesehen: „eigener Terrasse.“ verblasste) */
.rg-hinweis{position:absolute;z-index:2;top:calc(var(--kopf) + 1rem);right:var(--rand);margin:0;max-width:19rem;text-align:right;font:500 .62rem/1.45 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,236,229,.86);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.rg-buehne .fakten{position:absolute;z-index:2;left:0;right:0;bottom:4.2rem;grid-column:auto;grid-row:auto;background:linear-gradient(rgba(6,9,14,.3),rgba(6,9,14,.88));transition:opacity .5s ease}
.rg-buehne .fakten.weg{opacity:0;pointer-events:none}
.rg-anzeige{position:absolute;z-index:2;left:var(--rand);bottom:calc(4.2rem + 1.4rem);width:min(32rem,calc(100% - 2*var(--rand)));opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.6,.2,1);pointer-events:none}
.rg-anzeige.an{opacity:1;transform:none}
.rg-nr{margin:0 0 .6rem;font:600 .72rem/1 var(--sans);letter-spacing:.2em;color:var(--bronze)}
.rg-name{margin:0;font:400 clamp(2.6rem,5.4vw,5rem)/1 var(--serif);color:var(--putz);text-shadow:0 2px 28px rgba(0,0,0,.55)}
.rg-zeile{margin:.8rem 0 0;min-height:4.5em;font:500 .78rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,236,229,.92);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.rg-ticks{display:flex;gap:.4rem;margin-top:1.3rem}
.rg-ticks i{display:block;width:2.2rem;height:2px;background:rgba(239,236,229,.3);transition:background .4s}
.rg-ticks i.an{background:var(--bronze)}
/* Stationen: ohne Skript (<noscript>) und bei reduzierter Bewegung als Bilder untereinander, mit Fahrt nur für Vorlesegeräte */
.rg-liste{list-style:none;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--rand) clamp(2rem,4vw,3rem);display:grid;gap:clamp(2rem,5vw,4rem);max-width:1100px}
.rg-liste li{display:grid;gap:.7rem}
.rg-liste img{display:block;width:100%;height:auto;background:var(--nacht3)}
.rg-liste b{font:400 clamp(1.5rem,2.6vw,2.2rem)/1 var(--serif);color:var(--putz)}
.rg-liste span{font:500 .72rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.js-rg .rundgang{height:calc(100vh + 520vh);height:calc(100svh + 520svh)}
.js-rg .rg-buehne{position:sticky;top:0}
.js-rg .rg-liste{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Abschnitte liegen über der Bühne: nur „Das Haus“ ist durchsichtig (Konzeptmodell), alle anderen decken ab ---------- */
.wh-exklusiv .haus{background:none}
.wh-exklusiv .haltung{background:var(--nacht);min-height:min(100svh,880px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);column-gap:clamp(2rem,6vw,6rem);align-items:center;max-width:none;padding-inline:max(var(--rand),calc((100% - 1500px) / 2 + var(--rand)))}
.wh-exklusiv .haltung .kapitel,.wh-exklusiv .haltung .gross,.wh-exklusiv .haltung .haltung-spalten{grid-column:1}
.wh-exklusiv .haltung .gross{font-size:clamp(2.4rem,5vw,5.2rem);max-width:none}
.wh-exklusiv .haltung-spalten{grid-template-columns:minmax(0,1fr);margin:clamp(1.6rem,3.4vw,3rem) 0 0;gap:1.2rem;max-width:34rem}
.haltung-bild{grid-column:2;grid-row:1 / span 3;margin:0}
.haltung-bild img{display:block;width:100%;height:auto;filter:brightness(.92) saturate(.92)}
.haltung-bild figcaption,.fenster-bild figcaption,.galerie-hinweis{font:500 .62rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.haltung-bild figcaption,.fenster-bild figcaption{margin-top:.7rem}
.galerie-hinweis{margin:clamp(2rem,4vw,3.4rem) 0 0;max-width:46rem}
.wh-exklusiv .architektur{background:var(--nacht)}
.wh-exklusiv .material{background:var(--nacht2)}
.wh-exklusiv .fragen{background:var(--nacht);max-width:none;padding-inline:max(var(--rand),calc((100% - 1100px) / 2))}
.wh-exklusiv .lage{background:var(--nacht3)}

/* Haus im 3D-Aufriss (Konzeptmodell): links Titel und Liste, rechts das Modell (das „Loch“ beginnt am Abschnittsanfang und ist beim Ankommen ganz im Bild) */
.wh-exklusiv .haus-in{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.wh-exklusiv .haus-kopf{grid-column:1;grid-row:1;max-width:none;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.wh-exklusiv .haus-kopf .gross{font-size:clamp(2.3rem,4.3vw,4.6rem)}
.wh-exklusiv .haus-raster{display:contents}
.wh-exklusiv .haus-wahl{grid-column:1;grid-row:2;align-self:start;background:rgba(8,11,17,.82);border:1px solid var(--linie);padding:1.1rem 1.1rem 1.2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wh-exklusiv .haus-bild{grid-column:2;grid-row:1 / span 2}
.wh-exklusiv .haus-wahl .hinweis{margin-top:1rem}
.loch-haus{position:relative;pointer-events:auto;width:100%;height:clamp(400px,74svh,800px);margin:0;cursor:default;touch-action:pan-y}
.loch-haus.zeigt{cursor:pointer}
.modell-etikett{position:absolute;left:0;bottom:.4rem;margin:0;font:500 .62rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(239,236,229,.86);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.regler{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.35rem 1.1rem;background:rgba(8,11,17,.82);border:1px solid var(--linie);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.regler label{font:600 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.regler input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:none;cursor:pointer}
.regler input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#d58a52,#7a5a86 45%,#1b2440 75%,#070a12);border:0}
.regler input[type=range]::-moz-range-track{height:4px;background:linear-gradient(90deg,#d58a52,#7a5a86 45%,#1b2440 75%,#070a12);border:0}
.regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;background:var(--putz);border:2px solid var(--bronze);border-radius:0}
.regler input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--putz);border:2px solid var(--bronze);border-radius:0}
.regler input[type=range]:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.regler output{min-width:6.6rem;text-align:right;font:400 1.2rem/1 var(--serif);color:var(--bronze)}
.schnitt{margin:clamp(1.2rem,2.4vw,2rem) 0 0;max-width:430px;background:rgba(8,11,17,.82);border:1px solid var(--linie);padding:.5rem .6rem .6rem}
.schnitt figcaption{margin-top:.4rem;font:500 .6rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.wh-exklusiv .steckbrief{background:rgba(8,11,17,.82);border:1px solid var(--linie);padding:clamp(1rem,2vw,1.6rem);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wh-exklusiv .steckbrief-name{border-top:0;padding-top:0}

/* Wohnungsmarken im Bild: Knöpfe, die dem Modell folgen (Maus und Touch; die Liste und der Schnitt sind der Weg für die Tastatur) */
.marken3d{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.marke3d{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s;will-change:transform}
.marke3d.sichtbar{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.marke3d i{display:grid;place-items:center;width:28px;height:28px;background:rgba(8,11,17,.8);border:1px solid var(--linie-stark);color:var(--putz);font:400 1.05rem/1 var(--serif);font-style:normal;transition:background .3s,color .3s,border-color .3s,transform .3s}
.marke3d:hover i{border-color:var(--licht)}
.marke3d.res i{border-style:dashed;color:var(--grau-hell)}
.marke3d.an i{background:var(--licht);border-color:var(--licht);color:var(--nacht);transform:scale(1.2)}

/* Besichtigung: erst die Fensterstufe (Text und ein Blick auf die Terrasse), dann das Formular auf dunkler Tafel */
.wh-exklusiv .besichtigung{padding:0}
.fenster-stufe{position:relative;min-height:max(100svh,640px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:clamp(2rem,6vw,6rem);align-items:end;padding:calc(var(--kopf) + 2rem) var(--rand) clamp(2rem,7vh,4.5rem);background:var(--nacht2)}
.fenster-text{position:relative;z-index:2;max-width:34rem}
.fenster-text .gross{font-size:clamp(2.6rem,6vw,6.4rem)}
.fenster-beschr{margin:1.6rem 0 0;font:500 .62rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grau-hell)}
.fenster-bild{margin:0;justify-self:end;align-self:center;width:min(100%,576px)}
.fenster-bild img{display:block;width:100%;height:auto}
.wh-exklusiv .besichtigung-in{padding:clamp(3rem,7vw,6rem) var(--rand) clamp(4.5rem,9vw,8rem)}
.wh-exklusiv .anfrage{background:rgba(8,11,17,.86);border:1px solid var(--linie);padding:clamp(1.2rem,3vw,2.4rem);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Ohne WebGL (oder nach Verlust des Grafikkontexts): das Standbild des Modells bleibt Hintergrund, der Schnitt wird zum Hauptbild */
.ohne-gl .loch-haus{height:0;min-height:0}
.ohne-gl .regler,.ohne-gl .marken3d,.ohne-gl .modell-etikett{display:none}
.ohne-gl .schnitt{max-width:none;margin-top:0}

/* ---------- Tablet und Handy ---------- */
@media (max-width:1100px){
  .wh-exklusiv .haus-in{display:block}
  .wh-exklusiv .haus-kopf .gross{font-size:clamp(2.3rem,7vw,4.4rem)}
  .wh-exklusiv .haus-raster{display:flex;flex-direction:column;gap:1.4rem}
  .wh-exklusiv .haus-wahl{position:static}
  .wh-exklusiv .haus-bild{display:contents}
  .loch-haus,.regler,.schnitt,.wh-exklusiv .steckbrief,.wh-exklusiv .grundriss,.wh-exklusiv .haus-wahl{align-self:stretch}
  .loch-haus{order:1;height:clamp(360px,64svh,620px)}
  .regler{order:2}
  .schnitt{order:3;max-width:none;margin-top:0}
  .wh-exklusiv .haus-wahl{order:4;position:static}
  .wh-exklusiv .steckbrief{order:5;margin-top:0}
  .wh-exklusiv .grundriss{order:6}
}
@media (max-width:860px){
  .js-rg .rundgang{height:calc(100vh + 440vh);height:calc(100svh + 440svh)}
  .rg-bild{background-image:url("film/rg1-m.webp")}
  /* Handy-Titelbild: Das Haus gehört in die obere Hälfte, Text und Eckdaten darunter (gesehen am 16.10.2026: Text über der Bildmitte und ein flacher Schleier verdeckten das Haus fast vollständig).
     Der Film rückt im Titelbild nach oben (nur transform) und gleitet zurück, sobald das Scrollen beginnt; der Absatz entfällt hier. */
  .rg-medium{transition:transform .5s cubic-bezier(.2,.6,.2,1)}   /* review-animations: nur transform, ease-out, zur Textblende (.5 s) passend; Szenenwechsel, kein UI-Mikroeffekt */
  .rg-buehne:not(.los) .rg-medium{transform:translate3d(0,-10svh,0)}
  .rg-text{justify-content:flex-end;padding-bottom:calc(4.2rem + 7.6rem)}
  .rg-text .lead{display:none}
  .rg-text .etikett{background:rgba(6,9,14,.82)}   /* liegt jetzt über der hellen Hauswand (kontrast-pruefung: 360×740 nur 2,9 : 1 bei .62) */
  .rg-hinweis{left:var(--rand);right:auto;text-align:left;max-width:calc(100% - 2*var(--rand))}
  .rg-flaeche{background:linear-gradient(0deg,rgba(6,9,14,.95) 0%,rgba(6,9,14,.88) 26%,rgba(6,9,14,.5) 42%,rgba(6,9,14,.1) 56%,rgba(6,9,14,0) 66%),linear-gradient(180deg,rgba(6,9,14,.62) 0%,rgba(6,9,14,0) 20%)}
  .rg-flaeche::before{background:none}
  .rg-buehne .fakten div{padding:.6rem .9rem .65rem var(--rand)}
  .rg-buehne .fakten div:nth-child(even){padding-left:.9rem}
  .rg-buehne .fakten dt{margin-bottom:.35rem}
  .rg-buehne .fakten dd{font-size:1.2rem}
  .rg-text .etikett,.rg-text h1,.rg-text .untertitel,.rg-text .lead,.rg-hinweis{text-shadow:0 1px 16px rgba(6,9,14,.8),0 0 3px rgba(6,9,14,.5)}
  .wh-exklusiv .haltung{display:block;min-height:0}
  .wh-exklusiv .haltung-spalten{max-width:none}
  .haltung-bild{margin-top:clamp(1.8rem,6vw,2.6rem);max-width:420px}
  .fenster-stufe{display:flex;flex-direction:column;justify-content:flex-end;gap:2rem;min-height:max(100svh,600px)}
  .fenster-bild{justify-self:auto;align-self:flex-start;width:min(78%,360px);order:-1}
}
@media (max-width:860px) and (max-height:620px){
  /* 320×568 und kleiner: Titel, Untertitel und Knöpfe haben Vorrang vor den vier Eckdaten (sie überlagerten sonst die Knöpfe) */
  .rg-buehne .fakten{display:none}
  .rg-text{padding-bottom:5rem}
}
@media (max-width:480px){
  .schnitt{padding:0 0 .5rem;border-left:0;border-right:0}   /* die Fläche eines Kastens im Schnitt bleibt ≥ 24 px hoch */
  .regler{grid-template-columns:minmax(0,1fr) auto;gap:.2rem .8rem}
  .regler input[type=range]{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an) .buehne-bild img, html:not(.bewegung-an) .buehne, html:not(.bewegung-an) .schleier, html:not(.bewegung-an) .rg-medium, html:not(.bewegung-an) .rg-video, html:not(.bewegung-an) .rg-text, html:not(.bewegung-an) .rg-anzeige, html:not(.bewegung-an) .rg-ticks i, html:not(.bewegung-an) .rg-buehne .fakten{transition:none}
  html:not(.bewegung-an) .marke3d, html:not(.bewegung-an) .marke3d i{transition:none}
}