/* ============================================================
   Wohnungs-Detailseite
   Aufbau nach /strategie: 360°-Rundgang OBEN (nicht unter „Galerie"),
   eigene Fotos, Belegung und Ausstattung als Liste, Fahrzeiten statt
   Sehenswuerdigkeiten, ein konkretes Preisbeispiel statt Preistabelle.
   ============================================================ */
.wo{background:var(--paper);padding:130px 0 70px}
@media(max-width:900px){.wo{padding:112px 0 50px}}

.wo-krumen{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.wo-krumen a{color:var(--ink2);text-decoration:none}
.wo-krumen a:hover{color:var(--gold-d);text-decoration:underline}

.wo-vertrauen{font-size:.78rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 10px}
.wo-h1{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;
  letter-spacing:-.025em;margin:0 0 8px;color:var(--ink)}
.wo-lage{font-size:1.02rem;color:var(--muted);margin:0 0 32px}

.wo-raster{display:grid;grid-template-columns:1fr minmax(290px,.42fr);gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:900px){.wo-raster{grid-template-columns:1fr}}

.wo-haupt section{margin-bottom:clamp(30px,4vw,48px)}
.wo-haupt h2{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);margin:0 0 8px;color:var(--ink)}
.wo-s{color:var(--muted);font-size:.94rem;margin:0 0 14px}

.wo-tour iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--kante,2px);display:block;background:#14110d}
.wo-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.wo-galerie img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--kante,2px)}
.wo-text p{font-size:1.04rem;line-height:1.75;color:var(--ink2);margin:0;max-width:70ch}

.wo-daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.wo-liste{list-style:none;margin:0;padding:0}
.wo-liste li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.96rem;color:var(--ink2)}
.wo-zeiten{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 32px}
.wo-zeiten li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.wo-zeiten b{font-weight:700;color:var(--ink)}
.wo-zeiten span{color:var(--gold-d)}

