/* ================================================================
Hero Academy — e-learning opmaak (S7 Verder oefenen, S13 t/m S17)
Premium laag: cinematische headers, tactiele knoppen, animaties.
================================================================ */
/* ---------- animaties ---------- */
@keyframes itkPop{0%{transform:scale(.85);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1}}
@keyframes itkShake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}}
@keyframes itkUp{from{transform:translateY(14px);opacity:0} to{transform:translateY(0);opacity:1}}
@keyframes itkSlideIn{from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1}}
@keyframes itkCheckPop{0%{transform:scale(0) rotate(-30deg)} 70%{transform:scale(1.3) rotate(6deg)} 100%{transform:scale(1) rotate(0)}}
@keyframes itkGlow{0%,100%{box-shadow:0 0 0 0 rgba(56,189,71,.4)} 50%{box-shadow:0 0 0 8px rgba(56,189,71,0)}}
@keyframes itkConfFall{0%{transform:translateY(-10vh) rotate(0);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:.9}}
@keyframes itkRing{from{stroke-dashoffset:var(--circ)} to{stroke-dashoffset:var(--off)}}
@keyframes itkBadgePop{0%{transform:scale(0)} 60%{transform:scale(1.25)} 100%{transform:scale(1)}}
@keyframes lrnAurora{0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-24px) scale(1.15)} 66%{transform:translate(-30px,18px) scale(.92)}}
@keyframes lrnAurora2{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,26px) scale(1.2)}}
@keyframes lrnFloat{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes lrnShine{from{transform:translateX(-130%) skewX(-18deg)} to{transform:translateX(240%) skewX(-18deg)}}
@keyframes lrnFeestIn{0%{transform:scale(.6) translateY(24px);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1) translateY(0);opacity:1}}
/* ---------- pagina-overgangen (View Transitions API) ---------- */
::view-transition-old(root){animation:lrnVtUit .18s ease both;}
::view-transition-new(root){animation:lrnVtIn .26s ease both;}
@keyframes lrnVtUit{to{opacity:0; transform:translateY(-8px);}}
@keyframes lrnVtIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
/* ---------- scroll-onthulling ---------- */
.lrn-reveal{opacity:0; transform:translateY(20px);}
.lrn-reveal.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);}
/* ---------- geluid-knop ---------- */
.lrn-geluid{position:fixed; right:18px; bottom:18px; z-index:70; width:46px; height:46px; border-radius:50%;
border:none; background:var(--blauw); color:#fff; font-size:1.15rem; display:none; place-items:center;
box-shadow:0 6px 18px rgba(7,56,137,.35), inset 0 -3px 0 rgba(0,0,0,.25); cursor:pointer; transition:transform .12s;}
.lrn-geluid:hover{transform:translateY(-2px);}
body.lrn-open .lrn-geluid{display:grid;}
/* ---------- feest-overlay (hoofdstuk voltooid) ---------- */
.lrn-feest{position:fixed; inset:0; z-index:9997; display:grid; place-items:center; background:rgba(4,24,58,.55); backdrop-filter:blur(4px);}
.lrn-feest .kaart{background:#fff; border-radius:24px; padding:38px 46px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.4); animation:lrnFeestIn .5s cubic-bezier(.2,.9,.3,1.2) both; max-width:min(92vw,420px);}
.lrn-feest .vink{width:86px; height:86px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(135deg,#1e7e2b,#38bd47); color:#fff; font-size:2.6rem; display:grid; place-items:center; box-shadow:0 10px 26px rgba(56,189,71,.45); animation:itkCheckPop .55s .1s both;}
.lrn-feest h3{font-size:1.4rem; font-weight:800; color:var(--blauw); margin-bottom:4px;}
.lrn-feest p{font-size:.92rem; color:#4f5259;}
.lrn-feest .xp{display:inline-block; margin-top:12px; background:#fef1e2; color:var(--oranje); font-family:'Exo',sans-serif; font-weight:800; font-size:.9rem; border-radius:999px; padding:6px 16px; animation:itkPop .4s .3s both;}
/* ---- venster: zo is je academy-percentage opgebouwd ---- */
.lrn-uitleg{position:fixed; inset:0; z-index:9997; display:grid; place-items:center; padding:20px; background:rgba(4,24,58,.55); backdrop-filter:blur(4px); animation:itkUp .2s both;}
.lrn-uitleg .kaart{position:relative; background:#fff; border-radius:22px; padding:26px 28px 22px; box-shadow:0 30px 80px rgba(0,0,0,.4);
width:min(94vw,560px); max-height:88vh; overflow:auto; animation:lrnFeestIn .4s cubic-bezier(.2,.9,.3,1.2) both;}
.lrn-uitleg .sluit{position:absolute; top:14px; right:14px; border:none; background:#e9f4f8; color:var(--blauw-medium); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:.9rem; font-weight:800;}
.lrn-uitleg .sluit:hover{background:var(--oranje); color:#fff;}
.lrn-uitleg .ukop{display:flex; align-items:baseline; gap:10px; margin-bottom:4px;}
.lrn-uitleg .ukop b{font-family:'Exo',sans-serif; font-weight:800; font-size:2.1rem; line-height:1; color:var(--oranje);}
.lrn-uitleg .ukop span{font-family:'Exo',sans-serif; font-weight:800; font-size:.95rem; color:var(--blauw);}
.lrn-uitleg .uintro{font-size:.88rem; color:#4f5259; margin:0 0 16px; padding-right:34px;}
.lrn-uitleg .urijen{display:flex; flex-direction:column; gap:9px;}
.lrn-uitleg .urij{display:grid; grid-template-columns:1fr 150px auto; gap:12px; align-items:center; background:#f5f5f9; border-radius:13px; padding:10px 13px;}
.lrn-uitleg .ulinks{display:flex; align-items:flex-start; gap:9px; min-width:0;}
.lrn-uitleg .uico{font-size:1rem; line-height:1.2;}
.lrn-uitleg .ulbl{font-size:.87rem; font-weight:700; color:var(--blauw); line-height:1.25;}
.lrn-uitleg .ulbl em{display:block; font-style:normal; font-weight:600; font-size:.72rem; color:var(--blauw-medium); margin-top:2px;}
.lrn-uitleg .ubalk{height:7px; border-radius:999px; background:#e9f4f8; overflow:hidden;}
.lrn-uitleg .ubalk i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--oranje),#f79c44);}
.lrn-uitleg .ucijfer{display:block; font-size:.72rem; color:var(--blauw-medium); font-weight:600; margin-top:4px;}
.lrn-uitleg .uweging{font-family:'Exo',sans-serif; font-weight:800; font-size:1rem; color:var(--blauw); white-space:nowrap;}
.lrn-uitleg .uweging em{font-style:normal; font-size:.72rem; color:var(--blauw-medium); font-weight:700;}
.lrn-uitleg .uvoet{margin-top:15px; font-size:.83rem; color:#4f5259; background:#fef1e2; border-left:3px solid var(--oranje); border-radius:0 11px 11px 0; padding:11px 14px;}
@media (max-width:560px){
.lrn-uitleg .urij{grid-template-columns:1fr auto; gap:8px 10px;}
.lrn-uitleg .urechts{grid-column:1 / -1;}
}
/* ================= Verder oefenen — filmposter-tegels (S7) ================= */
.lmsx{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:11px;}
.lmsx-kaart{position:relative; border:none; padding:0; text-align:left; border-radius:14px; overflow:hidden; cursor:pointer;
background:var(--tegel,linear-gradient(150deg,#0065cc,#073889)); color:#fff; min-height:148px; display:flex; flex-direction:column; justify-content:flex-end;
box-shadow:0 3px 12px rgba(7,56,137,.18); transition:transform .18s cubic-bezier(.2,.7,.3,1.4), box-shadow .18s; isolation:isolate;}
.lmsx-kaart:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 14px 30px rgba(7,56,137,.32);}
.lmsx-kaart::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px); background-size:14px 14px; opacity:.5; z-index:-1;}
.lmsx-kaart::after{content:""; position:absolute; top:0; bottom:0; width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent); transform:translateX(-130%) skewX(-18deg); z-index:1; pointer-events:none;}
.lmsx-kaart:hover::after{animation:lrnShine .7s ease;}
.lmsx-kaart .ico{position:absolute; top:8px; right:6px; font-size:2.9rem; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)); transition:transform .25s;}
.lmsx-kaart:hover .ico{transform:scale(1.12) rotate(-5deg);}
.lmsx-kaart .tekst{position:relative; padding:11px 12px 12px; background:linear-gradient(180deg,transparent,rgba(7,44,110,.52) 34%);}
.lmsx-kaart .titel{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:.98rem; line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,.4);}
.lmsx-kaart .sub{display:block; font-size:.82rem; color:#e9f4f8; margin-top:3px; line-height:1.35;}
.lmsx-kaart .vgrij{display:flex; align-items:center; gap:9px; margin-top:9px;}
.lmsx-kaart .vgbalk{flex:1; height:7px; background:rgba(255,255,255,.28); border-radius:999px; overflow:hidden;}
.lmsx-kaart .vgbalk i{display:block; height:100%; background:linear-gradient(90deg,#fde1b6,var(--oranje)); border-radius:999px;}
.lmsx-kaart .vgpct{font-family:'Exo',sans-serif; font-weight:800; font-size:.78rem; white-space:nowrap; text-shadow:0 1px 5px rgba(0,0,0,.4);}
.lmsx-kaart .vgpct.af{color:#c9edcd;}
.lmsx-kaart .klaar{position:absolute; top:8px; left:8px; background:var(--groen); color:#fff; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,.3);}
/* afgerond maar nog niet gehaald (score onder de grens): grijs vinkje */
.lmsx-kaart .klaar.grijs{background:#9496a1;}
.lmsx-kaart .straks{position:absolute; top:8px; left:8px; background:rgba(255,255,255,.24); color:#fff; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:3px 9px; backdrop-filter:blur(3px);}
.lmsx-kaart.dicht{filter:saturate(.78); }
.lmsx-kaart.dicht .titel{opacity:.85;}
/* nog op slot: het bijbehorende roosterblok is nog niet gestart */
.lmsx-kaart.op-slot{filter:grayscale(.5) saturate(.75); opacity:.82;}
.lmsx-kaart.op-slot:hover{transform:none; box-shadow:0 8px 18px rgba(7,56,137,.22);}
.lmsx-kaart .slotchip{display:inline-flex; align-items:center; gap:5px; text-transform:none; font-size:.68rem; background:rgba(4,20,48,.55);}
.lmsx-kaart .slotchip .hicoon{width:12px; height:12px;}
/* ================= Cinematische hero (S13/S16) ================= */
.itk-hero{position:relative; overflow:hidden; border-radius:22px; margin-top:14px; padding:38px 38px 34px; color:var(--wit);
background:linear-gradient(125deg,#041d47 0%,#062e6f 34%,#0a4aa0 68%,#0065cc 100%);
box-shadow:0 18px 44px rgba(7,56,137,.28); isolation:isolate;}
.itk-hero::before{content:""; position:absolute; inset:0; z-index:-1;
background-image:radial-gradient(rgba(255,255,255,.13) 1.3px, transparent 1.3px); background-size:17px 17px; opacity:.5;}
.itk-hero::after{content:""; position:absolute; right:-70px; top:-70px; width:320px; height:320px; border-radius:50%; z-index:-1;
background:radial-gradient(circle,rgba(244,96,21,.4),transparent 68%); animation:lrnAurora 11s ease-in-out infinite;}
.itk-hero .aurora{position:absolute; left:-90px; bottom:-120px; width:340px; height:340px; border-radius:50%; z-index:-1; pointer-events:none;
background:radial-gradient(circle,rgba(0,168,245,.33),transparent 66%); animation:lrnAurora2 14s ease-in-out infinite;}
.itk-hero h2{font-size:2.15rem; font-weight:800; margin-bottom:8px; position:relative; letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.25);}
.itk-hero p{font-size:.98rem; color:#d3e6f0; max-width:62ch; position:relative; line-height:1.55;}
.itk-herorow{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:24px; position:relative;}
.itk-ring{--sz:82px; width:var(--sz); height:var(--sz); position:relative; flex-shrink:0; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
.itk-ring svg:not(.hicoon){transform:rotate(-90deg); width:100%; height:100%;}
.itk-ring .rc{fill:none; stroke-width:9; stroke-linecap:round;}
.itk-ring .rc.bg{stroke:rgba(255,255,255,.2);}
.itk-ring .rc.fg{stroke:var(--oranje); transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1);}
.itk-ring .lbl{position:absolute; inset:0; display:grid; place-items:center; font-family:'Exo',sans-serif; font-weight:800; font-size:1.05rem;}
.itk-herostat{display:flex; gap:24px; flex-wrap:wrap;}
.itk-herostat .s{font-size:.8rem; color:#d3e6f0;}
.itk-herostat .s b{display:block; font-family:'Exo',sans-serif; font-size:1.45rem; color:var(--wit); line-height:1.15;}
.itk-toetsbtn{margin-left:auto; background:linear-gradient(135deg,#f79c44,#f46015); border:none; color:var(--wit); font-weight:800; font-size:.96rem; border-radius:999px; padding:14px 26px;
box-shadow:0 8px 22px rgba(244,96,21,.45), inset 0 -4px 0 rgba(0,0,0,.18); transition:transform .13s, box-shadow .13s;}
.itk-toetsbtn:hover{transform:translateY(-2px); box-shadow:0 13px 28px rgba(244,96,21,.55), inset 0 -4px 0 rgba(0,0,0,.18);}
.itk-toetsbtn:active{transform:translateY(2px); box-shadow:0 4px 12px rgba(244,96,21,.4), inset 0 -1px 0 rgba(0,0,0,.18);}
.itk-toetsbtn.locked{background:#4f5259; box-shadow:none; cursor:not-allowed;}
.lm-hero .lm-ico{position:absolute; right:30px; top:22px; font-size:5.4rem; opacity:.9; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); pointer-events:none; animation:lrnFloat 6s ease-in-out infinite;}
.lm-hero h2{padding-right:110px;}
.lm-banner{background:linear-gradient(120deg,#062e6f 0%,#0a4aa0 55%,#0065cc 100%) center/cover no-repeat;}
/* ================= hoofdstuk-kaarten ================= */
.itk-chapters{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; margin-top:26px;}
.itk-chap{background:var(--wit); border:none; border-radius:18px; overflow:hidden; text-align:left; display:flex; flex-direction:column; cursor:pointer;
box-shadow:0 2px 12px rgba(7,56,137,.09); transition:transform .2s cubic-bezier(.2,.7,.3,1.3), box-shadow .2s; animation:itkUp .45s both; position:relative; isolation:isolate;}
.itk-chap:hover{transform:translateY(-5px); box-shadow:0 18px 38px rgba(7,56,137,.22);}
.itk-chap .cover{height:128px; background:var(--blauw-soft); position:relative; overflow:hidden; background-size:cover; background-position:center;}
.itk-chap .cover::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px); background-size:15px 15px; opacity:.6;}
.itk-chap .cover::after{content:""; position:absolute; top:0; bottom:0; width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent); transform:translateX(-130%) skewX(-18deg); pointer-events:none;}
.itk-chap:hover .cover::after{animation:lrnShine .75s ease;}
.itk-chap .cover .cico{position:absolute; right:6px; bottom:-14px; font-size:78px; line-height:1; opacity:.95; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); transition:transform .3s cubic-bezier(.2,.7,.3,1.4);}
.itk-chap:hover .cover .cico{transform:scale(1.12) rotate(-5deg) translateY(-3px);}
.itk-chap .cnum{position:absolute; top:10px; left:10px; z-index:2; background:rgba(7,56,137,.85); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.68rem; letter-spacing:.05em; padding:4px 9px; border-radius:999px; backdrop-filter:blur(3px);}
.itk-chap .status{position:absolute; top:10px; right:10px; z-index:2; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:800;}
.itk-chap .status.done{background:var(--groen); color:#fff; animation:itkBadgePop .4s both;}
.itk-chap .status.busy{background:var(--oranje); color:#fff;}
.itk-chap .status.new{background:rgba(255,255,255,.88); color:var(--blauw-medium);}
.itk-chap .cbody{padding:15px 17px 17px; display:flex; flex-direction:column; gap:6px; flex:1;}
.itk-chap h3{font-size:1.06rem; font-weight:800; line-height:1.2;}
.itk-chap .desc{font-size:.83rem; color:#4f5259; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.itk-chap .foot{font-size:.73rem; color:var(--blauw-medium); font-weight:600; display:flex; gap:12px; align-items:center; margin-top:2px;}
.itk-chap .pmini{height:6px; background:var(--hairline); border-radius:999px; overflow:hidden; margin-top:4px;}
.itk-chap .pmini i{display:block; height:100%; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); border-radius:999px; transition:width .5s;}
/* ================= lezer (S14/S17) ================= */
.itk-reader{max-width:1060px; width:100%; margin:0 auto;}
.itk-banner{border-radius:18px; overflow:hidden; position:relative; height:168px; background:var(--blauw); margin-top:10px; display:flex; align-items:flex-end; box-shadow:0 12px 30px rgba(7,56,137,.22); background-size:cover; background-position:center;}
.itk-banner::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.15) 1.5px, transparent 1.5px); background-size:18px 18px; opacity:.6;}
.itk-banner::after{content:attr(data-ico); position:absolute; right:14px; bottom:-26px; font-size:140px; line-height:1; opacity:.92; filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));}
.itk-banner .bt{position:relative; z-index:2; color:#fff; padding:20px 24px; text-shadow:0 1px 8px rgba(0,0,0,.45);}
.itk-banner .bt .num{font-family:'Exo',sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.08em; color:#fde1b6;}
.itk-banner .bt h2{font-size:1.6rem; font-weight:800;}
.itk-progwrap{padding:12px 0 6px;}
.itk-progbar{height:9px; background:var(--hairline); border-radius:999px; overflow:hidden;}
.itk-progbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); border-radius:999px; transition:width .5s;}
.itk-proglbl{font-size:.74rem; color:var(--blauw-medium); font-weight:600; margin-top:4px;}
.itk-subchap{margin-top:24px;}
.itk-subchap > h2{font-size:1.2rem; font-weight:800; color:var(--blauw); display:inline-block; padding-bottom:6px; border-bottom:3px solid var(--oranje); margin-bottom:4px;}
.itk-subchap > .subdesc{font-size:.9rem; color:#4f5259; margin-bottom:6px;}
.itk-sec{background:var(--wit); border-radius:18px; padding:22px 26px; margin-top:16px; box-shadow:0 2px 12px rgba(7,56,137,.07);}
.itk-sec > h4{font-size:1.08rem; font-weight:800; margin-bottom:12px; color:var(--blauw); display:flex; align-items:center; gap:9px;}
.itk-sec > h4::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--oranje); flex-shrink:0;}
.itk-content{font-size:.96rem; color:var(--grijs); line-height:1.62;}
.itk-content p{margin:0 0 11px;}
.itk-content h1,.itk-content h2,.itk-content h3,.itk-content h4{color:var(--blauw); margin:16px 0 8px; line-height:1.25;}
.itk-content ul,.itk-content ol{margin:0 0 12px 22px;}
.itk-content li{margin-bottom:5px;}
.itk-content a{color:var(--blauw-bold); text-decoration:underline;}
.itk-content img{max-width:100%; border-radius:12px; margin:10px 0; display:block;}
.itk-content table{border-collapse:collapse; width:100%; margin:12px 0; font-size:.9rem;}
.itk-content td,.itk-content th{border:1px solid var(--blauw-soft); padding:8px 11px; text-align:left; vertical-align:top;}
.itk-content th{background:var(--hairline);}
.itk-content blockquote{border-left:4px solid var(--blauw-medium); background:var(--hairline); padding:9px 15px; margin:11px 0; border-radius:0 10px 10px 0;}
.itk-content .alert{border-left:4px solid var(--rood); background:#fbeaec; padding:11px 15px; margin:11px 0; border-radius:0 10px 10px 0;}
.itk-content .tip{border-left:4px solid var(--groen); background:#e8f8ea; padding:11px 15px; margin:11px 0; border-radius:0 10px 10px 0;}
.itk-content .example{border-left:4px solid var(--blauw-medium); background:#e9f4f8; padding:11px 15px; margin:11px 0; border-radius:0 10px 10px 0;}
/* kaders uit de overgezette Hero Academy-modules (Voorbeeld / Tip / Let op) */
.itk-content .lm-callout{border-left:4px solid var(--blauw-medium); background:#e9f4f8; padding:11px 15px 12px; margin:12px 0; border-radius:0 10px 10px 0;}
.itk-content .lm-callout > :last-child{margin-bottom:0;}
.itk-content .lm-callout-label{display:block; font-family:'Exo',sans-serif; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--blauw-medium); margin-bottom:6px;}
.itk-content .lm-tip{border-left-color:var(--groen-diep); background:#e8f8ea;}
.itk-content .lm-tip .lm-callout-label{color:var(--groen-diep);}
.itk-content .lm-alert{border-left-color:var(--rood); background:#fbeaec;}
.itk-content .lm-alert .lm-callout-label{color:var(--rood);}
.itk-content .lm-example{border-left-color:var(--oranje); background:#fef1e2;}
.itk-content .lm-example .lm-callout-label{color:var(--oranje);}
/* zoekstrings leesbaar maken: altijd monospace, en op mobiel zijwaarts schuiven
in plaats van de hele pagina breed trekken */
.bool-str{font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace; font-size:.86rem;
line-height:1.55; background:#f5f5f9; border:1px solid var(--blauw-soft); border-left:4px solid var(--blauw-medium);
border-radius:0 10px 10px 0; padding:10px 14px; margin:11px 0; color:#123; overflow-x:auto; white-space:pre-wrap;
overflow-wrap:break-word; -webkit-overflow-scrolling:touch;}
.bool-str b{color:var(--oranje); font-weight:800;}
.bool-str i{color:#4f5259; font-style:normal;}
.itk-content code{font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace; font-size:.88em;
background:#e9f4f8; border:1px solid var(--blauw-soft); border-radius:5px; padding:1px 5px; overflow-wrap:anywhere;}
.itk-tabs{margin:14px 0;}
.itk-tabbar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.itk-tabbar button{border:1.5px solid var(--blauw-soft); background:var(--wit); color:var(--blauw); border-radius:999px; padding:7px 15px; font-family:'Exo',sans-serif; font-weight:700; font-size:.82rem; transition:all .12s;}
.itk-tabbar button.active{background:var(--blauw); border-color:var(--blauw); color:var(--wit); transform:scale(1.04);}
.itk-tabpane{display:none;} .itk-tabpane.open{display:block; animation:itkUp .3s both;}
.itk-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:14px 0; perspective:1400px;}
.itk-card{background:transparent; border:none; padding:0; position:relative; min-height:200px;}
.itk-card h5{font-family:'Exo',sans-serif; font-size:.98rem; font-weight:800; color:var(--blauw); margin-bottom:6px;}
.itk-card .itk-content{font-size:.87rem;}
.itk-card.flip{cursor:pointer;}
.itk-card.flip .flin{position:relative; display:grid; min-height:200px; height:100%; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.35,.1,.25,1);}
.itk-card.flip:not(.open):hover .flin{transform:rotateY(14deg) translateY(-3px);}
.itk-card.flip.open .flin{transform:rotateY(180deg);}
.flface{grid-area:1/1; position:relative; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; padding:16px; overflow:hidden;}
.flfront{background:linear-gradient(150deg,#0a4aa8,#073889); color:var(--wit); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 8px 20px rgba(7,56,137,.28);}
.flfront::after{content:""; position:absolute; right:-45px; top:-45px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(244,96,21,.45), transparent 70%);}
.flfront .flq{font-family:'Exo',sans-serif; font-size:1.5rem; font-weight:800; color:var(--wit); background:var(--oranje); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom:12px; box-shadow:0 4px 12px rgba(244,96,21,.5); position:relative;}
.flfront h5{color:var(--wit); font-size:1rem; margin:0; position:relative;}
.flfront .flhint{font-size:.72rem; color:#d3e6f0; font-weight:600; margin-top:12px; position:relative;}
.flback{background:var(--wit); border:1.5px solid var(--blauw-soft); transform:rotateY(180deg); overflow-y:auto; box-shadow:0 6px 16px rgba(7,56,137,.12);}
.flback .flterm{font-family:'Exo',sans-serif; font-size:.72rem; font-weight:800; color:var(--oranje); text-transform:uppercase; letter-spacing:.06em; margin-bottom:7px;}
.flback .itk-content{font-size:.85rem;}
.flback::after{content:"draai terug"; display:block; font-size:.68rem; color:var(--blauw-medium); font-weight:600; margin-top:8px;}
li.itk-reveal{list-style:none; margin:0 0 9px -14px; max-width:100%; min-width:0;}
.revealchip{display:inline-flex; align-items:center; gap:10px; border:2px dashed var(--blauw-medium); background:#e9f4f8; border-radius:999px; padding:7px 15px 7px 8px; cursor:pointer; transition:transform .12s, background .15s, border-color .15s; min-width:190px; max-width:100%; box-sizing:border-box; text-align:left;}
.revealchip:hover{transform:translateX(3px);}
.revealchip .bub{width:28px; height:28px; border-radius:50%; background:var(--blauw-medium); color:#fff; font-weight:800; font-size:.95rem; display:grid; place-items:center; flex-shrink:0; transition:background .15s;}
.revealchip .lbl{color:var(--blauw-medium); font-size:.88rem; font-weight:600; font-style:italic; min-width:0; white-space:normal; overflow-wrap:anywhere;}
.revealchip.done{border-style:solid; border-color:var(--groen-diep); background:#e8f8ea; cursor:default; animation:itkPop .35s;}
.revealchip.done .bub{background:transparent; font-size:1.15rem; animation:itkCheckPop .4s both;}
.revealchip.done .lbl{color:var(--grijs); font-style:normal; font-weight:600;}
.itk-revealgrid{list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:10px 0 14px; padding:0;}
.itk-revealgrid li.itk-reveal{margin:0; max-width:100%; min-width:0;}
/* statische emoji-rij: zelfde pil-uiterlijk, maar direct leesbaar (geen klik) */
.itk-emojirij{display:inline-flex; align-items:center; gap:10px; border:2px solid #e9f4f8; background:#e9f4f8; border-radius:999px; padding:7px 15px 7px 8px; max-width:100%; box-sizing:border-box; text-align:left;}
.itk-emojirij .bub{width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #e9f4f8; display:grid; place-items:center; font-size:1.05rem; flex-shrink:0;}
.itk-emojirij .lbl{color:var(--grijs); font-size:.88rem; font-weight:600; min-width:0; white-space:normal; overflow-wrap:anywhere;}
.itk-def{border-radius:14px; overflow:hidden; margin:16px 0; border:1px solid var(--blauw-soft); box-shadow:0 2px 12px rgba(7,56,137,.08);}
.itk-def-q{background:linear-gradient(120deg,var(--blauw),var(--blauw-bold)); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:1.02rem; padding:12px 16px; display:flex; align-items:center; gap:11px;}
.itk-def-q .qm{width:26px; height:26px; border-radius:50%; background:var(--oranje); color:#fff; display:grid; place-items:center; font-size:.9rem; flex-shrink:0;}
.itk-def-a{padding:15px 18px; background:#e9f4f8; font-size:.95rem; line-height:1.62;}
.itk-def-a > :first-child{margin-top:0;} .itk-def-a > :last-child{margin-bottom:0;}
.itk-def.solo .itk-def-q{border-radius:14px;}
.itk-content h2,.itk-content h3,.itk-content h4{position:relative; padding-left:14px;}
.itk-content h2::before,.itk-content h3::before,.itk-content h4::before{content:""; position:absolute; left:0; top:3px; bottom:3px; width:5px; border-radius:3px; background:linear-gradient(180deg,var(--oranje),var(--blauw-medium));}
.itk-content ul:not(.itk-revealgrid) li::marker{color:var(--oranje);}
.itk-igraphic{margin:14px 0;}
.itk-recaplbl{font-size:.86rem; color:var(--blauw-medium); font-weight:600; margin-bottom:10px;}
.rcount{background:var(--blauw); color:#fff; border-radius:999px; padding:2px 11px; font-family:'Exo',sans-serif; font-weight:800; font-size:.78rem; margin-left:6px;}
.itk-recap{display:flex; flex-wrap:wrap; gap:9px;}
.itk-recap .itk-info{width:100%;}
.itk-checkpill{display:inline-flex; align-items:center; gap:8px; border:2px solid var(--blauw-soft); background:var(--wit); border-radius:999px; padding:9px 16px; font-size:.9rem; font-weight:600; color:var(--grijs); cursor:pointer; transition:transform .12s, border-color .12s, background .12s;}
.itk-checkpill:hover{transform:translateY(-2px); border-color:var(--blauw-medium);}
.itk-checkpill .cp{color:var(--blauw-medium); font-weight:800; font-size:1rem;}
.itk-checkpill.on{border-color:var(--groen-diep); background:#e8f8ea; animation:itkPop .3s;}
.itk-checkpill.on .cp{color:var(--groen-diep);}
.itk-gloss{display:flex; flex-direction:column; gap:9px; margin:14px 0;}
.itk-gloss .itk-info > button{font-size:.98rem;}
.itk-gloss .itk-info{border-color:var(--blauw-soft);}
.itk-gloss .itk-info.open > button{background:linear-gradient(120deg,var(--blauw),var(--blauw-bold)); color:#fff;}
.itk-gloss .itk-info.open > button .chev{color:#fff;}
.itk-info{border:1.5px solid var(--blauw-soft); border-radius:14px; margin:9px 0; overflow:hidden; background:var(--wit);}
.itk-info > button{width:100%; text-align:left; border:none; background:var(--hairline); color:var(--blauw); font-family:'Exo',sans-serif; font-weight:700; font-size:.9rem; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.itk-info > button .chev{transition:transform .25s; color:var(--oranje);}
.itk-info.open > button .chev{transform:rotate(90deg);}
.itk-info > .body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.itk-info.open > .body{max-height:900px;}
.itk-info > .body > div{padding:14px 16px;}
.itk-refl{border-left:4px solid var(--oranje); background:linear-gradient(120deg,#fef1e2,#fff); padding:14px 18px; margin:14px 0; border-radius:0 12px 12px 0;}
.itk-refl .rlbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--oranje); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.itk-refl details{margin-top:8px;} .itk-refl summary{cursor:pointer; font-weight:700; color:var(--oranje); font-size:.86rem;}
/* invulvak bij een reflectie met een bekend antwoord */
.itk-invul{display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap;}
.itk-invul input{flex:1 1 220px; min-width:0; border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:14px;
padding:12px 15px; font-family:'Source Sans 3',sans-serif; font-size:.95rem; color:var(--grijs); background:var(--wit); transition:border-color .12s;}
.itk-invul input:focus{outline:none; border-color:var(--blauw-medium);}
.itk-invul input:disabled{background:#f5f5f9; color:var(--blauw); font-weight:700; -webkit-text-fill-color:var(--blauw); opacity:1;}
.itk-invul.goed input{border-color:var(--groen-diep);}
.itk-invul.fout input{border-color:var(--oranje);}
.itk-invul .itk-checkbtn{flex:0 0 auto;}
@media(max-width:520px){ .itk-invul .itk-checkbtn{width:100%;} }
/* ---- vragen (cursus + toets) — tactiele knoppen ---- */
.itk-vraag{background:var(--wit); border:2px solid var(--hairline); border-radius:18px; padding:18px 22px; margin-top:16px; box-shadow:0 2px 12px rgba(7,56,137,.07);}
.itk-vraag.quiz{animation:itkSlideIn .35s both;}
.itk-vraag.shake{animation:itkShake .5s;}
.itk-vraag .vnr{font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; color:var(--oranje); letter-spacing:.05em; display:flex; align-items:center; gap:8px;}
.itk-vraag .vnr .qic{width:22px;height:22px;border-radius:50%;background:#fef1e2;display:grid;place-items:center;}
.itk-vraag .vtitel{font-size:1.12rem; font-weight:800; color:var(--blauw); margin:8px 0 4px; line-height:1.3;}
.itk-vraag .vhint{font-size:.76rem; color:var(--blauw-medium); margin-bottom:12px;}
.itk-opts{display:flex; flex-direction:column; gap:9px;}
.itk-opt{display:flex; align-items:center; gap:12px; border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:14px; padding:12px 15px; background:var(--wit); text-align:left; font-size:.93rem; color:var(--grijs); width:100%; transition:transform .1s, border-color .12s, background .12s;}
.itk-opt:hover:not(:disabled){border-color:var(--blauw-medium); transform:translateX(3px);}
.itk-opt:active:not(:disabled){transform:translateY(1px); border-bottom-width:2px; margin-bottom:2px;}
.itk-opt .mark{width:24px; height:24px; border:2px solid var(--blauw-soft); flex-shrink:0; display:grid; place-items:center; font-size:.8rem; font-weight:800; color:var(--wit); background:var(--wit); transition:all .12s;}
.itk-opt.multi .mark{border-radius:6px;} .itk-opt.single .mark{border-radius:50%;}
.itk-opt .otxt{flex:1;} .itk-opt .otxt p{margin:0;}
.itk-opt.sel{border-color:var(--blauw-bold); background:#e9f4f8;}
.itk-opt.sel .mark{background:var(--blauw-bold); border-color:var(--blauw-bold); transform:scale(1.05);}
.itk-opt.goed{border-color:var(--groen-diep); background:#e8f8ea;}
.itk-opt.goed .mark{background:var(--groen); border-color:var(--groen-diep); animation:itkCheckPop .4s both;}
.itk-opt.fout{border-color:var(--rood); background:#fbeaec;}
.itk-opt.fout .mark{background:var(--rood); border-color:var(--rood);}
.itk-opt:disabled{cursor:default;}
.itk-feedback{margin-top:14px; border-radius:12px; padding:13px 16px; font-size:.9rem; display:none;}
.itk-feedback.open{display:block; animation:itkUp .3s both;}
.itk-feedback.goed{background:#e8f8ea; border-left:4px solid var(--groen);}
.itk-feedback.fout{background:#fbeaec; border-left:4px solid var(--rood);}
.itk-feedback .fkop{font-weight:800; font-family:'Exo',sans-serif; margin-bottom:4px; display:flex; align-items:center; gap:7px;}
.itk-btnrow{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.itk-checkbtn{background:var(--blauw); border:none; color:var(--wit); font-weight:800; font-size:.88rem; border-radius:999px; padding:11px 22px;
box-shadow:inset 0 -4px 0 rgba(0,0,0,.22); transition:transform .1s, filter .1s, box-shadow .1s;}
.itk-checkbtn:hover:not(:disabled){filter:brightness(1.12); transform:translateY(-1px);}
.itk-checkbtn:active:not(:disabled){transform:translateY(2px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.22);}
.itk-checkbtn.oranje{background:linear-gradient(135deg,#f79c44,#f46015);}
.itk-checkbtn:disabled{opacity:.4; cursor:default;}
.itk-reader .oranjebtn{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18); transition:transform .1s, filter .1s, box-shadow .1s;}
.itk-reader .oranjebtn:active{transform:translateY(2px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);}
/* ---- toets (S15) ---- */
.itk-quizbar{position:sticky; top:52px; z-index:20; background:var(--wit); border-radius:14px; padding:14px 20px; margin-top:14px; box-shadow:0 2px 12px rgba(7,56,137,.1);}
.itk-quizbar .top{display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap;}
.itk-quizbar .cnt{font-family:'Exo',sans-serif; font-weight:800; font-size:.9rem;}
.itk-quizbar .score{margin-left:auto; font-family:'Exo',sans-serif; font-weight:800; color:var(--groen-diep); font-size:.9rem; display:flex; align-items:center; gap:6px;}
.itk-quizbar .streak{background:#fef1e2; color:var(--oranje); border-radius:999px; padding:3px 11px; font-size:.78rem; font-weight:800; display:none;}
.itk-quizbar .streak.on{display:inline-flex; animation:itkPop .3s both;}
.itk-quizbar .pbalk{height:10px; background:var(--hairline); border-radius:999px; overflow:hidden;}
.itk-quizbar .pbalk i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); border-radius:999px; transition:width .4s;}
.itk-result{background:var(--wit); border-radius:18px; padding:34px 26px; margin-top:16px; text-align:center; box-shadow:0 4px 20px rgba(7,56,137,.12); animation:itkPop .5s both;}
.itk-result .rring{--sz:130px; width:var(--sz); height:var(--sz); margin:0 auto 8px; position:relative;}
.itk-result .rring svg:not(.hicoon){transform:rotate(-90deg);}
.itk-result .rring .rc{fill:none; stroke-width:11; stroke-linecap:round;}
.itk-result .rring .bg{stroke:var(--hairline);}
.itk-result .rring .fg{stroke:var(--groen); transition:stroke-dashoffset 1.1s ease;}
.itk-result .rring.fail .fg{stroke:var(--rood);}
.itk-result .rring .lbl{position:absolute; inset:0; display:grid; place-items:center; flex-direction:column; font-family:'Exo',sans-serif;}
.itk-result .rring .lbl b{font-size:2rem; line-height:1;} .itk-result .rring .lbl span{font-size:.72rem; color:var(--blauw-medium);}
.itk-result .oordeel{font-family:'Exo',sans-serif; font-weight:800; font-size:1.3rem; margin-top:8px;}
.itk-result .oordeel.pass{color:var(--groen-diep);} .itk-result .oordeel.fail{color:var(--rood);}
.itk-result p{font-size:.92rem; color:#4f5259; margin-top:8px; max-width:46ch; margin-left:auto; margin-right:auto;}
.itk-result .acties{display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap;}
.itk-review{max-width:1060px; margin:18px auto 0;}
.itk-review h3{font-size:1.05rem; font-weight:800; margin:6px 0 4px;}
/* confetti */
.itk-conf{position:fixed; top:0; width:11px; height:14px; z-index:9999; pointer-events:none; border-radius:2px; animation:itkConfFall linear forwards;}
@media(max-width:560px){ .itk-hero{padding:26px 22px} .itk-toetsbtn{margin-left:0} .itk-herorow{gap:16px} .itk-hero h2{font-size:1.6rem} .lm-hero .lm-ico{font-size:3.4rem; right:16px; top:14px} .lm-hero h2{padding-right:66px} }
/* ================= leermodule-blokken ================= */
.lm-audio{border:1.5px solid var(--blauw-soft); border-radius:14px; padding:15px 18px; margin:13px 0; background:linear-gradient(150deg,#e9f4f8,#e9f4f8);}
.lm-audio .akop{display:flex; align-items:center; gap:10px; font-family:'Exo',sans-serif; font-weight:800; font-size:.95rem; color:var(--blauw); margin-bottom:8px;}
.lm-audio .akop .aic{width:34px; height:34px; border-radius:10px; background:var(--blauw); color:#fff; display:grid; place-items:center; font-size:1rem; flex-shrink:0;}
.lm-audio audio{width:100%; margin-top:8px;}
.lm-video{margin:13px 0;}
.lm-video .vwrap{position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(7,56,137,.18); margin-top:10px;}
.lm-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.lm-video .vlink{font-size:.8rem; color:var(--blauw-medium); margin-top:6px;}
.lm-video .vlink a{color:var(--blauw-bold);}
.lm-dl{display:flex; align-items:center; gap:14px; border:2px dashed var(--blauw-medium); border-radius:14px; padding:15px 18px; margin:13px 0; background:#e9f4f8;}
.lm-dl .dic{width:42px; height:42px; border-radius:12px; background:var(--blauw); color:#fff; display:grid; place-items:center; font-size:1.25rem; flex-shrink:0;}
.lm-dl .dtxt{flex:1;} .lm-dl .dtxt b{display:block; color:var(--blauw); font-size:.95rem;}
.lm-dl .dtxt span{font-size:.8rem; color:#4f5259;}
.lm-dl a{background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; text-decoration:none; font-weight:800; font-size:.85rem; border-radius:999px; padding:10px 20px; white-space:nowrap; transition:transform .12s; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);}
.lm-dl a:hover{transform:translateY(-2px);}
.lm-infoimg{max-width:100%; border-radius:14px; margin:10px 0 14px; display:block; box-shadow:0 4px 16px rgba(7,56,137,.14); cursor:zoom-in; transition:transform .15s;}
.lm-infoimg:hover{transform:scale(1.01);}
.lm-lightbox{position:fixed; inset:0; z-index:9998; background:rgba(4,24,58,.88); display:grid; place-items:center; padding:24px; cursor:zoom-out; animation:itkUp .2s both;}
.lm-lightbox img{max-width:96vw; max-height:92vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lm-match{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-top:6px;}
@media(max-width:640px){ .lm-match{gap:8px 10px;} }
.lm-match .mkol{display:flex; flex-direction:column; gap:9px;}
.lm-match .mkol .klbl{font-family:'Exo',sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--blauw-medium);}
.lm-mopt{position:relative; border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:12px; padding:10px 13px; background:var(--wit); text-align:left; font-size:.9rem; color:var(--grijs); width:100%; transition:border-color .12s, background .12s, transform .1s; min-height:44px;}
.lm-mopt:hover:not(:disabled){border-color:var(--blauw-medium); transform:translateY(-1px);}
.lm-mopt p{margin:0;}
.lm-mopt.sel{border-color:var(--oranje); background:#fef1e2; box-shadow:0 0 0 3px rgba(244,96,21,.18);}
.lm-mopt.paired{border-style:solid;}
.lm-mopt .pairdot{position:absolute; top:-9px; right:-7px; min-width:22px; height:22px; border-radius:999px; color:#fff; font-size:.68rem; font-weight:800; display:none; place-items:center; padding:0 6px; font-family:'Exo',sans-serif;}
.lm-mopt.paired .pairdot{display:grid; animation:itkPop .25s both;}
.lm-mopt.goed{border-color:var(--groen-diep); background:#e8f8ea;}
.lm-mopt.fout{border-color:var(--rood); background:#fbeaec;}
.lm-mopt:disabled{cursor:default;}
/* de juiste combinaties, getoond in de feedback als er iets fout was */
.lm-juist{margin-top:11px; border:1px solid var(--blauw-soft); border-radius:12px; background:rgba(255,255,255,.75); padding:11px 13px;}
.lm-juist .jkop{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--blauw-medium); margin-bottom:8px;}
.lm-juist ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.lm-juist li{display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center; font-size:.86rem; color:var(--grijs);}
.lm-juist li p{margin:0;}
.lm-juist li .jp{color:var(--blauw-medium); font-weight:800;}
.lm-juist li.mis{background:#fff; border-left:3px solid var(--rood); border-radius:0 9px 9px 0; padding:5px 7px 5px 9px; color:var(--blauw);}
@media(max-width:640px){
.lm-juist li{grid-template-columns:1fr; gap:1px;}
.lm-juist li .jp{display:none;}
.lm-juist li .jr::before{content:""; display:inline-block; width:.75em; height:.75em; margin-right:.35em; background:var(--blauw-medium); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
}
.lm-opdracht{border-left:4px solid var(--blauw-bold); background:linear-gradient(120deg,#e9f4f8,#fff); padding:14px 18px; margin:14px 0; border-radius:0 12px 12px 0;}
.lm-opdracht .olbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blauw-bold); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
/* ================= Speelvormen: volgorde, stapel, dropzones, invul, waarniet ================= */
@keyframes itkBlokVal{0%{transform:translateY(-90px) scale(.9); opacity:0} 70%{transform:translateY(4px)} 100%{transform:none; opacity:1}}
@keyframes itkKaartNieuw{from{transform:translateY(-12px) scale(.96); opacity:0} to{transform:none; opacity:1}}
.itk-game .dragging{opacity:.85; z-index:50; position:relative; box-shadow:0 12px 28px rgba(7,56,137,.3); cursor:grabbing;}
/* volgorde */
.itk-volg{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.itk-volgrij{display:flex; align-items:center; gap:11px; border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:12px; padding:10px 13px; background:var(--wit); text-align:left; font-size:.9rem; color:var(--grijs); width:100%; transition:border-color .12s, background .12s, transform .1s; min-height:44px; touch-action:none; cursor:grab;}
.itk-volgrij:hover:not(:disabled){border-color:var(--blauw-medium);}
.itk-volgrij.dragging{transition:none; border-color:var(--oranje); background:#fef1e2;}
.itk-volgrij.sel{border-color:var(--oranje); background:#fef1e2; box-shadow:0 0 0 3px rgba(244,96,21,.18);}
.itk-volgrij .vnum{flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--blauw); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.78rem; display:grid; place-items:center;}
.itk-volgrij .vtxt{flex:1; min-width:0;}
.itk-volgrij .vtxt p{margin:0;}
.itk-volgrij .vgrip{color:var(--blauw-medium); font-size:1rem; flex-shrink:0;}
.itk-volgrij.goed{border-color:var(--groen-diep); background:#e8f8ea;}
.itk-volgrij.fout{border-color:var(--rood); background:#fbeaec;}
.itk-volgrij:disabled{cursor:default;}
/* stapel */
.itk-stapel{margin-top:6px;}
.itk-stapelstand{font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--blauw-medium); margin-bottom:8px;}
.itk-stapelkaart{border:2px solid var(--oranje); background:linear-gradient(120deg,#fef1e2,#fff); border-radius:14px; padding:16px 18px; font-size:1.02rem; font-weight:700; color:var(--blauw); text-align:center; margin-bottom:12px; box-shadow:0 6px 16px rgba(244,96,21,.14);}
.itk-stapelkaart.nieuw{animation:itkKaartNieuw .3s both;}
.itk-stapelkols{display:grid; grid-template-columns:repeat(var(--n,2),1fr); gap:8px;}
.itk-stapelkol{display:flex; flex-direction:column; border:2px dashed var(--blauw-soft); border-radius:12px; background:#e9f4f8; padding:8px; min-height:150px; cursor:pointer; transition:border-color .12s, background .12s; text-align:center;}
.itk-stapelkol:hover:not(:disabled){border-color:var(--oranje); background:#fef1e2;}
.itk-stapelkol:disabled{cursor:default;}
.itk-stapelkol .kkop{font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--blauw); margin-bottom:8px; overflow-wrap:anywhere;}
.itk-stapelkol .kstapel{display:flex; flex-direction:column-reverse; gap:4px; margin-top:auto;}
.itk-stapelkol .sblok{display:block; border-radius:8px; padding:5px 7px; font-size:.72rem; font-weight:600; color:#fff; animation:itkBlokVal .4s both; overflow-wrap:anywhere;}
.itk-stapelkol .sblok.goed{background:var(--groen);}
.itk-stapelkol .sblok.fout{background:var(--rood);}
/* dropzones */
.itk-dz{margin-top:6px;}
.itk-dzbord{position:relative; border-radius:14px; background:linear-gradient(135deg,#073889,#0a4aa0 55%,#0065cc); min-height:300px; box-shadow:0 6px 18px rgba(7,56,137,.22); overflow:hidden;}
.itk-dzbord::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.2px); background-size:16px 16px;}
.itk-dzbord img{width:100%; height:auto; display:block;}
.itk-dzbord.foto{background:none; min-height:0;}
.itk-dzone{position:absolute; transform:translate(-50%,-50%); width:22%; min-height:52px; border:2px dashed rgba(255,255,255,.75); border-radius:12px; background:rgba(255,255,255,.14); color:#fff; font-size:.76rem; font-weight:700; line-height:1.25; padding:6px 8px; cursor:pointer; backdrop-filter:blur(2px); transition:background .12s, border-color .12s; display:flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box;}
.itk-dzbord.foto .itk-dzone{border-color:rgba(7,56,137,.75); background:rgba(255,255,255,.82); color:var(--blauw);}
.itk-dzone:hover{background:rgba(255,255,255,.28);}
.itk-dzone.vol{border-style:solid; border-color:var(--oranje); background:var(--oranje);}
.itk-dzbord.foto .itk-dzone.vol{color:#fff;}
.itk-dzone.goed{border-color:var(--groen-diep); background:var(--groen); color:#fff;}
.itk-dzone.fout{border-color:var(--rood); background:var(--rood); color:#fff;}
.itk-dzone .dzlbl{overflow-wrap:anywhere;}
.itk-dzone .dzlbl.hint{color:#fff; font-size:inherit; margin-top:0;}
.itk-dzbord.foto .itk-dzone .dzlbl.hint{color:var(--blauw);}
.itk-dztray{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.itk-dchip{border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:999px; background:var(--wit); color:var(--grijs); font-size:.85rem; font-weight:600; padding:8px 14px; cursor:pointer; transition:border-color .12s, background .12s, transform .1s; min-height:40px; touch-action:none;}
.itk-dchip:hover{border-color:var(--blauw-medium); transform:translateY(-1px);}
.itk-dchip.sel{border-color:var(--oranje); background:#fef1e2; box-shadow:0 0 0 3px rgba(244,96,21,.18);}
.itk-dchip.weg{display:none;}
/* sterren per hoofdstuk + cv-match-kaart */
.pad-node .pster{position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); color:#ffbd0d; font-size:.6rem; letter-spacing:-1px; background:#fff; border-radius:999px; padding:1px 6px; box-shadow:0 2px 8px rgba(7,56,137,.22); white-space:nowrap;}
.spl-sterren{font-size:1.7rem; letter-spacing:4px; margin-top:14px; animation:itkPop .5s .5s both;}
.spl-sterhint{font-size:.88rem; color:#944100; background:#fef1e2; border-radius:12px; padding:10px 16px; margin-top:10px; display:inline-block;}
.spl-sterhint.top{color:#1e7e2b; background:#e8f8ea;}
.itk-scenario.cv{background:linear-gradient(120deg,#e9f4f8,#fff); border-color:#d3e6f0; border-left-color:var(--blauw-bold);}
.itk-scenario.cv .slbl{color:var(--blauw-bold);}
.itk-scenario.cv .itk-content{font-style:normal; font-size:.92rem;}
.itk-scenario.cv .itk-content p{margin:3px 0; padding-left:4px;}
/* zwevende voortgangs-tooltip op het leerpad */
.pad-tip{position:absolute; transform:translate(-50%,-100%) translateY(6px); background:#0b2a5c; color:#fff; border-radius:12px;
padding:9px 14px; font-size:.74rem; line-height:1.4; white-space:nowrap; opacity:0; pointer-events:none;
transition:opacity .15s, transform .15s; z-index:40; box-shadow:0 10px 26px rgba(7,42,92,.35); text-align:center;}
.pad-tip b{font-family:'Exo',sans-serif; font-size:.78rem;}
.pad-tip .vg{display:block; margin-top:3px; color:#fde1b6; font-weight:700;}
.pad-tip::after{content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:7px solid transparent; border-top-color:#0b2a5c;}
.pad-node:hover + .pad-tip{opacity:1; transform:translate(-50%,-100%) translateY(0);}
/* de Kennisbaas */
@keyframes baasHitSchud{0%,100%{transform:translateX(0) rotate(0)} 20%{transform:translateX(-5px) rotate(-6deg)} 40%{transform:translateX(5px) rotate(5deg)} 60%{transform:translateX(-4px) rotate(-3deg)} 80%{transform:translateX(3px) rotate(2deg)}}
@keyframes baasDoemtOp{0%{transform:scale(.4) translateY(40px); opacity:0} 55%{transform:scale(1.22) translateY(-6px); opacity:1} 75%{transform:scale(.96)} 100%{transform:scale(1)}}
@keyframes baasLoert{0%,100%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.09) rotate(2.5deg)}}
@keyframes baasGloed{0%,100%{box-shadow:0 0 34px 6px rgba(183,21,37,.55), 0 12px 34px rgba(0,0,0,.4)} 50%{box-shadow:0 0 64px 20px rgba(183,21,37,.75), 0 12px 34px rgba(0,0,0,.4)}}
@keyframes baasDonder{0%,88%,100%{filter:brightness(1)} 90%{filter:brightness(1.5)} 93%{filter:brightness(.85)} 96%{filter:brightness(1.35)}}
@keyframes roodFlits{0%{opacity:0} 8%{opacity:1} 70%{opacity:.8} 100%{opacity:0}}
@keyframes baasRentWeg{0%,45%{transform:translateX(0) rotate(0)} 60%{transform:translateX(6%) rotate(4deg)} 100%{transform:translateX(240%) rotate(14deg); opacity:0}}
.spl-roodflits{position:fixed; inset:0; z-index:9999; pointer-events:none; background:radial-gradient(circle, rgba(183,21,37,.22), rgba(183,21,37,.55)); animation:roodFlits 2s both;}
.spl-kop-stap.dreiging{animation:baasDonder 3.4s infinite;}
.spl-kop-stap .baasbeeld.doemt{animation:baasDoemtOp .9s cubic-bezier(.2,.9,.3,1.3) both, baasLoert 2.6s .9s ease-in-out infinite, baasGloed 2.6s .9s ease-in-out infinite;}
.spl-einde .coach.wegrennen{animation:baasRentWeg 2.4s .8s ease-in both;}
@keyframes hartBreek{0%{transform:scale(1)} 35%{transform:scale(1.6) rotate(-12deg)} 70%{transform:scale(1.2) rotate(8deg)} 100%{transform:scale(1); opacity:.9}}
@keyframes baasKlapZweef{0%{transform:translateY(0) scale(.7); opacity:0} 25%{opacity:1; transform:scale(1.15)} 100%{transform:translateY(-34px) scale(1); opacity:0}}
.spl-kop-stap .baasbeeld{width:170px; height:170px; border-radius:50%; object-fit:cover; border:4px solid rgba(255,255,255,.35); box-shadow:0 12px 34px rgba(0,0,0,.35); margin-bottom:6px;}
.spl-baasbalk .bfoto{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2.5px solid var(--oranje); flex-shrink:0;}
.spl-baasbalk.groot{padding:12px 16px;}
.spl-baasbalk.groot .bfoto{width:84px; height:84px; border-width:3px;}
.spl-baasbalk.groot .bnaam{font-size:1.05rem;}
.spl-baasbalk .levens{display:flex; flex-direction:column; align-items:center; gap:2px; margin-left:auto;}
.spl-baasbalk .levens + .levens{margin-left:14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.25);}
.spl-baasbalk .levens small{font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; opacity:.75;}
.spl-baasbalk .levens .bhp{font-size:1.15rem;}
@media (max-width:560px){ .spl-baasbalk.groot .bfoto{width:56px; height:56px;} .spl-baasbalk.groot .bnaam small{display:none;} }
.spl-baasbalk .bfoto.geraakt{animation:baasHitSchud .5s;}
.spl-baasbalk .bnaam small{display:block; font-size:.62rem; font-weight:600; opacity:.75; text-transform:none; letter-spacing:0;}
.spl-baasbalk .hartbreek{display:inline-block; animation:hartBreek .9s both;}
.spl-baasbalk{position:relative;}
.spl-baasbalk .baasklap{position:absolute; right:10px; top:-12px; font-family:'Exo',sans-serif; font-weight:800; font-size:.8rem; color:var(--oranje); text-shadow:0 1px 6px rgba(0,0,0,.3); animation:baasKlapZweef .9s both; pointer-events:none;}
.spl-einde .coach.baaseinde{width:150px; height:150px; border-radius:50%; object-fit:cover; border:4px solid #e9f4f8; box-shadow:0 10px 28px rgba(7,56,137,.2);}
/* ontdek-plaat */
@keyframes itkSpotPuls{0%,100%{box-shadow:0 0 0 0 rgba(244,96,21,.5)} 50%{box-shadow:0 0 0 9px rgba(244,96,21,0)}}
.itk-spotbord{min-height:0;}
.itk-spot{position:absolute; transform:translate(-50%,-50%); width:25px; height:25px; border-radius:50%; border:2px solid #fff;
background:var(--oranje); color:#fff; font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; cursor:pointer;
display:grid; place-items:center; animation:itkSpotPuls 2s infinite; transition:transform .15s, background .15s, opacity .15s;}
.itk-spot:hover{transform:translate(-50%,-50%) scale(1.15);}
.itk-spot.bezocht{background:var(--groen); animation:none; transform:translate(-50%,-50%) scale(.72); opacity:.85;}
.itk-spot.bezocht:hover{transform:translate(-50%,-50%) scale(1);}
.itk-spot.actief{background:var(--blauw); animation:none; box-shadow:0 0 0 4px rgba(7,56,137,.25);}
.itk-spotuitleg{min-height:10px;}
.itk-spotuitleg .spotkaart{margin-top:10px; border:1px solid var(--blauw-soft); border-left:5px solid var(--oranje); border-radius:0 14px 14px 0; background:linear-gradient(120deg,#fef1e2,#fff); padding:12px 16px; animation:itkUp .25s both;}
.itk-spotuitleg .spotkaart b{color:var(--blauw); display:block; margin-bottom:4px;}
.itk-spotuitleg .spotkaart .itk-content{font-size:.92rem;}
@media (max-width:560px){ .itk-spot{width:26px; height:26px; font-size:.72rem;} }
/* open vraag */
.itk-open{margin-top:6px;}
.itk-openinput{width:100%; box-sizing:border-box; border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:12px; padding:12px 15px; font-size:.95rem; font-family:inherit; color:var(--grijs); background:var(--wit); transition:border-color .12s, background .12s; outline:none;}
.itk-openinput:focus{border-color:var(--blauw-medium);}
.itk-openinput.goed{border-color:var(--groen-diep); background:#e8f8ea;}
.itk-openinput.bijna{border-color:var(--oranje); background:#fef1e2;}
.itk-openinput.fout{border-color:var(--rood); background:#fbeaec;}
.itk-openbijna .obijna{margin-top:8px; border-radius:12px; padding:10px 14px; font-size:.9rem; background:#fef1e2; color:#944100; animation:itkUp .25s both;}
.itk-openbijna .obijna.fout{background:#fbeaec; color:#b71525;}
/* invul */
.itk-invulzin{font-size:1rem; line-height:2;}
.itk-gap{display:inline-block; border:2px dashed var(--blauw-medium); border-radius:9px; background:#e9f4f8; color:var(--blauw); font-weight:700; font-size:.92rem; padding:3px 12px; margin:0 2px; min-width:74px; cursor:pointer; vertical-align:baseline; transition:border-color .12s, background .12s;}
.itk-gap.vol{border-style:solid; border-color:var(--oranje); background:#fef1e2;}
.itk-gap.sleep{border-color:var(--oranje); background:#fef1e2; box-shadow:0 0 0 3px rgba(244,96,21,.22);}
.itk-dchip[draggable="true"]{cursor:grab;}
.itk-dchip[draggable="true"]:active{cursor:grabbing;}
.itk-gap.goed{border-color:var(--groen-diep); background:#e8f8ea;}
.itk-gap.fout{border-color:var(--rood); background:#fbeaec;}
/* waarniet */
.itk-wnstelling{border:2px solid var(--blauw-soft); background:linear-gradient(120deg,#e9f4f8,#fff); border-radius:14px; padding:16px 18px; font-size:1.02rem; font-weight:700; color:var(--blauw); text-align:center; margin-bottom:12px;}
.itk-wnknoppen{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.itk-wnknop{border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:12px; background:var(--wit); font-family:'Exo',sans-serif; font-weight:800; font-size:1rem; padding:13px; cursor:pointer; transition:border-color .12s, background .12s, transform .1s;}
.itk-wnknop.waar{color:var(--groen-diep);}
.itk-wnknop.nietwaar{color:var(--rood);}
.itk-wnknop:hover:not(:disabled){transform:translateY(-1px); border-color:var(--blauw-medium);}
.itk-wnknop.goed{border-color:var(--groen-diep); background:#e8f8ea;}
.itk-wnknop.fout{border-color:var(--rood); background:#fbeaec;}
.itk-wnknop:disabled{cursor:default;}
.itk-wn .wnu{border-radius:12px; padding:11px 14px; font-size:.9rem; margin-top:10px;}
.itk-wn .wnu.goed{background:#e8f8ea; color:#1e7e2b;}
.itk-wn .wnu.fout{background:#fbeaec; color:#b71525;}
@media (max-width:560px){
.itk-stapelkol{min-height:120px;}
.itk-stapelkol .kkop{font-size:.64rem;}
.itk-stapelkol .sblok{font-size:.64rem; padding:4px 5px;}
.itk-dzone{font-size:.68rem; padding:4px 7px;}
.itk-wnknop{font-size:.9rem; padding:11px;}
.itk-invulzin{font-size:.94rem;}
}
@media (prefers-reduced-motion:reduce){
.lrn-reveal{opacity:1; transform:none;}
::view-transition-old(root),::view-transition-new(root){animation:none;}
}
/* ================= Speel-modus: les als stap-voor-stap ervaring ================= */
@keyframes splStapIn{from{transform:translateX(60px); opacity:0} to{transform:none; opacity:1}}
@keyframes splStapUit{to{transform:translateX(-60px); opacity:0}}
@keyframes splXpZweef{0%{transform:translateY(0); opacity:0} 20%{opacity:1} 100%{transform:translateY(-46px); opacity:0}}
@keyframes splPuls{0%,100%{transform:scale(1)} 50%{transform:scale(1.12)}}
.spl-startbar{display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:none; cursor:pointer;
background:linear-gradient(120deg,#062e6f,#0a4aa0 60%,#0065cc); color:#fff; border-radius:16px; padding:16px 20px; margin-top:14px;
box-shadow:0 10px 26px rgba(7,56,137,.3), inset 0 -4px 0 rgba(0,0,0,.22); transition:transform .13s, box-shadow .13s; position:relative; overflow:hidden;}
.spl-startbar::after{content:""; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent); transform:translateX(-130%) skewX(-18deg);}
.spl-startbar:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(7,56,137,.4), inset 0 -4px 0 rgba(0,0,0,.22);}
.spl-startbar:hover::after{animation:lrnShine .8s ease;}
.spl-startbar:active{transform:translateY(2px); box-shadow:0 5px 14px rgba(7,56,137,.3), inset 0 -1px 0 rgba(0,0,0,.22);}
.spl-startbar .knopje{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#f79c44,#f46015); display:grid; place-items:center; font-size:1.15rem; flex-shrink:0; box-shadow:0 5px 14px rgba(244,96,21,.5); animation:splPuls 2.6s ease-in-out infinite;}
.spl-startbar b{font-family:'Exo',sans-serif; font-size:1.02rem; display:block;}
.spl-startbar span.sub{font-size:.8rem; color:#d3e6f0;}
.spl-startbar .pijl{margin-left:auto; font-weight:800; font-size:1.2rem; color:#fde1b6;}
.spl{position:fixed; inset:0; z-index:9990; background:#f5f5f9; display:flex; flex-direction:column;}
.spl-kop{display:flex; align-items:center; gap:14px; padding:14px 18px; background:#fff; box-shadow:0 2px 12px rgba(7,56,137,.08);}
.spl-kop .dicht{border:none; background:var(--hairline); color:var(--blauw-medium); width:36px; height:36px; border-radius:50%; font-size:1rem; font-weight:800; cursor:pointer; flex-shrink:0;}
.spl-kop .dicht:hover{background:#fbeaec; color:var(--rood);}
.spl-kop .balk{flex:1; height:14px; background:var(--hairline); border-radius:999px; overflow:hidden;}
.spl-kop .balk i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blauw-bold),var(--oranje)); border-radius:999px; transition:width .45s cubic-bezier(.2,.7,.3,1);}
.spl-kop .xp{font-family:'Exo',sans-serif; font-weight:800; font-size:.9rem; color:var(--oranje); background:#fef1e2; border-radius:999px; padding:6px 14px; white-space:nowrap; position:relative;}
.spl-kop .xp .zweef{position:absolute; right:8px; top:-4px; font-size:.85rem; color:var(--groen-diep); font-weight:800; pointer-events:none; animation:splXpZweef 1.1s ease-out both;}
.spl-body{flex:1; overflow-y:auto; display:flex; justify-content:center; padding:26px 18px 120px;}
.spl-stap{width:100%; max-width:680px; animation:splStapIn .35s cubic-bezier(.2,.7,.3,1) both;}
.spl-stap.weg{animation:splStapUit .22s ease both;}
.spl-stap .seclbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blauw-medium); margin-bottom:10px;}
.spl-kaart{background:#fff; border-radius:20px; padding:26px 28px; box-shadow:0 4px 20px rgba(7,56,137,.1);}
.spl-kaart .itk-vraag{border:none; box-shadow:none; padding:0; margin:0;}
.spl-kop-stap{background:linear-gradient(125deg,#041d47,#0a4aa0 60%,#0065cc); color:#fff; border-radius:20px; padding:40px 32px; text-align:center; box-shadow:0 14px 34px rgba(7,56,137,.3); position:relative; overflow:hidden;}
.spl-kop-stap::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.13) 1.3px, transparent 1.3px); background-size:17px 17px; opacity:.5;}
.spl-kop-stap .ico{font-size:3.2rem; display:block; margin-bottom:10px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));}
.spl-kop-stap h3{font-size:1.5rem; font-weight:800; position:relative;}
.spl-kop-stap p{font-size:.92rem; color:#d3e6f0; margin-top:6px; position:relative;}
.spl-voet{position:fixed; left:0; right:0; bottom:0; background:#fff; box-shadow:0 -4px 18px rgba(7,56,137,.1); padding:14px 18px; display:flex; justify-content:center; z-index:9991;}
.spl-voet button{width:100%; max-width:680px; border:none; border-radius:16px; padding:15px 22px; font-family:'Exo',sans-serif; font-weight:800; font-size:1rem; cursor:pointer;
background:linear-gradient(135deg,#f79c44,#f46015); color:#fff; box-shadow:0 8px 20px rgba(244,96,21,.4), inset 0 -4px 0 rgba(0,0,0,.18); transition:transform .12s, box-shadow .12s, opacity .15s;}
.spl-voet button:hover:not(:disabled){transform:translateY(-2px);}
.spl-voet button:active:not(:disabled){transform:translateY(2px); box-shadow:0 4px 10px rgba(244,96,21,.3), inset 0 -1px 0 rgba(0,0,0,.18);}
.spl-voet button:disabled{background:var(--hairline); color:var(--blauw-medium); box-shadow:none; cursor:default;}
.spl-einde{text-align:center; padding-top:20px;}
.spl-einde .grote{font-size:3.4rem; margin-bottom:6px;}
.spl-einde h3{font-size:1.6rem; font-weight:800; color:var(--blauw);}
.spl-einde p{color:#4f5259; margin-top:6px;}
.spl-einde .cijfers{display:flex; gap:12px; justify-content:center; margin:22px 0; flex-wrap:wrap;}
.spl-einde .cijfer{background:#fff; border-radius:16px; padding:16px 22px; box-shadow:0 4px 16px rgba(7,56,137,.1); min-width:110px; animation:itkPop .45s both;}
.spl-einde .cijfer b{display:block; font-family:'Exo',sans-serif; font-size:1.5rem; color:var(--blauw);}
.spl-einde .cijfer span{font-size:.76rem; color:var(--blauw-medium); font-weight:600;}
.spl-einde .cijfer.oranje b{color:var(--oranje);}
.spl-einde .cijfer.groen b{color:var(--groen-diep);}
.lrn-hud{display:flex; gap:8px; margin-bottom:11px; flex-wrap:wrap;}
.lrn-hud .chip{font-family:'Exo',sans-serif; font-weight:800; font-size:.82rem; border-radius:999px; padding:6px 14px;}
.lrn-hud .chip.vuur{background:#fef1e2; color:var(--oranje);}
.lrn-hud .chip.xp{background:#e9f4f8; color:var(--blauw-bold);}
@media(max-width:560px){ .spl-kaart{padding:20px 18px} .spl-body{padding:18px 12px 110px} }
/* voetbalk van de speler: hint + knoppenrij */
.spl-voet .binnen{width:100%; max-width:680px; display:flex; flex-direction:column; gap:8px;}
.spl-voet .binnen.rij{flex-direction:row; gap:10px;}
.spl-voet .binnen.rij button{flex:1;}
.spl-knoppen{display:flex; gap:10px; width:100%;}
.spl-knoppen #spl-verder{flex:1; width:auto; max-width:none;}
.spl-knoppen #spl-vorige{flex:0 0 auto; width:auto; padding:15px 20px;}
.spl-knoppen #spl-vorige[hidden]{display:none;}
@media(max-width:420px){ .spl-knoppen #spl-vorige{padding:15px 14px; font-size:.9rem;} }
.spl-eis{min-height:1.1em; text-align:center; font-size:.82rem; font-weight:600; color:var(--blauw-medium);}
.spl-eis:empty{display:none;}
.spl-voet button.ghost{background:#fff; color:var(--blauw); border:2px solid var(--blauw-soft); box-shadow:none;}
.spl-voet button.ghost:hover{border-color:var(--blauw-medium); transform:translateY(-2px);}
.spl-kop .dicht#spl-lees{font-size:.95rem;}
/* ================= Game-laag: vol scherm, combo, baas, coach, leerpad ================= */
@keyframes splBeef{0%,100%{transform:rotate(-4deg) scale(1)} 25%{transform:rotate(5deg) scale(1.06)} 50%{transform:rotate(-6deg)} 75%{transform:rotate(4deg) scale(1.04)}}
@keyframes splKlap{0%{transform:scale(1)} 30%{transform:scale(1.08) rotate(-2deg); filter:brightness(1.4)} 100%{transform:scale(1)}}
@keyframes padPuls{0%,100%{box-shadow:0 0 0 0 rgba(244,96,21,.55), 0 8px 20px rgba(7,56,137,.3)} 50%{box-shadow:0 0 0 14px rgba(244,96,21,0), 0 8px 20px rgba(7,56,137,.3)}}
@keyframes padStuiter{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-7px)}}
/* stap-inhoud gecentreerd: nooit meer een leeg wit scherm */
.spl-stap{margin:auto 0;}
.spl-kop-stap{min-height:56vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:48px 34px;}
.spl-kop-stap .ico{font-size:4.6rem; margin-bottom:16px;}
.spl-kop-stap h3{font-size:2rem; letter-spacing:-.01em;}
.spl-kop-stap p{font-size:1.02rem; max-width:44ch;}
.spl-kop-stap .veeg{position:relative; margin-top:26px; font-size:.8rem; font-weight:700; color:#fde1b6; background:rgba(255,255,255,.12); border-radius:999px; padding:8px 18px; backdrop-filter:blur(3px);}
.spl-kop-stap.baas{background:linear-gradient(125deg,#03153f,#073889 60%,#0065cc);}
.spl-kop-stap .ico.beeft{animation:splBeef 1.6s ease-in-out infinite;}
/* combo-chip */
.spl-kop .combo{display:none; font-family:'Exo',sans-serif; font-weight:800; font-size:.85rem; color:#fff; background:linear-gradient(135deg,#f79c44,#f46015); border-radius:999px; padding:6px 13px; white-space:nowrap;}
.spl-kop .combo.on{display:inline-block;}
.spl-kop .combo.pop{animation:itkPop .3s both;}
/* baas-balk boven de vraag */
.spl-baasbalk{display:flex; align-items:center; gap:10px; background:linear-gradient(120deg,#03153f,#073889); color:#fff; border-radius:16px; padding:12px 18px; margin-bottom:12px; box-shadow:0 8px 22px rgba(3,21,63,.4);}
.spl-baasbalk .bico{font-size:1.6rem;}
.spl-baasbalk .bnaam{font-family:'Exo',sans-serif; font-weight:800;}
.spl-baasbalk .bhp{margin-left:auto; font-size:1.05rem; letter-spacing:2px;}
/* levens in Hero-oranje: gevuld hart = leven, contourhart = verloren leven */
.spl-baasbalk .bhp{color:var(--oranje);}
.spl-baasbalk.klap{animation:splKlap .5s ease;}
/* eindscherm met coach en level-up */
.spl-einde .coach{width:150px; height:150px; object-fit:cover; border-radius:50%; border:5px solid #fff; box-shadow:0 12px 30px rgba(7,56,137,.25); margin-bottom:14px; animation:itkPop .5s both;}
.spl-einde .levelup{margin-top:8px; display:inline-block; background:linear-gradient(135deg,#ffbd0d,#f79c44); color:#8a6200; font-family:'Exo',sans-serif; font-weight:800; border-radius:999px; padding:10px 22px; box-shadow:0 8px 20px rgba(255,189,13,.4); animation:itkPop .5s .5s both;}
.lrn-hud .chip.lvl{background:#fff6d9; color:#8a6200;}
.lrn-feest .kaart img.coach{width:110px; height:110px; object-fit:cover; border-radius:50%; margin:0 auto 10px; display:block; border:4px solid var(--hairline);}
.lmsx-kaart.foto .ico{display:none;}
/* ---------- leerpad ---------- */
.lrn-pad{position:relative; margin:30px auto 10px;}
/* alleen de route-tekening zelf vult het vlak — iconen in de bolletjes niet */
.lrn-pad > svg{position:absolute; inset:0;}
.lrn-pad .route{stroke:var(--blauw-soft); stroke-width:7; stroke-linecap:round; stroke-dasharray:1 14;}
.lrn-pad .route.goud{stroke:var(--oranje); stroke-dasharray:none; opacity:.8;}
.pad-node{position:absolute; width:74px; height:74px; border-radius:50%; border:4px solid #fff; cursor:pointer; display:grid; place-items:center;
background:linear-gradient(150deg,#0a4aa8,#073889); color:#fff; box-shadow:0 8px 20px rgba(7,56,137,.3); transition:transform .15s cubic-bezier(.2,.7,.3,1.5); z-index:2;}
.pad-node:hover{transform:scale(1.1);}
.pad-node .pico{display:grid; place-items:center; color:#fff; font-size:1.8rem; filter:drop-shadow(0 2px 4px rgba(3,21,63,.35));}
/* bolletjes met een foto (moduleroutes) houden een witte schijf achter het icoon */
.pad-node.foto .pico{width:44px; height:44px; background:#fff; border-radius:50%; color:var(--blauw); font-size:1.5rem; filter:none; box-shadow:0 2px 8px rgba(7,56,137,.22);}
.pad-node .pnum{position:absolute; bottom:-6px; right:-4px; background:#fff; color:var(--blauw); font-family:'Exo',sans-serif; font-weight:800; font-size:.66rem; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:2px solid #fff;}
.pad-node.done{background:linear-gradient(150deg,#0065cc,#073889); border-color:#e9f4f8;}
.pad-node.done .pnum{background:#fff;}
.pad-node.done .vink{position:absolute; top:-7px; right:-5px; background:var(--groen); color:#fff; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:800; border:2px solid #fff;}
.pad-node.nu{background:linear-gradient(150deg,#f79c44,#f46015); animation:padPuls 1.8s infinite;}
.pad-node.nu .start{position:absolute; top:-38px; left:50%; transform:translate(-50%,0); background:#fff; color:var(--oranje); font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.06em; border-radius:999px; padding:5px 14px; box-shadow:0 6px 16px rgba(7,56,137,.25); animation:padStuiter 1.4s ease-in-out infinite; white-space:nowrap;}
.pad-node.nu .start::after{content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); border:6px solid transparent; border-top-color:#fff; border-bottom:none;}
.pad-node.straks{background:linear-gradient(150deg,#9ecae2,#4197cb); filter:none; opacity:.95;}
/* oefenstap: koppeling naar de belsimulatie, altijd open — lichtblauw in plaats van navy */
.pad-node .optie{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#fff; color:#0065cc; font-family:'Exo',sans-serif; font-weight:800; font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:3px 9px; box-shadow:0 3px 8px rgba(7,56,137,.18); white-space:nowrap;}
.pad-node.vrij{background:linear-gradient(150deg,#00a8f5,#0065cc); border-color:#e9f4f8;}
.pad-lbl.vrij{color:#0065cc;}
.lms-sectie-kop{font-family:'Exo',sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oranje); margin:22px 0 10px;}
.lms-sectie-kop:first-child{margin-top:6px;}
/* filter op richting: commercieel of backoffice */
.lms-track{display:inline-flex; flex-wrap:wrap; gap:4px; margin:16px 0 2px; width:auto; overflow:visible; border-radius:24px;}
.lms-track button{display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;}
.lms-track button .n{font-size:.7rem; font-weight:800; background:var(--blauw-soft); color:var(--blauw); border-radius:999px; padding:1px 7px;}
.lms-track button.active .n{background:rgba(255,255,255,.24); color:#fff;}
.lms-leeg{background:var(--wit); border-radius:16px; padding:22px; text-align:center; color:var(--blauw-medium); font-weight:600; box-shadow:var(--kaart-schaduw); margin-top:14px;}
.lrn-editknop{margin:0 0 14px;}
.lrn-editblok{margin:0 0 18px;}
.lrn-editblok.vast{background:#e9f4f8; border:1.5px dashed var(--blauw-soft); border-radius:10px; padding:10px 14px; color:var(--blauw-medium); font-size:.85rem;}
.lrn-edit-titel{font-family:'Exo',sans-serif; font-weight:700; color:var(--blauw); font-size:1.02rem; margin-bottom:8px; min-height:1.2em;}
.lrn-edit-titel:empty::before{content:"(geen kop — typ hier om er een toe te voegen)"; color:var(--blauw-medium); font-weight:400; font-size:.85rem;}
.lrn-edit-html{background:#fff; border-radius:10px; padding:12px 14px;}
.pad-node[data-slot]{cursor:not-allowed;}
.pad-node[data-slot]:hover{transform:none;}
.pad-node .slot{position:absolute; top:-7px; right:-5px; background:#fff; color:var(--blauw); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; border:2px solid #e9f4f8; box-shadow:0 3px 8px rgba(7,56,137,.18);}
.pad-lbl{position:absolute; width:180px; text-align:center; font-family:'Exo',sans-serif; font-weight:700; font-size:.76rem; color:var(--blauw); line-height:1.25; z-index:1; pointer-events:none;}
.pad-lbl.straks{color:var(--blauw-medium); opacity:.8;}
@media(max-width:560px){ .pad-lbl{width:150px; font-size:.7rem;} }
/* ================= De stof zelf: prettig leesbare kaarten ================= */
.spl-kaart{padding:30px 34px;}
.spl-kaart .itk-content{font-size:1.04rem; line-height:1.7; color:#4f5259;}
.spl-kaart .itk-content p.lead{font-size:1.22rem; line-height:1.55; color:var(--blauw); font-weight:600; margin-bottom:16px;}
.spl-kaart .itk-content h1,.spl-kaart .itk-content h2,.spl-kaart .itk-content h3,.spl-kaart .itk-content h4{font-size:1.15rem; margin:20px 0 10px;}
.spl-kaart .itk-content ul:not(.itk-revealgrid) > li,
.spl-kaart .itk-content ol > li{background:#e9f4f8; border:1px solid #e9f4f8; border-radius:12px; padding:10px 14px; margin:0 0 8px; list-style-position:inside;}
.spl-kaart .itk-content ul:not(.itk-revealgrid){margin-left:0; padding-left:0;}
.spl-kaart .itk-content ol{margin-left:0; padding-left:0;}
.spl-kaart .itk-content blockquote{border:none; background:linear-gradient(120deg,#fef1e2,#fff); border-left:5px solid var(--oranje); font-size:1.08rem; font-style:italic; padding:14px 18px; border-radius:0 14px 14px 0;}
.tafelwrap{overflow-x:auto; border-radius:14px; box-shadow:0 2px 10px rgba(7,56,137,.08); margin:14px 0;}
.tafelwrap table{margin:0; min-width:480px; width:100%; border-collapse:collapse; font-size:.92rem;}
.tafelwrap th{background:var(--blauw); color:#fff; border:1px solid #0065cc; padding:9px 12px; text-align:left;}
.tafelwrap td{border:1px solid #e9f4f8; padding:8px 12px;}
.tafelwrap tr:nth-child(even) td{background:#e9f4f8;}
/* scenario-kaart boven een vraag: een situatie uit de praktijk */
.itk-scenario{background:linear-gradient(120deg,#fef1e2,#fff); border:1px solid #fde1b6; border-left:5px solid var(--oranje); border-radius:0 14px 14px 0; padding:12px 16px; margin:10px 0 12px;}
.itk-scenario .slbl{display:inline-block; font-family:'Exo',sans-serif; font-weight:800; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--oranje); margin-bottom:4px;}
.itk-scenario .itk-content{font-size:.95rem; font-style:italic; color:#4f5259;}
/* bijschrift onder een afbeelding */
.itk-bijschrift{font-size:.8rem; color:var(--blauw-medium); margin:-8px 0 14px; text-align:center;}
/* ================= Vision-blokken: eigen doelen (schrijf, levenswiel, WOOP, actiebord) ================= */
.vis-blok .vis-titel{font-family:'Exo',sans-serif; font-weight:800; font-size:1rem; color:var(--blauw); margin-bottom:6px;}
.vis-velden{display:grid; gap:10px; margin-top:10px;}
.vis-veldwrap{display:block;}
.vis-veldwrap .vlbl{display:block; font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blauw-medium); margin-bottom:4px;}
.vis-veld{width:100%; border:2px solid var(--blauw-soft); border-bottom-width:4px; border-radius:14px; padding:10px 14px;
font:inherit; font-size:.92rem; color:#4f5259; background:#fff; resize:vertical; min-height:64px;}
.vis-veld:focus{outline:none; border-color:var(--blauw-medium);}
.vis-veld::placeholder{color:#9496a1;}
/* levenswiel */
.vis-wielgrid{display:grid; grid-template-columns:1fr 264px; gap:16px; align-items:center; margin-top:10px;}
.vis-wiel .wrijen{display:grid; gap:7px; min-width:0;}
.vis-wiel .wrij{display:grid; grid-template-columns:minmax(120px,1fr) auto; gap:8px; align-items:center;}
.vis-wiel .wnaam{font-size:.85rem; font-weight:700; color:var(--blauw); display:flex; align-items:center; gap:6px; min-width:0;}
.vis-wiel .wico{font-size:1rem;}
.vis-wiel .wknoppen{display:flex; gap:3px; flex-wrap:wrap;}
.vis-wiel .wknop{width:24px; height:24px; border-radius:7px; border:1.5px solid var(--blauw-soft); background:#fff;
font-size:.66rem; font-weight:800; color:var(--blauw-medium); cursor:pointer; padding:0; transition:all .12s;}
.vis-wiel .wknop:hover{border-color:var(--oranje); transform:translateY(-1px);}
.vis-wiel .wknop.aan{background:#fef1e2; border-color:#fde1b6; color:var(--oranje);}
.vis-wiel .wknop.top{background:var(--oranje); border-color:var(--oranje); color:#fff; transform:scale(1.12);}
.vis-wiel .wradar svg:not(.hicoon){width:100%; height:auto; display:block;}
.vis-wiel .wconclusie{margin-top:12px; background:#e9f4f8; border-left:4px solid var(--sky,#00a8f5); border-radius:0 12px 12px 0; padding:11px 14px; font-size:.9rem;}
@media (max-width:640px){ .vis-wielgrid{grid-template-columns:1fr;} .vis-wiel .wradar{max-width:250px; margin:0 auto;} }
/* WOOP-wizard */
.vis-woop .wstepper{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 12px;}
.vis-woop .wchip{font-family:'Exo',sans-serif; font-weight:800; font-size:.74rem; padding:5px 12px; border-radius:999px;
background:#f5f5f9; color:var(--blauw-medium); border:1.5px solid transparent;}
.vis-woop .wchip.vol{background:#e8f8ea; color:var(--groen-diep);}
.vis-woop .wchip.nu{background:var(--oranje); color:#fff; box-shadow:0 3px 10px rgba(244,96,21,.35);}
.vis-woop .wpijl{color:#d3e6f0; font-size:.7rem;}
.vis-woop .weerders{display:grid; gap:6px; margin-bottom:12px;}
.vis-woop .weerder{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:left;
background:#fff; border:1.5px solid var(--blauw-soft); border-radius:12px; padding:8px 12px; cursor:pointer; font:inherit;}
.vis-woop .weerder:hover{border-color:var(--oranje);}
.vis-woop .weerder b{font-family:'Exo',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--blauw-medium);}
.vis-woop .weerder span{font-size:.86rem; color:#4f5259; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.vis-woop .weerder em{font-style:normal; opacity:.5;}
.vis-woop .wkaart{background:#fff; border:1.5px solid var(--blauw-soft); border-radius:14px; padding:14px 16px;}
.vis-woop .wvraag{font-weight:800; font-family:'Exo',sans-serif; color:var(--blauw); margin-bottom:6px;}
.vis-woop .whint{font-size:.84rem; color:var(--blauw-medium); margin-bottom:8px;}
.vis-woop .walsdan{background:#fef1e2; border-radius:10px; padding:8px 12px; font-size:.9rem; margin-bottom:8px;}
.vis-woop .wklaartekst{font-size:.9rem; color:var(--blauw-medium);}
/* actiebord */
.vis-bord .btegels{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:12px;}
.vis-bord .btegel{position:relative; background:#fff; border:1.5px solid var(--blauw-soft); border-radius:16px; padding:14px; display:grid; gap:8px; align-content:start;}
.vis-bord .btegel.plus{border-style:dashed; align-content:center; justify-items:center; cursor:pointer; color:var(--blauw-medium);
background:transparent; min-height:170px; font:inherit; gap:2px;}
.vis-bord .btegel.plus b{font-size:1.6rem; font-weight:400;}
.vis-bord .btegel.plus:hover{border-color:var(--oranje); color:var(--oranje);}
.vis-bord .bemoji{width:52px; height:52px; border-radius:14px; border:1.5px solid var(--blauw-soft); background:#f5f5f9;
font-size:1.7rem; cursor:pointer; display:grid; place-items:center; padding:0;}
.vis-bord .bemoji:hover{border-color:var(--oranje);}
.vis-bord .bweg{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; border:none;
background:#f5f5f9; color:var(--blauw-medium); font-size:.7rem; cursor:pointer; display:grid; place-items:center;}
.vis-bord .bweg:hover{background:#fbeaec; color:var(--rood,#b71525);}
.vis-bord .btitel{border:none; border-bottom:2px solid var(--blauw-soft); font-family:'Exo',sans-serif; font-weight:800;
font-size:1rem; color:var(--blauw); padding:4px 2px; background:transparent;}
.vis-bord .btitel:focus{outline:none; border-color:var(--oranje);}
.vis-bord .bveld span{display:block; font-size:.68rem; font-weight:800; font-family:'Exo',sans-serif; letter-spacing:.05em;
text-transform:uppercase; color:var(--blauw-medium); margin-bottom:2px;}
.vis-bord .bveld input{width:100%; border:1.5px solid var(--blauw-soft); border-radius:10px; padding:7px 10px; font:inherit; font-size:.85rem; background:#fff;}
.vis-bord .bveld input:focus{outline:none; border-color:var(--blauw-medium);}
.vis-bord .bemojikeuze{position:absolute; z-index:5; top:66px; left:10px; right:10px; background:#fff; border:1.5px solid var(--blauw-soft);
border-radius:14px; padding:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:2px; box-shadow:0 12px 28px rgba(7,56,137,.18);}
.vis-bord .bemojikeuze button{border:none; background:none; font-size:1.25rem; padding:5px; cursor:pointer; border-radius:8px;}
.vis-bord .bemojikeuze button:hover{background:#f5f5f9;}
.vis-bord .bknoppen{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
/* ================= Zoekstring-opdracht: zelf een Boolean string bouwen ================= */
.bsz-vac{background:#f5f5f9; border:1.5px solid var(--blauw-soft); border-radius:14px; padding:12px 15px; margin:10px 0 12px;}
.bsz-vac .bsz-vlbl{font-family:'Exo',sans-serif; font-size:.72rem; font-weight:800; text-transform:uppercase;
letter-spacing:.06em; color:var(--blauw-medium); margin-bottom:7px;}
.bsz-vac .itk-content{font-size:.9rem;}
.bsz-vac .itk-content > :last-child{margin-bottom:0;}
.bsz-wrap{margin:12px 0 4px;}
.bsz-input{width:100%; box-sizing:border-box; font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace;
font-size:.88rem; line-height:1.6; border:1.5px solid var(--blauw-soft); border-radius:12px; padding:11px 13px;
background:#fff; color:#123; resize:vertical; min-height:74px;}
.bsz-input:focus{outline:none; border-color:var(--blauw-medium); box-shadow:0 0 0 3px rgba(0,168,245,.15);}
.bsz-input:disabled{background:#f5f5f9; color:#4f5259;}
.bsz-meter{font-size:.76rem; font-weight:700; color:#9496a1; margin-top:6px; font-family:'Exo',sans-serif;}
.bsz-meter.goed{color:var(--groen-diep);}
.bsz-meter.let{color:var(--oranje);}
.bsz-uitslag:empty{display:none;}
.bsz-nudge{background:#fef1e2; border:1.5px solid #fde1b6; border-radius:12px; padding:10px 14px; margin:12px 0;
font-size:.9rem; color:#944100; font-weight:600;}
.bsz-nudge .bsz-pog{display:inline-block; font-size:.74rem; font-weight:800; color:#944100; margin-left:4px;}
.bsz-profs{display:grid; gap:9px; margin:14px 0 4px;}
.bsz-prof{border:1.5px solid var(--blauw-soft); border-radius:13px; padding:11px 14px; background:#fff;}
.bsz-prof.ok{border-color:#c9edcd; background:#e8f8ea;}
.bsz-prof.mis{border-color:#f79c44; background:#fef1e2;}
.bsz-pkop{font-size:.93rem; color:var(--blauw); display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.bsz-plbl{font-family:'Exo',sans-serif; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
color:var(--wit); background:var(--blauw-medium); border-radius:999px; padding:2px 8px;}
.bsz-prof.niet .bsz-plbl{background:#9496a1;}
.bsz-pwat{font-size:.85rem; color:var(--grijs); margin-top:3px;}
.bsz-reden{font-size:.85rem; color:#944100; background:#fef1e2; border-radius:9px; padding:7px 11px; margin-top:7px; line-height:1.5;}
.bsz-ptekst{font-size:.79rem; color:#4f5259; margin-top:7px; line-height:1.5; border-top:1px dashed var(--blauw-soft); padding-top:6px;}
.bsz-check{background:#f5f5f9; border:1.5px solid var(--blauw-soft); border-radius:14px; padding:12px 15px; margin:12px 0 2px;}
.bsz-clbl{font-family:'Exo',sans-serif; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
color:var(--blauw-medium); margin-bottom:8px;}
.bsz-check ul{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.bsz-check li{display:flex; gap:9px; align-items:flex-start; font-size:.87rem; color:var(--grijs); line-height:1.5;}
.bsz-check li .vk{flex-shrink:0; width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
font-size:.7rem; font-weight:800; color:var(--wit); margin-top:1px;}
.bsz-check li.ok .vk{background:var(--groen);}
.bsz-check li.mis .vk{background:var(--oranje);}
.bsz-check li.ok b{color:#1e7e2b; font-weight:700;}
.bsz-check li.mis b{color:var(--blauw); font-weight:800;}
.bsz-check li .vu{display:block; font-size:.83rem; color:#4f5259; margin-top:2px;}
.bsz-model{margin-top:12px; border:1.5px solid var(--blauw-soft); border-radius:13px; background:#fff; overflow:hidden;}
.bsz-model summary{cursor:pointer; padding:10px 15px; font-family:'Exo',sans-serif; font-weight:800; font-size:.87rem;
color:var(--blauw); background:#f5f5f9; list-style:none;}
.bsz-model summary::-webkit-details-marker{display:none;}
.bsz-model summary::before{content:"▸ "; color:var(--oranje);}
.bsz-model[open] summary::before{content:"▾ ";}
.bsz-mintro{font-size:.86rem; color:var(--grijs); margin:12px 15px 4px; line-height:1.55;}
.bsz-mrij{padding:8px 15px 4px;}
.bsz-mlbl{font-family:'Exo',sans-serif; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
color:var(--blauw-medium); margin-bottom:5px;}
.bsz-muit{font-size:.84rem; color:#4f5259; line-height:1.5; margin:-4px 0 6px;}
.bsz-tips{font-size:.86rem; color:var(--grijs); line-height:1.55; margin:6px 15px 14px; padding-top:9px;
border-top:1px dashed var(--blauw-soft);}
@media (max-width:640px){
.bsz-input{font-size:.82rem;}
.bsz-vac,.bsz-check{padding:10px 12px;}
.bsz-prof{padding:10px 12px;}
}
/* ================= Dagplan-opdracht: bouw zelf een werkdag ================= */
.dp-wrap{margin-top:8px;}
.dp-raster{--rh:38px; position:relative; padding-left:52px; border:1.5px solid var(--blauw-soft); border-radius:14px; background:var(--wit); overflow:hidden;}
.dp-rij{height:var(--rh); position:relative; border-top:1px dashed #e9f4f8;}
.dp-rij.uur{border-top:1px solid var(--blauw-soft);}
.dp-rij:first-child{border-top:none;}
.dp-tijd{position:absolute; left:-52px; top:-.55em; width:48px; text-align:right; font-family:'Exo',sans-serif; font-size:.68rem; font-weight:800; color:var(--blauw-medium);}
.dp-slot{display:block; width:100%; height:100%; border:none; background:none; padding:0; cursor:pointer;}
.dp-slot:hover{background:#e9f4f8;}
.dp-slot.kan{background:#e8f8ea; box-shadow:inset 0 0 0 1.5px #c9edcd;}
.dp-rij.start{border-top:none;}
/* sluitregel onder het raster: hier houdt de werkdag op */
.dp-eind{position:relative; height:22px; border-top:2px solid var(--blauw-soft); background:#e9f4f8;
display:flex; align-items:center;}
.dp-eind .dp-tijd{top:-.55em;}
.dp-eindlbl{font-family:'Exo',sans-serif; font-size:.62rem; font-weight:800; letter-spacing:.05em;
text-transform:uppercase; color:#9496a1; padding-left:8px;}
.dp-laag{position:absolute; inset:0 0 22px 52px; pointer-events:none;}
.dp-blok{position:absolute; left:3px; right:3px; top:calc(var(--s) * var(--rh)); height:calc(var(--l) * var(--rh) - 3px);
border:none; border-left:4px solid var(--blauw-bold); border-radius:9px; background:#e9f4f8; color:var(--blauw);
text-align:left; padding:4px 8px; overflow:hidden; pointer-events:auto; cursor:grab; touch-action:none;
display:flex; flex-direction:column; gap:1px; box-shadow:0 2px 6px rgba(7,56,137,.1); animation:itkPop .18s both;}
.dp-blok:hover{filter:brightness(.97);}
.dp-blok .dpb-t{font-family:'Exo',sans-serif; font-size:.62rem; font-weight:800; letter-spacing:.03em; opacity:.75;}
.dp-blok .dpb-n{font-size:.76rem; font-weight:700; line-height:1.25; overflow:hidden;}
.dp-blok.vast{background:repeating-linear-gradient(135deg,#e9f4f8,#e9f4f8 6px,#f5f5f9 6px,#f5f5f9 12px); border-left-color:#9496a1; color:#4f5259; cursor:default;}
.dp-blok.kikker,.dp-blok.s-denk{border-left-color:var(--oranje); background:#fef1e2; color:#944100;}
.dp-blok.s-bellen{border-left-color:#00a8f5; background:#e9f4f8; color:#0065cc;}
.dp-blok.s-schrijven{border-left-color:#ffbd0d; background:#fff6d9; color:#8a6200;}
.dp-blok.s-mail,.dp-blok.s-admin{border-left-color:#9496a1; background:#f5f5f9; color:#4f5259;}
.dp-sleept .dp-blok{pointer-events:none;} /* zodat elementFromPoint het vakje eronder vindt */
.dp-bak{margin-top:10px;}
.dp-stand{font-family:'Exo',sans-serif; font-size:.74rem; font-weight:700; color:var(--blauw-medium); margin-bottom:7px;}
.dp-stand b{color:var(--blauw);}
.dp-chip{display:inline-flex; align-items:center; gap:8px; text-align:left; max-width:100%;}
.dp-chip .dp-dur{flex-shrink:0; font-family:'Exo',sans-serif; font-size:.66rem; font-weight:800; color:var(--wit); background:var(--blauw-medium); border-radius:999px; padding:2px 8px;}
.dp-chip.kikker{border-color:#fde1b6;}
.dp-chip.kikker .dp-dur{background:var(--oranje);}
.itk-checkbtn.licht{background:var(--wit); color:var(--blauw-medium); border:1.5px solid var(--blauw-soft); box-shadow:none; font-size:.8rem; padding:7px 14px;}
.itk-checkbtn.licht:hover{border-color:var(--blauw-medium); color:var(--blauw);}
/* de twee voorbeelddagen in de uitklap: kleiner en niet aan te raken */
.dp-raster.stil{--rh:26px; margin:2px 0 8px;}
.dp-raster.stil .dp-slot{cursor:default;}
.dp-raster.stil .dp-blok{cursor:default; box-shadow:none; animation:none;}
.dp-raster.stil .dpb-t{display:none;}
.dp-raster.stil .dpb-n{font-size:.68rem;}
@media (max-width:640px){
.dp-raster{--rh:34px; padding-left:44px;}
.dp-tijd{left:-44px; width:40px; font-size:.62rem;}
.dp-laag{inset:0 0 22px 44px;}
.dp-blok .dpb-n{font-size:.72rem;}
.dp-blok .dpb-t{font-size:.58rem;}
.dp-chip{font-size:.78rem; padding:7px 10px;}
.dp-raster.stil{--rh:22px;}
/* de takenbak blijft in beeld terwijl je door het raster scrolt */
.dp-bak{position:sticky; bottom:0; z-index:3; background:linear-gradient(180deg,rgba(255,255,255,.85),var(--wit) 22%);
padding:8px 0 6px; margin-top:6px; border-top:1.5px solid var(--blauw-soft); max-height:40vh; overflow-y:auto;}
}
/* ================= Mijn groei (S22) + de halfjaarlijkse check-in ================= */
.wtoen{margin-left:7px; font-size:.72rem; font-weight:700; color:var(--blauw-medium); background:#e9f4f8; border-radius:999px; padding:1px 7px;}
.wvorige{background:#e9f4f8; border-left:4px solid var(--sky,#00a8f5); border-radius:0 12px 12px 0; padding:10px 14px; margin:10px 0 4px; font-size:.9rem;}
.groei-stats{margin:14px 0;}
.groei-actie{display:grid; gap:8px; justify-items:start;}
.groei-actie h3{margin:0;}
.groei-actie p{font-size:.92rem; margin:0;}
.groei-actie.nu{border-color:#fde1b6; background:linear-gradient(120deg,#fef1e2,#fff);}
.groei-leeg{display:grid; gap:10px; justify-items:start;}
.groei-nudge{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px;
border-color:#d3e6f0; background:linear-gradient(120deg,#e9f4f8,#fff);}
.groei-nudge.nu{border-color:#fde1b6; background:linear-gradient(120deg,#fef1e2,#fff);}
.groei-nudge .nico{font-size:1.7rem; flex:0 0 auto;}
.groei-nudge .ntxt{display:grid; gap:2px; flex:1 1 240px; min-width:0;}
.groei-nudge .ntxt b{font-family:'Exo',sans-serif; font-size:1rem; color:var(--blauw);}
.groei-nudge .ntxt span{font-size:.88rem; color:#4f5259;}
.groei-nudge .ghostbtn.klein{padding:7px 13px; font-size:.8rem;}
.groei-wielgrid{display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; margin-top:12px;}
.groei-radar svg:not(.hicoon){width:100%; height:auto; display:block;}
.groei-legenda{display:grid; gap:4px; margin-top:6px; font-size:.8rem; color:#4f5259;}
.groei-legenda i{display:inline-block; width:16px; height:0; vertical-align:middle; margin-right:6px;}
.groei-legenda i.nu{border-top:3px solid var(--oranje);}
.groei-legenda i.toen{border-top:2px dashed #4f5259;}
.groei-wissel{margin:4px 0 0;}
.groei-rijen{display:grid; gap:6px;}
.groei-rij{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
background:#fff; border:1.5px solid var(--hairline); border-radius:12px; padding:8px 12px;}
.groei-rij .gnaam{font-size:.88rem; font-weight:700; color:var(--blauw); display:flex; align-items:center; gap:7px; min-width:0;}
.groei-rij .gico{font-size:1rem;}
.groei-rij .gcijfers{display:flex; align-items:center; gap:6px; font-size:.92rem;}
.groei-rij .gcijfers .toen{color:#9496a1; font-weight:700;}
.groei-rij .gcijfers .pijl{color:#d3e6f0; font-size:.8rem;}
.groei-rij .gcijfers .nu{color:var(--blauw); font-weight:800;}
.gdelta{font-family:'Exo',sans-serif; font-weight:800; font-size:.75rem; border-radius:999px; padding:3px 9px; white-space:nowrap;}
.gdelta.op{background:#e8f8ea; color:var(--groen-diep);}
.gdelta.neer{background:#fef1e2; color:var(--oranje);}
.gdelta.gelijk{background:#f5f5f9; color:var(--blauw-medium);}
.groei-lijn svg:not(.hicoon){width:100%; height:auto; display:block; margin:6px 0 2px;}
.groei-doelen{display:grid; gap:10px; margin-top:10px;}
.groei-doel{background:#fff; border:1.5px solid var(--hairline); border-left-width:4px; border-radius:0 12px 12px 0; padding:12px 14px;}
.groei-doel.open{border-left-color:var(--sky,#00a8f5);}
.groei-doel.gehaald{border-left-color:var(--groen-diep);}
.groei-doel.deels{border-left-color:#ffbd0d;}
.groei-doel.bijgesteld{border-left-color:var(--blauw-medium);}
.groei-doel.vervallen{border-left-color:#d3e6f0; opacity:.75;}
.groei-doel .dkop{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.groei-doel .dico{font-size:1.3rem;}
.groei-doel .dtitel{font-family:'Exo',sans-serif; font-weight:800; color:var(--blauw); flex:1 1 160px; min-width:0;}
.groei-doel .ddatum{font-size:.76rem; color:var(--blauw-medium); margin:3px 0 6px;}
.groei-doel .dregel{font-size:.88rem; margin-top:3px;}
.groei-doel .dterugblik{background:#f5f5f9; border-radius:10px; padding:8px 11px; font-size:.88rem; margin-top:7px; font-style:italic;}
.groei-doel details{margin-top:6px;} .groei-doel summary{cursor:pointer; font-size:.82rem; font-weight:700; color:var(--blauw-medium);}
.gchip{font-family:'Exo',sans-serif; font-weight:800; font-size:.72rem; border-radius:999px; padding:3px 10px; white-space:nowrap;}
.gchip.open{background:#e9f4f8; color:#0065cc;}
.gchip.gehaald{background:#e8f8ea; color:var(--groen-diep);}
.gchip.deels{background:#fff6d9; color:#8a6200;}
.gchip.bijgesteld{background:#e9f4f8; color:var(--blauw-medium);}
.gchip.vervallen{background:#f5f5f9; color:#9496a1;}
/* de check-in als schermvullende stapper */
.chk{position:fixed; inset:0; z-index:120; background:var(--vlak,#f5f5f9); display:flex; flex-direction:column;}
.chk-kop{display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1.5px solid var(--hairline);}
.chk-kop .dicht{width:34px; height:34px; border-radius:50%; border:none; background:#f5f5f9; color:var(--blauw); font-size:1rem; cursor:pointer;}
.chk-kop .balk{flex:1 1 auto; height:8px; background:#e9f4f8; border-radius:999px; overflow:hidden;}
.chk-kop .balk i{display:block; height:100%; background:linear-gradient(90deg,var(--blauw),var(--oranje)); border-radius:999px; transition:width .4s cubic-bezier(.2,.7,.3,1);}
.chk-lbl{font-family:'Exo',sans-serif; font-weight:800; font-size:.78rem; color:var(--blauw-medium); white-space:nowrap;}
.chk-body{flex:1 1 auto; overflow-y:auto; padding:22px 16px 30px;}
.chk-kaart{max-width:760px; margin:0 auto; background:#fff; border:1.5px solid var(--hairline); border-radius:18px; padding:20px 22px;}
.chk-kaart h2{font-family:'Exo',sans-serif; font-size:1.3rem; color:var(--blauw); margin:0 0 8px;}
.chk-kaart > p{font-size:.95rem; margin:0 0 10px;}
.chk-intro ul{margin:10px 0; padding-left:4px; list-style:none; display:grid; gap:6px;}
.chk-intro li{font-size:.95rem;}
.chk-voet{background:#fff; border-top:1.5px solid var(--hairline); padding:12px 16px;}
.chk-voet .binnen{max-width:760px; margin:0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.chk-hint{flex:1 1 auto; font-size:.84rem; color:var(--oranje); font-weight:700;}
.chk-knoppen{display:flex; gap:8px; margin-left:auto;}
.chk-doel{border:1.5px solid var(--hairline); border-radius:14px; padding:13px 15px; margin-top:12px;}
.chk-doel .dkop{display:flex; align-items:center; gap:9px;}
.chk-doel .dico{font-size:1.3rem;}
.chk-doel .dtitel{font-family:'Exo',sans-serif; font-weight:800; color:var(--blauw);}
.chk-doel .ddatum{font-size:.76rem; color:var(--blauw-medium); margin:3px 0 6px;}
.chk-doel .dregel{font-size:.88rem; margin-bottom:8px;}
.gstatusrij{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px;}
.gstatus{border:1.5px solid var(--blauw-soft); background:#fff; border-radius:999px; padding:7px 13px;
font:inherit; font-size:.82rem; font-weight:700; color:var(--blauw-medium); cursor:pointer; transition:all .12s;}
.gstatus:hover{border-color:var(--oranje); transform:translateY(-1px);}
.gstatus.aan{background:var(--blauw); border-color:var(--blauw); color:#fff;}
.chk-klaar{text-align:center;}
.chk-klaar .groei-rijen{margin:14px 0; text-align:left;}
.chk-radar{max-width:280px; margin:10px auto;}
.chk-radar svg:not(.hicoon){width:100%; height:auto;}
@media (max-width:760px){
.groei-wielgrid{grid-template-columns:1fr;}
.groei-radar{max-width:300px; margin:0 auto;}
}
/* introscherm van de check-in: gewone leesregels, geen klikbare pillen */
.chk-lijst{display:grid; gap:7px; margin:12px 0;}
.chk-item{display:flex; align-items:center; gap:10px; font-size:.95rem; color:#4f5259;}
.chk-item .ci{font-size:1.15rem; flex:0 0 auto;}
.chk-extra{margin-top:14px; padding-top:12px; border-top:1.5px solid var(--hairline);}
.groei-knoppen{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
/* ============================================================
Grote schermen: de speel-kolom en de ontdek-platen groeien
mee met het scherm in plaats van klein in het midden te staan
============================================================ */
@media (min-width:1024px){
.spl-stap:has(.itk-spotbord){max-width:900px;}
}
@media (min-width:1440px){
.spl-stap, .spl-voet button, .spl-voet .binnen{max-width:880px;}
.spl-kaart{padding:30px 38px;}
.spl-stap:has(.itk-spotbord){max-width:1060px;}
}
@media (min-width:1920px){
.spl-stap, .spl-voet button, .spl-voet .binnen{max-width:1060px;}
.spl-stap:has(.itk-spotbord){max-width:1220px;}
.itk-reader, .itk-review{max-width:1220px;}
}
/* een al gemaakt onderdeel: teruglezen kan, aanpassen niet */
.itk-game.bevroren{opacity:.92;}
.itk-game.bevroren .itk-checkbtn{display:none;}