/* Layout: Vollbild-Schacht (WebGL) hinten, je Stockwerk eine Glasscheibe mit Text, rechts die Stockwerksanzeige. */
@font-face{font-family:Poppins;font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/poppins-light.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/poppins-regular.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/poppins-medium.woff) format("woff")}
:root{
  --bg:#0a0c0d;          /* Schachtdunkel, leicht kuehl */
  --ink:#e8edee;         /* Schrift auf Dunkel */
  --mute:#97a3a6;        /* Nebentext */
  --line:rgba(232,237,238,.16);
  --teal:#2E7A80;        /* Hausfarbe */
  --teal-lit:#6cc3c9;    /* Hausfarbe als Licht (Ziffern, Fokus) */
  --glass:rgba(9,12,13,.58);
  --f:Poppins,"Helvetica Neue",Arial,sans-serif;
  --s-0:.75rem; --s-1:.875rem; --s-2:1rem; --s-3:1.25rem; --s-4:clamp(1.6rem,3.2vw,2.4rem); --s-5:clamp(2.1rem,5.6vw,4.2rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s-2)/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--teal);text-underline-offset:.22em}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal-lit);outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-size:var(--s-0);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Leinwand ---------- */
#shaft{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:var(--bg)}
.static #shaft{display:none}

/* ---------- Kopf ---------- */
.bar{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + 1.1rem) clamp(1rem,3vw,2.2rem) 0;pointer-events:none}
.bar>*{pointer-events:auto}
.bar__mark{display:block;width:7.5rem;opacity:calc(1 - var(--hero-cue,1));transition:opacity .3s}
.bar__mark svg{display:block;width:100%;height:auto}
.bar__draft{font-size:var(--s-0);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:.2rem .55rem}

