// Maison 57 — Wohnungen: erst das Gefühl, dann das Werkzeug.
// Kopf, Wohngefühl, Kategorie-Highlights (aus der Flächenaufstellung), Material,
// Flexizone/Freiflächen, Typen-Galerie, Finder (Liste + Gebäudeschnitt), Vormerkung.
const {
  Button: WBtn, TextLink: WTextLink,
  Reveal: WReveal, WordReveal: WWordReveal, LineMask: WLineMask, RevealImage: WRevealImage,
} = window.Maison57DesignSystem_40d525;
const WIMG = '/assets/renderings/';
const WStore = window.M57Store;
const planHref = (plan) => plan ? '/assets/plaene/' + String(plan).padStart(2, '0') + '.pdf' : null;
const WSECTION = 'clamp(4rem, 8vw, 6.5rem)';

/* Kategorie-Highlights — je Wohnungskategorie die Kennzahlen aus der
   Flächenaufstellung, vor Ausstattung und Highlights. Deep-Link in den Finder. */
function KategorieHighlights({ onFinder }) {
  const cats = [
    { img: 'interior-wohnen-garten.webp', name: 'Gartenwohnungen', geschoss: 'Erdgeschoss', facts: [['Einheiten', '10'], ['Zimmer', '2 bis 3'], ['Wohnfläche', 'ab 53,3 m²'], ['Garten', 'bis 217,5 m²']], filter: { frei: ['Garten'] } },
    { img: 'interior-wohnen-balkon.webp', name: 'Stadtwohnungen', geschoss: '1. und 2. Obergeschoss', facts: [['Einheiten', '16'], ['Zimmer', '2 bis 3'], ['Wohnfläche', 'ab 54,2 m²'], ['Balkon', 'bis 26,6 m²']], filter: { frei: ['Balkon'] } },
    { img: 'interior-wohnen-terrasse.webp', name: 'Dachgeschoss', geschoss: 'Dachgeschoss', facts: [['Einheiten', '5'], ['Zimmer', '3 bis 4'], ['Wohnfläche', 'ab 50,1 m²'], ['Dachterrasse', 'bis 68,7 m²']], filter: { geschoss: 'DG' } },
  ];
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
      <h2 style={{ overflow: 'hidden', margin: '0 0 clamp(2rem, 3.5vw, 3rem)', paddingBottom: '0.12em' }}>
        <WLineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3vw, 2.75rem)', letterSpacing: '-0.015em', color: 'var(--umbra)' }}>Drei Arten zu wohnen</WLineMask>
      </h2>
      <div className="m57-teaser" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(1.5rem, 3vw, 2.5rem)' }}>
        {cats.map((c, i) => (
          <WReveal key={c.name} delay={i * 120}>
            <div>
              <WRevealImage src={WIMG + c.img} alt={c.name} ratio="4 / 3" delay={i * 120} />
              <div style={{ marginTop: 'var(--space-4)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.4rem', color: 'var(--umbra)' }}>{c.name}</div>
                <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginTop: '0.15rem' }}>{c.geschoss}</div>
                <div style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-4)' }}>
                  {c.facts.map((f) => (
                    <div key={f[0]} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: 'var(--space-2) 0', borderBottom: '1px solid var(--sandstein-40)' }}>
                      <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-60)' }}>{f[0]}</span>
                      <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra)', fontVariantNumeric: 'tabular-nums' }}>{f[1]}</span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 'var(--space-4)' }}>
                  <WTextLink onClick={() => onFinder(c.filter)}>Im Finder ansehen</WTextLink>
                </div>
              </div>
            </div>
          </WReveal>
        ))}
      </div>
    </section>
  );
}

function ViewSwitch({ view, setView }) {
  const tabStyle = (active) => ({
    background: 'none', border: 'none', cursor: 'pointer', padding: '0.2rem 0',
    fontFamily: 'var(--font-text)', fontSize: 'var(--text-body)',
    color: active ? 'var(--umbra)' : 'var(--umbra-60)', fontWeight: active ? 500 : 400,
    borderBottom: active ? '2px solid var(--waldgruen)' : '2px solid transparent',
  });
  return (
    <div style={{ display: 'flex', gap: 'var(--space-6)' }}>
      <button style={tabStyle(view === 'liste')} onClick={() => setView('liste')}>Liste</button>
      <button style={tabStyle(view === 'gebaeude')} onClick={() => setView('gebaeude')}>Gebäude</button>
    </div>
  );
}

/* ---------------------------------------------------------------------------
   Finder: stehende Filterspalte links, Ergebnisliste als Karten rechts.
   Aufbau nach dem Muster von noma.wien, gesetzt in unserer Sprache:
   Radius 0, Haarlinien statt Pillen, ein Akzent in Waldgrün, sentence case.
--------------------------------------------------------------------------- */

const F_ZIMMER = ['2', '3', '4'];
const F_HAUS = ['5', '7'];
const F_GESCHOSS = ['EG', '1.OG', '2.OG', 'DG'];
const F_FREI = ['Garten', 'Balkon', 'Dachterrasse'];
const F_STATUS = [['verfuegbar', 'Verfügbar'], ['reserviert', 'Reserviert'], ['verkauft', 'Verkauft']];
const FL_MIN = 50;
const FL_MAX = 130;

