/* ==========================================================================
   NH40 · Neuer Foto-Hero (H1)
   Wird NACH dem Stylesheet der Live-Seite geladen. Die alten .hero-*-Regeln
   entfernt das Bauskript, damit hier nichts gegeneinander arbeitet.
   ========================================================================== */

.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--graphit);
  padding: 0;
}

.hero-bild { position: absolute; inset: 0; }

/* Korn + Vignette.
   Das Hausfoto liegt nur in 902 px vor und ist auf 1804 px hochgerechnet.
   Feines Korn bricht die Glätte der Hochrechnung, die Vignette dunkelt die
   Ränder, wo die Weichheit am ehesten auffällt. Beides ohne eine einzige
   zusätzliche Anfrage. */
.hero-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, #1A1A17FA 0%, #1A1A17E8 20%, #1A1A17A8 40%, #1A1A1747 60%, #1A1A1700 80%),
    radial-gradient(125% 95% at 50% 34%, #1A1A1700 40%, #1A1A1759 100%);
}
.hero-schleier::after {
  content: ''; position: absolute; inset: 0;
  opacity: 0.19; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

.hero-inhalt {
  position: relative; z-index: 2; width: 100%;
  color: var(--alabaster);
  padding: 0 clamp(1.25rem, 5vw, 4.5rem) clamp(1.75rem, 5svh, 3.5rem);
  max-width: 64rem;
}

.hero-kicker {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.78;
}

.hero-statement {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  margin: 0.75rem 0 0;
  text-wrap: balance;
}
.hero-statement em { font-style: italic; opacity: 0.9; display: block; }

/* ---------- Beweisleiste ----------
   Nur haus-weit belegte Zahlen. Die Kurtaxe steht mit ihrer Einschränkung
   da, weil sie bei Catarina eben NICHT enthalten ist.
   Wert oben, Bezeichnung darunter: nebeneinander gesetzt las sich
   „2017 · Superhost seit" verkehrt herum. */
.hero-beweis {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4svh, 1.4rem) clamp(1.5rem, 4vw, 3rem);
  margin: clamp(1.1rem, 2.6svh, 1.9rem) 0 0;
  padding: clamp(1rem, 2.4svh, 1.5rem) 0 0;
  border-top: 1px solid rgba(252,251,248,0.24);
}
.hero-beweis b {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-beweis span {
  display: block; margin-top: 0.3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase; opacity: 0.8;
}
.hero-beweis .stern {
  display: inline; margin: 0; font-size: 0.72em;
  opacity: 1; letter-spacing: 0; text-transform: none;
}

.hero-cta-gruppe {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: clamp(1.2rem, 2.8svh, 2rem);
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 0.95rem 1.5rem;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.cta-trenner { font-style: normal; }
.hero-cta em {
  font-style: italic; font-weight: 400; text-transform: none;
  letter-spacing: 0.02em; font-size: 1.05em;
}
.hero-cta-primaer { background: var(--alabaster); color: var(--graphit); }
.hero-cta-primaer:hover { background: #fff; }
.hero-cta-sekundaer { border: 1px solid rgba(252,251,248,0.45); color: var(--alabaster); }
.hero-cta-sekundaer:hover { background: rgba(252,251,248,0.12); border-color: var(--alabaster); }
.hero-cta:focus-visible { outline: 2px solid var(--alabaster); outline-offset: 3px; }
.hero-cta svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- Handy-Regie ----------
   375 px ist die Hauptbühne, nicht der Sonderfall. Die Beweisleiste steht
   als saubere Zweierspalte, und die Knopf-Beschriftung bricht an einer
   gewollten Stelle um statt mitten im Satz. */
@media (max-width: 34rem) {
  .hero-beweis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.25rem; }
  .hero-beweis b { font-size: 1.25rem; }
  .hero-beweis span { font-size: 0.63rem; letter-spacing: 0.09em; }

  .hero-cta-gruppe { gap: 0.5rem; }
  .hero-cta {
    width: 100%; justify-content: space-between;
    align-items: flex-start; gap: 1rem; padding: 0.85rem 1.1rem;
    font-size: 0.72rem; letter-spacing: 0.08em;
  }
  .hero-cta em { display: block; margin-top: 0.15rem; }
  .cta-trenner { display: none; }
  .hero-cta svg { flex: none; margin-top: 0.15rem; }
}

/* Flaches Fenster (Landscape-Handy): der Hero darf keine Textwand werden. */
@media (max-height: 30rem) {
  .hero-statement { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .hero-beweis { gap: 0.2rem 1.1rem; padding-top: 0.7rem; margin-top: 0.7rem; }
}

/* ==========================================================================
   Abschnitte, die im neuen Aufbau Motion tragen
   ========================================================================== */

/* Die Lichtstrecke bricht bewusst aus der Textspalte aus — sie ist der
   einzige Vollflächen-Moment nach dem Hero. */
.licht-abschnitt { margin: clamp(4rem,10vh,7rem) 0; }
.licht-vorspann {
  max-width: 40rem;
  margin: 0 auto clamp(2rem,5vh,3rem);
  padding: 0 clamp(1.5rem,5vw,3rem);
  text-align: center;
}
/* Beschriftung im Muster der übrigen Abschnitte (.wohnungen-label & Co.),
   nur mittig statt linksbündig — die Lichtstrecke ist zentriert gesetzt. */
.licht-label {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--graphit-60);
}
.licht-label-linie { width: 2rem; height: 1px; background: var(--graphit-20); }

.licht-vorspann h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(1.8rem,4vw,2.8rem); line-height: 1.1; margin-top: 0.6rem;
}
.licht-vorspann h2 em { font-style: italic; color: var(--graphit-70); }
.licht-vorspann p { color: var(--graphit-70); margin-top: 1rem; }

/* Zahlen-Band: hier zählen die Zahlen, weil man hineinscrollt — anders als
   im Hero, wo sie bei Sekunde null schon dastehen müssen. */
.zahlen-band {
  background: var(--sandstein);
  padding: clamp(3rem,7vh,5rem) clamp(1.5rem,5vw,3rem);
}
.zahlen-band-inner {
  max-width: 62rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem,4vw,3rem);
}
@media (max-width: 48rem) { .zahlen-band-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }
.zahlen-band-wert {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.4rem,6vw,3.6rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zahlen-band-wert .stern { font-size: 0.5em; }
.zahlen-band-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--graphit-60); margin-top: 0.6rem;
}

