/* Projektseite */
.p-head{padding:clamp(130px,18vh,200px) var(--pad) clamp(36px,5vw,64px)}
.p-head .back{font-size:14px;opacity:.55;transition:opacity .3s}
.p-head .back:hover{opacity:1}
.p-head h1{font-weight:300;font-size:clamp(48px,9vw,150px);line-height:.95;letter-spacing:-.045em;margin-top:clamp(28px,4vw,48px)}
.p-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(18px,2vw,28px);font-size:15px;color:var(--mute)}

.p-film{padding:0 var(--pad)}
.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:clamp(10px,1.4vw,20px);overflow:hidden;background:#0e0e0e}
.player video{width:100%;height:100%;object-fit:cover;display:block}
.player .ctl{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);display:flex;align-items:center;gap:12px;font-size:14px;color:#fff}
.player .ctl span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center}
.player .ctl span::before{content:"";width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
.player.paused .ctl span::before{width:0;height:0;border-right:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.player .ctl em{font-style:normal}
.player .snd{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);height:46px;padding:0 18px;border-radius:23px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:14px}

/* Hochformat (9:16): mittig, viel Weiß, nie größer als der Bildschirm */
.player.v{aspect-ratio:9/16;width:min(440px,100%,calc(86svh*9/16));margin:0 auto}

/* Weitere Filme zum Projekt */
.clips{padding:clamp(90px,12vw,160px) var(--pad) 0}
.clips .row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,64px)}
.clips figure{width:min(300px,100%)}
.clips video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:clamp(10px,1.4vw,18px);background:#0e0e0e}
.clips figcaption{margin-top:14px;font-size:15px}
.clips figcaption small{display:block;color:var(--mute);font-size:13px;margin-top:2px}

.p-story{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);padding:clamp(90px,12vw,160px) var(--pad)}
.p-story p{font-size:clamp(24px,2.6vw,40px);line-height:1.28;letter-spacing:-.025em}
.facts{list-style:none;font-size:15px;line-height:1.6;align-self:end}
.facts li{display:flex;justify-content:space-between;gap:20px;padding:12px 0}
.facts li span:first-child{color:var(--mute)}
.facts li span:last-child{text-align:right}

.stills{display:grid;gap:clamp(16px,2.4vw,36px);padding:0 var(--pad)}
.stills figure{overflow:hidden;border-radius:clamp(10px,1.4vw,20px)}
.stills img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.stills figure.in img{transform:scale(1)}
.stills .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}

.credits{padding:clamp(70px,9vw,120px) var(--pad) 0;font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px 32px}
.credits b{color:var(--ink);font-weight:400}

.next{padding:clamp(100px,14vw,190px) var(--pad)}
.next a{display:block}
.next h2{font-weight:300;font-size:clamp(48px,9vw,150px);line-height:.95;letter-spacing:-.045em;transition:opacity .4s}
.next h2 .arrow{color:var(--accent);display:inline-block;transition:transform .5s var(--ease)}
.next a:hover .arrow{transform:translate(.08em,-.08em)}
.next .all{display:inline-block;margin-top:clamp(28px,3vw,40px);font-size:15px;opacity:.55;transition:opacity .3s}
.next .all:hover{opacity:1}

@media (max-width:820px){
  .p-story{grid-template-columns:minmax(0,1fr)}
  .stills .pair{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.stills img{transform:none}}

/* Foto-Hero (Projekte ohne Film) */
.p-hero{padding:0 var(--pad)}
.p-hero figure{overflow:hidden;border-radius:clamp(10px,1.4vw,20px)}
.p-hero img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}