/* AVORENIX – Redesign-Ergänzungen (Prototyp Rundgang). Lädt direkt hinter /_astro/haus.BTfLQtBl.css.
   Nur transform/opacity werden animiert. Zustände kommen als data-Attribute auf section.etagen:
   data-etage="" | ug | eg | og | dg | finale, data-offen="ja", data-abend="ja", data-fenster="offen", data-js, data-versatz="aus". */

/* 1 Grundgerüst ------------------------------------------------------------ */
.etagen{overflow-x:clip;--versatz:1;--buehne-hoehe:max(40svh,17rem)}
.etagen[data-versatz=aus]{--versatz:0}
.etagen-raster{display:grid;gap:clamp(2rem,4vw,4rem);margin-top:clamp(2rem,5vw,4rem)}
@media (min-width:64rem){
  .etagen-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;column-gap:clamp(2.5rem,5vw,5rem)}
  .etagen-buehne{position:sticky;top:clamp(1rem,6vh,3rem)}
}
.etagen-buehne{margin:0;min-width:0}
.etagen-rahmen{position:relative;aspect-ratio:4/3;contain:layout;background:var(--color-graphit);isolation:isolate}
.etagen-rahmen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.etagen-rahmen>.etagen-marken{position:absolute;inset:0;margin:0}

/* 2 Etagen-Ebenen: Masken (demo/haus-etage-*) -------------------------------
   Die Webp-Masken sind Quader-Projektionen und überlappen sich; die jeweils höhere Ebene wird abgezogen,
   das Dach bekommt zusätzlich die Giebelfläche aus assets/masken/dach.svg (Dachstuhl und Kollektoren liegen in keiner Webp-Maske). */
.etagen-ebene{
  opacity:0;translate:0 0;
  transition:opacity .5s ease,translate .6s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;
}
.etagen[data-offen=ja] .etagen-ebene{will-change:opacity,translate}
.etagen-ebene[data-etage=ug]{-webkit-mask-image:url(/demo/haus-etage-ug-1440.webp),url(/demo/haus-etage-eg-1440.webp);mask-image:url(/demo/haus-etage-ug-1440.webp),url(/demo/haus-etage-eg-1440.webp);-webkit-mask-composite:source-out;mask-composite:subtract}
.etagen-ebene[data-etage=eg]{-webkit-mask-image:url(/demo/haus-etage-eg-1440.webp),url(/demo/haus-etage-og-1440.webp);mask-image:url(/demo/haus-etage-eg-1440.webp),url(/demo/haus-etage-og-1440.webp);-webkit-mask-composite:source-out;mask-composite:subtract}
.etagen-ebene[data-etage=og]{-webkit-mask-image:url(/demo/haus-etage-og-1440.webp),url(/assets/masken/dach.svg);mask-image:url(/demo/haus-etage-og-1440.webp),url(/assets/masken/dach.svg);-webkit-mask-composite:source-out;mask-composite:subtract}
.etagen-ebene[data-etage=dg]{-webkit-mask-image:url(/assets/masken/dach.svg),url(/demo/haus-etage-dg-1440.webp);mask-image:url(/assets/masken/dach.svg),url(/demo/haus-etage-dg-1440.webp);-webkit-mask-composite:source-over;mask-composite:add}

/* 3 Zustände ------------------------------------------------------------- */
.etagen-basis,.etagen-abend{transition:opacity .6s ease}
.etagen-abend{opacity:0}
.etagen[data-abend=ja] .etagen-abend{opacity:1}
.etagen[data-offen=ja] .etagen-basis,.etagen[data-offen=ja] .etagen-abend{opacity:0}
/* Sichtbarkeit je Szene (Tag/Abend) und Dämpfung der nicht aktiven Etagen – alles über opacity */
.etagen-ebene{--sicht:0;--daempfung:.4}
.etagen[data-offen=ja] .etagen-ebene[data-szene=tag]{--sicht:1}
.etagen[data-offen=ja][data-abend=ja] .etagen-ebene[data-szene=tag]{--sicht:0}
.etagen[data-offen=ja][data-abend=ja] .etagen-ebene[data-szene=abend]{--sicht:1}
/* Keller: Die UG-Maske des Demo-Hauses ist nur Sockel und Bodenplatte (kein aufgeschnittener Keller).
   Damit die erste Station nicht wie ein fehlerhaft abgedunkeltes Bild wirkt, bleibt das Haus hier nur leicht gedämpft. */
