/* ==========================================================================
   NH40 · Wohnungsseiten — Motion-Redesign (Phase W)
   Wird NACH dem Stylesheet der Wohnungsseite geladen; das Bauskript entfernt
   vorher die alten .hero-*- und Lichtwort-Regeln.
   ========================================================================== */

/* ==========================================================================
   W1a · Der Hero bleibt geteilt — aber das Foto atmet
   --------------------------------------------------------------------------
   Die Wohnungs-Heros sind Hochformat (1200 × 1600) und sitzen im
   Split-Layout neben dem Text. Vollfläche wäre hier falsch: das Foto
   zeigt einen Raum, keinen Ort. Es bekommt nur den Ken-Burns-Einzug und
   den Drift beim Wegscrollen.
   ========================================================================== */

/* Die bewegte Ebene ist hier das <picture> selbst — es hat den Rahmen und
   overflow:hidden bereits. motion.css legt .m-kenburns__lage sonst absolut;
   das würde die Flex-Spalte des Heros zum Einsturz bringen, also wird die
   Positionierung hier zurückgenommen. Die Animation bleibt. */
.hero-bild.m-kenburns .m-kenburns__lage {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Locator und Fensterzeile liegen ÜBER dem bewegten Bild und dürfen nicht
   mitwandern — sonst rutscht die Bildunterschrift aus dem Rahmen. */
.hero-bild.m-kenburns .v9-locator,
.hero-bild.m-kenburns .v9-fensterzeile { z-index: 3; }

/* ==========================================================================
   W1b · Galerie zuerst
   --------------------------------------------------------------------------
   Direkt nach dem Einstieg, vor jedem Langtext: die Räume als Strecke.
   Erste Kachel doppelt breit — sonst liest sich das Raster als Katalog
   statt als Wohnung.
   ========================================================================== */

.raum-galerie { margin: clamp(3rem, 7vh, 5rem) 0; }

.raum-galerie-kopf {
  max-width: 40rem;
  margin: 0 auto clamp(1.6rem, 4vh, 2.4rem);
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.raum-galerie-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--graphit-10);
}

.raum-galerie-raster figure { margin: 0; position: relative; overflow: hidden; background: var(--sandstein); }
.raum-galerie-raster figure:first-child { grid-column: span 2; grid-row: span 2; }

.raum-galerie-raster img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
  transition: transform 0.8s var(--ease-out);
}
.raum-galerie-raster figure:first-child img { aspect-ratio: 1 / 1; }

/* Berührungs-/Zeigerhinweis (M10): das Bild rückt minimal näher.
   Nur transform — kein Layout, kein Ruckeln. */
@media (hover: hover) {
  .raum-galerie-raster figure:hover img { transform: scale(1.04); }
}

