:root{
  --k:#080808; --k2:#101010; --k3:#1a1a1a; --line:#2a2a2a;
  --g:#8c8c8c; --w:#f1f1f1;
  --disp:"Syne",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"Space Mono",ui-monospace,monospace;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--k)}
body{background:var(--k);color:var(--w);font:400 20px/1.65 var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--w);color:var(--k)}
.mono{font:400 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g)}

/* Filmkorn */
body::after{content:"";position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Seitenübergang */
.curtain{position:fixed;inset:0;z-index:500;background:#f1f1f1;color:var(--k);display:grid;place-items:center;
  transform:translateY(100%);transition:transform .7s var(--ease);pointer-events:none;will-change:transform}
.curtain.in{transform:none;pointer-events:all}
.curtain.out{transform:translateY(-100%);transition:transform .9s var(--ease)}
.cover .curtain{transform:none;transition:none}
.curtain span{font:800 clamp(40px,9vw,150px)/1 var(--disp);letter-spacing:-.045em;text-transform:uppercase;opacity:0;transform:translateY(30px);transition:.6s .15s var(--ease)}
.curtain.in span,.cover .curtain span{opacity:1;transform:none}
.curtain.out span{opacity:0;transform:translateY(-30px);transition:.4s}
.curtain::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--k);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.curtain.in::after{transform:scaleX(1)}

/* Cursor */
.cur{position:fixed;left:0;top:0;z-index:300;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;
  pointer-events:none;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease);display:none}
.cur.big{width:84px;height:84px;margin:-42px 0 0 -42px}
@media (hover:hover) and (pointer:fine){.cur{display:block}}

