/* Vierkant Düsseldorf (Musterobjekt): Marke Brückweg Real Estate (fiktiv), Schriften Geist und Geist Mono (SIL OFL, liegen in fonts/). */
@font-face{font-family:Geist;src:url("fonts/geist-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#0d1720;--ink2:#15232e;--paper:#eef1f2;--paper2:#e3e8ea;--white:#fbfcfc;--muted:#5b6a72;--line:#cfd6d9;
  --acc:#57d3c0;--acc-d:#127a6c;--acc-ink:#06201c;--acc-soft:#bfeee6;--warn:#f2a541;--ok:#127a6c;
  --display:Geist,"Helvetica Neue",Arial,sans-serif;--sans:Geist,"Helvetica Neue",Arial,sans-serif;--numf:"Geist Mono",ui-monospace,Menlo,monospace;
  --head-w:560;--head-ls:-.045em;--title-ls:-.06em;--num-w:420;--gutter:clamp(20px,5vw,84px);--xp-head:72px;--ease:cubic-bezier(.22,.7,.3,1);
  --r-card:6px;--r-chip:6px;--r-btn:4px;--logo-h:30px}
@media(max-width:700px){:root{--xp-head:62px;--logo-h:26px}}
body{font-size:16px}
.xp-kpi strong{font-size:clamp(34px,3.9vw,64px);letter-spacing:-.04em}
.xp-big{letter-spacing:-.06em}
.xp-section h2{font-size:clamp(38px,4.8vw,80px)}
.xp-split h2,.xp-head2 h2{font-size:clamp(36px,4.2vw,68px)}
@media(max-width:700px){.xp-lead{font-size:15px}.xp-section h2,.xp-split h2,.xp-head2 h2{font-size:clamp(34px,10vw,48px)}}

/* Eröffnung: ein ruhiges Bild (Bewegung im Kern); der Belegungsplan steht im Kapitel Vermietung */
.xp-hero-media img{object-position:46% 60%}
.xp-hero-shade{background:linear-gradient(90deg,#0d1720e0 0%,#0d1720a0 34%,#0d172014 64%,transparent),linear-gradient(0deg,#0d1720f2 0%,#0d172070 30%,transparent 56%),linear-gradient(180deg,#0d1720a0,transparent 26%)}

/* Vermietung: Belegungsplan im Zeitraffer */
.bv-tm{background:radial-gradient(110% 80% at 85% 0%,#15303a 0%,var(--ink) 58%)}
.bv-tm-box{border:1px solid #ffffff1f;border-radius:var(--r-card);background:linear-gradient(180deg,#ffffff0a,#ffffff04);padding:clamp(16px,2.4vw,28px)}
.bv-tm-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-bottom:22px}
.bv-year{flex:1 1 420px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#ffffffa0}
.bv-year output{font-size:22px;letter-spacing:-.02em;color:#fff;min-width:88px;text-transform:none}
.bv-year input{width:100%;accent-color:var(--acc);height:28px}
.bv-switch{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;user-select:none}
.bv-switch input{position:absolute;opacity:0;width:1px;height:1px}
.bv-switch span{width:40px;height:22px;border-radius:11px;background:#ffffff26;position:relative;transition:background .2s}
.bv-switch span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.bv-switch input:checked+span{background:var(--acc)}
.bv-switch input:checked+span::after{transform:translateX(18px)}
.bv-switch input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.bv-tm-grid{display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:start}
.bv-prow{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:5px}
.bv-prow>span{font:500 11px/1 var(--numf);color:#ffffff99;text-align:right}
.bv-prow>div{display:flex;gap:3px;height:46px}
.bv-cell{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 calc(var(--w) - 3px);min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 10px;border-radius:3px;transition:background .45s var(--ease),color .3s,box-shadow .2s,transform .2s}
.bv-cell b{font-size:14px;font-weight:600}
.bv-cell small{font:400 11px/1.3 var(--numf);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-cell:hover{transform:translateY(-1px)}
.bv-cell:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bv-cell.is-sel{box-shadow:0 0 0 2px #fff}
.bv-cell.k3{background:var(--acc);color:var(--acc-ink)}.bv-cell.k2{background:#2f8f86;color:#eafffb}.bv-cell.k1{background:var(--warn);color:#2a1800}
.bv-cell.vac{background:repeating-linear-gradient(135deg,#ffffff24 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 1px #ffffff55;color:#fff}
.bv-cell.exp{background:repeating-linear-gradient(135deg,#f2a54133 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 1px #f2a54199;color:#ffd9a0}
.bv-cell.exp.is-sel{box-shadow:inset 0 0 0 1px #f2a54199,0 0 0 2px #fff}
.bv-read{margin:0;display:grid;gap:0;border-top:1px solid #ffffff22}
.bv-read div{padding:14px 0;border-bottom:1px solid #ffffff22}
.bv-read dt{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#ffffff90}
.bv-read dd{margin:6px 0 0;font-size:30px;letter-spacing:-.03em;transition:color .3s}
.bv-read dd.down{color:var(--warn)}
.bv-card{margin-top:18px;padding:16px 18px;border-radius:var(--r-card);background:#ffffff0d;border:1px solid #ffffff1a;min-height:72px;font-size:15px;color:#ffffffd0}
.bv-card b{color:#fff}
.bv-card .num{font-size:14px}
.bv-card dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 18px;margin:10px 0 0}
.bv-card dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ffffff80}
.bv-card dd{margin:2px 0 0}

/* Mieterliste */
.bv-table td:first-child b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:3px;background:var(--ink);color:var(--acc);font:600 12px/1 var(--numf)}
.bv-table tr.is-vac td{color:var(--muted);font-style:normal;background:repeating-linear-gradient(135deg,#0d17200a 0 5px,transparent 5px 10px)}
.bv-table td.r,.bv-table th.r{font-family:var(--numf);font-size:13px}

/* Kaufpreis */
.bv-toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);margin-bottom:26px}
.bv-toggle button{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:background .25s,color .25s}
.bv-toggle button[aria-pressed=true]{background:var(--ink);color:#fff}
.bv-toggle button:focus-visible{outline:2px solid var(--acc-d);outline-offset:2px}
.bv-pgrid{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--ink)}
.bv-pgrid div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.bv-pgrid div.wide{grid-column:span 2}
.bv-pgrid dt{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bv-pgrid dd{margin:8px 0 0;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;transition:opacity .25s,transform .25s}
.bv-pgrid dd.flip{opacity:0;transform:translateY(8px)}
.bv-deal{margin-top:18px;font-size:14px;color:var(--muted);max-width:820px}
.bv-bridge{margin-top:40px;display:grid;gap:8px}
.bv-bridge-t{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bv-br{display:grid;grid-template-columns:minmax(150px,300px) 1fr 110px;align-items:center;gap:14px;font-size:14px}
.bv-br i{display:block;height:14px;border-radius:2px;background:var(--acc-d);width:var(--w);min-width:3px}
.bv-br:nth-child(2) i{background:var(--ink)}
.bv-br b{font-weight:500;text-align:right;font-size:14px}
.bv-br.sum{border-top:1px solid var(--ink);padding-top:10px;font-weight:600}
.bv-br.sum i{visibility:hidden}
.xp-fx .bv-br i{opacity:0;transition:opacity .9s var(--ease) var(--d,0ms)}
.xp-fx .bv-bridge.is-in .bv-br i{opacity:1}

/* Nebenkosten */
.bv-nkbar{margin-top:34px;max-width:560px}
.bv-nkbar-in{display:flex;height:18px;border-radius:3px;overflow:hidden;background:var(--line)}
.bv-nkbar-in span{width:var(--w)}
.bv-nkbar-in .rec,.bv-nkbar i.rec{background:var(--acc-d)}
.bv-nkbar-in .own,.bv-nkbar i.own{background:var(--warn)}
.xp-fx .bv-nkbar-in span{opacity:0;transition:opacity .9s var(--ease)}
.xp-fx .bv-nkbar-in .own{transition-delay:.25s}
.xp-fx .bv-nkbar.is-in .bv-nkbar-in span{opacity:1}
.bv-nkbar p{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-size:14px;color:var(--muted)}
.bv-nkbar p b{color:var(--ink);font-weight:500;margin-left:4px}
.bv-nkbar p i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.bv-nklist{background:var(--white);border-radius:var(--r-card);padding:clamp(18px,2.6vw,32px);box-shadow:0 30px 60px -44px #0d172066}
.bv-nklist-t{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.bv-nklist ul{list-style:none;margin:0;padding:0}
.bv-nklist li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.bv-nklist li b{font-weight:400}
.bv-nksum{display:flex;justify-content:space-between;padding-top:12px;font-weight:600;font-size:17px}

/* Gebäude */
.bv-bau-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:start}
.bv-bau-img{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5}
.bv-bau-img img{width:100%;height:100%;object-fit:cover}
.bv-facts{margin-top:0}
.bv-tech{list-style:none;margin:28px 0 0;padding:0}
.bv-tech li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.bv-tech li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:2px;background:var(--acc-d)}

/* Energie und ESG */
.bv-esg{background:radial-gradient(120% 90% at 10% 100%,#11303a 0%,var(--ink) 60%)}
.bv-esg-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.bv-crrem{margin:0}
.bv-crrem-svg{width:100%;height:auto;display:block}
.bv-crrem-svg .g{stroke:#ffffff14}
.bv-crrem-svg .t{fill:#ffffff80;font:11px var(--numf)}
.bv-crrem-svg .path{fill:none;stroke:#ffffff8c;stroke-width:2;stroke-dasharray:var(--len);stroke-linecap:round}
.bv-crrem-svg .now{stroke:var(--warn);stroke-width:3}
.bv-crrem-svg .after{stroke:var(--acc);stroke-width:3;stroke-dasharray:6 5}
.bv-crrem-svg .dot-now{fill:var(--warn)}
.bv-crrem-svg .dot-after{fill:var(--acc)}
.bv-crrem-svg .l{fill:var(--warn);font:600 12px var(--numf)}
.bv-crrem-svg .l2{fill:var(--acc);font:600 12px var(--numf)}
.xp-fx .bv-crrem-svg .now,.xp-fx .bv-crrem-svg .after,.xp-fx .bv-crrem-svg circle,.xp-fx .bv-crrem-svg .l,.xp-fx .bv-crrem-svg .l2{opacity:0;transition:opacity .8s var(--ease) .3s}
.xp-fx .bv-crrem.is-in .now,.xp-fx .bv-crrem.is-in .after,.xp-fx .bv-crrem.is-in circle,.xp-fx .bv-crrem.is-in .l,.xp-fx .bv-crrem.is-in .l2{opacity:1}
.bv-crrem figcaption{font-size:12px;color:#ffffff80;margin-top:10px}
.bv-esg-list{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 36px}
.bv-esg-list li{padding:16px 0;border-top:1px solid #ffffff22;color:#ffffffc8;font-size:15px;line-height:1.55}
.bv-esg-list b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}

/* Mobil */
@media(max-width:960px){
  .bv-tm-grid,.bv-bau-grid,.bv-esg-grid{grid-template-columns:1fr}
  .bv-read{grid-template-columns:1fr 1fr}
  .bv-read div:nth-child(odd){padding-right:12px}
  .bv-pgrid{grid-template-columns:1fr 1fr}
  .bv-bau-img{aspect-ratio:16/10}
  .bv-esg-list{grid-template-columns:1fr}
}
@media(max-width:700px){
  .bv-prow{grid-template-columns:40px minmax(0,1fr);gap:6px}
  .bv-prow>div{height:46px}
  .bv-cell{padding:0 6px}
  .bv-cell small{font-size:9.5px}
  .bv-read dd{font-size:22px}
  .bv-year{grid-template-columns:auto 1fr;flex-basis:100%}
  .bv-year input{grid-column:1/-1}
  .bv-br{grid-template-columns:1fr 92px;gap:4px 10px}
  .bv-br i{grid-column:1/-1;grid-row:2}
  .bv-pgrid dd{font-size:24px}
  .bv-pgrid div.wide{grid-column:span 2}
}