/* ==========================================================================
   Kartenbilder — NUR für den Prototyp
   --------------------------------------------------------------------------
   Die Live-Seite verweist auf „…-karte-360/720/1080.avif|webp|jpg". Diese
   54 Ableitungen wurden nie erzeugt: sie fehlen im Repo UND antworten auf
   nh40.house mit 404. Die drei Wohnungskarten stehen dadurch seit jeher
   ohne Foto da — auf der Live-Seite genauso wie hier.

   Damit die neue Reihenfolge überhaupt beurteilbar ist, liegen hier
   Ersatz-Ableitungen aus den vorhandenen Quellfotos (4:5, 360/720/1080).
   Sie liegen bewusst in _neu/ und ändern an der Live-Seite nichts.
   Der richtige Fix gehört in die echten Pfade — mitsamt WebP, sobald ein
   Encoder da ist.
   ========================================================================== */

html .k-catarina-hero    { background-image: url('/img/karten/catarina-hero-karte-720.jpg'); }
html .k-catarina-sunroom { background-image: url('/img/karten/catarina-sunroom-karte-720.jpg'); }
html .k-hannes-hero      { background-image: url('/img/karten/hannes-hero-karte-720.jpg'); }
html .k-hannes-sessel    { background-image: url('/img/karten/hannes-sessel-karte-720.jpg'); }
html .k-stillach-hero    { background-image: url('/img/karten/stillach-hero-karte-720.jpg'); }
html .k-stillach-erker   { background-image: url('/img/karten/stillach-erker-karte-720.jpg'); }

