/* Immobilien: Raster, Karten, Objektseiten. Nutzt die Gestaltungswerte der Website (:root-Variablen). */

/* ---------- Raster ---------- */
.objekte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--raum-4)}
@media (min-width:64rem){.objekte{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-5)}}
.objekt-karte{position:relative}
.objekt-karte__innen{position:relative;display:flex;flex-direction:column;height:100%;background:var(--farbe-weiss);border:var(--linie);border-radius:var(--radius-kasten);box-shadow:var(--schatten-kasten);overflow:hidden;transition:box-shadow var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.objekt-karte:hover .objekt-karte__innen,.objekt-karte:focus-within .objekt-karte__innen{box-shadow:var(--schatten-kasten-hoch);transform:translateY(-3px)}
.objekt-karte__bild{position:relative;aspect-ratio:3/2;background:var(--farbe-gruen-zart);overflow:hidden}
.objekt-karte__bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--kurve)}
.objekt-karte:hover .objekt-karte__bild img{transform:scale(1.03)}
.objekt-karte__leer{display:grid;place-items:center;height:100%;font-family:var(--schrift-titel);font-size:var(--text-l);color:var(--farbe-text-leise)}
.objekt-karte__text{display:flex;flex-direction:column;gap:var(--raum-2);flex:1;padding:var(--raum-4)}
.objekt-karte__art,.objekt-karte__ort{margin:0;font-size:var(--text-xs);color:var(--farbe-text-leise)}
.objekt-karte__art{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.objekt-karte__titel{margin:0;font-family:var(--schrift-titel);font-weight:400;font-size:var(--text-l);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.objekt-karte__titel a{color:inherit;text-decoration:none}
.objekt-karte__titel a::after{content:"";position:absolute;inset:0;z-index:1}
.objekt-karte__titel a:focus-visible{outline:none}
.objekt-karte:has(.objekt-karte__titel a:focus-visible) .objekt-karte__innen{outline:3px solid var(--fokus);outline-offset:3px}
.objekt-karte__daten{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;list-style:none;margin:var(--raum-1) 0 0;padding:0;font-size:var(--text-xs);color:var(--farbe-text-leise)}
.objekt-karte__daten b{color:var(--farbe-text);font-weight:600}
.objekt-karte__preis{display:flex;flex-direction:column;gap:.15rem;margin:var(--raum-2) 0 0;padding-top:var(--raum-3);border-top:var(--linie-zart)}
.objekt-karte__preis b{font-family:var(--schrift-titel);font-weight:400;font-size:var(--text-xl);line-height:1.15;color:var(--farbe-gruen)}
.objekt-karte__preis small{font-size:var(--text-xs);color:var(--farbe-text-leise)}
.objekt-karte__mehr{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:var(--raum-3);font-weight:600;color:var(--farbe-gruen)}
.objekt-karte__mehr::after{content:"";width:1.1em;height:1.1em;background:currentColor;-webkit-mask:var(--pfeil) center/contain no-repeat;mask:var(--pfeil) center/contain no-repeat;transition:transform var(--dauer) var(--kurve)}
.objekt-karte:hover .objekt-karte__mehr::after{transform:translateX(4px)}
.plakette{position:absolute;top:var(--raum-3);left:var(--raum-3);z-index:2;background:var(--farbe-gruen);color:#fff;font-size:var(--text-xs);font-weight:600;line-height:1;padding:.45rem .8rem;border-radius:var(--radius-pille)}
.plakette--dunkel{background:var(--farbe-schwarz)}

/* ---------- Objektseite ---------- */
.abschnitt.angebot{overflow:visible;overflow-x:clip}
.objekt__raster{display:grid;gap:var(--raum-5);grid-template-columns:minmax(0,1fr);grid-template-areas:"galerie" "preis" "text"}
@media (min-width:64rem){.objekt__raster{grid-template-columns:minmax(0,1fr) 23rem;grid-template-areas:"galerie preis" "text preis";align-items:start;column-gap:var(--raum-6)}.objekt__preis{position:sticky;top:calc(var(--kopf-hoehe) + var(--raum-4))}}
.objekt__galerie{grid-area:galerie;min-width:0}
.objekt__preis{grid-area:preis;min-width:0}
.objekt__inhalt{grid-area:text;min-width:0;display:grid;gap:var(--raum-6)}
.objekt__block h2{margin:0 0 var(--raum-3);font-family:var(--schrift-titel);font-weight:400;font-size:var(--text-xl);line-height:1.2}
.objekt__block h3{margin:var(--raum-4) 0 var(--raum-2);font-family:var(--schrift-text);font-size:var(--text-m);font-weight:700;line-height:1.4;color:var(--farbe-gruen)}
.objekt__block h3:first-child{margin-top:0}
.objekt__block p,.objekt__block ul{max-width:46rem;margin:0 0 var(--raum-3);line-height:1.7}
.objekt__block ul{padding-left:1.25rem}
.objekt__block li{margin:.2rem 0}
.daten{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
@media (min-width:40rem){.daten{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--raum-5)}}
.daten>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--raum-3);padding:.7rem 0;border-bottom:var(--linie-zart)}
.daten dt{color:var(--farbe-text-leise)}
.daten dd{margin:0;font-weight:600;text-align:right}
.klasse-zeile{display:flex;align-items:center;margin:0 0 var(--raum-3)}
.klasse{display:inline-grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .6rem;margin-left:.75rem;border-radius:var(--radius-klein);color:#fff;font-weight:700;font-size:var(--text-l);background:var(--farbe-gruen)}
.klasse[data-klasse=ap]{background:#0a6b34}.klasse[data-klasse=a]{background:#167a3f}.klasse[data-klasse=b]{background:#3f8a26}.klasse[data-klasse=c]{background:#6b8a14}.klasse[data-klasse=d]{background:#8f6f00}.klasse[data-klasse=e]{background:#b45f06}.klasse[data-klasse=f]{background:#b8431a}.klasse[data-klasse=g]{background:#a4161a}.klasse[data-klasse=h]{background:#7d0f12}
.objekt__skala{margin:var(--raum-4) 0 0}
.objekt__skala img{max-width:100%;height:auto;border-radius:var(--radius-klein)}
.objekt__bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--raum-3)}
.objekt__bilder a{display:block;border:var(--linie);border-radius:var(--radius-klein);overflow:hidden;background:#fff}
.objekt__bilder img{display:block;width:100%;height:auto}

/* Preiskarte */
.preiskarte{background:var(--farbe-weiss);border:var(--linie);border-radius:var(--radius-kasten);box-shadow:var(--schatten-kasten);padding:var(--raum-blatt)}
.preiskarte__etikett{display:flex;align-items:center;gap:var(--raum-2);margin:0;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--farbe-text-leise)}
.preiskarte__etikett .plakette{position:static}
.preiskarte__preis{margin:.25rem 0 0;font-family:var(--schrift-titel);font-size:var(--text-2xl);line-height:1.1;color:var(--farbe-gruen)}
@media (min-width:64rem){.preiskarte__preis{font-size:clamp(2rem,1.6rem + 1vw,2.5rem)}}
.preiskarte__prov{margin:var(--raum-2) 0 0;font-size:var(--text-xs);color:var(--farbe-text-leise)}
.preiskarte__daten{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;list-style:none;margin:var(--raum-3) 0 0;padding:var(--raum-3) 0 0;border-top:var(--linie-zart);font-size:var(--text-xs);color:var(--farbe-text-leise)}
.preiskarte__daten b{color:var(--farbe-text);font-weight:600}
.preiskarte__knoepfe{display:grid;gap:var(--raum-2);margin-top:var(--raum-4)}
.preiskarte__person{display:flex;gap:var(--raum-3);align-items:center;margin-top:var(--raum-4);padding-top:var(--raum-3);border-top:var(--linie-zart);font-size:var(--text-xs);line-height:1.5}
.preiskarte__person img{width:4rem;height:4rem;border-radius:50%;object-fit:cover;flex:none}
.preiskarte__person p{margin:0}

/* Galerie */
.bildstrecke{position:relative;overflow:hidden;border-radius:var(--radius-kasten);background:var(--farbe-gruen-zart)}
.bildstrecke--leer{display:grid;place-items:center;aspect-ratio:3/2;font-family:var(--schrift-titel);font-size:var(--text-l);color:var(--farbe-text-leise)}
.bildstrecke__spur{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bildstrecke__spur::-webkit-scrollbar{display:none}
.bildstrecke__spur:focus-visible{outline:3px solid var(--fokus);outline-offset:-3px}
.bildstrecke__bild{position:relative;flex:0 0 100%;margin:0;aspect-ratio:3/2;scroll-snap-align:start}
.bildstrecke__bild img{display:block;width:100%;height:100%;object-fit:cover}
.bildstrecke__bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem var(--raum-3) var(--raum-3);font-size:var(--text-xs);color:#fff;background:linear-gradient(transparent,#000000b3)}
.bildstrecke__pfeil{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:3rem;height:3rem;margin-top:-1.5rem;padding:0;border:0;border-radius:50%;background:#ffffffeb;color:var(--farbe-gruen);box-shadow:var(--schatten-knopf);cursor:pointer;transition:transform var(--dauer-kurz) var(--kurve)}
.bildstrecke__pfeil:hover{transform:scale(1.06)}
.bildstrecke__pfeil--zurueck{left:var(--raum-3)}
.bildstrecke__pfeil--vor{right:var(--raum-3)}
.no-js .bildstrecke__pfeil{display:none}
.bildstrecke__zaehler{position:absolute;top:var(--raum-3);right:var(--raum-3);z-index:2;margin:0;padding:.3rem .8rem;border-radius:var(--radius-pille);background:#000000a6;color:#fff;font-size:var(--text-xs);line-height:1.2}
@media (max-width:40rem){.bildstrecke__pfeil{width:2.5rem;height:2.5rem;margin-top:-1.25rem}}
@media (prefers-reduced-motion:reduce){.bildstrecke__spur{scroll-behavior:auto}.objekt-karte__innen,.objekt-karte__bild img{transition:none}}

/* Sprung zum Anfrageformular: das Formular ragt nach oben über den grünen Abschnitt hinaus, daher zusätzlicher Abstand unter dem Kopfbereich */
#anfrage{scroll-margin-top:calc(var(--ueberstand) + var(--kopf-hoehe) + var(--raum-3))}

/* Exposé-Formular: Datenschutz-Haken */
.feld--haken{margin-top:var(--raum-2)}
.haken{display:flex;gap:.75rem;align-items:flex-start;line-height:1.5;cursor:pointer}
.formular .haken input[type=checkbox]{flex:none;width:1.4rem;height:1.4rem;min-height:0;margin:.1rem 0 0;padding:0;accent-color:var(--farbe-gruen)}

/* Objektseite: Ueberschrift kleiner, damit lange Objekttitel nicht den ganzen Bildschirm fuellen */
.seitenkopf.seitenkopf--objekt h1{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);line-height:1.2;max-width:30em}
/* Abstand Linie-Inhalt = Abstand letzte Textzeile-Linie (egal wie viele Zeilen der Kopf hat) */
.seitenkopf--abstand + .abschnitt{padding-top:var(--raum-6)}
.seitenkopf--abstand .antwort>:last-child{margin-bottom:-.25em}

/* Grosse Ansicht (Lightbox) */
.lb-ziel{cursor:zoom-in}
.lb-offen{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#0a140ef0;color:#fff}
.lightbox[hidden]{display:none}
.lightbox__figur{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--raum-3);margin:0;width:100%;height:100%;padding:4.5rem 5rem 5rem;box-sizing:border-box;min-width:0}
.lightbox__bild{display:block;max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:var(--radius-klein);background:#fff}
.lightbox__text{margin:0;max-width:46rem;text-align:center;font-size:var(--text-xs);line-height:1.4;color:#ffffffd9}
.lightbox__zaehler{position:absolute;left:50%;bottom:var(--raum-3);transform:translateX(-50%);margin:0;padding:.3rem .8rem;border-radius:var(--radius-pille);background:#000000a6;font-size:var(--text-xs);line-height:1.2}
.lightbox__knopf{position:absolute;z-index:2;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:0;border-radius:50%;background:#ffffffeb;color:var(--farbe-gruen);box-shadow:var(--schatten-knopf);cursor:pointer;transition:transform var(--dauer-kurz) var(--kurve)}
.lightbox__knopf[hidden]{display:none}
.lightbox__knopf:hover{transform:scale(1.06)}
.lightbox__knopf:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lightbox__zu{top:var(--raum-3);right:var(--raum-3)}
.lightbox__pfeil{top:50%;margin-top:-1.5rem}
.lightbox__pfeil--zurueck{left:var(--raum-3)}
.lightbox__pfeil--vor{right:var(--raum-3)}
@media (max-width:40rem){.lightbox__figur{padding:4rem .75rem 4.5rem}.lightbox__knopf{width:2.5rem;height:2.5rem}.lightbox__pfeil{margin-top:-1.25rem}.lightbox__pfeil--zurueck{left:.5rem}.lightbox__pfeil--vor{right:.5rem}}
@media (prefers-reduced-motion:reduce){.lightbox__knopf{transition:none}}

/* Anfrageformular: feiner goldener Rand wie die Abtrennung zum unteren Teil, damit die weisse Karte auf weissem Grund sichtbar bleibt */
.anfrage-abschnitt .formular.blatt{border-color:var(--farbe-gold)}