const leererFilter = () => ({ zimmer: [], haus: [], geschoss: [], frei: [], status: [], flaeche: [FL_MIN, FL_MAX] });

/* Deep-Links aus den Kategorie-Teasern liefern teils Strings ({ geschoss: 'DG' }),
   teils Arrays ({ frei: ['Garten'] }). Beides auf Arrays normalisieren. */
function normFilter(f) {
  const out = leererFilter();
  Object.keys(f || {}).forEach((k) => {
    if (k === 'flaeche' && Array.isArray(f.flaeche)) { out.flaeche = f.flaeche; return; }
    if (!(k in out) || k === 'flaeche') return;
    const v = f[k];
    out[k] = v == null ? [] : (Array.isArray(v) ? v.map(String) : [String(v)]);
  });
  return out;
}

/* Summe der ausgewiesenen Freiflächen einer Einheit, aus den Zahlen im
   Beschreibungstext. Keine Gewichtung, wir rechnen nur zusammen, was dasteht. */
function freiGesamt(u) {
  const treffer = String(u.freiflaecheM2 || '').match(/\d+(?:,\d+)?(?=\s*m²)/g);
  if (!treffer) return null;
  return treffer.reduce((s, t) => s + parseFloat(t.replace(',', '.')), 0).toFixed(1).replace('.', ',');
}

const SORTEN = [['top', 'Top-Nr.'], ['klein', 'Wohnfläche aufsteigend'], ['gross', 'Wohnfläche absteigend'], ['zimmer', 'Zimmer']];
function sortiere(list, key) {
  const k = list.slice();
  const nr = (u) => parseInt(String(u.top), 10) || 0;
  if (key === 'klein') k.sort((x, y) => x.flaecheNum - y.flaecheNum);
  else if (key === 'gross') k.sort((x, y) => y.flaecheNum - x.flaecheNum);
  else if (key === 'zimmer') k.sort((x, y) => x.zimmer - y.zimmer || x.haus - y.haus || nr(x) - nr(y));
  else k.sort((x, y) => x.haus - y.haus || nr(x) - nr(y));
  return k;
}

function Chip({ active, onClick, children }) {
  return (
    <button type="button" onClick={onClick} aria-pressed={active} style={{
      fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', lineHeight: 1,
      padding: '0.45rem 0.7rem', cursor: 'pointer', borderRadius: 0,
      border: '1px solid ' + (active ? 'var(--waldgruen)' : 'var(--sandstein)'),
      background: active ? 'var(--waldgruen)' : 'transparent',
      color: active ? 'var(--warmweiss)' : 'var(--umbra)',
      transition: 'background-color 180ms ease, border-color 180ms ease, color 180ms ease',
    }}>{children}</button>
  );
}

function FGruppe({ titel, children }) {
  return (
    <div style={{ paddingTop: 'var(--space-5)', marginTop: 'var(--space-5)', borderTop: '1px solid var(--sandstein-40)' }}>
      <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginBottom: 'var(--space-3)' }}>{titel}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.35rem' }}>{children}</div>
    </div>
  );
}

/* Zweigriffiger Bereichsregler: zwei übereinanderliegende Range-Felder,
   Griffe quadratisch, damit Radius 0 auch hier gilt. */
function Bereich({ titel, min, max, wert, onChange, einheit }) {
  const [a, b] = wert;
  const pct = (v) => ((v - min) / (max - min)) * 100;
  return (
    <div style={{ paddingTop: 'var(--space-5)', marginTop: 'var(--space-5)', borderTop: '1px solid var(--sandstein-40)' }}>
      <div className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginBottom: 'var(--space-3)', fontVariantNumeric: 'tabular-nums' }}>
        {titel}: {a} bis {b} {einheit}
      </div>
      <div className="m57-range">
        <span className="trk"></span>
        <span className="sel" style={{ left: pct(a) + '%', right: (100 - pct(b)) + '%' }}></span>
        <input type="range" min={min} max={max} value={a} aria-label={titel + ', von'}
          onChange={(e) => onChange([Math.min(Number(e.target.value), b), b])} />
        <input type="range" min={min} max={max} value={b} aria-label={titel + ', bis'}
          onChange={(e) => onChange([a, Math.max(Number(e.target.value), a)])} />
      </div>
    </div>
  );
}

