/* Haus NH40 local font map. The .woff2 files are hosted in this same /fonts directory on nh40.house. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}




@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-400-600.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic-400-600.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
.stimmen-headline:has(+ .stimmen-stammgaeste) {
  /* U13: Wenn die Stammgast-Zeile folgt, rückt die Headline näher heran.
     Über :has() statt negativem Rand — ein negativer Rand hing an der
     Headline-Marge und überlappte sie unter 720px um 4px. Fällt :has()
     aus, entsteht nur ein größerer Abstand, nichts bricht. */
  margin-bottom: 1.5rem;
}

.stimmen-stammgaeste {
  /* Belegte Wiederkehr-Aussage: Melanie 5×, David 3×, Ray 3×, Jahn 2× —
     jede Zahl durch eine namentliche Bewertung gedeckt. */
  margin: 0 0 5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--graphit-60);
  max-width: 620px;
}

.stimmen-fussnote {
  margin-top: 4.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--graphit-60);
  max-width: 620px;
}
.stimmen-fussnote em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.1em;
}
.stimmen-fussnote strong {
  font-weight: 600;
  color: var(--graphit-80);
}


/* ============================================================
   nh40.house — Homepage
   Editorial pattern aus den Wohnungs-Detailseiten geerbt.
   Zwei neue Signature-Elemente: Haus-Schnitt + Entfernungs-Stern.
   ============================================================ */

:root {
  color-scheme: light only;
  --alabaster: #FCFBF8;
  --sandstein: #F5F2EC;
  --graphit: #1A1A17;
  --graphit-80: #1A1A17CC;
  --graphit-70: #1A1A17B3;
  --graphit-60: #1A1A17A1;
  --graphit-40: #1A1A1766;
  --graphit-20: #1A1A1733;
  --graphit-10: #1A1A171A;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Nav ist fixed (top:1.7rem + ~4rem Höhe) — Anker-Sprünge dürfen nicht darunter landen */
  scroll-padding-top: 6.5rem;
}

body {
  background: var(--alabaster);
  color: var(--graphit);
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip /* hidden machte den Body zum Scroll-Container und toetete jedes position:sticky (Lichtstrecken-Buehne, Buchungsspalte, Sprungleiste) */;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 999;
  background: var(--graphit);
  color: var(--alabaster);
  padding: 0.75rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   MARGINALIE (oben, dezent — fadet bei Scroll weg)
   ===================================================== */
.marginalie {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  padding: 0.45rem 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-70);
  background: var(--alabaster);
  text-align: center;
  border-bottom: 1px solid transparent;
  /* Fadet weg sobald gescrollt wird — Hero gewinnt Höhe zurück */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: auto;
}
html.is-scrolled .marginalie {
  /* Marginalie bleibt statisch — kein Fade, damit die Nav nicht nachrücken muss (kein Ruck beim Scrollen) */
}
.marginalie-trenner {
  margin: 0 0.7em;
  color: var(--graphit-20);
}
@media (max-width: 720px) {
  .marginalie {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    padding: 0.4rem 1rem;
  }
  .marginalie-trenner { margin: 0 0.45em; }
}

/* =====================================================
   NAV
   ===================================================== */
.nav {
  position: fixed;
  top: 1.7rem;
  left: 0; right: 0;
  z-index: 100;
  /* Fluchtlinie: der Inhalt der Leiste sitzt auf derselben Kante wie
     Brotkrumen und Seiteninhalt (Raster 1400 + 48). Bei schmalen
     Fenstern bleiben die alten 2rem. Gefunden 31.08.: die Wortmarke
     stand bei 32 px, die Brotkrume bei 68 px — auf 1920 px waren es
     32 gegen 308. */
  padding: 1rem max(3rem, calc((100% - 1400px) / 2 + 48px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--alabaster);
  border-bottom: 1px solid var(--graphit-10);
}
/* Nav bleibt fix bei top:1.7rem — kein Nachrücken, kein Springen beim Scrollen */

/* nh40-nav-unify */
.nav-wordmark {
  display: inline-block;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--graphit);
  text-decoration: none;
  line-height: 1.2;
}
.nav-wordmark .trenner {
  display: inline-block;
  color: var(--graphit-70);
  margin: 0 0.1em;
  font-weight: 300;
  transform: scaleY(0.78);
}
.nav-wordmark .nh, .nav-wordmark .vier-null { font-style: normal; }

.nav-links {
  display: flex;
  gap: clamp(1.1rem, 1.8vw, 1.75rem);
  list-style: none;
}
.nav-rechts {
  display: flex;
  align-items: center;
}
.nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit-80);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.nav-links a:hover { color: var(--graphit); }

/* Sprachschalter: rechts, mit Hairline-Trenner zur Sektions-Liste */
.nav-sprache {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-60);
  text-decoration: none;
  margin-left: 1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--graphit-20);
  transition: color 0.2s var(--ease-out);
}
.nav-sprache:hover { color: var(--graphit); }

/* =====================================================
   MOBILE NAV — Hamburger + Drawer
   Volle Link-Liste statt versteckter Items.
   ===================================================== */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem 0;
  margin-left: 1rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  position: relative;
}
.nav-toggle-linie {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--graphit);
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out), top 0.3s var(--ease-out);
}
.nav-toggle-linie:nth-child(1) { top: 9px; }
.nav-toggle-linie:nth-child(2) { top: 18px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-linie:nth-child(1) {
  top: 14px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-linie:nth-child(2) {
  top: 14px;
  transform: rotate(-45deg);
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 360px);
  background: var(--alabaster);
  border-left: 1px solid var(--graphit-10);
  z-index: 98;
  padding: 6rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  visibility: hidden;
  overflow-y: auto;
}
.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.nav-drawer a {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit);
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--graphit-10);
}
.nav-drawer a:last-child {
  border-bottom: 0;
}
.nav-drawer-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-bottom: 1rem;
}
.nav-drawer-marker {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--graphit);
  margin-top: auto;
  padding-top: 2rem;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 23, 0.35);
  z-index: 97;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out);
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 720px) {
  .nav { padding: 0.85rem 1.25rem; top: 1.5rem; }
  .nav-wordmark { font-size: 1.2rem; }
  /* Inline-Links und Sprachschalter raus — alles in den Drawer */
  .nav-links { display: none; }
  .nav-sprache {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .nav-toggle { display: block; }
}
/* Drawer ist auch auf Desktop verfügbar, aber nur Mobile-Burger triggert ihn */
@media (min-width: 721px) {
  .nav-drawer, .nav-overlay { display: none; }
}

/* =====================================================
   HERO
   ===================================================== */

/* Typo-Block. Die Marginalie oben trägt Ort + Koordinate schon —
   daher keine zweite Datumszeile. Oberer Innenabstand hält Platz
   für die fixierte Nav frei. */

/* Hero-CTA: dezenter Sekundär-Link, editorial */

/* Foto-Platte unten — vollbreit, zeichnet sich von rechts herein */
@keyframes heroPlatteDraw { to { clip-path: inset(0 0 0 0%); } }

/* =====================================================
   ERZAEHL-BLOCK — emotionale Brücke nach dem Hero
   ===================================================== */
.erzaehlung {
  background: var(--alabaster);
  padding: 6rem 3rem 4rem;
  position: relative;
}
.erzaehlung-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.erzaehlung-marker {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-70);
  display: block;
  margin-bottom: 2.2rem;
}
.erzaehlung-text {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--graphit);
}
.erzaehlung-text em {
  font-style: italic;
}
.erzaehlung-trenner {
  width: 32px;
  height: 1px;
  background: var(--graphit-40);
  margin: 2.5rem auto 0;
}
@media (max-width: 720px) {
  .erzaehlung { padding: 4rem 1.25rem 3rem; }
  .erzaehlung-text { font-size: clamp(1.2rem, 5.5vw, 1.5rem); line-height: 1.45; }
}

/* =====================================================
   AKTIVITAETEN-VORSCHAU — Brücke zur Sub-Seite
   ===================================================== */