/* ---------- Stockwerksanzeige ---------- */
.lift{position:fixed;z-index:6;right:clamp(1rem,3vw,2.2rem);top:50%;transform:translateY(-50%);display:grid;justify-items:end;gap:1.1rem}
.lift__floors{background:rgba(5,6,6,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.6rem .9rem!important;border:1px solid rgba(255,255,255,.06)}
.lift__display{width:4.4rem;height:5.6rem;display:grid;place-items:center;align-content:center;gap:.2rem;
  background:#050606;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 4px #0c0e0f, 0 0 0 1px #000}
#lift-digit{font-weight:300;font-size:2.9rem;line-height:1;color:var(--teal-lit);text-shadow:0 0 14px rgba(46,122,128,.9);font-variant-numeric:tabular-nums}
#lift-arrow{width:0;height:0;border-left:.38rem solid transparent;border-right:.38rem solid transparent;border-bottom:.5rem solid var(--teal-lit);opacity:.18;transition:opacity .2s,transform .2s}
#lift-arrow[data-dir="up"]{opacity:1}
#lift-arrow[data-dir="down"]{opacity:1;transform:rotate(180deg)}
.lift__floors{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;justify-items:end}
.lift__floors a,.lift__floors span.off{text-shadow:0 1px 10px rgba(0,0,0,.8);display:flex;align-items:baseline;gap:.75rem;padding:.25rem 0;font-size:var(--s-1);color:var(--mute);text-decoration:none}
.lift__floors .n{font-variant-numeric:tabular-nums;width:1ch;text-align:right;color:var(--ink);opacity:.55}
.lift__floors a:hover,.lift__floors a.is-here{color:var(--ink)}
.lift__floors a.is-here .n{color:var(--teal-lit);opacity:1}
.lift__floors span.off{opacity:.38}

/* ---------- Stockwerke ---------- */
.floor{position:relative;z-index:2}
.ride .floor{position:fixed;inset:0;will-change:opacity,transform}
#travel{display:none}
.ride #travel{display:block;position:relative;z-index:1}

/* Start */
.hero{min-height:100vh;min-height:100svh}
.hero__foot{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(1rem,3vw,2.2rem) calc(env(safe-area-inset-bottom,0px) + clamp(1.2rem,4vh,2.4rem));
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.5rem 3rem}
.hero__lead{margin:0;max-width:30rem;font-size:var(--s-3);font-weight:300;line-height:1.45;text-wrap:balance;text-shadow:0 1px 18px rgba(0,0,0,.65)}
.hero__call{margin:0;display:grid;gap:.15rem;justify-items:end;text-align:right}
.hero__call a{text-decoration:none;font-weight:300;font-size:var(--s-4);letter-spacing:.01em;line-height:1.1;text-shadow:0 1px 18px rgba(0,0,0,.65)}
.hero__cue{grid-column:1/-1;margin:0;display:flex;align-items:center;gap:.8rem;opacity:var(--hero-cue,1)}
.hero__cue::before{content:"";width:2.4rem;height:1px;background:var(--teal-lit)}
.hero__logo{display:none}
.static .hero__logo{display:block;position:absolute;left:50%;top:44%;width:min(78vw,46rem);transform:translate(-50%,-50%)}
.static .hero__logo svg{width:100%;height:auto;display:block}

/* Glasscheibe */
.pane{position:absolute;left:clamp(1rem,5vw,5rem);top:50%;transform:translateY(-50%);width:min(37rem,calc(100% - 2rem));
  background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  border-top:1px solid rgba(232,237,238,.28);padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1.3rem}
.pane h2{margin:0;font-weight:300;font-size:var(--s-4);line-height:1.15;letter-spacing:-.005em;text-wrap:balance}
.pane p{margin:0;max-width:62ch;color:var(--ink)}
.phone{display:grid;gap:.25rem}
.phone a{font-weight:300;font-size:clamp(2rem,4.2vw,3.3rem);line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.phone a:hover{color:var(--teal-lit)}
.spec{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;border-top:1px solid var(--line)}
.spec>div{display:contents}
.spec dt,.spec dd{margin:0;padding:.62rem 0;border-bottom:1px solid var(--line);font-size:var(--s-1)}
.spec dt{color:var(--mute);padding-right:1rem}
.spec dd{text-align:right;font-variant-numeric:tabular-nums}
.spec .em dd{color:var(--teal-lit)}
.fine{font-size:var(--s-0);color:var(--mute);line-height:1.55}

/* ---------- Fuss ---------- */
.foot{position:relative;z-index:3;padding:2rem clamp(1rem,3vw,2.2rem) calc(env(safe-area-inset-bottom,0px) + 2rem);display:flex;flex-wrap:wrap;gap:.5rem 2rem;font-size:var(--s-0);color:var(--mute);background:var(--bg);border-top:1px solid var(--line)}
.foot a{color:var(--mute)}

/* ---------- Statische Fassung (ohne WebGL / reduzierte Bewegung) ---------- */
.static .floor:not(.hero),.still .floor:not(.hero){min-height:auto;padding:3rem clamp(1rem,6vw,5.5rem)}
.static .pane,.still .pane{position:relative;left:auto;top:auto;transform:none}
.still #shaft{position:absolute;height:100vh}
.static .lift,.still .lift,.static .hero__cue,.still .hero__cue{display:none}
.static .bar__mark,.still .bar__mark{opacity:0}

/* ---------- Telefon ---------- */
@media (max-width:760px){
  .lift{top:calc(env(safe-area-inset-top,0px) + .8rem);transform:none;right:1rem}
  .lift__display{width:3.3rem;height:4.1rem}
  #lift-digit{font-size:2.1rem}
  .lift__floors{display:none}
  .bar{padding-right:5.5rem}
  .hero__foot{grid-template-columns:1fr;gap:1.2rem}
  .hero__call{justify-items:start;text-align:left}
  .pane{left:1rem;right:1rem;width:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);transform:none;max-height:76vh;overflow:auto;gap:1rem}
  .static .pane,.still .pane{left:auto;right:auto;bottom:auto}
  .spec{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .pane .fine{font-size:var(--s-0)}
  .spec dt,.spec dd{font-size:.8125rem;padding:.42rem 0}
  .spec dt{padding-right:.8rem}
  .pane{padding:1.15rem 1.1rem 1.2rem;gap:.8rem}
  .pane p{font-size:.9375rem;line-height:1.5}
  .pane h2{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Rechtstexte (eigene Seiten, ohne 3D) ---------- */
.doc{max-width:46rem;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 5.5rem) clamp(1rem,4vw,2rem) calc(env(safe-area-inset-bottom,0px) + 4rem)}
.doc__mark{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1.1rem);left:clamp(1rem,3vw,2.2rem);width:7.5rem;display:block}
.doc__mark svg{width:100%;height:auto;display:block}
.doc h1{font-weight:300;font-size:var(--s-4);line-height:1.15;margin:0 0 2rem;text-wrap:balance}
.doc h2{font-weight:500;font-size:var(--s-0);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:2.6rem 0 .8rem}
.doc p,.doc li{max-width:65ch}
.doc p{margin:0 0 1rem}
.doc ul{padding-left:1.1rem;margin:0 0 1rem}
.doc .spec{margin-bottom:1rem}
.doc .spec dd{text-align:left}
.doc .spec{grid-template-columns:minmax(9rem,14rem) minmax(0,1fr)}
.open{color:#e0b25c}
.doc__back{display:inline-block;margin-top:3rem;font-size:var(--s-1)}
@media (max-width:560px){.doc .spec{grid-template-columns:1fr}.doc .spec dt{border-bottom:0;padding-bottom:0}.doc .spec dd{padding-top:.1rem}}

/* ---------- Unterseite Homelift: Bilder, Knopf ---------- */
.fig{margin:1.6rem 0 2rem;max-width:none}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.fig figcaption{font-size:var(--s-0);color:var(--mute);margin-top:.4rem}
.fig__ph{display:grid;place-items:center;aspect-ratio:3/2;border:1px dashed var(--line);color:var(--mute);font-size:var(--s-1);text-align:center;padding:1rem}
.btn{display:inline-block;padding:.7rem 1.2rem;border:1px solid var(--teal);background:rgba(46,122,128,.18);text-decoration:none;font-weight:500;font-size:var(--s-1)}
.btn:hover{background:rgba(46,122,128,.34)}
.doc ol{padding-left:1.2rem;margin:0 0 1rem}
.doc li{margin-bottom:.35rem}
.doc .phone{margin:.4rem 0 1rem}

.hl3d{position:relative;border:1px solid var(--line);background:#0a0c0d;overflow:hidden}
.hl3d__c{display:none;width:100%;aspect-ratio:1/1.05;max-height:78vh;touch-action:pan-y;cursor:grab}
.hl3d__c:active{cursor:grabbing}
.hl3d__still{display:block;width:100%;height:auto}
.hl3d__ctl{display:none}
.hl3d.on .hl3d__c{display:block}.hl3d.on .hl3d__still{display:none}
.hl3d.on .hl3d__ctl{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.6rem .7rem;border-top:1px solid var(--line);font-size:var(--s-0);color:var(--mute)}
.hl3d__ctl span{min-width:6.2rem}
.hl3d__ctl button{font:inherit;font-size:var(--s-1);color:var(--ink);background:transparent;border:1px solid var(--line);padding:.35rem .8rem;cursor:pointer;min-height:2.4rem}
.hl3d__ctl button[aria-pressed=true]{border-color:var(--teal);background:rgba(46,122,128,.28)}
@media(max-width:480px){.hl3d__ctl button{padding:.35rem .6rem}.hl3d__ctl span{min-width:4.6rem}}