:root{
--blauw:#01689b; --blauw-d:#015580; --ink:#243240; --ink2:#2b3a48;
--muted:#7c8896; --muted2:#97a2af; --line:#eef1f5;
--cream:#f3f7fb; --cream2:#f7eede; --wit:#fff;
--round:'Quicksand','Nunito',system-ui,sans-serif;
--body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;}
/* Tekst NIET laten meeschalen met de systeem-lettergrootte van de telefoon
(bv. Android op 150%): de thuis-app is een vaste app-shell met px-maten, dus
meeschalende tekst brak de layout (afgekapte nav, knoppen onder de vouw). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{margin:0;height:100%;}
body{font-family:var(--body);color:var(--ink2);
background:radial-gradient(1200px 700px at 50% -10%, #eaf4fb 0%, #e7eef4 38%, #e4ebf1 100%);
display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* ── scaling stage (portret telefoon) ── */
#stage{width:402px;height:874px;flex:none;transform-origin:center center;}
.device{width:100%;height:100%;background:linear-gradient(180deg,#0a6ca8 0%, #08608f 100%);border-radius:42px;overflow:hidden;
display:flex;flex-direction:column;position:relative;
box-shadow:0 40px 90px -30px rgba(20,45,70,.45), 0 0 0 9px #fff, 0 0 0 11px #dfe6ee;}
/* nieuwe-versie-banner (bovenaan, over alles heen) */
.updbanner{position:absolute;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
background:#0a6ca8;color:#fff;padding:11px 16px;font-family:var(--round);font-weight:700;font-size:13.5px;
border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 8px 22px -8px rgba(0,0,0,.5);animation:updIn .25s ease;}
.updbanner[hidden]{display:none;}
@keyframes updIn{from{transform:translateY(-100%);opacity:0;}to{transform:none;opacity:1;}}
.updtxt{line-height:1.3;}
.updbtn{flex:none;border:none;background:#fff;color:#0a6ca8;font-family:inherit;font-weight:800;font-size:13px;border-radius:10px;padding:8px 15px;cursor:pointer;}
.updbtn:hover{background:#eaf3fa;}
/* feest-melding bij nieuw verdiende prijs */
/* Laatst verdiende prijs, onder de weekkaart op home */
.laatsteprijs{display:flex;align-items:center;gap:13px;width:100%;margin-top:13px;padding:13px 15px;
background:#fff;border:none;border-radius:16px;cursor:pointer;text-align:left;font-family:inherit;
box-shadow:0 10px 22px -12px rgba(13,55,95,.28), 0 2px 5px -2px rgba(13,55,95,.1);}
.laatsteprijs[hidden]{display:none;}
.lp-visual{width:44px;height:44px;flex:none;border-radius:13px;background:#fdf6e3;display:grid;place-items:center;font-size:24px;line-height:1;}
.lp-visual img{width:36px;height:36px;object-fit:contain;}
.lp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.lp-kop{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.lp-tx b{font-family:var(--round);font-weight:800;font-size:15px;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-wanneer{font-size:12.5px;font-weight:700;color:var(--muted);}
.lp-chev{flex:none;color:#c2cdd8;font-weight:900;font-size:19px;}
.prijstoast{position:absolute;top:54px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:95;
background:#2DBE72;color:#fff;font-family:var(--round);font-weight:800;font-size:14px;padding:11px 18px;border-radius:14px;
box-shadow:0 14px 30px -10px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90%;text-align:center;}
.prijstoast.on{opacity:1;transform:translateX(-50%) translateY(0);}
/* ── topbar (huisstijl) ── */
.topbar{flex:none;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px 0 16px;background:#0a6ca8;position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.16);}
.dbubbles{display:none;}
.screens{position:relative;z-index:1;}
.brand{display:flex;align-items:center;}
.brand img{height:40px;width:auto;display:block;}
.topbar .sp{flex:1;}
/* Telefoon-kind-pil rechtsboven (avatar van 1 letter + chevron) → wissel kind. Alleen op telefoon. */
.tr-kidpill{display:none;}
.device:not(.ipad) .tr-kidpill{display:inline-flex;align-items:center;gap:3px;flex:none;cursor:pointer;
border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);border-radius:999px;
padding:2px 5px 2px 2px;color:#fff;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.device:not(.ipad) .tr-kidpill:active{background:rgba(255,255,255,.22);}
.tr-kidpill-av{width:22px;height:22px;border-radius:50%;background:#fff;color:#0a6ca8;display:flex;
align-items:center;justify-content:center;font-weight:900;font-size:11px;flex:none;}
.tr-kidpill-chev{width:12px;height:12px;opacity:.85;flex:none;}
.prof{display:flex;align-items:center;gap:7px;border:none;background:rgba(255,255,255,.13);border-radius:999px;padding:3px 11px 3px 3px;cursor:pointer;color:#fff;font-family:inherit;}
.prof:hover{background:rgba(255,255,255,.22);}
.prof .pav{width:24px;height:24px;border-radius:50%;background:#fff;color:#0a6ca8;display:grid;place-items:center;font-family:var(--round);font-weight:800;font-size:12px;}
.prof .pnm{font-weight:700;font-size:12.5px;line-height:1;}
.prof .psw{font-size:11px;opacity:.8;}
.notif{position:relative;border:none;background:rgba(255,255,255,.13);border-radius:9px;color:#fff;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;flex:none;}
.notif:hover{background:rgba(255,255,255,.22);}
.notif svg{width:16px;height:16px;}
.notifdot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#e2674f;border:2px solid #0a6ca8;}
.notifdot.hide{display:none;}
#notifDotMenu{top:-2px;right:-3px;border-color:transparent;} /* stip op de bel in het ☰-menu */
.notifs{position:absolute;inset:0;z-index:9300;display:none;} /* boven de flits-overlay (9100) */
.notifs.on{display:block;}
.nfscrim{position:absolute;inset:0;background:rgba(20,45,70,.42);backdrop-filter:blur(2px);}
.nfpanel{position:absolute;top:64px;right:12px;left:12px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(20,45,70,.6);}
.nfhead{display:flex;align-items:center;justify-content:space-between;background:#0a6ca8;color:#fff;font-family:var(--round);font-weight:700;font-size:15.5px;padding:14px 16px;}
.nfclose{border:none;background:none;color:#fff;font-size:16px;cursor:pointer;}
.nfitem{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-top:1px solid #eef1f5;}
.nfitem .nfico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:none;}
.nftx b{display:block;font-family:var(--round);font-weight:700;font-size:14.5px;color:var(--ink);}
.nftx span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.4;}
.nfitem.read{opacity:.5;}
.nfread{margin-left:auto;align-self:center;width:30px;height:30px;border:1px solid #dde7ef;background:#fff;border-radius:8px;color:#9aa7b1;cursor:pointer;flex:none;font-size:14px;}
.nfitem.read .nfread{background:#e7f4ec;border-color:#bfe0c8;color:#2f8a5b;}
.nffoot{padding:12px 16px;border-top:1px solid #eef1f5;text-align:center;}
.nffoot button{border:none;background:#eaf3fa;color:#0a6ca8;font-family:inherit;font-weight:800;font-size:13.5px;border-radius:10px;padding:10px 18px;cursor:pointer;}
.device.ipad .nfpanel{left:auto;width:380px;}
.switcher{position:absolute;inset:0;z-index:9300;display:none;} /* boven de flits-overlay (9100) */
.switcher.on{display:block;}
.swscrim{position:absolute;inset:0;background:rgba(20,45,70,.42);backdrop-filter:blur(2px);}
.swpanel{position:absolute;top:64px;right:12px;left:12px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(20,45,70,.6);}
.swhead{background:#0a6ca8;color:#fff;font-family:var(--round);font-weight:700;font-size:15.5px;padding:14px 16px;}
.switem{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;font-family:inherit;cursor:pointer;text-align:left;padding:13px 16px;border-top:1px solid #eef1f5;}
.switem:hover{background:#f6f9fb;}
.swav{width:40px;height:40px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--round);font-weight:700;font-size:17px;flex:none;}
.swtx{flex:1;}
.swtx b{display:block;font-family:var(--round);font-weight:700;font-size:15.5px;color:var(--ink);}
.swtx span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:1px;}
.swcheck{width:26px;height:26px;border-radius:50%;border:2px solid #dfe5ec;color:#fff;display:grid;place-items:center;font-size:14px;flex:none;}
.switem.on .swcheck{background:#0a6ca8;border-color:#0a6ca8;}
.switem:not(.on) .swcheck{color:transparent;}
.swfoot{padding:12px 16px;border-top:1px solid #eef1f5;text-align:center;}
.swfoot button{border:none;background:#eaf3fa;color:#0a6ca8;font-family:inherit;font-weight:800;font-size:13.5px;border-radius:10px;padding:10px 18px;cursor:pointer;}
.device.ipad .swpanel{left:auto;width:340px;}
/* ── screens ── */
.screens{flex:1;min-height:0;overflow:auto;position:relative;}
.screen{padding:6px 18px 26px;display:none;min-height:100%;}
.screen.on{display:block;animation:fade .28s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* ── HOME ── */
.hero{display:flex;align-items:center;justify-content:center;gap:10px;margin:-6px -18px 10px;padding:5px 20px 5px;background:#0a6ca8;border-bottom:1px solid rgba(255,255,255,.16);text-align:center;}
.hero .htxt{flex:1;min-width:0;text-align:center;}
.hero h1{font-family:var(--round);font-weight:700;font-size:23px;line-height:1.06;margin:0;color:#fff;letter-spacing:-.015em;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.hero h1 .hand{font-family:var(--body);}
.hero .streak{display:inline-flex;align-items:center;gap:4px;font-family:var(--body);font-weight:800;font-size:14px;color:#d9692e;background:#ffe9d6;border:1px solid #ffd6b8;border-radius:999px;padding:3px 11px 3px 9px;letter-spacing:0;}
.hero .sub{font-family:var(--round);font-weight:600;font-size:14px;color:#cfe6f4;margin:2px 0 0;text-align:center;}
.hero .pnote{font-size:12.5px;font-weight:600;color:#bcd6e9;margin:9px 0 0;display:flex;align-items:flex-start;gap:6px;line-height:1.45;}
.hero .pnote .pi{flex:none;width:15px;height:15px;color:#bcd6e9;margin-top:1px;}
.hero .pnote b{color:#fff;font-weight:800;}
.hero .boot{width:74px;height:auto;flex:none;filter:drop-shadow(0 10px 14px rgba(20,45,70,.16));margin-top:2px;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px;}
/* 3 oefen-tegels: op telefoon vult Slim de laatste rij (geen los half kaartje) */
#homeCards .card[data-go="slim"]{grid-column:1 / -1;}
.card{position:relative;border:none;text-align:left;font-family:inherit;cursor:pointer;
border-radius:16px;padding:14px;background:var(--cardbg,#fff);display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-height:104px;
box-shadow:0 14px 28px -14px rgba(0,28,52,.55), 0 4px 10px -4px rgba(0,28,52,.3);transition:transform .14s, box-shadow .14s;}
.card:hover{box-shadow:0 20px 38px -14px rgba(0,28,52,.6), 0 5px 12px -4px rgba(0,28,52,.35);transform:translateY(-2px);}
.card:active{transform:scale(.99);}
.card .cico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;flex:none;}
.card .cico svg{width:23px;height:23px;animation:icobob 2.6s ease-in-out infinite;}
.card .cico.cico-uil{background:transparent;overflow:visible;}
.card .cico.cico-uil img{width:46px;height:46px;object-fit:contain;display:block;}
.cards .card:nth-child(2) .cico svg{animation-delay:.3s;}
.cards .card:nth-child(3) .cico svg{animation-delay:.6s;}
.cards .card:nth-child(4) .cico svg{animation-delay:.9s;}
@keyframes icobob{0%,100%{transform:translateY(0) rotate(0);}30%{transform:translateY(-3px) rotate(-5deg);}60%{transform:translateY(-1px) rotate(4deg);}}
@media (prefers-reduced-motion: reduce){.card .cico svg{animation:none;}}
.card .ctext{flex:1;min-width:0;}
.card h2{font-family:var(--round);font-weight:700;font-size:17px;margin:0;letter-spacing:-.02em;color:#fff;}
.card .csub{display:block;margin-top:3px;font-size:12px;font-weight:600;color:rgba(255,255,255,.82);line-height:1.3;}
.card .csub:empty{display:none;}
.card .carr{display:none;}
/* ── Home-hiërarchie: weekdoel → (Flits groot + Deze week) → tegels → reward-tracker ── */
.home-top{display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px;align-items:stretch;}
/* Flits = de hoofdactie: groter, dominanter */
.card--flits{min-height:128px;justify-content:center;}
.card--flits .cico{width:52px;height:52px;}
.card--flits .cico svg{width:28px;height:28px;}
.card--flits h2{font-size:21px;}
.card--flits .csub{font-size:13px;}
/* "Deze week" als één rustige kaart i.p.v. losse blokjes */
.dezeweek{background:#fff;border-radius:16px;padding:14px 15px;display:flex;flex-direction:column;gap:9px;
box-shadow:0 14px 28px -16px rgba(0,28,52,.5), 0 3px 8px -4px rgba(0,28,52,.25);}
.dezeweek .dw-h{font-family:var(--round);font-weight:700;font-size:13px;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em;}
.dezeweek .dw-row{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25;}
.dezeweek .dw-ic{font-size:18px;flex:none;}
.dezeweek .dw-row b{color:#0a6ca8;}
.dezeweek .dw-row.done .dw-t,.dezeweek .dw-row.done b{color:#1f8a52;}
/* Oefen-tegels: lekker groot & luchtig (focus + grote tap targets), zoals het origineel */
#homeCards .card{min-height:116px;padding:18px;gap:12px;}
#homeCards .card h2{font-size:17px;}
#homeCards .card .csub{font-size:12px;margin-top:3px;}
/* Prijzenkast = speciaal: donkerblauw + gouden accenten + trofee-glow + 'nieuw'-badge */
.card--prijzen{background:linear-gradient(150deg,#0e4576,#0a2f52)!important;
box-shadow:0 16px 32px -16px rgba(0,20,40,.8), inset 0 0 0 1px rgba(244,200,80,.28);}
.card--prijzen .cico{background:radial-gradient(circle at 50% 38%, rgba(244,200,80,.4), rgba(244,200,80,.1));
animation:pkglow 2.6s ease-in-out infinite;}
.card--prijzen h2{color:#fff;}
.card--prijzen .csub{color:#f4d77e;}
.card--prijzen .carr{color:#f4d77e;}
@keyframes pkglow{0%,100%{box-shadow:0 0 13px -3px rgba(244,200,80,.5);}50%{box-shadow:0 0 22px 0 rgba(244,200,80,.9);}}
@media (prefers-reduced-motion: reduce){.card--prijzen .cico{animation:none;}}
.pk-badge{position:absolute;top:9px;right:10px;background:#f4c850;color:#5a3b00;font-family:var(--round);
font-weight:800;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
box-shadow:0 3px 8px -2px rgba(0,0,0,.45);}
.pk-badge[hidden]{display:none;}
/* Coach (robot + spreekballon) in de header — alleen op breed scherm zichtbaar */
.coach{display:none;}
.coach-bubble{position:relative;background:#fff;color:#0f2741;font-family:var(--round);font-weight:700;font-size:14px;line-height:1.35;border-radius:16px;padding:11px 15px;box-shadow:0 12px 26px -12px rgba(0,20,40,.55);max-width:240px;text-align:left;}
.coach-bubble b{color:#0a6ca8;}
.coach-bubble::after{content:"";position:absolute;right:-7px;bottom:16px;width:0;height:0;border:8px solid transparent;border-right:0;border-left-color:#fff;}
.coach-robot{width:auto;height:98px;object-fit:contain;flex:none;animation:bobcoach 3.4s ease-in-out infinite;}
/* "Start oefenen"-knop binnen de Flits-kaart (visuele pill in de card-button) */
.flits-cta{display:inline-flex;align-items:center;gap:9px;margin-top:11px;background:#fff;color:#0a6ca8;
font-family:var(--round);font-weight:800;font-size:15px;padding:10px 18px;border-radius:13px;box-shadow:0 8px 18px -8px rgba(0,20,40,.45);}
.flits-cta .fc-ar{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#0a6ca8;color:#fff;font-size:13px;line-height:1;}
/* Bobby's tip — levendig, contrastrijk, interactief (tik = nieuwe tip) */
.tipcard{display:flex;align-items:center;gap:14px;margin-top:14px;width:100%;text-align:left;cursor:pointer;
font-family:inherit;background:#fff;border:none;border-radius:18px;padding:13px 16px;
box-shadow:0 14px 30px -16px rgba(0,28,52,.6), 0 3px 8px -4px rgba(0,28,52,.25);transition:transform .12s, box-shadow .12s;}
.tipcard:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(0,28,52,.65);}
.tipcard:active{transform:scale(.99);}
.tipcard .tip-robot{width:52px;height:52px;object-fit:contain;flex:none;animation:bobcoach 3.4s ease-in-out infinite;}
.tipcard .tip-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.tipcard .tip-tx b{font-family:var(--round);font-weight:800;font-size:13px;color:#0a6ca8;}
.tipcard .tip-tx span{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;}
.tipcard .tip-next{flex:none;width:30px;height:30px;border-radius:50%;background:#eaf4fb;color:#0a6ca8;
display:grid;place-items:center;font-size:16px;font-weight:800;}
/* Onderrij: Bobby-tip + compacte weekmissie (stapelt op telefoon, 2-koloms op iPad) */
.home-bottom{display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px;align-items:stretch;}
.home-bottom .tipcard{margin-top:0;}
.scards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;}
.scard{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.26);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;cursor:pointer;font-family:inherit;transition:background .14s;box-shadow:0 6px 16px -12px rgba(0,28,52,.5);}
.scard:hover{background:rgba(255,255,255,.26);}
.scard .si{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.22);display:grid;place-items:center;}
.scard .si svg{width:18px;height:18px;}
.scard b{font-family:var(--round);font-weight:700;font-size:12.5px;}
/* Compact weekdoelkaartje (volle breedte onderaan): dagen + kleine Bobby */
/* Motivational / reward-card: weekvoortgang als achievement-card (premium, speels, diepte) */
.week{position:relative;margin-top:18px;border-radius:22px;padding:15px 17px 16px;display:flex;flex-direction:column;gap:12px;
background:#fff;border:1px solid #eef1f6;
box-shadow:0 18px 36px -18px rgba(13,55,95,.36), 0 3px 9px -4px rgba(13,55,95,.15), inset 0 1px 0 rgba(255,255,255,.7);}
/* zachte sterren-sluier rechtsboven (subtiel celebratory, ook buiten feest-modus) */
.week::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
background:radial-gradient(circle, rgba(244,196,48,.55) 40%, transparent 44%) 85% 15%/6px 6px no-repeat,
radial-gradient(circle, rgba(91,143,196,.5) 40%, transparent 44%) 94% 38%/5px 5px no-repeat,
radial-gradient(circle, rgba(244,196,48,.4) 40%, transparent 44%) 77% 30%/4px 4px no-repeat;}
.week>*{position:relative;z-index:1;}
.week .wrow{display:flex;align-items:center;gap:13px;}
.week .wt{flex:1;min-width:0;}
/* robotje sluit aan op de witte kaart — geen halo/achtergrond, zodat de witte achtergrond niet 'gekunsteld' opvalt */
.week .wmasc{position:relative;flex:none;width:94px;height:94px;display:grid;place-items:center;background:none;}
.week .wmascot{width:auto;height:90px;max-width:none;object-fit:contain;flex:none;}
@media (prefers-reduced-motion: reduce){.week .wmascot{animation:none;}}
@keyframes bobcoach{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-3px) rotate(2deg);}}
@keyframes bobcoach{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-3px) rotate(2deg);}}
@media (prefers-reduced-motion: reduce){.week .wmascot{animation:none;}}
.firstrow{display:flex;gap:12px;align-items:stretch;}
.firstrow .card{flex:1;}
.siderobot{display:none;}
.device.ipad .siderobot{display:block;width:100%;max-width:230px;height:auto;margin:10px auto 0;}
/* Robot-kaart (insights): robot + bericht i.p.v. een losse afbeelding. */
.robotcard{display:none;}
.device.ipad .robotcard{display:flex;align-items:center;gap:12px;margin-top:10px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 14px;}
.device.ipad .robotcard .siderobot{display:block;width:62px;max-width:62px;height:auto;margin:0;flex:none;}
.robotmsg{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;}
.robotmsg b{color:#fff;font-size:13px;font-weight:800;}
.robotmsg span{color:rgba(255,255,255,.86);font-size:12px;line-height:1.35;}
.homekpis{display:flex;gap:11px;margin-top:10px;}
.weekgoal{margin-top:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 14px;}
.weekgoal .wg-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:#eaf3fa;}
.weekgoal .wg-top b{color:#fff;font-weight:800;}
.weekgoal .wg-n{font-family:var(--round);font-weight:700;font-size:13px;color:#fff;flex:none;}
.weekgoal .wg-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:9px;}
.weekgoal .wg-bar i{display:block;height:100%;border-radius:99px;background:#3fd0c0;}
.hk{flex:1;background:#fff;border-radius:14px;padding:9px 8px 8px;text-align:center;box-shadow:0 8px 18px -12px rgba(13,55,95,.24), 0 1px 3px -1px rgba(13,55,95,.1);}
.hk b{display:block;font-family:var(--round);font-weight:700;font-size:24px;color:#0a6ca8;line-height:1;}
.hk .hke{display:block;font-size:16px;line-height:1;margin-bottom:3px;}
.hk b span{font-size:13px;color:var(--muted);font-weight:600;}
.hk span.kl{display:block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2);margin-top:3px;}
.device.ipad .homekpis{display:none;}
.homebot{display:block;width:140px;max-width:44%;height:auto;margin:18px auto 0;}
.device.ipad .homebot{width:240px;max-width:none;margin-top:10px;}
/* Weekdoel-balkje in de kaart: maakt het doel expliciet ('oefen op 5 dagen') + voortgang */
.week .wgoal{display:flex;flex-direction:column;gap:6px;}
.week .wgoal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.week .wgoal-lbl{font-size:12.5px;font-weight:700;color:var(--muted);}
.week .wgoal-lbl b{color:var(--ink);}
.week .wgoal-n{font-family:var(--round);font-weight:700;font-size:13px;color:#1ea65f;flex:none;}
.week .wgoal-bar{height:8px;border-radius:99px;background:#eef2f6;overflow:hidden;box-shadow:inset 0 1px 2px rgba(13,55,95,.1);}
.week .wgoal-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#41cf80,#1ea65f);}
.week .wt b{display:block;font-family:var(--round);font-weight:700;font-size:19px;line-height:1.12;letter-spacing:-.01em;color:var(--ink);}
.week .wt p{margin:5px 0 0;font-size:13px;font-weight:600;color:var(--muted);line-height:1.38;}
/* dagblokken: heldere progressie-states — gehaald = groen + glow, vandaag = blauwe outline, rest = lichtgrijs */
.week .dots{display:flex;gap:5px;}
.week .d{position:relative;flex:1;min-width:0;min-height:54px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 1px;
background:#e7ecf3;color:#828e9c;box-shadow:inset 0 0 0 1px #dbe2eb, inset 0 1px 0 rgba(255,255,255,.7);}
.week .d .dnm{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;opacity:.95;}
.week .d .dval{display:flex;align-items:center;gap:3px;height:20px;line-height:1;}
.week .d .dval .dico{width:15px;height:15px;display:block;}
.week .d .dval b{font-family:var(--round);font-size:15px;font-weight:700;line-height:1;}
.week .d .dempty{font-size:17px;opacity:.45;}
/* geoefend: vol, sappig groen met wit getal + gouden flits — karakter + contrast */
.week .d.done{background:linear-gradient(165deg,#41cf80 0%,#1ea65f 100%);color:#fff;
box-shadow:0 9px 17px -7px rgba(20,140,82,.8), inset 0 1px 0 rgba(255,255,255,.45);}
.week .d.done .dnm{opacity:1;color:rgba(255,255,255,.95);}
.week .d.done .dval b{color:#fff;}
.week .d.done .dico{color:#ffd23f;filter:drop-shadow(0 1px 1.5px rgba(0,55,28,.4));}
/* vandaag: duidelijke blauwe ring (nog-niet-gedaan = lichtblauw, gedaan = groen + ring) */
.week .d.today:not(.done){background:linear-gradient(165deg,#eaf4fc 0%,#d7e9f8 100%);color:#0a6ca8;}
.week .d.today{box-shadow:inset 0 0 0 2.5px #1a86c9, 0 6px 15px -7px rgba(1,104,155,.6);}
.week .d.today.done{box-shadow:inset 0 0 0 2.5px #0a6ca8, 0 9px 18px -7px rgba(20,140,82,.8);}
.week .d.today:not(.done) .dnm{opacity:1;color:#0a6ca8;}
.week .d.today.done .dnm{color:#fff;}
/* legenda: maakt het flits-getal expliciet voor ouder/leerkracht */
.week .dlegend{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:-6px;font-size:11.5px;font-weight:700;color:var(--muted2);}
.week .dlegend .dleg-ico{display:inline-flex;width:13px;height:13px;color:#f0b400;}
.week .dlegend .dleg-ico svg{width:13px;height:13px;display:block;}
/* Periode-wissel (deze week / vorige week / maand) */
.week .wperiode{display:flex;gap:4px;background:#eef2f6;border-radius:13px;padding:3px;}
.week .wper-btn{flex:1;border:none;background:none;font-family:inherit;font-size:12px;font-weight:800;color:var(--muted);padding:7px 4px;border-radius:10px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;}
.week .wper-btn.is-on{background:#fff;color:#0a6ca8;box-shadow:0 1px 3px rgba(13,55,95,.14);}
/* Maand-heatmap */
.week .wcal{display:flex;flex-direction:column;gap:5px;}
.week .wcal-kop,.week .wcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.week .wcal-dh{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted2);text-align:center;}
.week .wcal-c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:11px;font-weight:700;color:#7c8b9c;background:#eef2f6;}
.week .wcal-leeg{background:transparent;}
.week .wcal-n0{background:#eef2f6;color:#7c8b9c;}
.week .wcal-n1{background:#cdeed9;color:#1c7a48;}
.week .wcal-n2{background:#74d29c;color:#0b562e;}
.week .wcal-n3{background:#1ea65f;color:#fff;}
.week .wcal-vandaag{box-shadow:inset 0 0 0 2px #0a6ca8;}
/* weekdoel gehaald: kaart blijft gewoon wit (titel/subtitel-tekst doet de viering) */
/* Reward-tracker: flits-route met dagnaam onder elke stap (mini-game / journey gevoel) */
.rewardtrack{display:flex;align-items:flex-start;margin-top:2px;}
.rewardtrack .rstep{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;}
.rewardtrack .rcirc{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
background:#eef2f6;box-shadow:inset 0 0 0 2px #e3e9f0;}
.rewardtrack .rem{font-size:20px;filter:grayscale(1);opacity:.4;display:flex;align-items:center;justify-content:center;}
.rewardtrack .rem svg{width:21px;height:21px;display:block;color:#9aa7b2;}
.rewardtrack .rdag{font-size:11px;font-weight:800;color:#9aa7b2;letter-spacing:.01em;}
/* nog niet geoefend: duidelijk lege, gestippelde plek ("todo") i.p.v. een gevulde pil */
.rewardtrack .rstep:not(.klaar) .rcirc{background:#fff;box-shadow:none;border:2px dashed #cdd8e3;}
.rewardtrack .rstep:not(.klaar) .rem{opacity:.28;}
.rewardtrack .rstep.klaar .rcirc{background:#fff7e0;box-shadow:inset 0 0 0 2px #f4d36b, 0 5px 12px -5px rgba(243,189,28,.7);}
/* geoefend: groen ✓-badge rechtsonder als heldere "gedaan"-markering (niet op de trofee) */
.rewardtrack .rstep.klaar:not(.goal) .rcirc::after{content:"✓";position:absolute;right:-3px;bottom:-3px;
width:18px;height:18px;border-radius:50%;background:#147a40;color:#fff;font-size:11px;font-weight:900;line-height:1;
display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 5px -1px rgba(13,55,95,.3);}
.rewardtrack .rstep.klaar .rem{filter:none;opacity:1;}
.rewardtrack .rstep.klaar .rem svg{color:#f0b400;}
.rewardtrack .rstep.klaar .rdag{color:#b8860b;}
.rewardtrack .rstep.vandaag .rdag{color:#0a6ca8;}
.rewardtrack .rstep.goal .rcirc{width:50px;height:50px;}
.rewardtrack .rstep.goal .rem{font-size:25px;}
.rewardtrack .rstep.goal.klaar .rcirc{background:#fff2cf;box-shadow:inset 0 0 0 2px #f0b400, 0 7px 16px -5px rgba(240,180,0,.8);animation:goalpop .55s ease;}
.rewardtrack .rline{flex:1;height:5px;border-radius:3px;background:#e6ebf1;margin:18px -1px 0;}
.rewardtrack .rline.fill{background:linear-gradient(90deg,#f4d36b,#f0b400);}
@keyframes goalpop{0%{transform:scale(.55);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){.rewardtrack .rstep.goal.klaar .rcirc{animation:none;}}
/* ── section header (sub-screens) ── */
/* Sub-header = sibling van de home-hero: zelfde breedte/kleur en een hairline-scheiding.
Compact + krachtig: weinig verticale ruimte, back-knop ondergeschikt aan de titel. */
.shead{position:relative;display:flex;align-items:center;gap:10px;margin:-6px -18px 2px;padding:5px 20px 10px;border-bottom:1px solid rgba(255,255,255,.16);}
.backbtn{width:34px;height:34px;border-radius:11px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.16);color:#fff;
cursor:pointer;display:grid;place-items:center;font-size:21px;flex:none;transition:color .14s,background .14s;box-shadow:none;margin-left:0;}
.backbtn:hover{color:#fff;background:rgba(255,255,255,.28);}
.shead .sico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;}
.shead .sico svg{width:21px;height:21px;}
.shead .sico.sico-img{background:transparent;overflow:visible;width:56px;height:56px;margin:-8px 2px -8px -6px;}
.shead .sico.sico-img img{width:100%;height:100%;object-fit:contain;display:block;}
.shead .stx{flex:1;min-width:0;}
.shead h1{font-family:var(--round);font-weight:700;font-size:21px;margin:0;color:#fff;letter-spacing:-.01em;line-height:1.08;}
.shead p{margin:2px 0 0;font-size:12.5px;font-weight:600;color:#bcd6e9;line-height:1.3;}
/* Licht wiegend anker-icoon — subtiele personality (watermerk bewust weggelaten). */
#ankers .shead .sico svg{animation:icobob 2.8s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){#ankers .shead .sico svg{animation:none;}}
/* ── ANKERS ── */
/* Scherm als flex-kolom zodat het grid de resthoogte vult (geen lege blauwe ruimte). */
#ankers.on{display:flex;flex-direction:column;}
.ankmode{display:flex;background:#bcd6ea;border-radius:10px;padding:3px;gap:3px;margin-top:12px;box-shadow:inset 0 1px 3px rgba(13,55,95,.15);}
.ankmode button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:none;background:none;font-family:inherit;font-weight:800;font-size:13px;color:#3f5b72;padding:7px 8px;border-radius:8px;cursor:pointer;transition:all .14s;}
.ankmode-ic{width:18px;height:18px;flex:none;}
.ankmode button.on{background:#fff;color:#0a6ca8;box-shadow:0 3px 8px -3px rgba(13,55,95,.3), 0 1px 2px rgba(13,55,95,.16);}
.ankgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px;touch-action:pan-y;}
/* Navigatie-bolletjes voor het grid (pagina 1: Anker 1–4, pagina 2: 5–8). */
.ankpager{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 12px;min-height:8px;}
/* Zelfde .ankpager, hergebruikt voor de ‹ N/M › paginatie op de blauwe achtergrond
(Voortgang › Gegevens) — de tekst was standaard (donker) en dus amper leesbaar. */
.ankpager span{color:#fff;font-size:13px;font-weight:700;}
/* Voet (dots + gecombineerde Start) zakt richting de footer, vaste plek. */
/* Start-knop onderaan vastpinnen: bij groot (toegankelijkheids)lettertype werd de
knop anders onder de vouw geduwd en zag de gebruiker niet dát er een Start is.
margin-top:auto duwt 'm naar onder als er ruimte is; sticky houdt 'm in beeld
zodra de inhoud langer is dan het scherm. De fade dekt de tekst die erachter scrolt. */
.ankfoot{margin-top:auto;padding-top:12px;position:sticky;bottom:0;z-index:5;padding-bottom:8px;
background:linear-gradient(180deg,rgba(8,96,143,0) 0%,#08608f 34%);}
.ankstart{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;border:none;cursor:pointer;font-family:var(--round);font-weight:800;font-size:16px;color:#fff;background:#2DBE72;border-radius:14px;padding:14px;box-shadow:0 12px 24px -10px rgba(45,190,114,.5);transition:transform .14s, box-shadow .14s, background .14s, color .14s;}
.ankstart svg{width:17px;height:17px;}
.ankstart:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 28px -10px rgba(45,190,114,.58);}
.ankstart:disabled{cursor:default;color:#9aa9b5;background:#dde5ec;box-shadow:none;}
/* Selectie-vinkje per tile (surf & turf). */
.ankt-check{position:absolute;top:9px;left:9px;width:24px;height:24px;border-radius:99px;background:rgba(255,255,255,.92);border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(13,55,95,.45);display:grid;place-items:center;z-index:2;}
.ankt-check svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .12s;}
.anktile.sel .ankt-check{background:var(--acc,#01689b);}
.anktile.sel .ankt-check svg{opacity:1;}
.anktile.sel{box-shadow:0 0 0 3px var(--acc,#01689b), 0 14px 28px -14px rgba(13,55,95,.42);}
.ankfeat-check{top:12px;right:12px;left:auto;}
.ankfeat.sel .ankt-check{background:#2DBE72;}
.ankfeat.sel .ankt-check svg{opacity:1;}
.ankfeat.sel{box-shadow:0 0 0 3px #2DBE72, 0 18px 34px -16px rgba(13,55,95,.42);}
.ankpager .dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:transform .2s, background .2s;}
.ankpager .dot:hover{background:rgba(255,255,255,.6);}
.ankpager .dot.on{background:#fff;transform:scale(1.25);cursor:default;}
.anknote{display:none;margin-top:12px;font-size:12.5px;font-weight:700;color:#b3760f;background:#fcf2e0;border:1px solid #f3e0bb;border-radius:12px;padding:9px 13px;}
.anknote.on{display:block;}
/* Header-robot rechts (compacte personality, mag iets onder de header uitsteken). */
.ankhead .stx{padding-right:80px;}
/* robotje vanaf de BOVENkant verankeren zodat de kop niet door de scroll-rand wordt afgekapt (mobiel) */
.ankhead-robot{position:absolute;right:-2px;top:8px;bottom:auto;width:62px;height:auto;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,28,52,.32));}
/* Progress-card (wit, compact): label + telling + balk. */
/* 'Je vaart nu richting Anker …'-banner: op mobiel verborgen (meer ruimte voor de ankers), op iPad/desktop wel zichtbaar */
.ankprog{display:none;position:relative;overflow:visible;align-items:center;gap:11px;margin-top:12px;background:#f7fafc;border-radius:14px;padding:10px 40px 10px 12px;
box-shadow:0 10px 22px -14px rgba(13,55,95,.3), 0 2px 5px -2px rgba(13,55,95,.12);}
.device.ipad .ankprog{display:flex;}
.ankprog-deco{width:60px;height:auto;flex:none;margin:-4px 0 -6px;}
.ankprog-body{flex:1;min-width:0;}
/* Nautische decoraties rondom de card (zoals de mockup). */
.ankprog-wiel{position:absolute;top:-12px;right:8px;width:30px;height:30px;color:#3a78b0;opacity:.5;pointer-events:none;}
.ankprog-meeuw{position:absolute;top:1px;right:40px;width:30px;height:12px;color:#6aa0c8;opacity:.55;pointer-events:none;}
.ankprog-ankerdeco{position:absolute;right:-4px;bottom:-12px;width:48px;height:auto;opacity:.92;pointer-events:none;}
.ankprog-t{font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink);line-height:1.25;}
.ankprog-t b{color:#0a6ca8;}
.ankprog-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
.ankprog-bar{flex:1;height:9px;border-radius:99px;background:#e6edf3;overflow:hidden;}
.ankprog-bar i{display:block;height:100%;border-radius:99px;background:#2DBE72;transition:width .35s ease;}
.ankprog-n{font-size:12.5px;font-weight:800;color:#0a6ca8;flex:none;}
.ankprog-sub{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:6px;}
/* Featured 'Anker start' — groot, lichtgroene tint, eiland-illustratie rechts. */
.ankfeat{position:relative;display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;overflow:hidden;
margin-top:12px;border:none;border-radius:20px;padding:13px 16px 14px;min-height:126px;
background:linear-gradient(150deg,#eef8f1 0%,#dff0e6 100%);
box-shadow:0 16px 32px -16px rgba(13,55,95,.4), 0 3px 8px -3px rgba(13,55,95,.16);transition:transform .14s, box-shadow .14s;}
.ankfeat:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(13,55,95,.45);}
.ankfeat:active{transform:scale(.99);}
.ankfeat-ribbon{position:absolute;top:0;right:0;background:#2DBE72;color:#fff;font-size:10.5px;font-weight:800;padding:5px 13px;border-bottom-left-radius:14px;box-shadow:0 4px 10px -4px rgba(45,190,114,.6);}
.ankfeat-flag{width:40px;height:40px;border-radius:13px;background:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 14px -8px rgba(13,55,95,.4);}
.ankfeat h3{font-family:var(--round);font-weight:800;font-size:21px;color:#15452e;margin:9px 0 0;letter-spacing:-.02em;}
.ankfeat-n{display:block;font-size:12.5px;font-weight:700;color:#3f6b53;margin-top:2px;}
.ankfeat-cta{display:inline-flex;align-items:center;gap:7px;margin-top:11px;background:#2DBE72;color:#fff;font-family:var(--round);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:12px;box-shadow:0 8px 16px -6px rgba(45,190,114,.6);}
.ankfeat-cta svg{width:14px;height:14px;}
/* Twee gestapelde lagen (zelfde positie/grootte): eiland onder, palm erover. */
.ankfeat-img{position:absolute;right:4px;bottom:0;width:44%;max-width:188px;height:auto;pointer-events:none;}
.ankfeat-img.mist{display:none;}
.ankfeat-base{animation:kf-dobber 11s ease-in-out infinite;transform-origin:50% 100%;}
.ankfeat-crown{animation:kf-wuif 9s ease-in-out infinite;transform-origin:50% 64%;}
@keyframes kf-dobber{0%,40%,100%{transform:translateY(0);}68%{transform:translateY(-2.5px);}}
@keyframes kf-wuif{0%,32%,100%{transform:rotate(-0.8deg);}62%{transform:rotate(0.8deg);}}
@media (prefers-reduced-motion: reduce){ .ankfeat-base,.ankfeat-crown{animation:none;} }
/* Geïllustreerde anker-tiles (2 koloms): nummer · illustratie · titel · aantal · status. */
.anktile{position:relative;display:flex;flex-direction:column;width:100%;min-height:122px;text-align:left;font-family:inherit;cursor:pointer;overflow:hidden;
border:1.5px solid rgba(255,255,255,.8);border-radius:18px;padding:10px 11px 11px;background:#eaf3fb;
box-shadow:0 10px 22px -12px rgba(13,55,95,.28), 0 2px 5px -3px rgba(13,55,95,.1), inset 0 1.5px 0 rgba(255,255,255,.75);transition:transform .14s, box-shadow .14s, border-color .14s;}
.anktile:hover{transform:translateY(-3px);box-shadow:0 18px 32px -14px rgba(13,55,95,.4), 0 3px 8px -3px rgba(13,55,95,.16), inset 0 1.5px 0 rgba(255,255,255,.75);}
.anktile:active{transform:scale(.985);}
.anktile.current{border-color:#fff;box-shadow:0 0 0 2.5px #fff, 0 16px 30px -14px rgba(13,55,95,.42);}
.anktile-img{position:absolute;right:-6px;bottom:-4px;width:55%;max-width:106px;height:auto;pointer-events:none;}
.anktile-img.boot-links{right:-2px;bottom:-2px;width:63%;max-width:124px;transform-origin:50% 90%;animation:kf-boot 6.5s ease-in-out infinite;}
@keyframes kf-boot{
0%,100%{transform:perspective(420px) rotateX(7deg) translateY(0) rotate(-0.7deg) scale(.99);}
50%{transform:perspective(420px) rotateX(11deg) translateY(-1.5px) rotate(0.7deg) scale(1.02);}
}
@media (prefers-reduced-motion: reduce){ .anktile-img.boot-links{animation:none;} }
.anktile-img.kleiner{width:48%;max-width:92px;}
.anktile-img.graan-rechts{right:-11px;}
.anktile-img.groter{width:62%;max-width:122px;}
.anktile-img.ski-pos{width:72%;max-width:140px;right:-2px;bottom:5px;transform:rotate(-18deg);}
.anktile-img.toren-laag{bottom:-14px;}
/* Heel zacht dobberen (bijv. baggerboot anker 3). */
.anktile-img.dobber-zacht{transform-origin:50% 90%;animation:kf-dobber-zacht 7.2s ease-in-out infinite;}
@keyframes kf-dobber-zacht{0%,100%{transform:translateY(0) rotate(-0.5deg);}50%{transform:translateY(-1px) rotate(0.5deg);}}
/* Steiger (anker 4): bovenlaag = visser/hengel, wiebelt licht; onderlaag blijft stil. */
.anktile-img.steiger-hengel{transform-origin:56% 38%;animation:kf-hengel 4.8s ease-in-out infinite;}
@keyframes kf-hengel{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.6deg);}}
@media (prefers-reduced-motion: reduce){ .anktile-img.dobber-zacht,.anktile-img.steiger-hengel{animation:none;} }
.anktile-img.mist{display:none;}
.ankt-num{width:28px;height:28px;border-radius:9px;background:#fff;color:var(--acc,#01689b);display:grid;place-items:center;font-family:var(--round);font-weight:800;font-size:15px;box-shadow:0 3px 8px -4px rgba(13,55,95,.4);}
.ankt-nm{font-family:var(--round);font-weight:800;font-size:15px;color:#1d3a52;margin-top:auto;line-height:1.05;letter-spacing:-.01em;position:relative;}
.ankt-n{font-size:11px;font-weight:700;color:#5b7488;margin-top:1px;position:relative;}
.ankt-start{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:8px;width:32px;height:32px;background:var(--acc,#01689b);color:#fff;border-radius:99px;box-shadow:0 6px 13px -7px rgba(13,55,95,.55);position:relative;}
.ankt-start svg{width:14px;height:14px;margin-left:1px;}
.ankt-st{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:12px;line-height:1;background:#fff;box-shadow:0 2px 6px -2px rgba(13,55,95,.4);z-index:1;}
.ankt-st.current{color:#f0a91e;}
.ank{background:#fff;border:1.5px solid #fff;border-radius:16px;padding:14px 15px;cursor:pointer;
box-shadow:0 8px 18px -12px rgba(13,55,95,.24), 0 2px 5px -2px rgba(13,55,95,.1);transition:transform .14s, box-shadow .14s, border-color .14s;display:flex;flex-direction:column;gap:12px;}
.ank:hover{border-color:#cdddeb;transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(13,55,95,.34);}
.ank:active{transform:scale(.99);}
.ank-top{display:flex;align-items:center;gap:11px;}
.ank-dot{width:40px;height:40px;border-radius:12px;flex:none;background:#eaf3fa;color:#0a6ca8;display:grid;place-items:center;font-family:var(--round);font-weight:700;font-size:19px;}
.ank-nm{font-family:var(--round);font-weight:700;font-size:16px;color:var(--ink2);line-height:1.05;}
.ank-nm small{display:block;font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);margin-top:3px;}
.ank-go{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef1f5;padding-top:11px;}
.ank-go .cnt{font-size:12.5px;font-weight:700;color:var(--muted2);}
.ank-go .cnt b{color:var(--ink);font-weight:800;}
.ank-go .play{width:30px;height:30px;border-radius:9px;background:#0a6ca8;display:grid;place-items:center;flex:none;}
.ank-go .play::after{content:"";width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px;}
.ank-startlbl{font-family:var(--round);font-weight:700;font-size:14px;color:#0a6ca8;}
/* ── START SHEETS (flits / lees) ── */
.picklist{display:flex;flex-direction:column;gap:11px;margin-top:16px;}
.picklist.wachten{display:none;} /* tijdens de intro-tip verborgen */
.picklist:not(.wachten){animation:picksIn .4s ease both;} /* daarna invloeien */
@keyframes picksIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.pickcat{font-family:var(--round);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:4px 2px -2px;}
.pickcat:first-child{margin-top:0;}
.pickcat:not(:first-child){margin-top:10px;}
.pick{display:flex;align-items:center;gap:13px;background:#fff;border:2px solid #e4edf4;border-radius:16px;padding:14px 15px;cursor:pointer;
transition:all .14s;text-align:left;font-family:inherit;width:100%;}
.pick.sel{border-color:var(--accent);background:var(--soft);}
.pick.disabled{opacity:.5;cursor:default;background:#f6f8fa;border-color:#eef1f4;pointer-events:none;}
.pick.disabled .pico{filter:grayscale(1);}
.pick.disabled .pcheck{display:none;}
.pick .pico{width:44px;height:44px;border-radius:13px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:21px;flex:none;}
.pick .pico.pico-img{background:transparent;overflow:visible;}
.pick .pico.pico-img img{width:48px;height:48px;object-fit:contain;display:block;}
.pick.sel .pico{background:#fff;}
.pick .pbody{flex:1;min-width:0;}
.pick .pn{display:block;font-family:var(--round);font-weight:700;font-size:15.5px;color:var(--ink2);line-height:1.15;}
.pick .pdsc{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:3px;line-height:1.35;}
.pick .pcheck{width:26px;height:26px;border-radius:50%;border:2px solid #dfe5ec;flex:none;display:grid;place-items:center;color:#fff;font-size:14px;transition:all .14s;}
.pick.sel .pcheck{background:var(--accent);border-color:var(--accent);}
.instr{display:flex;align-items:center;gap:12px;margin-top:16px;background:var(--soft);border-radius:16px;padding:14px 16px;}
/* tip die kort verschijnt en daarna vloeiend dichtklapt + wegvalt */
.instr-flash{overflow:hidden;transition:opacity .35s ease, max-height .45s ease, margin-top .45s ease, padding .45s ease;max-height:160px;}
.instr-flash.weg{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;pointer-events:none;}
.instr .imier{height:56px;width:auto;flex:none;margin:-8px -2px -8px -4px;}
.instr .itx{font-size:13.5px;font-weight:700;color:var(--ink2);line-height:1.4;}
.instr .itx b{color:var(--accent);}
.gobar{display:flex;align-items:center;gap:12px;margin-top:16px;}
.gobtn{flex:1;border:none;background:var(--accent);color:#fff;font-family:var(--round);font-weight:700;font-size:19px;cursor:pointer;
border-radius:16px;padding:16px;display:flex;align-items:center;justify-content:center;gap:11px;box-shadow:0 16px 30px -14px var(--accent);transition:transform .14s, filter .14s;}
.gobtn:hover{filter:brightness(1.06);}
.gobtn .play{width:0;height:0;border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;}
/* ── OEFENEN launcher ── */
.launch{margin-top:12px;}
.lgrp{margin-top:22px;}
.lgrp:first-child{margin-top:8px;}
.lgrp .lh{display:flex;align-items:center;gap:10px;font-family:var(--round);font-weight:700;font-size:16px;color:var(--ink);margin:0 2px 11px;}
.lgrp .lh .lic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;color:#fff;}
.lrow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e4edf4;border-radius:15px;padding:14px 18px;cursor:pointer;width:100%;font-family:inherit;text-align:left;transition:all .14s;margin-bottom:10px;}
.lrow:hover{border-color:#d8c4a4;transform:translateX(3px);box-shadow:0 10px 24px -18px rgba(20,45,70,.4);}
.lrow .ln{flex:1;font-weight:800;font-size:15.5px;color:var(--ink2);}
.lrow .ld{font-size:13px;font-weight:600;color:var(--muted2);}
.lrow .lar{color:#c7b89f;font-weight:900;font-size:18px;}
/* ── VOORTGANG ── */
.vstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
.vstat{background:#fff;border-radius:13px;padding:11px 9px 10px;box-shadow:0 8px 18px -12px rgba(13,55,95,.24), 0 2px 5px -2px rgba(13,55,95,.1);}
.vstat .vico{font-size:17px;line-height:1;}
.vstat .vico svg{width:17px;height:17px;display:block;}
.vstat .vnum{font-family:var(--round);font-weight:700;font-size:22px;color:#0a6ca8;margin-top:5px;line-height:1;}
.vstat .vnum span{font-size:12px;color:var(--muted);font-weight:600;}
.vstat .vlab{font-size:10px;font-weight:700;color:var(--muted);margin-top:5px;line-height:1.25;}
.device.ipad .vstats{gap:12px;}
.device.ipad .vstat{padding:16px 16px 14px;border-radius:16px;}
.device.ipad .vstat .vico svg{width:22px;height:22px;}
.device.ipad .vstat .vnum{font-size:30px;}
.device.ipad .vstat .vlab{font-size:12.5px;}
.vsub-h{font-family:var(--round);font-weight:700;font-size:18px;color:#fff;margin:20px 2px 10px;}
.instaptoets{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font-family:inherit;cursor:pointer;margin:4px 0 16px;
background:linear-gradient(135deg,#1a7fc4,#0a6ca8);border:none;border-radius:18px;padding:18px;transition:transform .12s, box-shadow .12s;
box-shadow:0 12px 26px -10px rgba(10,108,168,.55), 0 2px 6px -2px rgba(13,55,95,.2);}
.instaptoets:hover{transform:translateY(-1px);box-shadow:0 16px 30px -10px rgba(10,108,168,.6);}
.instaptoets .it-ic{font-size:30px;flex:none;}
.instaptoets .it-tx{flex:1;min-width:0;color:#fff;}
.instaptoets .it-tx b{display:block;font-family:var(--round);font-weight:700;font-size:17px;}
.instaptoets .it-tx span{display:block;font-size:12.5px;font-weight:600;color:#d3e6f4;margin-top:2px;line-height:1.4;}
.instaptoets .it-ar{color:#fff;font-size:22px;font-weight:600;flex:none;}
.ittx p{font-size:14px;font-weight:600;color:#fff;line-height:1.5;margin:14px 0 0;}
/* Dynamische hero-CTA (ná de instaptoets): "Verder oefenen" / "Bekijk je prijzenkast" */
.hero-cta{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font-family:inherit;cursor:pointer;margin:4px 0 16px;
background:linear-gradient(135deg,#1a7fc4,#0a6ca8);border:none;border-radius:18px;padding:16px 18px;transition:transform .12s, box-shadow .12s;
box-shadow:0 12px 26px -10px rgba(10,108,168,.55), 0 2px 6px -2px rgba(13,55,95,.2);}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 16px 30px -10px rgba(10,108,168,.6);}
.hero-cta .hc-ic{font-size:28px;flex:none;}
.hero-cta .hc-tx{flex:1;min-width:0;color:#fff;}
.hero-cta .hc-tx b{display:block;font-family:var(--round);font-weight:700;font-size:17px;}
.hero-cta .hc-tx span{display:block;font-size:12.5px;font-weight:600;color:#d3e6f4;margin-top:2px;line-height:1.4;}
.hero-cta .hc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.18);}
.hero-cta .hc-ar{color:#fff;font-size:22px;font-weight:600;flex:none;}
/* Weekkaart staat in de linkerkolom; 'Jouw volgende stappen' onder de stats in de rechterkolom (sidepanel).
Op mobiel is de sidepanel verborgen, dus toont de home alleen de weekkaart. */
.weekrow-dots{display:none;} /* dode carrousel-resten */
.week{margin-top:12px;} /* mobiel: compactere ruimte onder de KPI-kaarten */
.device.ipad .week{margin-top:15px;} /* iPad/desktop */
/* Mobiel: compactere weekkaart (iPad ongemoeid dankzij :not(.ipad)) */
.device:not(.ipad) .week{gap:9px;padding:12px 15px 13px;}
.device:not(.ipad) .week .wmasc{width:78px;height:78px;}
.device:not(.ipad) .week .wmascot{height:74px;}
.device:not(.ipad) .week .wt b{font-size:17.5px;}
.device:not(.ipad) .week .wt p{margin-top:3px;}
.device:not(.ipad) .week .d{min-height:46px;}
.nextsteps{display:flex;flex-direction:column;flex:1;} /* vult de rechterkolom → onderkant lijnt uit met de weekkaart */
/* Tijdens het laden 'Jouw volgende stappen' verbergen → geen flits van bv. de
'Doe eerst je instaptoets'-tip vóór het niveau/status bekend is. */
#home.home-laden .nextsteps{visibility:hidden;}
/* Mobiel: subtitel bij 'Moeilijke woordjes' weglaten (te veel tekst op klein scherm). */
.device:not(.ipad) #moeilijk .shead p{display:none;}
/* Mobiel (onboarding): 'Jouw volgende stappen' staat onder de weekkaart → extra ruimte ertussen. */
.device:not(.ipad) .nextsteps{margin-top:18px;}
.nextsteps .ns-list{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;
box-shadow:0 14px 30px -16px rgba(13,55,95,.4), 0 2px 6px -3px rgba(13,55,95,.14);}
.nextsteps .ns-h{font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em;padding:12px 14px 8px;}
.ns-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
background:none;border:none;border-top:1px solid #eef1f5;padding:10px 14px;font-family:inherit;}
.ns-item:first-child{border-top:none;}
.ns-item:hover{background:#f6f9fc;}
.ns-item:active{background:#eef4fa;}
.ns-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:#eaf3fb;flex:none;}
.ns-tx{flex:1;min-width:0;}
.ns-tx b{display:block;font-family:var(--round);font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.15;}
.ns-tx span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.3;}
.ns-ar{color:var(--muted2);font-size:19px;font-weight:600;flex:none;}
.ns-item.tip .ns-ic{background:#fdf1d6;}
.ns-item.done .ns-ic{background:#e2f3e9;} /* afgevinkte status-regel (instaptoets gedaan) */
/* Beoordelings-mijlpaal (na 3× / 30× oefenen): laatste regel in 'Jouw volgende stappen' */
.ns-item.ns-rate-item{cursor:default;}
.ns-item.ns-rate-item .ns-ic{background:#fdf1d6;}
.ns-rate-item .rate-faces{display:flex;justify-content:flex-start;gap:2px;margin-top:4px;}
.ns-rate-item .rate-face{font-size:22px;padding:2px;border-radius:9px;}
/* In de mijlpaal-regel geen voorgeselecteerde/vergrote emoji → allemaal even groot */
.ns-rate-item .rate-face.gekozen{transform:none;}
/* Vergrendelde tegels zolang de instaptoets nog niet gedaan is */
.card.locked{opacity:.55;filter:saturate(.6);cursor:default;}
.card.locked .carr{display:none;}
.card .clock{position:absolute;top:9px;right:10px;font-size:15px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
/* "al gedaan"-status op de instaptoets-tegel: subtiel frosted labeltje (geen checkbox-gevoel) */
.card .cdone{position:absolute;top:8px;right:9px;display:inline-flex;align-items:center;gap:3px;
padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.2);color:rgba(255,255,255,.92);
font-size:10.5px;font-weight:800;letter-spacing:.02em;line-height:1;}
/* Secundaire link: "Niveau opnieuw bepalen" (ná de instaptoets) */
.herhaal-it{display:block;width:100%;margin-top:12px;background:none;border:none;cursor:pointer;
font-family:inherit;font-weight:700;font-size:13px;color:var(--muted);text-align:center;padding:6px;}
.herhaal-it:hover{color:var(--blauw);text-decoration:underline;}
/* Instaptoets-tegel: ook tijdens onboarding zichtbaar (de uitleg-banner is verwijderd);
dit is dan het startpunt voor de instaptoets. Na afronden krijgt-ie een ✓. */
#home .instaptoets{display:none;}
#home.onboarding .instaptoets{display:flex;flex-direction:column;gap:13px;margin:2px 0 18px;padding:16px;
border-radius:20px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,216,107,.55);
box-shadow:0 0 0 4px rgba(255,216,107,.1), 0 20px 40px -20px rgba(0,20,40,.7);}
/* "Start hier"-badge: maakt de instaptoets onmiskenbaar dé eerste stap */
.onb-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
background:linear-gradient(135deg,#ffd86b,#f3b400);color:#5a3d00;
font-weight:800;font-size:12px;letter-spacing:.01em;padding:5px 12px;border-radius:999px;
box-shadow:0 8px 16px -6px rgba(240,180,0,.8);}
#home.onboarding .weekgoal,
#home.onboarding .week,
#home.onboarding .sidepanel,
#home.onboarding .dezeweek{display:none !important;}
#home.onboarding .home-top{grid-template-columns:1fr;} /* alleen de (vergrendelde) Flits-kaart */
/* Tijdens onboarding tóch de weekkaart + "Jouw volgende stappen" tonen — de grote
uitlegkaart is verwijderd, anders blijft de home te leeg. Geldt op alle apparaten. */
#home.onboarding .week{display:flex !important;}
#home.onboarding .sidepanel{display:flex !important;}
/* Mobiel: in het zijpaneel alleen 'Jouw volgende stappen' (de stats staan al in de KPI-kaarten). */
.device:not(.ipad) #home.onboarding .sidepanel .spk-h,
.device:not(.ipad) #home.onboarding .sidepanel .sprow{display:none !important;}
/* Mobiel + onboarding: weekkaart verbergen → 'Jouw volgende stappen' komt op die plek (na de KPI's). */
.device:not(.ipad) #home.onboarding .week{display:none !important;}
/* Onboarding-uitleg-banner: witte tekst + witte stap-kaartjes op de blauwe shell (rustig/geruststellend) */
.instaptoets .onb-hd{display:flex;align-items:center;gap:13px;}
.instaptoets .onb-robot{width:60px;height:60px;object-fit:contain;flex:none;animation:bobcoach 3.2s ease-in-out infinite;}
.instaptoets .onb-tx b{display:block;font-family:var(--round);font-weight:700;font-size:19px;color:#fff;line-height:1.22;}
.instaptoets .onb-tx p{margin:6px 0 0;font-size:14px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.42;}
.instaptoets .onb-start{flex:none;align-self:stretch;background:#fff;color:#0a6ca8;box-shadow:0 16px 30px -16px rgba(0,20,40,.7);}
@keyframes itNudge{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}}
.instaptoets.nudge{animation:itNudge .5s ease;}
.itsteps{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.itstep{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:13px 15px;box-shadow:0 8px 18px -12px rgba(0,28,52,.4);}
.itstep .itn{width:30px;height:30px;border-radius:9px;background:#eaf3fa;color:#0a6ca8;font-family:var(--round);font-weight:700;display:grid;place-items:center;flex:none;}
.itstep>div{flex:1;}
.itstep b{display:block;font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink2);}
.itstep span{font-size:12.5px;font-weight:600;color:var(--muted);}
.itstep .itmin{flex:none;font-size:12px;font-weight:700;color:var(--muted2);}
.itstep .itok{flex:none;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#1f8a52;background:#e7f4ec;border:1px solid #bfe0c8;border-radius:8px;padding:4px 9px;}
.itstep.cur{box-shadow:0 0 0 2px #0a6ca8, 0 8px 18px -12px rgba(0,28,52,.4);}
.itstep.cur .itn{background:#0a6ca8;color:#fff;}
.itstep.cur .itmin{color:#0a6ca8;}
.itstep.todo{opacity:.6;}
.itres{margin-top:14px;font-size:13.5px;font-weight:700;color:#fff;background:#5e97c8;border-radius:14px;padding:13px 15px;box-shadow:0 12px 26px -16px rgba(1,40,70,.6);}
.itres b{color:#fff;}
/* ── Instaptoets-scherm (onboarding): coach + scanbare kaarten ── */
.it-wrap{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
/* Melding: er is al een meting — geruststellend (groen), niet blokkerend */
.it-melding{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);border:1px solid rgba(120,220,160,.55);border-radius:16px;padding:12px 14px;}
.it-melding[hidden]{display:none;}
.it-melding .it-melding-ic{width:38px;height:38px;border-radius:11px;background:rgba(70,200,125,.32);display:grid;place-items:center;font-size:19px;flex:none;}
.it-melding .it-melding-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.it-melding .it-melding-tx b{color:#fff;font-size:14px;font-weight:800;}
.it-melding .it-melding-tx span{color:rgba(255,255,255,.9);font-size:12.5px;font-weight:600;line-height:1.35;}
.it-coach{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:11px 14px;}
.it-coach .it-robot{width:52px;height:52px;object-fit:contain;flex:none;animation:bobcoach 3.2s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.it-coach .it-robot{animation:none;}}
.it-coachtx{display:flex;flex-direction:column;gap:1px;min-width:0;}
.it-coachtx b{color:#fff;font-family:var(--round);font-weight:700;font-size:15px;}
.it-coachtx span{color:#cfe6f4;font-size:12.5px;font-weight:600;}
.it-coachtx span b{color:#fff;}
.it-card{background:#fff;border-radius:16px;padding:15px 16px;box-shadow:0 12px 26px -16px rgba(1,40,70,.55);}
.it-cardh{display:flex;align-items:center;gap:8px;font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:11px;}
.it-cardh .it-ico{font-size:18px;}
.it-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.it-steps li{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:#3a4a5a;line-height:1.3;}
.it-steps .it-num{flex:none;width:25px;height:25px;border-radius:50%;background:#eaf4fb;color:#0a6ca8;font-family:var(--round);font-weight:800;font-size:13px;display:grid;place-items:center;}
.it-steps li b{color:var(--ink);}
.it-picks{display:flex;flex-direction:column;gap:10px;} /* mobiel: bron-kaartjes onder elkaar (strak uitgelijnd) */
.device.ipad .it-picks{flex-direction:row;} /* iPad: naast elkaar */
.it-pick{flex:1;display:flex;align-items:center;gap:10px;background:#f4f8fb;border:2px solid #e2ecf3;border-radius:13px;padding:11px 12px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .14s, background .14s;}
.it-pick.on{border-color:#0a6ca8;background:#eaf4fb;}
.it-pick.vast{cursor:default;}
.it-pick .ip-ic{font-size:21px;flex:none;}
.it-pick .ip-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.it-pick .ip-tx b{font-family:var(--round);font-weight:700;font-size:13.5px;color:var(--ink);}
.it-pick .ip-tx span{font-size:12px;font-weight:700;color:#0a6ca8;}
.it-pick .ip-rad{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #c3d3e0;position:relative;}
.it-pick.on .ip-rad{border-color:#0a6ca8;}
.it-pick.on .ip-rad::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0a6ca8;}
.it-pick.vast .ip-rad{display:none;}
.it-picknote{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:10px;line-height:1.4;}
.it-picknote:empty{display:none;}
.it-info{display:flex;gap:11px;background:#fff7e6;border:1px solid #f5e2b8;border-radius:16px;padding:13px 15px;}
.it-info .it-infoic{font-size:20px;flex:none;}
.it-info .it-infotx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.it-info .it-infotx b{font-family:var(--round);font-weight:700;font-size:14px;color:#8a5a00;}
.it-info .it-infotx span{font-size:12.5px;font-weight:600;color:#7a5a1a;line-height:1.45;}
/* Instaptoets: Start-knop altijd in beeld (sticky onderaan) — niet meer wegscrollen */
#instaptoets .gobar{position:sticky;bottom:0;z-index:5;margin-top:18px;padding:12px 0 calc(8px + env(safe-area-inset-bottom));
background:linear-gradient(to top,#08608f 58%,rgba(8,96,143,0));}
/* ── Eerste-keer rondleiding: vraag-popup + gele spreekwolkjes ── */
.tour-ask{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,40,70,.55);}
.tour-ask[hidden]{display:none;}
.tour-ask-card{background:#fff;border-radius:22px;padding:22px;max-width:340px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,20,40,.6);}
.tour-ask-robot{width:84px;height:84px;object-fit:contain;display:block;margin:-4px auto 8px;}
.tour-ask-card b{display:block;font-family:var(--round);font-weight:700;font-size:20px;color:var(--ink);}
.tour-ask-card p{margin:8px 4px 18px;font-size:14px;font-weight:600;color:var(--muted);line-height:1.45;}
.tour-ask-btns{display:flex;gap:10px;}
.tour-ask-btns button{flex:1;border:none;border-radius:13px;padding:13px;font-family:var(--round);font-weight:700;font-size:15px;cursor:pointer;}
.tour-no{background:#eef2f6;color:#5b6b7a;}
.tour-yes{background:var(--blauw);color:#fff;}
.tour{position:fixed;inset:0;z-index:9500;}
.tour-arrow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.tour-arrow[hidden]{display:none;}
.tour[hidden]{display:none;}
.tour-skip{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;border:none;background:rgba(255,255,255,.92);color:#5b6b7a;
font-family:var(--round);font-weight:700;font-size:13px;padding:8px 16px;border-radius:99px;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,20,40,.5);}
.tour-bubble{position:fixed;max-width:320px;width:max-content;background:linear-gradient(180deg,#fff6d2,#ffe9a6);
border:1.5px solid #f1d275;border-radius:18px;padding:14px 15px;box-shadow:0 18px 40px -12px rgba(120,80,0,.55);}
.tour-bubble-row{display:flex;gap:11px;align-items:flex-start;}
.tour-bubble-robot{width:46px;height:46px;object-fit:contain;flex:none;}
.tour-bubble-tx{font-size:14px;font-weight:600;color:#5a4500;line-height:1.42;}
.tour-bubble-tx b{color:#3d2f00;}
.tour-bubble-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}
.tour-step{font-size:12px;font-weight:800;color:#a07d12;letter-spacing:.03em;}
.tour-next{border:none;background:#f0a800;color:#fff;font-family:var(--round);font-weight:700;font-size:14px;padding:9px 17px;border-radius:11px;cursor:pointer;}
.tour-next:hover{filter:brightness(1.05);}
.tour-tail{position:absolute;width:16px;height:16px;background:#ffe9a6;border:1.5px solid #f1d275;transform:rotate(45deg);}
.tour-tail.up{top:-9px;border-right:none;border-bottom:none;background:#fff6d2;}
.tour-tail.down{bottom:-9px;border-left:none;border-top:none;}
.tour-spot{position:relative;z-index:9499;border-radius:14px;
box-shadow:0 0 0 4px rgba(240,180,0,.95), 0 0 0 10px rgba(240,180,0,.32) !important;}
/* 'Rondleiding opnieuw'-knop (Hulp) */
.tour-replay{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
background:linear-gradient(180deg,#fff6d2,#ffe9a6);border:1.5px solid #f1d275;border-radius:16px;padding:13px 15px;margin-bottom:14px;
box-shadow:0 12px 26px -14px rgba(120,80,0,.5);}
.tour-replay img{width:46px;height:46px;object-fit:contain;flex:none;}
.tour-replay>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.tour-replay b{font-family:var(--round);font-weight:700;font-size:15px;color:#3d2f00;}
.tour-replay>span{font-size:12.5px;font-weight:600;color:#7a5f12;}
.tour-replay .tr-chev{flex:none;font-size:20px;font-weight:700;color:#b58f1e;}
/* ── Video's & fun: kaarten met YouTube-thumbnail die in een nieuw tabblad openen ── */
.funlist{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.funcard{display:flex;align-items:center;gap:13px;text-decoration:none;background:#fff;border-radius:16px;padding:9px;
box-shadow:0 10px 22px -14px rgba(13,55,95,.3), 0 2px 5px -2px rgba(13,55,95,.12);transition:transform .12s, box-shadow .12s;}
.funcard:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(13,55,95,.4);}
.funcard:active{transform:scale(.99);}
.funthumb{position:relative;flex:none;width:122px;height:69px;border-radius:11px;overflow:hidden;background:#000;}
.funthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.funplay{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;
background:rgba(0,0,0,.18);text-shadow:0 2px 6px rgba(0,0,0,.6);}
.funtx{flex:1;min-width:0;}
.funtx b{display:block;font-family:var(--round);font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.25;}
.funtx span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:3px;}
.funnote{margin:14px 2px 0;font-size:12px;font-weight:600;color:var(--muted2);text-align:center;}
/* tabs (Meneer Frans / Zoem) */
#fun [data-funpanel][hidden]{display:none;} /* verborgen tab-paneel echt verbergen (wint van .funlist{display:flex}) */
.funtabs{display:flex;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:5px;margin-top:6px;}
.funtab{flex:1;border:none;background:none;cursor:pointer;font-family:var(--round);font-weight:700;font-size:14px;color:#cfe6f4;padding:9px 6px;border-radius:10px;transition:background .14s, color .14s;}
.funtab.on{background:#fff;color:var(--blauw);box-shadow:0 5px 12px -5px rgba(0,20,40,.4);}
.funintro{margin:12px 2px 0;font-size:13px;font-weight:600;color:#cfe6f4;}
/* Zoem: compact rooster met losse letter/klank-filmpjes */
.fungrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;}
.device.ipad .fungrid{grid-template-columns:repeat(4,1fr);}
.fungcard{display:block;text-decoration:none;background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 8px 18px -12px rgba(13,55,95,.35), 0 2px 5px -2px rgba(13,55,95,.12);transition:transform .12s;}
.fungcard:hover{transform:translateY(-2px);}
.fungcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;}
.fungcard b{display:block;text-align:center;padding:7px 4px;font-family:var(--round);font-weight:700;font-size:14px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;}
.vtabs{display:flex;background:#dceaf5;border-radius:12px;padding:3px;gap:3px;margin-top:16px;}
.vtabs button{flex:1;border:none;background:none;font-family:inherit;font-weight:800;font-size:13.5px;color:#4a6378;padding:9px;border-radius:9px;cursor:pointer;}
.vtabs button.on{background:#fff;color:#0a6ca8;box-shadow:0 2px 5px -2px rgba(20,45,70,.25);}
.vpane{display:none;}
.vpane.on{display:block;}
.advies{background:#fff;border-radius:16px;padding:15px 17px;margin-top:16px;box-shadow:0 10px 22px -10px rgba(13,55,95,.2), 0 2px 5px -2px rgba(13,55,95,.1);}
.doc{display:flex;flex-direction:column;gap:13px;margin-top:16px;}
.doccard{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 10px 22px -10px rgba(13,55,95,.2), 0 2px 5px -2px rgba(13,55,95,.1);}
.doccard h3{font-family:var(--round);font-weight:700;font-size:15.5px;color:var(--ink);margin:0 0 9px;display:flex;align-items:center;gap:10px;}
.doccard p{font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.5;margin:0 0 7px;}
/* Privacy & voorwaarden: icoon-chip bij de kop + vinkjeslijst */
.docic{flex:none;width:30px;height:30px;border-radius:10px;background:#eaf3fa;display:grid;place-items:center;font-size:15px;line-height:1;}
.doclist{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.doclist li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.5;}
.doclist li::before{content:'✓';flex:none;width:20px;height:20px;border-radius:50%;background:#e8f6ee;color:#1e9e63;font-size:11px;font-weight:900;display:grid;place-items:center;margin-top:2px;}
.doccard .ct-open-btn{margin-top:12px;}
/* ── Veelgestelde vragen: accordeon (klik op de vraag, antwoord schuift uit) ── */
.faqlijst{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.faqitem{background:#fff;border-radius:16px;box-shadow:0 10px 22px -10px rgba(13,55,95,.2), 0 2px 5px -2px rgba(13,55,95,.1);overflow:hidden;}
.faqq{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:none;border:none;text-align:left;
font-family:var(--round);font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.35;padding:15px 17px;cursor:pointer;}
.faqpl{flex:none;width:22px;height:22px;border-radius:50%;background:#eaf3fa;position:relative;margin-top:1px;transition:background .18s ease;}
.faqpl::before,.faqpl::after{content:'';position:absolute;left:50%;top:50%;background:var(--blauw);border-radius:2px;transform:translate(-50%,-50%);transition:opacity .18s ease,transform .18s ease;}
.faqpl::before{width:10px;height:2px;}
.faqpl::after{width:2px;height:10px;}
.faqitem.open .faqpl::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.faqitem.open .faqpl{background:var(--blauw);}
.faqitem.open .faqpl::before{background:#fff;}
.faqa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;}
.faqitem.open .faqa{grid-template-rows:1fr;}
.faqa>.faqa-in{overflow:hidden;}
.faqa-in>*{margin:0 17px;}
.faqa-in>p{font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.55;padding-bottom:9px;}
.faqa-in>p:first-child{padding-top:1px;}
.faqa-in>.ct-open-btn{margin-bottom:15px;margin-top:3px;}
.faqa-in>.faqwit{height:9px;}
/* ── Inzicht in het oefenen (ouderversie van het admin-inzicht) ── */
.iz-score{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px;}
.iz-score-num{font-family:var(--round);font-weight:800;font-size:34px;color:var(--blauw);line-height:1;}
.iz-score-lbl{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.4;}
.iz-eis{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:13px;font-weight:700;color:var(--slate);}
.iz-eis>span{flex:0 0 90px;}
.iz-eis>b{flex:none;font-size:12.5px;color:var(--ink);min-width:52px;text-align:right;}
.iz-balk{flex:1;height:9px;border-radius:99px;background:#e8eef4;overflow:hidden;}
.iz-balk-vul{height:100%;border-radius:99px;background:#7fb6dc;transition:width .3s ease;}
.iz-balk-vul.ok{background:#1e9e63;}
.iz-voet{margin-top:6px;font-size:12px;font-weight:700;color:var(--muted);}
.iz-uitslag{margin-top:11px;background:#eef4f9;border-radius:11px;padding:10px 13px;font-size:13px;font-weight:700;color:var(--slate);line-height:1.5;}
.iz-uitslag.ok{background:#e8f6ee;color:#177a4d;}
.iz-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
/* Vaste kolommen i.p.v. flex-wrap: woordjes staan zo netjes onder elkaar, ook al
verschillen ze in lengte. Vier kolommen breed, twee op de telefoon. */
.iz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:9px;}
.iz-grid .iz-chip{text-align:center;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:740px){ .iz-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.iz-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:12px;}
.iz-pager button{border:1.5px solid var(--line);background:#fff;color:var(--blauw);border-radius:9px;
min-width:32px;height:32px;padding:0 7px;font-family:var(--round);font-weight:800;font-size:14px;line-height:1;cursor:pointer;}
.iz-pager button.on{background:var(--blauw);border-color:var(--blauw);color:#fff;}
.iz-pager button:disabled{color:#c2cdd8;cursor:default;}
.iz-punt{color:var(--muted);font-weight:800;padding:0 2px;}
.iz-telling{margin:7px 0 0;text-align:center;font-size:12px;font-weight:700;color:var(--muted);}
/* Sorteerkeuze boven de lijst — met honderden woordjes over meerdere pagina's wil je
zelf kunnen bepalen waar je begint te zoeken. */
.iz-sort{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:700;color:var(--muted);}
.iz-sort button{border:1.5px solid var(--line);background:#fff;color:var(--blauw);border-radius:9px;
padding:5px 11px;font-family:var(--round);font-weight:800;font-size:12px;cursor:pointer;}
.iz-sort button.on{background:var(--blauw);border-color:var(--blauw);color:#fff;}
.iz-chip{background:#eef3f8;color:var(--ink);border-radius:9px;padding:4px 9px;font-size:12.5px;font-weight:700;}
.iz-chip.ok{background:#e8f6ee;color:#177a4d;}
.iz-chip.let{background:#fdf1e7;color:#a9622f;}
.iz-tag{background:#fdf0dd;color:#a9622f;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:800;vertical-align:middle;}
.iz-tel{background:#eaf3fa;color:var(--blauw);border-radius:9px;padding:1px 8px;font-size:12px;font-weight:800;}
.faqsectie{font-family:var(--round);font-weight:800;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);padding:12px 4px 2px;}
.faqlijst>.faqsectie:first-child{padding-top:2px;}
@media (prefers-reduced-motion: reduce){ .faqa{transition:none;} }
/* Beoordeling 'Hoe blij maken we je?' */
.rate-card{text-align:center;}
.rate-faces{display:flex;justify-content:center;gap:8px;margin-top:14px;}
.rate-face{border:none;background:none;font-size:32px;line-height:1;cursor:pointer;padding:4px;border-radius:12px;filter:grayscale(.2);opacity:.8;transition:transform .12s ease,filter .12s ease,opacity .12s ease;}
.rate-face:hover{transform:scale(1.12);filter:none;opacity:1;}
.rate-face.gekozen{transform:scale(1.2);filter:none;opacity:1;}
.rate-dank{margin-top:12px;font-weight:800;font-size:13.5px;color:#1ea65f;}
.rate-dank[hidden]{display:none;}
.rate-contact-link{border:none;background:none;padding:0;font:inherit;font-weight:800;color:#0a6ca8;text-decoration:underline;cursor:pointer;}
/* Contact — knop op de Hulp-kaart + formulier-modal */
.ct-open-btn{margin-top:8px;border:none;background:#0a6ca8;color:#fff;border-radius:11px;padding:11px 16px;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer;}
.ct-open-btn:active{transform:translateY(1px);}
.ct-overlay{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:18px;}
.ct-overlay[hidden]{display:none;}
.ct-scrim{position:absolute;inset:0;background:rgba(6,40,70,.5);backdrop-filter:blur(2px);}
.ct-card{position:relative;z-index:1;background:#fff;border-radius:18px;width:440px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px -24px rgba(20,45,70,.6);}
.ct-head{background:var(--blauw,#0a6ca8);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-family:var(--round);font-weight:800;font-size:16px;}
.ct-close{background:rgba(255,255,255,.16);border:none;color:#fff;width:30px;height:30px;border-radius:8px;font-size:16px;cursor:pointer;line-height:1;}
.ct-body{padding:16px;overflow-y:auto;}
.ct-lbl{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:800;color:#556;margin:12px 2px 5px;text-transform:uppercase;letter-spacing:.03em;}
.ct-body>.ct-lbl:first-child{margin-top:0;}
.ct-opt,.ct-tel{font-weight:600;text-transform:none;letter-spacing:0;color:#9aa7b2;}
.ct-inp{width:100%;box-sizing:border-box;border:1.5px solid #dde7ef;border-radius:11px;padding:11px 13px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:#fff;}
.ct-inp:focus{outline:none;border-color:#0a6ca8;}
.ct-area{min-height:92px;resize:vertical;}
.ct-row{display:flex;gap:10px;}
.ct-row>div{flex:1;min-width:0;}
.ct-msg{margin-top:11px;font-size:13px;font-weight:700;min-height:18px;}
.ct-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eef2f6;}
.ct-annuleer,.ct-verstuur{border:none;border-radius:11px;padding:11px 18px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;}
.ct-annuleer{background:#eef2f6;color:#5a6b78;}
.ct-verstuur{background:#0a6ca8;color:#fff;}
.ct-verstuur:disabled{opacity:.6;cursor:default;}
@media (max-width:430px){ .ct-row{flex-direction:column;gap:0;} }
/* Contact als eigen scherm (#contact) i.p.v. modal */
.ct-form>.ct-lbl:first-child{margin-top:0;}
.ct-kind{display:inline-flex;align-items:center;gap:6px;background:#eaf3fb;color:#0a6ca8;border:1px solid #cfe0f2;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;margin:0 0 4px;}
.ct-kind[hidden]{display:none;}
/* Rondleiding: 'Voorbeeld'-badge over het echte flitsscherm tijdens de auto-demo */
#tfdBadge{position:absolute;top:170px;left:50%;transform:translateX(-50%);z-index:20;background:#0a6ca8;color:#fff;font-family:var(--round);font-weight:800;font-size:13px;padding:7px 16px;border-radius:999px;box-shadow:0 8px 22px -10px rgba(10,45,70,.6);white-space:nowrap;pointer-events:none;}
.ct-form .ct-verstuur{width:100%;margin-top:16px;}
.doccard p:last-child{margin:0;}
.docsteps{display:flex;flex-direction:column;gap:11px;}
.docstep{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.45;}
.docstep>b{flex:none;width:24px;height:24px;border-radius:50%;background:#eaf3fa;color:#0a6ca8;font-family:var(--round);font-weight:700;font-size:13px;display:grid;place-items:center;margin-top:1px;}
/* ── Flitsconsole-uitleg (Hulp & uitleg): 2 kolommen — console-weergave + legenda ── */
.fc-sub{color:var(--muted,#64748b) !important;font-weight:600;}
.fc-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin:14px 0 4px;}
.fc-console{background:#16496b;border:2px solid rgba(160,210,240,.45);border-radius:18px;padding:16px 22px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 10px 26px rgba(1,30,60,.28);flex:0 0 auto;}
.fc-dpad{display:grid;grid-template-areas:". op ." "fo . ju" ". va .";grid-template-columns:repeat(3,60px);justify-items:center;align-items:center;column-gap:10px;}
.fc-op{grid-area:op;} .fc-fo{grid-area:fo;} .fc-ju{grid-area:ju;} .fc-va{grid-area:va;}
.fc-btn{display:flex;flex-direction:column;align-items:center;gap:4px;}
.fc-ic{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.09);border:1.5px solid rgba(160,210,240,.32);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:800;font-family:var(--round),sans-serif;}
.fc-fo .fc-ic{background:rgba(192,57,43,.32);border-color:rgba(192,57,43,.55);}
.fc-ju .fc-ic{background:rgba(31,139,76,.32);border-color:rgba(31,139,76,.55);}
.fc-cap{font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.fc-meer{align-self:stretch;border-top:1px solid rgba(160,210,240,.28);margin-top:8px;padding-top:8px;font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.fc-row{display:flex;gap:18px;margin-top:2px;}
.fc-sm .fc-ic{width:36px;height:36px;font-size:14px;border-radius:10px;}
.fc-on .fc-ic{background:#eaf4fb;border-color:#eaf4fb;color:#16496b;}
.fc-legend{flex:1;min-width:230px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fc-legend li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.4;}
.fc-legend b{font-weight:800;}
.fc-key{flex:none;width:26px;height:26px;border-radius:8px;background:#eef4f9;color:#0f2741;display:grid;place-items:center;font-weight:800;font-size:13px;}
.fc-tip{margin-top:14px;background:#fff8e1;border:1px solid #fde68a;border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600;color:#7a5b12;line-height:1.5;}
.docstep span b{font-weight:800;color:var(--ink);}
.legalfoot{text-align:center;font-size:11.5px;font-weight:700;color:var(--muted2);padding:6px 0 2px;}.advies .adv-h{font-family:var(--round);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:11px;}
.advies .adv-row{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.4;padding:5px 0;}
.advies .adv-row b{color:var(--ink);font-weight:800;}
.advies .adv-i{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff;margin-top:1px;}
.advies .adv-i.good{background:#2f8a5b;}
.advies .adv-i.work{background:#e0a02a;}
/* leestempo grafiek */
.chartcard{background:#fff;border-radius:18px;padding:14px 16px 6px;margin-top:16px;box-shadow:0 10px 22px -10px rgba(13,55,95,.22), 0 2px 5px -2px rgba(13,55,95,.1);}
.cc-top{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.cc-htxt{display:flex;flex-direction:column;}
.cc-sub2{font-size:11px;font-weight:600;color:var(--muted2);margin-top:2px;text-transform:none;letter-spacing:0;}
.cc-lbl{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);}
.cc-sel{flex:1;font-family:var(--round);font-weight:700;font-size:14px;color:var(--ink);background:#f4f8fb url('data:image/svg+xml;utf8,') no-repeat right 13px center;-webkit-appearance:none;appearance:none;border:1.5px solid #dde7ef;border-radius:11px;padding:9px 34px 9px 13px;cursor:pointer;}
.cc-sel:focus{outline:none;border-color:#0a6ca8;box-shadow:0 0 0 3px rgba(10,108,168,.12);}
.vchart{width:100%;height:250px;}
.cc-stats{display:flex;justify-content:space-between;gap:6px;border-top:1px solid #eef1f5;padding:13px 4px 9px;flex-wrap:wrap;}
.cs{text-align:center;flex:1;min-width:54px;}
.cs b{display:block;font-family:var(--round);font-weight:700;font-size:21px;color:var(--ink);line-height:1;}
.cs b.blue{color:#0a6ca8;}
.cs b.violet{color:#7359ba;}
.cs b.green{color:#1f8a52;}
.cs span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2);margin-top:5px;}
.lastlist{background:#fff;border-radius:18px;padding:2px 8px 5px;box-shadow:0 10px 22px -10px rgba(13,55,95,.22), 0 2px 5px -2px rgba(13,55,95,.1);}
.lasthead{display:flex;align-items:center;gap:9px;padding:11px 8px 8px;border-bottom:1px solid #e4edf4;}
.lasthead span{font-weight:600;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2);}
.lasti{display:flex;align-items:center;gap:9px;padding:9px 8px;border-bottom:1px solid #eef1f5;}
.lasti:last-child{border-bottom:none;}
.ldate{font-size:12px;font-weight:600;color:var(--muted2);flex:none;width:58px;display:flex;flex-direction:column;line-height:1.3;}
.ldate .ltijd{font-size:10px;font-weight:600;color:var(--muted2);opacity:.7;}
.lnr{font-family:var(--round);font-weight:700;font-size:12.5px;color:#0a6ca8;flex:none;width:28px;}
.ltype{font-size:13.5px;font-weight:600;color:var(--ink2);flex:none;width:64px;}
.lname{flex:1;min-width:0;font-weight:600;font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lmet{font-size:14px;font-weight:600;color:var(--ink);flex:none;white-space:nowrap;width:52px;text-align:right;}
.ldel{flex:none;width:28px;height:28px;border:none;background:none;cursor:pointer;color:#c2cdd8;border-radius:8px;display:grid;place-items:center;margin-left:2px;}
.ldel svg{width:16px;height:16px;}
.ldel:hover{background:#fbecea;color:#d7644f;}
.lacth{flex:none;width:30px;}
.teachnote{margin-top:14px;display:flex;align-items:center;gap:11px;background:#eef6fb;border:1px solid #d3e6f2;border-radius:14px;padding:13px 15px;font-size:12.5px;font-weight:700;color:#15618f;line-height:1.4;}
.teachnote .tn{font-size:18px;flex:none;}
/* ── INSTELLINGEN ── */
.setgroup{margin-top:16px;background:#fff;border:1px solid #e4edf4;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px -18px rgba(20,45,70,.35);}
.setrow{padding:16px 18px;display:flex;align-items:center;gap:14px;border-top:1px solid #eef1f5;}
.setrow.off{opacity:.4;pointer-events:none;}
/* Rij met tekst + schakelaar naast elkaar, en eronder nog iets over de volle breedte. */
.setrow-top{display:flex;align-items:center;gap:14px;}
/* Voorbeeldje bij 'Letters uit elkaar' — zelfde opbouw als in het flitsscherm
(.lue in beheer/oefening.css), zodat de ouder ziet wat het kind straks ziet. */
.lue-voorbeeld{display:flex;align-items:center;gap:12px;background:#f4f8fb;border-radius:12px;padding:10px 14px;}
.lue-vb-lbl{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.lue-vb-woord{display:inline-flex;align-items:flex-start;font-family:var(--round);font-weight:800;font-size:30px;color:var(--ink);line-height:1;}
.lue-vb-stuk{display:inline-flex;flex-direction:column;align-items:center;margin:0 .2em;line-height:1;}
.lue-vb-stuk i{width:.13em;height:.13em;margin-top:.16em;border-radius:50%;background:currentColor;opacity:.55;}
/* ══ Instellingen (naar het ontwerp in prototype-patch/) ══════════════════
Alles gescoped onder #instellingen: de klassenamen komen uit het prototype
(card/cardhead/row/txt/seg/chip/slider/stage/summary) en zouden buiten dit
scherm botsen met bestaande app-stijlen. */
#instellingen .ghost{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:9px;
color:#fff;font-size:13px;font-weight:800;font-family:var(--round);background:rgba(255,255,255,.16);
padding:10px 16px;border:none;border-radius:999px;cursor:pointer;}
#instellingen .ghost:hover{background:rgba(255,255,255,.26);}
#instellingen .ghost svg{width:15px;height:15px;}
.device:not(.ipad) #instellingen .ghost span{display:none;} /* telefoon: alleen het icoontje */
/* Eén kolom en niet breder dan prettig leest; de kaarten werden anders erg lang. */
#instellingen .inst-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
align-items:start;margin-top:16px;max-width:680px;}
#instellingen .shead{max-width:680px;}
#instellingen .inst-kol{min-width:0;}
#instellingen .inst-card{background:#fff;border-radius:18px;overflow:hidden;
box-shadow:0 10px 30px rgba(6,40,66,.14);}
#instellingen .inst-card + .inst-card{margin-top:18px;}
#instellingen .cardhead{padding:20px 22px 14px;}
#instellingen .cardhead h2{margin:0;font-size:12px;font-weight:900;letter-spacing:.13em;
text-transform:uppercase;color:#8aa0b1;}
/* flex-wrap + min-width:0 overal: op een smalle telefoon mag niets de kaart
breder duwen dan het scherm (de select had een min-width van 200px). */
#instellingen .row{padding:18px 22px;border-top:1px solid #e4ebf1;display:flex;gap:20px;
align-items:flex-start;flex-wrap:wrap;}
#instellingen .inst-wrap,#instellingen .inst-kol,#instellingen .inst-card,
#instellingen .row .txt{min-width:0;}
#instellingen .inst-card{max-width:100%;}
#instellingen .cardhead + .row{border-top:none;}
#instellingen .row.kolom{flex-direction:column;align-items:stretch;gap:14px;}
#instellingen .row .txt{flex:1;min-width:0;}
#instellingen .row h3{margin:0 0 4px;font-family:var(--round);font-size:16.5px;font-weight:800;color:var(--ink);}
#instellingen .row p{margin:0;font-size:13.5px;line-height:1.5;color:#4a6478;font-weight:600;max-width:62ch;}
#instellingen .row p + p{margin-top:8px;}
/* 'experimenteel'-chipje achter een kopje: functie werkt, maar staat nog ter beoordeling. */
#instellingen .row h3 .exp{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
background:#fff4e0;color:#a35f00;border:1px solid #f2ddb8;
font-family:var(--sans,inherit);font-size:10.5px;font-weight:800;letter-spacing:.04em;
text-transform:uppercase;vertical-align:middle;}
/* Genesteld blok (flitssnelheid): grijs vlak dat vervaagt als flitsen uit staat. */
#instellingen .row.nested{background:#f4f8fb;flex-direction:column;gap:14px;}
#instellingen .row.nested.off{opacity:.42;pointer-events:none;}
#instellingen .ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
/* Segmented (Rustig · Gewoon · Snel) */
#instellingen .seg{display:flex;gap:6px;background:#e8eef4;padding:5px;border-radius:14px;width:max-content;}
#instellingen .seg button{padding:9px 16px;border:none;background:none;border-radius:10px;cursor:pointer;
font-family:var(--round);font-size:13.5px;font-weight:800;color:#4a6478;}
#instellingen .seg button[aria-pressed=true]{background:#fff;color:var(--blauw);box-shadow:0 2px 6px rgba(8,50,80,.14);}
/* Stepper naast de segmented */
#instellingen .stepper{display:flex;align-items:center;gap:6px;border:1px solid #e4ebf1;background:#fff;
border-radius:14px;padding:5px;margin:0;}
#instellingen .stepper .stepbtn{width:38px;height:38px;border-radius:10px;background:#f4f8fb;border:none;
font-size:19px;font-weight:800;color:#4a6478;cursor:pointer;}
#instellingen .stepper .stepbtn:hover:not(:disabled){background:#e6eef5;color:var(--blauw);}
#instellingen .stepper .stepval{min-width:86px;text-align:center;font-family:var(--round);font-size:15px;font-weight:800;color:var(--ink);}
/* a-A-schuif met gevulde balk tot de knop */
#instellingen .slider{display:flex;align-items:center;gap:14px;margin-top:16px;}
#instellingen .slider .a{font-size:14px;color:#8aa0b1;font-weight:800;font-family:var(--round);}
#instellingen .slider .A{font-size:24px;color:#4a6478;font-weight:800;font-family:var(--round);}
#instellingen .slider input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:26px;background:none;cursor:pointer;margin:0;}
#instellingen .slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;
background:linear-gradient(90deg,var(--blauw) var(--pct,50%),#dfe7ee var(--pct,50%));}
#instellingen .slider input[type=range]::-moz-range-track{height:6px;border-radius:99px;
background:linear-gradient(90deg,var(--blauw) var(--pct,50%),#dfe7ee var(--pct,50%));}
#instellingen .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
width:24px;height:24px;margin-top:-9px;border-radius:99px;background:#fff;border:3px solid var(--blauw);
box-shadow:0 2px 6px rgba(8,50,80,.25);}
#instellingen .slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:99px;
background:#fff;border:3px solid var(--blauw);box-shadow:0 2px 6px rgba(8,50,80,.25);}
#instellingen .chip{padding:8px 14px;border:none;border-radius:999px;background:#f4f8fb;cursor:pointer;
font-family:var(--round);font-size:13px;font-weight:800;color:#4a6478;}
#instellingen .chip[aria-pressed=true]{background:#e8f3fc;color:var(--blauw);}
#instellingen .hint{font-size:12.5px;color:#8aa0b1;font-weight:700;}
/* Autopilot uit → de tempo-keuze eronder vervaagt, net als de flitssnelheid. */
#instellingen #autoRow.uit #autoRegel,
#instellingen #autoRow.uit #autoSchuif{opacity:.42;pointer-events:none;}
#instellingen #autoRegel{margin-top:14px;}
#instellingen #autoSchuif{margin-top:12px;}
#instellingen #autoSchuif .a,#instellingen #autoSchuif .A{font-size:12px;color:#8aa0b1;}
/* Stemkeuze in het nieuwe jasje */
#instellingen .selrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
#instellingen .selrow select{appearance:none;flex:1 1 180px;min-width:0;padding:13px 40px 13px 15px;
border:1px solid #e4ebf1;border-radius:14px;font-family:var(--round);font-weight:700;font-size:14.5px;color:var(--ink);
background:#fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;}
#instellingen .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 17px;border-radius:14px;
border:1px solid #e4ebf1;background:#fff;color:var(--blauw);font-family:var(--round);font-size:13.5px;font-weight:800;cursor:pointer;}
#instellingen .btn:hover{background:#e8f3fc;}
#instellingen .btn svg{width:18px;height:18px;flex:none;}
#instellingen details.tip{margin-top:14px;border:1px solid #e4ebf1;border-radius:14px;background:#f4f8fb;padding:13px 16px;}
#instellingen details.tip summary{list-style:none;cursor:pointer;font-family:var(--round);font-size:14px;
font-weight:800;color:var(--blauw);display:flex;align-items:center;gap:9px;}
#instellingen details.tip summary::-webkit-details-marker{display:none;}
#instellingen details.tip summary svg{width:17px;height:17px;flex:none;}
#instellingen details.tip .stembeter{margin-top:10px;background:none;border:none;padding:0;}
#instellingen details.tip .stembeter p{font-size:13.5px;line-height:1.55;color:#4a6478;}
/* Voorbeeldpaneel */
#instellingen .inst-voorbeeld .cardhead{padding-bottom:4px;}
#instellingen .stage{margin:12px 18px 18px;background:#f4f8fb;border-radius:14px;padding:22px 18px;
display:grid;place-items:center;min-height:190px;position:relative;overflow:hidden;}
#instellingen .fit{max-width:100%;display:grid;place-items:center;}
#instellingen .woord{font-family:'Atkinson Hyperlegible',var(--round),system-ui;font-weight:800;color:var(--ink);
line-height:1;white-space:nowrap;transition:font-size .12s;}
/* De stippen hangen .24em ónder de letters. Zonder deze ruimte vielen ze bij een
grote lettergrootte buiten het vak (overflow:hidden) en verdwenen ze. */
#instellingen .woord.split{display:flex;gap:.28em;padding-bottom:.38em;}
#instellingen .woord.split span{position:relative;}
#instellingen .woord.split span::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
bottom:-.24em;width:.1em;height:.1em;border-radius:99px;background:currentColor;}
/* Na het flitsen komen dezelfde stippen in beeld als in het echte flitsscherm
(.dots-icon in beheer/oefening.css); het woord vervaagt niet naar niets. */
#instellingen .stippen{font-size:clamp(28px,5vw,52px);color:#94a3b8;letter-spacing:.15em;font-weight:400;}
#instellingen .pfoot{display:flex;gap:10px;padding:0 18px 18px;}
#instellingen .pfoot .btn{flex:1;justify-content:center;}
#instellingen .pfoot .btn.primary{background:var(--blauw);color:#fff;border-color:var(--blauw);}
#instellingen .pfoot .btn.primary:hover{background:#065ea6;}
#instellingen .summary{padding:0 22px 18px;display:flex;flex-direction:column;}
#instellingen .summary div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
color:#4a6478;font-weight:700;padding:9px 0;border-top:1px solid #e4ebf1;}
#instellingen .summary b{font-family:var(--round);font-weight:800;color:var(--ink);}
#instellingen .saved{display:flex;align-items:center;gap:8px;color:#bfe4d3;font-size:13px;font-weight:800;
font-family:var(--round);padding:15px 4px 0;opacity:0;transition:opacity .2s;}
#instellingen .saved.on{opacity:1;}
#instellingen .saved svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;}
/* Stemkeuze */
.stemkies{display:flex;gap:8px;align-items:center;}
.stemkies select{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:10px 12px;
font-family:var(--round);font-weight:700;font-size:14px;color:var(--ink);background:#fff;}
.stemtest{flex:none;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;
color:var(--blauw);border-radius:12px;padding:10px 13px;font-family:var(--round);font-weight:800;font-size:13px;cursor:pointer;}
.stemtest svg{width:16px;height:16px;}
.stemtest:disabled{color:#c2cdd8;cursor:default;}
.stemhint{margin:0;font-size:12px;font-weight:700;color:var(--muted);line-height:1.45;}
.stembeter{background:#f4f8fb;border:1.5px solid #dde7ef;border-radius:13px;padding:13px 15px;}
.stembeter p{margin:0;font-size:13px;font-weight:600;color:var(--slate);line-height:1.5;}
.stembeter b{font-weight:800;color:var(--ink);}
.stembeter-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;}
.stembtn{flex:1 1 auto;border:1.5px solid #cfe0f2;background:#fff;color:var(--blauw);border-radius:11px;
padding:10px 13px;font-family:var(--round);font-weight:800;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.stembtn:hover{background:#eaf3fa;}
.stemstap{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;}
.stemstap li{font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.5;}
.stemstap li b{font-weight:800;color:var(--ink);}
.stemstap-voet{margin:16px 0 0;padding-top:13px;border-top:1px solid #eef1f5;
font-size:12px;font-weight:700;color:var(--muted);line-height:1.45;}
.settx{flex:1;min-width:0;}
.settx b{font-family:var(--round);font-weight:700;font-size:15.5px;color:var(--ink);display:block;}
.settx>span{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin-top:3px;line-height:1.4;}
.switch{width:52px;height:30px;border-radius:999px;border:none;background:#cdd8e2;cursor:pointer;position:relative;flex:none;transition:background .16s;}
.switch.on{background:#0a6ca8;}
.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .16s;box-shadow:0 2px 5px -1px rgba(0,0,0,.3);}
.switch.on .knob{transform:translateX(22px);}
.stepper{display:flex;align-items:center;gap:12px;background:#f4f8fb;border:1.5px solid #dde7ef;border-radius:16px;padding:8px;}
.stepper .stepbtn{flex:none;width:52px;height:52px;border-radius:12px;border:none;background:#fff;color:#0a6ca8;font-family:var(--round);font-weight:800;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(20,45,70,.3);}
.stepper .stepbtn:active{background:#0a6ca8;color:#fff;}
.stepper .stepbtn:disabled{opacity:.35;cursor:default;box-shadow:none;}
.stepval{flex:1;text-align:center;font-family:var(--round);font-weight:800;font-size:22px;color:var(--ink);white-space:nowrap;}
.stepval .sv{color:#0a6ca8;}
.rewardinput{width:100%;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);border:1.5px solid #dde7ef;border-radius:12px;padding:12px 14px;}
.rewardinput:focus{outline:none;border-color:#0a6ca8;box-shadow:0 0 0 3px rgba(10,108,168,.12);}
/* moeilijke woordjes */
.mwgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px;}
.mw{position:relative;background:#fff;border:1.5px solid #f1d8d1;border-radius:12px;padding:12px 8px;text-align:center;font-family:var(--round);font-weight:700;font-size:15px;color:#bb4a3d;box-shadow:0 8px 18px -14px rgba(20,45,70,.3);}
/* School-ontdekt woordje/klank: subtiel schoolicoontje rechtsboven (data-w/-k houdt de tekst schoon). */
.mw--school,.kc--school{border-color:#bcd2fa;}
.schoolico{width:15px;height:15px;fill:#2558a0;}
.mw--school .schoolico,.kc--school .schoolico{position:absolute;top:-6px;right:-6px;width:19px;height:19px;padding:2px;border-radius:50%;background:#eef4fe;box-shadow:0 2px 5px -1px rgba(20,45,70,.28);}
.kc--school{position:relative;}
.mwlegend{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 13px;font-size:13px;font-weight:600;color:#2558a0;background:#eef4fe;border:1px solid #cfe0fa;border-radius:11px;}
.mwlegend .schoolico{position:static;width:17px;height:17px;flex:0 0 auto;}
.mwchips{display:flex;flex-wrap:wrap;gap:8px;}
.mwchips .kc{font-weight:800;font-size:15px;background:#fcf2e0;color:#b3760f;border:1.5px solid #f3e0bb;border-radius:9px;padding:7px 14px;}
.device.ipad .mwgrid{grid-template-columns:repeat(5,1fr);}
/* beloningsdoel */
.goalcard{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:16px 18px;margin-top:16px;box-shadow:0 10px 22px -10px rgba(13,55,95,.24), 0 2px 5px -2px rgba(13,55,95,.12);}
.goalcard .gcico{font-size:38px;flex:none;line-height:1;}
.goalcard .gctx{flex:1;min-width:0;}
.goalcard .gctop b{font-family:var(--round);font-weight:700;font-size:16px;color:var(--ink);}
.goalcard .gcbar{height:10px;border-radius:99px;background:#eef2f6;overflow:hidden;margin:9px 0 7px;}
.goalcard .gcbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e0a046,#e0892a);}
.goalcard .gcsub{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;color:var(--muted2);}
.goalcard .gcsub b{color:var(--ink);}
.goalcard .gcsub span:nth-child(2){color:#c9842f;}
/* prijzenkast */
.prizes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.prize{background:#fff;border-radius:16px;padding:15px 10px 13px;text-align:center;box-shadow:0 8px 18px -14px rgba(20,45,70,.3);}
.prize .pz{font-size:30px;line-height:1;}
.prize .pzrobot{width:100%;max-width:96px;height:auto;display:block;margin:0 auto;}
.prize b{display:block;font-family:var(--round);font-weight:700;font-size:13.5px;color:var(--ink);margin-top:8px;line-height:1.2;}
.prize .pzs{display:block;font-size:10.5px;font-weight:700;color:#1f8a52;margin-top:4px;}
.prize.locked{opacity:.55;filter:grayscale(.5);}
.prize.locked .pzs{color:var(--muted2);}
/* Snuffels = uitdagende variant: exclusiever (paars/goud + glow) i.p.v. rustig anker-blauw */
#snuffelGrid .prize{background:linear-gradient(165deg,#f6f1ff 0%,#fff 70%);border:1.5px solid #e4d8f6;}
#snuffelGrid .prize:not(.locked){box-shadow:0 0 0 1.5px #e7c14a, 0 10px 22px -12px rgba(124,108,214,.6);}
#snuffelGrid .prize:not(.locked) .pzs{color:#7c52c9;}
#snuffelGrid .prize .pzs{color:#9a86c4;}
/* ── Prijzenkast: print/deel-knoppen ── */
.pk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.pk-printbtn{flex:1 1 auto;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;
font-family:var(--round);font-weight:800;font-size:12.5px;border-radius:12px;padding:10px 12px;cursor:pointer;white-space:nowrap;}
.pk-printbtn:hover{background:rgba(255,255,255,.24);}
.pk-hint{align-self:center;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);line-height:1.3;}
.pk-plank .prize:not(.prize-add){cursor:pointer;}
/* ── Prijzenkast: tabs + thematische planken (vitrine-gevoel) ── */
.pk-tabs{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 0;padding-bottom:4px;}
.pk-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid #e3ecf3;background:#fff;border-radius:14px;padding:8px 12px;cursor:pointer;font-family:var(--round);font-weight:800;font-size:11px;color:var(--slate);min-width:60px;}
.pk-tab .pkt-ic{font-size:20px;line-height:1;}
.pk-tab.on{background:#0a6ca8;color:#fff;border-color:#0a6ca8;box-shadow:0 8px 18px -10px rgba(1,80,120,.6);}
.pk-plank{display:none;margin-top:14px;border-radius:20px;padding:16px 14px 18px;background:#eef4fa;}
.pk-plank.on{display:block;animation:fade .25s ease;}
.pk-plktitel{font-family:var(--round);font-weight:800;font-size:16px;color:var(--ink);margin:0 2px 12px;display:flex;flex-direction:column;gap:1px;}
.pk-plktitel small{font-weight:600;font-size:11.5px;color:var(--muted);}
.belmodus{display:inline-flex;align-items:center;gap:5px;margin:0 2px 12px;border:1.5px solid #cfe0ec;background:#fff;color:#0a6ca8;border-radius:999px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.belmodus:active{transform:translateY(1px);}
/* beloning-secties: 🎯 Nu bezig / ⏳ Hierna / ✅ Al verdiend */
.cad-sectie{margin:0 0 14px;}
.cad-sectie:last-child{margin-bottom:0;}
.cad-sectie-kop{font-family:var(--round);font-weight:800;font-size:13.5px;color:var(--ink);margin:0 2px 9px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
.cad-sectie-kop small{font-weight:600;font-size:11px;color:var(--muted);}
.cad-sectie--nu{background:linear-gradient(180deg,rgba(30,166,95,.09),rgba(30,166,95,0));border:1.5px solid rgba(30,166,95,.3);border-radius:16px;padding:12px 12px 4px;}
.cad-sectie--nu .cad-sectie-kop{color:#1a9257;}
.cad-sectie--behaald .cad-sectie-kop{color:#1f7a4d;}
.cad-sectie--hierna{opacity:.96;}
/* ◀/▶ links en rechts van de beloning om de wachtrij-volgorde te bepalen (alleen 'Hierna') */
.cad-sectie--hierna .prize-eigen{padding-left:28px;padding-right:28px;}
.prize-eigen .bel-arr{position:absolute;top:50%;transform:translateY(-50%);width:23px;height:32px;display:grid;place-items:center;border:none;border-radius:8px;background:rgba(10,108,168,.1);color:#0a6ca8;font-size:12px;font-weight:800;cursor:pointer;line-height:1;z-index:2;}
.prize-eigen .bel-arr-l{left:3px;}
.prize-eigen .bel-arr-r{right:3px;}
.prize-eigen .bel-arr[disabled]{opacity:.22;cursor:default;}
.prize-eigen .bel-arr:not([disabled]):active{transform:translateY(-50%) scale(.9);}
/* grotere collectible-kaarten */
.pk-plank .prizes{grid-template-columns:repeat(3,1fr);gap:12px;}
.pk-plank .prize{position:relative;padding:16px 10px 14px;border-radius:18px;}
.pk-plank .prize .pz{font-size:38px;}
.pk-plank .prize .pzrobot{max-width:104px;}
.pk-plank .prize b{font-size:13px;}
.pk-plank .prize.locked::after{content:'🔒';position:absolute;top:6px;right:8px;font-size:13px;opacity:.75;}
/* per-categorie sfeer */
.pk-plank[data-cat="oefenhelden"]{background:linear-gradient(165deg,#fff5e6,#fdfaf3);}
.pk-plank[data-cat="kampioen"]{background:linear-gradient(165deg,#fff7e0,#fffdf5);}
.pk-plank[data-cat="verhalen"]{background:linear-gradient(165deg,#eaf6ef,#f7fdf9);}
.pk-plank[data-cat="medailles"]{background:linear-gradient(165deg,#fdf3e0,#fffdf6);}
.pk-plank[data-cat="ankers"]{background:linear-gradient(165deg,#e7f2fb,#f5fbff);}
.pk-plank[data-cat="snuffels"]{background:linear-gradient(165deg,#f1e9fb,#faf7ff);}
.pk-plank[data-cat="verrassingen"]{background:linear-gradient(165deg,#fdeef4,#fff8fb);}
.device.ipad .pk-plank .prizes{grid-template-columns:repeat(4,1fr);}
.device.ipad .prizes{grid-template-columns:repeat(4,1fr);}
/* ── bottom nav ── */
.nav{flex:none;min-height:60px;background:#053f63;border-top:1px solid rgba(255,255,255,.22);display:flex;align-items:center;padding:4px 10px;box-shadow:0 -8px 20px -10px rgba(0,0,0,.4);}
.nav button{flex:1;border:none;background:none;font-family:inherit;cursor:pointer;display:flex;justify-content:center;}
.nav .nav-fun{display:flex;} /* op mobiel staat Video's in de nav (op de plek van Berichten) */
.nav #notifBtn{display:none;} /* Berichten op mobiel via het ☰-menu, niet in de nav */
.nav .nvi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 8px;border-radius:14px;color:#d3e6f4;transition:all .14s;min-width:54px;}
.nav button .ni{font-size:21px;line-height:1;}
.nav button .ni svg{width:22px;height:22px;}
.nav button .nl{font-weight:800;font-size:11.5px;}
.nav .ni-notif{position:relative;}
.nav button:hover .nvi{background:transparent;color:#fff;}
.nav button.on .nvi{background:rgba(255,255,255,.07);color:#fff;}
.nav button.on .nl{color:#7ec4ec;}
/* ── handoff overlay ── */
.pvwords .pvsec{grid-column:1/-1;font-family:var(--round);font-weight:700;font-size:13px;color:#5a6775;padding:8px 2px 2px;}
/* letters/klanken-kiezer = volwaardig scherm: zelfde blauwe gradient, koptekst en footer als #flits */
.letterpick{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;background:linear-gradient(180deg,#0a6ca8 0%,#08608f 100%);padding:6px 18px 20px;}
.letterpick.on{display:flex;}
.lpcard{flex:1;min-height:0;background:transparent;border-radius:0;display:flex;flex-direction:column;overflow:hidden;box-shadow:none;}
.lphead{display:flex;align-items:center;gap:6px;background:transparent;color:#fff;font-family:var(--round);font-weight:700;font-size:21px;text-align:left;padding:6px 2px 10px;border-bottom:1px solid rgba(255,255,255,.16);}
.lphead-tx{display:flex;flex-direction:column;min-width:0;}
.lpgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:16px;align-content:start;}
.lpgrid button{background:#fff;border:1.5px solid #e4edf4;border-radius:12px;padding:14px 6px;font-family:var(--round);font-weight:700;font-size:18px;color:#9aa7b1;cursor:pointer;}
.lpgrid button.sel{background:#0a6ca8;color:#fff;border-color:#0a6ca8;box-shadow:0 6px 14px -8px rgba(1,80,120,.7);}
.lpbtns{display:flex;gap:11px;justify-content:flex-end;padding:14px 2px 4px;border-top:none;}
.lpsec{border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;font-family:inherit;font-weight:800;font-size:15px;border-radius:12px;padding:13px 22px;cursor:pointer;}
.lpsec:hover{background:rgba(255,255,255,.22);}
.lppri{border:none;background:#fff;color:#0a6ca8;font-family:inherit;font-weight:800;font-size:15px;border-radius:12px;padding:13px 26px;cursor:pointer;}
.lppri:hover{filter:brightness(.97);}
.device.ipad .lpgrid{grid-template-columns:repeat(8,1fr);}
/* klanken-/letters-kiesscherm: gegroepeerd (deelt .letterpick/.lpcard/.lphead/.lpbtns) */
.kptools{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 2px 0;flex:none;}
.lpspacer{flex:1;}
.lptitle{display:block;}
.lpsub{display:none;} /* didactische subregel: alleen op iPad (zie media-query) */
.kpcount{font-size:13px;font-weight:800;color:#fff;}
.kplink{background:none;border:none;color:rgba(255,255,255,.8);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;padding:6px 2px;}
.kplink:hover{color:#fff;text-decoration:underline;}
.kpgroups{flex:1;overflow:auto;padding:12px 2px 16px;display:flex;flex-direction:column;gap:10px;}
/* groep-header = toggle voor de hele groep/kern; accentkleur per groep via --acc */
.kpgroup-h{display:flex;align-items:center;gap:7px;width:100%;text-align:left;font-family:var(--round);font-weight:800;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--blauw-d);background:#d7e7f5;border:1.5px solid transparent;border-radius:9px;padding:7px 10px;margin-bottom:8px;cursor:pointer;}
.kpgroup-h:hover{background:#cbe0f2;}
.kpgroup-naam{flex:1;min-width:0;}
.kpgroup-hier{flex:none;font-size:10px;font-weight:800;text-transform:none;letter-spacing:0;color:#fff;background:#0a6ca8;border-radius:999px;padding:2px 8px;}
.kpgroup-tgl{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #cdd9e3;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#0a6ca8;}
.kpgroup.grp-vol .kpgroup-tgl{background:#0a6ca8;border-color:#0a6ca8;color:#fff;}
.kpgroup.grp-vol .kpgroup-tgl::after{content:'✓';}
.kpgroup.grp-deel .kpgroup-tgl{border-color:#0a6ca8;}
.kpgroup.grp-deel .kpgroup-tgl::after{content:'–';}
.kpgroup-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
/* niet geselecteerd: zacht grijsblauw, weinig contrast · hover: blauwe rand · geselecteerd: springt eruit (wit + blauwe rand + ✓) */
.kpchip{position:relative;background:#eaf0f7;border:1px solid #dce7f2;border-radius:12px;padding:13px 4px;font-family:var(--round);font-weight:800;font-size:16px;color:#33485c;cursor:pointer;transition:border-color .12s,background .12s,color .12s,box-shadow .12s;}
.kpchip:hover{border-color:#0a6ca8;}
.kpchip.sel{background:#fff;color:#0a6ca8;border:1.5px solid #0a6ca8;box-shadow:0 3px 10px -6px rgba(1,80,120,.4);}
.kpchip.sel::after{content:'✓';position:absolute;top:2px;right:5px;font-size:9px;font-weight:900;color:#0a6ca8;opacity:.9;}
.lppri:disabled{background:#cdd8e1;cursor:default;box-shadow:none;}
.device.ipad .kpgroup-chips{display:flex;flex-wrap:wrap;gap:14px;}
.preview{position:absolute;inset:0;z-index:55;display:none;flex-direction:column;}
.prize.goalable{cursor:pointer;}
.prize.goalable:hover{box-shadow:0 12px 24px -14px rgba(13,55,95,.4);}
/* feest-overlay over het eindscherm: nieuwe prijs verdiend (met confetti) */
.prijsov{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;}
.po-scrim{position:absolute;inset:0;background:rgba(20,45,70,.5);backdrop-filter:blur(3px);}
.po-card{position:relative;z-index:2;background:#fff;border-radius:24px;padding:22px 24px 20px;width:340px;max-width:92%;text-align:center;box-shadow:0 40px 90px -28px rgba(0,0,0,.6);animation:poPop .3s ease;}
@keyframes poPop{from{transform:scale(.8);opacity:0;}to{transform:none;opacity:1;}}
.po-conf{font-size:30px;line-height:1;}
.po-kop{font-family:var(--round);font-weight:800;font-size:22px;color:var(--blauw);margin:2px 0 14px;}
.po-badge{width:140px;height:140px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,#fff7e0,#f6e0a8);border:5px solid #e7c14a;box-shadow:0 0 0 6px #fff,0 0 40px 8px rgba(212,160,23,.45);}
.po-badge .po-em{font-size:74px;line-height:1;}
.po-badge .po-img{width:104px;height:auto;}
.po-naam{font-family:var(--round);font-weight:800;font-size:22px;color:var(--ink);margin-top:14px;}
.po-crit{font-size:13px;font-weight:600;color:var(--muted);margin-top:6px;line-height:1.4;}
.po-rij{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:8px 0 2px;}
.po-mini{width:84px;}.po-mini .po-em{font-size:42px;line-height:1;}.po-mini .po-img{width:54px;height:auto;}
.po-mini span{display:block;font-size:11px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.2;}
.po-ok{margin-top:18px;border:none;background:var(--blauw);color:#fff;font-family:var(--round);font-weight:800;font-size:16px;border-radius:14px;padding:12px 30px;cursor:pointer;}
.po-ok:hover{background:var(--blauw-d);}
/* Terughoudend: resetten is een ouder-actie, geen kind-actie. */
.po-reset{display:block;margin:11px auto 0;border:1.5px solid var(--line);background:#fff;color:var(--slate);
font-family:var(--round);font-weight:800;font-size:12.5px;border-radius:11px;padding:8px 14px;cursor:pointer;}
.po-reset:hover{border-color:#e3b3a8;color:#b4503c;}
.po-kast{display:block;margin:10px auto 0;border:none;background:none;color:var(--slate);font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:underline;}
.po-badge.po-badge--locked{filter:grayscale(.6);opacity:.75;background:radial-gradient(circle at 50% 42%,#eef2f6,#dde6ee);border-color:#cdd9e3;box-shadow:0 0 0 6px #fff;}
.po-prog{margin-top:10px;font-family:var(--round);font-weight:800;color:var(--blauw);font-size:16px;}
.po-bar{height:12px;max-width:230px;margin:16px auto 0;border-radius:99px;background:#eef2f6;overflow:hidden;}
.po-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e0a046,#e0892a);}
.po-eis{display:inline-block;margin-top:6px;font-size:12px;color:var(--muted2);}
.po-vraag{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.45;}
.po-confetti{position:absolute;inset:0;z-index:1;pointer-events:none;}
.po-confetti i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:.92;animation:poFall linear forwards;}
@keyframes poFall{0%{transform:translateY(-16px) rotate(0);}100%{transform:translateY(115vh) rotate(720deg);}}
/* print-keuze grafiek (alleen grafiek / + gegevens) */
.vpk{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:18px;}
.vpk-scrim{position:absolute;inset:0;background:rgba(20,45,70,.45);backdrop-filter:blur(2px);}
.vpk-card{position:relative;width:330px;max-width:100%;background:#fff;border-radius:18px;padding:18px;box-shadow:0 40px 90px -30px rgba(20,45,70,.6);}
.vpk-card h3{margin:0;font-family:var(--round);font-size:17px;color:var(--ink);}
.vpk-card p{margin:4px 0 14px;font-size:13px;font-weight:600;color:var(--muted);}
.vpk-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid #e4edf4;background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:9px;cursor:pointer;font-family:inherit;}
.vpk-opt:hover{border-color:var(--blauw);background:#f4f9fc;}
.vpk-ic{font-size:24px;flex:none;}
.vpk-tx b{display:block;font-family:var(--round);font-weight:800;font-size:14.5px;color:var(--ink2);}
.vpk-tx span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:1px;}
.vpk-cancel{width:100%;border:none;background:none;color:var(--slate);font-family:inherit;font-weight:800;font-size:13.5px;padding:8px;cursor:pointer;margin-top:2px;}
.goalset{position:absolute;inset:0;z-index:66;display:none;align-items:center;justify-content:center;padding:18px;}
.goalset.on{display:flex;}
.gsscrim{position:absolute;inset:0;background:rgba(20,45,70,.45);backdrop-filter:blur(2px);}
.gsmodal{position:relative;width:360px;max-width:100%;max-height:calc(100% - 28px);display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(20,45,70,.6);}
.gshead{position:relative;flex:none;background:#0a6ca8;color:#fff;font-family:var(--round);font-weight:700;font-size:17px;padding:16px 20px;text-align:center;}
.gsbody{padding:18px 20px;overflow-y:auto;min-height:0;}
.gs-del{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:none;border-radius:9px;color:#fff;opacity:.85;cursor:pointer;}
.gs-del:hover{opacity:1;background:rgba(255,255,255,.28);}
.gs-del svg{width:16px;height:16px;}
.gsbody p{font-size:13.5px;font-weight:600;color:var(--slate);margin:0 0 12px;}
.gsbody select{width:100%;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--ink);background:#f4f8fb;border:1.5px solid #dde7ef;border-radius:11px;padding:12px 14px;cursor:pointer;}
.gsbtns{flex:none;display:flex;gap:11px;justify-content:flex-end;padding:14px 20px 18px;border-top:1px solid #eef1f5;}
.gssec{border:1.5px solid #dde7ef;background:#fff;color:var(--slate);font-family:inherit;font-weight:800;font-size:14px;border-radius:11px;padding:11px 18px;cursor:pointer;}
.gspri{border:none;background:#0a6ca8;color:#fff;font-family:inherit;font-weight:800;font-size:14px;border-radius:11px;padding:11px 22px;cursor:pointer;}
/* eigen-cadeau-modal velden */
.cad-lbl{display:block;font-size:11.5px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 5px;}
.cad-lbl:first-child{margin-top:0;}
.cad-input{width:100%;box-sizing:border-box;font-family:inherit;font-weight:700;font-size:15px;color:var(--ink);background:#f4f8fb;border:1.5px solid #dde7ef;border-radius:11px;padding:11px 13px;}
.cad-input:focus{outline:none;border-color:#0a6ca8;}
.cad-emojis{display:flex;flex-wrap:wrap;gap:7px;}
.cad-emoji{width:42px;height:42px;border:1.5px solid #dde7ef;background:#fff;border-radius:11px;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cad-emoji.on{border-color:#0a6ca8;background:#eaf3fa;box-shadow:0 0 0 2px #cfe3f3 inset;}
/* eigen-cadeau-tegels + toevoeg-tegel in de Verrassingen-plank */
.prize.prize-eigen{cursor:pointer;}
.prize.prize-add{cursor:pointer;background:transparent;border:2px dashed #c7b27a;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9a8534;font-family:var(--round);font-weight:800;min-height:96px;}
.prize.prize-add .pz{font-size:30px;}
/* Beloning-editor: snelkeuze-chips, 3 criteria-rij, zakgeld, uitgeven + keer-badge */
.cad-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.cad-sugg[hidden]{display:none;}
.cad-suggchip{border:1px solid #dde7ef;background:#f4f8fb;color:var(--ink2);font-family:inherit;font-weight:700;font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer;}
.cad-suggchip:hover{background:#eaf3fb;border-color:#bcd6ea;}
.cad-crit{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.cad-crit .cad-critcol{display:flex;flex-direction:column;gap:4px;margin:0;}
.cad-crit .cad-critcol>span{font-size:10.5px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.02em;}
.cad-crit .cad-input{text-align:center;padding:10px 6px;}
.cad-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;background:#eef4f9;border-radius:12px;padding:10px 12px;}
.cad-status[hidden]{display:none;}
.cad-status-tx{font-size:12.5px;font-weight:700;color:var(--ink2);min-width:0;}
.cad-claim{flex:none;border:none;background:#147a40;color:#fff;font-family:var(--round);font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;}
.cad-claim[hidden]{display:none;}
/* Vergrendeld: velden grijs + slot-melding tot je via 'Wijzigen' ontgrendelt */
.cad-input:disabled{opacity:.7;background:#eef2f6;cursor:default;}
.goalset.cad-locked .cad-emojis,.goalset.cad-locked .cad-sugg{pointer-events:none;opacity:.5;}
.cad-locknote{margin-top:12px;background:#fff7e6;border:1px solid #f5e2b8;border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:700;color:#8a5a00;}
.cad-locknote[hidden]{display:none;}
.cad-locknote b{color:#6b4500;}
.prize-eigen{position:relative;}
.prize-eigen.niet-ingesteld{border:1.5px dashed #c7b27a;background:#fffdf6;opacity:.92;}
.prize-eigen.niet-ingesteld .pz{filter:grayscale(.35);opacity:.85;}
.prize-eigen.niet-ingesteld .pzs{color:#9a8534;font-weight:800;}
.prize-eigen .pz-edit{position:absolute;top:6px;left:8px;font-size:13px;line-height:1;color:var(--muted2);opacity:.55;}
.prize-eigen:hover .pz-edit{opacity:1;color:var(--blauw);}
.prize-eigen .pz-keer{position:absolute;top:7px;right:8px;background:#147a40;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;box-shadow:0 2px 6px -2px rgba(0,40,20,.5);}
.prize.prize-add b{font-size:12px;margin-top:2px;}
.preview.on{display:flex;}
.preview .pvscrim{display:none;}
.pvmodal{position:relative;width:100%;height:100%;background:#fff;display:flex;flex-direction:column;border-radius:0;overflow:hidden;box-shadow:none;max-height:none;}
.pvhead{background:#0a6ca8;color:#fff;font-family:var(--round);font-weight:700;font-size:18px;text-align:center;line-height:1.3;padding:20px;}
.pvwords{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;align-content:start;}
.pvwords span{background:#f4f8fb;border:1px solid #e4edf4;border-radius:10px;padding:10px 5px;font-family:var(--round);font-weight:600;font-size:14px;color:var(--ink2);text-align:center;cursor:pointer;}
.pvwords.selectable span{opacity:.45;}
.pvwords.selectable span.sel{opacity:1;background:#eaf3fa;border-color:#0a6ca8;color:#0a6ca8;}
.pvpager{display:none;}
.pvwords span:active{transform:scale(.96);}
.pvwords span.hard{color:#bb4a3d;text-decoration:underline;text-decoration-color:#e2674f;text-decoration-thickness:2px;text-underline-offset:2px;border-color:#f1d8d1;background:#fdf3f1;}
.device.ipad .pvwords{grid-template-columns:repeat(6,1fr);}
.pvpager{display:none;align-items:center;justify-content:center;gap:16px;border-top:1px solid #eef1f5;padding:12px;}
.pvnav{width:38px;height:38px;border:1px solid #dde7ef;background:#fff;border-radius:10px;cursor:pointer;color:#0a6ca8;font-size:17px;font-weight:800;}
.pvnav:hover{background:#f2f7fb;}
.pvpg{font-family:var(--round);font-weight:700;font-size:15px;color:var(--slate);min-width:54px;text-align:center;}
.pvbtns{display:flex;gap:11px;justify-content:flex-end;padding:0 20px 18px;}
.pvsec{border:1.5px solid #dde7ef;background:#fff;color:var(--slate);font-family:inherit;font-weight:800;font-size:15px;border-radius:12px;padding:13px 22px;cursor:pointer;}
.pvsec:hover{background:#f4f8fb;}
.pvpri{border:none;background:#0a6ca8;color:#fff;font-family:inherit;font-weight:800;font-size:15px;border-radius:12px;padding:13px 26px;cursor:pointer;display:flex;align-items:center;gap:9px;}
.pvpri:hover{background:#085880;}
.pvpri .play{width:0;height:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;}
/* ── flits-oefenscherm ── */
.pedit{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#0a6ca8;background:#eaf3fa;font-size:15px;flex:none;cursor:pointer;margin-right:2px;}
.pick .pedit:hover{background:#d9ebf7;}
.compose{position:absolute;inset:0;z-index:62;display:none;align-items:center;justify-content:center;padding:18px;}
.compose.on{display:flex;}
.cpscrim{position:absolute;inset:0;background:rgba(20,45,70,.45);backdrop-filter:blur(2px);}
.cpmodal{position:relative;width:380px;max-width:100%;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(20,45,70,.6);}
.cphead{background:#0a6ca8;color:#fff;font-family:var(--round);font-weight:700;font-size:17px;padding:16px 20px;text-align:center;}
.cpbody{padding:16px 18px;max-height:70vh;overflow-y:auto;}
.cpnaam{width:100%;box-sizing:border-box;border:1.5px solid #dde7ef;border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);}
.cpnaam:focus{outline:none;border-color:#0a6ca8;}
.cptip{margin:11px 0;background:#eef7fc;border:1px solid #d6ebf6;border-radius:11px;padding:10px 12px;font-size:12px;font-weight:600;color:#0a6ca8;line-height:1.45;}
.cpcount{font-size:11.5px;font-weight:800;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;}
.cpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;}
.cpgrid.is-scroll{max-height:38vh;overflow-y:auto;padding-right:2px;}
.cpchip{display:flex;align-items:center;gap:6px;background:#f4f8fb;border:1.5px solid #e2ecf3;border-radius:10px;padding:8px 8px 8px 11px;min-width:0;}
.cpchip-t{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cpchip-x{flex:none;width:22px;height:22px;border:none;background:#e3edf3;color:#6b7c89;border-radius:7px;font-size:15px;line-height:1;cursor:pointer;}
.cpchip-x:hover{background:#f6dada;color:#dc2626;}
.cpaddcell{display:flex;}
.cpaddinp{width:100%;box-sizing:border-box;border:1.5px dashed #c5d6e2;background:#fff;border-radius:10px;padding:8px 11px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);}
.cpaddinp:focus{outline:none;border-color:#0a6ca8;border-style:solid;}
.cpaddinp::placeholder{color:#9bb0c0;font-weight:700;}
.cpmsg{font-size:12.5px;font-weight:700;color:#dc2626;margin-top:8px;opacity:0;transition:opacity .15s;}
.cpmsg.on{opacity:1;}
.cpsaved{margin-top:14px;}
.cpsaved-h{font-size:11.5px;font-weight:800;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px;}
.cpsrow{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.cpsload{flex:1;min-width:0;text-align:left;border:1.5px solid #e2ecf3;background:#fff;border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cpsload:hover{border-color:#0a6ca8;background:#f4f9fc;}
.cpsload small{color:var(--slate);font-weight:600;}
.cpsdel{flex:none;border:1.5px solid #e2ecf3;background:#fff;border-radius:10px;padding:9px 10px;font-size:14px;cursor:pointer;}
.cpsdel:hover{border-color:#dc2626;}
.cpbtns{display:flex;gap:9px;justify-content:flex-end;padding:0 18px 18px;flex-wrap:wrap;}
.cpsec{border:1.5px solid #dde7ef;background:#fff;color:var(--slate);font-family:inherit;font-weight:800;font-size:13.5px;border-radius:11px;padding:10px 15px;cursor:pointer;}
.cppri{border:none;background:#2DBE72;color:#fff;font-family:inherit;font-weight:800;font-size:13.5px;border-radius:11px;padding:10px 16px;cursor:pointer;}
/* ── Eigen woordenlijsten (beheerscherm: overzicht + editor) ── */
.ew-nieuw{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:6px;border:none;cursor:pointer;font-family:var(--round);font-weight:800;font-size:15.5px;color:#fff;background:#0a6ca8;border-radius:14px;padding:14px;box-shadow:0 12px 24px -12px rgba(10,108,168,.5);}
.ew-nieuw .ew-plus{font-size:21px;line-height:1;}
.ew-nieuw:active{transform:translateY(1px);}
.ew-lijsten{margin-top:14px;display:flex;flex-direction:column;gap:11px;}
.ew-leeg{text-align:center;color:rgba(255,255,255,.85);font-weight:600;font-size:13.5px;line-height:1.55;padding:28px 12px;}
.ew-kaart{background:#fff;border-radius:16px;padding:14px 15px;box-shadow:0 14px 34px -22px rgba(13,55,95,.5);}
.ew-kaart-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px;}
.ew-kaart-naam{font-family:var(--round);font-weight:800;font-size:16px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ew-kaart-kern{flex:none;font-size:11.5px;font-weight:800;color:#0a6ca8;background:#eaf3fa;border:1px solid #d6e8f4;border-radius:999px;padding:3px 9px;white-space:nowrap;}
.ew-kaart-sub{font-size:12px;font-weight:700;color:var(--slate);margin-bottom:11px;}
.ew-kernlbl{color:#0a6ca8;}
.ew-kaart-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ew-act{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2ecf3;background:#fff;color:var(--ink2);font-family:inherit;font-weight:800;font-size:13px;border-radius:11px;padding:9px 13px;cursor:pointer;}
.ew-act:hover{border-color:#0a6ca8;}
.ew-act-pri{border:none;background:#2DBE72;color:#fff;}
.ew-act-pri:disabled{background:#cdd8e1;cursor:default;}
.ew-act-del{margin-left:auto;color:#b4505a;border-color:#f0d9dd;}
.ew-act-del:hover{border-color:#dc2626;color:#dc2626;}
/* editor */
.ew-naam{width:100%;box-sizing:border-box;margin-top:4px;border:1.5px solid #dde7ef;border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);background:#fff;}
.ew-naam:focus{outline:none;border-color:#0a6ca8;}
.ew-tip-toggle{margin:4px 0 0;background:none;border:none;padding:4px 2px;font-size:12.5px;font-weight:700;color:#0a6ca8;cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.ew-tip-toggle:hover{text-decoration:underline;}
.ew-tip{margin:8px 0 0;background:#eef7fc;border:1px solid #d6ebf6;border-radius:12px;padding:11px 13px;font-size:12.5px;font-weight:600;color:#0a6ca8;line-height:1.45;}
.ew-lbl{display:block;font-size:11.5px;font-weight:800;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;}
.ew-plak{width:100%;box-sizing:border-box;height:52px;border:1.5px solid #dde7ef;border-radius:12px;padding:0 14px;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);background:#fff;}
.ew-plak:focus{outline:none;border-color:#0a6ca8;}
.ew-toevoegen{margin-top:10px;width:100%;border:1.5px dashed #9cc0db;background:#fff;color:#0a6ca8;font-family:inherit;font-weight:800;font-size:14px;border-radius:12px;padding:11px;cursor:pointer;}
.ew-toevoegen:hover{border-style:solid;background:#f4f9fc;}
.ew-msg{font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border-radius:9px;margin-top:9px;padding:0 10px;max-height:0;overflow:hidden;opacity:0;transition:opacity .15s,max-height .15s,padding .15s;}
.ew-msg.on{opacity:1;max-height:60px;padding:8px 10px;}
.ew-count{font-size:11.5px;font-weight:800;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 7px;}
.ew-concl{margin-top:13px;background:#eef7fc;border:1px solid #d6ebf6;border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;color:#0a6ca8;line-height:1.45;}
/* Slim oefenen — catalogus (per anker / per categorie) */
.slim-toggle{display:flex;gap:6px;background:rgba(255,255,255,.14);border-radius:13px;padding:4px;margin:6px 0 2px;}
.slim-tg{flex:1;border:none;background:none;color:rgba(255,255,255,.85);font-family:var(--round);font-weight:800;font-size:13px;padding:9px;border-radius:10px;cursor:pointer;}
.slim-tg.on{background:#fff;color:var(--blauw);box-shadow:0 5px 11px -6px rgba(0,0,0,.35);}
.slim-info{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;color:#fff;line-height:1.45;margin:8px 0 2px;}
/* mobiel: niveau-balk op een eigen regel onder de titel (zie .device.ipad voor inline-rechts) */
#slim .shead{flex-wrap:wrap;}
.slim-niveau{display:flex;align-items:center;gap:8px;flex-basis:100%;margin:8px 0 0;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:8px 10px 8px 12px;}
.slim-niveau label{flex:none;}
.slim-niveau select{margin-left:auto;}
.slim-niveau label{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.92);}
.slim-niveau select{font-family:inherit;font-weight:800;font-size:13px;color:#0a6ca8;background:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;box-shadow:0 6px 14px -8px rgba(0,0,0,.35);}
.slim-kernlbl{flex:none;font-size:12px;font-weight:800;color:#0a6ca8;background:#e7f1f9;border:1px solid #cfe3f3;border-radius:7px;padding:3px 9px;}
.slim-cattabs{display:flex;gap:7px;overflow-x:auto;margin:8px 0 4px;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.slim-cattab{flex:0 0 auto;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;font-family:var(--round);font-weight:800;font-size:12.5px;padding:8px 13px;border-radius:11px;cursor:pointer;white-space:nowrap;}
.slim-cattab.on{background:#fff;color:var(--blauw);border-color:#fff;box-shadow:0 6px 12px -7px rgba(0,0,0,.35);}
.slim-lijst{margin-top:6px;}
.slim-kern{font-family:var(--round);font-weight:800;font-size:13px;color:#fff;opacity:.95;margin:16px 2px 8px;letter-spacing:.02em;}
.slim-kern:first-child{margin-top:4px;}
.slim-rij{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:#fff;border-radius:13px;padding:11px 13px;margin-bottom:8px;cursor:pointer;box-shadow:0 10px 24px -20px rgba(13,55,95,.6);font-family:inherit;}
.slim-rij:hover{box-shadow:0 12px 26px -16px rgba(13,55,95,.5);}
/* categoriekleur op de kaart (mobiel + iPad) — sneller scanbaar */
.slim-rij.slim-cat-verwarring{border-left:5px solid #e0892a;background:#fff8ef;}
.slim-rij.slim-cat-klank{border-left:5px solid #2f86c5;background:#f0f7fd;}
.slim-rij.slim-cat-cluster{border-left:5px solid #2f9a8e;background:#eff9f7;}
.slim-rij.slim-cat-structuur{border-left:5px solid #7c6cd6;background:#f5f3fd;}
.slim-rij.leeg{opacity:.5;cursor:default;}
.slim-tag{flex:none;font-size:10.5px;font-weight:800;color:#fff;border-radius:7px;padding:3px 8px;text-transform:uppercase;letter-spacing:.03em;}
.slim-klank{background:#0a6ca8;}
.slim-cluster{background:#2f9a8e;}
.slim-structuur{background:#7c6cd6;}
.slim-verwarring{background:#d9822b;}
.slim-nm{flex:1;min-width:0;font-family:var(--round);font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Per kern: waarde-kolom vast → categorie en aantal lijnen overal uit */
.slim-rij-kern .slim-val{flex:none;width:88px;font-family:var(--round);font-weight:800;font-size:16px;color:var(--ink);white-space:nowrap;}
.slim-rij-kern .slim-tag{flex:none;}
.slim-rij-kern .slim-n{margin-left:auto;}
.slim-n{flex:none;font-size:12px;font-weight:700;color:var(--slate);}
.slim-ar{flex:none;color:#c2cdd8;font-weight:900;font-size:16px;}
.slim-leeg{color:rgba(255,255,255,.85);font-weight:700;font-size:13.5px;text-align:center;padding:28px 12px;line-height:1.5;}
.ew-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;}
.ew-chips.is-scroll{max-height:34vh;overflow-y:auto;padding-right:2px;}
.ew-chips-leeg{grid-column:1/-1;color:rgba(255,255,255,.85);font-weight:600;font-size:12.5px;line-height:1.5;background:rgba(255,255,255,.08);border-radius:12px;padding:14px;text-align:center;}
.ew-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #e2ecf3;border-radius:10px;padding:8px 8px 8px 11px;min-width:0;}
.ew-chip-t{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ew-chip-k{flex:none;font-size:10px;font-weight:800;color:#0a6ca8;background:#e7f1f9;border:1px solid #d3e6f4;border-radius:6px;padding:1px 5px;}
.ew-chip-x{flex:none;width:22px;height:22px;border:none;background:#eef2f6;color:#6b7c89;border-radius:7px;font-size:15px;line-height:1;cursor:pointer;}
.ew-chip-x:hover{background:#f6dada;color:#dc2626;}
/* knoppenbalk onderaan — sticky zodat de knoppen altijd in beeld zijn (ook groot lettertype) */
.ew-foot{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;padding:12px 0 8px;background:linear-gradient(180deg,rgba(8,96,143,0) 0%,#08608f 32%);}
/* nieuwe elementen: alleen op iPad zichtbaar (zie media-query), telefoon ongemoeid */
.ew-foot-count,.ew-foot-sp,.ew-plak-ic,.ew-sub-kern{display:none;}
/* invoer-hint overal tonen (verduidelijkt: Enter = één woordje als chip) */
.ew-plak-hint{display:block;font-size:12.5px;font-weight:600;color:#6b7d8a;margin:8px 2px 0;line-height:1.4;}
.ew-btn{border:none;font-family:inherit;font-weight:800;font-size:13.5px;border-radius:12px;padding:12px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.ew-btn-sec{background:rgba(255,255,255,.16);color:#fff;}
.ew-btn-sec:hover{background:rgba(255,255,255,.26);}
.ew-btn-pri{background:#2DBE72;color:#fff;box-shadow:0 12px 22px -12px rgba(45,190,114,.6);}
.flitsrun{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;background:#c3ddf3;padding:30px 14px;}
.flitsrun.on{display:flex;}
.frcard{flex:1;min-height:0;background:#fff;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -28px rgba(13,55,95,.5);}
.frhead{background:#0a6ca8;color:#fff;display:flex;align-items:center;gap:10px;padding:16px 18px;}
.fruser{color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;}
.frtitle{flex:1;text-align:center;font-family:var(--round);font-weight:700;font-size:18px;}
.frclose{border:none;background:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;}
.frsub{background:#eef6fb;color:#243240;font-weight:700;font-size:14px;padding:12px 18px;border-bottom:1px solid #e4edf4;}
.frtime{height:4px;background:#e9eef3;}
.frtime i{display:block;height:100%;width:0;background:#3a9bd0;transition:width .9s linear, background .3s;}
.frtime i.warn{background:#e0892a;}
.frstage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;}
.frcount{font-weight:800;font-size:13px;color:rgba(255,255,255,.9);}
.frtools{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:8px;}
.frspk,.frT{border:1px solid #e4edf4;background:#fff;border-radius:10px;cursor:pointer;color:#7c8896;width:38px;height:38px;display:grid;place-items:center;}
.frspk svg{width:20px;height:20px;}
.frT{font-family:var(--round);font-weight:800;font-size:15px;display:none;}
.frT.on{color:#0a6ca8;border-color:#bcd9ef;background:#eaf3fa;}
.frhakbtn{margin:14px;border:1.5px solid #d6e6f3;background:#f0f7fb;color:#0a6ca8;border-radius:12px;padding:13px;font-family:var(--round);font-weight:700;font-size:15px;cursor:pointer;}
.frhakbtn:hover{background:#e3f0fa;}
.frhakbtn:active{transform:scale(.99);}
.frword{font-family:var(--round);font-weight:700;font-size:54px;color:#243240;text-align:center;padding:0 16px;}
.frword.dots{color:#c2cdd8;font-size:28px;letter-spacing:8px;}
.frword.hard{color:#bb4a3d;text-decoration:underline;text-decoration-color:#e2674f;text-decoration-thickness:3px;text-underline-offset:5px;}
.frctrls{display:flex;border-top:1px solid #e4edf4;}
.frbtn{flex:1;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px;color:#5a6775;font-family:inherit;}
.frbtn:hover{background:#f6f9fb;}
.frbtn .fri{width:54px;height:46px;border:1.5px solid #e4edf4;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#243240;}
.frbtn[data-fr=fout]:hover .fri{border-color:#e2674f;color:#bb4a3d;}
.frbtn[data-fr=juist]:hover .fri{border-color:#2f8a5b;color:#1f7a4d;}
.frbtn .frl{font-weight:800;font-size:12px;letter-spacing:.04em;}
.frbtn.on .fri{background:#eaf3fa;border-color:#0a6ca8;color:#0a6ca8;}
.frkeys{margin:14px 18px 18px;border:1px solid #e4edf4;border-radius:12px;padding:13px;text-align:center;font-weight:800;font-size:13px;color:#7c8896;}
/* ── handoff overlay ── */
.handoff{position:absolute;inset:0;z-index:50;background:rgba(36,50,64,.55);backdrop-filter:blur(3px);
display:none;align-items:center;justify-content:center;animation:fade .2s ease;}
.handoff.on{display:flex;}
.hmodal{background:#fff;border-radius:24px;padding:26px 26px 22px;width:340px;max-width:90%;text-align:center;box-shadow:0 40px 90px -30px rgba(20,45,70,.6);}
.hmodal .hmier{height:96px;width:auto;margin:-8px 0 2px;}
.hmodal h3{font-family:var(--round);font-weight:700;font-size:22px;color:var(--ink);margin:6px 0 0;}
.hmodal p{font-size:14px;font-weight:600;color:var(--muted);margin:8px 0 0;line-height:1.5;}
.hmodal .htag{display:inline-block;margin-top:14px;background:#eef6fb;color:#15618f;font-weight:800;font-size:13px;border-radius:999px;padding:6px 15px;}
.hmodal .hbtns{display:flex;gap:12px;margin-top:22px;}
.hmodal .hbtns button{flex:1;border:none;font-family:inherit;cursor:pointer;border-radius:14px;padding:14px;font-weight:800;font-size:15.5px;transition:all .14s;}
.hmodal .hsec{background:#f4f1ea;color:var(--ink2);}
.hmodal .hsec:hover{background:#ece7dd;}
.hmodal .hpri{background:var(--blauw);color:#fff;}
.hmodal .hpri:hover{background:var(--blauw-d);}
/* ── device switch ── */
.devswitch{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:flex;gap:3px;
background:rgba(255,255,255,.92);border:1px solid #d8e2ec;border-radius:999px;padding:4px;
box-shadow:0 6px 20px -10px rgba(20,45,70,.45);backdrop-filter:blur(4px);}
.devswitch button{border:none;background:none;font-family:var(--body);font-weight:800;font-size:13px;color:#5a6775;
padding:7px 17px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .14s;}
.devswitch button.on{background:#0a6ca8;color:#fff;}
.devswitch button svg{width:14px;height:14px;}
/* ── sidepanel (iPad dashboard) + topnav ── */
/* Telefoon: rechterkolom (incl. 'Jouw volgende stappen') verborgen — alleen op iPad zichtbaar */
.sidepanel{display:none;}
.sidepanel .spk-h{font-family:var(--round);font-weight:700;font-size:17px;color:#fff;margin:2px 0 2px;}
.sprow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.spcard{background:#fff;border-radius:16px;padding:15px 16px;box-shadow:0 10px 22px -10px rgba(13,55,95,.26), 0 2px 5px -2px rgba(13,55,95,.12);}
.spcard .spk{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);}
.spcard .spv{font-family:var(--round);font-weight:700;font-size:28px;color:#0a6ca8;margin-top:5px;line-height:1;}
.sp-contact{margin-top:auto;display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;border:none;background:#fff;color:#0a6ca8;border-radius:14px;padding:13px 15px;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer;text-align:left;box-shadow:0 10px 22px -10px rgba(13,55,95,.26), 0 2px 5px -2px rgba(13,55,95,.12);}
.sp-contact:hover{background:#f4f8fb;}
.sp-contact:active{transform:translateY(1px);}
.spcard .spv span{font-size:14px;color:var(--muted);font-weight:600;}
.spcard .spsub{font-size:12px;font-weight:600;color:var(--muted);margin-top:6px;line-height:1.35;}
/* "Deze week" in kindertaal — motiverende rijen i.p.v. cijfer-kaarten */
.spfun{display:flex;flex-direction:column;gap:11px;}
.spfun-row{display:flex;align-items:center;gap:13px;background:#fff;border-radius:16px;padding:15px 16px;font-family:var(--round);font-weight:700;font-size:16px;color:var(--ink);box-shadow:0 10px 22px -10px rgba(13,55,95,.26), 0 2px 5px -2px rgba(13,55,95,.12);}
.spfun-row .spfun-ic{font-size:25px;line-height:1;flex:none;}
.spfun-row .spfun-t b{font-size:21px;color:#0a6ca8;}
.spfun-row.done{background:#e7f4ec;}
.spfun-row.done .spfun-t b{color:#1f8a52;}
.sprec{display:flex;align-items:center;gap:12px;background:#0a6ca8;border:none;border-radius:16px;padding:15px 17px;cursor:pointer;text-align:left;width:100%;color:#fff;box-shadow:0 12px 24px -10px rgba(1,80,120,.55);}
.sprec .sprtx{flex:1;min-width:0;}
.sprec .sprl{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.82;}
.sprec .sprt{display:block;font-family:var(--round);font-weight:700;font-size:17px;margin-top:3px;}
.sprec .sparr{font-size:22px;opacity:.9;}
.topnav{display:none;}
.topnav button{border:none;background:#fff;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;color:#56636f;
display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;box-shadow:0 6px 16px -10px rgba(13,55,95,.32);transition:all .14s;}
.topnav button svg{width:18px;height:18px;}
.topnav button.on{background:#0a6ca8;color:#fff;box-shadow:0 8px 18px -8px rgba(1,80,120,.5);}
/* ── iPad weergave ── */
.device.ipad{border-radius:30px;}
.device.ipad .topbar{height:84px;padding:0 30px;}
.device.ipad .brand img{height:46px;}
.device.ipad .hamb{width:44px;height:44px;}
.device.ipad .hamb svg{width:24px;height:24px;}
.device.ipad .prof{padding:5px 15px 5px 5px;gap:9px;}
.device.ipad .prof .pav{width:30px;height:30px;font-size:14px;}
.device.ipad .prof .pnm{font-size:15px;}
.device.ipad .screen{max-width:660px;margin-inline:auto;}
.device.ipad #home{max-width:900px;}
.device.ipad .hero{padding:8px 2px 4px;}
.device.ipad .hero h1{font-size:29px;}
.device.ipad .hero .sub{font-size:16px;margin-top:3px;}
.device.ipad .hero .pnote{font-size:14px;margin-top:11px;}
.device.ipad .sidepanel{display:flex;flex-direction:column;gap:13px;}
.device.ipad .cards{gap:16px;margin-top:16px;}
.device.ipad .card{padding:20px;}
.device.ipad #homeCards .card{min-height:124px;}
.device.ipad .card .cico{width:50px;height:50px;}
.device.ipad .card .cico svg{width:26px;height:26px;}
.device.ipad .card h2{font-size:19px;}
.device.ipad .topnav{display:none;}
.device.ipad .nav{display:flex;}
.device.ipad .ankgrid{grid-template-columns:1fr 1fr 1fr;max-width:620px;margin-inline:auto;}
.device.ipad .frword{font-size:81px;}
.device.ipad #voortgang{max-width:1060px;}
.device.ipad .vchart{height:420px;}
.device.ipad .cs b{font-size:27px;}
.device.ipad .cs span{font-size:11px;}
/* ── iPad: flits-keuze — grotere tegels (touch-vriendelijk) ── */
.device.ipad .pickcat{font-size:13px;margin:14px 2px 0;}
.device.ipad #flits .pick, .device.ipad #cijfer .pick{padding:18px 18px;border-radius:18px;}
.device.ipad #flits .pick .pico, .device.ipad #cijfer .pick .pico{width:56px;height:56px;border-radius:16px;font-size:26px;}
.device.ipad #flits .pick .pico.pico-img img, .device.ipad #cijfer .pick .pico.pico-img img{width:60px;height:60px;}
.device.ipad #flits .pick .pn, .device.ipad #cijfer .pick .pn{font-size:18px;}
.device.ipad #flits .pick .pdsc, .device.ipad #cijfer .pick .pdsc{font-size:13.5px;margin-top:4px;}
.device.ipad #flits .pick .pcheck, .device.ipad #cijfer .pick .pcheck{width:30px;height:30px;font-size:16px;}
.device.ipad #flits .instr{padding:18px 22px;border-radius:20px;}
.device.ipad #flits .instr .imier{height:74px;}
.device.ipad #flits .instr .itx{font-size:18px;}
/* ── iPad: Slim oefenen — grotere rijen ── */
.device.ipad .slim-tg{font-size:14px;padding:12px;}
.device.ipad .slim-cattab{font-size:13.5px;padding:10px 16px;}
.device.ipad .slim-rij{padding:15px 17px;border-radius:15px;margin-bottom:0;gap:12px;}
.device.ipad .slim-tag{font-size:11.5px;padding:4px 10px;}
.device.ipad .slim-nm{font-size:17px;}
.device.ipad .slim-rij-kern .slim-val{font-size:18px;width:104px;}
.device.ipad .slim-kernlbl{font-size:12px;padding:3px 9px;}
.device.ipad .slim-n{font-size:13px;}
/* ── hamburger + drawer ── */
.hamb{width:30px;height:30px;border:none;background:rgba(255,255,255,.13);border-radius:9px;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;}
.hamb:hover{background:rgba(255,255,255,.22);}
.hamb svg{width:16px;height:16px;}
/* 9300 net als .switcher en .notifs: boven de flits-overlay (9100). Stond op 60, waardoor
het menu tijdens het eindscherm achter dat scherm opende en dus onbruikbaar was. Een
menukeuze roept showScreen() aan en die sluit de oefening netjes af. */
.drawer{position:absolute;inset:0;z-index:9300;display:none;}
.drawer.on{display:block;}
.drawer .dscrim{position:absolute;inset:0;background:rgba(20,45,70,.42);backdrop-filter:blur(2px);}
.dpanel{position:absolute;top:0;left:0;bottom:0;width:304px;max-width:85%;background:#fff;display:flex;flex-direction:column;
transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 0 50px -8px rgba(20,45,70,.55);}
.drawer.on .dpanel{transform:none;}
.dhead{background:#0a6ca8;color:#fff;padding:18px 16px 17px;display:flex;align-items:flex-start;gap:11px;}
.dhead--leeg{padding:10px 12px;justify-content:flex-end;}
.dhead .dschool{display:flex;align-items:center;gap:11px;flex:1;min-width:0;}
.dhead .dlogo{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:21px;flex:none;}
.dhead .dschool b{font-family:var(--round);font-weight:700;font-size:16px;display:block;line-height:1.15;}
.dhead .dschool span{font-size:12.5px;font-weight:600;opacity:.85;display:block;margin-top:2px;}
.dclose{width:30px;height:30px;border:none;background:rgba(255,255,255,.16);border-radius:9px;color:#fff;font-size:15px;cursor:pointer;flex:none;display:grid;place-items:center;}
.dclose:hover{background:rgba(255,255,255,.28);}
/* min-height:0 + overflow-y:auto — met de groepskopjes erbij is het menu hoger dan
het toestel (402x874), dus de drawer moet zelf kunnen scrollen. */
/* Geen -webkit-overflow-scrolling:touch: dat is sinds iOS 13 overbodig (momentum is
standaard) en zet de lijst in een eigen compositielaag, waar tikken op items soms
niet aankomt. */
.dmenu{padding:10px;display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto;}
/* Groepskopje (Oefenen / Account / Hulp) */
.dgroep{padding:0 12px;margin:13px 0 3px;font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);}
.dgroep:first-of-type{margin-top:2px;}
.ditem{display:flex;align-items:center;gap:13px;padding:13px 11px;border:none;background:none;font-family:inherit;font-weight:800;font-size:15px;color:var(--ink2);border-radius:12px;cursor:pointer;text-align:left;width:100%;}
.ditem[hidden]{display:none;} /* display:flex overschreef anders het hidden-attribuut → knop bleef zichtbaar */
/* Benadrukt menu-item (Rondleiding) */
.ditem--nadruk{background:linear-gradient(90deg,#eaf3fb,#f7fbff);border:1.5px solid #bcd9f2;color:#0a6ca8;box-shadow:0 6px 16px -10px rgba(10,80,140,.5);}
.ditem--nadruk .di{color:#0a6ca8;}
.ditem--nadruk .dchev{color:#0a6ca8;}
.ditem:hover{background:#f2f7fb;}
/* Uitloggen staat als laatste in de hulp-groep, maar hoort er niet echt bij:
een dun lijntje en wat lucht maken het los van Hulp/Contact/Privacy. */
.ditem--afsluit{margin-top:7px;padding-top:14px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;}
.ditem .di{width:34px;height:34px;border-radius:10px;background:#eaf3fa;color:#0a6ca8;display:grid;place-items:center;flex:none;}
.ditem .di svg{width:18px;height:18px;}
.ditem .dchev{margin-left:auto;color:#c2cdd8;font-weight:900;font-size:17px;}
.dfoot{padding:15px 18px;border-top:1px solid #eef1f5;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--muted2);}
.dfoot b{font-weight:800;color:var(--slate);}
/* Versie in de drawer-voet is een knop: tikken = app verversen (harde reset). */
.dversie{font-family:inherit;font-size:12px;font-weight:800;color:var(--slate);background:#f4f7fa;
border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer;flex:none;
display:inline-flex;align-items:center;gap:6px;}
.dversie .dvi{font-size:14px;line-height:1;color:#0a6ca8;}
.dversie:hover{background:#eaf3fa;border-color:#bcd9f2;color:#0a6ca8;}
.dversie:active{transform:translateY(1px);}
/* ════════════════════════════════════════════════════════════════════
INTEGRATIE-OVERRIDES (Klankenfontein thuis-app)
De patch was een designer-preview met een geschaald telefoon-frame
(#stage + .device). In de echte app draait alles full-screen, dus we
neutraliseren het frame en de scaling.
════════════════════════════════════════════════════════════════════ */
html,body{height:100%;height:100dvh;}
body{display:block;overflow:hidden;background:linear-gradient(180deg,#0a6ca8 0%,#08608f 100%);}
#stage{width:100%!important;height:100dvh;transform:none!important;}
.device{width:100%;max-width:none;height:100dvh;border-radius:0;box-shadow:none;}
/* preview-only chrome verbergen */
.devswitch{display:none!important;}
/* ── Inlogscherm (kindcode) ───────────────────────────────────────── */
.login{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;align-items:center;justify-content:center;
padding:24px;background:radial-gradient(900px 600px at 50% -10%, #0e76ad 0%, #0a6ca8 45%, #08608f 100%);}
.login.on{display:flex;}
.login-card{width:100%;max-width:360px;background:#fff;border-radius:24px;padding:30px 24px 26px;
box-shadow:0 30px 70px -25px rgba(10,40,70,.55);text-align:center;}
.login-logo{height:34px;width:auto;max-width:280px;margin:0 0 10px;display:block;} /* transparant woordmerk op het blauw, boven de kaart */
.login-tagline{margin:0 0 20px;max-width:340px;color:rgba(255,255,255,.9);font-size:13.5px;font-weight:700;text-align:center;line-height:1.45;}
.login-school{display:inline-block;margin-top:16px;color:rgba(255,255,255,.82);font-size:12.5px;font-weight:700;text-decoration:none;}
.login-school b{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px;font-weight:700;}
.login-school:hover b{border-bottom-color:#fff;}
.login-card h1{margin:0 0 4px;font-family:var(--round);font-size:21px;color:var(--ink);font-weight:800;}
.login-card p{margin:0 0 18px;color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.45;}
/* Desktop/iPad: logo + tagline groter en prominenter (à la start.html); mobiel blijft ongewijzigd. */
@media (min-width: 740px) {
.login-logo { height: 46px; max-width: 340px; margin-bottom: 14px; }
.login-tagline { font-size: 15.5px; max-width: 430px; margin-bottom: 26px; line-height: 1.5; }
.login-card { max-width: 400px; padding: 38px 34px 32px; }
#chooserExtra { max-width: 400px; }
.login-card h1 { font-size: 24px; }
.login-school { font-size: 13.5px; margin-top: 22px; }
}
.login-input{width:100%;border:2px solid var(--line);border-radius:14px;padding:14px 16px;font-family:var(--round);
font-size:20px;font-weight:800;color:var(--ink);text-align:center;letter-spacing:3px;text-transform:uppercase;outline:none;}
.login-input:focus{border-color:var(--blauw);}
/* E-mail/wachtwoord: normale tekst (de kindcode-stijl is uppercase + gespatieerd) */
.login-input--tekst{text-transform:none;letter-spacing:normal;text-align:left;font-size:16px;}
/* Tertiaire tekstlink (bv. "Account aanmaken", "of met e-mailadres") */
.login-tekstlink{display:block;width:100%;text-align:center;border:none;background:none;color:var(--blauw);
font-family:var(--round);font-weight:800;font-size:13.5px;cursor:pointer;padding:10px 4px;margin-top:8px;}
.login-tekstlink:hover{text-decoration:underline;}
/* "of met e-mailadres" is een volwaardig alternatief (geen Google/Apple nodig) —
iets steviger dan de overige tertiaire tekstlinks, die pas dieper in een flow zitten. */
#btnGebruikEmail{font-size:14.5px;margin-top:14px;text-decoration:underline;}
/* "Hoe wil je starten?"-keuzekaarten (3 entry points) */
.startkaart{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:2px solid var(--line);
border-radius:16px;padding:15px 16px;background:#fff;cursor:pointer;font-family:var(--round);margin-bottom:10px;
transition:border-color .15s,background .15s;}
.startkaart:hover{border-color:var(--blauw);background:var(--blauw-l,#eaf3fa);}
.startkaart-ico{font-size:24px;flex:none;line-height:1;}
.startkaart-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.startkaart-tx b{font-size:15px;font-weight:800;color:var(--ink);}
.startkaart-tx span{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.35;}
.startkaart-pijl{color:var(--muted);font-size:22px;flex:none;}
.startkaart--klein{padding:12px 16px;}
.startkaart--klein .startkaart-ico{font-size:20px;}
.startkaart--klein .startkaart-tx b{font-size:14px;}
/* Keuzescherm: alle kaarten gelijk — iconen in getinte, afgeronde vlakjes. */
#startChooser .startkaart-ico, #chooserExtra .startkaart-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:25px;background:#eef3f8;}
/* Tweede kaart (demo) op de blauwe achtergrond + footer-link eronder. */
#chooserExtra{width:100%;max-width:400px;margin:14px auto 0;text-align:center;}
#chooserExtra .startkaart{background:#fff;text-align:left;box-shadow:0 10px 26px -14px rgba(6,30,55,.5);}
.login-hint-link{background:none;border:none;color:rgba(255,255,255,.85);font-family:var(--round);font-weight:700;font-size:13px;cursor:pointer;padding:9px 12px;display:inline-flex;align-items:center;gap:7px;line-height:1;}
.login-hint-link svg{opacity:.9;}
.login-hint-link:hover{color:#fff;text-decoration:underline;}
/* Laadscherm (o.a. bij het openen van de demo-omgeving): KlankenFontein-tegel met pulse. */
.kf-laad{position:fixed;inset:0;z-index:99999;background:linear-gradient(170deg,#0a6ca8,#02597f);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.kf-laad[hidden]{display:none;} /* anders overschrijft display:flex de hidden-attribuut */
.kf-laad-tile{width:92px;height:92px;border-radius:23px;box-shadow:0 20px 48px -18px rgba(0,0,0,.5);animation:kf-puls 1.15s ease-in-out infinite;}
.kf-laad-tx{color:#fff;font-family:var(--round);font-weight:800;font-size:16.5px;letter-spacing:.01em;}
.kf-dots::after{content:'';display:inline-block;width:1.1em;text-align:left;animation:kf-dots 1.4s steps(1) infinite;}
@keyframes kf-puls{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.08);opacity:.9;}}
@keyframes kf-dots{0%{content:'';}25%{content:'.';}50%{content:'..';}75%,100%{content:'...';}}
.login-btn{margin-top:14px;width:100%;border:none;border-radius:14px;padding:15px;background:var(--blauw);color:#fff;
font-family:var(--round);font-weight:800;font-size:16px;cursor:pointer;}
.login-btn:disabled{opacity:.55;cursor:default;}
.login-fout{margin-top:12px;min-height:18px;color:#d7644f;font-size:13px;font-weight:700;}
.login-hint{margin-top:16px;font-size:12px;color:rgba(255,255,255,.85);font-weight:600;max-width:360px;text-align:center;}
.login-hint a{color:#fff;font-weight:800;}
/* Ouder-login (Stap 2): scheidingslijn + Google-knop, onder de kindcode. */
.login-of{display:flex;align-items:center;gap:10px;margin:18px 0 4px;color:var(--muted);font-size:12px;font-weight:700;}
.login-of::before,.login-of::after{content:"";flex:1;height:1px;background:var(--line);}
.login-ouder{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
border:2px solid var(--line);border-radius:14px;padding:13px;background:#fff;color:var(--ink);
font-family:var(--round);font-weight:800;font-size:14.5px;cursor:pointer;transition:border-color .14s;}
.login-ouder:hover{border-color:var(--blauw);}
.login-ouder:disabled{opacity:.55;cursor:default;}
.login-ouder svg{width:18px;height:18px;flex:none;}
.login-ouder-uitleg{margin:8px 0 0;color:var(--muted);font-size:12px;font-weight:600;line-height:1.4;text-align:center;}
/* Apple-knop: Apple's HIG = zwarte knop, wit logo + witte tekst. */
.login-apple{background:#000;border-color:#000;color:#fff;}
.login-apple:hover{border-color:#000;background:#111;}
.login-apple svg{width:17px;height:17px;}
.login-ouder-status{margin-top:10px;min-height:0;font-size:12.5px;color:var(--muted);font-weight:700;}
/* Herontwerp: kindcode primair, ouderaccount secundair (2 modus-knoppen + paneel) */
.login-subtekst{margin:8px 0 0;color:var(--muted);font-size:12.5px;font-weight:700;text-align:center;}
.login-ouder-intro{margin:8px 0 12px;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.4;text-align:center;}
.login-ouder-keuze{display:flex;gap:8px;}
.login-ouder-modeknop{flex:1;border:2px solid var(--line);border-radius:14px;padding:12px 8px;background:#fff;
font-family:var(--round);font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer;
transition:border-color .15s,background .15s,color .15s;}
.login-ouder-modeknop:hover{border-color:var(--blauw);}
.login-ouder-modeknop.is-active{border-color:var(--blauw);background:var(--blauw);color:#fff;}
.login-ouder-paneel{margin-top:4px;}
.login-of--klein{margin:14px 0 2px;font-size:11px;}
.login-ouder-terug{border:none;background:none;color:var(--blauw);font-family:var(--round);font-weight:800;font-size:13px;cursor:pointer;padding:0;margin:0 0 8px;display:inline-block;}
.login-ouder-titel{margin:0 0 4px;font-family:var(--round);font-size:18px;font-weight:800;color:var(--ink);}
.login-ouder-sub{margin:0 0 14px;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.45;}
/* Migratiebanner (Stap 4): aanmoediging voor anonieme gebruikers om een account te maken. */
.migbanner{display:flex;align-items:center;gap:12px;margin:0 14px 6px;padding:11px 12px;border-radius:14px;
background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(20,45,70,.4);}
.migbanner[hidden]{display:none;}
.miginfo{display:none;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:var(--blauw);font-family:var(--round);font-weight:800;font-size:12.5px;font-style:normal;
cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px -12px rgba(20,45,70,.4);}
/* Ingeklapt (na 3s): toon alleen het pilletje, verberg de rest van de banner. */
.migbanner.mini>:not(.miginfo){display:none;}
.migbanner.mini .miginfo{display:inline-flex;}
/* Telefoon: ingeklapte banner = fixed '🔒 Account'-pilletje rechtsboven (vrije topbar-ruimte). */
.device:not(.ipad) .migbanner.mini{position:fixed;top:9px;right:12px;z-index:60;width:auto;margin:0;padding:0;border:none;background:transparent;box-shadow:none;}
/* iPad/desktop: ingeklapte banner verbergen → #migPill in de topbar neemt het over (geen schermruimte). */
.device.ipad .migbanner.mini{display:none;}
/* '🔒 Account'-knopje in de topbar-rechtercluster (iPad/desktop), links van 'wissel kind'. */
.migpill{display:inline-flex;align-items:center;gap:5px;margin-right:8px;padding:6px 13px;border-radius:999px;border:none;
background:#fff;color:var(--blauw);font-family:var(--round);font-weight:800;font-size:12.5px;cursor:pointer;
white-space:nowrap;box-shadow:0 4px 12px -6px rgba(0,0,0,.4);}
.migpill[hidden]{display:none;}
/* Lichte toast (subtiele seintjes, bv. 'doe eerst de instaptoets'). */
.kf-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);
background:#0f2741;color:#fff;font-family:var(--round);font-weight:700;font-size:13.5px;line-height:1.35;
padding:11px 16px;border-radius:13px;box-shadow:0 12px 34px -10px rgba(0,0,0,.55);max-width:88vw;text-align:center;
z-index:9000;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
.kf-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.migtxt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.migtxt b{font-size:13.5px;color:var(--ink);font-weight:800;}
.migtxt span{font-size:11.5px;color:var(--muted);font-weight:600;}
.migbtn{flex:none;border:none;border-radius:10px;padding:9px 13px;background:var(--blauw);color:#fff;
font-family:var(--round);font-weight:800;font-size:12.5px;cursor:pointer;}
.migbtn:disabled{opacity:.55;cursor:default;}
.migclose{flex:none;border:none;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;padding:4px 6px;line-height:1;}
/* App pas tonen na inloggen (main.js zet .app-ready op ).
thuis.html heeft GEEN #stage-wrapper — het app-element is .device. Daarom hier .device
verbergen tot app-ready; anders paint de statische home heel even (split-second flash)
vóór de boot het loginscherm/app toont. Body is al blauw (regel 681) → naadloze tussenstaat. */
body:not(.app-ready) .device{visibility:hidden;}
/* ── leerling-wisselaar: extra knoppen (Fase 4) ── */
.swadd{opacity:.95;}
.swadd .swav{font-size:20px;font-weight:800;}
.switem .swdel{margin-left:8px;color:#c2cdd8;font-weight:900;font-size:15px;padding:4px 6px;border-radius:8px;}
.switem .swdel:hover{background:#fdeeea;color:#d7644f;}
/* ── Flits/lees-keuzes zijn 'tik = start' (geen selectie-stap) ──────────────
Het selectierondje (.pcheck) vervangen door een subtiele pijl, en de
.sel-achtergrond uitschakelen zodat er geen 'gekozen'-staat zichtbaar is. */
#flitsPicks .pick.sel, #leesPicks .pick.sel, #cfOnderdelen .pick.sel{border-color:var(--line);background:#fff;}
#flitsPicks .pick.sel .pico, #leesPicks .pick.sel .pico, #cfOnderdelen .pick.sel .pico{background:var(--soft);}
#flitsPicks .pick .pcheck, #leesPicks .pick .pcheck, #cfOnderdelen .pick .pcheck{
border:none;background:none;width:auto;height:auto;color:#c2cdd8;font-size:0;}
#flitsPicks .pick .pcheck::after, #leesPicks .pick .pcheck::after, #cfOnderdelen .pick .pcheck::after{
content:'\203A';font-size:22px;font-weight:800;}
/* ── Oefen-overlay laad-staat (zichtbaar tot oefening.html 'gereed' meldt) ── */
#thuisOefenOverlay .oef-loader{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;}
#thuisOefenOverlay .oef-loader img{width:84px;height:auto;animation:oef-bob 1.6s ease-in-out infinite;}
#thuisOefenOverlay .oef-spin{width:34px;height:34px;border-radius:50%;
border:4px solid rgba(1,104,155,.25);border-top-color:#01689b;animation:oef-spin .8s linear infinite;}
#thuisOefenOverlay .oef-loadtxt{font-family:var(--round);font-weight:800;color:#0b4a73;font-size:15px;}
@keyframes oef-spin{to{transform:rotate(360deg);}}
@keyframes oef-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
/* ════════════════════════════════════════════════════════════════════
TABLET/DESKTOP-LAYOUT (≥740px) — echte iPad/desktop-layout met linker-sidebar
i.p.v. een opgeschaald mobiel scherm. Geldt voor de hele .ipad-modus
(innerWidth ≥ 740 → ook iPad mini/Air in portret). Mobiel (<740px) blijft EXACT
zoals het was — alle regels hieronder zijn .device.ipad-scoped, dus telefoon
wordt niet geraakt.
════════════════════════════════════════════════════════════════════ */
@media (min-width: 740px) {
/* Bottom-nav → vaste verticale linker-sidebar, ONDER de topbar (84px) zodat
het logo + hamburger/drawer (instellingen, uitloggen) bereikbaar blijven. */
.device.ipad .nav {
position: fixed; left: 0; top: 84px; bottom: 0; width: 112px; height: auto;
flex-direction: column; justify-content: flex-start; align-items: stretch;
gap: 4px; padding: 16px 10px; border-top: none;
border-right: 1px solid rgba(255,255,255,.18);
box-shadow: 10px 0 26px -16px rgba(0,0,0,.5); z-index: 40;
}
.device.ipad .nav button { flex: none; width: 100%; }
.device.ipad .nav-fun { display: flex; } /* video-knop zichtbaar in de zijbalk */
.device.ipad .nav #notifBtn { display: flex; } /* Berichten blijft in de iPad/desktop-zijbalk */
.device.ipad #notifMenuBtn { display: none; } /* ...dus niet ook nog in het ☰-menu */
.device.ipad .nav .nvi { width: 100%; flex-direction: column; gap: 5px; padding: 12px 6px; min-width: 0; }
/* Inhoud naast de sidebar + veel breder (minder leeg blauw). */
.device.ipad .screens { padding-left: 112px; }
.device.ipad .migbanner { margin-left: 126px; } /* niet onder de vaste zijbalk vallen */
.device.ipad #home { max-width: 1340px; }
.device.ipad .screen { max-width: 1100px; }
.device.ipad #voortgang { max-width: 1340px; }
.device.ipad #ankers { max-width: 840px; }
/* Ankers desktop: smallere pagina (geen "zee van blauw"); 2 brede kaarten per rij
die de hele paginabreedte vullen (de oude grid-max-width geforceerd weg). */
.device.ipad #ankers .ankgrid { grid-template-columns: repeat(2, 1fr) !important; max-width: none !important; margin-inline: 0 !important; gap: 18px; margin-top: 8px; align-content: start; }
.device.ipad #ankers .anktile { min-height: 150px; }
.device.ipad #ankers .anktile-img { width: 42%; max-width: 190px; } /* grotere illustratie in de brede kaart */
.device.ipad #ankers .anktile[data-k="7"] .anktile-img { width: 30%; max-width: 120px; } /* catamaran (Anker 7) kleiner — paste niet */
.device.ipad #ankers .ankfeat { margin-bottom: 4px; } /* minder lucht onder "Anker start" */
.device.ipad #ankers .ankfeat-img { max-width: 150px; } /* eilandje iets kleiner op desktop */
.device.ipad #ankers .ankhead-robot { top: 4px; bottom: auto; width: 84px; z-index: 3; } /* vanaf bovenkant net onder de headerlijn → niet meer afgekapt */
.device.ipad #ankers .ankfoot { margin-top: 14px; position: static; background: none; padding-bottom: 0; } /* desktop: geen sticky/fade */
/* CTA met meer presence op desktop (ook in disabled-staat). */
.device.ipad .ankstart:disabled { background: #2c4a66; color: #cfe0ee; box-shadow: none; }
/* Logo iets groter in de desktop-header. */
.device.ipad .topbar .brand img { height: 52px; }
/* Hero als titel boven het paneel (geen losse blauwe balk). */
.device.ipad .hero { background: transparent; border-bottom: none; margin: 0 0 14px; padding: 6px 2px; }
/* Eén duidelijke dashboard-container i.p.v. losse eilandjes op het blauw. */
.device.ipad .homegrid {
display: grid; grid-template-columns: 1.8fr 1fr; gap: 22px; align-items: stretch;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
border-radius: 24px; padding: 22px;
box-shadow: 0 24px 60px -30px rgba(0,0,0,.5);
}
.device.ipad .hgmain{display:flex;flex-direction:column;gap:0;}
.device.ipad .hgmain .cards{margin-top:0;}
/* Compactere kaarten — meer info per scherm. */
.device.ipad .cards { gap: 12px; }
.device.ipad .card { padding: 14px 16px; }
.device.ipad .weekgoal { grid-column: 1 / -1; margin-top: 0; margin-bottom: 4px; }
/* Sidebar: actieve item (Home) duidelijker. */
.device.ipad .nav button.on .nvi { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.device.ipad .nav button.on .ni svg,
.device.ipad .nav button.on .nl { color: #fff; }
/* Topbar als nette header-grid: [hamburger boven sidebar] [logo] … [profiel].
Kolom 1 = exact de sidebarbreedte (112px) → hamburger gecentreerd erboven. */
.device.ipad .topbar { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 0; padding: 0 24px 0 0; }
.device.ipad .topbar .hamb { justify-self: center; }
.device.ipad .topbar .brand { padding-left: 8px; } /* ruimte tussen hamburger en logo */
.device.ipad .topbar .sp { display: none; } /* grid 1fr verzorgt de ruimte */
/* Header rechtsboven: profiel · instellingen · uitloggen. */
.device.ipad .topright { display: flex; align-items: center; gap: 8px; }
.device.ipad .tr-profile {
display: flex; align-items: center; gap: 9px; cursor: pointer;
border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
border-radius: 999px; padding: 4px 13px 4px 4px; color: #fff;
font-family: inherit; font-weight: 800; font-size: 13.5px;
}
.device.ipad .tr-profile:hover { background: rgba(255,255,255,.14); }
.device.ipad .tr-av {
width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0a6ca8;
display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; flex: none;
}
.device.ipad .tr-icon {
width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.device.ipad .tr-icon:hover { background: rgba(255,255,255,.14); }
.device.ipad .tr-icon svg { width: 18px; height: 18px; }
/* ── Flits-keuze: 2 kolommen, categorie-koppen over de volle breedte ── */
.device.ipad #flits, .device.ipad #cijfer { max-width: 880px; }
.device.ipad #flits .picklist:not(.wachten),
.device.ipad #cijfer .picklist:not(.wachten) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-top: 22px; }
.device.ipad #flits .pickcat, .device.ipad #cijfer .pickcat { grid-column: 1 / -1; }
/* ── Slim oefenen: info-card + 2-koloms oefeningen + categorie-kleuren ── */
.device.ipad #slim { max-width: 920px; }
.device.ipad #slim .slim-info { background: #eef6fc; border-color: #d4e6f3; color: #154f70; box-shadow: 0 10px 26px -20px rgba(13,55,95,.5); }
.device.ipad #slim .slim-info b { color: #0a4d72; }
/* iPad: niveau-combo inline rechts in de header (mobiel = eigen regel) */
.device.ipad #slim .shead { flex-wrap: nowrap; }
.device.ipad #slim .slim-niveau { flex-basis: auto; margin: 0 0 0 auto; }
.device.ipad #slim .slim-niveau select { margin-left: 0; }
/* punt 1: lichter content-paneel achter de lijst → minder vlak blauw */
.device.ipad #slim .slim-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 16px; }
/* punt 2: kaarten voelen klikbaar — schaduw + lift bij hover */
.device.ipad #slim .slim-rij { box-shadow: 0 10px 24px -18px rgba(13,55,95,.6); transition: transform .12s, box-shadow .12s; }
.device.ipad #slim .slim-rij:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(13,55,95,.55); }
/* punt 3: compacte segmented toggle i.p.v. brede balk */
.device.ipad #slim .slim-toggle { display: inline-flex; align-self: flex-start; }
.device.ipad #slim .slim-tg { flex: none; padding: 9px 18px; }
.device.ipad #slim .slim-cattabs,
.device.ipad #slim .slim-kern { grid-column: 1 / -1; }
/* subtiele tint + gekleurde rand per categorie (alleen op iPad) */
/* Flits niet als losse laag óver alles (modal), maar GEÏNTEGREERD in het
content-gebied: de flits-overlay begint onder de header (84px) en naast de
sidebar (112px), zodat die zichtbaar blijven. Het iframe vult dat gebied
(geen kaart, geen full-screen-takeover). School-apps blijven onaangeroerd. */
#thuisOefenOverlay { top: 84px !important; left: 112px !important; }
/* Instaptoets-runner (klas/instaptoets.js, #itOverlay): net als regulier flitsen in het
content-gebied i.p.v. full-screen, zodat de thuis-topbar + sidebar zichtbaar/bruikbaar blijven. */
#itOverlay { top: 84px !important; left: 112px !important; }
/* Lees-zinnenscherm (admin/leesflits.js, draait in de thuis-pagina): ook in het
content-gebied i.p.v. full-screen, zodat de thuis-header + sidebar blijven staan. */
.lf-overlay { top: 84px !important; left: 112px !important; }
/* Letters-/klanken-kiezer + woord-preview: ook in het content-gebied i.p.v.
full-screen, zodat header + sidebar zichtbaar blijven (geen rare takeover). */
.device.ipad .letterpick,
.device.ipad .preview { top: 84px; left: 112px; }
/* ── Letters/klanken-kiezer op iPad: rustiger, levendiger, didactische context ── */
/* 6. didactische subregel tonen */
.device.ipad .lphead { padding-bottom: 12px; }
.device.ipad .lptitle { font-size: 22px; }
.device.ipad .lpsub { display: block; font-family: var(--body); font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.4; }
/* 1. licht content-paneel i.p.v. blauw-op-blauw → rust + hiërarchie */
.device.ipad .lpcard { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 24px; padding: 6px 18px 0; box-shadow: 0 24px 60px -34px rgba(0,0,0,.55); }
/* 4. "Selecteer alles" als nette chip i.p.v. zwevende link */
.device.ipad .kplink { border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 7px 15px; font-size: 12.5px; }
.device.ipad .kplink:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
/* 2. kern-strips subtieler: semi-transparant, lager, minder contrast */
.device.ipad .kpgroup-h { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); color: #eaf3fb; padding: 6px 12px; margin-bottom: 10px; }
.device.ipad .kpgroup-h:hover { background: rgba(255,255,255,.16); }
.device.ipad .kpgroup-hier { background: #fff; color: #0a6ca8; }
.device.ipad .kpgroup-tgl { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.14); color: #fff; }
.device.ipad .kpgroup.grp-vol .kpgroup-tgl { background: #fff; border-color: #fff; color: #0a6ca8; }
/* 3. lettertegels levendiger: vierkante letterkaart i.p.v. brede pil, ronder, schaduw, hover-lift, glow bij selectie */
.device.ipad .kpchip { min-width: 56px; height: 56px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 30px; box-shadow: 0 4px 10px -7px rgba(0,0,0,.4); transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; }
.device.ipad .kpchip:hover { transform: translateY(-2px); border-color: #0a6ca8; box-shadow: 0 8px 16px -8px rgba(13,55,95,.5); }
.device.ipad .kpchip.sel { background: linear-gradient(160deg, #1a86c9, #0a6ca8); border-color: #0a6ca8; transform: translateY(-2px); box-shadow: 0 8px 18px -7px rgba(1,80,120,.75); }
/* 5. sticky actiebalk onderaan met telling links (niet langer losse zwevende knoppen) */
.device.ipad .lpbtns { position: sticky; bottom: 0; margin: 0 -18px; padding: 14px 18px; align-items: center; border-top: 1px solid rgba(255,255,255,.16); background: rgba(10,80,120,.4); backdrop-filter: blur(6px); border-radius: 0 0 24px 24px; }
.device.ipad .lpbtns .kpcount { font-size: 14px; color: #fff; }
/* ════ Eigen woordenlijsten op iPad: 2-pane (lijsten links · editor rechts) ════ */
.device.ipad #eigen.on { max-width: 1100px; display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
/* JS toggelt inline display:none/'' → met !important forceren we beide panes zichtbaar */
.device.ipad #eigen #ewOverzicht { display: block !important; position: sticky; top: 0; }
.device.ipad #eigen #ewRight { display: flex !important; flex-direction: column; min-width: 0; }
.device.ipad #eigen #ewEditor { display: block !important; }
.device.ipad #eigen #ewFoot { display: flex !important; }
/* linker-pane: "Mijn lijsten" — compacte header + lijst */
.device.ipad #ewOverzicht .shead { margin: 0 0 12px; padding: 4px 2px 10px; }
.device.ipad #ewOverzicht .shead .sico,
.device.ipad #ewOverzicht .shead p { display: none; }
.device.ipad #ewOverzicht .shead h1 { font-size: 19px; }
.device.ipad #ewLijsten { gap: 8px; margin-top: 10px; }
/* punt 3: "Nieuwe lijst" subtiel (outlined) i.p.v. dominant blauw blok */
.device.ipad .ew-nieuw { background: transparent; border: 1.5px dashed rgba(255,255,255,.45); color: #fff; box-shadow: none; font-size: 14px; padding: 11px; }
.device.ipad .ew-nieuw:hover { background: rgba(255,255,255,.10); border-style: solid; }
/* punt 2: lijstkaart compacter, kern in de subregel, acties pas bij hover/selectie */
.device.ipad .ew-kaart { padding: 11px 12px; cursor: pointer; border: 1.5px solid transparent; transition: border-color .12s, box-shadow .12s; }
.device.ipad .ew-kaart:hover { box-shadow: 0 16px 34px -20px rgba(13,55,95,.6); }
.device.ipad .ew-kaart.actief { border-color: #0a6ca8; box-shadow: 0 0 0 1px #0a6ca8 inset; }
.device.ipad .ew-kaart-kern { display: none; } /* losse badge weg → kern komt in de subregel */
.device.ipad .ew-kaart-sub { margin-bottom: 0; }
.device.ipad .ew-sub-kern { display: inline; }
.device.ipad .ew-kaart-acties { gap: 6px; overflow: hidden; max-height: 0; margin-top: 0; opacity: 0; transition: max-height .16s ease, opacity .16s ease, margin-top .16s ease; }
.device.ipad .ew-kaart:hover .ew-kaart-acties,
.device.ipad .ew-kaart.actief .ew-kaart-acties { max-height: 60px; opacity: 1; margin-top: 10px; }
.device.ipad .ew-act { font-size: 12px; padding: 6px 10px; }
/* rechter-pane: editor als licht card-paneel (punt 1) + meer vertical rhythm (punt 4) */
.device.ipad #ewEditor { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 24px 24px 0 0; padding: 10px 26px 22px; box-shadow: 0 24px 60px -34px rgba(0,0,0,.5); }
.device.ipad #ewEditor .shead { border-bottom-color: rgba(255,255,255,.16); margin-bottom: 18px; }
.device.ipad #ewEditor .shead .backbtn { display: none; } /* 2-pane: geen 'terug' nodig */
.device.ipad .ew-naam { margin-top: 0; padding: 14px 16px; }
.device.ipad .ew-tip { margin: 24px 0; }
.device.ipad .ew-lbl { margin-bottom: 8px; }
.device.ipad .ew-count { margin: 28px 0 10px; }
.device.ipad .ew-concl { margin-top: 24px; }
/* punt 5: geen losse "Woordjes toevoegen"-knop — chips verschijnen vanzelf (live parsing) */
.device.ipad .ew-toevoegen { display: none; }
/* input-area speelser (punt 2) */
.device.ipad .ew-plakwrap { position: relative; }
.device.ipad .ew-plak { height: 56px; }
.device.ipad .ew-plak-ic { display: block; position: absolute; right: 12px; top: 10px; font-size: 18px; opacity: .55; pointer-events: none; }
.device.ipad .ew-plak-hint { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.72); margin: 8px 2px 0; }
/* chips: woord groter, kern subtieler, kleur per kern (punt 3) */
.device.ipad .ew-chip { border-radius: 12px; padding: 10px 10px 10px 13px; box-shadow: 0 4px 10px -8px rgba(13,55,95,.5); }
.device.ipad .ew-chip-t { font-size: 15px; font-weight: 800; }
.device.ipad .ew-chip-k { font-size: 9.5px; opacity: .85; }
.device.ipad .ew-chip.ew-k0 { border-left: 4px solid #8aa0b3; }
.device.ipad .ew-chip.ew-k1 { border-left: 4px solid #3a9bd0; }
.device.ipad .ew-chip.ew-k2 { border-left: 4px solid #2f9a8e; }
.device.ipad .ew-chip.ew-k3 { border-left: 4px solid #4bb05a; }
.device.ipad .ew-chip.ew-k4 { border-left: 4px solid #d6a02a; }
.device.ipad .ew-chip.ew-k5 { border-left: 4px solid #e0892a; }
.device.ipad .ew-chip.ew-k6 { border-left: 4px solid #7c6cd6; }
.device.ipad .ew-chip.ew-k7 { border-left: 4px solid #c061b8; }
.device.ipad .ew-chip.ew-k8 { border-left: 4px solid #d9536b; }
/* sticky actiebalk onderaan de rechter-pane met telling links (punt 4) */
.device.ipad #ewFoot { position: sticky; bottom: 0; margin: 0; padding: 14px 22px; flex-wrap: nowrap; align-items: center;
background: rgba(10,80,120,.6); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); border-top: none; border-radius: 0 0 24px 24px; }
.device.ipad .ew-foot-count { display: inline; font-size: 13.5px; font-weight: 800; color: #fff; }
.device.ipad .ew-foot-sp { display: block; flex: 1; }
}
/* Buiten desktop: header-cluster nooit tonen (mobiel/tablet houden de ☰ + bottom-nav). */
.topright { display: none; }
/* ── Doorstroom-/kern-hoger-schermpje (thuis, los van school) ──────────────── */
.ds-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(6, 60, 90, .55); backdrop-filter: blur(3px); animation: dsIn .18s ease; }
@keyframes dsIn { from { opacity: 0; } to { opacity: 1; } }
.ds-kaart { background: #fff; border-radius: 22px; max-width: 380px; width: 100%; padding: 30px 26px 24px;
text-align: center; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); animation: dsPop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes dsPop { from { transform: scale(.92) translateY(8px); } to { transform: scale(1) translateY(0); } }
.ds-emoji { font-size: 52px; line-height: 1; margin-bottom: 8px; }
.ds-kaart h2 { font-size: 21px; margin: 6px 0 10px; color: var(--blauw); }
.ds-kaart p { font-size: 15px; line-height: 1.5; color: #445; margin: 0 0 22px; }
.ds-knoppen { display: flex; gap: 10px; }
.ds-knoppen button { flex: 1; border: none; border-radius: 13px; padding: 13px 12px; font-size: 15px; font-weight: 800;
font-family: inherit; cursor: pointer; }
.ds-ja { background: var(--blauw); color: #fff; }
.ds-nee { background: #eef2f6; color: #5a6b78; }
.ds-knoppen button:active { transform: translateY(1px); }
/* ══ ZOEMEND LEZEN — uitleg vooraf ═══════════════════════════════════════════
De demo in de uitleg gebruikt dezelfde klassen als het flitsscherm zelf
(beheer/oefening.css), zodat de beweging er hier precies zo uitziet als straks in
de oefening. De animatie wordt gedreven door beheer/zoem-anim.js — één animatie,
twee schermen. Maten in em, dus alles schaalt mee met de woordgrootte. */
.zoem { position: relative; display: inline-flex; align-items: baseline; }
.zoem-k { position: relative; padding: 0 .015em; color: #c3d0da; transition: color .28s; }
.zoem-k.aan { color: var(--ink); }
.zoem-k.eerste { color: var(--blauw); }
.zoem-veil { position: absolute; top: -.16em; bottom: -.16em; border-radius: .16em; pointer-events: none;
background: linear-gradient(90deg, rgba(1,104,155,.04), rgba(1,104,155,.22) 22%, rgba(1,104,155,.22) 100%);
transition: opacity .25s; }
.zoem-veil.loopt { transition: transform linear, opacity .25s; }
.zoem-hold { position: absolute; left: 0; bottom: -.2em; height: .06em; border-radius: 99px;
background: var(--blauw); opacity: .85; transition: opacity .25s; }
/* Het uitlegscherm is leestekst: op een breed scherm een kolom van ~720px in plaats van
de volle breedte, en lucht tussen de kaarten zodat ze niet aan elkaar plakken. */
#zoemend { max-width: 720px; margin: 0 auto; }
#zoemend .shead { margin-bottom: 18px; }
#zoemend .doccard { padding: 20px 22px; }
#zoemend .doccard + .doccard { margin-top: 16px; }
#zoemend .gobar { margin-top: 22px; }
.zoemdemo { margin: 12px 0 2px; background: var(--cream); border-radius: 14px; padding: 26px 12px 20px;
display: grid; place-items: center; gap: 14px; }
.zoemdemo-woord { font-family: var(--round); font-weight: 700; font-size: 54px; line-height: 1; color: var(--ink); }
.zoemdemo-cap { font-size: 12.5px; font-weight: 700; color: var(--muted2); text-align: center; }
.zoemlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.zoemlijst li { display: flex; gap: 10px; align-items: flex-start;
font-size: 13.5px; font-weight: 600; color: var(--slate, #4a6478); line-height: 1.5; }
.zoemlijst li::before { flex: none; width: 19px; font-weight: 900; font-size: 15px; line-height: 1.35; }
.zoemlijst li.ja::before { content: '✓'; color: #1a8f63; }
.zoemlijst li.nee::before { content: '✕'; color: #c2611f; }
.zoem-skip { display: block; width: 100%; margin-top: 10px; padding: 13px;
border: none; border-radius: 14px; background: #eef4f9; color: var(--blauw);
font-family: var(--round); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.zoem-skip:active { transform: translateY(1px); }
/* ══ CIJFERFONTEIN — tafels oefenen ══════════════════════════════════════════
Naast lezen ook eens rekenen. Zelfde kaarten (.doccard), zelfde blauw en dezelfde
knopvormen als de rest van de thuis-app; het prototype in cijferFontein-patch/ had
z'n eigen schil, die is hier vervangen door de onze. Groen als accent, zodat je
meteen ziet dat dit een ander soort oefening is dan het lezen. */
/* De Getallenfontein-tegel: verder een gewone tegel — icoon boven, titel eronder, net
als de buren. Alleen het icoon wijkt af: dat is een tekening in plaats van een wit
lijn-icoon en breder dan hoog, dus het doorschijnende vlakje eromheen hugt het icoon
in plaats van een vierkant van 44px te blijven.
Turquoise (#22a7b6), de kleur uit je schermafdruk. Wit opschrift houdt 2,9:1, gelijk aan
Ankers oefenen ernaast (#2ba79a, 3,0:1), dus in lijn met de rest. Iets lichter zag er
frisser uit maar zakte onder de 2,5. Het vlakje onder het icoon is weer de gewone
doorschijnende witte van de andere tegels; op deze donkere tint komt dat goed uit. */
/* Donkerblauw, en het woordmerk-bestand heeft exact dezelfde achtergrond (zie
tools/maak_getallenfontein_tegel.py) zodat de banner naadloos in de tegel valt. */
.card-cijfer { background: #7e7896; }
/* Geen icoonvierkantje eromheen: het logo ís al een banner met eigen achtergrond. */
/* Het woordmerk krijgt bewust GEEN .cico: dat vakje wordt door een handvol regels
aangestuurd (.card .cico, .device.ipad .card .cico, .card--flits .cico) die allemaal een
vaste maat opleggen. Een eigen klasse die verder nergens voorkomt is de enige manier om
dit voorspelbaar op volle breedte te krijgen. */
/* Op een telefoon staat deze tegel op volle breedte tussen de andere en houdt hij de
gewone tegelmaten aan. */
.card-cijfer .gf-merk { display: block; width: 100%; max-width: 200px; height: auto;
border-radius: 10px; }
/* In de grote weergave is de kaart een stuk breder en wordt hetzelfde formaat te
dominant: dit is een uitstapje, geen onderdeel van het leesprogramma, en dan hoeft het
ook niet even hard te roepen. Met .ctext erbij om '.device.ipad .card h2' te verslaan. */
.device.ipad .card-cijfer .gf-merk { max-width: 165px; }
.device.ipad .card-cijfer .ctext h2 { font-size: 16px; font-weight: 600; }
/* Onderdelen die er nog niet zijn: zichtbaar zodat je weet wat eraan komt, maar
onmiskenbaar nog niet te doen (.pick.disabled dooft ze al). */
.cf-bewerk { display: inline-block; margin-left: 7px; vertical-align: 1px;
background: #fdf0dd; color: #a35f00; border: 1px solid #f2ddb8; border-radius: 999px;
padding: 1px 8px; font-family: var(--round); font-size: 10px; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; }
#cijfer { max-width: 900px; margin: 0 auto; }
#cijfer .doccard + .doccard { margin-top: 16px; }
#cijfer .doccard h3 { flex-wrap: wrap; }
/* Wij verbergen dingen met het hidden-attribuut. Zonder deze regel wint een eigen
display (flex/inline-flex) van de browserstandaard en blijft het gewoon staan. */
#cijfer [hidden] { display: none !important; }
/* 'Andere tafel' in de kop — .ghost is elders op #instellingen gescoped, dus hier eigen. */
#cijfer .ghost { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
color: #fff; font-family: var(--round); font-size: 13px; font-weight: 800;
background: rgba(255,255,255,.16); padding: 9px 15px; border: none; border-radius: 999px; cursor: pointer; }
#cijfer .ghost:active { transform: translateY(1px); }
/* Tot 5 / 10 / 12 */
.cf-seg { margin-left: auto; display: flex; gap: 4px; background: #eef2f6; padding: 4px; border-radius: 11px; }
.cf-seg button { border: none; background: none; cursor: pointer; white-space: nowrap;
padding: 6px 12px; border-radius: 8px; font-family: var(--round); font-weight: 700; font-size: 12.5px; color: var(--slate, #4a6478); }
.cf-seg button[aria-pressed="true"] { background: #fff; color: var(--blauw); box-shadow: 0 2px 6px rgba(8,50,80,.14); }
/* De tafelkeuze */
.cf-tafels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.cf-tf { aspect-ratio: 1.3; border: 2px solid transparent; border-radius: 14px; background: #f4f8fb;
display: grid; place-items: center; gap: 1px; cursor: pointer; font-family: var(--round); }
.cf-tf b { font-size: 27px; font-weight: 800; color: var(--ink); line-height: 1; }
.cf-tf span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); }
.cf-tf:hover { background: #eef6fb; border-color: #bcdcf5; }
.cf-tf:active { transform: translateY(1px); }
.cf-breed { grid-column: 1 / -1; aspect-ratio: auto; padding: 14px; display: flex; flex-direction: row; gap: 10px; }
.cf-breed b { font-size: 16px; }
@media (max-width: 560px) { .cf-tafels { grid-template-columns: repeat(3, 1fr); } }
/* Zo werkt het */
.cf-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cf-stappen li { display: flex; gap: 11px; align-items: flex-start;
font-size: 13.5px; font-weight: 600; color: var(--slate, #4a6478); line-height: 1.5; }
.cf-stappen .n { flex: none; width: 24px; height: 24px; border-radius: 999px; background: #eef2f6;
color: var(--muted2); font-size: 12.5px; font-weight: 800; display: grid; place-items: center; }
.cf-stappen li.on { color: var(--ink); }
.cf-stappen li.on .n { background: #0a6ca8; color: #fff; }
.cf-tip { margin-top: 14px !important; background: #f4f8fb; border-radius: 12px; padding: 11px 13px; }
/* De sommentabel */
.cf-fase { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted2); }
.cf-lees { display: flex; align-items: center; gap: 7px; border: none; cursor: pointer;
background: #eef6fb; color: var(--blauw); border-radius: 999px; padding: 7px 13px;
font-family: var(--round); font-weight: 700; font-size: 12.5px; }
.cf-lees svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cf-sums { position: relative; overflow-x: auto; padding: 6px 0 4px; }
.cf-tt { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 620px; }
.cf-tt th { width: 34px; text-align: center; font-size: 18px; font-weight: 800; color: var(--muted2); }
.cf-tt td { text-align: center; padding: 5px 3px; }
.cf-tt tr.r-fac td, .cf-tt tr.r-fac th { border-bottom: 2px solid var(--line); }
.cf-tt tr.r-taf td, .cf-tt tr.r-taf th { padding-bottom: 16px; }
.cf-tt tr.r-x td { padding: 0; font-size: 15px; font-weight: 700; color: var(--muted2); line-height: 1; }
.cf-tt tr.r-ans td, .cf-tt tr.r-ans th { border-top: 3px solid var(--ink); padding-top: 14px; padding-bottom: 54px; }
.cf-tt tr.r-taf th, .cf-tt tr.r-ans th { background: #eef6fb; color: var(--blauw); border-radius: 9px; }
.cf-cel { display: grid; place-items: center; height: 44px; border-radius: 11px; position: relative;
font-family: var(--round); font-size: 19px; font-weight: 700; color: var(--slate, #4a6478); background: #f4f8fb; }
.cf-tt .r-ans .cf-cel { color: var(--ink); background: #fbe9c6; }
.cf-cel.gat { background: #fff; padding: 0; }
.cf-cel input { width: 100%; height: 44px; border: 2px solid var(--line); border-radius: 11px;
font-family: var(--round); font-size: 19px; font-weight: 700; text-align: center; color: var(--ink); background: #fff; padding: 0 2px; }
.cf-cel input:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 4px #eef6fb; }
.cf-cel.ok { background: #e9f6f0; }
.cf-cel.ok input { border-color: #17915f; color: #17915f; background: #e9f6f0; }
.cf-cel.mis { animation: cfSchud .3s; }
.cf-cel.mis input { border-color: #c2611f; color: #c2611f; background: #fbf1e8; }
@keyframes cfSchud { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cf-tt .r-ans .cf-cel:hover, .cf-rt .cf-cel:hover { background: #eef6fb; box-shadow: 0 0 0 2px #bcdcf5; }
.cf-cel.wenk { animation: cfWenk 1.6s ease-in-out 2; }
@keyframes cfWenk { 0%, 100% { box-shadow: 0 0 0 0 rgba(10,108,168,0); } 50% { box-shadow: 0 0 0 5px rgba(10,108,168,.22); } }
.cf-krul { position: absolute; top: -8px; right: -5px; width: 22px; height: 22px; color: #17915f; opacity: 0; }
.cf-cel.ok .cf-krul { opacity: 1; }
.cf-krul svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8;
stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.cf-cel.ok .cf-krul svg { animation: cfKrul .45s ease-out forwards; }
@keyframes cfKrul { to { stroke-dashoffset: 0; } }
/* Het hele raster */
.cf-rt { border-collapse: separate; border-spacing: 5px; table-layout: fixed; width: 100%; min-width: 640px; }
.cf-rt th { font-size: 12.5px; font-weight: 800; color: var(--muted2); background: #f4f8fb; border-radius: 9px; height: 36px; }
.cf-rt th.hoek { color: var(--blauw); font-size: 16px; background: #eef6fb; }
.cf-rt td { padding: 0; }
.cf-rt .cf-cel { height: 36px; font-size: 14px; border-radius: 9px; background: #eef4f9; }
.cf-rt .cf-cel.gat { background: #fff; }
.cf-rt .cf-cel input { height: 36px; font-size: 14px; border-radius: 9px; }
.cf-rt .cf-krul { width: 17px; height: 17px; top: -6px; right: -4px; }
.cf-rt .cf-krul svg { width: 17px; height: 17px; }
/* De +tafel-boogjes onder de antwoorden */
.cf-bogen { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cf-bogen path.boog { fill: none; stroke: #e8b83c; stroke-width: 3; stroke-linecap: round; animation: cfTeken .42s ease-out forwards; }
@keyframes cfTeken { to { stroke-dashoffset: 0; } }
.cf-bogen .lab { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cfBlaadje .34s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes cfBlaadje { from { opacity: 0; transform: translateY(6px) scale(.6); } to { opacity: 1; transform: none; } }
/* Uitleg met knikkers of pizzapunten */
.cf-viz { margin-top: 14px; background: #f2f8fd; border-radius: 14px; padding: 14px 16px 16px; }
.cf-aanwijs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 9px;
font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.cf-aanwijs > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--blauw); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-ocs { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cf-oc { border: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: #fff;
font-family: var(--round); font-size: 12px; font-weight: 700; color: var(--slate, #4a6478); }
.cf-oc[aria-pressed="true"] { background: #eef6fb; color: #0a6ca8; }
.cf-tel { display: flex; align-items: center; gap: 7px; border: none; cursor: pointer;
background: var(--blauw); color: #fff; border-radius: 999px; padding: 9px 16px;
font-family: var(--round); font-weight: 700; font-size: 13px; box-shadow: 0 6px 16px rgba(1,104,155,.28); }
.cf-tel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-vizbox { background: #fff; border: 1.5px dashed #bcdcf5; border-radius: 14px; padding: 16px; display: grid; gap: 14px; justify-items: center; }
.cf-vizrij { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
.cf-somchip { background: #eef6fb; color: var(--ink); font-family: var(--round); font-size: 20px; font-weight: 800; padding: 9px 15px; border-radius: 11px; }
.cf-groepen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cf-grp { background: #fff; border: 1.5px dashed #9ec9ea; border-radius: 12px; padding: 12px 14px; display: flex; gap: 16px; align-items: center; }
.cf-dob { display: grid; gap: 7px; }
.cf-it { width: var(--cf-maat, 24px); height: var(--cf-maat, 24px); }
.cf-it.knikker { border-radius: 999px; background: url("img/knikker.png") no-repeat center 46% / 152%; }
.cf-it.pizza { background: url("img/pizzapunt.png") no-repeat center / contain; }
.cf-telzin { min-height: 28px; font-family: var(--round); font-size: 19px; font-weight: 800; color: var(--blauw); }
.cf-som { font-family: var(--round); font-size: 24px; font-weight: 800; color: var(--ink); }
.cf-vizbox.telmodus .cf-it { opacity: .3; transition: opacity .2s, transform .2s, box-shadow .2s; }
.cf-vizbox.telmodus .cf-it.geteld { opacity: 1; }
.cf-vizbox .cf-it.aan { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(1,104,155,.25); }
.cf-vizbox.telmodus .cf-grp { opacity: .55; transition: opacity .2s; }
.cf-vizbox.telmodus .cf-grp.actief { opacity: 1; border-color: var(--blauw); background: #eef6fb; }
/* Onderbalk van de oefenkaart */
.cf-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.cf-hint { flex: 1; min-width: 200px; margin: 0 !important; border: 1px solid var(--line); border-radius: 12px;
padding: 10px 13px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--slate, #4a6478); background: #fff; }
.cf-btn { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
padding: 12px 18px; border-radius: 13px; border: 1px solid var(--line); background: #fff;
font-family: var(--round); font-size: 14px; font-weight: 700; color: var(--blauw); }
.cf-btn:disabled { opacity: .45; cursor: default; }
.cf-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cf-btn.prim { background: var(--blauw); color: #fff; border-color: var(--blauw); padding: 14px 26px; border-radius: 999px; font-size: 15px; }
.cf-btn.prim:active { transform: translateY(1px); }
/* Stand van deze ronde */
.cf-rondes { display: flex; gap: 7px; margin-bottom: 10px; }
.cf-rd { flex: 1; height: 7px; border-radius: 99px; background: #e4ebf1; }
.cf-rd.klaar { background: #17915f; }
.cf-rd.nu { background: var(--blauw); }
.cf-stat { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600;
color: var(--slate, #4a6478); padding: 9px 0; border-top: 1px solid var(--line); }
.cf-stat b { color: var(--ink); font-weight: 800; }
/* Feest */
.cf-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9200; }
.cf-confetti i { position: absolute; top: -14px; width: 10px; height: 16px; border-radius: 2px; animation: cfVal linear forwards; }
@keyframes cfVal { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
.cf-pop-ov { position: fixed; inset: 0; display: none; place-items: center; padding: 24px;
background: rgba(6,60,90,.55); backdrop-filter: blur(3px); z-index: 9210; }
.cf-pop-ov.on { display: grid; }
.cf-pop { background: #fff; border-radius: 22px; max-width: 380px; width: 100%; padding: 30px 26px 24px;
text-align: center; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
.cf-pop-emoji { font-size: 48px; line-height: 1; }
.cf-pop h2 { font-family: var(--round); font-size: 21px; margin: 8px 0 8px; color: var(--blauw); }
.cf-pop p { font-size: 14.5px; line-height: 1.5; color: #445; margin: 0 0 20px; }
.cf-pop .cf-btn { margin: 0 auto; }
/* Lijst-bolletje in Oefenen: het g-tegeltje zelf, geen getypte letter op een vlakje. */
.lic-gf { background: #fff !important; padding: 3px; }
.lic-gf img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Kop-logo van Getallenfontein: zelfde lockup, op de hoogte van het KlankenFontein-logo
ernaast (dat is 40px hoog, de letters daarin zijn ~17px). hidden werkt hier niet vanzelf
omdat .brand een eigen display heeft. */
.brand[hidden] { display: none !important; }
/* De Getallenfontein-banner is opgebouwd op exact dezelfde geometrie als die van
KlankenFontein (tegeltje op 0,368 van de canvashoogte, 0,374 hoog — zie het script in
de commit). Daardoor heeft hij geen eigen regels nodig: dezelfde .brand img-maten
zetten hem vanzelf even groot en even ver van links. */
/* Onderste rij op home: Getallenfontein links, de laatst verdiende prijs rechts. Allebei
even breed, en als er nog geen prijs is verdiend (die knop staat dan op hidden) vult de
tegel de rij vanzelf. Op een smalle telefoon onder elkaar, anders wordt het te krap. */
.onderrij { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; align-items: stretch; }
.onderrij > * { flex: 1 1 240px; min-width: 0; margin-top: 0; }
.onderrij .card-cijfer { min-height: 0; }
/* ── Getallenfontein: plus- en minsommen ────────────────────────────────────
Eén som groot in beeld met een cijferklavier eronder. De opmaak leunt op wat er al
staat (.doccard, .cf-btn, .cf-rd); nieuw is alleen wat deze oefening echt nodig heeft. */
/* Niveaukaarten: het getal is de knop, de rest is bijschrift. */
.cf-niveaus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.cf-nv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 18px 10px 14px; border: 2px solid transparent; border-radius: 16px; background: #f4f8fb;
cursor: pointer; font-family: var(--round); transition: background .12s, border-color .12s; }
.cf-nv:hover { background: #eef6fb; border-color: #bcdcf5; }
.cf-nv:active { transform: translateY(1px); }
.cf-nv b { font-size: 40px; font-weight: 800; line-height: 1; color: #0a6ca8; letter-spacing: -.02em; }
.cf-nv .cf-nv-tot { font-size: 13px; font-weight: 800; color: var(--ink); }
.cf-nv .cf-nv-vb { font-size: 11.5px; font-weight: 700; color: var(--muted2); margin-top: 3px; }
.cf-nv-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
background: #0a6ca8; color: #fff; font-size: 10px; font-weight: 800; font-style: normal;
letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/* De som zelf — het belangrijkste op het scherm. */
.cf-opgave { display: flex; align-items: center; justify-content: center; gap: 10px;
margin: 22px 0 6px; font-family: var(--round); font-weight: 800; line-height: 1;
font-size: clamp(38px, 9vw, 62px); color: var(--ink); }
.cf-opgave .cf-ot { color: var(--muted2); font-weight: 700; }
.cf-opgave .cf-oa { min-width: 1.7em; height: 1.35em; display: grid; place-items: center;
border: 3px solid #dbe6ee; border-radius: 16px; background: #fff; color: #0a6ca8;
padding: 0 .12em; transition: border-color .15s, background .15s, color .15s; }
.cf-opgave .cf-oa.leeg::after { content: '?'; color: #c3d0da; }
.cf-opgave .cf-oa.ok { border-color: #17915f; background: #e9f6f0; color: #17915f; }
.cf-opgave .cf-oa.voor { border-color: #c2611f; background: #fbf1e8; color: #c2611f; }
.cf-opgave .cf-oa.mis { animation: cfSchud .3s; }
/* Feedbackregel: altijd even hoog, anders springt het klavier op en neer. */
.cf-fb { min-height: 26px; margin: 0 !important; text-align: center;
font-family: var(--round); font-size: 16px; font-weight: 800; color: transparent; }
.cf-fb.goed { color: #17915f; }
.cf-fb.bijna { color: #c2611f; }
.cf-fb.voor { color: var(--ink); }
/* Cijferklavier: knoppen ruim genoeg voor een duim op een tablet. */
.cf-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
max-width: 320px; margin: 14px auto 0; }
.cf-pad button { height: 62px; border: 1px solid var(--line); border-radius: 15px; background: #fff;
font-family: var(--round); font-size: 26px; font-weight: 800; color: var(--ink);
cursor: pointer; box-shadow: 0 2px 0 #e7eef4; }
.cf-pad button:active { transform: translateY(2px); box-shadow: none; }
.cf-pad .cf-pad-wis { color: #c2611f; background: #fdf5ee; box-shadow: 0 2px 0 #f0e2d3; }
.cf-pad .cf-pad-ok { color: #fff; background: #17915f; border-color: #17915f; box-shadow: 0 2px 0 #10794e; }
/* Voortgang: tien streepjes, geen klok. */
.cf-voortgang { display: flex; align-items: center; gap: 12px; margin-top: 18px;
padding-top: 14px; border-top: 1px solid var(--line); }
.cf-vgdots { flex: 1; display: flex; gap: 5px; }
.cf-voortgang b { font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
/* Eindscherm */
.cf-eind { text-align: center; }
.cf-eindicoon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.cf-eindscore { margin: 8px 0 0 !important; font-family: var(--round); font-size: 20px; font-weight: 800; color: #0a6ca8; }
.cf-eindsub { margin: 6px 0 0 !important; font-size: 14px; font-weight: 600; color: var(--slate, #4a6478); }
.cf-eindknoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
/* 'Weet je het zeker?' op de knop rechtsboven, in plaats van een modal ervoor. */
#cfAnder.cf-zeker { background: #c2611f; border-color: #c2611f; color: #fff; }
@media (max-width: 620px) {
.cf-niveaus { gap: 9px; }
.cf-nv { padding: 16px 6px 12px; }
.cf-nv b { font-size: 32px; }
.cf-nv .cf-nv-vb { display: none; }
.cf-pad button { height: 56px; font-size: 24px; }
}
/* Tip-uil bij de plus- en minsommen: welke rekentruc past bij déze som. */
.cf-tiprij { display: flex; justify-content: center; margin-top: 4px; }
.cf-uil { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
padding: 8px 16px 8px 10px; border: 1px solid var(--line); border-radius: 999px;
background: #fff; font-family: var(--round); font-size: 14px; font-weight: 700; color: var(--blauw); }
.cf-uil img { width: 26px; height: 26px; object-fit: contain; display: block; }
.cf-uil:active { transform: translateY(1px); }
.cf-uil[aria-expanded="true"] { background: #eef6fb; border-color: #bcdcf5; }
.cf-uiltip { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px;
background: #f4f8fb; border: 1px solid #dce8f1; border-radius: 14px; padding: 12px 14px; }
.cf-uiltip[hidden] { display: none; }
.cf-uiltip-uil { width: 42px; height: 42px; object-fit: contain; flex: none; display: block; }
.cf-uiltip-tx { min-width: 0; }
.cf-uiltip-tx b { display: block; font-family: var(--round); font-size: 14.5px; font-weight: 800;
color: #0a6ca8; margin-bottom: 2px; }
.cf-uiltip-tx span { font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--slate, #4a6478); }
.cf-uiltip-tx span b { display: inline; margin: 0; font-size: inherit; color: var(--ink); }
.cf-trap { display: flex; flex-direction: column; gap: 2px; margin-top: 9px; }
.cf-trapr { font-family: var(--round); font-size: 16px; font-weight: 800; color: var(--ink);
line-height: 1.3; }
.cf-trapr:first-child { color: var(--muted); }
.cf-trapr.vraag { color: #0a6ca8; }
/* ── Bladerbare tegels op home ───────────────────────────────────────────────
Pagina 1 zijn de leesoefeningen, pagina 2 het uitstapje (Getallenfontein). De baan
schuift; de bladen zijn allebei even breed als de pager zelf. */
/* De padding geeft de slagschaduw van de tegels ruimte binnen de overflow; de negatieve
marge zet de pager daarna weer op zijn oude plek. Die padding valt binnen het
afgesneden gebied, dus zónder tussenruimte zou je daar een strookje van de volgende
pagina zien liggen. Vandaar de gap tussen de bladen: precies twee keer de padding, en
de verschuiving telt hem mee. */
.tegelpager { position: relative; overflow: hidden; padding: 18px; margin: -18px; }
.tp-baan { display: flex; align-items: stretch; gap: 36px;
transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
.tp-blad { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; }
/* Het blad dat niet in beeld staat mag geen tabstop opleveren. Wél zichtbaar blijven,
anders ploft het weg in plaats van mee te schuiven. `inert` regelt de toegankelijkheid,
de overflow hierboven doet het verbergen. */
.tp-blad[inert] { pointer-events: none; }
/* Pagina 2 gebruikt hetzelfde raster, zodat die tegel precies even groot is als
Flitsoefeningen. */
.tp-blad > .cards { align-content: start; }
.tegelpager[data-blad="1"] .tp-baan { transform: translateX(calc(-100% - 36px)); }
/* Een eigen regel onder de tegels, rechts uitgelijnd. Zwevend over een tegel zag het
eruit alsof er iets overheen lag. */
.tp-balk { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
margin-top: 11px; }
/* Woord plus chevron: het pijltje alleen zegt wel 'verder' maar niet waarheen. */
.tp-knop { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
min-height: 34px; padding: 6px 15px; border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.42); background: rgba(255,255,255,.12); color: #fff;
font-family: var(--round); font-size: 13.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tp-knop:hover { background: rgba(255,255,255,.22); }
.tp-knop:active { transform: translateY(1px); }
.tp-knop[hidden] { display: none; }
/* De terug-knop hoort links, dus die duwt de rest naar rechts. */
#tpVorige { margin-right: auto; }
.device.ipad .tp-knop { min-height: 38px; padding: 8px 18px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .tp-baan { transition: none; } }