/* Objektseite Zickzackweg 35–39 (web/index.html): nur, was über basis.css und expose.css hinausgeht.
   Look und Bausteine (Kopfleiste, Titel, Bel-Etage-Bühne, Listen, Formularfelder, Fotodialog) kommen aus dem Exposé. */

/* Titel: Knopf und Verfügbarkeit zwischen Untertitel und Eckdaten */
.titel-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(22px,3vh,32px)}
.btn-gross{min-height:58px;padding:0 32px;font-size:1.05rem}
.titel-aktion .frei{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;color:var(--hell)}
.titel-aktion .punkt{width:10px;height:10px;border-radius:50%;background:var(--greige-hell);box-shadow:0 0 0 4px rgba(203,197,179,.22);flex:none}
@media (max-width:640px){.titel-aktion .btn{width:100%}}

/* Willkommen (Carsten, 06.10.2026): erst Überschrift und Passage nebeneinander, dann die Gartenseite der Visualisierung in natürlichem Seitenverhältnis, dann vier Hinweise in vier Spalten */
.objektseite .willkommen-text{margin-top:0}
.objektseite .willkommen-bild{margin-top:clamp(36px,5vw,64px)}
.objektseite .willkommen-bild img{aspect-ratio:auto}
.auf-einen-blick{margin-top:clamp(28px,4vw,44px);grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,3vw,40px)}
.auf-einen-blick div{grid-template-columns:1fr;gap:4px;padding-top:14px}
.auf-einen-blick dt{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--greige-tief)}
@media (max-width:900px){.auf-einen-blick{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.auf-einen-blick{grid-template-columns:1fr}}

/* Die Villen stehen: zwei Fotos vom Oktober nebeneinander */
.villen-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:start}
.villen-kopf .lead{color:var(--tinte-2)}
.villen-fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(28px,4vw,44px)}
.villen-fotos .vollbild img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:900px){.villen-kopf{grid-template-columns:1fr;gap:14px}}
@media (max-width:760px){.villen-fotos{grid-template-columns:1fr}}

/* Bel Etage: Kurzinfo je Etage statt der Wohnungsliste */
.etagen-info .info-satz{margin-top:12px;color:var(--hell);font-size:1.08rem;line-height:1.55;max-width:46ch}
.etagen-info .info-zahlen{margin-top:10px;font-family:var(--serif);font-size:1.3rem;line-height:1.3;color:var(--licht)}

/* Wohnen: Ab-Preis als Zeile, Grundriss-Hinweis darunter */
.preis-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--kante);align-items:baseline}
.preis-zeile dt{color:var(--tinte-2);font-size:.95rem}
.preis-zeile dd{margin:0;color:var(--tinte)}
.preis-zeile dd.p{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.teaser{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--kante)}
.teaser-plan{position:relative;max-width:400px;background:#fffefb;border:1px solid var(--kante);padding:14px;overflow:hidden}
.teaser-plan img{width:100%;height:auto}
.teaser-plan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,254,251,0) 50%,rgba(255,254,251,.92) 100%)}
.teaser-text .eb{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--greige-tief)}
.teaser-text h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:8px;text-wrap:balance}
.teaser-text p+p,.teaser-text h3+p{margin-top:12px;color:var(--tinte-2);max-width:50ch}
.teaser-text .btn{margin-top:22px}
@media (max-width:760px){.teaser{grid-template-columns:1fr}.teaser-plan{max-width:260px}}

/* Lage: Bild oben, Text und Wege nebeneinander */
.objektseite .lage .lage-bild{margin-top:0}
.lage-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(36px,5vw,56px);align-items:start}
.lage-raster .lead{margin-top:14px;color:var(--tinte-2)}
.objektseite .lage-liste{margin-top:0;grid-template-columns:1fr}
@media (max-width:900px){.lage-raster{grid-template-columns:1fr}}

/* Das Exposé: links, was drin ist, rechts das Formular */
.expose .abend-bild{margin-bottom:clamp(36px,5vw,64px)}
.expose-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.expose-text .lead{margin-top:14px}
.inhalt-liste{margin-top:32px;grid-template-columns:1fr}
.inhalt-liste div{grid-template-columns:minmax(110px,26%) 1fr}
.diskret{margin-top:26px;padding-top:18px;border-top:1px solid var(--kante-dunkel);color:var(--hell-2);max-width:48ch}
.expose .direktwege{text-align:left;margin-top:12px}
.formular-karte{background:var(--blatt);color:var(--tinte);border-radius:var(--r-gross);padding:clamp(22px,3vw,34px);scroll-margin-top:84px}   /* Ziel der Knöpfe „Exposé anfordern“ (#anfrage): das Formular, nicht das Abendbild */
@media (max-width:900px){.formular-karte{scroll-margin-top:74px}}
.formular-karte .schon{margin-bottom:18px;padding:12px 14px;border-radius:var(--r);background:#e6e1d4;font-size:.95rem}
.formular-karte .schon a{font-weight:700}
.expose-form .absenden{position:static;margin:0;padding:0;background:none;box-shadow:none}
.expose-form .absenden .hinweis{margin:12px 0 0;font-size:.85rem}
.expose-form .haken{display:flex;gap:12px;align-items:flex-start;font-weight:400;cursor:pointer}
.anfrage-form .haken input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;margin:3px 0 0;accent-color:var(--tinte);flex:none}   /* mit Typ: die Feldregel min-height 50 px aus expose.css wog sonst schwerer */
.expose-form .vorschau-hinweis{padding:12px 14px;border-radius:var(--r);border:1px dashed rgba(38,37,31,.35);font-size:.92rem;color:var(--tinte)}
@media (max-width:900px){.expose-raster{grid-template-columns:1fr}}
@media (max-width:640px){.formular-karte{padding:22px 18px}}

/* Ansprechpartner auf hellem Grund */
.person-hell{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"bild kopf" "bild text" "bild wege";column-gap:clamp(24px,4vw,56px);align-items:start}
.person-hell .portraet{grid-area:bild}
.person-hell .portraet img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.person-hell .person-kopf{grid-area:kopf}
.person-hell .eb{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--greige-tief)}
.person-hell h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:8px}
.person-hell .lead{grid-area:text;margin-top:16px;color:var(--tinte-2);max-width:52ch}
.person-wege{grid-area:wege;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media (max-width:600px){
  .person-hell{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"bild kopf" "text text" "wege wege";column-gap:18px}
  .person-hell .person-kopf{align-self:center}
  .person-hell h2{font-size:1.5rem}   /* „Christian Kröncke“ bleibt neben dem Porträt eine Zeile */
  .person-wege .btn{flex:1}
}

/* Ausblick: Luftbild mit dem fertigen Park, Text und letzter Knopf */
.ausblick-text{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:end;margin-top:clamp(28px,4vw,44px)}
.ausblick-text .lead{margin-top:14px;max-width:62ch}
.ausblick-text .fussnote{margin-top:14px}
@media (max-width:900px){.ausblick-text{grid-template-columns:1fr}.ausblick-text .btn{justify-self:start}}
@media (max-width:640px){.ausblick-text .btn{width:100%}}