function FilterSpalte({ f, setF, reset, aktiv }) {
  const toggle = (k, v) => setF((s) => ({ ...s, [k]: s[k].includes(v) ? s[k].filter((x) => x !== v) : s[k].concat(v) }));
  const an = (k, v) => f[k].includes(v);
  return (
    <aside className="m57-filterspalte" style={{ position: 'sticky', top: 'calc(var(--space-6) + 60px)', alignSelf: 'start' }}>
      <div style={{ border: '1px solid var(--sandstein)', background: 'var(--surface-card)', padding: 'clamp(1rem, 2vw, 1.4rem)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--space-4)' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: '1.15rem', color: 'var(--umbra)' }}>Filter</span>
          <button type="button" onClick={reset} disabled={!aktiv} style={{
            background: 'none', border: 'none', padding: 0, cursor: aktiv ? 'pointer' : 'default',
            fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)',
            color: aktiv ? 'var(--waldgruen)' : 'var(--sandstein)',
            textDecoration: aktiv ? 'underline' : 'none', textUnderlineOffset: '0.2em',
          }}>Zurücksetzen</button>
        </div>
        <FGruppe titel="Zimmer">
          {F_ZIMMER.map((z) => <Chip key={z} active={an('zimmer', z)} onClick={() => toggle('zimmer', z)}>{z} Zimmer</Chip>)}
        </FGruppe>
        <Bereich titel="Wohnfläche" min={FL_MIN} max={FL_MAX} wert={f.flaeche} einheit="m²"
          onChange={(v) => setF((s) => ({ ...s, flaeche: v }))} />
        <FGruppe titel="Haus">
          {F_HAUS.map((h) => <Chip key={h} active={an('haus', h)} onClick={() => toggle('haus', h)}>Haus {h}</Chip>)}
        </FGruppe>
        <FGruppe titel="Geschoss">
          {F_GESCHOSS.map((g) => <Chip key={g} active={an('geschoss', g)} onClick={() => toggle('geschoss', g)}>{g}</Chip>)}
        </FGruppe>
        <FGruppe titel="Freiflächen">
          {F_FREI.map((x) => <Chip key={x} active={an('frei', x)} onClick={() => toggle('frei', x)}>{x}</Chip>)}
        </FGruppe>
        <FGruppe titel="Status">
          {F_STATUS.map(([k, l]) => <Chip key={k} active={an('status', k)} onClick={() => toggle('status', k)}>{l}</Chip>)}
        </FGruppe>
      </div>
    </aside>
  );
}

function StatusTag({ status }) {
  const map = {
    verfuegbar: ['Verfügbar', 'var(--waldgruen)', 'var(--waldgruen)'],
    reserviert: ['Reserviert', 'var(--umbra-60)', 'var(--sandstein)'],
    verkauft: ['Verkauft', 'var(--sandstein)', 'var(--sandstein-40)'],
  };
  const [label, farbe, rand] = map[status] || map.verfuegbar;
  return (
    <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: farbe, border: '1px solid ' + rand, padding: '0.2rem 0.45rem', lineHeight: 1.3, whiteSpace: 'nowrap' }}>{label}</span>
  );
}

function Wert({ titel, wert, klein }) {
  return (
    <div style={{ minWidth: 0 }}>
      <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)' }}>{titel}</div>
      <div className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: klein ? 'var(--text-label)' : 'var(--text-small)', color: 'var(--umbra)', marginTop: '0.15rem', fontVariantNumeric: 'tabular-nums', lineHeight: 1.45 }}>{wert}</div>
    </div>
  );
}

function WohnungsKarte({ u, gewaehlt, onWaehlen, onOpen, onAnfrage }) {
  const href = planHref(u.plan);
  // Preise kommen aus dem Backend. Ohne gepflegten Wert bleibt es "auf Anfrage",
  // dann als Fliesstext gesetzt und nicht als Zahl in der Display-Serife.
  const hatPreis = !!u.verkaufspreis;
  const preis = hatPreis ? '€ ' + Number(u.verkaufspreis).toLocaleString('de-AT') : 'auf Anfrage';
  const gesamt = freiGesamt(u);
  const weg = u.status === 'verkauft';
  return (
    <div style={{ border: '1px solid var(--sandstein)', background: 'var(--surface-card)', padding: 'clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.6rem)', opacity: weg ? 0.62 : 1 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--space-5)' }}>
        <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'flex-start', minWidth: 0 }}>
          <input type="checkbox" checked={gewaehlt} onChange={onWaehlen} disabled={weg}
            aria-label={'Top ' + u.top + ' für eine gemeinsame Anfrage merken'}
            style={{ marginTop: '0.4rem', width: '14px', height: '14px', flex: 'none', accentColor: 'var(--waldgruen)', cursor: weg ? 'default' : 'pointer' }} />
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
              <button type="button" onClick={onOpen} className="tabular" style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-display)', fontSize: 'clamp(1.15rem, 1.9vw, 1.5rem)', color: 'var(--umbra)', fontVariantNumeric: 'tabular-nums', textAlign: 'left' }}>Top {u.top}</button>
              <StatusTag status={u.status} />
            </div>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-60)', marginTop: '0.2rem' }}>{u.zimmer} Zimmer · {u.geschoss} · Haus {u.haus}</div>
          </div>
        </div>
        <div style={{ textAlign: 'right', flex: 'none' }}>
          <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)' }}>Kaufpreis</div>
          <div className="tabular" style={{
            fontFamily: hatPreis ? 'var(--font-display)' : 'var(--font-text)',
            fontSize: hatPreis ? 'clamp(1rem, 1.7vw, 1.3rem)' : 'var(--text-small)',
            color: hatPreis ? 'var(--umbra)' : 'var(--umbra-60)',
            fontVariantNumeric: 'tabular-nums', marginTop: '0.15rem', whiteSpace: 'nowrap',
          }}>{preis}</div>
        </div>
      </div>
      <div className="m57-kartendaten" style={{ display: 'grid', gridTemplateColumns: '1fr 1.7fr 1fr auto', gap: 'var(--space-5)', alignItems: 'end', marginTop: 'var(--space-5)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--sandstein-40)' }}>
        <Wert titel="Wohnfläche" wert={u.flaeche + ' m²'} />
        <Wert titel="Freiflächen" wert={u.freiflaecheM2 || u.freiflaeche} klein />
        <Wert titel="Freifläche gesamt" wert={gesamt ? gesamt + ' m²' : '-'} />
        <div style={{ display: 'flex', gap: 'var(--space-3)', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          {href && <WBtn variant="outline" href={href} arrow={false} target="_blank" rel="noopener">Grundriss</WBtn>}
          <WBtn variant="filled" arrow={false} onClick={onAnfrage} disabled={weg}>Anfrage</WBtn>
        </div>
      </div>
    </div>
  );
}

