/* Immobilienübersicht /immobilien/ — nur auf dieser Seite geladen.
   Hell (#ECECE8) mit dunkler Schrift; Taupe erreicht auf Hell nur ~2,1:1, darum hier kein Taupe für Text. */

/* Kopf auf dieser Seite immer dunkel, auch ungescrollt über der hellen Fläche */
.kopf, .kopf.ist-gescrollt{background:var(--club); border-bottom-color:var(--linie)}

.nur-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.immo{
  --innen:min(1500px, 100% - 2 * var(--rand));
  background:var(--licht); color:var(--club);
  padding-top:calc(var(--kopf-h) + clamp(2.5rem, 5vw, 4.5rem));
}
.immo > *{width:var(--innen); margin-inline:auto}
.immo em{color:var(--club)}
.immo :focus-visible{outline:2px solid var(--club); outline-offset:3px}

/* ---------- Einstieg ---------- */
.immo-kopf{display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem 3rem}
.immo-oberzeile{
  display:flex; align-items:center; gap:1rem; margin:0 0 1.25rem;
  font-size:.72rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
}
.immo-oberzeile::before{content:""; width:2.5rem; height:1px; background:currentColor}
.immo-titel{font-family:var(--serif); font-size:clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); line-height:1.02; letter-spacing:-.015em}
.immo-lead{margin-top:1rem; font-size:clamp(1.05rem, 1rem + .35vw, 1.3rem)}
.immo-knopf{
  display:inline-flex; align-items:center; gap:.8rem; padding:1.05rem 1.8rem;
  border:1px solid var(--club); color:var(--club); background:transparent;
  font:500 .74rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.immo-knopf:hover{background:var(--club); color:var(--licht)}

/* ---------- Filter ---------- */
.immo-liste{padding:clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 7rem)}
.immo-filter{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; background:var(--licht)}
.immo-filter[hidden], .immo-sort[hidden]{display:none}
@media (min-width:1024px){
  /* klebt unter dem gescrollten Kopf (64px); Licht-Fläche drunter, damit nichts durchscheint */
  .immo-filter{position:sticky; top:64px; z-index:5; padding:.9rem 0; margin-top:-.9rem; border-bottom:1px solid transparent}
}
.immo-feld{position:relative; display:block}
.immo-feld span{position:absolute; left:1.25rem; top:.7rem; font-size:.78rem; font-weight:500; pointer-events:none}
.immo-feld select, .immo-sort select{
  appearance:none; -webkit-appearance:none; width:100%; border-radius:0; cursor:pointer;
  border:1px solid var(--stein); background:var(--licht) no-repeat right 1.1rem center / .8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1C1C' stroke-width='1.4'/%3E%3C/svg%3E");
  color:var(--club); transition:border-color .25s var(--ease);
}
.immo-feld select{padding:1.75rem 3rem .65rem 1.25rem; font:400 1.15rem/1.2 var(--serif)}
.immo-feld select:hover, .immo-sort select:hover{border-color:var(--club)}

.immo-leiste{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.6rem 0 1.75rem; flex-wrap:wrap}
.immo-zahl{font-size:.95rem; font-weight:500; letter-spacing:.04em}
.immo-sort{display:flex; align-items:center; gap:.9rem; font-size:.9rem}
.immo-sort select{width:auto; min-width:11rem; padding:.55rem 2.6rem .55rem 1rem; font:400 .9rem/1.2 var(--sans); background-position:right .9rem center}