.raum-galerie-bu {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(to top, #1A1A17D9, #1A1A1700);
  color: var(--alabaster);
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
}

@media (max-width: 60rem) {
  .raum-galerie-raster { grid-template-columns: repeat(2, 1fr); }
  .raum-galerie-raster figure:first-child { grid-column: span 2; grid-row: auto; }
  .raum-galerie-raster figure:first-child img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   W1c · Aus der Aussicht-Galerie wird die Lichtstrecke
   --------------------------------------------------------------------------
   Dieselben Fotos, dieselben Bildzeilen — nur nicht mehr als Raster
   nebeneinander, sondern übereinander, vom Scroll geführt.
   ========================================================================== */

.licht-abschnitt { margin: clamp(4rem, 10vh, 7rem) 0; }
.licht-vorspann {
  max-width: 40rem; margin: 0 auto clamp(2rem, 5vh, 3rem);
  padding: 0 clamp(1.25rem, 5vw, 3rem); text-align: center;
}

/* ==========================================================================
   W2 · Buchungsleiste — Desktop rechts, Handy unten
   --------------------------------------------------------------------------
   Ausgebaut aus dem bisherigen .apt-sticky-cta, der nur auf dem Handy lief
   und nur Preis + zwei Links hatte. Jetzt zusätzlich: Teilnoten-Auszug und
   ein Sprung zum Kalender.
   Ab 1100 px steht sie als schmale Spalte rechts und klebt beim Scrollen;
   darunter bleibt sie die Leiste am unteren Rand.
   ========================================================================== */

.buchleiste {
  position: fixed; z-index: 90;
  left: 50%; bottom: 0.85rem; transform: translateX(-50%);
  width: min(calc(100vw - 1.5rem), 40rem);
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.55rem 0.55rem 1rem;
  background: var(--graphit); color: var(--alabaster);
  box-shadow: 0 6px 28px rgba(26,26,23,0.22);
  font-family: 'Inter', sans-serif;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}

/* Auftritt: erst wenn der Hero durch ist — sonst verdeckt sie ihn.
   Versteckt wird NUR, wenn motion.js läuft und das Netz nicht gezogen
   hat — dieselbe Dreifach-Bedingung wie bei jedem Reveal. Ohne JS steht
   die Leiste von Anfang an da; unsichtbare Bedienelemente sind der
   schlimmste Fehlerfall, den diese Datei produzieren kann. */
html.m-js:not(.m-notaus) .buchleiste:not(.ist-da) { opacity: 0; visibility: hidden; }

.buchleiste-preis {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.15rem; line-height: 1; white-space: nowrap;
}
.buchleiste-preis small {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.66; margin-top: 0.25rem;
}

.buchleiste-note {
  font-size: 0.68rem; letter-spacing: 0.08em;
  opacity: 0.78; white-space: nowrap;
  padding-left: 0.85rem; border-left: 1px solid rgba(252,251,248,0.22);
}
.buchleiste-note b { font-weight: 500; }

.buchleiste-tasten { margin-left: auto; display: flex; gap: 0.4rem; }
.buchleiste a {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.7rem 1rem;
  transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}
.buchleiste-haupt { background: var(--alabaster); color: var(--graphit); }
.buchleiste-haupt:hover { background: #fff; }
.buchleiste-neben { border: 1px solid rgba(252,251,248,0.4); color: var(--alabaster); }
.buchleiste-neben:hover { background: rgba(252,251,248,0.12); border-color: var(--alabaster); }
.buchleiste a:focus-visible { outline: 2px solid var(--alabaster); outline-offset: 2px; }

/* Desktop: schmale Spalte rechts */
@media (min-width: 69rem) {
  .buchleiste {
    left: auto; right: 1.5rem; bottom: auto; top: 50%;
    transform: translateY(-50%);
    width: 15.5rem;
    flex-direction: column; align-items: stretch; gap: 0.9rem;
    padding: 1.4rem 1.3rem;
  }
  .buchleiste-note {
    padding-left: 0; border-left: 0; white-space: normal;
    padding-top: 0.85rem; border-top: 1px solid rgba(252,251,248,0.22);
  }
  .buchleiste-tasten { margin-left: 0; flex-direction: column; }
  .buchleiste a { justify-content: center; }

  /* Die fixe Spalte belegt rechts eine Spur (1.5rem Rand + 15.5rem
     Breite). Der Inhalt weicht ihr aus, statt darunter zu verschwinden;
     nur die Vollbild-Buehnen (Hero, Lichtstrecke) laufen unter ihr durch. */
  main { padding-right: 18rem; }
  main .hero, main .licht-abschnitt { margin-right: -18rem; }
}

/* Sehr flache oder sehr schmale Fenster: die Leiste darf den Inhalt nicht
   auffressen — dann nur Preis und der wichtigste Knopf. */
@media (max-width: 30rem) {
  .buchleiste { gap: 0.45rem; padding-left: 0.8rem; }
  .buchleiste-note { display: none; }
  .buchleiste-kalender { display: none; }
}

/* Damit die Leiste unten nichts überdeckt */
@media (max-width: 69rem) {
  .footer { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .buchleiste { transition: none; }
  .raum-galerie-raster img { transition: none; }
}

/* ==========================================================================
   Welle 2 · Hero-Choreografie (02.08. nachts)
   --------------------------------------------------------------------------
   Die Wordmark läuft ihren eigenen Buchstaben-Auftritt (charReveal,
   Bestand der Seite, ease-expo). Die übrigen Zeilen treten gestaffelt
   dazu: Eyebrow → Satz → Fakten → Bewertung → Airbnb-Zeile. Nur der
   Auftritt, danach Ruhe (/motion-web: Hero-Muster).
   Dieselbe Dreifach-Bedingung wie jeder Reveal: ohne JS, nach dem
   Not-Aus oder mit Rücksicht steht alles sofort da — versteckt wird
   ausschliesslich über die Animation selbst (both + from).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.m-js:not(.m-notaus) .hero-content .hero-eyebrow,
  html.m-js:not(.m-notaus) .hero-content .v9-satz,
  html.m-js:not(.m-notaus) .hero-content .hero-subtext,
  html.m-js:not(.m-notaus) .hero-content .hero-bewertung,
  html.m-js:not(.m-notaus) .hero-content > a {
    animation: wohnAuftritt 0.7s var(--ease-out) both;
  }
  html.m-js:not(.m-notaus) .hero-content .hero-eyebrow   { animation-delay: 0.08s; }
  html.m-js:not(.m-notaus) .hero-content .v9-satz        { animation-delay: 0.55s; }
  html.m-js:not(.m-notaus) .hero-content .hero-subtext   { animation-delay: 0.68s; }
  html.m-js:not(.m-notaus) .hero-content .hero-bewertung { animation-delay: 0.80s; }
  html.m-js:not(.m-notaus) .hero-content > a             { animation-delay: 0.92s; }
}

@keyframes wohnAuftritt {
  from { opacity: 0; transform: translateY(14px); }
}