/* AVORENIX – Demo-Ergänzungen (/demo/). Lädt direkt hinter /_astro/haus.BTfLQtBl.css,
   gewinnt bei gleicher Spezifität durch die Reihenfolge; kein !important, keine Änderung am gehashten CSS.
   Umsetzung der Demo-Verbesserungen 1–4 aus konzept/KONZEPT-Redesign.md (Abschnitt 5).
   Markup-Ergänzung in demo/index.html: .rd-bild > .rd-plus-haus > (.rd-grafik, .rd-punkte, .rd-plus-leiste). */

/* 1 Sticky-Haus auf dem Desktop reparieren ------------------------------------------
   overflow:hidden macht den Seitenkopf zum Scroll-Container, dadurch haftet nichts am Viewport.
   clip schneidet genauso ab, erzeugt aber keinen Scroll-Container. */
.seitenkopf{overflow:clip}

/* Chrome begrenzt ein haftendes Grid-Element nicht auf seinen Grid-Bereich (Zeilen 2–5), das Haus
   würde über die Szenarien ragen. Deshalb haftet auf dem Desktop der innere Wrapper .rd-plus-haus,
   dessen Containing Block die auf Zeilen 2–5 gestreckte Bildspalte ist. Die absolut positionierten
   Ebenen des Bundles (.rd-grafik, .rd-punkte) beziehen sich automatisch auf diesen Wrapper.
   .rd-bild trägt kein Seitenverhältnis mehr (das hat der Wrapper), dafür Platz für die Statuszeile. */
.rd-plus-haus{position:relative;aspect-ratio:4/3}
.rd-bild{aspect-ratio:auto;padding-bottom:2.7rem}
@media (width >= 64rem){
  .rd-bild{position:static;align-self:stretch}
  .rd-plus-haus{position:sticky;top:1.5rem}
  /* Programm-Scroll auf die Raumwahl bündig mit dem haftenden Haus */
  .rd-raum{scroll-margin-top:1.5rem}
}

/* 2 Statuszeile (aria-live) als Bildunterschrift unter dem Haus, Kennzeichnung „simuliert“
   in der freien linken unteren Bildecke. Beides wandert mit dem haftenden Haus mit und bleibt
   auf Desktop und Mobil beim Bedienen im Blick. */
.rd-plus-leiste{position:absolute;top:100%;left:0;right:0;z-index:2;padding:.4rem .25rem 0;pointer-events:none;font-size:.86rem;line-height:1.35}
.rd-plus-status{margin:0;min-height:1.35em;font-weight:600;color:var(--color-elfenbein);text-wrap:pretty}
.rd-plus-status:empty::before{content:"\00a0"}
.rd-plus-kennzeichnung{position:absolute;left:.25rem;bottom:calc(100% + .3rem);margin:0;color:var(--leise);font-size:.76rem;letter-spacing:.02em;white-space:nowrap}
.rd-plus-kennzeichnung::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.4rem;border-radius:50%;border:1px solid var(--leise);vertical-align:.05em}

/* 3 Rückmeldung im Bild (nur CSS) ------------------------------------------------------
   Offenes Fenster als getönte Fläche statt Weißblock, Heizfläche kräftiger, Marker pulst
   einmal beim Zustandswechsel (bei reduzierter Bewegung greift der globale Not-Aus des Bundles). */
.rd-flaeche[data-heizt]{opacity:.4}
.rd-fenster{background:var(--color-salbei-hell)}
.rd-fenster[data-offen]{opacity:.8}
@keyframes rd-plus-puls{0%{scale:1}50%{scale:1.45}100%{scale:1}}
.rd-punkt[data-offen] .rd-punkt-zeichen,.rd-punkt[data-heizt] .rd-punkt-zeichen,.rd-punkt[data-licht] .rd-punkt-zeichen{animation:rd-plus-puls .55s ease-out}
.rd-punkt[data-offen] .rd-punkt-zeichen{background:var(--color-salbei-hell)}

/* 4 Mobil: Haus samt Statuszeile oben fixiert (höchstens 40svh), Raumwahl direkt darunter ---
   Als Flex-Spalte in DOM-Reihenfolge statt Grid, damit .rd-bild innerhalb der gesamten Demo haften
   kann (im Grid wäre es auf seine eigene Zeile beschränkt). .rd-bild steht in demo/index.html vor
   .rd-raum, damit Tab-Reihenfolge und Anzeige übereinstimmen; das Desktop-Grid ordnet über
   grid-template-areas unabhängig davon. Höhe über die Breite begrenzt, damit Masken und Marker
   deckungsgleich bleiben (kein object-fit). */
@media (width <= 63.99rem){
  .rd{display:flex;flex-direction:column}
  .rd-bild{position:sticky;top:0;z-index:5;align-self:center;margin-inline:0;width:min(114%,calc((40vh - 2.7rem) * 4 / 3));width:min(114%,calc((40svh - 2.7rem) * 4 / 3))}
  /* Deckendes Band hinter Haus und Statuszeile, damit nichts durch den transparenten Himmel scheint;
     unten um die Flex-Lücke (1.25rem) verlängert, damit auch eine dritte Meldungszeile gedeckt ist */
  .rd-bild::before{content:"";position:absolute;inset:-.5rem -50vw -1.25rem;z-index:-1;background:var(--color-graphit)}
  .rd-plus-leiste{font-size:.8rem;padding-top:.35rem}
  /* Fokus- und Programm-Scrolls landen unterhalb des haftenden Hauses */
  .rd-raum{scroll-margin-top:calc(40vh + 1rem);scroll-margin-top:calc(40svh + 1rem)}
  .rd button{scroll-margin-top:calc(40vh + 2rem);scroll-margin-top:calc(40svh + 2rem)}
  .rd-bild button{scroll-margin-top:0}
}