/* FRAME Real Estate — Immobilien */

:root {
  --bg:         #FCFCFA;
  --ink:        #1A1A18;
  --stone:      #9B9B93;
  --line:       #E8E6E0;
  --bahama:     #E4A324;
  --bahama-soft:#F0C567;
  /* Task 5: dediziert dunklerer Grauton nur für Karten-Metadaten (Stadt/
     Stadtteil/Straße/Objektart/Wohnfläche) — var(--stone) bleibt für alle
     anderen Stellen unverändert, damit der Effekt gezielt bleibt. */
  --stone-strong: #7C7C76;

  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;

  --site-header-height: calc(4.5rem + env(safe-area-inset-top, 0px));
}

@media (max-width: 960px) {
  :root {
    --site-header-height: calc(6rem + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   Nav-Arrow — EINE gemeinsame Komponente für alle Prev/Next-Pfeile
   sitewide (Objektkarten-Mini-Slider, Objekt-Rail, Detail-Hero-Slider,
   Galerie-Lightbox, Mailand). Reiner Winkel aus zwei dünnen Linien
   (kein Kreis, keine Füllung, kein Schatten) — die Pfeilform selbst ist
   das interaktive Element. Kontext-Klassen (.listings-rail__nav,
   .listing-slider__nav, .property-hero-slider__nav,
   .gallery-lightbox__nav) übernehmen nur Position je Ort; Form, Farbe,
   Hover, Fokus, Disabled-Zustand kommen ausschließlich von hier.
   ============================================================ */
.nav-arrow {
  --nav-arrow-size: 20px;
  --nav-arrow-stroke: 1.5px;
  --nav-arrow-color: var(--ink);
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--nav-arrow-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.nav-arrow__glyph {
  display: block;
  width: var(--nav-arrow-size);
  height: var(--nav-arrow-size);
  border-top: var(--nav-arrow-stroke) solid currentColor;
  border-right: var(--nav-arrow-stroke) solid currentColor;
  transition: transform 0.25s ease;
}

/* "‹" / "›" — offener Winkel, kein Vollpfeil/Dreieck */
.nav-arrow--prev .nav-arrow__glyph { transform: rotate(-135deg); }
.nav-arrow--next .nav-arrow__glyph { transform: rotate(45deg); }

/* Auf Fotos: Weiß + dezenter Drop-Shadow statt Kreis-Hintergrund für Kontrast */
.nav-arrow--on-image {
  --nav-arrow-color: #fff;
}
.nav-arrow--on-image .nav-arrow__glyph {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.nav-arrow--lg { --nav-arrow-size: 24px; }
.nav-arrow--sm { --nav-arrow-size: 16px; }

/* Hover-Bewegung nur auf echten Zeigegeräten — verhindert zugleich, dass
   Touch-Geräte beim ersten Tap nur den Hover simulieren statt direkt zu
   navigieren (Ursache des Doppel-Tap-Bugs auf Objektkarten). */
@media (hover: hover) and (pointer: fine) {
  .nav-arrow--prev:hover { transform: translateY(-50%) translateX(-4px); }
  .nav-arrow--next:hover { transform: translateY(-50%) translateX(4px); }
}

.nav-arrow:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-arrow[disabled],
.nav-arrow.is-disabled {
  opacity: 0.28;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-arrow,
  .nav-arrow__glyph {
    transition: none;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.gallery-lightbox-open {
  overflow: hidden;
}

a {
  color: inherit;
}

/* ---------- Utilities ---------- */
.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;
}

/* ---------- Site header (properties pages) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) max(1.25rem, 5vw) 0.6rem;
  background: rgba(252, 252, 250, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.site-header__lead {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  min-width: 0;
}

/* Header-Rücklink: nutzt jetzt die zentrale Komponente
   `.back-link.back-link--header` aus /back-link.css. */

/* ---------- Site nav (landing — appears on scroll) ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) max(1.25rem, 5vw) 0.75rem;
  background: rgba(252, 252, 250, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.site-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.site-nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Landing: helle Kopfzeile über dem Hero, sticky */
.site-nav--landing {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  background: var(--bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  /* Seitlicher Innenabstand bewusst GEDECKELT (clamp mit festem Max-Wert),
     nicht mehr unbegrenzt mit der Fensterbreite mitwachsend (max(...,6vw)
     wurde auf sehr breiten Screens zu großzügig und drückte Logo/rechte
     Gruppe weit ins Bildinnere). Ziel: ruhiger, konstanter Rand von
     32–72px, siehe --header-side-padding unten. */
  padding: calc(1.1rem + env(safe-area-inset-top, 0px)) var(--header-side-padding, clamp(32px, 4vw, 72px)) 0.85rem;
}

.site-nav__inner {
  /* Logo links, mittlere Stadt (Mailand/Milan) exakt auf der 50%-Achse des
     Browsers, rechte Gruppe (Für Eigentümer/Off Market/Kontakt/DE/EN)
     bündig rechts — Logo und rechte Gruppe sind die zwei Flex-Kinder
     (justify-content:space-between), beide sitzen dank der SYMMETRISCHEN
     Innenabstände auf .site-nav--landing genau am linken/rechten
     Innenrand. Kein max-width/margin:auto mehr: die Mitte von
     .site-nav__inner soll die echte Browsermitte sein (nicht die Mitte
     einer kleineren, zentrierten Box) — Voraussetzung dafür, dass die
     JS-Zentrierung unten "Mailand = exakte 50%-Achse" korrekt berechnen
     kann. Die Städtenavigation ist kein drittes Flex-Kind, sondern absolut
     positioniert (siehe .city-nav--header) und wird von menu.js so
     verschoben, dass Mailand/Milan (nicht die ganze Gruppe) exakt zentriert
     landet, mit Kollisionssperre gegenüber Logo/rechter Gruppe. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.site-nav__wordmark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  padding: 0.35rem 0.35rem 0.35rem 0;
}

.site-nav__wordmark.brand-logo {
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
}

.site-nav--landing .brand-logo--header img {
  display: block;
  width: min(12vw, 2.55rem);
  height: auto;
  margin-top: 0.25rem;
}

.site-nav__wordmark:hover img,
.site-nav__wordmark:focus-visible img {
  opacity: 0.82;
}

.site-nav--landing .site-nav__links {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Abstand zwischen den drei Navigationslinks (Für Eigentümer/Off Market/
   Kontakt) — bewusst per Margin statt Flex-Gap, damit der GRÖSSERE Abstand
   vor dem Sprachschalter (s. u.) unabhängig eingestellt werden kann, ohne
   sich mit einem einheitlichen Gap-Wert zu addieren. */
.site-nav--landing .site-nav__links a + a {
  margin-left: 1.1rem;
}

/* Sprachschalter (DE/EN): wieder fester, letzter Teil von .site-nav__links
   (nicht mehr eigenständiger vierter Block) — soll "wie ein natürlicher
   Teil der Navigation wirken", direkt nach "Kontakt". margin-left ~2rem
   (32px) liegt im vorgegebenen Zielkorridor 28–36px. */
.site-nav--landing .site-nav__links .frame-lang-switch {
  flex-shrink: 0;
  margin-left: 2rem;
}

.site-nav--landing .site-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 0.5rem 0.4rem;
  white-space: nowrap;
}

.site-nav--landing .site-nav__links a:hover,
.site-nav--landing .site-nav__links a:focus-visible {
  color: var(--ink);
}

.city-nav--header {
  flex: unset;
  flex-shrink: 0;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  width: auto;
  padding: 0;
  flex-wrap: nowrap;
  gap: 0.6rem 1rem;
}

/* Einzeiliges Layout: left:50% ist nur die CSS-Vorgabe für den Fall ohne
   JavaScript (oder bevor die Städte geladen sind). menu.js überschreibt
   "left" danach so, dass die MITTLERE Stadt (Mailand/Milan) exakt auf der
   50%-Achse des Browsers landet — nicht die ganze Gruppe als Ganzes
   zentriert (das würde bei unterschiedlich breiten Randstädten Berlin/
   München nie exakt symmetrisch aussehen, ist aber laut Vorgabe auch nicht
   nötig: nur Mailand muss exakt mittig sein). Weicht automatisch nur so
   weit von der exakten Mitte ab, wie nötig, um eine Kollision mit Logo
   oder der rechten Gruppe sicher auszuschließen. WICHTIG: die Städte
   werden asynchron nachgeladen (city-nav.js lädt /data/locations.json
   per fetch) — die Zentrierung muss daher per MutationObserver auf
   Inhaltsänderungen von .city-nav--header reagieren, sonst rechnet sie
   mit einer noch leeren Box (Ursache des zuvor live beobachteten
   Overlaps zwischen "München/Munich" und "Für Eigentümer/For Owners"). */
.site-nav--landing .city-nav--header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.city-nav--header .city-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.5rem 0.4rem;
  /* Basiszustand = "aktiv/verfügbar" (Ink) — nur München (--coming) ist gedämpft.
     So lesen Berlin und Mailand im Header immer eindeutig aktiv, unabhängig
     davon, ob sie gerade die aktuelle Seite sind (Bug D). */
  color: var(--ink);
  white-space: nowrap;
}

.city-nav--header .city-nav__link--active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.city-nav--header .city-nav__link--coming {
  color: var(--stone);
}

/* aktuelle Stadt bleibt hervorgehoben (Ink), auch wenn „demnächst" (active + coming) */
.city-nav--header .city-nav__link--active.city-nav__link--coming {
  color: var(--ink);
}

.city-nav--header .city-nav__link:hover {
  color: var(--ink);
}

.city-nav--header .city-nav__link--active:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--bahama);
}

.city-nav--header .city-nav__sep {
  font-size: 0.9375rem;
  color: var(--stone);
}

.city-nav--header .city-nav__link--coming {
  position: relative;
}

.city-nav--header .city-nav__soon {
  position: absolute;
  top: calc(50% + 0.72em);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: soon-pulse 4s ease-in-out infinite;
}

.city-nav--header .city-nav__soon-label {
  font-family: var(--font-serif);
  font-style: italic;
  /* 0.68rem -> 0.75rem: minimal größer, Vorgabe. */
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
  /* --bahama (#E4A324) war auf hellem Grund bei dieser geringen Größe zu
     kontrastarm/kaum lesbar. Gedeckteres, dunkleres Gold statt der global
     helleren Akzentfarbe — bleibt klar sekundär zu "München" (kursive
     Serife, kleiner, kein Fettgrad), ist aber jetzt lesbar. Nur an dieser
     Stelle, --bahama selbst bleibt für Unterstreichungen etc. unverändert.
     Messung (technische Prüfung, reine Kontrastkorrektur, keine
     Positions-/Größenänderung): #A8791C auf #FCFCFA ergab 3.77:1 — unter
     dem WCAG-Richtwert 4.5:1 für Fließtext. #8A6214 ergibt 5.33:1. */
  color: #8A6214;
}

@keyframes soon-pulse {
  0%, 60% { opacity: 0.5; }
  80% { opacity: 1; }
  100% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .city-nav--header .city-nav__soon { animation: none; opacity: 0.9; }
}

.city-nav--header .city-nav__soon-dot {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--bahama);
}

/* Bewusstes zweizeiliges Layout für MITTLERE Desktop-Breiten ("Variante 2").
   Städte + rechte Gruppe (Für Eigentümer/Off Market/Kontakt/DE/EN) sind im
   einzeiligen Layout oben kompakter als beim vorherigen Vier-Blöcke-Layout —
   Schwelle mit echten Live-Messungen (nicht geschätzt) neu bestimmt, siehe
   Bericht. Unterhalb der Schwelle greift das zweizeilige Layout:
     Zeile 1 (≈64–70px): Logo links · Für Eigentümer/Off Market/Kontakt/
                          Sprachschalter rechts
     Zeile 2 (≈38–44px): Städtenavigation zentriert
   Unterhalb des Burger-Breakpoints (768px Standard, 1080px auf Für-
   Eigentümer-Seiten, siehe FRAME_MENU pro Seite) ist ohnehin die mobile
   Variante aktiv — diese Regeln wirken dort nicht sichtbar (Elemente per
   .frame-menu-compact ausgeblendet). */
@media (max-width: 84rem) {
  .site-nav--landing {
    /* Reduzierte, aber nicht knappe Paddings — keine übergroßen Ränder,
       aber genug Luft für zwei ruhige Zeilen statt einer gepressten. */
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) max(1.5rem, 4vw) 0.6rem;
  }

  .site-nav__inner {
    /* Zweizeiliges Layout braucht wieder Grid statt der Flex-Basisregel
       oben (die gilt nur für das einzeilige Layout > Schwelle). */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Explizite Mindesthöhen statt "auto auto" — verhindert, dass die
       zweite Zeile wie ein zufälliger Umbruch wirkt, und hält beide Zeilen
       über alle mittleren Breiten hinweg konsistent hoch. */
    grid-template-rows: minmax(64px, auto) minmax(38px, 44px);
    row-gap: 0.35rem;
    column-gap: 1.1rem;
  }

  .site-nav--landing .brand-logo--header img {
    width: min(11vw, 2.35rem);
  }

  .site-nav__wordmark {
    grid-column: 1;
    grid-row: 1;
  }

  .site-nav--landing .site-nav__links {
    grid-column: 2;
    grid-row: 1;
  }

  .site-nav--landing .site-nav__links a {
    font-size: 0.825rem;
  }

  .site-nav--landing .city-nav--header {
    /* Zweizeiliges Layout: Städte stehen in einer eigenen, vollbreiten
       Grid-Zeile — dort ist grid-basierte Zentrierung korrekt (die Zeile
       spannt die gesamte Breite, nicht nur eine Teilspalte). Die absolute
       Positionierung aus der Basisregel oben wird hier zurückgesetzt. */
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    gap: 0.65rem 1.1rem;
  }

  .city-nav--header .city-nav__link {
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.3rem;
  }

  .city-nav--header .city-nav__sep {
    font-size: 0.8125rem;
  }

  .city-nav--header .city-nav__soon-label {
    font-size: 0.7rem;
    /* Sicherheitsnetz: "München · demnächst" darf bei keiner mittleren
       Breite umbrechen. */
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .site-nav--landing .site-nav__inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    row-gap: 0.55rem;
    column-gap: 0;
  }
  .site-nav--landing .site-nav__wordmark {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    padding: 0.35rem 0;
  }
  .site-nav--landing .site-nav__links {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav--landing .city-nav--header {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }
  .site-nav--landing .brand-logo--header img {
    width: min(22vw, 2.4rem);
  }
  .site-nav--landing .site-nav__links a {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    padding: 0.35rem 0.15rem;
  }
  .city-nav--header .city-nav__link {
    font-size: 0.75rem;
  }
}

.site-header__brand,
.site-nav__brand {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
  transition: color 0.25s ease;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.brand-logo img {
  display: block;
  width: min(42vw, 11rem);
  height: auto;
}

.site-nav .brand-logo img {
  width: min(15.75vw, 4.19rem);
}

.site-header__brand.brand-logo img {
  /* identisch zum Standard (Startseite/Off-Market/Mailand = 67px), nicht mehr kleiner */
  width: min(15.75vw, 4.19rem);
  margin-top: 0.25rem;
}

.brand-logo:hover img {
  opacity: 0.82;
}

.site-nav .brand-logo {
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
}

.site-header__brand:hover,
.site-nav__brand:hover {
  color: var(--ink);
}

.site-header__nav,
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__link,
.site-nav__links a {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
  padding: 0.5rem 0.15rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s ease;
}

.site-header__link:hover,
.site-nav__links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.site-header__link:focus-visible,
.site-nav__links a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* aktive Seite im Header dezent markieren (feine Goldlinie wie im Menü) */
.site-header__link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

/* Off-Market Task 10: dieselbe feine Goldlinie fehlte bislang für
   .site-nav__links a[aria-current="page"] (z. B. "Off Market", "Für
   Eigentümer") — Regel existierte nur für .site-header__link. Wirkt
   global überall dort, wo eine Seite bereits aria-current="page" setzt. */
.site-nav__links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.site-nav--dark .site-nav__links a[aria-current="page"] {
  color: #FCFCFA;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

/* ---------- Page shell ---------- */
.properties-page {
  max-width: 72rem;
  margin: 0 auto;
  /* Rand oben mit 4rem gedeckelt (statt unbegrenzt mit 5vw zu wachsen) —
     auf sehr großen Desktop-Monitoren wurde der Innenraum sonst immer
     schmaler, obwohl die Seite selbst längst bei max-width 72rem greift.
     Das war die eigentliche Ursache dafür, dass im Objektkarussell nie
     zuverlässig 3 volle Karten Platz hatten (Bug/Task 1). */
  padding: 1.25rem clamp(1.25rem, 5vw, 4rem) 0;
}

.properties-page__header {
  padding: 0 0 2.5rem;
  max-width: 36rem;
}

.properties-page__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.properties-page__subtitle {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--stone);
  letter-spacing: 0.01em;
}

/* ---------- Brand intro (landing) ---------- */
.brand-intro {
  max-width: 36rem;
  margin: 0 auto;
  padding: 5rem max(1.25rem, 5vw) 1rem;
}

.brand-intro__text {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.55;
  color: var(--stone);
  font-weight: 400;
}

/* ---------- Listings rail (horizontal row — landing) ---------- */
.listings-rail {
  position: relative;
  /* Harte Containment-Grenze: egal was im Track passiert (Kartenbreiten,
     Textlänge, Rundungsfehler bei vw-Berechnungen) — hier kann nichts über
     den eigentlichen Rail hinaus sichtbar werden. Das Scrollen selbst
     übernimmt weiterhin die Viewport-Kindebene (overflow-x: auto). */
  overflow: hidden;
  margin: 0 calc(-1 * clamp(1.25rem, 5vw, 4rem));
  padding: 0 clamp(1.25rem, 5vw, 4rem);
}

.listings-rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* Weicher Fade statt hartem Anschnitt: eine angeschnittene Karte am rechten
     (bzw. nach dem Scrollen linken) Rand wirkt dadurch nie wie abgeschnittener/
     kaputter Text, sondern wie eine bewusste Karussell-Andeutung.
     Fade-Zone bewusst breiter als ein reiner Kanten-Vignette-Saum (Bug A/
     Task C): 0.75rem war schmaler als der typische Anschnitt einer dritten,
     nur teilweise sichtbaren Karte — dadurch blieb deren Titeltext bis kurz
     vor der harten Kante voll deckend lesbar und wirkte "abgeschnitten"
     statt bewusst ausgeblendet. Eine deutlich breitere Zone sorgt dafür, dass
     jede nur teilweise sichtbare Karte (Bild UND Titel) schon vorher spürbar
     ausblendet, bevor die harte Containment-Grenze erreicht wird. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(2rem, 6vw, 4rem), #000 calc(100% - clamp(2rem, 6vw, 4rem)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(2rem, 6vw, 4rem), #000 calc(100% - clamp(2rem, 6vw, 4rem)), transparent 100%);
}

/* Der Fade darf nur an einer Kante erscheinen, an der tatsächlich noch
   weitere Karten folgen. Ohne diese Regel wirkt z. B. die allererste Karte
   links fälschlich "angeschnitten", obwohl dort gar nichts zum Scrollen
   kommt. .is-at-start/.is-at-end werden von listings-render.js anhand der
   echten scrollLeft-Position gesetzt. */
.listings-rail__viewport.is-at-start {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(2rem, 6vw, 4rem)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(2rem, 6vw, 4rem)), transparent 100%);
}

.listings-rail__viewport.is-at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(2rem, 6vw, 4rem), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(2rem, 6vw, 4rem), #000 100%);
}