@supports (background-image: image-set(url('x.avif') type('image/avif') 1x)) {
  html .k-catarina-hero    { background-image: image-set(url('/img/karten/catarina-hero-karte-720.avif') type('image/avif') 1x, url('/img/karten/catarina-hero-karte-1080.avif') type('image/avif') 2x); }
  html .k-catarina-sunroom { background-image: image-set(url('/img/karten/catarina-sunroom-karte-720.avif') type('image/avif') 1x, url('/img/karten/catarina-sunroom-karte-1080.avif') type('image/avif') 2x); }
  html .k-hannes-hero      { background-image: image-set(url('/img/karten/hannes-hero-karte-720.avif') type('image/avif') 1x, url('/img/karten/hannes-hero-karte-1080.avif') type('image/avif') 2x); }
  html .k-hannes-sessel    { background-image: image-set(url('/img/karten/hannes-sessel-karte-720.avif') type('image/avif') 1x, url('/img/karten/hannes-sessel-karte-1080.avif') type('image/avif') 2x); }
  html .k-stillach-hero    { background-image: image-set(url('/img/karten/stillach-hero-karte-720.avif') type('image/avif') 1x, url('/img/karten/stillach-hero-karte-1080.avif') type('image/avif') 2x); }
  html .k-stillach-erker   { background-image: image-set(url('/img/karten/stillach-erker-karte-720.avif') type('image/avif') 1x, url('/img/karten/stillach-erker-karte-1080.avif') type('image/avif') 2x); }
}

/* ---------- Wetterzeile im Hero (M7) ----------
   Aus dem alten Hero übernommen. Ohne Messwerte stand dort bisher eine
   leere Zeile; jetzt steht ein Satz da, der auch ohne Dienst stimmt.
   Sobald echte Werte eintreffen, füllt das vorhandene Skript
   [data-w-text] — und die Regel darunter blendet den Ersatz aus. */
.hero-wetter {
  margin: clamp(0.9rem, 2svh, 1.4rem) 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.09em;
  color: rgba(252,251,248,0.72);
}
.hero-wetter .punkt { margin: 0 0.5em; opacity: 0.5; }
[data-w-text]:not(:empty) ~ [data-w-ersatz] { display: none; }

/* ---------- Rücksicht ----------
   Der Hero selbst bewegt sich über motion.css (Ken-Burns), das seinen
   eigenen Reduced-Motion-Zweig mitbringt. Hier bleiben nur die
   Zustandswechsel der Knöpfe — auch die werden abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  .hero-cta { transition: none; }
}

/* ============================================================
   Karten-Harmonie (Neos Fund 02.08.): die drei Wohnungskarten
   teilen sich ein Zeilenraster — Titel, Fakten, Bewertung und
   Verfügbarkeit beginnen in allen Spalten auf gleicher Höhe.
   Ohne Subgrid-Unterstützung bleibt alles wie zuvor (Zugabe).
   html-Präfix: gewinnt gegen die Body-<style>-Blöcke der Seite.
   ============================================================ */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 721px) {
    html .wohnungen-liste > .wohnungs-karte {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 9;
      align-content: start;
    }
  }
}

/* ============================================================
   Phase S · Startseite 7 → 10 (02.08., Neos Auftrag)
   Alle Zugaben: ohne JS/ohne Unterstützung bleibt die Seite
   vollständig; Reduced Motion bekommt den ruhigen Endzustand.
   ============================================================ */

/* --- S1 · Hero-Auftritt: Kicker → Claim → Beweise → Rest ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.m-js:not(.m-notaus) .hero-kicker,
  html.m-js:not(.m-notaus) .hero-statement,
  html.m-js:not(.m-notaus) .hero-beweis,
  html.m-js:not(.m-notaus) .hero-wetter,
  html.m-js:not(.m-notaus) .hero-cta-gruppe {
    animation: heroAuftritt 0.7s var(--ease-out) both;
  }
  html.m-js:not(.m-notaus) .hero-kicker     { animation-delay: 0.10s; }
  html.m-js:not(.m-notaus) .hero-statement  { animation-delay: 0.24s; }
  html.m-js:not(.m-notaus) .hero-beweis     { animation-delay: 0.46s; }
  html.m-js:not(.m-notaus) .hero-wetter     { animation-delay: 0.60s; }
  html.m-js:not(.m-notaus) .hero-cta-gruppe { animation-delay: 0.70s; }
}
@keyframes heroAuftritt {
  from { opacity: 0; transform: translateY(14px); }
}

/* --- S2 · Naht Hero → Karten: das Foto bleibt beim Austritt zurück,
       die Kartensektion schiebt sich darüber ---------------------- */