.aktivitaeten-vorschau {
  background: var(--alabaster);
  padding: 7rem 3rem 8rem;
  position: relative;
}
.aktivitaeten-vorschau-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.aktivitaeten-vorschau-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit-70);
  margin-bottom: 2rem;
}
.aktivitaeten-vorschau-label-linie {
  flex: 0 0 2.5rem;
  height: 1px;
  background: var(--graphit-40);
}
.aktivitaeten-vorschau-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--graphit);
  margin: 0 0 1.5rem;
  max-width: 24ch;
}
.aktivitaeten-vorschau-headline em {
  font-style: italic;
}
.aktivitaeten-vorschau-prosa {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--graphit-80);
  max-width: 60ch;
  margin: 0 0 4rem;
}
.aktivitaeten-vorschau-grid {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.aktivitaeten-vorschau-card {
  display: flex;
  flex-direction: column;
}
.aktivitaeten-vorschau-bild {
  aspect-ratio: 3 / 2;
  background: var(--sandstein);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.aktivitaeten-vorschau-bild picture,
.aktivitaeten-vorschau-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aktivitaeten-vorschau-card-link { display: contents; color: inherit; text-decoration: none; cursor: pointer; }
.aktivitaeten-vorschau-card-link:hover .aktivitaeten-vorschau-card-titel { text-decoration: underline; text-underline-offset: 3px; }
.aktivitaeten-vorschau-cue { display: inline-block; margin-top: 0.75rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphit-70); border-bottom: 1px solid var(--graphit-40); padding-bottom: 2px; transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.aktivitaeten-vorschau-card-link:hover .aktivitaeten-vorschau-cue { color: var(--graphit); border-color: var(--graphit); }
.aktivitaeten-vorschau-card-titel {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--graphit);
  margin: 0 0 0.4rem;
}
.aktivitaeten-vorschau-card-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--graphit-70);
  margin: 0;
}
.aktivitaeten-vorschau-cta-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--graphit-15, rgba(26,26,23,0.12));
}
.aktivitaeten-vorschau-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphit);
  text-decoration: none;
  padding: 1rem 1.5rem;
  background: var(--graphit);
  color: var(--alabaster);
  border: 1px solid var(--graphit);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.aktivitaeten-vorschau-cta:hover,
.aktivitaeten-vorschau-cta:focus-visible {
  background: var(--alabaster);
  color: var(--graphit);
}
.aktivitaeten-vorschau-cta-ico {
  font-size: 1.1em;
  transition: transform 200ms var(--ease-out);
}
.aktivitaeten-vorschau-cta:hover .aktivitaeten-vorschau-cta-ico {
  transform: translateX(3px);
}
.aktivitaeten-vorschau-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphit-60);
}
@media (max-width: 960px) {
  .aktivitaeten-vorschau-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .aktivitaeten-vorschau-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
  }
}
@media (max-width: 720px) {
  .aktivitaeten-vorschau {
    padding: 4.5rem 1.25rem 5rem;
  }
  .aktivitaeten-vorschau-prosa {
    margin-bottom: 2.5rem;
  }
  .aktivitaeten-vorschau-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .aktivitaeten-vorschau-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }
  .aktivitaeten-vorschau-cta-zeile {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .aktivitaeten-vorschau-cta {
    width: 100%;
    justify-content: space-between;
    font-size: 0.82rem;
  }
}

/* =====================================================
   WOHNUNGS-KARTEN
   ===================================================== */
.wohnungen {
  background: var(--alabaster);
  padding: 8rem 3rem;
  position: relative;
}
.wohnungen-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.wohnungen-label {
  display: flex;
  align-items: 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);
}
.wohnungen-label-linie {
  width: 40px;
  height: 1px;
  background: var(--graphit-60);
}
.wohnungen-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--graphit);
  margin-bottom: 1.5rem;
  max-width: 22ch;
}
.wohnungen-headline em {
  font-style: italic;
}
.wohnungen-lead {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--graphit-80);
  max-width: 60ch;
  margin-bottom: 5rem;
}

.wohnungen-liste {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

/* D2: zweite Bildebene, Crossfade beim Hover (Desktop) */
.wohnungs-karte-bild-hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
.wohnungs-karte:hover .wohnungs-karte-bild-hover {
  opacity: 1;
  transform: scale(1.04);
}
@media (hover: none) {
  .wohnungs-karte-bild-hover { display: none; }
}

/* B3: Entscheidungshilfe — welche Wohnung passt */
.wohnwahl {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--graphit-10);
}
.wohnwahl-frage {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 2rem;
  color: var(--graphit);
}
.wohnwahl-frage em { font-style: italic; }
.wohnwahl-liste {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}
.wohnwahl-zeile {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid var(--graphit);
  padding-top: 1rem;
  transition: opacity 0.2s var(--ease-out);
}
.wohnwahl-zeile:hover { opacity: 0.62; }
.wohnwahl-fall {
  display: block;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--graphit-70);
  margin-bottom: 0.75rem;
}
.wohnwahl-ziel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--graphit);
}
.wohnwahl-ziel-pfeil { font-size: 0.95rem; }
@media (max-width: 768px) {
  .wohnwahl-liste { grid-template-columns: 1fr; gap: 1.75rem; }
  .wohnwahl { margin-top: 3rem; }
}

.wohnungs-karte {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.4s var(--ease-out);
  /* Signature-Hairline: dünner linker Akzent in karteneigenem Ton */
  padding-left: 1.25rem;
  border-left: 1px solid var(--graphit-20);
  transition: transform 0.4s var(--ease-out), border-left-color 0.4s var(--ease-out);
}
/* Drei dezent unterschiedliche Töne — alle aus der Sandstein/Graphit-Welt */
.wohnungs-karte[data-tone="hannes"] { border-left-color: rgba(110, 95, 75, 0.55); } /* Hannes-Holzton */
.wohnungs-karte[data-tone="catarina"] { border-left-color: rgba(170, 150, 115, 0.55); } /* Warmstone */
.wohnungs-karte[data-tone="stillach"] { border-left-color: rgba(85, 100, 110, 0.55); } /* Bluestone */
.wohnungs-karte:hover { transform: translateY(-4px); border-left-color: var(--graphit); }

.wohnungs-karte-bild {
  width: 100%;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--sandstein);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.wohnungs-karte-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,23,0) 50%, rgba(26,26,23,0.35) 100%);
  pointer-events: none;
}
.wohnungs-karte:hover .wohnungs-karte-bild {
  /* dezenter Bild-Zoom */
}
.wohnungs-karte-bild-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease-out);
}
.wohnungs-karte:hover .wohnungs-karte-bild-inner {
  transform: scale(1.04);
}

/* Wordmark-Overlay: großes italic Display über das Foto,
   halb-transparent, am unteren Rand gecroppt — verbindet
   Karte → Detailseite typografisch. */
.wohnungs-karte-overlay {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.4rem;
  z-index: 2;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--alabaster);
  opacity: 0.92;
  pointer-events: none;
  white-space: nowrap;
  /* leichter Schatten-Boost für Lesbarkeit auf jeder Bildhelligkeit */
  text-shadow: 0 1px 30px rgba(26, 26, 23, 0.35);
  transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out);
}
.wohnungs-karte:hover .wohnungs-karte-overlay {
  transform: translateY(-3px);
  opacity: 1;
}

.wohnungs-karte-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-bottom: 0.7rem;
}
.wohnungs-karte-meta-trenner {
  margin: 0 0.5em;
  color: var(--graphit-20);
}

.wohnungs-karte-titel {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--graphit);
  margin-bottom: 0.8rem;
}
.wohnungs-karte-titel em { font-style: italic; }

.wohnungs-karte-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--graphit-80);
  margin-bottom: 1.4rem;
  max-width: 38ch;
}

.wohnungs-karte-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.4em;
  margin-bottom: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--graphit-10);
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit-60);
}
.wohnungs-karte-fakten span {
  white-space: nowrap;
}
.wohnungs-karte-fakten b {
  font-weight: 600;
  color: var(--graphit);
  letter-spacing: 0.04em;
}
/* Strong bleibt für rückwärtskompatibilität, falls noch andere Stellen */
.wohnungs-karte-fakten strong {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--graphit);
  text-transform: none;
}

.wohnungs-karte-bewertung {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}
.wohnungs-karte-bewertung .punkt { color: var(--graphit-20); }
.wohnungs-karte-bewertung strong {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--graphit);
  text-transform: none;
}
.wohnungs-karte-bewertung-stern {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--graphit);
  margin-left: -0.1em;
  letter-spacing: 0;
  position: relative;
  top: -0.05em;
}

