#carousel-main {
  cursor: pointer !important;
}

/* ==========================================================================
   Immobilien-Karte im Blog-Design
   Struktur bleibt unveraendert (JS klont das Template und befuellt
   .immo-title / .immo-location / .immo-price / .immo-living-area / .immo-rooms).
   Gestaltung laeuft rein ueber .immo-card.
   ========================================================================== */
.immo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.immo-card:hover { border-color: rgba(255, 255, 255, 0.25); }

/* Bild randlos oben, gleiche Hoehe wie Blog-Karten */
.immo-card .immo-img-wrapper { padding-top: 0; height: 210px; }
.immo-card .immo-link { text-decoration: none; }

/* Textbereich */
.immo-card .immo-title {
  font-size: 1.15rem !important;
  line-height: 1.3;
  color: #fff;
  margin: 1.1rem 1.2rem 0 !important;
  /* Titel darf umbrechen statt abgeschnitten zu werden */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.immo-card .immo-location {
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.55);
}
.immo-card .immo-title + div {
  margin: .35rem 1.2rem 0;
  color: rgba(255, 255, 255, 0.55);
}
.immo-card .immo-title + div svg { opacity: .7; }

/* harte Trennlinien raus */
.immo-card hr { display: none !important; }

/* "Mehr erfahren" wie im Blog: Textlink, Unterstrich zieht beim Hover auf.
   Die ganze Karte ist klickbar (stretched link ueber .immo-link), deshalb
   ist das hier bewusst ein <span> und kein verschachteltes <a>. */
.immo-card > .position-relative:first-child { position: static !important; }
.immo-card .immo-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.immo-card-more { margin: 0 1.2rem 1.3rem; }
.immo-card-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  position: relative;
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  padding-bottom: 4px;
}
.immo-card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width .28s ease;
}
.immo-card:hover .immo-card-link::after { width: 100%; }
.immo-card-arrow { display: inline-block; transition: transform .28s ease; }
.immo-card:hover .immo-card-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .immo-card-link::after, .immo-card-arrow { transition: none; }
}

/* Kennzahlen-Zeile */
.immo-card .row.gx-3 {
  margin: auto 1.2rem 1rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.immo-card .row.gx-3 p {
  font-size: 11px !important;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: .15rem !important;
}
.immo-card .row.gx-3 h6 { color: #fff; font-weight: 600; }

/* Verfuegbarkeits-Overlay als Badge statt Vollflaeche */
.immo-card .overlay {
  top: .7rem;
  left: .7rem;
  width: auto;
  height: auto;
  padding: .28rem .8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.immo-card .availability-text {
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 25, 25, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.availability-text {
  font-family: ivypresto-headline;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

/* ==========================================================================
   Filterleiste: Zeile 1 = Filter-Button + Laender, Zeile 2 = aktive Filter
   ========================================================================== */
.immo-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
/* #region-buttons-container ist eine Bootstrap-.row -> Flex-Defaults neutralisieren */
.immo-filter-bar #region-buttons-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  flex: 0 1 auto;
}
.immo-filter-bar #region-buttons-container > .col-auto {
  padding: 0;
  margin-bottom: 0 !important;
}
.immo-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
/* nur Abstand, wenn wirklich Chips da sind */
.immo-active-filters:not(:empty) { margin-top: .9rem; }
#filter-delete-container { margin-left: auto; }

/* Aktiver Filter als entfernbarer Chip */
.immo-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 34px;
  padding: 0 .45rem 0 .8rem;
  font-size: .78rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  white-space: nowrap;
}
.immo-chip-label { line-height: 1; }
.immo-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.immo-chip-x:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.immo-chip-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

@media (max-width: 575px) {
  #filter-delete-container { margin-left: 0; }
}

/* ==========================================================================
   Region-Chips im Blog-Stil

   Achtung Spezifitaet: styles.css wird NACH immo.css geladen und setzt auf
   .btn-outline-primary u.a. `background: none!important` und
   `border-color: gray!important`. Bei gleicher Spezifitaet gewinnt die
   spaetere Datei, deshalb sind alle Regeln hier ueber
   #region-buttons-container hochgezogen.
   ========================================================================== */
#region-buttons-container .region-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 42px;
  font-size: .8rem !important;
  font-weight: 500;
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 0 1.1rem !important;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease;
}
#region-buttons-container .region-btn:hover,
#region-buttons-container .region-btn:focus-visible {
  background: #155259 !important;
  background-color: #155259 !important;
  border-color: #155259 !important;
  color: #fff !important;
}
#region-buttons-container .region-btn.active {
  background: #155259 !important;
  background-color: #155259 !important;
  border-color: #155259 !important;
  color: #fff !important;
  font-weight: 600;
}
#region-buttons-container .region-btn .immo-flag {
  font-size: 1.05em;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