/* Geschoss-Schnitt: beide Häuser gestapelt, Zellen flächenproportional zur
   Wohnfläche, Status-Färbung, Hover-Sync mit der Geschossliste, Klick öffnet Detail. */
function Schnitt({ units, active, onHover, onOpen }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  const floors = ['DG', '2.OG', '1.OG', 'EG'];
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setVis(true); return; }
    const el = ref.current; if (!el) return;
    let done = false;
    const show = () => { if (!done) { done = true; setVis(true); io.disconnect(); } };
    const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) show(); }, { threshold: 0.25 });
    io.observe(el);
    const t = setTimeout(() => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || 800; if (r.top < vh + 80 && r.bottom > -80) show(); }, 1000);
    return () => { clearTimeout(t); io.disconnect(); };
  }, []);
  const cell = (u, isHot) => ({
    flex: (u.flaecheNum || 60), minWidth: 0, textAlign: 'center', padding: '0.85rem 0.25rem',
    fontSize: 'var(--text-micro)', fontVariantNumeric: 'tabular-nums', cursor: 'pointer',
    borderRight: '1px solid ' + (isHot ? 'rgba(251,249,244,0.28)' : 'var(--sandstein-40)'),
    background: isHot ? 'var(--waldgruen)' : 'transparent',
    color: isHot ? 'var(--warmweiss)' : (u.status === 'verkauft' ? 'var(--sandstein)' : u.status === 'reserviert' ? 'var(--umbra-60)' : 'var(--umbra)'),
    transition: 'background-color 200ms var(--ease-reveal), color 200ms ease',
  });
  return (
    <div ref={ref}>
      <div className="m57-building" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)' }}>
        {[5, 7].map((h) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginBottom: 'var(--space-3)' }}>Schnitt Haus {h}, Geschosse gestapelt</div>
            <div style={{ borderBottom: '3px solid var(--umbra)' }}>
              {floors.map((fl, fi) => {
                const onFloor = units.filter((u) => u.haus === h && u.geschoss === fl);
                return (
                  <div key={fl} style={{ display: 'flex', border: '1px solid var(--sandstein)', borderBottom: 'none', transform: vis ? 'scaleY(1)' : 'scaleY(0)', transformOrigin: 'bottom', opacity: vis ? 1 : 0, transition: `transform 500ms var(--ease-reveal) ${fi * 90}ms, opacity 500ms ease ${fi * 90}ms` }}>
                    <div style={{ width: '3rem', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', padding: '0.6rem 0', color: 'var(--umbra-60)', borderRight: '1px solid var(--sandstein)', background: 'var(--surface-card)' }}>{fl}</div>
                    <div style={{ flex: 1, display: 'flex' }}>
                      {onFloor.length === 0
                        ? <div style={{ flex: 1, padding: '0.85rem 0', textAlign: 'center', color: 'var(--sandstein)', fontSize: 'var(--text-micro)' }}>-</div>
                        : onFloor.map((u) => {
                          const isHot = active && active.id === u.id;
                          return (
                            <div key={u.id} className="tabular" onMouseEnter={() => onHover(u)} onMouseLeave={() => onHover(null)} onClick={() => onOpen && onOpen(u)} title={'Top ' + u.top + ' · ' + u.flaeche + ' m²'} style={cell(u, isHot)}>{u.top}</div>
                          );
                        })}
                    </div>
                  </div>
                );
              })}
              <div style={{ display: 'flex', background: 'var(--umbra)', color: 'var(--warmweiss)' }}>
                <div style={{ width: '3rem', flex: 'none' }}></div>
                <div style={{ flex: 1, padding: '0.3rem 0', textAlign: 'center', fontSize: 'var(--text-micro)', letterSpacing: '0.04em' }}>Tiefgarage</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap', marginTop: 'var(--space-4)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)' }}>
        <span>Fläche der Zellen maßstäblich zur Wohnfläche</span>
        <span style={{ color: 'var(--umbra)' }}>■ verfügbar</span>
        <span style={{ color: 'var(--umbra-60)' }}>■ reserviert</span>
        <span style={{ color: 'var(--sandstein)' }}>■ verkauft</span>
      </div>
    </div>
  );
}