.wohnungs-karte-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit);
  border-bottom: 1px solid var(--graphit-40);
  padding-bottom: 0.4em;
  transition: border-color 0.25s var(--ease-out);
}
.wohnungs-karte:hover .wohnungs-karte-pfeil {
  border-bottom-color: var(--graphit);
}
.wohnungs-karte-pfeil-ico {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.wohnungs-karte:hover .wohnungs-karte-pfeil-ico {
  transform: translateX(4px);
}

/* =====================================================
   VERFÜGBARKEITS-STREIFEN in den Wohnungs-Karten
   Editorial: horizontale Zeitachse 60 Tage,
   schwarze Blöcke = belegt, weiß = frei

   Pre-Launch-Schalter: html[data-cron="off"] blendet den Streifen aus,
   bis der iCal-Cron auf IONOS läuft. Auf html-Tag "off"→"on" wechseln.
   ===================================================== */
html[data-cron="off"] .verfuegbarkeit { display: none; }
.verfuegbarkeit {
  margin: 1.4rem 0 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--graphit-10);
}
.verfuegbarkeit-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.verfuegbarkeit-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-60);
}
.verfuegbarkeit-zeitraum {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--graphit-80);
}
/* Streifen-Container: zwei Schichten — Monats-Marker oben, Zeitachse unten */
.verfuegbarkeit-streifen {
  position: relative;
  margin-bottom: 0.7rem;
}
/* Monats-Marker als kleine Striche + Labels über dem Streifen */
.verfuegbarkeit-monate {
  position: relative;
  height: 1.1rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--graphit-60);
  margin-bottom: 0.3rem;
}
.verfuegbarkeit-monat-label {
  position: absolute;
  transform: translateX(2px);
  white-space: nowrap;
}
.verfuegbarkeit-monat-tick {
  position: absolute;
  top: 1.05rem;
  width: 1px;
  height: 4px;
  background: var(--graphit-40);
}
/* Die Bar selbst — weißer Hintergrund, schwarze Belegt-Blöcke */
.verfuegbarkeit-bar {
  position: relative;
  height: 14px;
  background: var(--alabaster);
  border: 1px solid var(--graphit-20);
  overflow: hidden;
}
.verfuegbarkeit-block {
  position: absolute;
  top: 0;
  height: 100%;
  /* Diagonal-Schraffur statt solidem Schwarz — weniger Krankenhaus, mehr Editorial */
  background-color: var(--alabaster);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--graphit) 0,
    var(--graphit) 1px,
    transparent 1px,
    transparent 4px
  );
  /* sehr leichter Cursor-Hint, falls wir später Tooltip-Interaktion ergänzen */
}
/* HEUTE-Marker: vertikale Linie ganz links */
.verfuegbarkeit-heute {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  background: var(--graphit);
  z-index: 2;
}
.verfuegbarkeit-heute-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit);
}
/* Status-Zeile unter dem Streifen: „X von 60 Tagen frei" */
.verfuegbarkeit-status {
  margin-top: 1.2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--graphit-80);
}
.verfuegbarkeit-status strong {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--graphit);
}
/* Demo-Indikator (nur sichtbar wenn Fake-Daten aktiv) */
.verfuegbarkeit-demo {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.18em 0.55em;
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-60);
  background: var(--graphit-10);
  vertical-align: 2px;
}
/* Variante für Catarina (kein iCal): Hinweis-Block statt Streifen */
.verfuegbarkeit-hinweis {
  margin: 1.4rem 0 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--graphit-10);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--graphit-80);
}
.verfuegbarkeit-hinweis-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-bottom: 0.6rem;
}
.verfuegbarkeit-hinweis em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  color: var(--graphit);
}

@media (max-width: 1100px) {
  /* Drei Karten nebeneinander beibehalten, aber kompakter — kein 50%-Gequetsche mehr */
  .wohnungen { padding: 6rem 1.75rem; }
  .wohnungen-liste { gap: 1.25rem; }
  .wohnungs-karte-titel { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
  .wohnungs-karte-sub { font-size: 0.88rem; }
}
@media (max-width: 720px) {
  .wohnungen { padding: 5rem 1.25rem; }
  .wohnungen-headline { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .wohnungen-lead { font-size: 0.95rem; margin-bottom: 3rem; }
  .wohnungen-liste { grid-template-columns: 1fr; gap: 3rem; }
  .wohnungs-karte-bild { aspect-ratio: 5/4; }
}

/* =====================================================
   STIMMEN — drei kuratierte Gäste-Reviews
   Eine pro Persona: Familie, Paar, Solo. Italic Serif.
   Position: zwischen Wohnungs-Karten und Haus-Schnitt.
   ===================================================== */
.stimmen {
  background: var(--alabaster);
  padding: 7rem 3rem 6rem;
  position: relative;
}
.stimmen-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.stimmen-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-bottom: 2rem;
}
.stimmen-label-linie {
  width: 32px;
  height: 1px;
  background: var(--graphit-40);
  display: inline-block;
}
.stimmen-headline {
  /* nh40-fakten-v8: war als einzige Section-Headline sans — jetzt serif wie die Geschwister */
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--graphit);
  max-width: 720px;
  margin-bottom: 5rem;
}
.stimmen-headline em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
.stimmen-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 5rem;
}
.stimme {
  display: flex;
  flex-direction: column;
}
.stimme-marker {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-bottom: 1.5rem;
}
.stimme-text {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--graphit);
  margin-bottom: 1.75rem;
}
.stimme-text::before {
  content: "„";
  font-style: normal;
  margin-right: 0.05em;
}
.stimme-text::after {
  content: "\201C";
  font-style: normal;
  margin-left: 0.05em;
}
.stimme-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap; /* A6: bricht nur an den Trenner-Punkten, statt sie ans Zeilenende zu verwaisen */
}
.stimme-meta > span {
  white-space: nowrap; /* A6: verhindert Umbruch mitten im Datum ("Juni / 2023") auf schmalen Breiten */
}
.stimme-meta-trenner {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--graphit-40);
  border-radius: 0;
}
.stimme-meta-quelle {
  color: var(--graphit-70);
  letter-spacing: 0.18em;
}
@media (max-width: 980px) {
  .stimmen-liste {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
@media (max-width: 720px) {
  .stimmen { padding: 4.5rem 1.25rem 4rem; }
  .stimmen-headline { margin-bottom: 3rem; }
    .stimmen-stammgaeste { margin-bottom: 3rem; }
  .stimme-text { font-size: 1.15rem; }
}

/* =====================================================
   HAUS-SCHNITT (interaktiv, inline SVG)
   ===================================================== */
.haus-schnitt {
  background: var(--sandstein);
  padding: 5rem 3rem;
  position: relative;
}
.haus-schnitt-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.haus-schnitt-text-label {
  display: flex;
  align-items: 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-70);
}
.haus-schnitt-text-label-linie {
  width: 40px;
  height: 1px;
  background: var(--graphit-60);
}
.haus-schnitt-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--graphit);
  margin-bottom: 1.2rem;
  max-width: 18ch;
}
.haus-schnitt-headline em { font-style: italic; }
.haus-schnitt-text p {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--graphit-80);
  margin-bottom: 1rem;
  max-width: 42ch;
}

/* Tipp-Hinweis mit Pulse-Dot — analog zum Entfernungs-Stern */
.haus-schnitt-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-70);
}
.haus-schnitt-hint-bullet {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--graphit);
  border-radius: 0;
  position: relative;
  flex-shrink: 0;
}
.haus-schnitt-hint-bullet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--graphit);
  animation: hausHintPulse 2s var(--ease-out) infinite;
}
@keyframes hausHintPulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .haus-schnitt-hint-bullet::after { animation: none; }
}

