/* Test IT-beeld (kop van Test IT Online, Henrik 04-11): een getekend Test IT-venster in de familie van het ERP-beeld. Het verhaal
   speelt één keer, zoals Test IT werkt: het portaal, de cursor gaat naar een tegel (die komt omhoog, zoals in TIUD) en klikt, de
   module opent, een antwoord wordt gekozen, Volgende, en de rapportage verschijnt; daar blijft hij staan. Zonder script en bij
   minder beweging staat meteen de rapportage er. Het beeld schaalt als een foto: getekend op 584 x 328 (16:9) en alles in --u
   (1/584 van de breedte), zoals het ERP-beeld. Geen details in de schermen (geen tekst, geen pijlen), alleen vormen. */
.tio-beeld{position:relative;container-type:inline-size}
.tio-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:0 0 0 1px #d2dae3,0 22px 40px -20px rgba(70,85,110,.36)}
/* Titelbalk zoals het ERP-beeld: titel links, het scherm erachter, de drie stipjes rechts. */
.tio-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))}
.tio-balk i{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.tio-balk span,.tio-balk em{font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));font-style:normal}
.tio-balk span{order:-2;color:#dbe3f1;font-weight:600}
.tio-balk em{order:-1;margin-right:auto;color:rgba(219,227,241,.6)}
/* Het puntje staat optisch in het midden tussen titel en scherm (Henrik 05-11): 6u aan beide kanten, gelijk aan de gap. */
.tio-balk em:not(:empty)::before{content:"·";display:inline-block;margin-right:calc(6 * var(--u))}
.tio-romp{position:relative;flex:1 1 0;min-height:0;background:#f5f8fb}
.tio-scherm{position:absolute;inset:0;padding:calc(29 * var(--u));opacity:0;transition:opacity .5s}
.tio-scherm.tio-aan,.tio-beeld:not(.tio-speelt) .tio-rapport{opacity:1}
/* Met script (html.lk-js, gezet in de kop van de pagina, zoals bij Home) begint het beeld meteen op het portaal, zodat de rapportage
   niet even opflitst voordat het verhaal begint. */
html.lk-js .tio-beeld:not(.tio-speelt) .tio-rapport{opacity:0}
html.lk-js .tio-beeld:not(.tio-speelt) .tio-portaal{opacity:1}

/* Portaal: een band in de bandkleur van de site (Henrik 04-11) en zes tegels. */
.tio-portaal{padding:0}
.tio-band{height:30%;background:var(--wp--preset--color--vlak);padding:calc(29 * var(--u)) calc(29 * var(--u)) 0;box-sizing:border-box}
.tio-band b{display:block;width:38%;height:calc(9 * var(--u));border-radius:calc(5 * var(--u));background:var(--wp--preset--color--inkt)}
.tio-band span{display:block;width:24%;height:calc(6 * var(--u));border-radius:calc(4 * var(--u));background:#a9cbe7;margin-top:calc(8 * var(--u))}
.tio-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16 * var(--u)) calc(18 * var(--u));padding:0 calc(29 * var(--u));margin-top:calc(-26 * var(--u))}
.tio-tegel{background:var(--wp--preset--color--base);border-radius:calc(10 * var(--u));box-shadow:0 1px 3px rgba(70,85,110,.14);padding:calc(12 * var(--u)) calc(13 * var(--u));aspect-ratio:2;transition:transform .25s,box-shadow .25s}
.tio-tegel i{display:block;width:calc(26 * var(--u));aspect-ratio:1;border-radius:calc(6 * var(--u));background:var(--wp--preset--color--merk-licht)}
.tio-tegel b{display:block;height:calc(8 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--inkt);width:70%;margin-top:calc(12 * var(--u))}
.tio-tegel span{display:block;height:calc(6 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--lijn);width:45%;margin-top:calc(7 * var(--u))}
/* Dezelfde lift als de tegels op de site en in TIUD. */
.tio-tegel.tio-hover{transform:translateY(calc(-3 * var(--u)));box-shadow:0 12px 24px -12px rgba(70,85,110,.30)}

/* Module: vraag, drie keuzes (pillen), een plaat, en Volgende als lege rode cirkel. */
.tio-module{inset:calc(14 * var(--u));display:grid;grid-template-columns:1.15fr 1fr;gap:calc(26 * 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))}
.tio-vraag b{display:block;height:calc(11 * var(--u));border-radius:calc(5 * var(--u));background:var(--wp--preset--color--inkt);width:80%}
.tio-vraag>span{display:block;height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--lijn);width:92%;margin-top:calc(10 * var(--u))}
.tio-vraag>span+span{width:70%;margin-top:calc(6 * var(--u))}
.tio-keuzes{margin-top:calc(18 * var(--u));display:grid;gap:calc(9 * var(--u))}
.tio-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}
.tio-keuzes i.tio-gekozen{background:var(--wp--preset--color--merk-licht);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--merk)}
.tio-plaat{height:62%;border-radius:calc(8 * var(--u));background:#e9eef4}
.tio-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)}