/* Kopf */
header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad) 40px;color:#fff;background:linear-gradient(to bottom,rgba(8,8,8,.92) 0%,rgba(8,8,8,.6) 55%,transparent 100%);pointer-events:none}
header a{pointer-events:auto}
.logo{font:700 14px var(--disp);letter-spacing:.2em;text-transform:uppercase}
nav{display:flex;gap:clamp(16px,3vw,40px)}
nav a{font:400 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;position:relative;padding:4px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* Seitenkopf (Unterseiten) */
.ph-head{padding:clamp(140px,20vw,260px) var(--pad) clamp(40px,6vw,90px)}
.ph-head h1{font:800 clamp(44px,11vw,190px)/.88 var(--disp);letter-spacing:-.05em;text-transform:uppercase}
.ph-head h1 span{display:block;overflow:hidden;padding-bottom:.06em}
.ph-head h1 i{display:block;font-style:normal;transform:translateY(105%);animation:up 1.3s .55s var(--ease) forwards}
.ph-head h1 em{font:italic 400 1em var(--serif);text-transform:none;letter-spacing:-.03em;color:var(--g)}
.ph-head .mono{margin-bottom:22px;opacity:0;animation:fade 1s .7s forwards}
@keyframes up{to{transform:none}}
@keyframes fade{to{opacity:1}}
.page-in{opacity:0;transform:translateY(24px);animation:pin 1.1s .75s var(--ease) forwards}
@keyframes pin{to{opacity:1;transform:none}}

/* Hero (Start) */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:110px var(--pad) 60px}
.hero .amb{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(70px) grayscale(1) brightness(.55);opacity:0;animation:fade 2.4s .8s var(--ease) forwards}
.hero .frame{position:relative;width:min(760px,78vw);z-index:1;translate:var(--mx,0) var(--my,0);transition:translate .9s var(--ease)}
.hero .frame .clip{overflow:hidden;clip-path:inset(0 0 100% 0);animation:open 1.5s .9s var(--ease) forwards}
.hero .frame img{width:100%;filter:grayscale(1) contrast(1.05) brightness(.62);transform:scale(1.2);animation:settle 2.4s .9s var(--ease) forwards}
.hero h1{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:2;text-align:center;pointer-events:none;
  font:800 clamp(34px,7.8vw,150px)/.9 var(--disp);letter-spacing:-.05em;text-transform:uppercase;color:#fff;text-shadow:0 0 60px rgba(0,0,0,.55)}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 i{display:block;font-style:normal;transform:translateY(105%);animation:up 1.4s .9s var(--ease) forwards}
.hero h1 span:nth-child(2) i{animation-delay:1.02s}
.hero .meta{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;z-index:3;display:flex;justify-content:space-between;gap:20px;opacity:0;animation:fade 1.2s 2s forwards}
@keyframes open{to{clip-path:inset(0)}}
@keyframes settle{to{transform:scale(1)}}

/* Laufband */
.marq{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:18px 0}
.marq div{display:inline-block;animation:marq 38s linear infinite;font:700 clamp(18px,2.4vw,30px) var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
.marq span{margin:0 28px}
.marq span.o{color:transparent;-webkit-text-stroke:1px var(--g)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Statement */
.state{padding:clamp(100px,16vw,240px) var(--pad);max-width:1400px;margin:0 auto}
.state p{font:400 clamp(30px,5.2vw,78px)/1.12 var(--serif);letter-spacing:-.01em}
.state .wd{opacity:.14;transition:opacity .5s}
.state .wd.on{opacity:1}
.state em{color:var(--g)}

/* Werke */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;padding:0 var(--pad);margin-bottom:clamp(40px,6vw,90px)}
.sec-head h2{font:800 clamp(40px,9vw,150px)/.9 var(--disp);letter-spacing:-.04em;text-transform:uppercase}
.sec-head h2 em{font:italic 400 1em var(--serif);text-transform:none;letter-spacing:-.02em;color:var(--g)}
.toggle{display:flex;gap:6px;border:1px solid var(--line);padding:4px;border-radius:100px}
.toggle button{padding:8px 18px;border-radius:100px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g);transition:.4s var(--ease)}
.toggle button.on{background:var(--w);color:var(--k)}

.stage{padding:0 var(--pad);display:flex;flex-direction:column;gap:clamp(70px,11vw,170px)}
.w{position:relative;width:min(100%,780px);translate:0 var(--py,0);display:block;text-align:left;cursor:pointer}
.w:nth-child(odd){align-self:flex-start}
.w:nth-child(even){align-self:flex-end}
.w:nth-child(4n+3){margin-left:6vw}
.w:nth-child(4n){margin-right:6vw}
.w .num{position:absolute;z-index:0;top:-.55em;font:800 clamp(100px,17vw,260px)/1 var(--disp);color:transparent;-webkit-text-stroke:1px #3a3a3a;letter-spacing:-.05em;
  translate:0 var(--ny,0);pointer-events:none}
.w:nth-child(odd) .num{right:-8%}
.w:nth-child(even) .num{left:-8%}
.w .ph{position:relative;z-index:1;overflow:hidden;background:var(--k3);clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.w.in .ph{clip-path:inset(0)}
.w img{width:100%;filter:grayscale(1) contrast(1.05) brightness(.92);transform:scale(1.18);transition:transform 1.8s var(--ease),filter .8s}
.w.in img{transform:scale(1)}
.w:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.w figcaption{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;margin-top:14px;opacity:0;transform:translateY(12px);transition:.9s .5s var(--ease)}
.w.in figcaption{opacity:1;transform:none}
.w figcaption b{font:italic 400 clamp(22px,2.4vw,34px) var(--serif)}

.stage.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:3px}
.stage.grid .w{width:auto;margin:0!important;align-self:auto;translate:none}
.stage.grid .num,.stage.grid figcaption span{display:none}
.stage.grid .ph{aspect-ratio:4/3}
.stage.grid .w img{height:100%;object-fit:cover}
.stage.grid figcaption{position:absolute;inset:auto 0 0 0;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));margin:0}
.stage.grid figcaption b{font-size:18px}