.listings-rail__viewport.is-at-start.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Task 1 (Karussell-Reparatur): Ab 1024px passen dank der neuen Karten-
   breiten (siehe .listing-card weiter unten) immer 3 volle Karten hinein —
   eine 4. Karte blitzt höchstens ~2rem breit an (reines Bild, kein Text
   mehr). Die alte, breitere Fade-Zone (bis 4rem) hätte in diesem knappen
   Rest bereits in die 3. (vollständig sichtbare) Karte hineingereicht.
   Deshalb hier eine schmalere, feste Fade-Breite statt der vw-Version. */
@media (min-width: 1024px) {
  .listings-rail__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  }
  .listings-rail__viewport.is-at-start {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  .listings-rail__viewport.is-at-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
  }
  .listings-rail__viewport.is-at-start.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.listings-rail__viewport::-webkit-scrollbar {
  display: none;
}

.listings-rail__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: 0.25rem 0 0.5rem;
}

.listings-rail--solo .listings-rail__track {
  justify-content: center;
}

.listing-card {
  flex: 0 0 min(72vw, 20rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Task 1 (Karussell-Reparatur): Kartenbreiten so gewählt, dass bei der
   tatsächlich verfügbaren Rail-Breite (Seiten-max-width 72rem minus
   gedeckeltem Rand, siehe .properties-page/.listings-rail weiter oben)
   auf Desktop IMMER 3 volle Karten + 2 Gaps hineinpassen, mit höchstens
   einem schmalen, unlesbaren Anriss einer 4. Karte am Rand — nie ein
   angeschnittener Titel/Text einer eigentlich "sichtbaren" Karte.
   Rechnerisch knappster Fall ist 1024px (Rail-Innenbreite ≈ 921px):
   3 × 17rem (272px) + 2 × ~26px Gap ≈ 868px, sicher innerhalb 921px.
   Ab 1280px liegt die Rail-Innenbreite konstant bei ≈1024px (Seite ist ab
   dann bei max-width gedeckelt, Rand ebenfalls bei 4rem gedeckelt):
   3 × 19.5rem (312px) + 2 × 24px Gap = 984px, sicher innerhalb 1024px. */
@media (min-width: 1024px) {
  .listing-card { flex-basis: 17rem; }
}

@media (min-width: 1280px) {
  .listing-card { flex-basis: 19.5rem; }
}

.listing-card:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.listing-card--sold {
  cursor: default;
  opacity: 0.78;
}

.listing-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--line);
}

