/* Videoblok met afspeelknop  -  SUE Behavioural Design
   Eén thumbnail met knop; het YouTube-venster (youtube-nocookie) laadt pas bij een klik,
   zodat de pagina snel blijft en de cookiebanner-flow ongemoeid blijft (31 okt 2026).
   Gebruik: <figure class="vf" data-yt="ID" data-title="..." data-lang="nl"> (zie assets/js/video-facade.js). */
.vf{margin:2rem 0;max-width:100%}
.vf-speler{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;text-decoration:none}
.vf-speler img,.vf-speler iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.vf-speler img{transition:transform .35s ease}
.vf-speler:hover img,.vf-speler:focus-visible img{transform:scale(1.02)}
.vf-speler:focus-visible{outline:3px solid #FF5A5F;outline-offset:3px}
.vf-knop{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#FF5A5F;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .2s ease}
.vf-knop::after{content:"";position:absolute;left:50%;top:50%;margin:-14px 0 0 -9px;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff}
.vf-speler:hover .vf-knop,.vf-speler:focus-visible .vf-knop{transform:scale(1.08)}
.vf-duur{position:absolute;right:12px;bottom:12px;padding:3px 9px;border-radius:4px;background:#fff;border:1px solid #000;color:#000;font:600 .9rem/1.4 'Open Sans',sans-serif}
.vf figcaption{margin-top:.75rem;font:400 1rem/1.5 'Open Sans',sans-serif;color:#000}
/* De tekst van de video: ingeklapt, voor wie liever leest en voor zoekmachines */
.vf-tekst{margin:1.25rem 0 2rem;border-top:1px solid #e4e0da;border-bottom:1px solid #e4e0da}
.vf-tekst summary{padding:.9rem 0;font:700 1rem/1.4 'Open Sans',sans-serif;color:#000;cursor:pointer}
.vf-tekst summary:focus-visible{outline:3px solid #FF5A5F;outline-offset:2px}
.vf-tekst-in{padding:0 0 .5rem}
.vf-tekst-in p{margin:0 0 1rem;color:#000}
.vf.vf-hub{max-width:880px;margin:56px 0 0}
.vf-hub-link{margin:.5rem 0 0;font:600 1rem/1.5 'Open Sans',sans-serif}
.vf-hub-link a{color:#FF5A5F;text-decoration:underline}
@media (max-width:640px){
  .vf.vf-hub{margin:36px 0 0}
  .vf{margin:1.5rem 0}
  .vf-knop{width:64px;height:64px;margin:-32px 0 0 -32px}
  .vf-knop::after{margin:-12px 0 0 -8px;border-width:12px 0 12px 20px}
}
@media (prefers-reduced-motion:reduce){.vf-speler img,.vf-knop{transition:none}}