:root{
  --night:#0B1730; --navy:#0F2A5E; --ink:#EFE9DA; --muted:#A9B1C4;
  --gold:#C9A84C; --gold-soft:#E4CC88; --rule:rgba(201,168,76,.26);
  --f-display:"Bodoni Moda",Didot,"Bodoni 72","Times New Roman",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--night)}
a{color:var(--gold-soft)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Chrome */
.mark{position:fixed;z-index:30;top:max(1.1rem,env(safe-area-inset-top));left:max(clamp(1.1rem,4vw,3.5rem),env(safe-area-inset-left));color:var(--ink);font:italic 400 1.2rem/1 var(--f-display);text-decoration:none;padding:.6rem 0;mix-blend-mode:normal}
.mark b{color:var(--gold);font-weight:400}
.rooms-nav{position:fixed;z-index:30;top:max(1.1rem,env(safe-area-inset-top));right:max(clamp(1.1rem,4vw,3.5rem),env(safe-area-inset-right));display:flex;gap:.25rem;transition:opacity .5s,transform .5s}
.rooms-nav button{background:none;border:0;padding:.75rem .7rem;color:var(--muted);font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent}
.rooms-nav button:hover{color:var(--ink)}
.rooms-nav button[aria-current="step"]{color:var(--ink);border-bottom-color:var(--gold)}
.progress{position:fixed;z-index:31;top:0;left:0;right:0;height:2px;background:rgba(239,233,218,.12);transition:opacity .5s}
.progress i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
body:not(.in-journey) .rooms-nav,body:not(.in-journey) .progress{opacity:0;pointer-events:none;transform:translateY(-6px)}

/* Journey */
.journey{position:relative;height:640vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05080f}
.poster,.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film{opacity:0;transition:opacity .6s}
.film.on{opacity:1}
.light{position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(circle at var(--lx,50%) var(--ly,45%),rgba(255,222,150,.13) 0,rgba(255,222,150,0) 12vmax),
   radial-gradient(circle at var(--lx,50%) var(--ly,45%),rgba(5,9,22,0) 16vmax,rgba(5,9,22,.58) 48vmax)}
.room{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(5.5rem,9vw,8rem) clamp(1.25rem,6vw,6rem);pointer-events:none;opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);visibility:hidden}
.room.is-on{opacity:1;transform:none;visibility:visible}
.room[data-align="right"]{justify-content:flex-end}
.copy{position:relative;width:min(38rem,46vw);pointer-events:auto}
.copy::before{content:"";position:absolute;z-index:-1;inset:-4rem -6rem;background:radial-gradient(ellipse at center,rgba(11,23,48,.92) 0,rgba(11,23,48,.72) 55%,rgba(11,23,48,0) 80%);pointer-events:none}
.caption{margin:0 0 1.1rem;color:var(--gold);font:500 .7rem/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.title{margin:0;font:400 clamp(2.6rem,5.6vw,6rem)/1 var(--f-display);letter-spacing:-.015em;text-wrap:balance;max-width:14ch}
.title--hero{font-style:italic;font-size:clamp(3.4rem,8.5vw,8.6rem)}
.body{margin:1.4rem 0 0;max-width:42ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.18rem)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.tags li{padding:.45rem .7rem;border:1px solid var(--rule);color:var(--gold-soft);font:400 .7rem/1 var(--f-mono);letter-spacing:.06em}
.vitrine{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;padding:.4rem 0;color:var(--ink);font:500 .72rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.vitrine::before{content:"";width:1.6rem;height:1.6rem;border:1px solid var(--gold);border-radius:50%;background:radial-gradient(circle,var(--gold) 0 2px,transparent 3px);transition:transform .4s,background .4s}
.vitrine:hover::before{transform:scale(1.15)}
.vitrine[aria-expanded="true"]::before{background:radial-gradient(circle,var(--gold) 0 5px,transparent 6px)}
.detail{margin-top:1rem;padding:1.1rem 1.2rem;border:1px solid var(--rule);background:rgba(11,23,48,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:36rem;animation:glass .5s ease}
.detail p{margin:0;color:var(--ink);font:italic 400 1.15rem/1.45 var(--f-display)}
@keyframes glass{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.to-contact{display:inline-block;margin-top:1.8rem;padding:1rem 1.6rem;border:1px solid var(--gold);color:var(--ink);text-decoration:none;font:500 .74rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(var(--gold),var(--gold)) no-repeat left/0 100%;transition:background-size .5s,color .5s}
.to-contact:hover{background-size:100% 100%;color:var(--night)}
.hint{position:absolute;left:50%;bottom:max(1.6rem,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;text-align:center;color:var(--muted);font:400 .68rem/1.9 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transition:opacity .6s;white-space:nowrap}
.hint span{color:var(--gold-soft)}
.hint.gone{opacity:0}

/* Sections */
.band{border-top:1px solid var(--rule)}
.in{max-width:1200px;margin:0 auto;padding:clamp(4.5rem,10vw,9rem) max(1.25rem,env(safe-area-inset-right)) clamp(4.5rem,10vw,9rem) max(1.25rem,env(safe-area-inset-left))}
.kicker{margin:0 0 1.1rem;color:var(--gold);font:500 .72rem/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.h2{margin:0;font:400 clamp(2.4rem,5.4vw,4.8rem)/1.02 var(--f-display);letter-spacing:-.015em;text-wrap:balance;max-width:16ch}
.lead{margin:1.5rem 0 0;max-width:46ch;color:var(--muted);font-size:1.12rem}
.kino{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2.5rem,7vw,7rem);align-items:center}
.meta{margin:2.5rem 0 0;padding:0;list-style:none;border-top:1px solid var(--rule);max-width:34rem}
.meta li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.meta span{color:var(--gold-soft);font:400 .72rem/1.9 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.frame{position:relative;width:min(340px,78vw);aspect-ratio:9/16;overflow:hidden;border-radius:1.6rem;background:#000;box-shadow:0 0 0 1px var(--rule),0 40px 120px rgba(0,0,0,.55)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;margin:auto;width:5.5rem;height:5.5rem;border-radius:50%;border:1px solid var(--gold);background:rgba(11,23,48,.55);color:var(--gold-soft);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .35s,color .35s,transform .35s}
.play svg{width:1.6rem;height:1.6rem;margin-left:.25rem;fill:currentColor}
.play:hover{background:var(--gold);color:var(--night);transform:scale(1.05)}
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem,6vw,6rem);margin-top:clamp(3rem,6vw,5rem)}
.ledger h3{margin:0 0 1.4rem;color:var(--gold);font:500 .72rem/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.ledger ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ledger li{padding:1.4rem 0;border-bottom:1px solid var(--rule);transition:padding-left .4s}
.ledger li:hover{padding-left:.6rem}
.ledger strong{display:block;font:400 clamp(1.4rem,2.2vw,1.85rem)/1.2 var(--f-display)}
.ledger p{margin:.45rem 0 0;color:var(--muted);max-width:44ch}
.filter{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.filter ol{margin:0;padding:0;list-style:none;counter-reset:i}
.filter li{display:grid;grid-template-columns:3rem minmax(0,1fr);padding:1.1rem 0;border-bottom:1px solid var(--rule);font:400 clamp(1.25rem,2vw,1.6rem)/1.3 var(--f-display)}
.filter li::before{counter-increment:i;content:counter(i,decimal-leading-zero);color:var(--gold);font:400 .72rem/1 var(--f-mono);padding-top:.55rem}
.mail{margin:2.5rem 0 0;font:italic 400 clamp(1.5rem,4.6vw,3.6rem)/1.1 var(--f-display);word-break:break-word}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.2rem;margin-top:2rem}
.write{padding:1rem 1.6rem;border:1px solid var(--gold);color:var(--ink);text-decoration:none;font:500 .74rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(var(--gold),var(--gold)) no-repeat left/0 100%;transition:background-size .5s,color .5s}
.write:hover{background-size:100% 100%;color:var(--night)}
.copy-cta{position:relative;padding:.6rem 0;border:0;background:none;color:var(--ink);cursor:pointer;font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.copy-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(.35);transform-origin:left;transition:transform .4s}
.copy-cta:hover::after{transform:scaleX(1)}
.ext{color:var(--gold-soft);font:italic 400 1.25rem/1 var(--f-display);text-decoration:none}
.foot{border-top:1px solid var(--rule)}
.foot .in{padding-top:1.8rem;padding-bottom:max(1.8rem,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;color:var(--muted);font:400 .72rem/1.6 var(--f-mono)}
.foot a{color:var(--muted)}

@media (max-width:860px){
  .rooms-nav{top:calc(max(1.1rem,env(safe-area-inset-top)) + 2.6rem);left:max(.6rem,env(safe-area-inset-left));right:0;overflow-x:auto;scrollbar-width:none}
  .rooms-nav::-webkit-scrollbar{display:none}
  .rooms-nav button{flex:0 0 auto}
  .room,.room[data-align="right"]{align-items:flex-end;justify-content:flex-start;padding:7rem max(1.25rem,env(safe-area-inset-right)) calc(5.5rem + env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}
  .copy{width:100%}
  .copy::before{inset:-4rem -2rem -6rem;background:linear-gradient(to top,rgba(11,23,48,.95) 0,rgba(11,23,48,.8) 55%,rgba(11,23,48,0) 100%)}
  .title{font-size:clamp(2.2rem,10.5vw,4rem)}
  .title--hero{font-size:clamp(3rem,15vw,5rem)}
  .kino,.ledger,.filter{grid-template-columns:minmax(0,1fr)}
  .frame{justify-self:center}
  .meta li{grid-template-columns:6.5rem minmax(0,1fr)}
  .hint{bottom:max(1rem,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .room,.film,.to-contact,.write,.play,.vitrine::before,.copy-cta::after,.ledger li{transition:none}
  .detail{animation:none}
}

/* Lesbarkeit ohne Fläche: kurzer Text im dunklen Bildrand, sanfter Randverlauf, weicher Schriftschatten (Feedback 6.11.) */
.copy{width:min(30rem,40vw);padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.copy::before{display:none}
.room::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,8,20,.72) 0%,rgba(4,8,20,.38) 26%,rgba(4,8,20,0) 46%)}
.room[data-align="right"]::before{background:linear-gradient(270deg,rgba(4,8,20,.72) 0%,rgba(4,8,20,.38) 26%,rgba(4,8,20,0) 46%)}
.copy .caption,.copy .title,.copy .body,.copy .vitrine,.copy .tags li{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.65)}
.copy .title{font-size:clamp(2.4rem,4.6vw,5rem)}
.copy .title--hero{font-size:clamp(3rem,7vw,7.4rem)}
.copy .body{color:#F1ECDF;font-size:clamp(1.05rem,1.3vw,1.22rem);font-weight:500;max-width:30ch}
.copy .tags li{background:rgba(4,8,20,.35)}
@media (max-width:860px){
  .copy{width:100%}
  .room::before,.room[data-align="right"]::before{background:linear-gradient(0deg,rgba(4,8,20,.8) 0%,rgba(4,8,20,.45) 30%,rgba(4,8,20,0) 52%)}
  .copy .title{font-size:clamp(2rem,9vw,3.2rem)}
  .copy .title--hero{font-size:clamp(2.8rem,13vw,4.4rem)}
  .room,.room[data-align="right"]{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
}

.room[data-valign="top"]{align-items:flex-start;padding-top:clamp(6rem,10vw,8.5rem)}
.room[data-valign="top"]::before{background:linear-gradient(200deg,rgba(4,8,20,.78) 0%,rgba(4,8,20,.4) 30%,rgba(4,8,20,0) 52%)}
@media (max-width:860px){
  .room[data-valign="top"]{align-items:flex-start;padding-top:7.4rem;padding-bottom:2rem}
  .room[data-valign="top"]::before{background:linear-gradient(180deg,rgba(4,8,20,.85) 0%,rgba(4,8,20,.5) 34%,rgba(4,8,20,0) 56%)}
}

/* Handy: Film füllt auch die Höhe, wenn die Adressleiste beim Scrollen verschwindet */
.journey{background:#05080f}
.stage{height:100vh;height:100lvh}
.room{inset:auto;top:0;left:0;right:0;height:100vh;height:100svh}
.hint{bottom:auto;top:calc(100vh - 4.2rem);top:calc(100svh - 4.2rem - env(safe-area-inset-bottom))}
/* Verlauf reicht bis ganz unten, keine Kante */
.room::before{bottom:calc(100svh - 100lvh)}
/* Film bleibt im sichtbaren Bereich verankert, darunter weicher Übergang ins Schwarz */
.stage{background:#05080f}
.poster,.film{top:0;bottom:auto;height:100vh;height:100svh}
.stage::after{content:"";position:absolute;left:0;right:0;pointer-events:none;top:calc(100svh - 14vh);height:calc(14vh + 100lvh - 100svh);background:linear-gradient(to bottom,rgba(5,8,15,0) 0,#05080f 14vh)}
.light{z-index:1}.room{z-index:2}.hint{z-index:2}
.room::before{bottom:0}

/* Einheitlich: Rechner immer mittig am Rand, Handy immer unten (Feedback 6.11.) */
.room[data-valign="top"]{align-items:center;padding-top:clamp(5.5rem,9vw,8rem)}
.room[data-valign="top"]::before{background:linear-gradient(270deg,rgba(4,8,20,.72) 0%,rgba(4,8,20,.38) 26%,rgba(4,8,20,0) 46%)}
@media (max-width:860px){
  .room,.room[data-align="right"],.room[data-valign="top"]{align-items:flex-end;padding-top:7rem;padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .room::before,.room[data-align="right"]::before,.room[data-valign="top"]::before{background:linear-gradient(0deg,rgba(4,8,20,.92) 0%,rgba(4,8,20,.78) 24%,rgba(4,8,20,.35) 42%,rgba(4,8,20,0) 56%)}
  .copy .caption{margin-bottom:.7rem}
  .copy .title{font-size:clamp(1.9rem,8.4vw,2.8rem)}
  .copy .title--hero{font-size:clamp(2.5rem,11.5vw,3.8rem)}
  .copy .body{font-size:1rem;margin-top:.9rem}
  .copy .tags{margin-top:.9rem}
  .copy .vitrine{margin-top:1rem}
}

/* Handy: Hinweis oben unter der Navigation statt unten über dem Text */
@media (max-width:860px){
  .hint{top:calc(max(1.1rem,env(safe-area-inset-top)) + 5.6rem);bottom:auto;font-size:.62rem}
  .hint .hint-desk,.hint br.hint-desk{display:none}
}

/* Neue Abschnitte (7.11.) */
.traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(3rem,6vw,4.5rem)}
.traits article{border-top:1px solid var(--gold);padding-top:1.3rem}
.traits h3{margin:0 0 .7rem;font:400 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--f-display)}
.traits p{margin:0;color:var(--muted)}
.inside{margin-top:clamp(3rem,6vw,4.5rem);max-width:52rem;border-left:1px solid var(--gold);padding-left:1.5rem}
.inside p{margin:0;font:italic 400 clamp(1.25rem,2vw,1.6rem)/1.45 var(--f-display)}
.familie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.familie .h2{max-width:18ch}
.lotta{margin:0}
.lotta-frames{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;align-items:end}
.lotta-frames img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule);filter:saturate(.92) contrast(1.03)}
.lotta-frames img:nth-child(2){aspect-ratio:1/1}
.lotta figcaption{margin-top:1rem;color:var(--muted);font:400 .78rem/1.6 var(--f-mono);letter-spacing:.08em}
.lotta figcaption b{color:var(--gold-soft);font-weight:500}
.beruf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.beruf .ext{display:inline-block;margin-top:1.6rem}
.creds{margin:0;border-top:1px solid var(--rule)}
.creds div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.creds dt{color:var(--gold-soft);font:500 .74rem/1.9 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.creds dd{margin:0;color:var(--ink)}
.projekt-fig{margin:clamp(2.5rem,5vw,4rem) 0 0}
.projekt-fig img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.projekt-fig figcaption{margin-top:.8rem;color:var(--muted);font:400 .74rem/1.6 var(--f-mono);letter-spacing:.08em}
.steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule)}
.steps li{position:relative;padding:1.4rem .5rem 0 0;color:var(--muted);font:400 .78rem/1.5 var(--f-mono);letter-spacing:.06em}
.steps li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;border:1px solid var(--gold);background:var(--night)}
.steps li.done{color:var(--ink)}
.steps li.done::before{background:var(--gold)}
.post{max-width:46rem;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--gold);padding-top:1.5rem}
.post-meta{margin:0 0 .8rem;color:var(--gold);font:500 .72rem/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.post h3{margin:0 0 1rem;font:400 clamp(1.6rem,2.8vw,2.3rem)/1.15 var(--f-display)}
.post p{color:var(--muted);margin:0 0 1rem}
.post summary{cursor:pointer;color:var(--ink);font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:.6rem 0;list-style:none}
.post summary::-webkit-details-marker{display:none}
.post summary::after{content:" +";color:var(--gold)}
.post details[open] summary::after{content:" –"}
.socials{list-style:none;margin:2.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1rem}
.socials a{display:flex;flex-direction:column;gap:.3rem;min-width:13rem;padding:1rem 1.2rem;border:1px solid var(--rule);color:var(--ink);text-decoration:none;font:400 1.15rem/1.2 var(--f-display);transition:border-color .3s}
.socials a:hover{border-color:var(--gold)}
.socials span{color:var(--gold);font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
@media (max-width:860px){
  .traits,.familie,.beruf{grid-template-columns:minmax(0,1fr)}
  .creds div{grid-template-columns:7rem minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--rule);margin-left:6px}
  .steps li{padding:0 0 1.2rem 1.4rem}
  .steps li::before{top:3px;left:-6px}
}
/* Name oben nur im Film, darunter nicht über den Text legen */
.mark{transition:opacity .5s}
body:not(.in-journey) .mark{opacity:0;pointer-events:none}
.lotta-main{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.lotta-real{display:grid;grid-template-columns:5.5rem 5.5rem minmax(0,1fr);gap:10px;align-items:center;margin-top:1.2rem}
.lotta-real img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule)}
.lotta-real p{margin:0 0 0 .4rem;color:var(--muted);font:italic 400 1.05rem/1.4 var(--f-display)}
.projekt-fig{max-width:900px}

/* Die Sammlung: Exponate statt Textblöcke */
.exhibits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(2.5rem,5vw,3.5rem)}
.ex{position:relative;display:block;padding:0;border:1px solid var(--rule);background:#05080f;color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;aspect-ratio:4/5;font:inherit}
.ex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s;filter:brightness(.78)}
.ex::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,8,20,.92) 0%,rgba(4,8,20,.25) 45%,rgba(4,8,20,0) 70%)}
.ex span{position:absolute;left:1rem;right:1rem;z-index:1}
.ex-n{bottom:4.6rem;color:var(--gold);font:500 .66rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.ex-t{bottom:2.5rem;font:400 clamp(1.3rem,1.9vw,1.7rem)/1.1 var(--f-display)}
.ex-s{bottom:1rem;color:var(--muted);font-size:.85rem}
.ex:hover img,.ex:focus-visible img{transform:scale(1.06);filter:brightness(1)}
.ex:hover,.ex:focus-visible{border-color:var(--gold)}
.vit{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.vit[hidden]{display:none}
.vit-bg{position:absolute;inset:0;background:rgba(3,6,14,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vit-box{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);width:min(1100px,100%);max-height:100%;background:var(--night);border:1px solid var(--rule);animation:vitIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes vitIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.vit-img{width:100%;height:100%;object-fit:cover;min-height:0}
.vit-txt{padding:clamp(1.6rem,3.5vw,3rem);overflow:auto;max-height:86vh}
.vit-txt .h2{font-size:clamp(2rem,3.6vw,3.2rem)}
.vit-txt .lead{font-size:1.05rem}
.vit-nav{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.5rem}
.vit-nav button{background:var(--night);border:1px solid var(--rule);color:var(--ink);padding:.6rem .9rem;font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.vit-nav button:hover{border-color:var(--gold)}
.pairs{margin:1.8rem 0 3.5rem;border-top:1px solid var(--rule)}
.pairs div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--rule)}
.pairs dt{color:var(--gold-soft);font:500 .74rem/1.8 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.pairs dd{margin:0;color:var(--ink)}
.ideas{margin:1.8rem 0 3.5rem;padding:0;list-style:none;counter-reset:i}
.ideas li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);padding:.8rem 0;border-bottom:1px solid var(--rule);font:400 1.2rem/1.3 var(--f-display)}
.ideas li::before{counter-increment:i;content:counter(i,decimal-leading-zero);color:var(--gold);font:400 .72rem/1 var(--f-mono);padding-top:.45rem}
.vit-txt .steps{margin-bottom:3.5rem}
.vit-txt .lotta-real{grid-template-columns:5.5rem 5.5rem minmax(0,1fr);margin:1.5rem 0 3.5rem}
.vit-txt .ext{display:inline-block;margin-bottom:3.5rem}
body.vit-open{overflow:hidden}
@media (max-width:860px){
  .exhibits{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ex-n{bottom:4rem}.ex-t{bottom:2.2rem;font-size:1.15rem}.ex-s{font-size:.75rem;bottom:.8rem}
  .vit{padding:0}
  .vit-box{grid-template-columns:minmax(0,1fr);grid-template-rows:34vh minmax(0,1fr);height:100%;border:0}
  .vit-txt{max-height:none;padding-bottom:5rem}
  .vit-nav{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom))}
  .pairs div{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
@media (prefers-reduced-motion:reduce){.vit-box{animation:none}.ex img{transition:none}}
.ex{display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;padding:1rem}
.ex span{position:relative;left:auto;right:auto;bottom:auto}
.ex-n,.ex-t,.ex-s{bottom:auto}
@media (max-width:860px){.ex{padding:.8rem;gap:.3rem}.vit-txt .lotta-real{grid-template-columns:1fr 1fr}.vit-txt .lotta-real p{grid-column:1/-1}}

/* Sammlung v13: Galeriewand, Lichtkegel, 3D, Zoom */
#sammlung{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#0f1d3a 0%,#070c18 55%,#04070e 100%);--sx:50%;--sy:30%}
#sammlung .in{position:relative;z-index:1}
.sam-light{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle min(34rem,70vw) at var(--sx) var(--sy),rgba(255,214,140,.10) 0%,rgba(3,6,14,0) 35%,rgba(3,6,14,.55) 70%,rgba(3,6,14,.78) 100%);transition:background-position .2s}
.sam-hint{margin-top:.8rem;color:var(--muted);font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.exhibits{perspective:1400px}
.ex{--rx:0deg;--ry:0deg;--ty:60px;opacity:0;transform:translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:opacity 1s ease,transform .9s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;border-color:rgba(201,168,76,.28);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 0 0 6px #070b14,inset 0 0 0 7px rgba(201,168,76,.25)}
.ex.in{opacity:1;--ty:0px}
.ex.tilt{transition:opacity 1s ease,transform .12s linear,border-color .4s,box-shadow .4s}
.ex img{animation:kb 22s ease-in-out infinite alternate}
.ex:nth-child(2n) img{animation-duration:26s;animation-direction:alternate-reverse}
.ex:nth-child(3n) img{animation-duration:19s}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-3%)}}
.ex:hover img,.ex:focus-visible img{transform:none;filter:brightness(1.05)}
.ex::before{content:"";position:absolute;left:50%;top:-30%;width:120%;height:70%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(255,220,150,.28),rgba(255,220,150,0) 65%);opacity:0;transition:opacity .6s;z-index:1;pointer-events:none}
.ex:hover::before,.ex.lit::before{opacity:1}
.ex:hover{box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 40px -10px rgba(201,168,76,.35),inset 0 0 0 6px #070b14,inset 0 0 0 7px rgba(201,168,76,.6)}
/* Öffnen als Zoom */
.vit-bg{animation:fadeIn .5s ease both}
.vit-box{animation:none;background:transparent;border:0}
.vit-txt{background:var(--night);border:1px solid var(--rule);animation:txtIn .6s .25s cubic-bezier(.2,.7,.2,1) both}
.vit-nav{animation:fadeIn .4s .5s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes txtIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@media (max-width:860px){@keyframes txtIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}.vit-txt{border:0}.sam-hint{display:none}}
@media (prefers-reduced-motion:reduce){.ex,.ex img{animation:none;transition:none;opacity:1;--ty:0px}}
.ex{width:100%;height:auto;align-self:start}
@media (max-width:860px){.sam-light{background:radial-gradient(circle 75vw at var(--sx) var(--sy),rgba(255,214,140,.08) 0%,rgba(3,6,14,0) 40%,rgba(3,6,14,.35) 75%,rgba(3,6,14,.55) 100%)}}

/* v14: klarer Weg zurück */
.vit-x{position:fixed;z-index:60;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:52px;height:52px;border-radius:50%;border:1px solid rgba(228,204,136,.7);background:rgba(5,8,15,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);font:300 30px/1 var(--f-body);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:fadeIn .4s .2s both}
.vit-x:hover{border-color:var(--gold);color:var(--gold-soft)}
.vit-nav,.vit-txt .vit-nav{position:static;display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 .5rem;animation:none}
.vit-nav .vit-close{flex-basis:100%;order:-1;padding:1rem;border-color:var(--gold);color:var(--gold-soft)}
.vit-nav .vit-prev,.vit-nav .vit-next{flex:1}
.vit-txt .pairs,.vit-txt .ideas,.vit-txt .steps,.vit-txt .lotta-real,.vit-txt .ext{margin-bottom:0}
@media (max-width:860px){
  .vit-box{overflow-y:auto;-webkit-overflow-scrolling:touch;display:block;height:100%}
  .vit-img{height:38vh;display:block}
  .vit-txt{overflow:visible;padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
  .vit-nav{position:static}
}

/* v16: Exponate untereinander, dezentes X, nur ein Pfeil */
.vit{padding:0;display:block}
.vit-scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.vit-art{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:100vh;width:min(1200px,100%);margin:0 auto;background:var(--night);border-bottom:1px solid var(--rule)}
.vit-art .vit-img{width:100%;height:100vh;position:sticky;top:0;object-fit:cover;display:block}
.vit-art .vit-txt{border:0;background:none;animation:none;max-height:none;overflow:visible;padding:clamp(2rem,5vw,4.5rem) clamp(1.6rem,4vw,3.5rem) 2rem;display:flex;flex-direction:column}
.vit-down{margin-top:auto;align-self:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:3rem 1rem 1rem;background:none;border:0;color:var(--muted);font:500 .68rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.vit-down i{font-style:normal;font-size:1.3rem;color:var(--gold-soft);animation:bob 2.2s ease-in-out infinite}
.vit-end i{animation-name:bobUp}
.vit-down:hover{color:var(--ink)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes bobUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.vit-x{width:38px;height:38px;border:1px solid rgba(239,233,218,.25);background:rgba(5,8,15,.45);color:rgba(239,233,218,.8);font:300 22px/1 var(--f-body);box-shadow:none;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.vit-x:hover{border-color:rgba(228,204,136,.6);color:var(--ink)}
@media (max-width:860px){
  .vit-art{display:block;min-height:0}
  .vit-art .vit-img{position:static;height:42vh}
  .vit-art .vit-txt{padding:1.8rem 1.4rem 1.5rem;min-height:calc(58vh - 1px)}
  .vit-down{padding-top:2.5rem}
}
@media (prefers-reduced-motion:reduce){.vit-down i{animation:none}}

/* v18: Termin + Easter Eggs */
.termin{text-align:center;background:radial-gradient(70% 90% at 50% 100%,rgba(201,168,76,.13),rgba(201,168,76,0) 70%)}
.termin .lead{margin:1.2rem auto 0;max-width:34rem}
.termin .kicker{justify-content:center}
.termin-btn{display:inline-block;margin-top:2.2rem;padding:1.05rem 2.4rem;border:1px solid var(--gold);color:var(--gold-soft);font:500 .78rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;transition:color .4s,background .4s}
.termin-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(228,204,136,.35) 50%,transparent 70%);transform:translateX(-120%);animation:glint 4.5s ease-in-out infinite 1s}
.termin-btn:hover{background:var(--gold);color:#05080f}
@keyframes glint{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.termin-link{display:inline-block;margin-top:1.6rem;color:var(--gold-soft);font:500 .74rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(228,204,136,.4);padding-bottom:.35rem}
.egg-foot{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:default}
.toast{position:fixed;left:50%;top:22%;z-index:80;transform:translate(-50%,10px);opacity:0;pointer-events:none;text-align:center;font:italic 400 clamp(1.8rem,5vw,3.2rem)/1.15 var(--f-display);color:var(--gold-soft);text-shadow:0 0 30px rgba(201,168,76,.55),0 2px 20px rgba(0,0,0,.8);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.toast small{display:block;margin-top:.6rem;font:500 .7rem/1 var(--f-mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.glow-burst{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),rgba(255,210,130,.35),rgba(255,210,130,0) 45%);animation:burst 1.6s ease-out forwards}
@keyframes burst{from{opacity:1}to{opacity:0}}
.ex-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:brightness(.78);animation:kb 22s ease-in-out infinite alternate}
.ex-vid.ok{opacity:1}
.ex:hover .ex-vid{filter:brightness(1.05)}
.vit-media{position:relative;overflow:hidden}
.vit-art .vit-media{position:sticky;top:0;height:100vh}
.vit-media .vit-img{position:static;height:100%}
.vit-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.vit-vid.ok{opacity:1}
@media (max-width:860px){.vit-art .vit-media{position:static;height:42vh}}
.termin .h2{margin-left:auto;margin-right:auto;max-width:16ch}

/* v20: Videos bleiben in ihrem Rahmen, mehr Luft */
.vit-vid,.ex-vid{pointer-events:none}
@media (max-width:860px){
  .vit-art .vit-media{position:relative;height:52vh;overflow:hidden}
  .vit-art{margin-bottom:0;border-bottom:0}
  .vit-art+.vit-art{border-top:1px solid var(--rule);margin-top:3.5rem}
  .vit-art .vit-txt{padding:2.2rem 1.6rem 2rem}
  .vit-txt .h2{margin-bottom:.4rem}
  .pairs div{padding:1.1rem 0}
  .vit-down{padding-top:3rem;padding-bottom:1.5rem}
}
.vit-scroll{background:var(--night)}
@media (max-width:860px){.vit-art+.vit-art{margin-top:0}}