.haus-schnitt-svg-wrap {
  position: relative;
  aspect-ratio: 400/480;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
.haus-schnitt-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG: zonen für die drei Wohnungen — sichtbar im Default,
   damit klar wird, dass es klickbare Bereiche sind. */
.zone {
  fill: rgba(26,26,23,0.025);
  stroke: var(--graphit-40);
  stroke-width: 0.8;
  stroke-dasharray: 4 5;
  cursor: pointer;
  transition: fill 0.35s var(--ease-out), stroke 0.35s var(--ease-out), stroke-dasharray 0.35s var(--ease-out);
}
.zone-gruppe:hover .zone,
.zone-gruppe:focus-visible .zone,
.zone-gruppe.aktiv .zone {
  /* Warmer Licht-Schein statt grauer Hover — als ob das Fenster gerade angeht */
  fill: rgba(196, 158, 92, 0.18);
  stroke: var(--graphit);
  stroke-dasharray: 0;
  stroke-width: 1.2;
}
/* Wohnungs-Name (immer sichtbar, im Schnitt selbst) */
.zone-name-fest {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  fill: var(--graphit);
  pointer-events: none;
  transition: font-size 0.3s var(--ease-out);
}
/* Meta-Zeile darunter (Stock, Charakter) */
.zone-meta {
  font-family: 'Inter', sans-serif;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--graphit-70);
  pointer-events: none;
}
/* Cursor + Hover-Verstärkung pro Gruppe */
.zone-gruppe {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  scroll-margin-block: 6rem;
}
.zone-gruppe:hover .zone-name-fest,
.zone-gruppe:focus-visible .zone-name-fest,
.zone-gruppe.aktiv .zone-name-fest {
  fill: var(--graphit);
}
/* Deutlicher Fokus-Ring, unabhaengig vom Warmlicht-Hover oben — der Ring
   markiert "hier bist Du gerade", die Fuellung markiert "das waer's". */
.zone-gruppe:focus-visible .zone {
  outline: 2px solid var(--graphit);
  outline-offset: 3px;
}

/* ============================================================
   SIGNATURE: DAS HAUS BEI DÄMMERUNG  (Schnitt §haus-schnitt)
   Eine Wohnung wählen = dort geht das Licht an.
   ============================================================ */

/* (1) Reveal: Kontur zeichnet sich, dann blendet die Bühne ein */
.schnitt-svg.js-anim .schnitt-buehne { opacity: 0; }
.schnitt-svg.gezeichnet .kontur { animation: konturZeichnen 0.85s var(--ease-expo) forwards; }
.schnitt-svg.gezeichnet .schnitt-buehne { animation: schnittEin 0.6s var(--ease-out) 0.5s forwards; }
@keyframes konturZeichnen { to { stroke-dashoffset: 0; } }
@keyframes schnittEin { to { opacity: 1; } }
.schnitt-svg .kontur { stroke-dasharray: 1300; }

/* (2) Idle: EIN Fenster atmet warm — die einzige Daueranimation hier.
   Budget: Der Hinweis-Punkt-Puls weicht, das Haus selbst lädt ein. */
.haus-schnitt .haus-schnitt-hint-bullet::after { animation: none; }
.schnitt-svg.gezeichnet .fenster-idle { animation: fensterAtmen 7s var(--ease-out) 1.4s infinite; }
@keyframes fensterAtmen {
  0%, 100% { fill: rgba(196,158,92,0); }
  50%      { fill: rgba(196,158,92,0.16); }
}
.schnitt-svg.hat-auswahl .fenster-idle { animation: none; }

/* (3) Auswahl: die anderen Stockwerke fallen in die Dämmerung */
.schnitt-svg.hat-auswahl .fenster { opacity: 0.22; transition: opacity 0.45s var(--ease-out); }
.schnitt-svg.hat-auswahl .zone-gruppe:not(.aktiv) .zone {
  fill: rgba(40,46,66,0.20);
  stroke: var(--graphit-20);
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}
.schnitt-svg.hat-auswahl .zone-gruppe:not(.aktiv) .zone-name-fest,
.schnitt-svg.hat-auswahl .zone-gruppe:not(.aktiv) .zone-meta { opacity: 0.3; }

/* (3) Gewähltes Stockwerk: bleibt hell, Raum nur zart warm — nicht beige gewaschen */
.schnitt-svg[data-aktiv] .zone-gruppe.aktiv .zone {
  fill: rgba(196,158,92,0.07);
  stroke: var(--graphit);
}
/* Name + Meta lesen sich auch über leuchtenden Fenstern — Alabaster-Halo */
.schnitt-svg[data-aktiv] .zone-gruppe.aktiv .zone-name-fest,
.schnitt-svg[data-aktiv] .zone-gruppe.aktiv .zone-meta {
  paint-order: stroke;
  stroke: var(--alabaster);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* Die Fenster gehen an — warmes Licht mit Schein */
.schnitt-svg[data-aktiv="stillach"] .fenster-stillach,
.schnitt-svg[data-aktiv="catarina"] .fenster-catarina,
.schnitt-svg[data-aktiv="hannes"] .fenster-hannes {
  opacity: 1;
  stroke: #b8955a;
  fill: rgba(212,170,96,0.85);
  filter: drop-shadow(0 0 4px rgba(196,158,92,0.75));
  transition: fill 0.45s var(--ease-out), opacity 0.4s var(--ease-out);
}

/* (4) Tiefe: Innenstriche der gewählten Wohnung */
.innen { opacity: 0; pointer-events: none; }
.innen-strich { fill: none; stroke: var(--graphit); stroke-width: 0.8; }
.innen-strich-fein { fill: none; stroke: var(--graphit); stroke-width: 0.5; opacity: 0.55; }
.zone-gruppe.aktiv .innen { opacity: 1; transition: opacity 0.5s var(--ease-out) 0.15s; }

/* (5) Leitlinie: Architekten-Annotation zur gewählten Wohnung (nur Desktop) */
.leitlinie { fill: none; stroke: var(--graphit); stroke-width: 0.8; stroke-dasharray: 60; stroke-dashoffset: 60; }
.leitlinie-pkt { fill: var(--graphit); opacity: 0; pointer-events: none; }
.zone-gruppe.aktiv .leitlinie { stroke-dashoffset: 0; transition: stroke-dashoffset 0.55s var(--ease-out) 0.1s; }
.zone-gruppe.aktiv .leitlinie-pkt { opacity: 1; transition: opacity 0.3s var(--ease-out) 0.55s; }
@media (max-width: 900px) { .leitlinie, .leitlinie-pkt { display: none; } }

.sockel-daemmerung { pointer-events: none; transition: opacity 0.5s var(--ease-out); }
.schnitt-svg.hat-auswahl .sockel-daemmerung { opacity: 0.2; }

/* Mobile: Info-Panel weg, Auswahl läuft über das Bottom-Sheet */
@media (max-width: 899px) { .haus-schnitt-info { display: none; } }

/* Reduced-motion: alles statisch sichtbar, kein Atmen, kein Draw */
@media (prefers-reduced-motion: reduce) {
  .schnitt-svg .kontur { stroke-dashoffset: 0 !important; animation: none !important; }
  .schnitt-svg .schnitt-buehne { opacity: 1 !important; animation: none !important; }
  .schnitt-svg .fenster-idle { animation: none !important; }
  .innen, .leitlinie, .leitlinie-pkt { transition: none !important; }
}

.haus-schnitt-info {
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--graphit-10);
  min-height: 7rem;
}
.haus-schnitt-info-platzhalter {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-70);
}
.haus-schnitt-info-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-70);
  margin-bottom: 0.6rem;
}
.haus-schnitt-info-titel {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--graphit);
  margin-bottom: 0.6rem;
}
.haus-schnitt-info-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--graphit-80);
}

@media (max-width: 900px) {
  .haus-schnitt-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .haus-schnitt-svg-wrap {
    grid-row: 2;
    max-width: 360px;
  }
}
@media (max-width: 720px) {
  .haus-schnitt { padding: 3.5rem 1.25rem; }
  .haus-schnitt-headline { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .haus-schnitt-info { margin-top: 1.5rem; }
}

/* =====================================================
   ENTFERNUNGS-STERN
   ===================================================== */
.entfernungs-stern {
  background: var(--alabaster);
  padding: 8rem 3rem 6rem;
  position: relative;
}
.entfernungs-stern-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.entfernungs-stern-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-70);
  display: block;
  margin-bottom: 2rem;
}
.entfernungs-stern-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--graphit);
  margin: 0 auto 1.2rem;
  max-width: 22ch;
}
.entfernungs-stern-headline em { font-style: italic; }
.entfernungs-stern-lead {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--graphit-80);
  max-width: 50ch;
  margin: 0 auto 4rem;
}

