.b-film__buhne{position:relative;max-width:60rem;margin-inline:auto;padding-block:clamp(1rem,calc(3*var(--vw)),2rem)}
.b-film__band{position:absolute;z-index:0;left:-4%;right:-4%;top:18%;bottom:18%;background:var(--b-bordeaux);
border-radius:var(--b-r-kaart);transform:skewY(-3deg)}
.b-film__scherm{position:relative;z-index:1;aspect-ratio:16/9;overflow:hidden;border-radius:var(--b-r-media);
background:var(--b-donker);box-shadow:var(--b-schaduw)}
.b-film__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--b-ease)}
.b-film__scherm::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.45))}
.b-film__scherm.is-aan::after{content:none}
.b-film__scherm iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.b-film__knop{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:clamp(5.5rem,4rem + calc(6*var(--vw)),8.5rem);
aspect-ratio:1;border-radius:50%;color:#fff;text-decoration:none;translate:-50% -50%}
.b-film__knop::before{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--b-actie);
box-shadow:0 12px 30px -10px rgba(10,10,10,.55);transition:transform .4s var(--b-ease),background-color .3s}
.b-film__knop:focus-visible{outline:3px solid #fff;outline-offset:4px}
.b-film__boog{position:absolute;inset:0;transition:transform .6s var(--b-ease)}
.b-film__boog svg{display:block;width:100%;height:100%;overflow:visible}
.b-film__boog path{fill:none;stroke:var(--b-signaal);stroke-width:5;stroke-linecap:round}
.b-film__play{position:relative;width:34%;height:34%;margin-left:6%;fill:currentColor}
.b-film__duur{position:absolute;z-index:2;right:clamp(.8rem,calc(2*var(--vw)),1.2rem);bottom:clamp(.8rem,calc(2*var(--vw)),1.2rem);padding:.3rem .6rem;
border:2px solid #fff;border-radius:var(--b-r-control);color:#fff;font:700 .95rem/1 var(--font-titel);
font-variant-numeric:tabular-nums;letter-spacing:.04em;transform:rotate(-4deg)}
.b-film__noot{max-width:60rem;margin:1.2rem auto 0;color:var(--b-zacht);font-size:.9rem;line-height:1.5;text-align:center}
@media (hover:hover){
.b-film__scherm:hover .b-film__poster{transform:scale(1.04)}
.b-film__knop:hover::before{transform:scale(1.08);background:var(--b-actie-hover)}
.b-film__knop:hover .b-film__boog{transform:rotate(90deg)}
}
.b-film__knop:focus-visible .b-film__boog{transform:rotate(90deg)}
@media (max-width:600px){
.b-film__band{left:-2%;right:-2%;top:10%;bottom:10%}
}
@media (prefers-reduced-motion:reduce){
.b-film__poster,.b-film__boog,.b-film__knop::before{transition:none}
}