*{box-sizing:border-box}html{background:#111110;color:#eeeae0;scroll-behavior:auto;overflow-x:clip}body{margin:0;font:13px/1.5 'Segoe UI',sans-serif}canvas{position:fixed;inset:0;display:block;width:100%;height:100%}header{position:fixed;z-index:3;top:36px;left:44px;right:44px;display:flex;justify-content:space-between;align-items:start;pointer-events:none}#brand{font-size:18px;letter-spacing:.17em;color:inherit;text-decoration:none;pointer-events:auto}#brand span{display:block;font:9px/2 'Segoe UI',sans-serif;letter-spacing:.25em;opacity:.55}.edition{font-size:10px;letter-spacing:.18em;opacity:.55}#arrival{position:fixed;z-index:2;left:7vw;top:39vh;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.23em;opacity:.6}h1{font:400 clamp(34px,4vw,64px)/1.08 Georgia,serif;letter-spacing:-.025em;margin:22px 0}#arrival p{font-size:12px;line-height:1.9;opacity:.6}#caption{position:fixed;left:44px;bottom:110px;pointer-events:none;opacity:0}#caption span{font-size:9px;letter-spacing:.18em;opacity:.55}h2{font:400 28px/1.2 Georgia,serif;margin:12px 0}footer{position:fixed;bottom:30px;left:44px;right:44px;display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:.1em;z-index:4}#status{min-width:240px;opacity:.65}.track{height:1px;background:#ffffff24;flex:1}.track i{height:1px;background:#c6bca2;display:block;width:0}#percent{font-variant-numeric:tabular-nums;opacity:.65}#debug{position:fixed;top:95px;right:30px;z-index:5;font:10px/1.7 monospace;background:#111c;padding:10px;max-width:320px;color:#bcb7ad}summary{cursor:pointer;text-align:right}button{background:none;color:inherit;border:1px solid #7775;padding:5px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid white}#fallback{position:relative;z-index:10;padding:100px 8vw;background:#161615}#fallback img{display:block;max-height:70vh;max-width:80vw;margin:40px 0}#fallback[hidden]{display:none}@media(max-width:700px){header{left:22px;right:22px;top:24px}.edition{display:none}footer{left:22px;right:22px}#status{min-width:0;max-width:180px}#caption{left:22px;bottom:56px}h2{font-size:23px;margin:7px 0}#arrival{left:7vw}#debug{top:85px;right:12px}}

/* Werkliste: immer im DOM (Screenreader), sichtbar am Seitenende, im Fluss
   hinter der Scrollstrecke. Bei reduzierter Bewegung und ohne WebGL2 ist sie
   die eigentliche Fassung der Ausstellung. */
#werkliste{position:relative;z-index:6;background:#111110;color:#eeeae0;
  min-height:100vh;padding:72px max(44px,calc((100% - 1100px)/2)) 90px}
/* Der Verlauf liegt UEBER der Szene, direkt vor der Liste — er zeichnet den
   Uebergang weich, ohne die Ueberschrift zu ueberdecken. */
#werkliste::before{content:"";position:absolute;inset:-140px 0 auto 0;height:140px;
  background:linear-gradient(to bottom,#11111000,#111110);pointer-events:none}
#werkliste h2{font:400 26px/1.2 Georgia,serif;margin:0 0 10px;letter-spacing:-.01em}
.wl-hinweis,.wl-fuss{font-size:12px;line-height:1.7;color:#8e897e;margin:0 0 24px;max-width:62ch}
.wl-fuss{margin:28px 0 0;padding-top:16px;border-top:1px solid #23211d}
#wl-liste{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:#23211d;
  border:1px solid #23211d}
#wl-liste li{margin:0}
#wl-liste button{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:#15140f;border:0;padding:13px 15px;color:inherit;cursor:pointer;
  font:inherit;transition:background .15s}
#wl-liste button:hover:not(:disabled){background:#1d1b15}
#wl-liste button:disabled{cursor:default;opacity:.55}
.wl-titel{font-size:14px;letter-spacing:-.005em}
.wl-raum{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8e897e}
@media(max-width:700px){#werkliste{padding:52px 22px 64px}
  #wl-liste{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){#wl-liste button{transition:none}}

body[data-liste] #caption,body[data-liste] footer{opacity:0;pointer-events:none}
footer{transition:opacity .35s ease-out}
@media(prefers-reduced-motion:reduce){footer{transition:none}}