.listing-card__media::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(to bottom, rgba(26, 26, 24, 0.32), transparent);
  pointer-events: none;
  z-index: 2;
}

.listing-card--sold .listing-card__media::before {
  background: linear-gradient(to bottom, rgba(26, 26, 24, 0.22), transparent);
}

.listing-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.listing-card__photo--empty {
  min-height: 100%;
  background: var(--line);
}

/* Nur auf echten Zeigegeräten (Maus) — sonst würde ein :hover auf dem Link
   selbst auf Touch-Geräten beim ersten Tap nur simuliert und ein zweiter Tap
   nötig, um wirklich zu navigieren (der gemeldete Doppel-Tap-Bug). */
@media (hover: hover) and (pointer: fine) {
  .listing-card:hover .listing-card__photo {
    transform: scale(1.03);
  }
}

.listing-card--sold .listing-card__photo,
.listing-card--sold:hover .listing-card__photo {
  transform: none;
  filter: none;
}

/* Bildsprache harmonisieren: nur die zwei tatsächlichen Ausreißer gezielt
   korrigieren (Paul-Lincke-Ufer sehr hell/überstrahlt, Garten-Loft-Steglitz
   sehr dunkle Abendaufnahme) — bewusst KEIN einheitlicher Filter über alle
   Karten, damit die Fotos nicht künstlich gleich aussehen. */
.listing-card[data-slug="paul-lincke-ufer"] .listing-card__photo,
.listing-card[data-slug="paul-lincke-ufer"] .listing-slider__slide img,
.listing-row[data-slug="paul-lincke-ufer"] .listing-row__photo,
.listing-row[data-slug="paul-lincke-ufer"] .listing-slider__slide img {
  filter: brightness(0.94) contrast(1.03);
}

.listing-card[data-slug="garten-loft-steglitz"] .listing-card__photo,
.listing-card[data-slug="garten-loft-steglitz"] .listing-slider__slide img,
.listing-row[data-slug="garten-loft-steglitz"] .listing-row__photo,
.listing-row[data-slug="garten-loft-steglitz"] .listing-slider__slide img {
  filter: brightness(1.1) contrast(0.98);
}