/* ---------- Galerie ---------- */
.immo-galerie{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(3rem, 4vw, 4rem) clamp(1.5rem, 2vw, 2rem)}
.immo-karte{position:relative; display:flex; flex-direction:column}
.immo-karte[hidden]{display:none}
.immo-karte__bild{position:relative; aspect-ratio:3 / 2; overflow:hidden; background:rgba(26,28,28,.06); margin-bottom:1.25rem}
.immo-karte__bild img{width:100%; height:100%; object-fit:cover; object-position:center 55%; transition:transform .6s var(--ease)}
.immo-karte:hover .immo-karte__bild img, .immo-karte:focus-within .immo-karte__bild img{transform:scale(1.025)}
.immo-karte__marke{
  position:absolute; left:1rem; top:1rem; padding:.45rem .75rem;
  background:var(--licht); color:var(--club); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; line-height:1;
}
.immo-karte__ort{font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.immo-karte__titel{margin:.5rem 0 .45rem; font-family:var(--serif); font-size:clamp(1.45rem, 1.2rem + .7vw, 1.85rem); line-height:1.15; text-wrap:balance}
.immo-karte__fakten{font-size:.95rem}
.immo-karte__fuss{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--linie-dunkel);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.immo-karte__fakten{margin-bottom:1.1rem}
.immo-karte__preis{font-size:1.35rem; font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums}
.immo-karte__preis span{display:block; font-size:.8rem; font-weight:500; margin-bottom:.25rem}
.immo-karte__link{font-size:.9rem; font-weight:500; white-space:nowrap; padding-bottom:.2rem; border-bottom:1px solid transparent; transition:border-color .25s var(--ease)}
/* Ganze Karte klickbar, aber nur ein Link im Fokus-/Vorleseweg */
.immo-karte__link::after{content:""; position:absolute; inset:0}
.immo-karte:hover .immo-karte__link, .immo-karte__link:focus-visible{border-bottom-color:var(--club)}
.immo-karte__link:focus-visible{outline:none}
.immo-karte:has(.immo-karte__link:focus-visible){outline:2px solid var(--club); outline-offset:8px}

.immo-leer{padding:3rem 0; border-top:1px solid var(--linie-dunkel); display:grid; gap:1.5rem; justify-items:start}
.immo-leer[hidden]{display:none}
.immo-leer p{font-family:var(--serif); font-size:1.4rem; max-width:40ch}

/* Einblendung beim Laden: einmalig, 400 ms, 12 px */
@media (prefers-reduced-motion:no-preference){
  .immo-karte{animation:immo-auf .4s var(--ease) both; animation-delay:calc(var(--i, 0) * 60ms)}
  .immo-galerie.ist-ruhig .immo-karte{animation:none}
}
@keyframes immo-auf{from{opacity:0; transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.immo-karte__bild img{transition:none}}

/* ---------- Ohne Weichzeichner ---------- */
.immo-ehrlich{
  display:grid; grid-template-columns:5fr 7fr; gap:2rem clamp(2rem, 6vw, 6rem);
  padding:clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); border-top:1px solid var(--linie-dunkel);
}
.immo-ehrlich h2{font-size:clamp(2.2rem, 1.4rem + 2.8vw, 3.8rem)}
.immo-ehrlich__text{font-family:var(--serif); font-size:clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height:1.45; max-width:48ch}
.immo-ehrlich__liste{list-style:none; margin:2.25rem 0 0; padding:0; border-top:1px solid var(--linie-dunkel)}
.immo-ehrlich__liste li{padding:1rem 0; border-bottom:1px solid var(--linie-dunkel); font-size:1rem}

/* ---------- Suchauftrag (dunkler Abschluss) ---------- */
.immo-such{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem clamp(2rem, 7vw, 7rem); align-items:start;
  padding:clamp(4rem, 9vw, 8rem) max(var(--rand), (100% - 1500px) / 2);
  background:var(--club); color:var(--licht);
}
.immo-such h2{margin-bottom:1.5rem}
.immo-such__text p:not(.immo-oberzeile){max-width:42ch; font-size:1.05rem}
.immo-such .immo-oberzeile{color:var(--taupe)}
.immo-such .formular{max-width:none}
.immo-such .formular label{color:var(--taupe); font-size:.7rem}
.immo-such .formular input, .immo-such .formular select{color:var(--licht); border-bottom-color:var(--stein)}
.immo-such .formular input:focus, .immo-such .formular select:focus{border-bottom-color:var(--licht)}
.immo-such .formular input::placeholder{color:var(--stein)}
.immo-such .formular option{color:var(--club); background:var(--licht)}
.immo-such .formular button{background:var(--licht); border-color:var(--licht); color:var(--club)}
.immo-such .formular button:hover{background:transparent; color:var(--licht)}
.immo-such :focus-visible{outline:2px solid var(--licht); outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .immo-galerie{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:900px){
  .immo-kopf{grid-template-columns:1fr; justify-items:start}
  .immo-ehrlich, .immo-such{grid-template-columns:1fr}
}
@media (max-width:700px){
  .immo-filter{grid-template-columns:1fr; gap:.75rem}
  .immo-galerie{grid-template-columns:1fr; gap:3rem}
}