/* ============ Schriften (selbst gehostet, DSGVO-freundlich) ============ */
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-moda-latin-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* ============ Basis ============ */
:root{--bg:#0a0a0a;--fg:#f2efe9;--mute:#8a857d;--line:#222;--gutter:24px}
*{box-sizing:border-box;margin:0;padding:0}
html.snap{scroll-snap-type:y mandatory}
body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.serif{font-family:"Instrument Serif",serif;font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Buchstaben-Mix */
.ch{display:inline-block}
.w{display:inline-block;white-space:nowrap}
.g1{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:700}
.g2{font-family:"Space Mono",monospace;font-weight:700}
.g8{font-family:"Instrument Serif",serif;font-style:italic}

/* ============ Seitenwechsel: weiche Überblendung statt hartem Schnitt ============ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in .6s cubic-bezier(.2,.7,.2,1) both}
::view-transition-group(*){animation-duration:.75s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* ============ Intro beim ersten Öffnen: Name erscheint, dann öffnet sich die Leinwand ============ */
.intro{display:none}
.intro-on .intro{display:block;position:fixed;inset:0;z-index:100;cursor:pointer}
.intro i{position:absolute;left:0;right:0;height:50.5%;background:#000;transition:transform 1.2s cubic-bezier(.76,0,.24,1)}
.intro .bar-t{top:0}
.intro .bar-b{bottom:0}
.intro-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:"Instrument Serif",serif;font-size:clamp(56px,11vw,180px);line-height:1;color:var(--fg);opacity:0;transition:opacity .8s ease,transform 1.1s cubic-bezier(.76,0,.24,1);z-index:1}
.intro.show .intro-name{opacity:1}
.intro.open .intro-name{opacity:0;transform:translateY(-60%)}
.intro.open .bar-t{transform:translateY(-100%)}
.intro.open .bar-b{transform:translateY(100%)}
.intro-on .frame:first-child img{transform:scale(1.14);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.intro-on.intro-done .frame:first-child.in img{transform:scale(1)}

/* ============ Header ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);mix-blend-mode:difference;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.site-header.hide{transform:translateY(-110%)}
.brand{display:flex;align-items:baseline;gap:14px}
.logo{font-family:"Instrument Serif",serif;font-size:26px;letter-spacing:-.01em;text-transform:none;white-space:nowrap}
.tag{opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.brand:hover .tag{opacity:.7;transform:none}
.nav{display:flex;gap:26px;align-items:center}
.nav>a:hover,.nav>a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}
.switch{display:flex;border:1px solid currentColor;border-radius:999px;padding:3px}
.switch a{padding:5px 11px;border-radius:999px}
.switch a[aria-current=page]{background:var(--fg);color:#000}

/* ============ Frames (Startseite) ============ */
.frame{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;overflow:hidden;display:block}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.frame.in img{transform:scale(1)}
/* Hochformat-Projekte: Triptychon aus drei 9:16-Bildern bzw. ein einzelnes wie ein Plakat */
.tri{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n,3),1fr);background:#000}
.frame .tri img,.icard .tri img{position:static;width:100%;height:100%;object-fit:cover;transform:none}
.frame .tri{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.frame.in .tri{transform:scale(1)}
.tri.solo{display:grid;place-items:center;grid-template-columns:1fr}
.frame .tri.solo img,.icard .tri.solo img{width:auto;height:88%;aspect-ratio:9/16}
.icard .tri{position:relative;height:100%}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 38%)}
.frame .meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:22px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.frame .title{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(44px,7.5vw,128px);line-height:.88}
.frame .client{display:block;font-size:.32em;font-style:italic;line-height:1.2;opacity:.85}
/* Kleines Raster unten rechts: führt zur Übersicht */
.to-index{position:fixed;right:var(--gutter);bottom:26px;z-index:40;display:grid;grid-template-columns:repeat(2,9px);gap:4px;padding:10px;margin:-10px;mix-blend-mode:difference}
.to-index i{width:9px;height:9px;border:1.5px solid #fff;transition:background .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.to-index:hover i{background:#fff}
.to-index:hover i:nth-child(1){transform:translate(-2px,-2px)}
.to-index:hover i:nth-child(2){transform:translate(2px,-2px)}
.to-index:hover i:nth-child(3){transform:translate(-2px,2px)}
.to-index:hover i:nth-child(4){transform:translate(2px,2px)}
.counter{position:fixed;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:40;writing-mode:vertical-rl;mix-blend-mode:difference}

/* ============ Work / Index ============ */
.index{padding:96px var(--gutter) 40px;min-height:100svh}
.index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
.index-head h1{font-size:clamp(44px,6vw,96px);line-height:.9}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{border:1px solid #444;border-radius:999px;padding:7px 12px}
.filters button[aria-pressed=true],.filters button:hover{background:var(--fg);color:#000;border-color:var(--fg)}
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 calc(-1*var(--gutter) + 6px)}
.icard{position:relative;display:block;overflow:hidden;background:#111}
.icard .pic{aspect-ratio:16/9}
.icard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .5s}
.icard:hover img{transform:scale(1.04);filter:brightness(.55)}
.icard .row{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:18px 20px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.icard:hover .row,.icard:focus-visible .row{opacity:1;transform:none}
.icard .title{font-family:"Instrument Serif",serif;font-size:clamp(28px,2.8vw,44px);line-height:.95}
.icard .row .mono{color:rgba(242,239,233,.75);white-space:nowrap}
@media (hover:none){
  .icard .row{opacity:1;transform:none;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
}
.icard[hidden]{display:none}
.empty{color:var(--mute);padding:40px 0}

/* ============ Projektseite: Kinoleinwand ============ */
.cinema{position:relative;min-height:100vh;min-height:100dvh;background:#000;display:grid;place-items:center;overflow:hidden}
.cinema .bar{position:absolute;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;z-index:3;transition:opacity .6s}
.cinema .bar.top{top:84px}
.cinema .bar.bottom{bottom:28px}
.cinema .bar a:hover{text-decoration:underline;text-underline-offset:4px}
.cinema h1{font-size:clamp(44px,6.5vw,110px);line-height:.88}
.cinema.playing .bar{opacity:0;pointer-events:none}
.cinema.playing:hover .bar.top{opacity:1;pointer-events:auto}
.player{position:relative;width:100%;height:calc(100vw / 2.39);max-height:100dvh;background:#000;overflow:hidden;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.cinema.playing .player{height:min(calc(100vw * 9 / 16), 100dvh)}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;transition:filter .6s}
.player:hover .poster{filter:brightness(.8)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Play mittig auf der Leinwand: dezent, erscheint beim Hovern */
.pplay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:none;border:0;padding:0;color:#fff;cursor:pointer}
.pplay .g{display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .4s}
.pplay .ring{display:block;line-height:0}
.pplay .ring svg{width:14px;height:17px}
.pplay .lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.player:hover .pplay .g,.pplay:focus-visible .g{opacity:1}
.cinema.playing .pplay{display:none}
@media (hover:none){.pplay .g{opacity:1}}
.play{display:flex;align-items:center;gap:14px}
.play .btn{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--fg);display:grid;place-items:center;transition:background .2s}
.play:hover .btn{background:var(--fg)}
.play:hover .btn path{fill:#000}
/* Shorts (9:16) */
.shorts{display:flex;gap:10px;justify-content:center}
.short{position:relative;flex:0 0 auto;aspect-ratio:9/16;height:min(62vh,560px);background:#111;overflow:hidden;cursor:pointer}
.shorts.big .short{height:min(72vh,720px)}
.short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s}
.short:hover img{filter:brightness(.75)}
.short iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sp{position:absolute;inset:0;display:grid;place-items:center}
.sp .btn{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--fg);display:grid;place-items:center;transition:background .2s}
.short:hover .sp .btn{background:var(--fg)}
.short:hover .sp path{fill:#000}
.short.playing .sp{display:none}
.cinema.vertical{padding:140px var(--gutter) 150px}
.p-shorts{padding:0 var(--gutter) 72px}

/* Grading-Palette: schmaler Farbstreifen direkt unter der Leinwand */
.grade-bar{display:flex;height:10px;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.grade-bar:hover{height:22px}
.swatch{flex:var(--w,1) 1 0;min-width:12px}
.swatch span{display:none}
/* Infos unter der Leinwand: eine ruhige Liste */
.p-info{padding:64px var(--gutter) 72px;display:grid;gap:48px}
.p-info dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.p-info dt{color:var(--mute);margin-bottom:8px}
.p-info dd{font-family:"Instrument Serif",serif;font-size:clamp(22px,1.9vw,30px);line-height:1.1}
.p-text{font-family:"Instrument Serif",serif;font-size:clamp(24px,2.4vw,38px);line-height:1.15;max-width:900px}
/* Stills im natürlichen Format, zwei Spalten */
.p-stills{columns:2;column-gap:8px;padding:0 8px}
.p-stills img{width:100%;height:auto;margin-bottom:8px;break-inside:avoid}
.p-stills.one{columns:1}
/* Nächstes Projekt: unscharf → scharf, Linie füllt sich, dann geht es weiter */
.next{position:relative;display:block;height:70vh;min-height:340px;margin-top:80px;overflow:hidden;background:#000}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.35) blur(3px);transform:scale(1.08);transition:filter .9s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.next:hover img{filter:brightness(.85) blur(0);transform:scale(1)}
.next .t{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;text-align:center;padding:0 var(--gutter)}
.next .lbl{color:rgba(242,239,233,.7)}
.next .title{font-family:"Instrument Serif",serif;font-size:clamp(44px,7.5vw,128px);line-height:.9}
.next .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--fg)}
.next.loading .prog{width:100%;transition:width 1.8s linear}

/* ============ About ============ */
.about-wrap{position:relative;min-height:100svh;overflow:hidden}
.rain{position:absolute;inset:0;z-index:0}
.drop{position:absolute;left:0;top:0;cursor:grab;user-select:none;touch-action:none;will-change:transform;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.drop.drag{cursor:grabbing;box-shadow:0 26px 50px rgba(0,0,0,.8)}
.drop img,.drop video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.about{position:relative;z-index:1;pointer-events:none;display:flex;justify-content:center;align-items:center;gap:56px;padding:140px var(--gutter) 90px;min-height:100svh}
.about h1{position:absolute;left:var(--gutter);top:110px;font-size:clamp(44px,6vw,96px);line-height:.9}
.portrait{flex:0 0 clamp(240px,24vw,340px);pointer-events:auto;box-shadow:0 30px 60px rgba(0,0,0,.7)}
.portrait img{width:100%;height:auto}
.facts{color:var(--mute);line-height:2.1;text-shadow:0 1px 10px #000}
.facts b{color:var(--fg);font-weight:400}
.facts a{pointer-events:auto;color:var(--fg)}
.who{font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--fg);text-transform:none;letter-spacing:0}
.sub{font-style:italic;font-size:22px;color:var(--fg);text-transform:none;letter-spacing:0;margin-bottom:14px}
.about h1,.portrait,.facts{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.portrait{animation-delay:.12s}
.facts{animation-delay:.24s}

/* ============ Rechtliches ============ */
.legal{max-width:760px;padding:120px var(--gutter) 80px;line-height:1.7}
.legal h1{font-size:clamp(44px,6vw,96px);line-height:.9;margin-bottom:40px}
.legal h2{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:32px 0 8px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .todo{border:1px dashed #555;padding:16px;color:var(--mute);margin-top:24px}

/* ============ Footer ============ */
.site-footer{padding:60px var(--gutter) 22px;scroll-snap-align:end}
.mail{display:block;font-family:"Instrument Serif",serif;font-size:clamp(34px,7.4vw,124px);line-height:.95;padding:40px 0 30px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mute)}
.foot a:hover{color:var(--fg)}
.foot .links{display:flex;gap:20px;flex-wrap:wrap}

/* ============ Mobil ============ */
@media (max-width:720px){
  :root{--gutter:16px}
  .site-header{padding:14px var(--gutter);align-items:flex-start}
  .logo{font-size:22px}
  .brand{flex-direction:column;gap:2px}
  .tag{display:none}
  .nav{gap:12px}
  .frame .meta{flex-direction:column;align-items:flex-start}
  .counter{display:none}
  .tri:not(.solo){grid-template-columns:1fr}
  .tri:not(.solo) img:not(:first-child){display:none}
  .frame .tri.solo img{width:100%;height:100%}
  .shorts{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter)}
  .short,.shorts.big .short{height:auto;width:72vw;scroll-snap-align:center}
  .cinema.vertical{padding:130px 0 150px}
  .cinema.vertical .shorts{margin:0;width:100%}
  .index{padding-top:84px}
  .igrid{grid-template-columns:1fr}
  .cinema{min-height:auto;padding:140px 0 210px}
  .cinema .bar.top{top:76px}
  .cinema .bar.bottom{flex-direction:column;align-items:flex-start;bottom:20px}
  .p-info{padding:44px var(--gutter) 52px;gap:32px}
  .p-info dl{grid-template-columns:1fr 1fr}
  .p-stills{columns:1}
  .next{height:50vh}
  .about{flex-direction:column;text-align:center;padding:180px var(--gutter) 60px;gap:28px}
  .about h1{top:84px}
  .portrait{flex:none;width:70%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}