.listing-card__status {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.listing-card__status--sold {
  color: rgba(252, 252, 250, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ---------- Status-Badge (Variante I: Leiste oben + sanfter Verlauf) ---------- */
.listing-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0.85rem 1.1rem 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.listing-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bahama);
  flex: none;
}

.listing-badge--vermittelt {
  top: 0.9rem;
  left: 0.9rem;
  right: auto;
  gap: 0;
  padding: 0.4rem 0.7rem 0.42rem;
  background: var(--bahama);
  color: var(--ink);
  letter-spacing: 0.2em;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.listing-badge--vermittelt .listing-badge__dot {
  display: none;
}

.listing-badge--reserviert {
  top: 0.9rem;
  left: 0.9rem;
  right: auto;
  gap: 0;
  padding: 0.4rem 0.7rem 0.42rem;
  background: rgba(26, 26, 24, 0.92);
  color: #fff;
  letter-spacing: 0.2em;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/* "Neu" nutzt bewusst dieselbe Ecke/denselben Versatz wie Reserviert/Vermittelt
   (top/left 0.9rem, gleiche Pille) statt des breiten Verlaufsbands — damit alle
   Status-Labels auf den Objektkarten konsistent positioniert sind. */
.listing-badge--neu {
  top: 0.9rem;
  left: 0.9rem;
  right: auto;
  gap: 6px;
  padding: 0.4rem 0.7rem 0.42rem;
  background: rgba(26, 26, 24, 0.86);
  color: #fff;
  letter-spacing: 0.2em;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.listing-card__note {
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bahama);
}

/* Reserviert-Platzhalter: unsichtbar, aber Platz bleibt reserviert — dadurch
   schließen alle Kartenböden auf gleicher Höhe ab, egal ob eine Karte die
   zusätzliche Hinweiszeile ("Vormerkung möglich") hat oder nicht. */
.listing-card__note--placeholder {
  visibility: hidden;
}

.listing-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.35rem;
  padding: 0 0.15rem;
}

.listing-card__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 400;
  line-height: 1.2;
  min-height: 2.4em;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* Absicherung gegen Bug A: lange (zusammengesetzte) Objekttitel müssen
     immer sauber umbrechen statt irgendwo hart abgeschnitten zu wirken. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.listing-card__location {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-strong);
}

/* Zweite, kompakte Infozeile (reale Daten: feature · Wohnfläche) — reine
   Typografie, keine Icons/Boxen. */
.listing-card__meta {
  margin: 0.3rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--stone-strong);
}

.listing-card__price {
  margin: 0.35rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.listings-rail__nav {
  /* Form/Hover/Fokus kommen aus .nav-arrow — hier nur Position im Rail. */
}

.listings-rail__nav--prev {
  left: 0.15rem;
}

.listings-rail__nav--next {
  right: 0.15rem;
}

/* Pagination-Zeile: Zähler ("1 / 9") + Dash-Indikatoren zusammen — auf Mobil
   UND Desktop gleich aufgebaut, damit die Logik "es gibt mehr Objekte" überall
   konsistent und eindeutig ist (nicht nur die leicht zu übersehenden Dashes). */
.listings-rail__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.listings-rail__count {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--stone);
}

.listings-rail__indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 0;
}

.listings-rail__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.listings-rail__indicator-bar {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  transition: background-color 0.3s ease, height 0.3s ease;
}

.listings-rail__indicator.is-active .listings-rail__indicator-bar {
  height: 2px;
  background: var(--bahama);
}

.listings-rail__indicator:hover .listings-rail__indicator-bar {
  background: var(--stone);
}

.listings-rail__indicator.is-active:hover .listings-rail__indicator-bar {
  background: var(--bahama);
}

@media (max-width: 767px) {
  .listings-rail__nav {
    display: none;
  }

  /* Korrektur (2. Regression): 86vw ließ pro Bildschirm faktisch nur EIN
     Objekt erkennbar wirken — der nächste Karten-Anriss war so schmal, dass
     der weiche Fade ihn fast vollständig verschluckte. Das ist kein
     verlässlicher Hinweis auf "hier geht's weiter", sondern wirkt wie eine
     Einzelkarte. Referenz Domus Nova (mobiles Kartenlayout): erste Karte
     ~60vw breit, zweite Karte sichtbar zur Hälfte angeschnitten, keine
     Unschärfe nötig — das Anschnitt-Bild selbst ist der Hinweis.
     ~60vw + ~1rem Gap lässt bei üblichen Telefonbreiten (360–430px) ca.
     40–50% der zweiten Karte sichtbar stehen. */
  .listing-card {
    flex-basis: min(60vw, 15rem);
  }

  .listings-rail__viewport {
    scroll-snap-type: x mandatory;
  }

  .listing-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* Der weiche Masken-Fade war der eigentliche Fehler: er sollte als Hinweis
     auf weitere Objekte dienen, blieb aber ungenau — und am Startpunkt
     (is-at-start) erzeugte die Kante links einen sichtbaren "Rand", obwohl
     dort gar nichts mehr hinzuscrollen ist. Jetzt übernimmt die real
     sichtbare, zur Hälfte angeschnittene Folgekarte diese Funktion; die
     Maskierung wird auf Mobil komplett deaktiviert (Desktop ab 1024px
     unverändert, siehe eigene Regel weiter oben). */
  .listings-rail__viewport,
  .listings-rail__viewport.is-at-start,
  .listings-rail__viewport.is-at-end,
  .listings-rail__viewport.is-at-start.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Listings stack (one property per row, alternating split) ---------- */
.listings-stack {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding-bottom: 2rem;
}

.listing-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.listing-row:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.listing-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.listing-row__body:focus-visible {
  outline: none;
}

/* Media — generous, quiet anchor */
.listing-row__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--line);
}

.listing-row__media::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(to bottom, rgba(26, 26, 24, 0.38), transparent);
  pointer-events: none;
  z-index: 2;
}

.listing-row__photo,
.listing-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .listing-row:hover .listing-row__photo,
  .listing-row:hover .listing-slider__slide img {
    transform: scale(1.02);
  }
}

/* Status eyebrow — in image, serif, no badge */
.listing-row__status-eyebrow {
  position: absolute;
  top: 1.125rem;
  left: 1.125rem;
  z-index: 3;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

/* Mini slider */
.listing-slider {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.listing-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.listing-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

/* Bild-Mini-Slider-Pfeile: Form/Farbe/Fokus aus .nav-arrow (--sm --on-image);
   hier nur Position + Sichtbarkeitslogik. Auf Touch/ohne echtes Hover IMMER
   dezent sichtbar (kein :hover-Reveal, das den ersten Tap „verbraucht" und
   eine Navigation erst beim zweiten Tap auslösen würde). Auf Zeigegeräten
   dezenter als Standard, klar sichtbar bei Hover/Fokus. */
.listing-slider__nav {
  bottom: 0.6rem;
  top: auto;
  transform: none;
  z-index: 4;
  opacity: 0.62;
}

.listing-slider__nav--prev {
  left: clamp(0.25rem, 1vw, 0.5rem);
}

.listing-slider__nav--next {
  right: clamp(0.25rem, 1vw, 0.5rem);
}

@media (hover: hover) and (pointer: fine) {
  .listing-slider__nav {
    opacity: 0;
  }

  .listing-row__media:hover .listing-slider__nav,
  .listing-row__media:focus-within .listing-slider__nav,
  .listing-card__media:hover .listing-slider__nav,
  .listing-card__media:focus-within .listing-slider__nav {
    opacity: 0.85;
  }

  .listing-card:hover .listing-slider__slide img {
    transform: scale(1.03);
  }
}

.listing-slider__dots {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem 0 0.8rem;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.listing-slider__dot {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.25s ease, transform 0.25s ease;
}

.listing-slider__dot.is-active {
  background: var(--bahama);
  transform: scale(1.3);
}

/* Name / price lead — Domus hierarchy */
.listing-row__lead {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  width: 100%;
  margin-bottom: 1.25rem;
}

.listing-row__title-block {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.listing-row__price-block {
  flex: 0 0 auto;
  min-width: 0;
  text-align: right;
}

.listing-row__name,
.listing-row__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.listing-row__name {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.listing-row__location,
.listing-row__price-sub {
  margin: 0.5rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--stone);
}

.listing-row__oneline {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--stone);
  margin: 0;
  max-width: 28rem;
}

@media (min-width: 900px) {
  .listings-stack {
    gap: 7rem;
  }

  .listing-row {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: max(3rem, 48px);
  }

  .listing-row--reverse {
    grid-template-columns: 2fr 3fr;
  }

  .listing-row--reverse .listing-row__media {
    order: 2;
  }

  .listing-row--reverse .listing-row__body {
    order: 1;
    align-items: flex-end;
  }

  .listing-row__lead {
    gap: 2rem;
  }

  .listing-row--reverse .listing-row__oneline {
    margin-left: auto;
    text-align: right;
  }
}

@media (min-width: 1024px) {
  /* Auf 4rem gedeckelt (statt unbegrenzt mit 5vw zu wachsen) — diese Regel
     überschreibt sonst den weiter oben in .properties-page gesetzten
     gedeckelten Rand, und auf sehr großen Monitoren würde der Innenraum
     dadurch wieder schrumpfen (genau die Ursache von Bug/Task 1). */
  .properties-page,
  .brand-intro {
    padding-left: clamp(3rem, 5vw, 4rem);
    padding-right: clamp(3rem, 5vw, 4rem);
  }
}

/* ---------- Empty / error state ---------- */
.properties-empty {
  padding: 5rem 0 6rem;
  border-top: 1px solid var(--line);
  max-width: 28rem;
}

.properties-empty__text {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: 0.75rem;
  color: var(--ink);
}

.properties-empty__hint {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--stone);
  margin-bottom: 1.5rem;
}

.properties-empty code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
}

.properties-empty a {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  color: var(--ink);
  transition: text-decoration-color 0.3s ease;
}

.properties-empty a:hover {
  text-decoration-color: var(--bahama);
}

/* ---------- Detail page ---------- */
.property-detail {
  max-width: 72rem;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.property-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 0 1.25rem;
}

.property-header__lead {
  min-width: 0;
}

.property-header__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.property-header__location {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--stone);
}