.etagen[data-etage=ug] .etagen-ebene{--daempfung:.62}
.etagen[data-etage=ug] .etagen-ebene[data-etage=ug],
.etagen[data-etage=eg] .etagen-ebene[data-etage=eg],
.etagen[data-etage=og] .etagen-ebene[data-etage=og],
.etagen[data-etage=dg] .etagen-ebene[data-etage=dg]{--daempfung:1}
.etagen[data-offen=ja] .etagen-ebene{opacity:calc(var(--sicht) * var(--daempfung))}
/* Versatz „Schublade“ – nur im geöffneten Zustand, maximal 2 % der Bühnenhöhe; data-versatz="aus" schaltet ihn ab */
.etagen[data-offen=ja] .etagen-ebene[data-etage=dg]{translate:0 calc(-2% * var(--versatz))}
.etagen[data-offen=ja] .etagen-ebene[data-etage=og]{translate:0 calc(-1% * var(--versatz))}
.etagen[data-offen=ja] .etagen-ebene[data-etage=ug]{translate:0 calc(1% * var(--versatz))}

/* 4 Marker (Basis-Stil aus .vorschau-marke der gehashten CSS) --------------- */
.etagen-marken{list-style:none;padding:0;pointer-events:none}
.etagen-marke{opacity:0;transform:translateY(.4rem);transition:opacity .35s ease,transform .35s ease}
.etagen-marke:nth-of-type(2){transition-delay:.08s}
.etagen-marke:nth-of-type(3){transition-delay:.16s}
.etagen-marke:nth-of-type(4){transition-delay:.08s}
.etagen[data-etage=ug] .etagen-marke[data-etage=ug],
.etagen[data-etage=eg] .etagen-marke[data-etage=eg],
.etagen[data-etage=og] .etagen-marke[data-etage=og],
.etagen[data-etage=dg] .etagen-marke[data-etage=dg]{opacity:1;transform:none}
.etagen[data-fenster=offen] .etagen-marke[data-marke=fenster]{--kante:var(--color-warm)}
.etagen[data-fenster=offen] .etagen-marke[data-marke=fenster] .vorschau-punkt{background:var(--color-warm)}
.etagen[data-fenster=offen] .etagen-marke[data-marke=fenster] .vorschau-schild{color:var(--color-warm)}

