/* ============================================================
   Immobilien – gemeinsames CSS für das Karussell auf makler.html,
   die Übersicht (/immobilien) und die Detailseiten (/immobilien/<slug>).
   Orientiert sich bewusst an den bestehenden Design-Tokens aus
   assets/css/site.css (Sand Beige #F3ECDD, Messing #A6935F, Tiefschwarz
   #0E0E0E, Montserrat, .kicker/.btn.btn-gold) statt einer neuen Palette.
   ============================================================ */

/* ---------- Immobilien-Karte (Karussell + Grid + Verweise) ---------- */
.imm-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #DCD0B8;
  text-decoration: none;
  color: inherit;
}
.imm-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EDE4D0;
}
.imm-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
/* Nur das Bild vergrößert sich beim Hover, nicht die ganze Karte - ruhig,
   hochwertig, per Klick auf Bild/Karte geht es zur Detailseite. */
.imm-card:hover .imm-card-img-wrap img { transform: scale(1.045); }
.imm-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
  flex: 1;
}
.imm-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #1C1C1C;
}
.imm-card-ort {
  margin: 0;
  font-size: 13.5px;
  color: #7A7365;
}
.imm-card-facts {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #3A352E;
}
.imm-card-preis {
  margin-top: auto;
  padding-top: 12px;
  font-size: 19px;
  font-weight: 800;
  color: #A6935F;
}

/* ---------- Karussell (makler.html) ---------- */
.imm-carousel-wrap { position: relative; }
.imm-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 28px) / 3);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  /* Scrollbar dezent, aber sichtbar - kein natives Balken-Design, das aus
     dem ruhigen Gesamtbild fällt. */
  scrollbar-width: thin;
  scrollbar-color: #DCD0B8 transparent;
}
.imm-carousel-track > .imm-card { scroll-snap-align: start; }
.imm-carousel-arrows { display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 20px; }
.imm-carousel-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #DCD0B8; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1C1C1C;
}
.imm-carousel-arrow:hover { border-color: #A6935F; color: #A6935F; }
.imm-carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.imm-carousel-arrow:disabled:hover { border-color: #DCD0B8; color: #1C1C1C; }
.imm-carousel-empty {
  padding: 48px; text-align: center; color: #7A7365; font-size: 15px;
  border: 1px dashed #DCD0B8;
}

@media (max-width: 900px) {
  .imm-carousel-track { grid-auto-columns: calc((100% - 28px) / 2); }
}
@media (max-width: 600px) {
  /* ca. 1 bis 1,2 Karten sichtbar, damit erkennbar bleibt, dass horizontal
     weitere Immobilien folgen. */
  .imm-carousel-track { grid-auto-columns: 84%; gap: 16px; }
  .imm-carousel-arrows { display: none; }
}

/* ---------- Übersicht /immobilien ---------- */
.imm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .imm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .imm-grid { grid-template-columns: 1fr; }
}

/* ---------- Detailseite ---------- */
.imm-hero {
  position: relative;
  height: 68vh;
  min-height: 460px;
  max-height: 780px;
  overflow: hidden;
  background-color: #0E0E0E;
}
.imm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imm-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,13,11,0.82) 0%, rgba(14,13,11,0.35) 45%, rgba(14,13,11,0) 70%);
}
.imm-hero-text { position: absolute; left: 64px; right: 64px; bottom: 48px; }
.imm-hero-title {
  margin: 0 0 10px; font-size: 38px; font-weight: 800; line-height: 1.2;
  color: #F3ECDD; max-width: 900px;
}
.imm-hero-ort { margin: 0; font-size: 16px; font-weight: 600; color: #C9B79A; }

.imm-kennzahlen {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  padding: 32px 64px; background: #FFFFFF; border-bottom: 1px solid #DCD0B8;
}
.imm-kennzahl { padding: 0 28px; border-left: 1px solid #DCD0B8; font-size: 17px; font-weight: 700; color: #1C1C1C; }
.imm-kennzahl:first-child { border-left: none; padding-left: 0; }
.imm-kennzahl-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #7A7365; text-transform: none; }

.imm-detail-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 64px;
  padding: 90px 64px; align-items: start;
}
.imm-detail-main { display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.imm-section-title { margin: 0 0 20px; font-size: 26px; font-weight: 700; }
.imm-body-text { font-size: 16px; line-height: 1.8; color: #3A352E; white-space: pre-line; }

.imm-gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.imm-gallery-grid .imm-gallery-thumb { aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; }
.imm-gallery-grid .imm-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.imm-gallery-grid .imm-gallery-thumb:hover img { transform: scale(1.04); }
@media (max-width: 700px) {
  .imm-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.imm-grundriss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.imm-grundriss-grid img { width: 100%; height: auto; display: block; border: 1px solid #DCD0B8; cursor: pointer; }
@media (max-width: 700px) { .imm-grundriss-grid { grid-template-columns: 1fr; } }

.imm-energie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.imm-energie-item { display: flex; flex-direction: column; gap: 4px; }
.imm-energie-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #A6935F; }
.imm-energie-value { font-size: 15.5px; font-weight: 600; color: #1C1C1C; }

.imm-anfrage-box {
  background: #FAF7F0; border: 1px solid #DCD0B8; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 32px;
}
/* "Exposé anfordern"/"Besichtigung anfragen"-Umschalter: .btn kennt von
   Haus aus keinen .selected-Zustand (nur .radio-option) - ohne das war per
   Klick keine Auswahl sichtbar, obwohl das verborgene Feld korrekt gesetzt
   wurde (site.js togglet die Klasse bereits, nur ohne optischen Effekt). */
.imm-anfrage-box .btn-outline-dark.selected { background: #0E0E0E; color: #F3ECDD; border-color: #0E0E0E; }
@media (max-width: 900px) {
  .imm-detail-layout { grid-template-columns: 1fr; padding: 56px 20px; gap: 40px; }
  .imm-anfrage-box { position: static; order: -1; }
  .imm-hero-text { left: 20px; right: 20px; }
  .imm-hero-title { font-size: 26px; }
  .imm-kennzahlen { padding: 20px; gap: 16px 0; }
  .imm-kennzahl { padding: 0 16px; }
}


.imm-gone {
  padding: 140px 64px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}

/* ---------- Lightbox/Modal + Karten-Pfeile, identisches Muster wie bereits
   auf business-apartments-kuenzelsau.html/haus-elephant.html etabliert
   (dort jeweils als seiteneigener <style>-Block, hier einmal gemeinsam für
   alle Immobilienseiten, da site.css selbst diese Klassen nicht definiert). */
.lightbox-backdrop { position: fixed; inset: 0; background: rgba(14,13,11,0.94); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 40px; }
.lightbox-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243,236,221,0.4); background: rgba(14,13,11,0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-close:hover { border-color: #C9B79A; }
.carousel-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #DCD0B8; background: #F3ECDD; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.carousel-arrow:hover { border-color: #A6935F; color: #A6935F; }
.maps-trigger:hover { border-color: #A6935F; color: #A6935F; }
@media (max-width: 700px) {
  [data-modal="lage-modal"] { padding: 0 !important; }
  [data-modal="lage-modal"] [data-modal-content] { width: 100% !important; height: 100vh !important; max-height: none !important; }
}