.entfernungs-stern-svg-wrap {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 1240 / 1170;
  overflow: visible;
  /* etwas seitlicher Spielraum für die längsten Labels */
  padding: 0 1rem;
}
.entfernungs-stern-svg-wrap svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

.kompass {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  fill: var(--graphit-40);
}

/* ---- ZONE-VISUALS: Foot (innen, mit Hintergrund-Tinge) ---- */
.zone-fuss-fill {
  /* Sehr leichter Tinge in der Foot-Zone — macht den Bereich als "Stadtkern" lesbar */
  fill: var(--graphit);
  opacity: 0.025;
  pointer-events: none;
}
.zone-fuss-grenze {
  /* Saubere durchgezogene Linie als Grenze zwischen Foot- und Bike-Zone */
  fill: none;
  stroke: var(--graphit-40);
  stroke-width: 0.8;
  stroke-dasharray: none;
  opacity: 0.7;
}
.ring-fuss {
  /* Innere Min-Markierungs-Ringe in der Foot-Zone */
  fill: none;
  stroke: var(--graphit-40);
  stroke-width: 0.5;
  stroke-dasharray: 2 5;
  opacity: 0.5;
}

/* ---- ZONE-VISUALS: Bike (außen als Halbbogen, da POIs alle südlich) ---- */
.bike-bogen-aussen, .bike-bogen-innen {
  fill: none;
  stroke: var(--graphit-40);
  stroke-width: 0.8;
  opacity: 0.5;
}
.bike-bogen-aussen {
  stroke-dasharray: 1 4;
  opacity: 0.4;
}
.bike-bogen-innen {
  stroke-dasharray: 2 5;
  opacity: 0.5;
}

/* ---- Zone-Labels (gebogen entlang Bogen) ---- */
.zone-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  fill: var(--graphit);
}
.zone-label-fuss {
  /* Im oberen Foot-Bogen, daher gut sichtbar im Stadt-Halbkreis */
  fill: var(--graphit-60);
}
.zone-label-rad {
  /* Im unteren Bike-Bogen */
  fill: var(--graphit-60);
}

/* ---- Min-Marker innen (5 MIN, 10 MIN) ---- */
.ring-min-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--graphit-40);
  opacity: 0.7;
}

/* ---- Linien: Foot durchgezogen, Bike gestrichelt ---- */
.linie {
  fill: none;
  stroke: var(--graphit);
}
.linie-fuss {
  stroke-width: 1.1;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: linieZeichnen 1s var(--ease-out) forwards;
  animation-play-state: paused;
}
.linie-rad {
  stroke-width: 0.8;
  stroke-dasharray: 3 5 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  animation: linieRadEinblenden 0.8s var(--ease-out) forwards !important;
  animation-play-state: paused;
  animation-delay: 1.4s;
}
.entfernungs-stern.sichtbar .linie-fuss,
.entfernungs-stern.sichtbar .linie-rad {
  animation-play-state: running;
}
@keyframes linieZeichnen {
  to { stroke-dashoffset: 0; }
}
@keyframes linieRadEinblenden {
  to { opacity: 0.55; }
}

/* ---- Endpunkte: Foot solid, Bike outline ---- */
.endpunkt {
  opacity: 0;
  animation: pktErscheinen 0.4s var(--ease-out) forwards;
  animation-play-state: paused;
  transition: r 0.25s var(--ease-out);
}
.endpunkt-fuss {
  fill: var(--graphit);
}
.endpunkt-rad {
  fill: var(--alabaster);
  stroke: var(--graphit);
  stroke-width: 1.5;
}
.entfernungs-stern.sichtbar .endpunkt {
  animation-play-state: running;
}
@keyframes pktErscheinen {
  to { opacity: 1; }
}

/* ---- Ortsnamen (Serif Italic) und Zeiten (Mono Caps) ---- */
.ort-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  fill: var(--graphit);
  opacity: 0;
  animation: pktErscheinen 0.4s var(--ease-out) forwards;
  animation-play-state: paused;
  pointer-events: none;
}
.ort-zeit {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--graphit-60);
  opacity: 0;
  animation: pktErscheinen 0.4s var(--ease-out) forwards;
  animation-play-state: paused;
  pointer-events: none;
}
.ort-zeit-rad {
  letter-spacing: 0.12em;
  fill: var(--graphit-60);
}
.entfernungs-stern.sichtbar .ort-name,
.entfernungs-stern.sichtbar .ort-zeit {
  animation-play-state: running;
}

/* ---- Interaktive POI-Gruppen ---- */
.poi-gruppe {
  cursor: pointer;
  outline: none;
  /* Verhindert die 300ms-Tap-Delay auf iOS Safari und macht Doppeltipp-Zoom unmöglich */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hit-area {
  fill: transparent;
  pointer-events: all;
}
.hit-label {
  /* Größere Tap-Fläche über dem Label-Block, sodass auch das Tippen
     auf den Schriftzug das Modal öffnet, nicht nur auf den kleinen Punkt. */
  fill: transparent;
  pointer-events: all;
}
.entfernungs-stern.aktiviert .poi-gruppe:hover .endpunkt,
.entfernungs-stern.aktiviert .poi-gruppe:focus-visible .endpunkt {
  r: 9;
}
.entfernungs-stern.aktiviert .poi-gruppe:hover .endpunkt-rad,
.entfernungs-stern.aktiviert .poi-gruppe:focus-visible .endpunkt-rad {
  r: 9;
  fill: var(--graphit);
}
.entfernungs-stern.aktiviert .poi-gruppe:hover .ort-name,
.entfernungs-stern.aktiviert .poi-gruppe:focus-visible .ort-name {
  font-weight: 500;
  font-style: italic;
}
.poi-gruppe:focus-visible .hit-area {
  stroke: var(--graphit);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.zentrum-kreis {
  fill: var(--alabaster);
  stroke: var(--graphit);
  stroke-width: 1;
}
.zentrum-text {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  fill: var(--graphit);
  text-anchor: middle;
}
.zentrum-sub {
  font-family: 'Inter', sans-serif;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--graphit-60);
  text-anchor: middle;
}

/* ---- Hint-Indikator unter dem Lead ---- */
.entfernungs-stern-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-70);
  margin: -2.5rem auto 4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.entfernungs-stern.aktiviert .entfernungs-stern-hint {
  opacity: 1;
}
.entfernungs-stern-hint-bullet {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--graphit-60);
  border-radius: 50%;
  animation: hintPulse 2.4s var(--ease-out) infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* =====================================================
   POI-MODAL (Sheet-Style auf Mobile, zentriert auf Desktop)
   ===================================================== */
/* =====================================================
   POI MODAL — Editorial-Sheet mit Drag-Handle (mobile)
   und Karten-Look (desktop). Konsistent mit Editorial-Sprache.
   ===================================================== */
.poi-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.poi-modal[hidden] {
  display: none;
}
.poi-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 23, 0.35);
  opacity: 0;
  animation: modalFadeIn 0.3s var(--ease-out) forwards;
  cursor: pointer;
}
@keyframes modalFadeIn {
  to { opacity: 1; }
}
.poi-modal-sheet {
  position: relative;
  background: var(--alabaster);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 2.5rem 1.75rem 2rem;
  text-align: left;
  transform: translateY(100%);
  animation: sheetSlideUp 0.45s var(--ease-out) forwards;
  border-top: 1px solid var(--graphit);
  outline: none;
  -webkit-overflow-scrolling: touch;
}
@keyframes sheetSlideUp {
  to { transform: translateY(0); }
}

/* Drag-Handle (mobile only, sichtbares Sheet-Indikator) */
.poi-modal-handle {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--graphit-40);
  margin: 0 auto 1.75rem;
  border-radius: 0;
}