/* titleMobile/title: ein <h1>, zwei Varianten, nur eine sichtbar (die andere ist
   display:none und damit auch für Screenreader ausgeblendet — kein Duplikat). */
.property-header__title-full {
  display: none;
}

.property-header__title-mobile {
  display: inline;
}

@media (min-width: 768px) {
  .property-header__title-full {
    display: inline;
  }

  .property-header__title-mobile {
    display: none;
  }
}

.property-showcase {
  margin: 0 calc(-1 * max(1.25rem, 5vw)) 0;
}

/* Hero slider (detail page) */
.property-hero-slider {
  position: relative;
  margin: 0 auto;
  margin-bottom: 3.5rem;
  width: 100%;
  max-width: none;
  overflow: visible;
  background: transparent;
}

.property-hero-slider--empty {
  aspect-ratio: 3 / 2;
  width: 100%;
  background: var(--line);
}

.property-hero-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.property-hero-slider__track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-hero-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: min(74vh, 48rem);
  overflow: hidden;
  margin-top: 0;
  cursor: zoom-in;
}

.property-hero-slider__slide:focus-visible {
  outline: 2px solid var(--bahama);
  outline-offset: -4px;
}

.property-hero-slider__slide picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.property-hero-slider__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  image-orientation: from-image;
}

@media (max-width: 640px) {
  .property-hero-slider__slide {
    aspect-ratio: 4 / 3;
    max-height: none;
  }
}

/* Detail-Hero-Slider-Pfeile: Form/Farbe/Fokus aus .nav-arrow (--lg --on-image);
   hier nur Position + Sichtbarkeit. Auf Touch immer dezent sichtbar (kein
   Hover-Reveal nötig), auf Zeigegeräten dezenter mit Hover-Einblendung. */
.property-hero-slider__nav {
  opacity: 0.7;
}

.property-hero-slider__nav--prev {
  left: clamp(0.75rem, 2.5vw, 1.75rem);
}

.property-hero-slider__nav--next {
  right: clamp(0.75rem, 2.5vw, 1.75rem);
}

@media (hover: hover) and (pointer: fine) {
  .property-hero-slider__nav {
    opacity: 0;
  }

  .property-hero-slider__viewport:hover .property-hero-slider__nav,
  .property-hero-slider__viewport:focus-within .property-hero-slider__nav {
    opacity: 0.9;
  }
}

/* Pagination: single-line "01 / NN" counter + thin proportional progress line.
   Replaces the old per-image tick indicators (which wrapped into multiple rows
   on listings with many photos). Dynamic — never wraps, regardless of image count. */
.property-hero-slider__pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.375rem;
  padding: 0 0.75rem;
}

.property-hero-slider__pagination-count {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--stone);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.property-hero-slider__pagination-track {
  flex: 0 1 9rem;
  min-width: 3rem;
  max-width: 9rem;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.property-hero-slider__pagination-fill {
  display: block;
  height: 100%;
  background: var(--bahama);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dezente Affordanz: "Alle Bilder ansehen →" öffnet die Fullscreen-Lightbox
   an der aktuell sichtbaren Stelle. Eigene Zeile unter der Pagination, damit
   sie die zentrierte Zähler/Fortschritt-Zeile nicht durch Flex-Auto-Margins
   verschiebt. */
.property-hero-slider__expand {
  display: block;
  margin: 0.65rem auto 0;
  padding: 0.5rem 0.5rem;
  min-height: 44px;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--stone);
  cursor: pointer;
  transition: color 0.25s ease;
}

.property-hero-slider__expand:hover,
.property-hero-slider__expand:focus-visible {
  color: var(--ink);
}

.property-showcase__hero {
  height: min(72vh, 680px);
  overflow: hidden;
  background: var(--line);
}

.property-showcase__hero img,
.property-showcase__hero picture {
  width: 100%;
  height: 100%;
  display: block;
}

.property-showcase__hero img {
  object-fit: cover;
}

.property-showcase__hero--empty {
  height: min(40vh, 320px);
}

.property-showcase .property-gallery {
  margin-top: 0.75rem;
}

.property-core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: 3.5rem 0;
  border-top: 1px solid var(--line);
}

.property-sidebar__price-block {
  padding-bottom: 1.25rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--line);
}

.property-sidebar__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.property-sidebar__status {
  margin: 0.65rem 0 0;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.property-detail--available .property-sidebar__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.property-detail--available .property-sidebar__status::before {
  content: "";
  flex-shrink: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--bahama);
}

.property-sidebar__facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 1.5rem);
  row-gap: 0;
}

.property-sidebar__group {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.property-sidebar__group:nth-last-child(-n + 2) {
  border-bottom: none;
}

.property-sidebar__label {
  margin: 0 0 0.3rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.property-sidebar__value {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
}

.property-sidebar__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.75rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--bahama);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.property-sidebar__cta:hover,
.property-sidebar__cta:focus-visible {
  color: var(--bahama);
}

/* Telefonnummer als ruhiger Zweitkontakt unter der Haupt-CTA (Sidebar) —
   nutzt die bestehende .property-text-link-Optik, kein neuer Button/keine
   Box, min. 44px Klickhöhe für Touch. */
.property-sidebar__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.6rem;
}

.property-sidebar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.5rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--line);
}

.property-sidebar--sold {
  padding: 0.5rem 0 1rem;
}

.property-sidebar__sold-label {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bahama);
  border-radius: 2px;
}

.property-sidebar__sold-note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--stone);
  max-width: 16rem;
}

.property-sold-note {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}

.property-sold-note__text {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--stone);
  max-width: 28rem;
}

.property-text-link {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  color: var(--ink);
  transition: color 0.25s ease, text-decoration-color 0.3s ease;
}

.property-text-link:hover {
  color: var(--ink);
  text-decoration-color: var(--bahama);
}

.property-text-link:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* Bug (E-Mail-Adressen nie in Großbuchstaben): .property-text-link ist die
   zentrale Komponente für CTA-/Tel-/Datenschutz-Links (dort bewusst
   uppercase), wird aber auch direkt für die rohe E-Mail-Adresse verwendet.
   Modifier hebt nur text-transform/letter-spacing für diesen Fall auf. */
.property-text-link--email {
  text-transform: none;
  letter-spacing: 0.02em;
}

.property-narrative__lead {
  margin: 0 0 3rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.property-narrative__body p {
  font-size: clamp(0.875rem, 1.35vw, 1rem);
  line-height: 2.05;
  color: var(--ink);
  margin-bottom: 1.625rem;
}

.property-narrative__body p:last-child {
  margin-bottom: 0;
}

/* Lange Beschreibungen (> 2 Absätze): auf Mobile hinter "Weiterlesen" versteckt,
   ab 768px immer voll sichtbar (kein Kürzen auf Tablet/Desktop). Kurze Texte
   (≤ 2 Absätze) erzeugen gar keinen Toggle-Button, siehe property-detail.js. */
.property-narrative__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.25rem;
  padding: 0.6rem 0;
  min-height: 44px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--bahama);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.property-narrative__toggle:hover {
  opacity: 0.65;
}

.property-narrative__toggle:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .property-narrative__more[hidden] {
    display: block !important;
  }

  .property-narrative__toggle {
    display: none;
  }
}

/* Mittlere, bewusst unauffällige Kontaktzeile (2. von 3 Kontaktpunkten) —
   nur ein Textlink, keine Box, kein zweites großes CTA-Band. */
.property-mid-touch {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.property-location-block {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}

/* Floor plan */
.property-hero-slider__rendering {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bahama);
  background: rgba(20, 20, 18, 0.34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  pointer-events: none;
}

.property-film {
  margin: clamp(1.25rem, 3vw, 2rem) auto clamp(1.75rem, 4vw, 2.75rem);
  max-width: min(100%, 60rem);
}

.property-film__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}