/* Rapportage: de score in merkblauw (zoals de grafieken in TIUD), staven met de norm groen gestippeld, en een lijst. */
.tio-rapport{display:grid;grid-template-columns:.8fr 1.2fr;grid-template-rows:1fr auto;gap:calc(16 * var(--u))}
.tio-score,.tio-grafiek,.tio-lijst{background:var(--wp--preset--color--base);border-radius:calc(10 * var(--u));box-shadow:0 1px 3px rgba(70,85,110,.14);padding:calc(16 * var(--u))}
.tio-score b{display:block;font-size:calc(41 * var(--u));line-height:1;font-weight:700;color:var(--wp--preset--color--merk)}
.tio-score span{display:block;height:calc(9 * var(--u));border-radius:calc(5 * var(--u));background:var(--wp--preset--color--lijn);width:70%;margin-top:calc(16 * var(--u))}
.tio-grafiek{position:relative;display:flex;align-items:flex-end;gap:calc(14 * var(--u));padding-bottom:calc(12 * var(--u))}
.tio-grafiek i{flex:1;height:var(--h);border-radius:calc(4 * var(--u)) calc(4 * var(--u)) 0 0;background:var(--wp--preset--color--merk);transform-origin:bottom}
.tio-beeld.tio-groei .tio-grafiek i{animation:tio-groei .9s cubic-bezier(.2,.7,.2,1) both}
.tio-grafiek i:nth-child(2){animation-delay:.08s}.tio-grafiek i:nth-child(3){animation-delay:.16s}.tio-grafiek i:nth-child(4){animation-delay:.24s}.tio-grafiek i:nth-child(5){animation-delay:.32s}
.tio-grafiek hr{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));top:28%;margin:0;border:0;border-top:2px dashed var(--wp--preset--color--goed-rand,#009d80);opacity:.8}
.tio-lijst{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(30 * var(--u));padding:calc(14 * var(--u)) calc(20 * var(--u))}
.tio-lijst span{height:calc(9 * var(--u));border-radius:calc(5 * var(--u));background:var(--wp--preset--color--lijn)}
@keyframes tio-groei{from{transform:scaleY(0)}}

.tio-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:opacity .3s}
.tio-cursor path{fill:var(--wp--preset--color--inkt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.tio-beeld *{animation:none!important;transition:none!important}}
/* Einde van het verhaal: het logo als eigen scherm (Henrik 04-11). Na 1,5 s rapportage een overgang van 1 s (logo staat op 6,85 s); het logo komt 14u omhoog, zoals het beeld in de video. Logo als SVG van Henrik (05-11), optisch in het midden zonder de blauwe ring (Henrik 05-11): de ring steekt 75,63 van de 451,29 boven de letters uit, dus 8,38% van de hoogte omhoog (translate, los van de inkomst in transform). Breedte 50% van het binnenvlak (scherm min 29u padding; 263 van 584, Henrik 05-11, gekozen uit 44-60; was 44 zoals de Digi-video). */
.tio-logo{display:flex;align-items:center;justify-content:center;transition-duration:1s}.tio-logo img{display:block;width:50%;height:auto;translate:0 -8.38%;transform:translateY(calc(14 * var(--u)));transition:transform 1s cubic-bezier(.2,0,0,1)}.tio-logo.tio-aan img{transform:none}