/* ═══════════════════════════════════════════════════════════════════════════
   Wohnkonzept Oberberg – immo.css
   Lädt nur auf /immobilien und /immobilienvermarktung. Enthält:
   - Roomstaging-Galerie (auf /immobilien)
   - Roomstaging Showcase (auf /immobilienvermarktung)
   - Immobilien-Listenseite mit Filter, Detail-View, Galerie
   - Responsive-Anpassungen für die Liste
   ─────────────────────────────────────────────────────────────────────────── */

/* ── extracted from main.css lines 2167-2287 ── */
/* ── Roomstaging-Galerie auf /immobilien ───────────────────────────────── */
.rsgallery {
  margin: 0.4rem 0 2rem;
}

.rsgallery__title {
  margin: 0 0 0.65rem;
  color: var(--color-dark-blue);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.rsgallery__stage {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.7rem;
}

.rsgallery__desc {
  margin: 0 0 0.8rem;
  color: #445;
  line-height: 1.65;
  font-size: 0.92rem;
}

.rsgallery__desc[hidden] {
  display: none;
}

.rsgallery__thumbs-wrap {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 0.5rem;
  align-items: center;
}

.rsgallery__thumbs-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-dark-blue);
  background: #fff;
  color: var(--color-dark-blue);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.rsgallery__thumbs-nav:hover,
.rsgallery__thumbs-nav:focus-visible {
  background: var(--color-dark-blue);
  color: #fff;
  outline: none;
}

.rsgallery__thumbs-nav:disabled {
  opacity: 0.28;
  cursor: default;
  background: #fff;
  color: var(--color-dark-blue);
}

.rsgallery__thumbs-viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.rsgallery__thumbs-track {
  display: flex;
  gap: 0.5rem;
  width: max-content;
  min-width: 100%;
}

.rsgallery__thumb {
  padding: 0;
  border: 2px solid rgba(26, 40, 68, 0.2);
  border-radius: 6px;
  width: 80px;
  height: 56px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.rsgallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rsgallery__thumb:hover,
.rsgallery__thumb:focus-visible {
  border-color: var(--copper-start);
  outline: none;
}

.rsgallery__thumb.is-active {
  border-color: var(--copper-start);
  box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.25);
}

@media (max-width: 600px) {
  .rsgallery__thumbs-wrap {
    grid-template-columns: 32px 1fr 32px;
    gap: 0.35rem;
  }
  .rsgallery__thumbs-nav {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
  .rsgallery__thumb {
    width: 70px;
    height: 50px;
  }
}

/* ── extracted from main.css lines 2288-2446 ── */
/* ── Roomstaging Showcase (Immobilienvermarktung-Seite) ──────────────────── */
.rsshow {
  margin: 0.5rem 0 2rem;
}

.rsshow__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark-blue);
  margin: 0 0 0.65rem;
  line-height: 1.35;
}

/* Slider-Container: aspect-ratio mit padding-Fallback für Safari */
.rsshow__slider-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #0f1728;
  border-radius: 10px;
  overflow: hidden;
}

/* .ba-slider (gemeinsame Slider-Logik aus core.js) im aspect-ratio-Wrapper
   der Roomstaging-Showcase absolut positionieren, da .rsshow__slider-wrap
   die padding-top-Technik nutzt und keine eigene Höhe hat. */
.rsshow__slider-wrap .ba-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hinweis: Die eigentliche Slider-Optik (Bilder, Handle, Linie, Knopf,
   Vorher/Nachher-Labels) kommt aus den generischen .ba-slider/.ba-img/
   .ba-handle/.ba-label-Regeln in main.css – die Roomstaging-Showcase nutzt
   jetzt dieselbe Slider-Logik wie die Startseite. */

/* Beschreibung */
.rsshow__desc {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  color: #445;
  line-height: 1.65;
}
.rsshow__desc[hidden] { display: none; }