/* Der Rahmen trägt heute KEINE Animation (Einzug liegt auf dem img,
   der Scroll-Drift auf der __lage) — er kann die Parallax allein nehmen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.m-js:not(.m-fallback) .hero .m-kenburns.hero-bild {
      animation: s2Zurueckbleiben linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes s2Zurueckbleiben {
  to { transform: translateY(16svh); }
}
html .wohnungen {
  position: relative;
  z-index: 2;
  background: var(--alabaster);
}

/* --- S3 · Hausschnitt zeichnet sich MIT dem Scroll (Scrub) -------- */
/* Benannte Timeline auf dem SVG (hat eine CSS-Box) — view() direkt auf
   SVG-KINDERN ist keine gültige Scroll-Timeline, die Animation liefe als
   Zeit-Animation ab Ladezeit durch (gefunden 02.08. per diag2). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Name auf dem HTML-Wrapper — auf dem <svg> selbst erzeugt Chrome
       keine View-Timeline (Animation liefe mit duration auto = 0s durch) */
    html.m-js:not(.m-fallback) .haus-schnitt-svg-wrap {
      view-timeline-name: --schnitt;
      view-timeline-axis: block;
    }
    html.m-js:not(.m-fallback) .schnitt-svg .kontur {
      /* Startversatz: die Basis ist 0 (Altfund 02.08. — die Kontur-
         „Selbstzeichnung" war live ein stiller No-Op, weil nie ein
         Ausgangswert gesetzt wurde; to{0} von 0 zeichnet nichts).
         Pfadumfang ~1230, dasharray 1300 — 1300 deckt ihn ab. */
      stroke-dashoffset: 1300;
      animation: konturZeichnen linear both;
      animation-timeline: --schnitt;
      animation-range: entry 5% cover 45%;
    }
    html.m-js:not(.m-fallback) .schnitt-svg .schnitt-buehne {
      animation: schnittEin linear both;
      animation-timeline: --schnitt;
      animation-range: cover 32% cover 52%;
    }
  }
}

/* --- S4 · Lichtwort-Glut: EIN Aufpulsen beim Reveal, Hover verstärkt */
@media (prefers-reduced-motion: no-preference) {
  html.m-js .wohnungs-karte.ist-da .v9-karte-licht .glut {
    animation: glutPuls 1.1s var(--ease-out) 0.55s 1 both;
  }
}
html .wohnungs-karte .v9-karte-licht .glut {
  transition: transform 0.25s var(--ease-out);
}
html .wohnungs-karte:hover .v9-karte-licht .glut {
  transform: scale(1.35);
}
@keyframes glutPuls {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.8); }
  100% { transform: scale(1); }
}

/* --- S5 · Der Entfernungsstern zeichnet sich beim Eintritt -------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.m-js:not(.m-fallback) .km-figur {
      view-timeline-name: --kmstern;
      view-timeline-axis: block;
    }
    html.m-js:not(.m-fallback) .km-svg .km-linie {
      transform-box: view-box;
      transform-origin: 50% 48.9%;
      animation: kmWachsen linear both;
      animation-timeline: --kmstern;
      animation-range: entry 10% cover 38%;
    }
    html.m-js:not(.m-fallback) .km-svg .km-dot {
      animation: kmDot linear both;
      animation-timeline: --kmstern;
      animation-range: cover 22% cover 48%;
    }
  }
}
@keyframes kmWachsen {
  from { transform: scale(0.12); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes kmDot {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- S6 · Vorschau im Bühnen-Idiom (geteiltes m-buehnenwort) ------ */
html .av-buehne {
  position: relative;
  background: var(--graphit);
  margin-bottom: 0;
}
html .av-buehne .m-buehnenwort {
  padding: 3.2rem 1.1rem 0.9rem;
}
html .m-buehnenwort .aktivitaeten-vorschau-card-meta {
  margin: 0 0 0.3rem;
  color: inherit;
  opacity: 0.85;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html .m-buehnenwort .aktivitaeten-vorschau-card-titel {
  margin: 0;
  color: inherit;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
  line-height: 1.15;
}
html .aktivitaeten-vorschau-card-link:hover .aktivitaeten-vorschau-card-titel {
  text-decoration: none;
}
html .aktivitaeten-vorschau-card-link:hover .av-buehne img {
  transform: scale(1.04);
}
html .av-buehne img {
  transition: transform 0.6s var(--ease-out);
}