/* Maatwerk-beeld (kop van Maatwerk laten ontwikkelen, Henrik 05-11): het verhaal van uitbesteden. Een document met lesstof (kop, tekst,
   beeld, lijst) ligt gekanteld deels achter een Test IT-venster; stap voor stap licht een deel van het document op en verschijnt het in
   de module (kop, tekst, plaat, keuzes), daarna Volgende en een gekozen antwoord. Het document komt binnen als een waaier (draaipunt
   onderaan in het midden), 0,6 s na binnenkomst en zacht in 1,3 s (Henrik 05-11: "voordat je in de gaten hebt waar je zit, is het
   doc al geschoven"). Zonder script en bij minder beweging staat meteen het eindbeeld er: document lichtgrijs, module compleet.
   Familie van het ERP- en Test IT-beeld: getekend op 584 x 328 (16:9), alles in --u, titel links en drie stipjes rechts. */
.mw-beeld{position:relative;container-type:inline-size}
.mw-doek{--u:calc(100cqw / 584);position:relative;aspect-ratio:16/9}

/* Het document: alles begint donker (beeld in de bandkleur) en gaat via blauw naar lichtgrijs als het is overgezet. */
.mw-doc{position:absolute;left:calc(16 * var(--u));top:calc(58 * var(--u));width:calc(176 * var(--u));height:calc(226 * var(--u));box-sizing:border-box;padding:calc(22 * var(--u)) calc(20 * var(--u));background:var(--wp--preset--color--base);border-radius:calc(4 * var(--u));box-shadow:0 0 0 1px var(--wp--preset--color--lijn),0 14px 26px -14px rgba(70,85,110,.34);transform:rotate(-5deg);transform-origin:50% 100%}
.mw-beeld.mw-speelt .mw-doc{animation:mw-waaier 1.3s cubic-bezier(.45,0,.25,1) .6s both}
@keyframes mw-waaier{from{transform:rotate(-24deg);opacity:0}to{transform:rotate(-5deg);opacity:1}}
.mw-doc b,.mw-doc span,.mw-doc li{display:block;border-radius:calc(4 * var(--u));transition:background .35s}
.mw-doc b{height:calc(9 * var(--u));width:62%;background:var(--wp--preset--color--lijn)}
.mw-doc span{height:calc(6 * var(--u));background:var(--wp--preset--color--lijn);margin-top:calc(9 * var(--u))}
.mw-doc b+span{margin-top:calc(16 * var(--u))}
.mw-doc span:nth-of-type(2){width:74%}
.mw-doc em{display:block;height:calc(50 * var(--u));width:66%;margin-top:calc(16 * var(--u));border-radius:calc(4 * var(--u));background:#e9eef4;transition:background .35s,box-shadow .35s}
.mw-doc em.mw-lees{background:var(--wp--preset--color--merk-licht);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--merk)}
.mw-doc ul{list-style:none;margin:calc(14 * var(--u)) 0 0;padding:0}
.mw-doc li{position:relative;height:calc(6 * var(--u));width:60%;margin:calc(10 * var(--u)) 0 0 calc(14 * var(--u));background:var(--wp--preset--color--lijn)}
.mw-doc li::before{content:"";position:absolute;left:calc(-13 * var(--u));top:calc(-.5 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:var(--wp--preset--color--lijn);transition:background .35s}
.mw-doc li:nth-child(2){width:48%}.mw-doc li:nth-child(3){width:55%}
.mw-doc .mw-lees,.mw-doc li.mw-lees::before{background:var(--wp--preset--color--merk)}

/* Het venster: titelbalk zoals het Test IT-beeld; het puntje staat in het midden tussen titel en scherm (6u aan beide kanten). */
.mw-venster{position:absolute;left:calc(132 * var(--u));top:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #d2dae3,0 22px 40px -20px rgba(70,85,110,.36)}
.mw-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))}
.mw-balk i{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.mw-balk span,.mw-balk em{font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));font-style:normal}
.mw-balk span{color:#dbe3f1;font-weight:600}
.mw-balk em{margin-right:auto;color:rgba(219,227,241,.6)}
.mw-balk em::before{content:"·";display:inline-block;margin-right:calc(6 * var(--u))}
.mw-romp{position:relative;flex:1;background:#f5f8fb}

/* De module: vraag en plaat even hoog; kop → tekst 16 (de zware kop laat 18 groter lijken), tekst → keuzes 18. De inhoud houdt de
   kleuren van het document: tekst donker, plaat in de bandkleur. */
.mw-module{position:absolute;inset:calc(14 * var(--u));background:var(--wp--preset--color--base);border-radius:calc(12 * var(--u));box-shadow:0 1px 3px rgba(70,85,110,.14);padding:calc(24 * var(--u)) calc(26 * var(--u));display:grid;grid-template-columns:1.15fr 1fr;gap:calc(26 * var(--u));align-items:start;align-content:start}
.mw-vraag b,.mw-vraag>span{display:block;border-radius:calc(5 * var(--u))}
.mw-vraag b{height:calc(11 * var(--u));width:62%;background:var(--wp--preset--color--inkt)}
.mw-vraag>span{height:calc(7 * var(--u));background:var(--wp--preset--color--inkt);width:86%;margin-top:calc(16 * var(--u))}
.mw-vraag>span+span{width:64%;margin-top:calc(9 * var(--u))}
.mw-plaat{align-self:stretch;border-radius:calc(8 * var(--u));background:var(--wp--preset--color--vlak)}
.mw-keuzes{margin-top:calc(18 * var(--u));display:grid;gap:calc(9 * var(--u))}
.mw-keuzes i{display:block;height:calc(22 * var(--u));border-radius:99px;background:#f5f8fb;box-shadow:inset 0 0 0 1px #c3cfdb;transition:background .2s,box-shadow .2s,opacity .45s,translate .45s}
.mw-keuzes i.mw-gekozen{background:var(--wp--preset--color--merk-licht);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--merk)}
.mw-volgende{position:absolute;right:calc(18 * var(--u));bottom:calc(16 * var(--u));width:calc(36 * var(--u));aspect-ratio:1;border-radius:50%;background:var(--wp--preset--color--actie)}
.mw-module [data-s]{transition:opacity .45s,translate .45s,background .2s,box-shadow .2s}
.mw-beeld.mw-speelt .mw-module [data-s]:not(.mw-aan){opacity:0;translate:0 calc(6 * var(--u))}

/* Alleen als het verhaal echt speelt (html.lk-js, niet bij minder beweging): donker begin en een lege module, zodat het eindbeeld niet
   even opflitst. */
@media (prefers-reduced-motion:no-preference){
html.lk-js .mw-doc :is(b,span,li):not(.mw-klaar):not(.mw-lees),html.lk-js .mw-doc li:not(.mw-klaar):not(.mw-lees)::before{background:var(--wp--preset--color--inkt)}
html.lk-js .mw-doc em:not(.mw-klaar):not(.mw-lees){background:var(--wp--preset--color--vlak)}
html.lk-js .mw-beeld:not(.mw-speelt) .mw-doc{opacity:0}
html.lk-js .mw-beeld:not(.mw-speelt) .mw-module [data-s]{opacity:0}
}
@media (prefers-reduced-motion:reduce){.mw-beeld *{transition:none!important}}