/* Thumbnail-Leiste */
.rsshow__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.rsshow__thumb {
  padding: 0;
  border: 2px solid rgba(26,40,68,0.2);
  border-radius: 6px;
  background: #fff;
  width: 80px;
  height: 56px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.rsshow__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rsshow__thumb:hover,
.rsshow__thumb:focus-visible {
  border-color: var(--copper-start);
  transform: translateY(-1px);
  outline: none;
}

.rsshow__thumb--active {
  border-color: var(--copper-start);
  box-shadow: 0 0 0 2px rgba(184,115,51,0.25);
}

@media (max-width: 480px) {
  .rsshow__thumb { width: 64px; height: 46px; }
}

/* ── extracted from main.css lines 2680-2945 ── */
/* ── Immobilien-Listenseite ──────────────────────────────────────────────── */
/* Gleiche Breite, Ränder und Titel-Optik wie .subpage-content--no-hero der
   übrigen Unterseiten (nur ohne Hero-Bild) – einheitlicher oberer Bereich. */
.immo-list-page {
  /* 1280px wie Kopfbereich, Navigation und Fuss – die Seite stand vorher auf
     820px Lesebreite. Das ist die richtige Breite fuer Fliesstext, nicht fuer
     eine Liste aus Bild und Daten: Auf einem normalen Bildschirm blieb rechts
     und links je ein Drittel leer, und die Seite sass sichtbar schmaler als
     die Leiste darueber. */
  max-width: 1280px;
  margin: 3rem auto;
  padding: 3rem 2rem 5rem;
}
.immo-list-page > h1 {
  color: var(--color-dark-blue);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 1.5rem;
}

/* Filter-Bar */
.immo-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.immo-filter-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-dark-blue);
}
.immo-filter-bar select,
.immo-filter-bar input[type="search"] {
  padding: 0.45rem 0.8rem;
  border: 1.5px solid #cdd5e0;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #fafafa;
}
.immo-filter-bar select:focus,
.immo-filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--color-dark-blue);
  background: #fff;
}
.immo-filter-reset {
  font-size: 0.83rem;
  color: #b87333;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: underline;
  padding: 0.3rem 0.4rem;
}
.immo-filter-reset:hover { opacity: 0.75; }

/* Karte */
/* Die Liste als Raster statt gestapelter Bloecke: Ein einzelnes Objekt nimmt
   die volle Breite ein, ab zwei stehen sie nebeneinander. auto-fit statt
   auto-fill, damit keine leeren Spalten stehen bleiben; min() sorgt dafuer,
   dass die Mindestbreite auf schmalen Geraeten nicht groesser wird als der
   Platz selbst – sonst ragte das Raster ueber den Rand. */
#immo-list {
  display: grid;
  /* Eine Anzeige pro Zeile. Nebeneinander gestellt bleibt fuer Titel, Lage,
     Preis und Anrisstext zu wenig Breite - der Titel lief ueber vier Zeilen. */
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.immo-list-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* Abstand macht das Raster (gap), nicht die Karte. */
  margin-bottom: 0;
  background: #fff;
  transition: box-shadow 0.25s;
}
.immo-list-card:hover { box-shadow: var(--shadow-card-hover); }

/* Kopfzeile der Karte */
.immo-list-card__row {
  display: grid;
  /* Feste Bildspalte statt Prozentanteil: So ist das Bild auf jeder
     Bildschirmbreite gleich gross, und der gesamte Zugewinn an Breite kommt
     dem Text zugute - dort wird er gebraucht. */
  grid-template-columns: minmax(0, 360px) 1fr;
  align-items: stretch;
  /* Damit das Bild auch bei kurzem Text Substanz behaelt. */
  min-height: 260px;
  cursor: pointer;
}
/* Kein aspect-ratio mehr an dieser Stelle. Das Element wird von der Zeile in
   der Hoehe gestreckt; mit einem Seitenverhaeltnis errechnete der Browser
   daraus die BREITE und ueberfuhr damit seine Rasterspalte. Gemessen bei einer
   Karte von 350 px Hoehe: Spalte 226 px, Element 467 px (= 350 x 4/3) - das
   Bild lag 240 px weit unter dem Text. Feste Breite und Hoehe aus der Zeile,
   den Rest macht object-fit: cover. */
.immo-list-card__img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.immo-list-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.immo-list-card:hover .immo-list-card__img img { transform: scale(1.03); }

/* Vermarktungsart (Miete/Kauf) als Badge über dem Titelbild. */
.immo-list-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--copper-start);
  border-radius: 999px;
}

.immo-list-card__facts {
  font-size: 0.85rem;
  color: #667;
  margin-bottom: 0.35rem;
}

