/* Kopbeelden van de ontwikkelpagina's (Henrik 09-11): Nulmetingen en toetsen (.nw-beeld), E-learning (.el-beeld), Educatieve
   games (.eg-beeld) en Video ontwikkelen (.vd-beeld). Familie van het Test IT-beeld: venster 16:9 r12, titelbalk in inkt (titel links, de stap erachter, drie
   stipjes rechts), daarin een witte kaart met skeletvormen; alle maten in --u = 1/584 van de breedte, dus op elke breedte gelijk.
   Getekend naar het echte product, woordloos. De html in de pagina is het eindbeeld; het verhaal staat in testit-kopbeelden.js. */

/* Met script (html.lk-js) wacht het beeld tot het script het op de eerste stap heeft gezet (.kb-gereed), zodat het eindbeeld niet
   even opflitst. Vangnet: draait het script niet, dan verschijnt na 3 s alsnog het eindbeeld. */
html.lk-js :is(.nw-beeld,.el-beeld,.eg-beeld,.vd-beeld):not(.kb-gereed){visibility:hidden;animation:kb-vangnet 0s 3s forwards}
@keyframes kb-vangnet{to{visibility:visible}}

/* ---------- Nulmetingen en toetsen ---------- */
.nw-beeld{position:relative;container-type:inline-size}
.nw-venster{--u:calc(100cqw / 584);aspect-ratio:16/9;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:rgb(210,218,227) 0 0 0 1px,rgba(70,85,110,.36) 0 22px 40px -20px}
.nw-balk{display:flex;align-items:center;gap:calc(6*var(--u));background:var(--wp--preset--color--inkt);padding:calc(10*var(--u)) calc(14*var(--u))}
.nw-balk i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.nw-balk span,.nw-balk em{font-size:calc(12*var(--u));line-height:calc(16*var(--u));font-style:normal}
.nw-balk span{order:-2;color:rgb(219,227,241);font-weight:600}
.nw-balk em{order:-1;margin-right:auto;color:rgba(219,227,241,.6);transition:opacity .25s}
.nw-balk em::before{content:"·";display:inline-block;margin-right:calc(6*var(--u))}
.nw-romp{position:relative;flex:1 1 0;min-height:0;background:rgb(245,248,251)}
.nw-scherm{position:absolute;inset:calc(14*var(--u));background:var(--wp--preset--color--base);border-radius:calc(12*var(--u));box-shadow:rgba(70,85,110,.14) 0 1px 3px;padding:calc(24*var(--u)) calc(26*var(--u));opacity:0;transition:opacity .45s}
.nw-scherm.nw-aan{opacity:1}
.nw-titel{display:block;height:calc(11*var(--u));border-radius:calc(5*var(--u));background:var(--wp--preset--color--inkt);width:62%}
.nw-regel{display:block;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);width:78%;margin-top:calc(10*var(--u))}
.nw-regel.kort{width:56%;margin-top:calc(6*var(--u))}
.nw-keuzes{margin-top:calc(22*var(--u));display:grid;gap:calc(12*var(--u));width:72%}
.nw-keuze{position:relative;height:calc(30*var(--u));border-radius:99px;background:rgb(245,248,251);box-shadow:inset 0 0 0 1px rgb(195,207,219);transition:background .2s,box-shadow .2s,transform .15s}
.nw-keuze::before{content:"";position:absolute;left:calc(9*var(--u));top:50%;translate:0 -50%;width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgb(150,166,184);background:#fff;transition:box-shadow .2s}
.nw-keuze::after{content:"";position:absolute;left:calc(30*var(--u));top:50%;translate:0 -50%;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);width:var(--b,45%)}
.nw-keuze.nw-gekozen{background:var(--wp--preset--color--merk-licht);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--merk)}
.nw-keuze.nw-gekozen::before{box-shadow:inset 0 0 0 calc(3.5*var(--u)) var(--wp--preset--color--merk)}
.nw-gf{display:flex;justify-content:center;gap:calc(28*var(--u));margin-top:calc(26*var(--u))}
.nw-knop{position:relative;width:calc(92*var(--u));height:calc(92*var(--u));border-radius:50%;background:rgb(245,248,251);box-shadow:inset 0 0 0 1px rgb(195,207,219);transition:background .2s,box-shadow .2s,transform .15s}
.nw-knop::before{content:"";position:absolute;inset:0;background:var(--wp--preset--color--inkt);-webkit-mask:var(--ico) no-repeat center/calc(36*var(--u));mask:var(--ico) no-repeat center/calc(36*var(--u));transition:background .2s}
.nw-knop.goed{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.75'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E")}.nw-knop.fout{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.75'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6.5%206.5l11%2011M17.5%206.5l-11%2011'%2F%3E%3C%2Fsvg%3E")}
.nw-knop.nw-gekozen{background:var(--wp--preset--color--merk-licht);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--merk)}
.nw-knop.nw-gekozen::before{background:var(--wp--preset--color--merk)}
.nw-plaat{position:relative;margin-top:calc(16*var(--u));height:calc(150*var(--u));width:76%;border-radius:calc(8*var(--u));background:#fff;box-shadow:inset 0 0 0 1px rgb(195,207,219);overflow:hidden}
.nw-app{display:block;height:calc(14*var(--u));background:rgb(214,223,233)}
.nw-lint{display:flex;align-items:center;gap:calc(6*var(--u));height:calc(34*var(--u));padding:0 calc(10*var(--u));background:rgb(245,248,251);border-bottom:1px solid rgb(225,231,238)}
.nw-lint i{position:relative;width:calc(24*var(--u));height:calc(24*var(--u));border-radius:calc(5*var(--u));display:grid;place-items:center;font:700 calc(14*var(--u))/1 Figtree,sans-serif;color:var(--wp--preset--color--inkt);font-style:normal;transition:background .2s,color .2s,transform .15s}
.nw-lint i.cursief{font-style:italic;font-weight:600}
.nw-lint i.onder{text-decoration:underline;font-weight:600;text-underline-offset:calc(2*var(--u))}
.nw-lint i.uitlijn::before{content:"";position:absolute;inset:0;background:var(--wp--preset--color--inkt);-webkit-mask:var(--ico) no-repeat center/calc(16*var(--u));mask:var(--ico) no-repeat center/calc(16*var(--u))}
.nw-lint i.links{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.75'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%206h16M4%2010h10M4%2014h16M4%2018h10'%2F%3E%3C%2Fsvg%3E")}.nw-lint i.midden{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.75'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%206h16M7%2010h10M4%2014h16M7%2018h10'%2F%3E%3C%2Fsvg%3E")}
.nw-lint span{width:1px;height:calc(16*var(--u));background:rgb(210,218,227);margin:0 calc(4*var(--u))}
.nw-plaat.nw-vet .nw-lint i.doel{background:var(--wp--preset--color--merk-licht);color:var(--wp--preset--color--merk-tekst)}
.nw-doc{padding:calc(14*var(--u)) calc(16*var(--u))}
.nw-doc s{display:block;height:calc(6*var(--u));border-radius:calc(3*var(--u));background:var(--wp--preset--color--lijn);margin-top:calc(9*var(--u));text-decoration:none}
.nw-doc s.h{height:calc(8*var(--u));width:40%;background:var(--wp--preset--color--inkt);margin-top:0}
.nw-zin{display:flex;align-items:center;gap:calc(5*var(--u));margin-top:calc(9*var(--u))}
.nw-zin s{margin:0;flex:none}
.nw-zin mark{display:flex;align-items:center;height:calc(14*var(--u));padding:0 calc(3*var(--u));border-radius:calc(2*var(--u));background:#cfe2f3}
.nw-zin mark s{width:calc(58*var(--u));background:rgb(150,166,184);transition:height .2s,background .2s}
.nw-plaat.nw-vet .nw-zin mark s{height:calc(8*var(--u));background:var(--wp--preset--color--inkt)}
.nw-ring{position:absolute;width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(2.5*var(--u)) var(--wp--preset--color--merk);translate:-50% -50%;opacity:0;transform:scale(.3)}
.nw-ring.nw-aan{animation:nw-ring .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes nw-ring{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:1;transform:scale(1)}}
.nw-druk{transform:scale(.95)}
.nw-uitslag{background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:calc(24*var(--u));padding:0}
.nw-tegel{width:calc(196*var(--u));background:#fff;border-radius:calc(12*var(--u));box-shadow:rgba(70,85,110,.14) 0 1px 3px;padding:calc(18*var(--u)) calc(18*var(--u)) calc(16*var(--u));text-align:center;opacity:0;transform:translateY(calc(10*var(--u)));transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.nw-tegel+.nw-tegel{transition-delay:.18s}
.nw-uitslag.nw-aan .nw-tegel{opacity:1;transform:none}
.nw-vlak{position:relative;height:calc(150*var(--u));border-radius:calc(8*var(--u));background:rgb(245,248,251);display:flex;align-items:center;justify-content:center}
.nw-weg{width:calc(56*var(--u));height:calc(56*var(--u));background:var(--wp--preset--color--merk);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'1%201%2022%2022'%3E%3Cpath%20d%3D'M13%2010h5l3-3-3-3h-5V2h-2v2H4v6h7v2H6l-3%203%203%203h5v4h2v-4h7v-6h-7z'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'1%201%2022%2022'%3E%3Cpath%20d%3D'M13%2010h5l3-3-3-3h-5V2h-2v2H4v6h7v2H6l-3%203%203%203h5v4h2v-4h7v-6h-7z'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.nw-cert{position:relative;width:calc(92*var(--u));height:calc(122*var(--u));background:#fff;border:1.5px solid #c3cfdb;border-radius:calc(4*var(--u));box-sizing:border-box}
.nw-cert s{position:absolute;left:calc(13*var(--u));height:calc(6*var(--u));border-radius:calc(3*var(--u));background:var(--wp--preset--color--lijn);text-decoration:none}
.nw-cert s.kop{height:calc(7*var(--u));background:var(--wp--preset--color--inkt)}
.nw-cert u{position:absolute;right:calc(12*var(--u));bottom:calc(12*var(--u));width:calc(20*var(--u));height:calc(25*var(--u));background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'3%201%2018%2022'%3E%3Cpath%20fill%3D'%23009d80'%20d%3D'M8.2%2012.6%206.5%2022l5.5-3%205.5%203-1.7-9.4z'%20opacity%3D'.75'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'8.5'%20r%3D'6.5'%20fill%3D'%23009d80'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'8.5'%20r%3D'3.6'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'1.6'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.nw-tegel p{margin:calc(12*var(--u)) 0 0;font-size:max(11px,calc(15*var(--u)));line-height:1.2;font-weight:700;color:var(--wp--preset--color--inkt)}
.nw-cursor{position:absolute;left:0;top:0;width:calc(18*var(--u));height:calc(24*var(--u));z-index:5;opacity:0;pointer-events:none;transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .3s}
.nw-cursor path{fill:var(--wp--preset--color--inkt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.nw-beeld *{transition:none!important;animation:none!important}}

/* ---------- E-learning ---------- */
.el-beeld{position:relative;container-type:inline-size}
.el-venster{--u:calc(100cqw / 584);--goed-vlak:#e4f6f0;--goed-rand:#009d80;--goed-tekst:#00785e;--fout-vlak:#fbeeee;--fout-rand:#d13438;--fout-tekst:#b4262a;aspect-ratio:16/9;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:rgb(210,218,227) 0 0 0 1px,rgba(70,85,110,.36) 0 22px 40px -20px}
.el-balk{display:flex;align-items:center;gap:calc(6*var(--u));background:var(--wp--preset--color--inkt);padding:calc(10*var(--u)) calc(14*var(--u))}
.el-balk i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.el-balk span,.el-balk em{font-size:calc(12*var(--u));line-height:calc(16*var(--u));font-style:normal}
.el-balk span{order:-2;color:rgb(219,227,241);font-weight:600}
.el-balk em{order:-1;margin-right:auto;color:rgba(219,227,241,.6);transition:opacity .25s}
.el-balk em::before{content:"·";display:inline-block;margin-right:calc(6*var(--u))}
.el-romp{position:relative;flex:1 1 0;min-height:0;background:rgb(245,248,251)}
.el-scherm{position:absolute;inset:calc(14*var(--u));background:var(--wp--preset--color--base);border-radius:calc(12*var(--u));box-shadow:rgba(70,85,110,.14) 0 1px 3px;padding:calc(22*var(--u)) calc(26*var(--u));opacity:0;transition:opacity .45s;overflow:hidden}
.el-scherm.el-aan{opacity:1}
.el-titel{display:block;height:calc(11*var(--u));border-radius:calc(5*var(--u));background:var(--wp--preset--color--inkt);width:56%}
.el-regel{display:block;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);width:74%;margin-top:calc(10*var(--u))}
.el-druk{transform:scale(.95)}
.el-teken{flex:none;position:relative;width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%}
.el-teken::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:var(--ico) no-repeat center/80%;mask:var(--ico) no-repeat center/80%}

.el-s-sim{padding:0}
.el-lint{height:calc(26*var(--u));background:rgb(240,244,248);border-bottom:1px solid rgb(225,231,238);display:flex;align-items:center;gap:calc(8*var(--u));padding:0 calc(12*var(--u))}
.el-lint s{height:calc(6*var(--u));border-radius:calc(3*var(--u));background:rgb(203,213,225);text-decoration:none;width:calc(30*var(--u))}
.el-rekenblad{display:grid;grid-template-columns:calc(24*var(--u)) repeat(6,1fr)}
.el-rekenblad b{height:calc(25*var(--u));border-right:1px solid rgb(229,234,240);border-bottom:1px solid rgb(229,234,240);position:relative;transition:box-shadow .2s,transform .15s}
.el-rekenblad b.k{background:rgb(244,247,250);display:grid;place-items:center;font:600 calc(10*var(--u))/1 Figtree,sans-serif;color:var(--wp--preset--color--zacht)}
.el-rekenblad b.w::after{content:"";position:absolute;left:16%;top:50%;translate:0 -50%;height:calc(5*var(--u));width:var(--w,50%);border-radius:calc(3*var(--u));background:var(--wp--preset--color--lijn)}
.el-rekenblad b.el-gekozen{box-shadow:inset 0 0 0 calc(2*var(--u)) var(--wp--preset--color--merk)}
.el-instructie{position:absolute;left:calc(12*var(--u));top:calc(36*var(--u));width:calc(176*var(--u));padding:calc(11*var(--u)) calc(12*var(--u));border-radius:calc(8*var(--u));background:#ffc00f;box-shadow:0 1px 2px rgba(66,86,109,.12),0 3px 10px rgba(66,86,109,.14)}
.el-instructie s{display:block;height:calc(6*var(--u));border-radius:calc(3*var(--u));background:rgba(35,58,82,.42);text-decoration:none;width:92%}
.el-instructie s+s{width:66%;margin-top:calc(6*var(--u))}
.el-feedback{position:absolute;left:50%;bottom:calc(14*var(--u));translate:-50% 0;display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(10*var(--u)) calc(14*var(--u));border-radius:calc(8*var(--u));min-width:calc(250*var(--u));box-sizing:border-box;opacity:0;transform:translateY(calc(8*var(--u)));transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.el-feedback s{display:block;height:calc(6*var(--u));border-radius:calc(3*var(--u));text-decoration:none;width:calc(170*var(--u))}
.el-feedback.fout{background:var(--fout-vlak);box-shadow:inset 0 0 0 1px var(--fout-rand)}
.el-feedback.fout .el-teken{background:var(--fout-tekst);--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8%208l8%208M16%208l-8%208'%2F%3E%3C%2Fsvg%3E")}
.el-feedback.fout s{background:#e7a9ab}
.el-feedback.el-aan{opacity:1;transform:none}

.el-keuzes{margin-top:calc(20*var(--u));display:grid;gap:calc(11*var(--u));width:72%}
.el-keuze{position:relative;height:calc(30*var(--u));border-radius:99px;background:rgb(245,248,251);box-shadow:inset 0 0 0 1px rgb(195,207,219);transition:background .25s,box-shadow .25s,transform .15s}
.el-keuze::before{content:"";position:absolute;left:calc(9*var(--u));top:50%;translate:0 -50%;width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgb(150,166,184);background:#fff;transition:opacity .2s}
.el-keuze::after{content:"";position:absolute;left:calc(30*var(--u));top:50%;translate:0 -50%;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);width:var(--b,45%)}
.el-keuze .el-teken{position:absolute;left:calc(7*var(--u));top:50%;translate:0 -50%;background:var(--goed-tekst);--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2012.5l4%204L18%208.5'%2F%3E%3C%2Fsvg%3E");opacity:0;transition:opacity .25s}
.el-keuze.goed{background:var(--goed-vlak);box-shadow:inset 0 0 0 1.5px var(--goed-rand)}
.el-keuze.goed::before{opacity:0}
.el-keuze.goed .el-teken{opacity:1}
.el-keuze.goed::after{background:#a6d9cc}
.el-mc-feedback{display:flex;align-items:center;gap:calc(8*var(--u));margin-top:calc(14*var(--u));opacity:0;transition:opacity .35s}
.el-mc-feedback s{display:block;height:calc(6*var(--u));border-radius:calc(3*var(--u));background:#a6d9cc;text-decoration:none;width:calc(190*var(--u))}
.el-mc-feedback .el-teken{width:calc(12*var(--u));height:calc(12*var(--u));background:var(--goed-tekst);--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2012.5l4%204L18%208.5'%2F%3E%3C%2Fsvg%3E")}
.el-mc-feedback.el-aan{opacity:1}

.el-start{position:relative;margin-top:calc(22*var(--u));display:flex;align-items:center;gap:calc(14*var(--u));max-width:max-content;padding:calc(14*var(--u)) calc(20*var(--u)) calc(14*var(--u)) calc(14*var(--u));box-sizing:border-box;border-radius:calc(10*var(--u));background:rgb(246,248,250);box-shadow:inset 0 0 0 1px rgb(210,218,227);text-align:left}
.el-openknop{display:inline-flex;align-items:center;justify-content:center;width:calc(64*var(--u));height:calc(40*var(--u));border-radius:calc(8*var(--u));background:var(--wp--preset--color--merk);transition:transform .15s}
.el-openknop i{width:calc(22*var(--u));height:calc(22*var(--u));background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%207l-6.5%206.5a1.5%201.5%200%200%200%203%203l6.5-6.5a3%203%200%200%200-6-6l-6.5%206.5a4.5%204.5%200%200%200%209%209l6.5-6.5'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%207l-6.5%206.5a1.5%201.5%200%200%200%203%203l6.5-6.5a3%203%200%200%200-6-6l-6.5%206.5a4.5%204.5%200%200%200%209%209l6.5-6.5'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.el-start p{height:calc(6*var(--u));width:calc(150*var(--u));margin:0;flex:none;border-radius:calc(3*var(--u));background:var(--wp--preset--color--lijn)}
.el-waas{position:absolute;inset:0;background:rgba(35,58,82,.45);opacity:0;transition:opacity .4s;z-index:4}
.el-fp{position:absolute;left:50%;top:50%;width:calc(380*var(--u));height:calc(214*var(--u));translate:-50% -50%;border-radius:calc(12*var(--u));background:#fff;box-shadow:0 12px 30px -10px rgba(20,35,55,.45);z-index:5;opacity:0;transform:translateY(calc(16*var(--u)));transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);perspective:calc(900*var(--u))}
.el-s-naslag.el-open .el-waas{opacity:1}
.el-s-naslag.el-open .el-fp{opacity:1;transform:none}
.el-spread{position:absolute;left:calc(18*var(--u));right:calc(18*var(--u));top:calc(16*var(--u));bottom:calc(16*var(--u));display:flex;transform-style:preserve-3d}
.el-pag{position:relative;flex:1;background:#fff;box-shadow:inset 0 0 0 1px rgb(214,222,231);padding:calc(14*var(--u)) calc(14*var(--u))}
.el-pag:first-child{border-radius:calc(3*var(--u)) 0 0 calc(3*var(--u))}
.el-pag:nth-child(2){border-radius:0 calc(3*var(--u)) calc(3*var(--u)) 0}
.el-pag s{display:block;height:calc(5*var(--u));border-radius:calc(3*var(--u));background:var(--wp--preset--color--lijn);text-decoration:none;margin-top:calc(7*var(--u));width:var(--w,86%)}
.el-pag s.kop{height:calc(7*var(--u));background:var(--wp--preset--color--inkt);width:52%;margin-top:0}
.el-pag b{display:block;height:calc(56*var(--u));margin-top:calc(10*var(--u));border-radius:calc(3*var(--u));background:rgb(225,232,240)}
.el-blad{position:absolute;left:50%;top:0;bottom:0;width:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,0,.2,1)}
.el-blad .el-pag{position:absolute;inset:0;backface-visibility:hidden;border-radius:0 calc(3*var(--u)) calc(3*var(--u)) 0}
.el-blad .el-pag.achter{transform:rotateY(180deg);border-radius:calc(3*var(--u)) 0 0 calc(3*var(--u))}
.el-s-naslag.el-blader .el-blad{transform:rotateY(-180deg)}
.el-cursor{position:absolute;left:0;top:0;width:calc(18*var(--u));height:calc(24*var(--u));z-index:9;opacity:0;pointer-events:none;transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .3s}
.el-cursor path{fill:var(--wp--preset--color--inkt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.el-beeld *{transition:none!important;animation:none!important}}

/* ---------- Educatieve games ---------- */
.eg-beeld{position:relative;container-type:inline-size}
.eg-venster{--u:calc(100cqw / 584);--goed-vlak:#e4f6f0;--goed-rand:#009d80;--goed-tekst:#00785e;aspect-ratio:16/9;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:rgb(210,218,227) 0 0 0 1px,rgba(70,85,110,.36) 0 22px 40px -20px}
.eg-balk{display:flex;align-items:center;gap:calc(6*var(--u));background:var(--wp--preset--color--inkt);padding:calc(10*var(--u)) calc(14*var(--u))}
.eg-balk i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.eg-balk span,.eg-balk em{font-size:calc(12*var(--u));line-height:calc(16*var(--u));font-style:normal}
.eg-balk span{order:-2;color:rgb(219,227,241);font-weight:600}
.eg-balk em{order:-1;margin-right:auto;color:rgba(219,227,241,.6);transition:opacity .25s}
.eg-balk em::before{content:"·";display:inline-block;margin-right:calc(6*var(--u))}
.eg-romp{position:relative;flex:1 1 0;min-height:0;background:rgb(245,248,251)}
.eg-kaart{position:absolute;inset:calc(14*var(--u));background:var(--wp--preset--color--base);border-radius:calc(12*var(--u));box-shadow:rgba(70,85,110,.14) 0 1px 3px;overflow:hidden}
.eg-stand{position:absolute;left:0;right:0;top:0;height:calc(28*var(--u));display:flex;justify-content:flex-end;align-items:center;gap:calc(12*var(--u));padding:0 calc(14*var(--u));border-bottom:1px solid rgb(225,231,238);z-index:2}
.eg-stand b{display:flex;align-items:center;gap:calc(4*var(--u));font:600 calc(12*var(--u))/1 Figtree,sans-serif;color:var(--wp--preset--color--inkt)}
.eg-stand b::before{content:"";width:calc(14*var(--u));height:calc(14*var(--u));background:var(--c);-webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.eg-stand .hart{--c:#d13438;--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%2021s-7.5-4.6-9.6-9.3C.9%208.3%203%204.5%206.7%204.5c2.1%200%203.6%201.1%205.3%203%201.7-1.9%203.2-3%205.3-3%203.7%200%205.8%203.8%204.3%207.2C19.5%2016.4%2012%2021%2012%2021z'%2F%3E%3C%2Fsvg%3E")}
.eg-stand .ster{--c:#ffc00f;--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%202.8l2.8%205.9%206.4.8-4.7%204.4%201.2%206.4L12%2017.2l-5.7%203.1%201.2-6.4-4.7-4.4%206.4-.8z'%2F%3E%3C%2Fsvg%3E")}
.eg-stand .ster.eg-pop::before{transform:scale(1.35)}
.eg-scherm{position:absolute;inset:calc(28*var(--u)) 0 0;opacity:0;transition:opacity .45s}
.eg-scherm.eg-aan{opacity:1}
.eg-rad{position:absolute;left:50%;top:calc(12*var(--u));width:calc(134*var(--u));height:calc(134*var(--u));translate:-50% 0;filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(70,85,110,.18))}
.eg-draai{transition:transform 2.1s cubic-bezier(.12,.62,.16,1)}
.eg-naaf{transform-box:fill-box;transform-origin:center;transition:transform .15s}
.eg-naaf.eg-druk{transform:scale(.92)}
.eg-cat,.eg-verder{position:absolute;left:50%;width:calc(216*var(--u));translate:-50% 0;opacity:0;transform:translateY(calc(8*var(--u)));transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.eg-cat{top:calc(160*var(--u));height:calc(30*var(--u));border-radius:calc(8*var(--u));background:#fff;box-shadow:inset 0 0 0 1px rgb(195,207,219);display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u))}
.eg-cat i{width:calc(18*var(--u));height:calc(18*var(--u));background:#2f86c6;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'6'%20width%3D'18'%20height%3D'13'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M3.5%207l8.5%206.5L20.5%207'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'6'%20width%3D'18'%20height%3D'13'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M3.5%207l8.5%206.5L20.5%207'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.eg-cat s{display:block;height:calc(8*var(--u));width:calc(70*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--inkt);text-decoration:none}
.eg-verder{top:calc(198*var(--u));height:calc(26*var(--u));border-radius:99px;background:var(--wp--preset--color--merk);transition-delay:.12s}
.eg-verder::before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h14M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") no-repeat center/calc(16*var(--u));mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h14M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") no-repeat center/calc(16*var(--u))}
.eg-s-rad.eg-gekozen .eg-cat,.eg-s-rad.eg-gekozen .eg-verder{opacity:1;transform:none}
.eg-verder.eg-druk{transform:scale(.95)!important;transition:transform .15s}
.eg-klok{position:absolute;left:50%;top:calc(26*var(--u));translate:-50% 0;width:calc(36*var(--u));height:calc(36*var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(2*var(--u)) #ffc00f;display:grid;place-items:center;font:600 calc(13*var(--u))/1 Figtree,sans-serif;color:var(--wp--preset--color--inkt)}
.eg-vraag{position:absolute;left:calc(26*var(--u));right:calc(26*var(--u));top:calc(74*var(--u))}
.eg-titel{display:block;height:calc(10*var(--u));border-radius:calc(5*var(--u));background:var(--wp--preset--color--inkt);width:58%}
.eg-regel{display:block;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);width:74%;margin-top:calc(8*var(--u))}
.eg-keuzes{margin-top:calc(16*var(--u));display:grid;gap:calc(8*var(--u))}
.eg-keuze{position:relative;height:calc(26*var(--u));border-radius:99px;background:rgb(245,248,251);box-shadow:inset 0 0 0 1px rgb(195,207,219);transition:background .2s,box-shadow .2s,transform .15s}
.eg-keuze::before{content:"";position:absolute;left:calc(8*var(--u));top:50%;translate:0 -50%;width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgb(150,166,184);background:#fff;transition:box-shadow .2s}
.eg-keuze::after{content:"";position:absolute;left:calc(28*var(--u));top:50%;translate:0 -50%;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);width:var(--b,45%)}
.eg-keuze span{position:absolute;right:calc(10*var(--u));top:50%;translate:0 -50%;width:calc(14*var(--u));height:calc(14*var(--u));background:var(--goed-rand);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;opacity:0;transition:opacity .25s}
.eg-keuze.goed{background:var(--goed-vlak);box-shadow:inset 0 0 0 1.5px var(--goed-rand)}
.eg-keuze.goed::before{box-shadow:inset 0 0 0 calc(3.5*var(--u)) var(--goed-rand)}
.eg-keuze.goed span{opacity:1}
.eg-keuze.eg-druk{transform:scale(.97)}
.eg-lijst{position:absolute;left:50%;top:calc(46*var(--u));width:calc(300*var(--u));height:calc(4*30*var(--u) + 3*8*var(--u));translate:-50% 0}
.eg-plek{position:absolute;left:0;width:calc(18*var(--u));height:calc(30*var(--u));top:calc(var(--p)*38*var(--u));display:grid;place-items:center;font:600 calc(12*var(--u))/1 Figtree,sans-serif;color:rgb(98,117,139)}
.eg-rij{position:absolute;left:calc(26*var(--u));right:0;height:calc(30*var(--u));top:calc(var(--p)*38*var(--u));border-radius:calc(8*var(--u));background:rgb(245,248,251);display:flex;align-items:center;gap:calc(10*var(--u));padding:0 calc(12*var(--u));transition:top .7s cubic-bezier(.3,.7,.2,1),background .3s,box-shadow .3s}
.eg-rij s{display:block;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:var(--wp--preset--color--lijn);text-decoration:none;width:var(--b,40%)}
.eg-rij i{margin-left:auto;width:calc(13*var(--u));height:calc(13*var(--u));background:#ffc00f;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%202.8l2.8%205.9%206.4.8-4.7%204.4%201.2%206.4L12%2017.2l-5.7%203.1%201.2-6.4-4.7-4.4%206.4-.8z'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%202.8l2.8%205.9%206.4.8-4.7%204.4%201.2%206.4L12%2017.2l-5.7%203.1%201.2-6.4-4.7-4.4%206.4-.8z'%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.eg-rij u{display:block;width:calc(16*var(--u));height:calc(7*var(--u));border-radius:calc(4*var(--u));background:rgb(195,207,219)}
.eg-rij.jij{background:var(--wp--preset--color--merk-licht);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--merk);z-index:1}
.eg-rij.jij s{background:var(--wp--preset--color--merk);opacity:.45}
.eg-rij.jij u{background:var(--wp--preset--color--merk);opacity:.45}
.eg-cursor{position:absolute;left:0;top:0;width:calc(18*var(--u));height:calc(24*var(--u));z-index:5;opacity:0;pointer-events:none;transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .3s}
.eg-cursor path{fill:var(--wp--preset--color--inkt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.eg-beeld *{transition:none!important;animation:none!important}}

/* ---------- Video ontwikkelen (montage, dan de video in de speler) ---------- */
.vd-beeld{position:relative;container-type:inline-size}
.vd-venster{--u:calc(100cqw / 584);aspect-ratio:16/9;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:rgb(210,218,227) 0 0 0 1px,rgba(70,85,110,.36) 0 22px 40px -20px}
.vd-balk{display:flex;align-items:center;gap:calc(6*var(--u));background:var(--wp--preset--color--inkt);padding:calc(10*var(--u)) calc(14*var(--u))}
.vd-balk i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.vd-balk span,.vd-balk em{font-size:calc(12*var(--u));line-height:calc(16*var(--u));font-style:normal}
.vd-balk span{order:-2;color:rgb(219,227,241);font-weight:600}
.vd-balk em{order:-1;margin-right:auto;color:rgba(219,227,241,.6);transition:opacity .25s}
.vd-balk em::before{content:"·";display:inline-block;margin-right:calc(6*var(--u))}
.vd-romp{position:relative;flex:1 1 0;min-height:0;background:rgb(245,248,251)}
.vd-scherm{position:absolute;inset:calc(14*var(--u));background:var(--wp--preset--color--base);border-radius:calc(12*var(--u));box-shadow:rgba(70,85,110,.14) 0 1px 3px;overflow:hidden;opacity:0;transition:opacity .45s}
.vd-scherm.vd-aan{opacity:1}
/* Beeld (de voorvertoning in de montage en de speler bij oplevering): drie scènes, woordloos. */
.vd-beeldvlak{position:absolute;background:#1d3349;border-radius:calc(6*var(--u));overflow:hidden}
.vd-scene{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.vd-scene.vd-aan{opacity:1}
.vd-persoon{background:#2a4561}
.vd-persoon b{position:absolute;left:24%;top:24%;width:15%;aspect-ratio:1;border-radius:50%;background:#9cc1e2}
.vd-persoon u{position:absolute;left:15%;top:58%;width:33%;height:50%;border-radius:45% 45% 0 0;background:#9cc1e2}
.vd-persoon s{position:absolute;left:56%;top:66%;width:34%;height:9%;border-radius:calc(3*var(--u));background:#fff;text-decoration:none}
.vd-persoon s+s{top:79%;width:22%;height:6%;background:rgba(255,255,255,.55)}
.vd-scherm2{background:#2a4561}
.vd-scherm2 b{position:absolute;left:16%;top:14%;right:16%;bottom:20%;border-radius:calc(3*var(--u));background:#f5f8fb}
.vd-scherm2 s{position:absolute;left:22%;height:7%;border-radius:calc(3*var(--u));background:#c3cfdb;text-decoration:none}
.vd-scherm2 s.k{background:#233a52;width:30%;top:22%}
.vd-scherm2 i{position:absolute;left:58%;top:52%;width:9%;aspect-ratio:3/4;background:#233a52;clip-path:polygon(0 0,0 80%,25% 62%,42% 100%,58% 92%,42% 57%,75% 57%)}
.vd-titelkaart{background:#233a52;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(7*var(--u))}
.vd-titelkaart s{display:block;width:46%;height:calc(10*var(--u));border-radius:calc(5*var(--u));background:#fff;text-decoration:none}
.vd-titelkaart s+s{width:28%;height:calc(6*var(--u));background:rgba(255,255,255,.55)}
/* Montage */
.vd-s-montage .vd-beeldvlak{left:50%;top:calc(14*var(--u));width:calc(228*var(--u));height:calc(128*var(--u));translate:-50% 0}
.vd-knop{position:absolute;left:50%;top:calc(148*var(--u));translate:-50% 0;width:calc(20*var(--u));height:calc(20*var(--u));border-radius:50%;background:rgb(245,248,251);box-shadow:inset 0 0 0 1px rgb(195,207,219);transition:transform .15s}
.vd-knop::before{content:"";position:absolute;inset:0;background:var(--wp--preset--color--inkt);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8%205.5v13l11-6.5z'%2F%3E%3C%2Fsvg%3E") no-repeat 58% 50%/calc(10*var(--u));mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8%205.5v13l11-6.5z'%2F%3E%3C%2Fsvg%3E") no-repeat 58% 50%/calc(10*var(--u))}
.vd-knop.vd-druk{transform:scale(.9)}
.vd-lijn{position:absolute;left:calc(50*var(--u));right:calc(14*var(--u));top:calc(176*var(--u));height:calc(6*var(--u));background:repeating-linear-gradient(90deg,rgb(195,207,219) 0 1px,transparent 1px calc(21*var(--u)))}
.vd-spoor{position:absolute;left:calc(14*var(--u));right:calc(14*var(--u));display:flex;gap:calc(8*var(--u))}
.vd-spoor>i{flex:none;width:calc(28*var(--u));border-radius:calc(4*var(--u));background:rgb(240,244,248);position:relative}
.vd-spoor>i::before{content:"";position:absolute;inset:0;background:rgb(98,117,139);-webkit-mask:var(--ico) no-repeat center/calc(11*var(--u));mask:var(--ico) no-repeat center/calc(11*var(--u))}
.vd-baan{position:relative;flex:1;border-radius:calc(4*var(--u));background:rgb(240,244,248)}
.vd-v{top:calc(186*var(--u));height:calc(24*var(--u))}.vd-v>i{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'6'%20width%3D'13'%20height%3D'12'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M16%2010l5-3v10l-5-3'%2F%3E%3C%2Fsvg%3E")}
.vd-t{top:calc(214*var(--u));height:calc(14*var(--u))}.vd-t>i{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%206h14M12%206v13'%2F%3E%3C%2Fsvg%3E")}
.vd-a{top:calc(232*var(--u));height:calc(18*var(--u))}.vd-a>i{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2010v4h4l5%204V6L8%2010z'%2F%3E%3Cpath%20d%3D'M16.5%209a4%204%200%200%201%200%206'%2F%3E%3C%2Fsvg%3E")}
.vd-clip{position:absolute;top:0;bottom:0;left:var(--l);width:var(--b);border-radius:calc(4*var(--u));transition:transform .5s cubic-bezier(.2,.75,.25,1.08),opacity .3s}
.vd-v .vd-clip{background:#bcd6ee;box-shadow:inset 0 0 0 1px #8fb6dc}
.vd-v .vd-clip::before{content:"";position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));bottom:calc(3*var(--u));width:calc(26*var(--u));border-radius:calc(2*var(--u));background:#2a4561}
.vd-t .vd-clip{background:#ffe08a;box-shadow:inset 0 0 0 1px #f0c040}
.vd-a .vd-clip{background:#cfeee4;box-shadow:inset 0 0 0 1px #8fd0bb;display:flex;align-items:center;gap:1px;padding:0 calc(3*var(--u));box-sizing:border-box;overflow:hidden}
.vd-a .vd-clip i{flex:1;background:#3fa88a;border-radius:1px;min-width:1px}
.vd-clip.vd-weg{transform:translateX(calc(140*var(--u)));opacity:0}
.vd-kop{position:absolute;top:calc(172*var(--u));bottom:calc(14.5*var(--u));left:calc(49*var(--u));width:calc(2*var(--u));background:var(--wp--preset--color--actie);z-index:2;transform:translateX(0)}
.vd-kop::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:calc(10*var(--u));height:calc(9*var(--u));background:var(--wp--preset--color--actie);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.vd-kop.vd-loopt{transition:transform 2.4s linear}
/* Oplevering: de speler */
.vd-s-speler .vd-beeldvlak{left:50%;top:calc(16*var(--u));bottom:calc(16*var(--u));aspect-ratio:16/9;translate:-50% 0}
.vd-groot{position:absolute;left:50%;top:50%;translate:-50% -50%;width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%;background:var(--wp--preset--color--actie);box-shadow:0 calc(4*var(--u)) calc(14*var(--u)) rgba(0,0,0,.25);z-index:2}
/* Driehoek 34% van de knop (Henrik 09-11), optisch gecentreerd: tussen kadermidden en zwaartepunt in (kader 1/12 van de breedte naar rechts). */
.vd-groot{--dh:calc(17.68*var(--u))}
.vd-groot::before{content:"";position:absolute;width:calc(var(--dh)*11/13);height:var(--dh);left:calc(50% - var(--dh)*11/13/2 + var(--dh)*11/13/12);top:calc(50% - var(--dh)/2);background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.vd-voortgang{position:absolute;left:calc(14*var(--u));right:calc(14*var(--u));bottom:calc(12*var(--u));height:calc(4*var(--u));border-radius:99px;background:rgba(255,255,255,.28);z-index:2}
.vd-voortgang i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:99px;background:#fff}
.vd-s-speler .vd-persoon{opacity:1}
.vd-s-speler .vd-persoon b{left:15%}.vd-s-speler .vd-persoon u{left:6%}
.vd-s-speler .vd-scene::after{content:"";position:absolute;inset:0;background:rgba(20,35,55,.28)}
.vd-cursor{position:absolute;left:0;top:0;width:calc(18*var(--u));height:calc(24*var(--u));z-index:5;opacity:0;pointer-events:none;transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .3s}
.vd-cursor path{fill:var(--wp--preset--color--inkt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.vd-beeld *{transition:none!important;animation:none!important}}