/* Start: kleine Auswahl */
.picks{padding:0 var(--pad);display:flex;flex-direction:column;gap:clamp(60px,9vw,140px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;margin-top:34px;padding:16px 28px;border:1px solid var(--w);border-radius:100px;font:400 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:.5s var(--ease);background:transparent;color:var(--w);cursor:pointer}
.btn:hover{background:var(--w);color:var(--k);padding-right:40px}
.center{text-align:center;padding:clamp(50px,8vw,110px) var(--pad) 0}

/* Ãœber */
.about{padding:0 var(--pad) clamp(90px,12vw,180px);display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,8vw,140px);align-items:start;max-width:1500px;margin:0 auto}
.about .pt img{filter:grayscale(1) contrast(1.1);width:100%}
.about .pt .mono{margin-top:12px}
.about .pt{position:sticky;top:90px}
.about h2{font:800 clamp(30px,4.6vw,70px)/.95 var(--disp);letter-spacing:-.04em;text-transform:uppercase;margin:16px 0 26px}
.about p{color:#c8c8c8;max-width:620px}
.about p+p{margin-top:1em}
.facts{display:flex;gap:clamp(24px,5vw,70px);margin:44px 0;padding:30px 0;border-block:1px solid var(--line);flex-wrap:wrap}
.facts b{display:block;font:800 clamp(40px,5vw,72px)/1 var(--disp);letter-spacing:-.04em}
.places{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.places span{padding:10px 20px;border:1px solid #444;border-radius:100px;font:italic 400 22px var(--serif);transition:.4s var(--ease)}
.places span:hover{background:var(--w);color:var(--k);border-color:var(--w)}
.block{margin-top:70px}

/* Ausstellungen */
.rows{list-style:none;border-top:1px solid var(--line);margin:0 var(--pad)}
.rows li{display:grid;grid-template-columns:minmax(150px,.28fr) 1fr auto;gap:30px;align-items:baseline;padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--line);
  transition:padding .6s var(--ease),color .4s;color:var(--g)}
.rows li:hover{padding-left:24px;color:var(--w)}
.rows b{font:700 clamp(22px,2.6vw,38px) var(--disp);letter-spacing:-.02em}
.rows span{font:italic 400 clamp(20px,2vw,28px) var(--serif)}
.rows li.now em{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;background:var(--w);color:var(--k);padding:4px 10px;border-radius:100px;font-style:normal}
.note{padding:50px var(--pad) clamp(80px,10vw,150px);max-width:900px;color:#a8a8a8}

/* Kontakt */
.cf{padding:0 var(--pad) clamp(90px,12vw,180px)}
.cf-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,8vw,140px);align-items:start}
.cf-intro p:not(.mono){color:#c8c8c8;max-width:480px}
.cf-list{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.cf-list li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.cf-list a:hover{text-decoration:underline}
form{position:relative;display:grid;gap:30px}
.f{position:relative}
.f input,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #444;color:var(--w);font:400 24px var(--serif);padding:26px 0 10px;outline:0;border-radius:0;resize:vertical;transition:border-color .4s}
.f label{position:absolute;left:0;top:26px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g);pointer-events:none;transition:.45s var(--ease)}
.f input:focus,.f textarea:focus{border-color:var(--w)}
.f input:focus+label,.f textarea:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:not(:placeholder-shown)+label{top:0;font-size:10px;color:var(--w)}
.f.bad input,.f.bad textarea{border-color:#e0567a}
.topics{border:0;display:flex;flex-wrap:wrap;gap:10px}
.topics legend{margin-bottom:14px;padding:0}
.topics label{cursor:pointer;position:relative}
.topics input{position:absolute;opacity:0}
.topics span{display:inline-block;padding:10px 20px;border:1px solid #444;border-radius:100px;font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g);transition:.4s var(--ease)}
.topics label:hover span{border-color:var(--w);color:var(--w)}
.topics input:checked+span{background:var(--w);color:var(--k);border-color:var(--w)}
.topics input:focus-visible+span{outline:2px solid var(--w);outline-offset:3px}
.consent{display:flex;gap:14px;align-items:flex-start;font:400 16px/1.5 var(--serif);color:#b5b5b5;cursor:pointer}
.consent input{margin-top:5px;accent-color:#fff;width:16px;height:16px;flex:none}
.consent a{text-decoration:underline}
.err{color:#e0567a;min-height:1.4em}
.send{justify-self:start;margin-top:0}
.send[disabled]{opacity:.5;pointer-events:none}
.ok h3{font:800 clamp(44px,7vw,100px)/1 var(--disp);letter-spacing:-.04em;text-transform:uppercase}
.ok h3 em{font:italic 400 1em var(--serif);text-transform:none;color:var(--g)}
.ok p{margin-top:16px;color:#c8c8c8}

/* Navigationskacheln (Start) */
.tiles{border-top:1px solid var(--line);margin-top:clamp(80px,12vw,180px)}
.tiles a{display:flex;justify-content:space-between;align-items:center;padding:clamp(22px,3.4vw,46px) var(--pad);border-bottom:1px solid var(--line);
  font:800 clamp(36px,8vw,130px)/1 var(--disp);letter-spacing:-.045em;text-transform:uppercase;color:var(--g);transition:color .4s,padding .7s var(--ease),background .4s}
.tiles a span{font:400 12px var(--mono);letter-spacing:.16em;color:var(--g)}
.tiles a:hover{color:var(--k);background:var(--w);padding-left:calc(var(--pad) + 30px)}
.tiles a:hover span{color:var(--k)}

/* Fuß */
.contact{padding:clamp(80px,12vw,180px) var(--pad) 40px;background:var(--w);color:var(--k);border-radius:36px 36px 0 0;margin-top:clamp(60px,8vw,120px)}
.contact .big{display:block;font:800 clamp(44px,10.5vw,200px)/.9 var(--disp);letter-spacing:-.05em;text-transform:uppercase;transition:letter-spacing .8s var(--ease)}
.contact .big:hover{letter-spacing:-.02em}
.contact .big em{font:italic 400 1em var(--serif);text-transform:none;letter-spacing:-.03em}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;margin-top:clamp(50px,8vw,110px);padding-top:30px;border-top:1px solid #bbb;font-size:21px}
.cols .mono{color:#666;margin-bottom:8px}
.cols a:hover{text-decoration:underline}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:70px}
.foot .mono,.foot .mono a{color:#666}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:150;background:rgba(8,8,8,.97);display:grid;place-items:center;padding:56px 70px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-height:78vh;width:auto;max-width:100%;filter:grayscale(1);transition:filter .8s}
.lb img:hover{filter:none}
.lb .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:italic 400 24px var(--serif)}
.lb .cap small{font:400 12px var(--mono);letter-spacing:.16em;color:var(--g);margin-left:14px;font-style:normal}
.lb button{position:absolute;font:400 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:14px;color:var(--g);transition:color .3s}
.lb button:hover{color:var(--w)}
.lb .x{top:14px;right:18px}.lb .p{left:10px;top:50%}.lb .n{right:10px;top:50%}

@media (max-width:820px){
  nav a:nth-child(n+4){display:none}
  .about,.cf-in{grid-template-columns:1fr}
  .about .pt{position:static;max-width:420px}
  .rows li{grid-template-columns:1fr;gap:4px}
  .w{width:100%!important;margin:0!important;align-self:stretch!important}
  .w .num{display:none}
  .lb{padding:56px 10px}
  .lb .p,.lb .n{top:auto;bottom:60px}
  .hero .meta span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .curtain{display:none}
  .hero .frame .clip{clip-path:none}.hero .frame img{transform:none}.hero h1 i,.ph-head h1 i{transform:none}
  .hero .amb,.hero .meta,.ph-head .mono,.page-in{opacity:1;transform:none}
  .w .ph{clip-path:none}.w img{transform:none}.w figcaption{opacity:1;transform:none}.state .wd{opacity:1}
}


/* Lange Titel + Vorhang-Text passen immer in den Viewport */
.ph-head h1.long{font-size:clamp(28px,5.7vw,112px)}
.curtain span{font-size:clamp(28px,5.6vw,100px);white-space:nowrap;max-width:94vw}

/* Lesetext (Essay, Biografie) */
.read{max-width:760px;margin:0 auto;padding:0 var(--pad) clamp(70px,10vw,140px)}
.read .lead{font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-bottom:34px}
.read p{font:400 clamp(20px,1.7vw,24px)/1.7 var(--serif);color:#d4d4d4}
.read p+p{margin-top:1.2em}
.read p:nth-of-type(2)::first-letter{font:800 3.4em/.8 var(--disp);float:left;padding:.08em .12em 0 0;color:var(--w)}
.read .sign{font-style:italic;margin-top:2em;color:var(--g)}
.read-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:50px}
.read-nav .btn{margin-top:0}