.immo-list-card__info {
  padding: 1.75rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: rgba(255, 255, 255, 0.45);
}
.immo-list-card__info h3 {
  color: var(--color-dark-blue);
  font-size: clamp(1rem, 2vw, 1.35rem);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.immo-list-card__price {
  font-size: 1.05rem;
  font-weight: 700;
  color: #b87333;
  margin-bottom: 0.6rem;
}
.immo-list-card__excerpt {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Details ansehen" – seit der Umstellung auf eigene Objektseiten ein echter
   Link statt eines JS-Umschalters. */
.immo-list-card__more {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.immo-list-card__more a,
.immo-list-card__info h3 a {
  color: #b87333;
}
.immo-list-card__info h3 a {
  color: inherit;
}
.immo-list-card__more a:hover,
.immo-list-card__info h3 a:hover {
  text-decoration: underline;
}

/* Inline-Detailansicht */

/* Detail-Galerie */

/* Detail-Text */

/* Detail-Aktionen */

.immo-detail-anfrage-btn {
  padding: 0.6rem 1.5rem;
  background: var(--color-dark-blue);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.immo-detail-anfrage-btn:hover { background: #0f1c38; }

/* Keine Treffer */
.immo-list-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #888;
  font-size: 1rem;
}

/* ── extracted from main.css lines 3063-3078 ── */
/* ── Responsive Immo-Liste ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .immo-list-card__row { grid-template-columns: 1fr; min-height: 0; }
  /* Einspaltig gibt es keine Nachbarspalte, die die Hoehe streckt - hier darf
     das Seitenverhaeltnis die Hoehe bestimmen. */
  .immo-list-card__img { aspect-ratio: 16/9; height: auto; }
  .immo-list-card__info { padding: 1rem 1.1rem 2.25rem; }
  .immo-list-page { padding: 2rem 1.25rem 4rem; }
  .immo-filter-bar { gap: 0.5rem; padding: 0.75rem 1rem; }
  
  .back-btn { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  
  .immo-detail-anfrage-btn { width: 100%; text-align: center; }
}

/* ── Objekt-Detailseite (/immobilie/<slug>/) ─────────────────────────────── */
.immo-single {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.immo-single__head {
  margin-bottom: 1.5rem;
}
.immo-single__head h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.immo-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.immo-single__price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--copper-start);
}
/* "Verkauft": Text, nicht nur Farbe – Farbe allein ist kein
   Unterscheidungsmerkmal (WCAG 1.4.1). */
.immo-single__badge {
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-dark-blue);
  border-radius: 999px;
}
/* Vermarktungsart (Miete/Kauf): eigene, ruhigere Farbe – kein Alarmsignal
   wie "Verkauft", nur Einordnung. */
.immo-single__badge--info {
  background: var(--copper-start);
}

.immo-single__subline {
  margin-top: 0.35rem;
  color: #556;
  font-size: 0.92rem;
}

/* Kennzahlen-Tabelle: Preise, Flächen, Energieausweis. Nur Zeilen mit
   gepflegtem Wert – PHP liefert bereits eine gefilterte Liste. */
.immo-single__facts {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.immo-single__facts tr {
  border-bottom: 1px solid rgba(26, 40, 68, 0.12);
}
.immo-single__facts tr:last-child {
  border-bottom: none;
}
.immo-single__facts th,
.immo-single__facts td {
  padding: 0.6rem 0.5rem;
  text-align: left;
}
.immo-single__facts th {
  width: 45%;
  color: var(--color-dark-blue);
  font-weight: 600;
}
.immo-single__facts td {
  color: var(--color-text);
}

/* Bildstrecke: alle Bilder liegen im HTML, nur das aktive ist sichtbar. */
.immo-single__stage {
  position: relative;
  aspect-ratio: 3/2;
  background: #eef0f3;
  border-radius: 10px;
  overflow: hidden;
}
.immo-single__slides,
.immo-single__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.immo-single__slides img {
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition-speed);
}
/* Das erste Bild trägt .active bereits serverseitig – ohne JavaScript bleibt
   es damit sichtbar, nur das Umschalten entfällt. */
.immo-single__slides img.active { opacity: 1; }

.immo-single__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 3.5rem;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.immo-single__nav:hover { background: rgba(0, 0, 0, 0.65); }
.immo-single__nav--prev { left: 0; border-radius: 0 6px 6px 0; }
.immo-single__nav--next { right: 0; border-radius: 6px 0 0 6px; }

.immo-single__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.immo-single__thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  line-height: 0;
  opacity: 0.65;
  transition: opacity var(--transition-speed), border-color var(--transition-speed);
}
.immo-single__thumb img {
  width: 88px;
  height: 62px;
  object-fit: cover;
  border-radius: 4px;
}
.immo-single__thumb:hover { opacity: 0.9; }
.immo-single__thumb.active {
  opacity: 1;
  border-color: var(--color-dark-blue);
}

.immo-single__body {
  margin-top: 2rem;
  line-height: 1.75;
}
.immo-single__body p { margin-bottom: 1rem; }

.immo-single__sold-note {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: #f4f7fb;
  border-left: 4px solid var(--color-dark-blue);
  border-radius: 4px;
}

.immo-single__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.immo-single__back {
  color: var(--copper-start);
  font-weight: 600;
}
.immo-single__back:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .immo-single { padding: 2rem 1.25rem 4.5rem; }
  .immo-single__stage { aspect-ratio: 4/3; }
  .immo-single__actions { flex-direction: column; align-items: stretch; }
  .immo-single__actions .btn-primary { width: 100%; text-align: center; }
}