dialog.vol{background:var(--navy);width:100vw;max-width:none;height:100dvh;max-height:none;color:var(--wit);font-family:var(--font);border:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}dialog.vol[open]{grid-template-rows:auto minmax(0,1fr);display:grid}dialog.vol::backdrop{background:var(--navy)}html.heeft-vol{overflow:hidden}.vol__strook{min-height:60px;padding:8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));background:var(--navy);border-bottom:2px solid #ffffff26;justify-content:space-between;align-items:center;gap:12px;display:flex}.vol__kop{flex-wrap:wrap;align-items:center;gap:4px 18px;min-width:0;display:flex}.vol__naam{color:var(--wit);font-size:var(--tekst-m);letter-spacing:-.01em;margin:0;font-weight:800;line-height:1.2}.vol__label{min-width:0;max-width:none;color:var(--wit);font-size:var(--tekst-xs);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:8px;margin:0;font-weight:700;line-height:1.25;display:inline-flex}.vol__label:empty{visibility:hidden}.vol__stip{background:var(--accent-op-donker);width:10px;height:10px;box-shadow:0 0 0 2px var(--wit);border-radius:50%;flex:none}.vol__knoppen{flex:none;gap:10px;display:flex}.vol__knop{border-radius:var(--radius-pil);background:var(--wit);min-height:44px;color:var(--navy);font:inherit;font-size:var(--tekst-s);white-space:nowrap;cursor:pointer;border:0;padding:8px 18px;font-weight:700;line-height:1.2}.vol__knop:hover{background-color:var(--achtergrond)}.vol__knop:focus-visible{outline:3px solid var(--accent-op-donker);outline-offset:3px}.vol__lichaam{min-height:0;position:relative;overflow:hidden}html[data-stijl=film] .vol__knop{box-shadow:0 0 0 3px var(--film-navy), 4px 5px 0 3px var(--film-cyaan-op-navy);font-weight:800;transition:transform .15s,box-shadow .15s}html[data-stijl=film] .vol__knop:hover{background-color:var(--wit);box-shadow:0 0 0 3px var(--film-navy), 6px 7px 0 3px var(--film-cyaan-op-navy);transform:translate(-1px,-1px)}@media (prefers-reduced-motion:reduce){html[data-stijl=film] .vol__knop{transition:none}html[data-stijl=film] .vol__knop:hover{transform:none}}.vol__lichaam>.scherm{overscroll-behavior:contain;position:absolute;inset:0;overflow:auto}.scherm__frame{background:var(--navy);border:0;width:100%;height:100%;display:block}@media (width<=700px),(height<=520px){.vol__strook{min-height:52px;padding:max(4px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));gap:10px}.vol__kop{gap:2px 12px}.vol__naam{font-size:var(--tekst-s)}.vol__label{-webkit-line-clamp:3;letter-spacing:.03em;-webkit-box-orient:vertical;font-size:10px;line-height:1.3;display:-webkit-box;overflow:hidden}.vol__stip{display:none}.vol__knoppen{gap:8px}.vol__knop{min-height:44px;padding:8px 14px}.vol__knop--vol{background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001a40' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 20px no-repeat;width:44px;padding:0;font-size:0}html[data-stijl=film] .vol__knop:hover{background-color:var(--wit)}}@media (width<=600px){.vol__naam{display:none}}dialog.vol--demo .demo{max-width:none;margin:0;display:block;position:absolute;inset:0}dialog.vol--demo .demo__kolom{position:absolute;inset:0}dialog.vol--demo .demo__kolom .herkomst-pil{display:none}dialog.vol--demo .demo__ruimte{box-shadow:none;border-radius:0;position:absolute;inset:0}dialog.vol--demo .demo__ruimte .demo__still{aspect-ratio:auto;height:100%}dialog.vol--demo .demo__paneel{z-index:3;overscroll-behavior:contain;align-content:start;width:min(420px,38vw);position:absolute;top:16px;bottom:16px;right:16px;overflow-y:auto}@media (width<=800px){dialog.vol--demo .demo__kolom{bottom:50%}dialog.vol--demo .demo__paneel{width:auto;box-shadow:none;border-radius:0;inset:50% 0 0}}@media (height<=520px) and (orientation:landscape){dialog.vol--demo .demo__kolom{right:min(400px,44vw)}dialog.vol--demo .demo__paneel{width:min(400px,44vw);box-shadow:none;border-radius:0;top:0;bottom:0;right:0}}