.poi-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--graphit-70);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.poi-modal-close:hover { color: var(--graphit); }
.poi-modal-close:focus-visible {
  outline: 1px solid var(--graphit);
  outline-offset: 2px;
}
.poi-modal-kicker {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-70);
  margin-bottom: 1.25rem;
}
.poi-modal-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--graphit);
  margin: 0 0 0.6rem;
}
.poi-modal-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit-70);
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--graphit-10);
}
.poi-modal-text {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--graphit);
  margin: 0 0 2rem;
}
.poi-modal-address {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--graphit-70);
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--graphit-10);
}
.poi-modal-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit);
  text-decoration: none;
  border-bottom: 1px solid var(--graphit);
  padding-bottom: 0.4em;
  transition: gap 0.3s var(--ease-out);
}
.poi-modal-cta:hover { gap: 1em; }
.poi-modal-cta-ico {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.poi-modal-cta:hover .poi-modal-cta-ico {
  transform: translateX(4px);
}

/* === DESKTOP: zentriert, kartoniert === */
@media (min-width: 720px) {
  .poi-modal {
    align-items: center;
    padding: 2rem;
  }
  .poi-modal-backdrop {
    background: rgba(26, 26, 23, 0.55);
  }
  .poi-modal-sheet {
    border: 1px solid var(--graphit);
    border-top: 1px solid var(--graphit);
    padding: 3rem 2.5rem 2.5rem;
    max-height: 82vh;
    transform: translateY(20px);
    opacity: 0;
    animation: sheetFadeIn 0.4s var(--ease-out) forwards;
  }
  @keyframes sheetFadeIn {
    to { transform: translateY(0); opacity: 1; }
  }
  /* Desktop: Drag-Handle nicht relevant, ausblenden */
  .poi-modal-handle {
    display: none;
  }
  .poi-modal-close {
    top: 1rem;
    right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poi-modal-sheet,
  .poi-modal-backdrop {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .entfernungs-stern-hint-bullet { animation: none; }
}

.entfernungs-stern-quote {
  margin-top: 4.5rem;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: var(--graphit-80);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.lage-tag {
  max-width: 56ch;
  margin: 2.5rem auto 0;
  text-align: center;
}
.lage-tag-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphit-70);
  margin-bottom: 1rem;
}
.lage-tag-text {
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: var(--graphit-70);
  margin: 0;
}
.lage-tag-text em { font-style: italic; color: var(--graphit); }

.entfernungs-stern-cta {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit);
  text-decoration: none;
  border-bottom: 1px solid var(--graphit-40);
  padding-bottom: 0.4em;
  transition: border-color 0.25s var(--ease-out);
}
.entfernungs-stern-cta:hover { border-bottom-color: var(--graphit); }
.entfernungs-stern-cta-ico {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.entfernungs-stern-cta:hover .entfernungs-stern-cta-ico {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .entfernungs-stern { padding: 5rem 1.25rem 4rem; }
  .entfernungs-stern-headline { font-size: clamp(1.5rem, 7vw, 2rem); }
  .entfernungs-stern-svg-wrap { max-width: 100%; padding: 0; }
  /* Mobile: Schrift kompakter, weniger gedrängt. Zone-Labels (ZU FUSS / MIT DEM RAD)
     übernehmen die Erklärung — POI-Labels werden zu reinen Namen + Minuten. */
  .ort-name { font-size: 28px; }
  .ort-zeit { font-size: 17px; letter-spacing: 0.1em; }
  .ort-zeit-rad { font-size: 17px; letter-spacing: 0.06em; }
  .ring-min-label { font-size: 16px; letter-spacing: 0.18em; }
  .zone-label { font-size: 26px; letter-spacing: 0.4em; }
  .kompass { font-size: 20px; letter-spacing: 0.3em; }
  .zentrum-text { font-size: 36px; }
  .zentrum-sub { font-size: 14px; }
  .endpunkt, .endpunkt-fuss, .endpunkt-rad { r: 13; }
  /* Hit-Area am Punkt: r=50 user-units → ~31 CSS-px Durchmesser. Plus zusätzliche
     hit-label Rect über das gesamte Label (siehe SVG) — so ist der ganze sichtbare
     POI-Bereich (Punkt + Name + Min-Zeile) klickbar. */
  .hit-area { r: 50; }
  .entfernungs-stern.aktiviert .poi-gruppe:hover .endpunkt,
  .entfernungs-stern.aktiviert .poi-gruppe:focus-visible .endpunkt {
    r: 14;
  }
  .entfernungs-stern-quote {
    font-size: 1rem;
    margin-top: 3rem;
  }
  .entfernungs-stern-hint {
    margin: -1.5rem auto 3rem;
    font-size: 0.6rem;
  }
  .poi-modal-sheet {
    padding: 2.5rem 1.5rem 2rem;
  }
}

/* =====================================================
   PERSONAS — Fünf Wege
   ===================================================== */

/* =====================================================
   FAQ
   ===================================================== */
.faq {
  background: var(--sandstein);
  padding: 8rem 3rem;
}
.faq-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.faq-label {
  display: flex;
  align-items: 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-70);
}
.faq-label-linie {
  width: 40px; height: 1px;
  background: var(--graphit-60);
}
.faq-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--graphit);
  margin-bottom: 1.2rem;
  max-width: 22ch;
}
.faq-headline em { font-style: italic; }
.faq-lead {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--graphit-80);
  max-width: 50ch;
  margin-bottom: 4rem;
}

.faq-item {
  border-top: 1px solid var(--graphit-10);
}
.faq-item:last-child { border-bottom: 1px solid var(--graphit-10); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.6rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.35;
  color: var(--graphit);
  transition: color 0.2s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--graphit-60); }
.faq-icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 0.45em;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--graphit-60);
  transition: transform 0.3s var(--ease-out);
}
.faq-icon::before {
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
}
.faq-icon::after {
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
}
.faq-antwort {
  padding: 0 0 1.8rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--graphit-80);
  max-width: 60ch;
}

@media (max-width: 720px) {
  .faq { padding: 5rem 1.25rem; }
  .faq-headline { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .faq-item summary { font-size: 1.05rem; gap: 1rem; }
  .faq-antwort { font-size: 0.95rem; }
}

/* =====================================================
   GASTGEBERIN
   ===================================================== */
.gastgeberin {
  background: var(--alabaster);
  padding: 8rem 3rem;
}
.gastgeberin-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  align-items: start;
}
.gastgeberin-portrait {
  aspect-ratio: 4/5;
  background: var(--sandstein);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gastgeberin-portrait-platzhalter {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphit-70);
  line-height: 1.8;
}
.gastgeberin-portrait-platzhalter em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--graphit-60);
  display: block;
  margin-top: 0.4em;
}
.gastgeberin-label {
  display: flex;
  align-items: 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);
}
.gastgeberin-label-linie {
  width: 40px; height: 1px;
  background: var(--graphit-60);
}
.gastgeberin-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--graphit);
  margin-bottom: 2rem;
  max-width: 18ch;
}
.gastgeberin-headline em { font-style: italic; }
.gastgeberin-text p {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--graphit-80);
  margin-bottom: 1.3rem;
  max-width: 50ch;
}
.gastgeberin-text p em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  color: var(--graphit);
}

@media (max-width: 900px) {
  .gastgeberin-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .gastgeberin-portrait { max-width: 320px; aspect-ratio: 1/1; }
}
@media (max-width: 720px) {
  .gastgeberin { padding: 5rem 1.25rem; }
  .gastgeberin-headline { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* =====================================================
   ANFRAGE-FORM
   Hell, ruhig, vor der dunklen Kontakt-Sektion.
   DS-Ausnahme: native input[type="date"] zugelassen
   (Custom-Datepicker zu aufwändig für Hospitality-Kontext).
   ===================================================== */
.anfrage {
  background: var(--alabaster);
  padding: 7rem 3rem 5rem;
}
.anfrage-inner {
  max-width: 720px;
  margin: 0 auto;
}
.anfrage-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-60);
  display: block;
  margin-bottom: 2rem;
}
.anfrage-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  color: var(--graphit);
  max-width: 30ch;
  margin: 0 0 0.8rem;
}
.anfrage-headline em { font-style: italic; }
.anfrage-zusatz {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--graphit-70);
  max-width: 52ch;
  margin: 0 0 3rem;
}
.anfrage-zusatz em { font-style: italic; }
.anfrage-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 1.4rem;
}
.anfrage-feld {
  display: flex;
  flex-direction: column;
}
.anfrage-feld--breit { grid-column: 1 / -1; }
.anfrage-feld-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphit-80);
  margin-bottom: 0.6rem;
}
.anfrage-feld-label .pflicht {
  color: var(--graphit-60);
  margin-left: 0.2em;
}
.anfrage-input,
.anfrage-textarea,
.anfrage-select {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--graphit);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--graphit-20);
  padding: 0.5rem 0;
  width: 100%;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.anfrage-input:focus,