/* Filter-Button auf Chip-Hoehe/-Form */
#modal-filter-toggle,
[data-bs-target="#modal-filter"] {
  height: 42px;
  border-radius: 8px !important;
  padding: 0 1.1rem !important;
  display: inline-flex;
  align-items: center;
  font-size: .8rem !important;
}

/* "Alle Filter loeschen": Outline-Pill statt weisser Flaeche.
   styles.css setzt auf .btn-secondary weisse Flaeche + Primary-Text
   (mit !important), daher hier ebenfalls !important. */
#filter-delete {
  height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.2rem !important;
  font-size: .8rem !important;
  font-weight: 500;
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  transition: background-color .16s ease, border-color .16s ease;
}
#filter-delete:hover,
#filter-delete:focus-visible {
  color: #fff !important;
  background: #155259 !important;
  background-color: #155259 !important;
  border-color: #155259 !important;
}

/* Sektions-Koepfe wie im Blog: Serif-Titel + ruhiger Fliesstext */
.immo-section-title {
  font-family: ivypresto-headline;
  margin-bottom: .4rem !important;
}
.immo-section-sub {
  max-width: 603px;
  text-align: left;
  font-size: .95rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.75rem;
}

/* ==========================================================================
   Filter-Modal im Blog-Design
   Nur Optik – Struktur und IDs bleiben unangetastet, damit FilterReader /
   FilterManager weiter funktionieren.
   ========================================================================== */
#modal-filter .modal-content {
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}
#modal-filter .modal-header { padding-bottom: 0 !important; }
#modal-filter .modal-header h6 {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
#modal-filter .modal-header h2 {
  font-family: ivypresto-headline;
  color: #fff;
}
#modal-filter .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .5;
  transition: opacity .16s ease;
}
#modal-filter .btn-close:hover { opacity: 1; }

/* Feldgruppen-Label mit Icon */
#modal-filter .modal-body p.mb-0 {
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
#modal-filter .modal-body svg { opacity: .55; }

/* Eingabefelder wie die Filterleiste */
#modal-filter .filter-input-field {
  height: 46px;
  font-size: 15px !important;
  text-align: center;
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  transition: border-color .16s ease, background-color .16s ease;
}
#modal-filter .filter-input-field::placeholder { color: rgba(255, 255, 255, 0.3); }
#modal-filter .filter-input-field:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
}
#modal-filter .filter-input-field:focus,
#modal-filter .filter-input-field:focus-visible {
  border-color: #fff !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* "bis" zwischen den Feldern zuruecknehmen */
#modal-filter .modal-body .col.text-center span {
  font-size: .78rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Objektzustand */
#modal-filter .form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: .15em;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  cursor: pointer;
}
#modal-filter .form-check-label {
  font-size: .9rem !important;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

#modal-filter .modal-body { padding-bottom: .5rem !important; }
#modal-filter #show-properties-btn {
  border-radius: 8px !important;
  padding: .7rem 1.8rem !important;
  font-size: .95rem;
}

#immo-location {
  text-decoration: underline;
}

#immo-location:hover {
  opacity: .85;
}