/* Startseite · Film 16:9 (11.10.2026): Showcase-Szene aus assets/itq-film.js (gleich wie das MP4 brand/video/itquiz-film) als Video-Player.
   Leiste unten (Play/Pause, Zeitleiste zum Springen, Zeit) erscheint beim Darüberfahren, auf Touch-Geräten und wenn angehalten; grosser Play-Knopf nur angehalten. */
.film .fl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:44px}
.film .fl-head p{max-width:440px;margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.fl-box{position:relative;width:100%;max-width:1280px;margin-inline:auto;aspect-ratio:16/9;border-radius:30px;overflow:hidden;background:#1c0610;box-shadow:0 60px 100px -50px rgba(40,3,15,.6),0 0 0 1px rgba(40,3,15,.06)}
.fl-screen{position:absolute;inset:0;cursor:pointer}
.fl-ui{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(20,4,10,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;opacity:0;transition:opacity .3s}
.fl-box:hover .fl-ui,.fl-box:focus-within .fl-ui,.fl-box[data-st="pause"] .fl-ui{opacity:1}
.fl-pp{flex:none;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--sun);color:var(--ink);cursor:pointer}
.fl-pp:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fl-pp svg{width:15px;height:15px}.fl-pp .pl{display:none}.fl-box[data-st="pause"] .fl-pp .pl{display:block}.fl-box[data-st="pause"] .fl-pp .pa{display:none}
.fl-bar{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.25);cursor:pointer}
.fl-bar::before{content:"";position:absolute;inset:-10px 0}
.fl-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:3px;background:var(--sun)}
.fl-time{flex:none;font:500 13px var(--mono);color:rgba(255,255,255,.88)}
.fl-big{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--sun);color:var(--ink);pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s;box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}
.fl-big svg{width:30px;height:30px;margin-left:4px}
.fl-box[data-st="pause"] .fl-big{opacity:1;transform:none}
@media (hover:none){.fl-ui{opacity:1}}
@media (max-width:760px){
  .film .fl-head{margin-bottom:26px}
  .fl-box{border-radius:18px}
  .fl-ui{left:8px;right:8px;bottom:8px;gap:10px;padding:5px 12px 5px 5px}.fl-pp{width:32px;height:32px}.fl-pp svg{width:12px;height:12px}.fl-time{font-size:11px}
  .fl-big{width:60px;height:60px;margin:-30px 0 0 -30px}.fl-big svg{width:20px;height:20px}
}
/* Ton-Knopf (11.10.2026): aus, bis man ihn einschaltet (Browser spielen automatisch nur stumm ab) */
.fl-snd{flex:none;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .2s}
.fl-snd:hover{background:rgba(255,255,255,.24)}.fl-snd:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.fl-snd svg{width:17px;height:17px}.fl-snd .sn{display:none}.fl-box[data-snd="on"] .fl-snd .sn{display:block}.fl-box[data-snd="on"] .fl-snd .so{display:none}
.fl-box[data-snd="on"] .fl-snd{background:var(--sun);color:var(--ink)}
.fl-snd.wait{opacity:.5;pointer-events:none}
@media (max-width:760px){.fl-snd{width:30px;height:30px}.fl-snd svg{width:14px;height:14px}}