.anfrage-textarea:focus,
.anfrage-select:focus {
  border-bottom-color: var(--graphit);
  border-bottom-width: 2px;
  padding-bottom: calc(0.5rem - 1px);
}
.anfrage-textarea {
  resize: vertical;
  min-height: 5.6rem;
  font-family: 'Inter', sans-serif;
}
.anfrage-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8' fill='none' stroke='%231A1A17' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.4rem;
}
.anfrage-input[type="date"] {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}
.anfrage-input[type="number"] {
  font-variant-numeric: tabular-nums;
}
.anfrage-checkbox-zeile {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-top: 0.8rem;
}
.anfrage-checkbox {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--graphit-40);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.anfrage-checkbox:hover { border-color: var(--graphit); }
.anfrage-checkbox:checked {
  background: var(--graphit);
  border-color: var(--graphit);
}
.anfrage-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid var(--alabaster);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.anfrage-checkbox-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--graphit-70);
}
.anfrage-checkbox-label em { font-style: italic; }
.anfrage-checkbox-label a { color: var(--graphit); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.anfrage-checkbox-label a:hover { text-underline-offset: 0.32em; }
.anfrage-hinweis-catarina {
  grid-column: 1 / -1;
  margin-top: -0.8rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--graphit-60);
}
.anfrage-hinweis-catarina a {
  color: var(--graphit);
  text-decoration: none;
  border-bottom: 1px solid var(--graphit-40);
  transition: border-color 0.2s var(--ease-out);
}
.anfrage-hinweis-catarina a:hover { border-bottom-color: var(--graphit); }
/* Honeypot — visuell + für Screenreader versteckt, von Bots oft befüllt */
.anfrage-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.anfrage-submit {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding: 1.05rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alabaster);
  background: var(--graphit);
  border: 1px solid var(--graphit);
  border-radius: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), gap 0.2s var(--ease-out);
}
.anfrage-submit:hover {
  background: var(--alabaster);
  color: var(--graphit);
  gap: 1.5rem;
}
.anfrage-submit:focus-visible {
  outline: 2px solid var(--graphit);
  outline-offset: 3px;
}
.anfrage-submit-pfeil {
  font-size: 0.95rem;
}
.anfrage-status {
  grid-column: 1 / -1;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit-60);
  min-height: 1rem;
}
.anfrage-status[data-state="success"] { color: var(--graphit); }

@media (max-width: 720px) {
  .anfrage { padding: 5rem 1.5rem 4rem; }
  .anfrage-form { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* =====================================================
   KONTAKT
   ===================================================== */
.kontakt {
  background: var(--sandstein);
  color: var(--graphit);
  padding: 7rem 3rem;
  text-align: center;
}
.kontakt-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphit-60);
  display: block;
  margin-bottom: 2rem;
}
.kontakt-text {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--graphit);
  max-width: 32ch;
  margin: 0 auto 2.5rem;
}
.kontakt-mail {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphit);
  text-decoration: none;
  border-bottom: 1px solid var(--graphit-40);
  padding-bottom: 0.45em;
  transition: border-color 0.25s var(--ease-out);
}
.kontakt-mail:hover { border-bottom-color: var(--graphit); }

@media (max-width: 720px) {
  .kontakt { padding: 5rem 1.5rem; }
  .kontakt-text { font-size: clamp(1.2rem, 6vw, 1.6rem); }
  .kontakt-mail { font-size: 0.8rem; }
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  --f-ink: #FCFBF8;
  --f-dim: rgba(252, 251, 248, 0.60);
  --f-faint: rgba(252, 251, 248, 0.46);
  --f-line: rgba(252, 251, 248, 0.13);
  background: var(--graphit);
  border-top: 1px solid var(--f-line);
  padding: 7rem 3rem 3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--f-dim);
}
/* Statement-Block oben — der letzte editoriale Moment */
.footer-statement {
  max-width: 1400px;
  margin: 0 auto 6rem;
  text-align: center;
}
.footer-statement-marker {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--f-faint);
  display: block;
  margin-bottom: 2.5rem;
}
/* Wordmark mit flankierenden Marken-Zahlen — letzte Chance, eine Zahl zu hinterlassen */
.footer-wordmark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 5vw, 4rem);
  margin-bottom: 2.5rem;
  flex-wrap: nowrap;
}
.footer-marken-zahlen {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: right;
  flex-shrink: 0;
}
.footer-marken-zahlen.rechts {
  text-align: left;
}
.footer-marken-zahl {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.footer-marken-zahl-wert {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1;
  color: var(--f-ink);
}
.footer-marken-zahl-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--f-faint);
}
.footer-wordmark-gross {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.8rem, 12vw, 9rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--f-ink);
  display: inline-block;
  margin-bottom: 0;
  flex-shrink: 1;
}
.footer-wordmark-gross .trenner {
  display: inline-block;
  color: var(--f-faint);
  margin: 0 0.12em;
  font-weight: 300;
  /* Etwas schmaler in der Höhe als die Buchstaben */
  transform: scaleY(0.78);
}
.footer-koordinate {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--f-faint);
  margin-bottom: 2.5rem;
}
.footer-statement-text {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.55;
  color: var(--f-dim);
  max-width: 38ch;
  margin: 0 auto;
}
.footer-statement-text em {
  font-style: normal;
  color: var(--f-ink);
}
/* Pflichtangaben darunter */
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 3rem;
  border-top: 1px solid var(--f-line);
}
.footer-wordmark {
  display: inline-block;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--f-ink);
  letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
  line-height: 1.2;
}
.footer-wordmark .trenner {
  display: inline-block;
  color: var(--f-faint);
  margin: 0 0.1em;
  font-weight: 300;
  transform: scaleY(0.78);
}
.footer-adresse {
  font-style: normal;
  color: var(--f-dim);
  margin-bottom: 0.7rem;
  line-height: 1.7;
}
.footer-seo-text {
  max-width: 35ch;
  line-height: 1.7;
  margin-bottom: 0.8rem;
  color: var(--f-faint);
}
.footer-fussnote {
  font-size: 0.62rem;
  color: var(--f-faint);
  letter-spacing: 0.05em;
  font-style: italic;
  font-family: 'Newsreader', Georgia, serif;
}
.footer-links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.footer-links a {
  color: var(--f-dim);
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.25em;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.footer-links a:hover { color: var(--f-ink); border-bottom-color: var(--f-ink); }
.footer-links-trenner {
  color: var(--f-faint);
  margin: 0 0.4rem;
}

@media (max-width: 720px) {
  .footer { padding: 4rem 1.25rem 2rem; }
  .footer-statement { margin-bottom: 3.5rem; }
  .footer-statement-marker { margin-bottom: 1.5rem; }
  .footer-wordmark-wrap {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 1.75rem;
  }
  .footer-marken-zahlen,
  .footer-marken-zahlen.rechts {
    flex-direction: row;
    text-align: center;
    gap: 2rem;
  }
  .footer-marken-zahl { align-items: center; }
  .footer-inner { flex-direction: column; gap: 2rem; padding-top: 2rem; }
  .footer-wordmark { font-size: 1.1rem; }
}

/* =====================================================
   SPEZIAL-FIX für sehr schmale Screens (iPhone SE 1. Gen)
   ===================================================== */
@media (max-width: 380px) {
  .marginalie { font-size: 0.5rem; letter-spacing: 0.14em; }
}

/* ============================================================
   BERGBAHN-USP-BANNER — sommerlicher Wert-USP über Wohnungen
   Editorial: zweizeiliger Display-Block, Ersparnis als italic Zahl
   ============================================================ */
.bergbahn-usp {
  background: var(--graphit);
  color: var(--alabaster);
  padding: 2.5rem 3rem;
  margin: 0;
  position: relative;
}
/* Dezente vertikale Linie links — wiederholt die Marginalie-Logik */
.bergbahn-usp::before {
  content: "";
  position: absolute;
  left: 3rem;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: rgba(252, 251, 248, 0.18);
}
.bergbahn-usp-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  padding-left: 1.5rem; /* Abstand zur Linie */
}
.bergbahn-usp-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bergbahn-usp-marker {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(252, 251, 248, 0.55);
}
.bergbahn-usp-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--alabaster);
  line-height: 1.4;
}
.bergbahn-usp-value strong {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bergbahn-usp-value em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: -0.015em;
  color: var(--alabaster);
  display: inline-block;
  margin-right: 0.15em;
}
.bergbahn-usp-zeit {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 251, 248, 0.5);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 720px) {
  .bergbahn-usp { padding: 1.75rem 1.25rem; }
  .bergbahn-usp::before { left: 1.25rem; top: 1.75rem; bottom: 1.75rem; }
  .bergbahn-usp-inner {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding-left: 1.25rem;
  }
  .bergbahn-usp-value { font-size: 0.95rem; }
  .bergbahn-usp-value em { font-size: 1.5em; }
  .bergbahn-usp-zeit { text-align: left; }
}