function BuildingView({ units, onOpen }) {
  const houses = [5, 7];
  const floors = ['DG', '2.OG', '1.OG', 'EG'];
  const [hot, setHot] = React.useState(null);
  return (
    <div>
      <div className="m57-building" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)', paddingTop: 'clamp(1rem, 2vw, 1.5rem)' }}>
      {houses.map((h) => (
        <div key={h}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-title)', color: 'var(--umbra)', margin: '0 0 var(--space-5)' }}>Haus {h}</h3>
          <div style={{ border: '1px solid var(--sandstein)' }}>
            {floors.map((fl) => {
              const onFloor = units.filter((u) => u.haus === h && u.geschoss === fl);
              return (
                <div key={fl} style={{ borderBottom: fl === 'EG' ? 'none' : '1px solid var(--sandstein)', padding: 'var(--space-4) var(--space-5)', display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
                  <span style={{ width: '3.5rem', flex: 'none', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>{fl}</span>
                  <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                    {onFloor.length === 0 ? <span style={{ color: 'var(--sandstein)', fontSize: 'var(--text-small)' }}>keine</span> : onFloor.map((u) => (
                      <button key={u.top} onClick={() => onOpen(u)} onMouseEnter={() => setHot(u)} onMouseLeave={() => setHot(null)} className="tabular"
                        style={{ cursor: 'pointer', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', fontVariantNumeric: 'tabular-nums',
                          padding: '0.35rem 0.6rem', border: '1px solid ' + (hot && hot.id === u.id ? 'var(--waldgruen)' : 'var(--sandstein)'),
                          background: hot && hot.id === u.id ? 'var(--waldgruen)' : (u.status === 'verkauft' ? 'transparent' : 'var(--surface-card)'),
                          color: hot && hot.id === u.id ? 'var(--warmweiss)' : (u.status === 'verkauft' ? 'var(--sandstein)' : 'var(--umbra)'),
                          textDecoration: u.status === 'verkauft' ? 'line-through' : 'none', transition: 'background-color 180ms ease, border-color 180ms ease, color 180ms ease' }}>
                        {u.top} · {u.flaeche} m²
                      </button>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
      </div>
    </div>
  );
}

function EmptyState({ onReset }) {
  return (
    <div style={{ padding: 'clamp(4rem, 8vw, 7rem) 0', textAlign: 'center' }}>
      <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-body)', color: 'var(--umbra-90)', margin: '0 0 var(--space-4)' }}>Keine Wohnung entspricht dieser Auswahl.</p>
      <WTextLink onClick={onReset} arrow={false}>Filter zurücksetzen</WTextLink>
    </div>
  );
}

function Finder({ initialFilter, onOpenDetail, onAnfrage, auswahl, setAuswahl }) {
  const [view, setView] = React.useState('liste');
  const [sort, setSort] = React.useState('top');
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => WStore.subscribe(force), []);
  const [f, setF] = React.useState(() => normFilter(initialFilter));
  React.useEffect(() => { if (initialFilter) setF(normFilter(initialFilter)); }, [initialFilter]);
  const reset = () => setF(leererFilter());
  const aktiv = f.zimmer.length || f.haus.length || f.geschoss.length || f.frei.length || f.status.length
    || f.flaeche[0] !== FL_MIN || f.flaeche[1] !== FL_MAX;

  const all = WStore.units();
  const units = sortiere(all.filter((u) => {
    if (f.zimmer.length && !f.zimmer.includes(String(u.zimmer))) return false;
    if (f.haus.length && !f.haus.includes(String(u.haus))) return false;
    if (f.geschoss.length && !f.geschoss.includes(u.geschoss)) return false;
    if (f.frei.length && !f.frei.includes(u.freiflaeche)) return false;
    if (f.status.length && !f.status.includes(u.status)) return false;
    if (u.flaecheNum < f.flaeche[0] || u.flaecheNum > f.flaeche[1]) return false;
    return true;
  }), sort);
  const verfuegbar = all.filter((u) => u.status === 'verfuegbar').length;
  const listKey = JSON.stringify(f) + view + sort;
  const merken = (u) => setAuswahl((s) => s.includes(u.top) ? s.filter((t) => t !== u.top) : s.concat(u.top));

  return (
    <div id="finder">
      <style>{`
        @keyframes m57rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .m57-rowin { animation: none !important; } }
        .m57-range { position: relative; height: 24px; }
        .m57-range .trk { position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: var(--sandstein); }
        .m57-range .sel { position: absolute; top: 11px; height: 1px; background: var(--umbra); }
        .m57-range input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 24px; margin: 0;
          -webkit-appearance: none; appearance: none; background: none; pointer-events: none; }
        .m57-range input[type=range]:focus { outline: none; }
        .m57-range input[type=range]::-webkit-slider-runnable-track { height: 24px; background: none; }
        .m57-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto;
          width: 11px; height: 11px; margin-top: 6px; border-radius: 0; background: var(--waldgruen); border: none; cursor: ew-resize; }
        .m57-range input[type=range]::-moz-range-track { height: 24px; background: none; }
        .m57-range input[type=range]::-moz-range-thumb { pointer-events: auto;
          width: 11px; height: 11px; border-radius: 0; background: var(--waldgruen); border: none; cursor: ew-resize; }
        @media (max-width: 900px) {
          .m57-finder { grid-template-columns: 1fr !important; }
          .m57-filterspalte { position: static !important; }
        }
        @media (max-width: 640px) {
          .m57-kartendaten { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
        <WReveal>
          <div style={{ maxWidth: '46ch' }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3vw, 2.75rem)', letterSpacing: '-0.015em', color: 'var(--umbra)', margin: 0 }}>Wohnungen finden und anfragen</h2>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-lead)', lineHeight: 1.6, color: 'var(--umbra-90)', margin: 'var(--space-4) 0 0' }}>
              Wählen Sie Größe, Zimmer und Freifläche. Wir senden Ihnen Verfügbarkeit, Grundriss und Unterlagen persönlich zu.
            </p>
            <p className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', margin: 'var(--space-3) 0 0', fontVariantNumeric: 'tabular-nums' }}>
              Noch {verfuegbar} von 31 Wohnungen verfügbar.
            </p>
          </div>
        </WReveal>

        <div className="m57-finder" style={{ display: 'grid', gridTemplateColumns: 'clamp(210px, 23%, 270px) 1fr', gap: 'clamp(1.5rem, 3vw, 2.75rem)', alignItems: 'start', marginTop: 'clamp(2rem, 4vw, 3rem)' }}>
          <FilterSpalte f={f} setF={setF} reset={reset} aktiv={!!aktiv} />

          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-5)', flexWrap: 'wrap', paddingBottom: 'var(--space-4)', borderBottom: '1px solid var(--sandstein)' }}>
              <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra)', fontVariantNumeric: 'tabular-nums' }}>
                {units.length} {units.length === 1 ? 'Wohnung' : 'Wohnungen'} gefunden
              </span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
                <ViewSwitch view={view} setView={setView} />
                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
                  <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>Sortierung</span>
                  <select value={sort} onChange={(e) => setSort(e.target.value)} style={{
                    fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra)',
                    background: 'var(--surface-card)', border: '1px solid var(--sandstein)', borderRadius: 0,
                    padding: '0.4rem 0.6rem', cursor: 'pointer',
                  }}>
                    {SORTEN.map(([k, l]) => <option key={k} value={k}>{l}</option>)}
                  </select>
                </label>
              </div>
            </div>

            {units.length === 0 ? (
              <EmptyState onReset={reset} />
            ) : view === 'liste' ? (
              <div key={listKey} style={{ display: 'grid', gap: 'var(--space-4)', marginTop: 'var(--space-5)' }}>
                {units.map((u, i) => (
                  <div key={u.id} className="m57-rowin" style={{ animation: 'm57rowIn 350ms var(--ease-reveal) both', animationDelay: `${Math.min(i, 8) * 40}ms` }}>
                    <WohnungsKarte u={u} gewaehlt={auswahl.includes(u.top)} onWaehlen={() => merken(u)}
                      onOpen={() => onOpenDetail(u)} onAnfrage={() => onAnfrage(u)} />
                  </div>
                ))}
              </div>
            ) : (
              <div key={listKey} className="m57-rowin" style={{ animation: 'm57rowIn 350ms var(--ease-reveal) both', marginTop: 'var(--space-6)' }}>
                <BuildingView units={units} onOpen={onOpenDetail} />
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

/* Wohnraeume - die Innenaufnahmen aus den Verkaufsunterlagen als stille
   Auswahl: links die Raeume in grosser Serife, rechts das Bild, das mit der
   Auswahl wechselt (Hover am Desktop, Tap am Telefon). Auf schmalen Schirmen
   steht das Bild oben und bleibt beim Scrollen der Liste stehen. */
function Wohnraeume() {
  const raeume = [
    { label: 'Wohnraum mit Dachterrasse', einheit: 'Haus 5, Top 17+18', img: 'interior-wohnen-terrasse.webp' },
    { label: 'Wohnraum mit Garten', einheit: 'Haus 7, Top 2+3', img: 'interior-wohnen-garten.webp' },
    { label: 'Schlafzimmer', einheit: 'Haus 7, Top 2+3', img: 'interior-schlafen.webp' },
    { label: 'Wohnraum mit Balkon', einheit: 'Haus 7, Top 12', img: 'interior-wohnen-balkon.webp' },
    { label: 'Badezimmer', einheit: 'Haus 7, Top 13', img: 'interior-bad.webp' },
  ];
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
      <style>{`
        .m57-wohnraeume { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
        .m57-wohnraeume-bild { position: sticky; top: 96px; }
        @media (max-width: 900px) {
          .m57-wohnraeume { grid-template-columns: 1fr; gap: 1.5rem; }
          .m57-wohnraeume-bild { order: -1; }
        }
      `}</style>
      <h2 style={{ overflow: 'hidden', margin: '0 0 clamp(1.75rem, 3vw, 2.5rem)', paddingBottom: '0.1em' }}>
        <WLineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.5rem, 2.4vw, 2.25rem)', letterSpacing: '-0.015em', color: 'var(--umbra)' }}>Wohnräume</WLineMask>
      </h2>
      <div className="m57-wohnraeume">
        <div style={{ borderTop: '1px solid var(--sandstein)' }}>
          {raeume.map((r, i) => {
            const on = active === i;
            return (
              <div key={r.img} onMouseEnter={() => setActive(i)} onClick={() => setActive(i)}
                style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-5)', padding: 'clamp(0.7rem, 1.4vw, 1.1rem) 0', borderBottom: '1px solid var(--sandstein-40)', cursor: 'pointer' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.35rem, 2.4vw, 2.1rem)', lineHeight: 1.1, color: on ? 'var(--umbra)' : 'var(--sandstein)', transition: 'color 300ms ease' }}>{r.label}</span>
                <span className="tabular" style={{ flex: 'none', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: on ? 'var(--umbra-90)' : 'var(--sandstein)', fontVariantNumeric: 'tabular-nums', transition: 'color 300ms ease', textAlign: 'right' }}>{r.einheit}</span>
              </div>
            );
          })}
        </div>
        <div className="m57-wohnraeume-bild">
          <div style={{ position: 'relative', aspectRatio: '4 / 3', border: '1px solid var(--sandstein)', overflow: 'hidden', background: 'var(--warmweiss)' }}>
            {raeume.map((r, i) => (
              <img key={r.img} src={WIMG + r.img} alt={r.label + ', ' + r.einheit}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: active === i ? 1 : 0, transition: 'opacity 500ms var(--ease-reveal)' }} />
            ))}
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 'var(--space-5)', background: 'linear-gradient(to top, rgba(24,30,24,0.55), rgba(24,30,24,0))', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--space-4)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.1rem, 1.6vw, 1.4rem)', color: 'var(--warmweiss)' }}>{raeume[active].label}</span>
              <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'rgba(251,249,244,0.85)', fontVariantNumeric: 'tabular-nums' }}>{raeume[active].einheit}</span>
            </div>
          </div>
        </div>
      </div>
      <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', margin: 'var(--space-4) 0 0' }}>Visualisierungen, Möblierung beispielhaft.</p>
    </section>
  );
}

/* Finder-Zeile: ein leiser Absprung in den Wohnungsfinder zwischen den
   Kapiteln, immer mit einem Satz, der sagt, was dort wartet. */
function FinderZeile({ text, label = 'Zum Wohnungsfinder', onFinder }) {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
      <WReveal>
        <div style={{ borderTop: '1px solid var(--sandstein)', paddingTop: 'var(--space-6)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-5)' }}>
          <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.15rem, 1.7vw, 1.45rem)', lineHeight: 1.35, color: 'var(--umbra)', margin: 0, maxWidth: '34ch' }}>{text}</p>
          <WBtn variant="filled" onClick={() => onFinder()}>{label}</WBtn>
        </div>
      </WReveal>
    </section>
  );
}

function WohnungenScreen({ onOpenDetail, onVormerkung, initialFinder }) {
  const [finderFilter, setFinderFilter] = React.useState(initialFinder || null);
  // Mehrfachauswahl aus dem Finder. Die gemerkten Tops laufen in das
  // Vormerkungs-Formular am Seitenende, damit eine Anfrage alle abdeckt.
  const [auswahl, setAuswahl] = React.useState([]);
  const zurFormular = () => {
    const el = document.getElementById('vormerkung');
    const sc = window.__m57Scroller;
    if (el && sc) sc.scrollTo({ top: el.offsetTop - 40, behavior: 'smooth' });
  };
  const toFinder = (filter) => {
    setFinderFilter(filter || {});
    const el = document.getElementById('finder');
    const sc = window.__m57Scroller;
    if (el && sc) sc.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };
  React.useEffect(() => {
    if (initialFinder) { const t = setTimeout(() => toFinder(initialFinder), 350); return () => clearTimeout(t); }
  }, []);
  return (
    <div>
      <WohnungenKopf />
      <FullBleed img={WIMG + 'interior-wohnen-terrasse.webp'} alt="Wohnraum mit Terrasse und Blick über Wien" height="66vh">
        <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.5rem, 2.6vw, 2.25rem)', color: 'var(--warmweiss)', margin: 0 }}>
          <WWordReveal text="Räume, die dem *Licht* folgen." color="var(--warmweiss)" dimColor="rgba(251,249,244,0.35)" />
        </p>
      </FullBleed>
      <div style={{ paddingTop: WSECTION }}></div>
      <WohnungenTypen onFinder={toFinder} />
      <div style={{ paddingTop: WSECTION }}></div>
      <Wohnraeume />
      <div style={{ paddingTop: WSECTION }}></div>
      <FinderZeile text="Alle 31 Wohnungen im Überblick, nach Zimmern, Geschoss und Freifläche." onFinder={() => toFinder()} />
      <div style={{ paddingTop: WSECTION }}></div>
      <MaterialCollage />
      <div style={{ paddingTop: WSECTION }}></div>
      {window.Ausstattung ? <window.Ausstattung /> : null}
      <div style={{ paddingTop: WSECTION }}></div>
      <FinderZeile text="Welche Wohnung passt zu Ihnen? Der Finder zeigt, was noch frei ist." onFinder={() => toFinder()} />
      <div style={{ paddingTop: WSECTION }}></div>
      <BesonderheitenDuo onFinder={toFinder} />
      <div style={{ paddingTop: WSECTION }}></div>
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
        <WBtn variant="filled" onClick={() => window.__m57ToFinder && window.__m57ToFinder()}>Wohnung anfragen</WBtn>
      </section>
      <div style={{ paddingTop: WSECTION }}></div>
      <Finder initialFilter={finderFilter} onOpenDetail={onOpenDetail} onAnfrage={onVormerkung}
        auswahl={auswahl} setAuswahl={setAuswahl} />
      {auswahl.length > 0 && (
        <div style={{ position: 'sticky', bottom: 0, zIndex: 60, background: 'var(--warmweiss)', borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-6)' }}>
          <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-4) var(--page-inset-lg)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-5)', flexWrap: 'wrap' }}>
            <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra)', fontVariantNumeric: 'tabular-nums' }}>
              {auswahl.length} {auswahl.length === 1 ? 'Wohnung' : 'Wohnungen'} gemerkt: Top {auswahl.join(', ')}
            </span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
              <button type="button" onClick={() => setAuswahl([])} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', textDecoration: 'underline', textUnderlineOffset: '0.2em' }}>Auswahl leeren</button>
              <WBtn variant="filled" onClick={zurFormular}>Auswahl anfragen</WBtn>
            </div>
          </div>
        </div>
      )}
      <div style={{ paddingTop: WSECTION }}></div>
      {window.FAQ ? <window.FAQ /> : null}
      <div style={{ paddingTop: WSECTION }}></div>
      <VormerkungSection prefillTop={auswahl.length ? auswahl.join(', ') : undefined} />
    </div>
  );
}

function DetailOverlay({ unit, onClose, onAnfrage }) {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (unit) {
      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce) { setShown(true); return; }
      const t = setTimeout(() => setShown(true), 30);
      return () => clearTimeout(t);
    }
    setShown(false);
  }, [unit]);
  const close = () => { setShown(false); setTimeout(onClose, 320); };
  if (!unit) return null;
  const href = planHref(unit.plan);
  const preis = unit.verkaufspreis ? Number(unit.verkaufspreis).toLocaleString('de-AT') + ' €' : 'auf Anfrage';
  const facts = [
    ['Wohnfläche', `ca. ${unit.flaeche} m²`],
    ['Zimmer', `${unit.zimmer}`],
    ['Freifläche', unit.freiflaecheM2 || unit.freiflaeche],
    ['Geschoss', unit.geschoss],
    ['Haus', `Haus ${unit.haus}`],
    ['Stellplatz', 'optional, Tiefgarage'],
    ['Status', window.M57_STATUS_LABEL[unit.status]],
    ['Preis', preis],
  ];
  return (
    <div onClick={close} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(35,42,32,0.45)', display: 'flex', justifyContent: 'flex-end', opacity: shown ? 1 : 0, transition: 'opacity 320ms var(--ease-reveal)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 'min(760px, 100%)', height: '100%', overflowY: 'auto', background: 'var(--surface-page)', transform: shown ? 'none' : 'translateX(40px)', opacity: shown ? 1 : 0, transition: 'transform 420ms var(--ease-reveal), opacity 320ms var(--ease-reveal)' }}>
        <div style={{ position: 'sticky', top: 0, zIndex: 2, background: 'var(--surface-page)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 'var(--space-6) var(--space-8)', borderBottom: '1px solid var(--sandstein)' }}>
          <span className="tabular" style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-title)', color: 'var(--umbra)' }}>Haus {unit.haus}, Top {unit.top}</span>
          <button onClick={close} aria-label="Schließen" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.4rem', color: 'var(--umbra-60)', lineHeight: 1 }}>✕</button>
        </div>
        <div style={{ padding: 'var(--space-8)' }}>
          {href ? (
            <div style={{ marginBottom: 'var(--space-8)' }}>
              <window.PlanView src={href} label={'Top ' + unit.top} />
            </div>
          ) : (
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--sandstein)', aspectRatio: '4 / 3', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', color: 'var(--umbra-60)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', marginBottom: 'var(--space-8)', padding: 'var(--space-6)' }}>Grundriss Top {unit.top}</div>
          )}
          <div style={{ marginBottom: 'var(--space-6)' }}>
            {facts.map((row) => (
              <div key={row[0]} style={{ display: 'flex', justifyContent: 'space-between', padding: 'var(--space-3) 0', borderBottom: '1px solid var(--sandstein)' }}>
                <span style={{ color: 'var(--umbra-60)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)' }}>{row[0]}</span>
                <span className="tabular" style={{ color: 'var(--umbra)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', fontVariantNumeric: 'tabular-nums' }}>{row[1]}</span>
              </div>
            ))}
          </div>
          <p style={{ color: 'var(--umbra-90)', fontSize: 'var(--text-small)', lineHeight: 1.7, margin: '0 0 var(--space-6)' }}>Eichenparkett von Weitzer, Kühlung über Bauteilaktivierung, KNX-Smart-Home.</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
            <WBtn variant="filled" onClick={() => onAnfrage(unit)}>Diese Wohnung anfragen</WBtn>
            {href && <a href={href} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--waldgruen)', textDecoration: 'underline', textUnderlineOffset: '0.2em' }}>Verkaufsplan als PDF ↗</a>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WohnungenScreen, DetailOverlay });