.property-film__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.property-film__sound {
  position: absolute;
  bottom: clamp(0.9rem, 2vw, 1.4rem);
  right: clamp(0.9rem, 2vw, 1.4rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--bahama);
  background: rgba(20, 20, 18, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #f2ede4;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.property-film__sound:hover,
.property-film__sound:focus-visible {
  background: var(--bahama);
  color: #1a1a18;
}

.property-film__ic--on {
  display: none;
}

.property-film__sound.is-on .property-film__ic--off {
  display: none;
}

.property-film__sound.is-on .property-film__ic--on {
  display: inline-flex;
}

.property-features {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  border-top: 1px solid var(--line);
}

/* ---------- Ressourcen & Teilen ---------- */
.property-resources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: clamp(2rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
}

.property-resources__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.resource-link:hover,
.resource-link:focus-visible {
  border-bottom-color: var(--bahama);
  color: var(--bahama);
}

.resource-link__tag {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--stone);
  border: 1px solid var(--line);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}

.resource-link__arrow {
  color: var(--bahama);
}

/* Teilen — zurück zur alten Icon-Variante (Nutzer-Feedback: der Text-Button
   mit Dropdown-Menü wurde auf Mobil nicht korrekt dargestellt). Vier runde
   Icon-Buttons: Link kopieren, WhatsApp, E-Mail, Instagram. */
.property-share {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.property-share__label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

.property-share__row {
  display: inline-flex;
  gap: 0.55rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--bahama);
  background: var(--ink);
  color: #F2EDE4;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.share-btn:hover,
.share-btn:focus-visible {
  border-color: var(--bahama);
  background: var(--bahama);
  color: #1a1a18;
}

.share-btn.is-copied {
  border-color: var(--bahama);
  background: var(--bahama);
  color: #1a1a18;
}

.property-share__feedback {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bahama);
  min-height: 1em;
}

/* ---------- Anfrage-Band (abgedunkeltes Objektbild) ---------- */
.property-inquiry__band {
  position: relative;
  margin: clamp(1.5rem, 4vw, 3rem) calc(-1 * max(1.25rem, 5vw)) clamp(2rem, 5vw, 3.25rem);
  min-height: clamp(20rem, 46vh, 30rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-image: var(--inquiry-bg);
  background-size: cover;
  background-position: center;
}

.property-inquiry__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 14, 0.62), rgba(16, 16, 14, 0.72));
}

.property-inquiry__band-inner {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding: 2.5rem 1.5rem;
}

.property-inquiry__band-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 400;
  line-height: 1.2;
  color: #fcfcfa;
  margin: 0;
}

.property-inquiry__band-text {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  color: rgba(252, 252, 250, 0.88);
}

.property-inquiry__band-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.85rem;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fcfcfa;
  text-decoration: none;
  border: 1px solid rgba(252, 252, 250, 0.55);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.property-inquiry__band-cta:hover,
.property-inquiry__band-cta:focus-visible {
  background: var(--bahama);
  border-color: var(--bahama);
  color: #1a1a18;
}

@media (max-width: 640px) {
  .property-resources {
    flex-direction: column;
    align-items: flex-start;
  }
}

.property-features__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.property-features__item {
  break-inside: avoid;
  position: relative;
  padding: 0 0 0.9rem 1.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink);
}

.property-features__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bahama);
}

@media (max-width: 640px) {
  .property-features__list {
    columns: 1;
  }
}

.property-floorplan {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}

/* Grundrisse: immer volle Breite, als klar getrennte Sektionen untereinander
   (statt vorher als enges 2-Spalten-Raster, das jeden Plan auf ~50% Breite
   quetschte). Jede weitere Figur bekommt eine Trennlinie + mehr Abstand. */
.property-floorplan__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 6vw, 4rem);
}

.property-floorplan__figure {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.property-floorplan__figure:not(:first-child) {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.property-floorplan__trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.property-floorplan__trigger:focus-visible {
  outline: 2px solid var(--bahama);
  outline-offset: 6px;
}

.property-floorplan__trigger img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Deutlich größer als vorher (52rem) — Grundrisse sollen die verfügbare
     Desktop-Breite spürbar besser nutzen. */
  max-height: min(88vh, 62rem);
  object-fit: contain;
  margin: 0 auto;
}

.property-floorplan__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  max-width: 40rem;
  text-align: center;
}

.property-floorplan__floor-label {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--ink);
}

.property-floorplan__floor-area {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.property-floorplan__caption--text {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--stone);
}

.property-floorplan__pdf {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (max-width: 767px) {
  .property-floorplan__trigger img {
    max-height: 72vh;
  }
}

.property-section__title--serif {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

/* .property-status wurde entfernt (Bug: doppelter Status-Text neben
   .property-sidebar__status, siehe property-detail.js renderSidebar()). */

/* Direkte Rücknavigation auf Objekt-Detailseiten (KRITISCH 1): der Header
   selbst ist bereits immer sichtbar (.site-nav ist position:fixed), aber der
   "Zur Übersicht"-Link darunter stand bislang im normalen Dokumentfluss und
   scrollte mit dem Inhalt weg — auf langen Objektseiten blieb dann nur noch
   das Burger-Menü als dauerhafter Rückweg (der gemeldete Bug). Auf Mobil wird
   der Link jetzt direkt unter dem Header verankert (--frame-menu-top wird
   von menu.js exakt auf die reale Header-Unterkante gesetzt, robust gegen
   Scroll-Lock/Safe-Areas). Auf Desktop bleibt er unverändert im Fluss, da dort
   "Zur Übersicht" ohnehin über der Galerie sofort sichtbar ist. */
@media (max-width: 767px) {
  .back-link--object-sticky {
    position: sticky;
    top: var(--frame-menu-top, 64px);
    z-index: 15;
    margin: 0;
    background: rgba(252, 252, 250, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* Kein eigener border-bottom mehr (Nutzer-Feedback: zusammen mit der
       Trennlinie des Headers direkt darüber wirkte "Zur Übersicht" wie in
       einen Kasten eingeschlossen). Die halbtransparente, weichgezeichnete
       Fläche grenzt die Zeile vom darunter scrollenden Galeriebild weiterhin
       ausreichend ab. */
  }
}

/* Legacy detail helpers (overview / empty states) */
.property-detail__body {
  max-width: 40rem;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.property-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: var(--stone);
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.property-section {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--line);
}

.property-section__title {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.5rem;
}

.property-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.property-facts__label {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.35rem;
}

.property-facts__value {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--ink);
}

.property-description p {
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--stone);
  margin-bottom: 1rem;
}

.property-description p:last-child {
  margin-bottom: 0;
}

.property-location__text {
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink);
  max-width: 40rem;
}

/* Editorial image blocks */
.property-editorial {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.property-editorial__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
}

.property-editorial__block--single,
.property-editorial__block--highlight {
  align-items: center;
}

.property-editorial__heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: flex-start;
}

.property-editorial__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bahama);
}

.property-editorial__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.property-editorial__quote {
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--bahama);
  max-width: min(48rem, 100%);
  align-self: flex-start;
}

.property-editorial__quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.property-editorial__images {
  display: grid;
  align-items: start;
  width: 100%;
}

.property-editorial__images--pair {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 100%;
}

.property-editorial__images--single {
  grid-template-columns: 1fr;
  max-width: min(42rem, 90vw);
}

/* "highlight" = ein einzelnes, deutlich größer inszeniertes Bild (Signature-Shot).
   Additive Variante — kein bestehendes Objekt nutzt sie aktuell, Layout-System
   bleibt sonst unverändert. */
.property-editorial__images--highlight {
  grid-template-columns: 1fr;
  max-width: min(56rem, 94vw);
}

.property-editorial__figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  image-orientation: from-image;
}

.property-editorial__block + .property-editorial__block {
  margin-top: clamp(4rem, 8vw, 6rem);
}

.property-editorial__figure {
  margin: 0;
  overflow: hidden;
}

.property-editorial__figure--high {
  margin-top: 0;
}

.property-editorial__figure--low {
  margin-top: 0;
}

.property-editorial__figure--rotate-90 {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.property-editorial__figure--rotate-90 picture {
  display: block;
  width: 100%;
  height: 100%;
}

.property-editorial__figure--rotate-90 img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 135%;
  max-width: none;
  min-height: unset;
  aspect-ratio: auto;
  transform: translate(-50%, -50%) rotate(90deg);
  object-fit: cover;
}

@media (min-width: 768px) {
  .property-editorial__block + .property-editorial__block {
    margin-top: clamp(5.5rem, 9vw, 7.5rem);
  }

  .property-editorial__images--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);
    max-width: min(58rem, 100%);
  }

  .property-editorial__images--single {
    max-width: min(28rem, 62%);
  }

  .property-editorial__images--highlight {
    max-width: min(74rem, 78vw);
  }

  .property-editorial__figure img {
    aspect-ratio: 4 / 5;
    max-height: clamp(20rem, 38vw, 34rem);
  }

  .property-editorial__images--highlight .property-editorial__figure img {
    aspect-ratio: 16 / 10;
    max-height: clamp(28rem, 48vw, 46rem);
  }

  .property-editorial__figure--low {
    margin-top: clamp(5rem, 8vw, 7rem);
  }
}