.wohnungs-karte-preis-detail {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphit-60);
  margin-top: 0.15rem;
}
.wohnungs-karte-preis-detail em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.1em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--graphit-80);
}

.kontakt-zusatz {
  margin: 1.6rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphit-60);
}
.kontakt-zusatz em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.15em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--graphit);
}

/* Single-column variant when no portrait is available */
.gastgeberin--ohne-portrait .gastgeberin-inner {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.gastgeberin--ohne-portrait .gastgeberin-portrait {
  display: none;
}

.home-sticky-cta { display: none; }

@media (max-width: 780px) {
  body { padding-bottom: 82px; }
  .home-sticky-cta {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 90;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .45rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid rgba(252,251,248,.24);
    border-radius: 0;
    background: var(--graphit);
    color: var(--alabaster);
    box-shadow: 0 18px 60px rgba(26,26,23,.26);
    transform: translateY(160%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-out);
  }
  .home-sticky-cta.sichtbar { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .home-sticky-cta span {
    padding-left: .65rem;
    font-family: 'Inter',sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 .85rem;
    border-radius: 0;
    background: var(--alabaster);
    color: var(--graphit);
    text-decoration: none;
    font-family: 'Inter',sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .home-sticky-cta a:last-child {
    background: transparent;
    color: var(--alabaster);
    border: 1px solid rgba(252,251,248,.25);
  }
}
@media (max-width: 430px) {
  .home-sticky-cta { grid-template-columns: 1fr auto; border-radius: 0; }
  .home-sticky-cta span { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-sticky-cta { transition: none; }
}
.bergbahn-usp-hinweis {
  display: block;
  margin-top: .15rem;
  font-family: 'Inter',sans-serif;
  font-size: .68rem;
  line-height: 1.45;
  letter-spacing: .04em;
  color: rgba(252,251,248,.66);
}

/* =====================================================
   NH40 V2 — smarter conversion UI + echtes Formular
   ===================================================== */
.anfrage { background: var(--alabaster); }
.anfrage-inner { max-width: 880px; }
.anfrage-form {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.anfrage-feld--kompakt { grid-column: span 1; }
.anfrage-input::placeholder,
.anfrage-textarea::placeholder { color: var(--graphit-70); }
.anfrage-privacy-note {
  grid-column: 1 / -1;
  margin: -0.4rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--graphit-60);
}
.anfrage-privacy-note a { color: var(--graphit); text-decoration: none; border-bottom: 1px solid var(--graphit-40); }
.anfrage-status {
  padding-top: 0.2rem;
  text-transform: none;
  letter-spacing: 0.03em;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  min-height: 1.4rem;
}
.anfrage-status[data-state="success"] { color: #204b2f; }
.anfrage-status[data-state="error"] { color: #8a2f24; }
.anfrage-submit[disabled] { opacity: 0.5; cursor: wait; }
@media (max-width: 720px) {
  .anfrage-form { padding: 0; }
  .anfrage-feld--kompakt { grid-column: 1 / -1; }
}

/* NH40 V5 · ruhige Signal-Leiste direkt im Hero */
.home-signal-strip {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}
.home-signal-strip span {
  border: 1px solid rgba(252,251,248,0.28);
  color: rgba(252,251,248,0.86);
  background: rgba(26,26,23,0.18);
  border-radius: 0;
  padding: 0.46rem 0.74rem;
  font-family: 'Inter',sans-serif;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
@media (max-width: 700px) { .home-signal-strip { justify-content: flex-start; } }

/* === ANFRAGE: Verfügbarkeit + Vollbild-Bestätigung === */
.anfrage-form[hidden] { display: none; }
.anfrage-erfolg { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem 0 0.5rem; animation: anfrage-erfolg-auf 500ms var(--ease-expo) both; }
.anfrage-erfolg[hidden] { display: none; }
@keyframes anfrage-erfolg-auf { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
.anfrage-erfolg-icon { display: inline-flex; width: 2.9rem; height: 2.9rem; }
.anfrage-erfolg-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--graphit); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.anfrage-erfolg-icon path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: anfrage-stroke 520ms var(--ease-out) 140ms forwards; }
@keyframes anfrage-stroke { to { stroke-dashoffset: 0; } }
.anfrage-erfolg-titel { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--graphit); }
.anfrage-erfolg-text { max-width: 44ch; font-size: 1.05rem; line-height: 1.6; color: var(--graphit-70); }
.anfrage-erfolg-text em { font-style: italic; }
.anfrage-erfolg-reset { margin-top: 0.3rem; background: none; border: 0; border-bottom: 1px solid var(--graphit-40); padding: 0.2rem 0; font-family: 'Inter',sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphit-60); cursor: pointer; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.anfrage-erfolg-reset:hover { color: var(--graphit); border-color: var(--graphit); }
@media (prefers-reduced-motion: reduce) { .anfrage-erfolg { animation: none; } .anfrage-erfolg-icon path { animation: none; stroke-dashoffset: 0; } }



/* =====================================================
   Anfrage · Wohnungs-Auswahl mit Verfügbarkeit (Variante B)
   Ersetzt Dropdown + altes 60-Nächte-Widget + Datumscheck.
   Ganze Zeile = Auswahl (radio). Belegt = ausgegraut, nicht wählbar.
   ===================================================== */
.anfrage-auswahl { margin: 1.1rem 0 0.4rem; }
.anfrage-auswahl-titel { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphit-60); margin-bottom: 0.6rem; }
.anfrage-auswahl-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--graphit-20); }
.anfrage-auswahl-zeile {
  display: flex; align-items: baseline; gap: 0.9rem;
  min-height: 3rem; padding: 0.65rem 0.7rem; margin: 0 -0.7rem;
  border-bottom: 1px solid var(--graphit-10);
  cursor: pointer; position: relative;
  transition: background-color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.anfrage-auswahl-zeile:hover { background: var(--graphit-10); }
.anfrage-auswahl-zeile[aria-checked="true"] { background: var(--graphit-10); }
.anfrage-auswahl-zeile[aria-checked="true"]::before {
  content: ""; position: absolute; left: -0.7rem; top: 0; bottom: 0; width: 2px; background: var(--graphit);
}
.anfrage-auswahl-zeile:focus-visible { outline: 2px solid var(--graphit); outline-offset: -2px; }
.anfrage-auswahl-name { font-weight: 500; min-width: 5rem; }
.anfrage-auswahl-meta { flex: 1; font-size: 0.9rem; color: var(--graphit-60); }
.anfrage-auswahl-status { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphit-60); }
.anfrage-auswahl-zeile[data-az-frei="ja"] .anfrage-auswahl-status { color: var(--graphit); font-weight: 500; }
.anfrage-auswahl-zeile[data-az-frei="nein"] { cursor: not-allowed; }
.anfrage-auswahl-zeile[data-az-frei="nein"] .anfrage-auswahl-name,
.anfrage-auswahl-zeile[data-az-frei="nein"] .anfrage-auswahl-meta { color: var(--graphit-60); }
.anfrage-auswahl-zeile[data-az-frei="nein"]:hover { background: transparent; }
.anfrage-auswahl-zeile--unsicher .anfrage-auswahl-name { font-weight: 400; color: var(--graphit-60); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .anfrage-auswahl-zeile { transition: none; }
}