:root{color-scheme:dark;background:#191713;color:#faf5ec;font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
#story{height:790vh;height:790svh}
#stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;background:#413b31;isolation:isolate}
canvas,#compare-ui{position:absolute;inset:0;width:100%;height:100%}
#finale{position:absolute;left:0;right:0;bottom:0;padding:6rem clamp(1rem,5vw,5rem) 8rem;background:linear-gradient(transparent,#17140fdf 62%,#17140ff8);pointer-events:none}
.eyebrow,legend{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#e1ca9e}
h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.01;margin:.35em 0 .25em}
h1{font-size:clamp(2rem,5.5vw,5.8rem);max-width:16ch}
h2{font-size:clamp(2rem,5vw,4rem)}
p{margin:0 0 1.15rem}
.cta,button,fieldset span{border:1px solid #fff5;border-radius:.25rem;padding:.55rem .8rem;color:inherit;background:#242019;text-decoration:none;font:inherit;cursor:pointer}
.cta{display:inline-flex;gap:1.1rem;background:#eedbc0;color:#231a12;pointer-events:auto}
.cta:hover{background:#fff0dc}
#controls{display:flex;gap:.6rem 1rem;align-items:end;flex-wrap:wrap;position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:clamp(1rem,5vw,5rem);right:clamp(1rem,5vw,5rem);font-size:.8rem}
fieldset{margin:0;padding:0;border:0;display:flex;gap:.3rem;flex-wrap:wrap}
legend{margin:0 0 .28rem}
fieldset label{display:flex;position:relative}
fieldset input,.sr{position:absolute;width:1px;height:1px;opacity:0}
fieldset input:checked+span,button[aria-pressed=true]{background:#eedbc0;color:#231a12}
:focus-visible,fieldset input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
#compare-ui{--split:50%;pointer-events:none}
#compare-ui span{position:absolute;top:1rem;background:#211b14dc;padding:.35rem .65rem;border-radius:.2rem}
.before{left:1rem}.after{right:1rem}
#divider{position:absolute;left:var(--split);top:0;bottom:0;border-left:2px solid #fff}
#split{position:absolute;top:36%;left:0;width:100%;margin:0;appearance:none;background:transparent;pointer-events:auto;cursor:ew-resize;height:48px;touch-action:pan-y}
#split::-webkit-slider-thumb{appearance:none;width:30px;height:30px;border:2px solid white;border-radius:50%;background:#403528}
#split::-moz-range-thumb{width:26px;height:26px;border:2px solid white;border-radius:50%;background:#403528}
#kontakt{min-height:52vh;padding:clamp(2rem,8vw,8rem) clamp(1rem,5vw,5rem)}
#failure{position:absolute;top:1rem;left:1rem;right:1rem;background:#221a14;padding:1rem}
#failure a{color:inherit}
@media(max-width:680px){#finale{padding-bottom:10rem}#controls{gap:.45rem .6rem;font-size:.71rem}fieldset span,button{padding:.43rem .52rem}#finale p{font-size:.83rem}}
@media(max-height:540px){#finale{padding-top:1.5rem;padding-bottom:5rem}h1{font-size:clamp(1.65rem,5vh,3rem)}}
@media(max-width:680px) and (max-height:540px){#finale{padding-bottom:7rem}}
@media(prefers-reduced-motion:reduce){#story{height:auto}}
@media(min-width:681px){#finale{background:linear-gradient(0deg,#17140ff2,#17140f65 46%,transparent 100%);padding-top:2.6rem}h1{font-size:clamp(2rem,4.8vw,5.2rem)}}
#stage{background:#24211d}
#finale{padding-top:2.2rem}
@media(orientation:portrait){
  #finale{background:linear-gradient(transparent,#24211d 20%);padding-top:1.8rem}
  #split{top:44%}
}
@media(min-width:681px) and (min-height:541px){
  #finale{padding-top:2rem;padding-bottom:6.8rem}
  h1{font-size:clamp(2rem,3.6vw,3.7rem);max-width:13ch}
}
#startbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
@media(orientation:portrait){#startbild{object-fit:contain;object-position:50% 26%}}
#controls fieldset{gap:.4rem}
#controls label span{display:flex;gap:.45rem;align-items:center;white-space:nowrap}
#controls i{width:1.55rem;height:.85rem;border:1px solid #fff6;border-radius:2px;background:linear-gradient(90deg,var(--boden) 50%,var(--wand) 50%)}
#finale{padding-bottom:5.4rem}
#projekt{padding:clamp(1.8rem,4vw,3rem) clamp(1rem,5vw,5rem);background:#211e19}
#projekt h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.5rem;list-style:none;padding:0;margin:1rem 0 0;max-width:65rem}
.details li{display:flex;gap:.6rem;align-items:flex-start}
.details p{margin:.12rem 0 0;font-size:.86rem;color:#d4c9b9}
.details svg{flex:0 0 1.2rem;fill:none;stroke:#d9bc91;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
@media(max-width:680px){#finale{padding-bottom:6.8rem}#controls fieldset{display:grid;grid-template-columns:repeat(2,auto)}.details{grid-template-columns:1fr}}
@media(max-height:500px){#finale{padding-top:.8rem;padding-bottom:3.8rem}}
#weisses-endbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
@media(orientation:portrait){#weisses-endbild{object-fit:contain;object-position:50% 26%}}