/* Vesena · Film auf der Startseite (P40, 10.11.2026) · Tokens aus vesena.css */
.film{display:flex;flex-direction:column;align-items:center;padding:clamp(28px,5vw,72px) var(--rand) clamp(12px,2.4vw,32px)}
.film-rahmen{position:relative;width:100%;max-width:1120px}
.film-rahmen::before{content:"";position:absolute;inset:6% 4% -2%;border-radius:var(--r-platte);background:var(--licht);opacity:.42;filter:blur(46px);z-index:0;pointer-events:none}
.film-platte{position:relative;z-index:1;aspect-ratio:16/9;border-radius:clamp(var(--r-innen),3vw,var(--r-platte));background:var(--platte);box-shadow:var(--schatten);overflow:hidden;isolation:isolate}
.film-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--buehne)}
.film-start{position:absolute;inset:0;z-index:2;display:block;width:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.film-start[hidden]{display:none}
.film-start:focus-visible{outline-offset:-6px;border-radius:clamp(var(--r-innen),3vw,var(--r-platte))}
.film-pille{position:absolute;left:clamp(12px,2.4vw,28px);bottom:clamp(12px,2.4vw,28px);display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px 0 8px;border-radius:var(--r-pille);background:var(--tinte);color:#fff;font:600 16px/1 var(--text);letter-spacing:-.01em;transition:box-shadow .3s,transform .5s var(--raus)}
.film-start:hover .film-pille{box-shadow:0 0 0 5px rgba(139,151,245,.35);transform:translateY(-1px)}
.film-dreieck{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--tinte)}
.film-dreieck svg{margin-left:2px}
.film-dauer{font-weight:500;color:var(--nacht-2);font-variant-numeric:tabular-nums}
.film-zeile{position:relative;z-index:1;margin-top:clamp(14px,1.8vw,22px);font-size:15px;line-height:1.5;color:var(--tinte-2);text-align:center}
.film-video::cue{font-family:"Inter",system-ui,sans-serif;color:#fff;background:rgba(5,5,6,.78)}
@media (max-width:760px){
  .film-pille{height:40px;gap:9px;padding:0 15px 0 5px;font-size:14px}
  .film-dreieck{width:30px;height:30px}
  .film-dreieck svg{width:12px;height:12px}
  .film-rahmen::before{filter:blur(28px);opacity:.36}
  .film-zeile{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.film-pille{transition:none}.film-start:hover .film-pille{transform:none}}