/* ---------- Gallery ---------- */
.property-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.property-gallery--scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.property-gallery--scroll .property-gallery__item {
  flex: 0 0 min(85vw, 480px);
  scroll-snap-align: start;
}

.property-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-align: left;
}

.property-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

.property-gallery__item:hover img {
  opacity: 0.92;
}

@media (min-width: 768px) {
  .property-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  /* Bug (riesige Leerfläche nach Formular): hier lag früher ein permanent
     reservierter Zusatzabstand (+4.5rem) für die sticky CTA-Leiste, die aber
     inzwischen (initStickyBar) VOR dem Formular/Footer bereits wieder
     ausblendet — der Zusatzabstand war deshalb nur noch toter Leerraum am
     Seitenende. Zurück auf den normalen Bottom-Abstand. */
  .property-detail {
    padding-bottom: 3rem;
  }

  .property-core {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0;
  }

  .property-hero-slider__nav {
    opacity: 0.92;
  }

  .property-hero-slider {
    margin-bottom: 2.25rem;
  }

  /* Facts-Grid bleibt zweispaltig auf Mobile (kurze, lesbare Labels) — die
     Border-Regeln der Basisklasse (letzte zwei Felder ohne Trennlinie) gelten
     unverändert für ein 2-Spalten-Raster, keine Sonderbehandlung nötig. */

  .property-editorial__images--pair {
    gap: 1.5rem;
  }

  .property-editorial__figure--low {
    margin-top: 0;
  }
}

/* ---------- Inquiry form (Netlify) ---------- */
.property-inquiry {
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--line);
  border-bottom: none;
}

.property-inquiry__intro {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--stone);
  margin-bottom: 2rem;
  max-width: 28rem;
}

/* Telefon + E-Mail als ruhige Zeile unter Formular/Fallback-Link — gleiches
   Muster wie .location-inquiry__contact (München/Standort). */
.property-inquiry__contact {
  margin: 1.25rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.property-inquiry__contact .property-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.inquiry-form {
  display: grid;
  /* Zentrales Formularsystem (gilt für Eigentümer/München/Kontakt-Overlay/
     Objektanfrage): Abstand zwischen Feldern auf ~28px vereinheitlicht
     (Zielkorridor 24–36px). */
  gap: 1.75rem;
  max-width: 28rem;
}

.inquiry-form__field label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.45rem;
}

.inquiry-form__field input,
.inquiry-form__field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0;
  font-family: var(--font-ui);
  /* 16px statt 15px: unter 16px zoomt iOS Safari beim Fokussieren automatisch
     in das Feld hinein — fühlt sich wie ein Layout-/Responsive-Fehler an,
     ist aber Browser-Standardverhalten. Zentral hier behoben, gilt für
     Eigentümer/München/Kontakt-Overlay/Objektanfrage gleichermaßen. */
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.25s ease;
}

.inquiry-form__field input:focus,
.inquiry-form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.inquiry-form__field textarea {
  /* ~160px — komfortabler Schreibraum ohne halbe Bildschirmhöhe zu füllen. */
  min-height: 10rem;
  resize: vertical;
}

/* Feld mit Validierungsfehler — feine rote Linie statt Box/Icon */
.inquiry-form__field.has-error input,
.inquiry-form__field.has-error textarea {
  border-bottom-color: #B3413A;
}

.inquiry-form__error {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #B3413A;
}

/* Wiederverwendbare Helfer — optionales Feld + kleiner Hinweistext unter
   einem Feld (z. B. Textarea-Platzhalter-Ergänzung). Ungenutzt, solange die
   Klassen nicht im Markup stehen — kein Effekt auf bestehende Formulare. */
.inquiry-form__field--optional label::after {
  content: " (optional)";
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stone);
}

.inquiry-form__field-hint {
  margin: 0.4rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--stone-strong);
}

.inquiry-form__submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0.75rem 0;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Individueller Winkelpfeil hinter dem Submit-Text — dieselbe Formsprache
   wie .nav-arrow/.owner__cta-arrow (zwei gerade Linien, kein Unicode-Zeichen,
   kein Kreis). Ungenutzt ohne die Markup-Klasse, kein Effekt auf andere
   Formulare (z. B. Kontakt-Overlay, das weiterhin "Senden" ohne Pfeil zeigt). */
.inquiry-form__submit-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.inquiry-form__submit:hover .inquiry-form__submit-arrow,
.inquiry-form__submit:focus-visible .inquiry-form__submit-arrow {
  transform: rotate(45deg) translate(2px, -2px);
}

.inquiry-form__submit:hover {
  opacity: 0.65;
}

.inquiry-form__submit:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.inquiry-form__submit:disabled {
  cursor: default;
  opacity: 0.55;
}

.inquiry-form.is-submitting .inquiry-form__field {
  opacity: 0.7;
}

.inquiry-form.is-submitted .inquiry-form__field,
.inquiry-form.is-submitted .inquiry-form__submit {
  display: none;
}

.inquiry-form__status {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

.inquiry-form__status:empty {
  display: none;
}

.inquiry-form__status--success {
  color: var(--ink);
}

.inquiry-form__status--error {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #B3413A;
}

.inquiry-form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Inline-Pfeil (statisch, für Text-CTAs — Task A/D/E) ----------
   Kleine, statische Variante des Winkel-Pfeils für Fließtext-CTAs
   ("Nachricht senden →", "Immobilie vorstellen →") ohne Slider-Kontext. */
.inline-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.6em;
  margin-bottom: 1px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}

/* ---------- Lightbox ---------- */
.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0.94);
}

.gallery-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 1.25rem calc(3rem + env(safe-area-inset-bottom, 0px));
}

.gallery-lightbox__figure {
  max-width: min(1100px, 100%);
  width: 100%;
  margin: 0;
}

.gallery-lightbox__img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.gallery-lightbox__caption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 252, 250, 0.5);
}

.gallery-lightbox__close {
  position: absolute;
  z-index: 2;
  border: none;
  background: transparent;
  color: rgba(252, 252, 250, 0.65);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--font-ui);
  transition: color 0.25s ease;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  font-size: 2rem;
  line-height: 1;
}

.gallery-lightbox__close:hover {
  color: var(--bg);
}

/* Lightbox-Pfeile: Form/Farbe/Fokus aus .nav-arrow (--lg --on-image); hier
   nur Position. */
.gallery-lightbox__nav--prev { left: 0.25rem; }
.gallery-lightbox__nav--next { right: 0.25rem; }

.gallery-lightbox__counter {
  position: absolute;
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252, 252, 250, 0.35);
}

/* ---------- Ähnliche Objekte ---------- */
/* Wiederverwendet 1:1 die Startseiten-Karten/-Rail (listings-render.js +
   .listing-card/.listings-rail-Styles weiter oben in dieser Datei) — keine
   neue Kartenoptik, kein neues Karussell-System. */
.property-similar {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}

/* ---------- Sticky Mobile-CTA ---------- */
.property-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  padding: 0.6rem max(1.25rem, 5vw) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(252, 252, 250, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-sticky-cta.is-visible {
  transform: translateY(0);
}

.property-sticky-cta__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  text-decoration: none;
}

.property-sticky-cta__price {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-sticky-cta__label {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--bahama);
}

@media (max-width: 767px) {
  .property-sticky-cta {
    display: block;
  }
}

/* Während Burger-Menü, Kontakt-Overlay (beide setzen "menu-open"), Teilen-
   Fallback-Menü oder Galerie-Vollbild offen sind, nicht gleichzeitig
   einblenden — sonst überlagert die Leiste diese Overlays/Aktionen. */