/* 5 Leiste, Status, Karten, Schalter, Tafel -------------------------------- */
.etagen-leiste{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.etagen-reiter{min-height:2.75rem;padding:.4rem .9rem;border:1px solid currentColor;border-radius:var(--radius-feld);background:transparent;color:inherit;font:inherit;font-weight:650;line-height:1.2;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
@supports (color:color-mix(in srgb,red 50%,transparent)){.etagen-reiter{border-color:color-mix(in srgb,currentColor 38%,transparent)}}
.etagen-reiter:hover{background:var(--knopf-zweit-beruehrt);border-color:currentColor}
.etagen-reiter[aria-selected=true]{background:var(--knopf-flaeche);color:var(--knopf-schrift);border-color:transparent}
.etagen-reiter:focus-visible,.etagen-schalter:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.etagen-reiter-kurz{display:none}
.etagen-status{min-height:1.6em;margin:.75rem 0 0;font-size:.95rem;color:var(--leise)}
.etagen-stand{color:var(--color-elfenbein);font-weight:650}
/* Trenner nur, wenn Stand UND Meldung gefüllt sind */
.etagen-stand:not(:empty)+.etagen-meldung:not(:empty)::before{content:" · "}
.etagen-quelle{font-size:.85rem;color:var(--leise);margin-top:.35rem}
.etagen-karten{list-style:none;margin:0;padding:0}
.etagen-karte{min-height:80svh;display:grid;align-content:center;padding-block:2rem}
.etagen-karte>article{display:grid;gap:1.15rem}
.etagen-karte>article>*{margin:0}
.etagen-karte .zwischentitel{transition:color .3s}
.etagen-karte[aria-current=step] .zwischentitel{color:var(--betont)}
/* Foto je Station: 3:2, randlos beschnitten, Eckenradius wie die Karten der Seite */
.etagen-foto{margin:0}
.etagen-foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-karte);background:var(--color-graphit-flaeche)}
.etagen-foto figcaption{font-size:.85rem;line-height:1.45;color:var(--leise);margin-top:.45rem}
.etagen-funktionen{margin:0;padding:0}
.etagen-funktionen>div{padding:.85rem 0;border-top:1px solid var(--linie)}
.etagen-funktionen>div:last-child{border-bottom:1px solid var(--linie)}
.etagen-funktionen dt{font-weight:700}
.etagen-funktionen dd{margin:.25rem 0 0;color:var(--leise)}
.etagen-schalter{justify-self:start;min-height:3rem;cursor:pointer}
.etagen-schalter[aria-checked=true]{background:var(--knopf-flaeche);color:var(--knopf-schrift);border-color:transparent}
.etagen-schalter[aria-checked=true]:hover{background:var(--knopf-beruehrt);border-color:var(--knopf-beruehrt)}
.etagen-tafel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.etagen-kachel{display:grid;gap:.15rem;padding:.9rem 1rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-karte)}
.etagen-kachel-raum{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.etagen-kachel-wert{font-weight:700;font-size:1.15rem}
.etagen-kachel-status{font-size:.9rem;color:var(--leise)}
.etagen-kachel[data-aktiv=ja]{border-color:var(--betont)}
.etagen-kachel[data-aktiv=ja] .etagen-kachel-status{color:var(--betont)}
.etagen-finale .leitsatz{margin-top:.5rem}
.etagen-finale .randnotiz{margin-top:0}

/* 6 Mobil (<64rem): Bühne oben fixiert, Stationen darunter ------------------
   Höhe der Bühne über --buehne-hoehe (40svh Phone, 48svh Tablet); die Karten bekommen denselben Wert als scroll-margin,
   damit die Direktwahl über die Reiter unterhalb der Bühne landet. Der Rahmen bleibt 4:3 (Masken sind 100 % 100 %). */
@media (max-width:63.99rem){
  .etagen-buehne{position:sticky;top:0;z-index:2;height:var(--buehne-hoehe);background:var(--color-graphit);margin-inline:calc(-1*clamp(1.25rem,4.5vw,2.5rem));padding:.5rem clamp(1.25rem,4.5vw,2.5rem) 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center}
  .etagen-buehne::after{content:"";position:absolute;left:0;right:0;bottom:-1.5rem;height:1.5rem;background:linear-gradient(var(--color-graphit),transparent);pointer-events:none}
  .etagen-rahmen{width:min(100%,calc((var(--buehne-hoehe) - 6.9rem) * 4 / 3));justify-self:center;align-self:center}
  .etagen-leiste{gap:.35rem;margin-bottom:.35rem;flex-wrap:nowrap}
  .etagen-reiter{min-height:2.75rem;padding:.3rem .7rem;font-size:.85rem}
  /* Statuszeile zweizeilig, damit die Rückmeldung der Schalter vollständig lesbar bleibt */
  .etagen-status{margin:.25rem 0 .4rem;font-size:.85rem;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Quellenhinweis bleibt für Screenreader erhalten, nimmt aber keinen Platz ein */
  .etagen-quelle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .etagen-karte{min-height:58svh;scroll-margin-top:calc(var(--buehne-hoehe) + .5rem)}
  .etagen-karte:first-child{padding-top:1rem}
  .etagen-schalter{justify-self:stretch}
  .etagen[data-offen=ja] .etagen-ebene[data-etage=dg]{translate:0 calc(-1% * var(--versatz))}
  .etagen[data-offen=ja] .etagen-ebene[data-etage=og]{translate:0 calc(-.5% * var(--versatz))}
  .etagen[data-offen=ja] .etagen-ebene[data-etage=ug]{translate:0 calc(.5% * var(--versatz))}
}
@media (min-width:48rem) and (max-width:63.99rem){
  .etagen{--buehne-hoehe:max(48svh,20rem)}
}
@media (max-width:47.99rem){
  .etagen-marke .vorschau-schild{display:none}
  .etagen-tafel{grid-template-columns:1fr}
  .etagen-reiter-lang{display:none}
  .etagen-reiter-kurz{display:inline}
}

/* 7 Hero-Ergänzungen --------------------------------------------------------- */
.einstieg-bild{position:relative;isolation:isolate}
.einstieg-bild::after{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:10%;background:radial-gradient(ellipse at center,rgb(23 28 30/.14),transparent 70%);z-index:-1;pointer-events:none}
.einstieg-weiter{font-size:.95rem}
@media (max-width:63.99rem){
  .einstieg-bild{order:-1}
  .einstieg-bild img{max-height:38svh;object-fit:contain}
}

/* 7b Bildwelt auf der Startseite (bilder/B05–B12) ---------------------------
   Gemeinsam: Bild füllt die Figure, Beschnitt per aspect-ratio + object-fit, Eckenradius der Karten,
   Bildunterschrift klein und leise (wie .etagen-foto). Breakpoints folgen der gehashten CSS:
   .gliederung und .dreiteilung werden ab 56rem mehrspaltig, der Einstieg ab 64rem. */
.detail-haftend img,.dreiteilung-bild img,.einblick-bild img,.panorama img{display:block;width:100%;height:auto;object-fit:cover;background:var(--color-stein)}
.detail-haftend figcaption,.dreiteilung-bild figcaption,.einblick-bild figcaption,.panorama figcaption{font-size:.85rem;line-height:1.45;color:var(--leise);margin-top:.45rem}

/* Leistungen: Detail in der haftenden Spalte, 3:4. Unter 56rem liegt die Spalte über der Liste –
   dort würde ein Hochformat die Liste um eine Bildschirmhöhe nach unten schieben, deshalb ausgeblendet. */
.detail-haftend{margin:clamp(1.5rem,3vw,2.25rem) 0 0;max-width:min(100%,18rem)} /* 18rem: haftende Spalte bleibt bei 860px Höhe unter der Viewporthöhe */
.detail-haftend img{aspect-ratio:3/4;border-radius:var(--radius-karte)}
@media (max-width:55.99rem){.detail-haftend{display:none}}

/* Automationen: Foto über Nummer und Überschrift, Hochformat in den drei Spalten, 4:3 gestapelt (<56rem).
   Ab 56rem feste Höhe statt Seitenverhältnis: Die mittlere Spalte hat beidseitig Innenabstand und ist schmaler als die äußeren,
   mit 3:4 wären die Bilder unterschiedlich hoch und Nummer/Überschrift der Spalten versetzt. 31vw ≈ 4/3 der mittleren Spaltenbreite. */
.dreiteilung-bild{margin:0 0 .35rem}
.dreiteilung-bild img{aspect-ratio:4/3;border-radius:var(--radius-karte)}
@media (min-width:56rem){.dreiteilung-bild img{aspect-ratio:auto;height:clamp(16rem,31vw,29rem)}}

/* Arbeitsweise, Einblick: 3:2 unter dem Text in der rechten Spalte der .gliederung-linie */
.einblick-bild{margin:clamp(1.5rem,3vw,2rem) 0 0}
.einblick-bild img{aspect-ratio:3/2;border-radius:var(--radius-karte)}
/* Porträt (echtes Foto, kein KI-Hinweis) im Block „Einblick“: klein gehalten, 4:5 */
.portraet{margin:clamp(1.5rem,3vw,2rem) 0 0;max-width:min(60vw,16rem)}
.portraet img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-karte);background:var(--color-stein)}
.portraet figcaption{font-size:.85rem;line-height:1.45;color:var(--leise);margin-top:.45rem}