/* Seitenspalte bleibt beim Scrollen stehen – Preis und Kontakt immer greifbar */
.wo-seite{position:sticky;top:130px}
@media(max-width:900px){.wo-seite{position:static}}
.wo-preis{background:var(--ink);color:#fff;padding:22px 24px;border-radius:var(--kante,2px);margin-bottom:14px}
.wo-preis .kopf{font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-l)}
.wo-preis .summe{font-family:var(--serif);font-size:2.4rem;color:var(--gold-l);line-height:1.1;margin-top:6px}
.wo-preis .klein{font-size:.82rem;color:rgba(255,255,255,.6)}
.wo-preis .pn{font-size:1rem;color:#fff;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.16)}
.wo-preis .stand{font-size:.74rem;color:rgba(255,255,255,.42);margin-top:12px}

.wo-cta{display:block;text-align:center;background:var(--gold);color:#1a1206;font-weight:700;
  padding:15px 18px;border-radius:var(--kante,2px);text-decoration:none;transition:.2s}
.wo-cta:hover{background:var(--gold-d);color:#fff}
.wo-wa{display:block;text-align:center;background:#25d366;color:#08301b;font-weight:700;
  padding:14px 18px;border-radius:var(--kante,2px);text-decoration:none;margin-top:9px;transition:.2s}
.wo-wa:hover{background:#1fb455}

.wo-kontakt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.94rem}
.wo-kontakt .k{font-size:.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:5px}
.wo-kontakt b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-bottom:5px}
.wo-kontakt a{display:block;color:var(--ink2);text-decoration:none}
.wo-kontakt a:hover{color:var(--gold-d)}
.wo-alle{display:inline-block;margin-top:18px;color:var(--gold-d);font-weight:600;text-decoration:underline;
  text-underline-offset:4px;font-size:.94rem}

.wo-fuss{background:var(--ink);color:rgba(255,255,255,.5);padding:26px 0;font-size:.85rem}
.wo-fuss .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.wo-fuss a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px}
.wo-fuss a:hover{color:var(--gold-l)}
.wo .lang a{padding:6px 9px;font-size:.78rem;font-weight:700;color:var(--ink2);text-decoration:none}
.wo .lang a.active{background:var(--gold);color:#1a1206;border-radius:var(--kante,2px)}

/* ---------- Übersichtsseite /wohnungen ---------- */
.uw-lead{font-size:1.06rem;line-height:1.65;color:var(--muted);max-width:68ch;margin:0 0 30px}
.uw-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.uw-filter-t{font-size:.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold-d);margin-right:8px}
.uw-filter button{padding:9px 15px;border:1px solid var(--line);background:#fff;color:var(--ink2);
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;border-radius:var(--kante,2px);transition:.18s}
.uw-filter button:hover{border-color:var(--gold)}
.uw-filter button.an{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.uw-keine{background:var(--paper2);border-left:3px solid var(--gold);padding:16px 20px;
  margin:0 0 22px;color:var(--ink2);line-height:1.6}

.uw-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(20px,2.6vw,32px)}
.uw-karte{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:none;border:0;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.uw-karte:hover{transform:translateY(-4px)}
.uw-bild{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--kante,2px);
  background:linear-gradient(135deg,#efe8dc,#e4dccd)}
.uw-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.uw-karte:hover .uw-bild img{transform:scale(1.05)}
.uw-leer{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;opacity:.3}
.uw-marken{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;justify-content:space-between}
.uw-marken span{font-size:.64rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--kante,2px);white-space:nowrap}
.uw-marken .sofort{background:#1f7a4d;color:#fff}
.uw-marken .tour{background:rgba(12,10,8,.82);color:var(--gold-l);margin-left:auto}
.uw-kopf{padding:14px 0 0}
.uw-kopf b{display:block;font-family:var(--serif);font-size:1.24rem;color:var(--ink);letter-spacing:-.01em}
.uw-kopf span{font-size:.86rem;color:var(--muted)}
.uw-betten{font-size:.86rem;color:var(--ink2);margin-top:5px}
.uw-fuss{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.uw-fuss .preis{font-size:.86rem;color:var(--muted)}
.uw-fuss .preis b{font-family:var(--serif);font-size:1.2rem;color:var(--gold-d)}
.uw-fuss .pfeil{font-size:.86rem;font-weight:700;color:var(--gold-d);white-space:nowrap;transition:.2s}
.uw-karte:hover .uw-fuss .pfeil{color:var(--ink)}
.uw-stand{font-size:.8rem;color:var(--muted);margin:26px 0 0}
.uw-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.uw-cta .wo-cta,.uw-cta .wo-wa{flex:1 1 260px;margin:0}
.nav a.an{color:var(--gold-d)}
@media(prefers-reduced-motion:reduce){.uw-karte,.uw-bild img{transition:none}}
/* display:flex überstimmt das hidden-Attribut – ohne diese Regel filtert
   die Übersicht sichtbar nichts. Derselbe Fehler wie einst im Cockpit. */
.uw-karte[hidden]{display:none!important}

/* ===== Über-uns (20.07., Brief-Fassung) ===== */
/* Zahlenband: Messwerte in Mono/Saira auf Haarlinien — keine Kästchen */
.ue-band{list-style:none;margin:38px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.ue-band li{padding:18px 22px 16px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.ue-band b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ue-band span{display:block;margin-top:8px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.6px;text-transform:uppercase;color:var(--graphit,#4A5459)}
.ue-stand{font-family:var(--mono);font-size:.72rem;color:var(--graphit-l,#7A868C);margin:10px 0 0}

/* Der Brief des Inhabers — das Herzstück. Goldkante statt Rahmen. */
.ue-brief{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px)}
@media(max-width:760px){.ue-brief{grid-template-columns:1fr;gap:14px}}
.ue-brief-mark{font-family:var(--mono);font-size:.74rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-d);writing-mode:vertical-rl;transform:rotate(180deg);
  border-right:2px solid var(--gold);padding:4px 14px 4px 0;align-self:start}
@media(max-width:760px){.ue-brief-mark{writing-mode:horizontal-tb;transform:none;
  border-right:0;border-bottom:2px solid var(--gold);padding:0 0 8px}}
.ue-brief-korpus{max-width:70ch}
.ue-brief-korpus p{font-size:1.05rem;line-height:1.85;color:var(--ink2);margin:0 0 1.1em}
.ue-brief-korpus p.ue-auftakt{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.ue-sig{display:flex;align-items:center;gap:20px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.ue-sig b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.ue-sig span{font-family:var(--mono);font-size:.74rem;letter-spacing:.8px;text-transform:uppercase;color:var(--graphit,#4A5459)}
.ue-portrait{margin:0}
.ue-portrait img{width:96px;height:120px;object-fit:cover;border-radius:2px;display:block}

/* Kühlschrank-Moment (erscheint erst mit Foto) */
.ue-kuehl{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);align-items:center}
@media(max-width:760px){.ue-kuehl{grid-template-columns:1fr}}
.ue-kuehl figure{margin:0}
.ue-kuehl img{width:100%;height:auto;border-radius:2px;display:block}
.ue-kuehl h2{margin-top:0}

/* Ablauf: echte Reihenfolge -> nummerierte Liste ist hier inhaltlich richtig */
.ue-wie{margin-top:clamp(44px,6vw,72px)}
.ue-schritte{list-style:none;margin:18px 0 0;padding:0;max-width:70ch;counter-reset:s}
.ue-schritte li{counter-increment:s;position:relative;padding:14px 0 14px 58px;border-bottom:1px solid var(--line);line-height:1.7}
.ue-schritte li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:.86rem;color:var(--gold-d);letter-spacing:1px}
.ue-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px);max-width:560px}
.ue-cta .wo-cta,.ue-cta .wo-wa{flex:1;min-width:220px;margin:0}

/* site.css gibt section pauschal 104px Padding — auf der Über-uns-Seite
   steuern die margins der Abschnitte den Rhythmus, nicht das Erbe */
.ue-brief,.ue-wie,.ue-kuehl{padding:0}
.ue-cta .wo-cta,.ue-cta .wo-wa{display:flex;align-items:center;justify-content:center}

/* ===== Eigene 360°-Bühne (20.07.) — Kuula ist Inhalt, der Rahmen ist unserer ===== */
.wo-buehne{background:var(--ink);border-radius:var(--kante,2px);overflow:hidden}
.wo-buehne .wb-kopf{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.wb-mark{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:1px;
  color:#1a1206;background:var(--gold);padding:4px 8px;border-radius:2px}
.wo-buehne .wb-kopf b{font-family:var(--serif);font-size:1.02rem;color:#fff;font-weight:600}
.wb-einheit{font-family:var(--mono);font-size:.74rem;letter-spacing:.8px;text-transform:uppercase;
  color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-voll{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.6px;padding:7px 12px;border-radius:2px;
  cursor:pointer;transition:.2s;white-space:nowrap}
.wb-voll:hover{border-color:var(--gold);color:var(--gold-l)}
.wo-buehne iframe{width:100%;aspect-ratio:16/10;border:0;display:block;background:#0c0a08}
.wo-buehne:fullscreen{display:flex;flex-direction:column}
.wo-buehne:fullscreen iframe{flex:1;aspect-ratio:auto}
.wb-fuss{font-family:var(--mono);font-size:.72rem;letter-spacing:.5px;color:rgba(255,255,255,.5);
  margin:0;padding:10px 16px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:560px){.wb-einheit{display:none}}

/* Über-uns: Beleg-Fotostreifen + Winterbild neben dem Brief (20.07. Abend) */
.ue-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media(max-width:700px){.ue-strip{grid-template-columns:1fr 1fr}.ue-strip figure:nth-child(3){display:none}}
.ue-strip figure{margin:0}
.ue-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px}
.ue-strip figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.6px;text-transform:uppercase;
  color:var(--graphit,#4A5459);margin-top:7px}
.ue-brief{grid-template-columns:auto minmax(0,1fr) minmax(250px,.5fr)}
@media(max-width:980px){.ue-brief{grid-template-columns:auto minmax(0,1fr)}.ue-winter{grid-column:2}}
@media(max-width:760px){.ue-winter{grid-column:1}}
.ue-winter{margin:0;align-self:start;position:sticky;top:120px}
@media(max-width:980px){.ue-winter{position:static;max-width:460px}}
.ue-winter img{width:100%;height:auto;display:block;border-radius:2px}
.ue-winter figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.6px;text-transform:uppercase;
  color:var(--graphit,#4A5459);margin-top:8px;line-height:1.6}

/* Bühne GROSS (Inhaber: „in Szene setzen") — volle Inhaltsbreite über dem Raster */
.wo-buehne-gross{margin:0 0 clamp(28px,4vw,48px)}
.wo-buehne-gross iframe{aspect-ratio:16/9;min-height:min(62vh,640px)}
@media(max-width:900px){.wo-buehne-gross iframe{aspect-ratio:4/3;min-height:0}}
.wo-buehne-gross .wb-kopf{padding:14px 18px}
.wo-buehne-gross .wb-kopf b{font-size:1.15rem}

/* Über-uns: Zahlenband als dunkles, randloses Element mit Goldlinien-Einlauf */
.ue-zahlen{width:100vw;margin:38px 0 0 calc(50% - 50vw);background:var(--ink)}
.ue-zahlen-innen{max-width:1240px;margin:0 auto;padding:clamp(34px,5vw,56px) 26px clamp(22px,3vw,34px)}
.ue-band.dunkel{margin:0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 34px}
.ue-band.dunkel li{position:relative;border-top:1px solid rgba(255,255,255,.14);border-bottom:0;padding:20px 0 14px}
.ue-band.dunkel li::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--gold);
  transition:width .9s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.ue-band.an li::before{width:100%}
.ue-band.dunkel b{color:var(--gold-l);font-size:clamp(1.9rem,3.4vw,2.9rem)}
.ue-band.dunkel span{color:rgba(255,255,255,.62)}
.ue-stand.hell{color:rgba(255,255,255,.4);margin-top:16px}
@media(prefers-reduced-motion:reduce){.ue-band.dunkel li::before{transition:none}.ue-band.an li::before{width:100%}}

/* Bühne randlos — kein Rahmen kann sie mehr „gefangen halten" */
.wo-buehne-gross{width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
.wo-buehne-gross .wb-kopf{max-width:1240px;margin:0 auto;padding:14px 26px}
.wo-buehne-gross .wb-fuss{max-width:1240px;margin:0 auto;padding:10px 26px}
.wo-buehne-gross iframe{max-height:72vh}

/* Über-uns: Verständigungszeile (21.07.) */
.ue-sprachen{margin-top:clamp(30px,4vw,44px);padding:18px 22px;border-left:3px solid var(--gold);background:var(--paper2,#efe8dc)}
.ue-sprachen .k{font-family:var(--mono);font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-d)}
.ue-sprachen p{margin:6px 0 0;line-height:1.7;color:var(--ink2);max-width:70ch}