body.menu-open .property-sticky-cta,
body.share-menu-open .property-sticky-cta,
body.gallery-lightbox-open .property-sticky-cta {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .property-sticky-cta {
    transition: none;
  }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 4rem max(1.25rem, 5vw) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer a {
  color: var(--stone);
  text-decoration: none;
  padding: 0.45rem 0.2rem;
  transition: color 0.25s ease, text-decoration-color 0.3s ease;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.site-footer span {
  color: var(--line);
}

/* ---------- Footer, vollständige Fassung (Modifier) ----------
   Nur auf Seiten aktiv, die die zusätzliche Klasse `.site-footer--rich`
   tragen — die einfache Impressum/Datenschutz-Zeile (`.site-footer` ohne
   Modifier, z. B. Off-Market/Übersicht) bleibt dadurch unverändert. */
.site-footer--rich {
  flex-direction: column;
  gap: 1.1rem;
  text-align: center;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.site-footer__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.site-footer__cities {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--stone);
}

/* Bug D: Berlin und Mailand lesen im Footer immer eindeutig aktiv (Ink) — nie
   im München-„Demnächst"-Grau. Gilt für echte Links UND die aktuelle Seite
   (als <span> ohne Link), aber nicht für den aria-hidden „·"-Trenner. */
.site-footer__cities a,
.site-footer__cities > span:not([aria-hidden="true"]) {
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0.15rem;
  transition: color 0.25s ease, text-decoration-color 0.3s ease;
}

/* München/„Demnächst": bewusst gedämpft — einzige Stelle, an der eine Stadt
   im Footer grau wirken darf. */
.site-footer__cities .site-footer__city--soon {
  color: var(--stone);
}

.site-footer__cities a:hover,
.site-footer__cities a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  /* Telefon/E-Mail/Instagram nicht in Versalien — Adressen bleiben lesbar
     statt wie ein Rechtslink formatiert zu wirken. */
  text-transform: none;
  letter-spacing: 0.02em;
}

.site-footer__contact a {
  color: var(--stone);
  text-decoration: none;
  padding: 0.35rem 0.2rem;
  transition: color 0.25s ease;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: var(--ink);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ---------- City navigation ---------- */
.city-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.65rem;
  width: 100%;
  padding: 0.75rem 0 0.25rem;
}

.site-nav--landing .city-nav--header {
  flex-wrap: nowrap;
  width: auto;
  padding: 0;
}

.site-header--with-cities .city-nav,
.site-nav--with-cities .city-nav {
  padding-top: 0.45rem;
  padding-bottom: 0.15rem;
}

.city-nav--landing {
  padding: 2.5rem max(1.25rem, 5vw) 2.25rem;
  max-width: 72rem;
  margin: 0 auto;
  gap: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.city-nav--landing .city-nav__link {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  padding: 0.55rem 0.25rem;
}

.city-nav--landing .city-nav__link--active {
  color: var(--ink);
  font-weight: 500;
}

.city-nav--landing .city-nav__sep {
  font-size: 0.875rem;
}

.city-nav--landing .city-nav__soon-dot {
  width: 0.375rem;
  height: 0.375rem;
}

.city-nav--landing .city-nav__soon-label {
  font-size: 0.6875rem;
}

.city-nav--landing .city-nav__fallback {
  font-size: 0.875rem;
}

.city-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  /* Basiszustand = "aktiv/verfügbar" (Ink) — nur München (--coming) ist gedämpft
     (Bug D: Berlin/Mailand nie wie München-„Demnächst" wirken). */
  color: var(--ink);
  padding: 0.45rem 0.2rem;
  transition: color 0.25s ease, text-decoration-color 0.3s ease;
}

.city-nav__link--active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.city-nav__link--coming {
  color: var(--stone);
}

/* aktuelle Stadt bleibt hervorgehoben (Ink), auch wenn sie „demnächst" ist
   (active + coming) — sonst gewänne die graue --coming-Regel. */
.city-nav__link--active.city-nav__link--coming {
  color: var(--ink);
}

.city-nav__link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}

.city-nav__link--active:hover {
  text-decoration: underline;
  text-decoration-color: var(--bahama);
}

.city-nav__sep {
  color: var(--stone);
  font-size: 0.75rem;
  line-height: 1;
  user-select: none;
}

.city-nav__soon-dot {
  flex-shrink: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--bahama);
}

.city-nav__soon-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--stone);
}

.city-nav__fallback {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- Location „Demnächst” page ---------- */
/* Task 9: mehrere, für sich unauffällige Abstände summierten sich auf einer
   inhaltlich kurzen Seite zu spürbar viel Leerraum vor dem Footer — hier
   und an den folgenden Stellen (.location-hero, .location-inquiry) gezielt
   reduziert, ohne die Seite gedrängt wirken zu lassen. */
.location-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 max(1.25rem, 5vw) 2.25rem;
}

.location-hero {
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}

.location-hero__media {
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: min(60vh, 600px);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  overflow: hidden;
  background: var(--line);
}

/* München (kein Premium-Motiv) — Bildband bewusst zurückhaltend.
   Task 1: eigene Crops für Mobil/Desktop statt eines geteilten Ausschnitts —
   auf Mobil ein etwas höheres Format, damit die Fassade nicht zum extrem
   schmalen Banner wird; object-position rechts/leicht rechtszentriert hält
   Gebäude + Himmel-Ruhefläche im Bild, ohne Ornamente/Fensterreihen
   abzuschneiden. */
.location-hero--soon .location-hero__media {
  aspect-ratio: 16 / 10;
  max-height: min(42vh, 380px);
}

@media (min-width: 640px) {
  .location-hero--soon .location-hero__media {
    aspect-ratio: 21 / 9;
    max-height: min(34vh, 320px);
  }
}

.location-hero__media picture,
.location-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Eigene Desktop-/Mobil-Bilddateien (siehe location-page.js) sind bereits
     exakt auf 21:9 bzw. 16:10 zugeschnitten — object-position bleibt
     zentriert, kein zusätzlicher CSS-Crop-Trick nötig. */
  object-position: center;
}

/* ============================================================
   SHARED BACK-LINK — zentral ausgelagert nach /back-link.css
   (auf allen Seiten geladen, inkl. Off-Market/Legal). Hier
   bewusst KEINE .back-link-Regeln mehr — nicht duplizieren.
   ============================================================ */

.location-hero__title {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.location-hero__lead {
  margin: 0;
  max-width: 28rem;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  /* Task 11: kontrastreicher als das bisherige helle var(--stone). */
  color: var(--stone-strong);
}

/* Task 4/9: Formularbreite ~20% erhöht (28rem → 33.5rem), Intro-Text bleibt
   über eine eigene max-width auf der bisherigen, gut lesbaren Zeilenlänge. */
.location-inquiry {
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0 1rem;
  max-width: 33.5rem;
}

.location-inquiry__intro {
  margin: 0 0 1.5rem;
  max-width: 28rem;
  /* Task 11: Desktop-Fließtext ~16px / Zeilenhöhe ~1.6 (statt 13px/1.75). */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

.location-inquiry__contact {
  margin: 1.1rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Task 7: E-Mail-Link etwas größer/kontrastreicher und mit spürbarer
   Touch-Fläche — ohne die globale .property-text-link-Komponente
   (sitweit an vielen Stellen genutzt) selbst zu verändern. */
.location-inquiry__contact .property-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  color: var(--ink);
}

/* ---------- Light section bridge (landing) ---------- */
.site-light {
  position: relative;
  z-index: 5;
  background: var(--bg);
}

.site-light__bridge {
  height: 10vh;
  margin-top: -10vh;
  background: linear-gradient(to bottom, rgba(8, 8, 6, 0), var(--bg));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .listing-row__photo,
  .listing-slider__slide img,
  .listing-slider__track,
  .property-hero-slider__track,
  .property-gallery__item img {
    transition: none;
  }

  .listing-row:hover .listing-row__photo,
  .listing-row:hover .listing-slider__slide img,
  .listing-card:hover .listing-card__photo {
    transform: none;
  }

  .listings-rail__viewport {
    scroll-behavior: auto;
  }

  .listing-slider__nav,
  .property-hero-slider__nav {
    opacity: 1;
  }

  .property-hero-slider__pagination-fill,
  .property-text-link,
  .site-footer a,
  .site-header__link,
  .site-nav__links a,
  .properties-empty a {
    transition: none;
  }
}


/* Unterseiten-Header: nimmt Platz ein (sticky), ueberlagert Inhalt nicht */
.site-nav--sub { position: sticky; top: 0; }

/* Dunkle Header-Variante (Off-Market): gleiches Geruest, heller Text auf dunklem Grund */
.site-nav--dark { background: transparent; backdrop-filter: none; border-bottom-color: rgba(255,255,255,0.14); }
.site-nav--dark .brand-logo--header img { filter: brightness(0) invert(1); }
.site-nav--dark .site-nav__links a { color: rgba(252,252,250,0.82); }
.site-nav--dark .site-nav__links a:hover,
.site-nav--dark .site-nav__links a:focus-visible { color: #fff; }
.site-nav--dark .frame-burger span { background: #fff; }