/* Panorama-Trenner vor dem Kontakt: randlos, 2:1 (B12 ist 16:9; bei 21:9 gingen Dachfirst/Schornstein oder die Eingangsstufen verloren).
   object-position oben gewichtet: Beschnitt vor allem in der nassen Einfahrt unten. Auf schmalen Viewports 16:9 unbeschnitten. */
.panorama{margin:0;padding-bottom:clamp(1rem,3vw,2rem)} /* trägt zusätzlich .thema-hell für Hintergrund und --leise */
.panorama img{aspect-ratio:2/1;object-position:50% 22%}
.panorama figcaption{margin-top:.6rem}
@media (max-width:47.99rem){.panorama img{aspect-ratio:16/9}}

/* 8 Demo-Sticky-Fix (wirkt erst, wenn diese Datei auch auf /demo/ geladen wird) */
.seitenkopf{overflow:clip}

/* 9 Reduced Motion: keine Übergänge, kein Versatz. Die Bühne bleibt sticky (Layout, keine Bewegung) –
   sonst wäre der Etagenwechsel auf dem Desktop gar nicht sichtbar. */
@media (prefers-reduced-motion:reduce){
  .etagen{--versatz:0}
  .etagen *{transition:none!important}
  .etagen-marke{transform:none}
}

/* 10 Ohne JavaScript: Basis hell, Marker statisch, Bedienelemente aus ------- */
.etagen:not([data-js]) .etagen-ebene,.etagen:not([data-js]) .etagen-abend{display:none}
.etagen:not([data-js]) .etagen-marke{opacity:1;transform:none}
.etagen:not([data-js]) .etagen-leiste,.etagen:not([data-js]) .etagen-schalter,.etagen:not([data-js]) .etagen-status{display:none}
.etagen:not([data-js]) .etagen-buehne{position:static;height:auto;display:block;margin-inline:0;padding:0}
.etagen:not([data-js]) .etagen-buehne::after{content:none}
.etagen:not([data-js]) .etagen-rahmen{width:100%;justify-self:auto}