/* Bärlin Immo — Ergänzungen zum Website-Design.
   Muss eine echte Datei sein: die Seiten-Isolation entfernt eingebettete <style>-Blöcke. */

/* ---------- Übersicht: Karten erscheinen unscharf → scharf ---------- */
.immo-grid .immo-card{
  opacity:0; filter:blur(14px); transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             filter .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.immo-grid .immo-card.is-scharf{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){
  .immo-grid .immo-card{transition:none;opacity:1;filter:none;transform:none}
}

/* ---------- Übersicht: Ladeanzeige beim Nachladen ---------- */
.bhi-lade{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:38px 0 10px; min-height:70px;
  font:600 15px/1 Geist,"Helvetica Neue",Arial,sans-serif;
  color:var(--muted); letter-spacing:.02em;
}
.bhi-lade[hidden]{display:none}
.bhi-sanduhr{
  width:26px; height:26px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-top-color:var(--green);
  animation:bhi-dreh .8s linear infinite;
}
@keyframes bhi-dreh{to{transform:rotate(360deg)}}
.bhi-ende{text-align:center;padding:30px 0 0;color:var(--muted);font-size:14px}

/* ---------- Detailseite: Galerie (großes Bild + schmale Bildspalte) ----------
   Breite und Kanten identisch zum übrigen Seiteninhalt (1280er-Linie). */
.bhi-gal{
  display:grid; grid-template-columns:1fr clamp(84px,9%,124px);
  gap:12px; align-items:stretch;
  max-width:none; margin:0;
  padding:clamp(18px,2.5vw,30px) var(--edge) 0;
  box-sizing:border-box;
}
.bhi-gal-haupt{
  aspect-ratio:16/10; overflow:hidden; width:100%; margin:0;
  background:var(--surface-2,#e8e5dc);
}
.bhi-gal-haupt img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; filter:blur(16px);
  transition:opacity .6s ease, filter .6s ease;
}
.bhi-gal-haupt img.is-scharf{opacity:1;filter:blur(0)}
.bhi-gal-spalte{position:relative;min-width:0}
.bhi-gal-liste{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; scrollbar-width:thin;
}
.bhi-gal-liste button{
  border:2px solid transparent; padding:0; background:none;
  cursor:pointer; flex:none; line-height:0;
}
.bhi-gal-liste button.aktiv{border-color:var(--green)}
.bhi-gal-liste img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

@media(max-width:700px){
  .bhi-gal{grid-template-columns:1fr}
  .bhi-gal-spalte{height:74px}
  .bhi-gal-liste{flex-direction:row;overflow-x:auto}
  .bhi-gal-liste button{width:96px}
}

/* ---------- Hinweisleiste während der Erprobung ---------- */
.bhi-hinweis{
  background:#b45309; color:#fff; text-align:center;
  padding:10px 16px;
  font:600 14px/1.4 Geist,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Abschluss der Übersicht ---------- */
.bhi-ende{text-align:center;padding:clamp(34px,4vw,54px) 0 6px;color:var(--muted)}
.bhi-ende-titel{
  margin:0 0 10px;
  font:600 clamp(20px,2vw,28px)/1.3 Geist,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); letter-spacing:-.01em;
}
.bhi-ende-zahlen{margin:0;font-size:clamp(15px,1.2vw,17px);line-height:1.7}
.bhi-ende-zahlen strong{color:var(--text)}
.bhi-ende-zahlen a{
  color:var(--dark-green); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--green) 55%, transparent);
  padding-bottom:1px; transition:color .2s, border-color .2s;
}
.bhi-ende-zahlen a:hover{color:var(--green);border-color:var(--green)}