/* Slimme Start — stylesheet (oudervriendelijk ontwerp) */

:root {
  --achtergrond: #F8FAFC;
  --wit: #FFFFFF;
  --tekst: #172554;
  --tekst-2: #475569;
  --tekst-3: #64748B;
  --lijn: #E2E8F0;
  --lijn-2: #CBD5E1;
  --blauw: #2563EB;
  --blauw-donker: #1D4ED8;
  --blauw-zacht: #DBEAFE;
  --blauw-licht: #EFF6FF;
  --blauw-tekst: #1E40AF;
  --geel: #FBBF24;
  --geel-donker: #F59E0B;
  --geel-zacht: #FEF3C7;
  --geel-tekst: #78350F;
  --groen: #047857;
  --groen-fel: #10B981;
  --groen-knop: #059669;
  --groen-zacht: #D1FAE5;
  --groen-licht: #ECFDF5;
  --groen-tekst: #065F46;
  --oranje: #C2410C;
  --oranje-zacht: #FFEDD5;
  --oranje-tekst: #9A3412;
  --rood: #DC2626;
  --rood-zacht: #FEE2E2;
  --rood-licht: #FEF2F2;
  --rood-tekst: #991B1B;
  --paars: #7C3AED;
  --paars-zacht: #EDE9FE;
  --paars-tekst: #5B21B6;
  --kop: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --letter: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Vaste maten voor de hele site: afstanden, knoppen en kaarten.
     Gebruik deze in plaats van losse getallen, zodat alles gelijk uitlijnt. */
  --ruimte-1: 8px;   /* tussen dingen die bij elkaar horen (knop + knop, knop + hint) */
  --ruimte-2: 16px;  /* binnen een groep */
  --ruimte-3: 24px;  /* tussen groepen */
  --ruimte-4: 32px;  /* nieuwe sectie */
  --ruimte-5: 48px;  /* grote witruimte */
  --knop-hoogte: 56px;
  --kaart-pad: 32px;         /* binnenrand van een kaart op de computer */
  --kaart-pad-mobiel: 20px;  /* binnenrand van een kaart op de telefoon */
  --focus-rand: 3px solid #2F5BFF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--letter); font-size: 17px; line-height: 1.55; color: var(--tekst); background: var(--achtergrond); }
h1, h2, h3 { font-family: var(--kop); line-height: 1.2; margin: 0; }
h2 { font-size: 24px; font-weight: 700; }
p { margin: 0; }
a { color: var(--blauw); text-decoration: none; }
a:hover { color: var(--blauw-donker); text-decoration: underline; }
img, svg { max-width: 100%; }
.ic { flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
strong, .sterk { font-weight: 700; }

:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--wit); padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kleur-goed { color: var(--groen); }
.kleur-let { color: var(--oranje-tekst); }
.kleur-zacht { color: var(--tekst-2); }
.kleur-gevaar { color: #B91C1C; }
.optioneel { font-weight: 400; color: var(--tekst-2); }
.vul { flex-grow: 1; }

/* ---------- Bovenbalk ouder ---------- */

.topbalk { position: sticky; top: 0; z-index: 30; height: 84px; background: var(--wit); border-bottom: 1px solid var(--lijn); display: flex; align-items: center; gap: 32px; padding: 0 40px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; flex-shrink: 0; }
.logo:hover { text-decoration: none; color: var(--tekst); }
.logo-teken { width: 40px; height: 40px; border-radius: 11px; background: var(--geel); color: var(--tekst); display: inline-flex; align-items: center; justify-content: center; }
.logo-tekst { font-family: var(--kop); font-size: 22px; font-weight: 700; }
.hoofdmenu { display: flex; gap: 4px; }
/* Hoofdmenu: geen pil meer, maar een navy streep onder het actieve onderdeel (op de onderrand van de balk) */
.hoofdmenu { align-self: stretch; }
.hoofdmenu a { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px; border-radius: 0; color: #3B4466; font-size: 17px; font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; }
.hoofdmenu a:hover { color: #121A3F; box-shadow: inset 0 -3px 0 #DADDE7; }
.hoofdmenu a.actief { color: #121A3F; font-weight: 700; box-shadow: inset 0 -3px 0 #121A3F; }
.topbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.tegoed-knop { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 0; background: var(--geel-zacht); border: 1px solid var(--geel); color: var(--geel-tekst); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tegoed-knop:hover { background: #FDE68A; color: var(--geel-tekst); text-decoration: none; }
.tegoed-knop.actief { background: var(--geel); }
.account-menu { display: flex; align-items: center; gap: 10px; }
.account-letter { width: 40px; height: 40px; border-radius: 50%; background: var(--blauw); color: var(--wit); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.account-naam { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.account-menu .link-knop { font-size: 14px; color: var(--tekst-2); }

.tabbalk { display: none; }

.inhoud { width: 100%; max-width: 1088px; margin: 0 auto; padding: 44px 24px 80px; display: flex; flex-direction: column; gap: 28px; }

.kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.titel { font-size: 40px; font-weight: 700; }
.sub { margin-top: 8px; font-size: 19px; color: var(--tekst-2); max-width: 68ch; }
.terug-link { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }

.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 28px 32px; }
.kaart-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.kaart > h2 { margin-bottom: 14px; }
.kaart-stippel { border: 1.5px dashed var(--lijn-2); background: transparent; }
.kolom { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.leeg { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.leeg p { color: var(--tekst-2); max-width: 48ch; }
.leeg-tekst { color: var(--tekst-2); }
.scheiding { border-top: 1px solid var(--lijn); margin: 24px 0; }

/* ---------- Knoppen ---------- */

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 14px; border: 1.5px solid transparent; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background-color .15s, border-color .15s; }
.knop:hover { text-decoration: none; }
.knop:disabled { opacity: .55; cursor: not-allowed; }
.knop-primair { background: var(--blauw); color: var(--wit); }
.knop-primair:hover { background: var(--blauw-donker); color: var(--wit); }
.knop-sec { background: var(--wit); color: var(--tekst); border-color: var(--lijn-2); }
.knop-sec:hover { border-color: #94A3B8; color: var(--tekst); }
.knop-gevaar { background: var(--wit); color: #B91C1C; border-color: #FECACA; }
.knop-gevaar:hover { background: var(--rood-licht); color: var(--rood-tekst); }
.knop-groen { background: var(--groen-knop); color: var(--wit); }
.knop-groen:hover { background: var(--groen); color: var(--wit); }
.knop-klein { min-height: 48px; padding: 0 18px; font-size: 16px; border-radius: 12px; }
.knop-groot { min-height: 60px; padding: 0 32px; font-size: 19px; }
.knop-breed { width: 100%; }
label.knop, a.knop, button.knop { padding-left: 26px; padding-right: 26px; }
label.knop.knop-klein, a.knop.knop-klein, button.knop.knop-klein { padding-left: 18px; padding-right: 18px; }
label.knop.knop-groot, a.knop.knop-groot, button.knop.knop-groot { padding-left: 32px; padding-right: 32px; }
.knop > .ic, .knop > svg { flex-shrink: 0; }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.knoppen-midden { justify-content: center; }
.link-knop { background: none; border: 0; padding: 0; font: inherit; color: var(--blauw); cursor: pointer; font-weight: 600; }
.link-knop:hover { text-decoration: underline; }
.knop-icoon { width: 48px; height: 48px; border-radius: 12px; border: 0; background: transparent; color: var(--tekst-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.knop-icoon:hover { background: var(--achtergrond); color: var(--tekst); }
.tekstknop { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 16px; font-weight: 600; color: var(--blauw); cursor: pointer; }
.tekstknop:hover { text-decoration: underline; }
.tekstknop-rood { color: #B91C1C; }

/* ---------- Formulieren ---------- */

.formulier { display: flex; flex-direction: column; gap: 22px; }
.veld { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
/* Alleen het label/de legend van een veld zelf; knoppen, keuzes en kaarten in een veld houden hun eigen ruimte */
.veld > label, .veld > legend, .veld > .label-rij > label, .label { font-size: 17px; font-weight: 600; padding: 0; }
.veld > legend { margin-bottom: 10px; }
.label-groot { font-size: 20px !important; font-weight: 700 !important; }
input, select, textarea { font-family: inherit; font-size: 17px; color: var(--tekst); }
.veld input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .veld select, .veld textarea, .invoer-kort, .invoer-lees {
  min-height: 54px; padding: 12px 16px; border: 1.5px solid var(--lijn-2); border-radius: 12px; background: var(--wit); width: 100%;
}
.veld textarea { resize: vertical; line-height: 1.5; }
.veld input:focus, .veld select:focus, .veld textarea:focus, .invoer-kort:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 4px var(--blauw-zacht); }
.invoer-lees { background: var(--achtergrond); }
.invoer-kort { width: 96px !important; }
.hint { font-size: 15px; color: var(--tekst-2); line-height: 1.5; }
.raster-2, .raster-3 { display: grid; gap: 16px; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rij-velden { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.leerjaar-kort { width: 150px !important; }
.wachtwoord-veld { position: relative; }
.wachtwoord-veld input { padding-right: 56px !important; }
.toon-wachtwoord { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; background: none; color: var(--tekst-2); cursor: pointer; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

.segment { display: inline-flex; border: 1.5px solid var(--lijn-2); border-radius: 12px; overflow: hidden; flex-wrap: wrap; }
.segment label { position: relative; }
.segment input { position: absolute; opacity: 0; }
.segment span { display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px; font-size: 16px; border-right: 1px solid var(--lijn-2); background: var(--wit); cursor: pointer; }
.segment label:last-child span { border-right: 0; }
.segment input:checked + span { background: var(--blauw); color: var(--wit); font-weight: 600; }
.segment input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: -3px; }

.aantal-keuze { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.keuzeknop { position: relative; }
.keuzeknop input { position: absolute; opacity: 0; }
.keuzeknop span { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--lijn-2); border-radius: 12px; background: var(--wit); cursor: pointer; font-size: 17px; }
.keuzeknop input:checked + span { border: 2px solid var(--blauw); background: var(--blauw-licht); color: var(--blauw-tekst); font-weight: 700; }
.keuzeknop input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }

.kleurkeuze { display: flex; gap: 10px; flex-wrap: wrap; }
.kleur-optie { position: relative; }
.kleur-optie input { position: absolute; opacity: 0; }
.kleur-optie span:first-of-type { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; border: 3px solid transparent; }
.kleur-optie input:checked + span { border-color: var(--tekst); }
.kleur-optie input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }

/* ---------- Meldingen en labels ---------- */

.melding { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; font-size: 17px; line-height: 1.5; flex-wrap: wrap; }
.melding > span { flex: 1; min-width: 200px; }
.melding-goed { background: var(--groen-zacht); color: var(--groen-tekst); }
.melding-info { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.melding-let { background: var(--geel-zacht); color: var(--geel-tekst); }
.melding-fout { background: var(--rood-zacht); color: var(--rood-tekst); }
.melding-link { text-decoration: none; }
.melding-link:hover { text-decoration: none; color: var(--blauw-tekst); background: #BFDBFE; }
.melding-actie { flex: 0 0 auto !important; min-width: 0 !important; font-weight: 700; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.badge-goed { background: var(--groen-zacht); color: var(--groen-tekst); }
.badge-let { background: var(--oranje-zacht); color: var(--oranje-tekst); }
.badge-info { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.badge-grijs { background: #F1F5F9; color: #334155; }
.badge-paars { background: var(--paars-zacht); color: var(--paars-tekst); }
.badge-vak { background: var(--oranje-zacht); color: var(--oranje-tekst); border-radius: 20px; padding: 6px 14px; }

.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.avatar-s { width: 36px; height: 36px; font-size: 15px; }
.avatar-m { width: 48px; height: 48px; font-size: 20px; }
.avatar-l { width: 56px; height: 56px; font-size: 24px; font-family: var(--kop); }
.avatar-xl { width: 88px; height: 88px; font-size: 40px; font-family: var(--kop); }

/* ---------- Overzicht (dashboard) ---------- */

.actiekaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.actiekaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 28px; display: flex; gap: 20px; align-items: center; color: var(--tekst); text-decoration: none; }
.actiekaart:hover { text-decoration: none; color: var(--tekst); border-color: var(--lijn-2); }
.actiekaart-primair { border: 2px solid var(--blauw); }
.actiekaart-primair:hover { border-color: var(--blauw-donker); background: var(--blauw-licht); }
.actiekaart-icoon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.actiekaart-primair .actiekaart-icoon { background: var(--blauw); color: var(--wit); }
.actiekaart-groen .actiekaart-icoon { background: var(--groen-zacht); color: var(--groen-tekst); }
.actiekaart-tekst { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.actiekaart-titel { font-size: 21px; font-weight: 700; }
.actiekaart-uitleg { font-size: 16px; color: var(--tekst-2); }
.actiekaart-pijl { color: var(--tekst-3); }
.actiekaart-primair .actiekaart-pijl { color: var(--blauw); }

.kindkeuze { display: flex; gap: 10px; flex-wrap: wrap; }
.kindpil { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px; border-radius: 26px; border: 1.5px solid var(--lijn); background: var(--wit); color: var(--tekst-2); font-size: 17px; text-decoration: none; }
.kindpil:hover { text-decoration: none; border-color: var(--lijn-2); color: var(--tekst); }
.kindpil.actief { border: 2px solid var(--blauw); color: var(--tekst); font-weight: 700; }
.kindpil-nieuw { border-style: dashed; padding-left: 18px; background: transparent; }

.kindstatus { display: flex; flex-direction: column; gap: 22px; }
.kindstatus-kop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kindstatus-kop h2 { margin: 0; }
.kindstatus-kop > div { flex: 1; }
.zin { font-size: 19px; line-height: 1.6; }
.verdeling { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--lijn); }
.verdeling span { display: block; height: 100%; }
.verdeling-goed { background: var(--groen); }
.verdeling-oefen { background: var(--blauw); }
.verdeling-nog { background: var(--oranje); }
.legenda { display: flex; gap: 12px 28px; flex-wrap: wrap; font-size: 16px; }
.legenda-item { display: inline-flex; align-items: center; gap: 8px; }
.stip { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }

.quizrij { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.quizrij:last-child { border-bottom: 0; }
.quizrij-icoon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--oranje-zacht); color: var(--oranje-tekst); display: flex; align-items: center; justify-content: center; }
.quizrij-tekst { flex: 1; min-width: 200px; }
.quizrij-titel { font-size: 18px; font-weight: 700; color: var(--tekst); }
.quizrij-meta { font-size: 16px; color: var(--tekst-2); margin-top: 2px; }
.status-pil { font-size: 16px; font-weight: 600; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.status-bezig { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.status-klaar { background: var(--groen-zacht); color: var(--groen-tekst); }
.status-wacht { background: #F1F5F9; color: #334155; }
.status-concept { background: var(--geel-zacht); color: var(--geel-tekst); }

.uitleg-stappen { display: flex; gap: 32px; align-items: flex-start; border: 1.5px dashed var(--lijn-2); border-radius: 20px; padding: 26px 30px; }
.uitleg-stappen h2 { font-size: 20px; width: 170px; flex-shrink: 0; }
.uitleg-stappen ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 16px; }
.uitleg-stappen li strong { display: block; font-size: 17px; }

/* ---------- Stappen 1-2-3 ---------- */

.stapper { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.stap { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--tekst-3); font-weight: 500; white-space: nowrap; }
.stap-bol { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--lijn-2); background: var(--wit); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tekst-3); flex-shrink: 0; }
.stap-actief { color: var(--tekst); font-weight: 700; }
.stap-actief .stap-bol { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.stap-klaar { color: var(--groen); font-weight: 600; }
.stap-klaar .stap-bol { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.stap-lijn { flex: 1; height: 2px; background: var(--lijn-2); min-width: 24px; }

/* ---------- Quiz maken ---------- */

.kindopties { display: flex; gap: 12px; flex-wrap: wrap; }
.kindoptie { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 24px 10px 14px; min-height: 64px; border: 1.5px solid var(--lijn-2); border-radius: 16px; font-size: 18px; font-weight: 600; cursor: pointer; background: var(--wit); }
.kindoptie input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--blauw); }
.kindoptie:has(input:checked) { border: 2px solid var(--blauw); background: var(--blauw-licht); }
.kindoptie-niveau { font-weight: 400; color: var(--tekst-2); }

.uploadvak { position: relative; border: 2.5px dashed #94A3B8; border-radius: 20px; background: var(--wit); padding: 44px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.uploadvak .upload-knoppen { margin-top: 6px; gap: 14px; }
.uploadvak .hint { margin-top: 2px; }
.uploadvak.slepen { border-color: var(--blauw); background: var(--blauw-licht); }
.uploadvak-icoon { width: 72px; height: 72px; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw); display: flex; align-items: center; justify-content: center; }
.uploadvak-titel { font-size: 21px; font-weight: 700; }
.uploadvak-sub { font-size: 17px; color: var(--tekst-2); margin-top: -8px; }
.uploadvak input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.uploadknop { cursor: pointer; }
.uploadknop:focus-within { outline: 3px solid var(--blauw); outline-offset: 3px; }
/* Uploadlijst met teller */
.upload-teller { display: flex; flex-direction: column; gap: 8px; }
.upload-teller-tekst { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 700; }
.upload-teller-aantal { font-size: 16px; color: var(--blauw-tekst); }
.balk-dun { height: 8px; border-radius: 4px; background: var(--lijn); overflow: hidden; }
.balk-dun span { display: block; height: 100%; border-radius: 4px; background: var(--blauw); transition: width .25s; }
.uploadlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.uploadlijst:empty { display: none; }
.uploaditem { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; }
.uploaditem-duim { width: 56px; height: 72px; flex-shrink: 0; border-radius: 8px; object-fit: cover; border: 1px solid var(--lijn); background: var(--achtergrond); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.uploaditem-pdf { background: var(--rood-zacht); color: var(--rood-tekst); border-color: #FECACA; }
.uploaditem-word { background: var(--blauw-zacht); color: var(--blauw-tekst); border-color: #BFDBFE; }
.uploaditem-tekst { flex: 1; min-width: 0; }
.uploaditem-titel { font-size: 17px; font-weight: 700; }
.uploaditem-meta { font-size: 14px; color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploaditem-weg { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: #F1F5F9; color: var(--tekst-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.uploaditem-weg:hover { background: var(--rood-zacht); color: var(--rood-tekst); }
.upload-bevestiging { font-size: 16px; font-weight: 600; padding: 12px 16px; }
.uploadknop.uit { opacity: .5; cursor: not-allowed; }
.uploadvak-compact { padding: 22px 24px; gap: 12px; }
.uploadvak-compact .uploadvak-icoon, .uploadvak-compact .uploadvak-titel, .uploadvak-compact .uploadvak-sub { display: none; }
.tip { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--geel-zacht); color: var(--geel-tekst); font-size: 16px; line-height: 1.5; }

.bestandenlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bestand { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); }
.bestand-soort { width: 48px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bestand-pdf { background: var(--rood-zacht); color: var(--rood-tekst); }
.bestand-word { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.bestand-foto { background: var(--groen-zacht); color: var(--groen-tekst); }
.bestand-naam { flex: 1; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestand-grootte { font-size: 15px; color: var(--tekst-2); }

.herkend { background: var(--blauw-licht); border: 1px solid var(--blauw-zacht); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.herkend-kop { display: flex; align-items: center; gap: 8px; color: var(--blauw-tekst); font-size: 18px; font-weight: 700; flex-wrap: wrap; }
.herkend-hint { margin-left: auto; font-weight: 500; font-size: 16px; }
.herkend-samenvatting { font-size: 17px; color: var(--blauw-tekst); }

.formulier-voet { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding-top: 4px; }
.formulier-voet .hint { font-size: 16px; max-width: 56ch; }

/* ---------- Vragen controleren ---------- */

.vraagkaart { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 110px; }
.vraagkaart-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vraagkaart-nr { font-size: 16px; font-weight: 700; color: var(--tekst-2); }
.bronlabel { font-size: 14px; padding: 4px 10px; border-radius: 8px; background: #F1F5F9; color: var(--tekst-2); }
.vraagkaart-vraag { font-size: 20px; font-weight: 700; line-height: 1.4; }
.optielijst { display: flex; flex-direction: column; gap: 8px; }
.optie { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--lijn); font-size: 17px; }
.optie-letter { width: 32px; height: 32px; border-radius: 8px; background: #F1F5F9; color: var(--tekst-2); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.optie-goed { border: 2px solid var(--groen); background: var(--groen-licht); color: var(--groen-tekst); font-weight: 600; }
.optie-goed .optie-letter { background: var(--groen); color: var(--wit); }
.optie-label { margin-left: auto; font-size: 15px; white-space: nowrap; }
.uitleg { font-size: 16px; color: var(--tekst-2); }
.uitleg strong { color: var(--tekst); }

details.bewerk > summary { list-style: none; cursor: pointer; width: fit-content; }
details.bewerk > summary::-webkit-details-marker { display: none; }
details.bewerk[open] > summary { margin-bottom: 16px; }
.bewerk-form { border-top: 1px solid var(--lijn); padding-top: 18px; }
.optie-invoer { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.optie-radio { position: relative; }
.optie-radio input { position: absolute; opacity: 0; }
.optie-radio span[aria-hidden] { width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid var(--lijn-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; background: var(--wit); }
.optie-radio input:checked ~ span[aria-hidden] { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.optie-radio input:focus-visible ~ span[aria-hidden] { outline: 3px solid var(--blauw); outline-offset: 2px; }

.actiebalk { position: sticky; bottom: 0; z-index: 20; background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 20px rgba(23, 37, 84, .06); }
.actiebalk-inhoud { max-width: 1088px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.actiebalk-inhoud p { flex: 1; color: var(--tekst-2); min-width: 220px; }

/* ---------- Tegoed ---------- */

.saldo-held { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.saldo-icoon { width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; background: var(--geel-zacht); color: #B45309; display: flex; align-items: center; justify-content: center; }
.saldo-titel { font-family: var(--kop); font-size: 36px; font-weight: 700; line-height: 1.2; }
.saldo-held p:not(.saldo-titel) { margin-top: 6px; font-size: 18px; color: var(--tekst-2); }
.pakketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pakket { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.pakket-populair { border: 2px solid var(--blauw); }
.pakket-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; }
.pakket-naam { font-size: 19px; font-weight: 700; }
.pakket-prijs { font-family: var(--kop); font-size: 38px; font-weight: 700; }
.pakket-tekst { font-size: 16px; color: var(--tekst-2); flex: 1; margin-bottom: 10px; }
.veilig { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--tekst-2); }
.mutatie { font-size: 18px; font-weight: 700; min-width: 40px; text-align: right; }
.regel { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.rij { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.rij:last-child { border-bottom: 0; }
.rij-hoofd { flex: 1; min-width: 0; }
.rij-titel { font-size: 17px; font-weight: 600; }
.rij-meta { font-size: 15px; color: var(--tekst-2); margin-top: 2px; }

.dialoog-achtergrond { position: fixed; inset: 0; background: rgba(23, 37, 84, .5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 40; overflow-y: auto; }
.dialoog { width: 100%; max-width: 540px; background: var(--wit); border-radius: 24px; padding: 34px; display: flex; flex-direction: column; gap: 20px; }
.dialoog-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dialoog-kop h2 { font-size: 28px; }
.dialoog .sub { font-size: 17px; }
.pakketkeuze { display: flex; flex-direction: column; gap: 10px; }
.pakketoptie { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--lijn-2); border-radius: 14px; cursor: pointer; font-weight: 400 !important; }
.pakketoptie:has(input:checked) { border: 2px solid var(--blauw); background: var(--blauw-licht); }
.pakketoptie input { width: 22px; height: 22px; margin: 0; accent-color: var(--blauw); }
.pakketoptie-tekst { flex: 1; display: flex; flex-direction: column; }
.pakketoptie-sub { font-size: 15px; color: var(--tekst-2); }
.pakketoptie-prijs { font-size: 18px; font-weight: 700; }
.hint-midden { text-align: center; }

/* ---------- Kinderen ---------- */

.kindkop { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kindkop > div { flex: 1; }
.kindkop .sub { margin-top: 4px; font-size: 18px; }
.inlogstappen { display: flex; flex-direction: column; gap: 28px; }
.inlogstap { display: flex; gap: 20px; align-items: flex-start; }
.stapnummer { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--blauw); color: var(--wit); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.inlogstap-inhoud { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.inlogstap-titel { font-size: 19px; font-weight: 700; }
.inlogstap-rij { display: flex; gap: 28px; align-items: flex-start; }
.inlogstap-rij > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qr-blok { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 15px; color: var(--tekst-2); }
.qr { width: 156px; height: 156px; padding: 10px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--wit); }
.qr img, .qr canvas { display: block; width: 134px !important; height: 134px !important; }
.pin-bolletjes { display: inline-flex; gap: 10px; }
.pin-bolletjes i { width: 18px; height: 18px; border-radius: 50%; background: var(--tekst); }
details.meer { padding: 4px; }
details.meer > summary { cursor: pointer; font-size: 17px; font-weight: 600; color: var(--tekst-2); width: fit-content; }
details.meer[open] > summary { margin-bottom: 16px; }
.gevaar-blok { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--rood-licht); color: var(--rood-tekst); flex-wrap: wrap; margin-bottom: 12px; }
.gevaar-blok > div { flex: 1; min-width: 220px; }
.kinderen-lijst { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Registreren en inloggen ---------- */

body.los { min-height: 100vh; }
.los-inhoud { max-width: 1120px; margin: 0 auto; padding: 56px 24px; display: flex; flex-direction: column; gap: 24px; }
.los-smal { max-width: 560px; }
.registreer { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 64px; align-items: start; }
.voordelen { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.voordelen h1 { font-size: 40px; line-height: 1.15; }
.voordeel { display: flex; gap: 16px; }
.voordeel-icoon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: var(--blauw-zacht); color: var(--blauw-tekst); display: flex; align-items: center; justify-content: center; }
.voordeel-titel { font-size: 18px; font-weight: 700; }
.voordeel p:not(.voordeel-titel) { font-size: 16px; color: var(--tekst-2); margin-top: 4px; }
.los-kaart { padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.los-kaart h1, .los-kaart h2 { font-size: 30px; }
.los-voet { font-size: 17px; color: var(--tekst-2); text-align: center; }
.los-midden { align-items: center; text-align: center; }
.los-midden .formulier { width: 100%; text-align: left; }
.rond-icoon { width: 80px; height: 80px; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw-tekst); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Laadscherm ---------- */

.laden { position: fixed; inset: 0; background: rgba(23, 37, 84, .5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.laden-kaart { background: var(--wit); border-radius: 24px; padding: 34px 38px; max-width: 400px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.laden-tekst { font-size: 17px; }
.laden-draai { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--blauw-zacht); border-top-color: var(--blauw); animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* ---------- Kindomgeving ---------- */

.kind-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 40px; }
.kind-kop .logo-tekst { font-size: 19px; }
.kind-kop-rechts { display: flex; align-items: center; gap: 14px; }
.kind-naam { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.kind-inhoud { max-width: 1160px; margin: 0 auto; padding: 8px 40px 56px; display: flex; flex-direction: column; gap: 26px; }

.kind-titelrij { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.kind-titel { font-size: 36px; font-weight: 700; }
.kind-week { color: var(--tekst-2); }
.kind-blok { display: flex; flex-direction: column; gap: 14px; }
.kind-leeg, .kind-sub { color: var(--tekst-2); }
.kind-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.kind-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

.quizkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.quizkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.quizkaart-kop { display: flex; align-items: center; gap: 16px; }
.quizkaart .balk-dik { flex: none; height: 10px; }
.quizkaart-uitgelicht { border: 2px solid var(--blauw); }
.quizkaart-verder { border: 2px solid var(--groen-fel); }
.quizkaart-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.quizkaart-titel { font-size: 19px; font-weight: 700; margin-top: 6px; line-height: 1.3; }
.quizkaart-meta { font-size: 16px; color: var(--tekst-2); }
.vak-icoon { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vak-oranje { background: var(--oranje-zacht); color: var(--oranje-tekst); }
.vak-groen { background: var(--groen-zacht); color: var(--groen-tekst); }
.vak-blauw { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.vak-paars { background: var(--paars-zacht); color: var(--paars-tekst); }
.foutrij { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--oranje-zacht); }
.foutrij > div { flex: 1; }
.foutrij-titel { font-size: 17px; font-weight: 700; color: #7C2D12; }
.foutrij-meta { font-size: 15px; color: var(--oranje-tekst); }
.knop-let { background: var(--wit); color: var(--oranje-tekst); border-color: #FDBA74; }
.knop-let:hover { background: var(--oranje-zacht); color: var(--oranje-tekst); }

/* Pincode */
.pin-scherm { min-height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 0; }
.pin-kaart { width: 100%; max-width: 440px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 28px; padding: 36px 36px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pin-titel { font-size: 34px; font-weight: 700; }
.pin-sub { color: var(--tekst-2); font-size: 18px; }
.pin-fout { color: var(--rood-tekst); background: var(--rood-zacht); padding: 12px 16px; border-radius: 12px; font-size: 16px; }
.pin-voet { color: var(--tekst-2); text-align: center; }
.pin-auto { display: none; font-size: 15px; color: var(--tekst-3); }
.met-toetsen .pin-auto { display: block; }
.met-toetsen .pin-verstuur { display: none; }
.pin-form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pin-bolletjes-groot { display: none; gap: 14px; }
.pin-bolletjes-groot i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--lijn-2); }
.pin-bolletjes-groot i.vol { background: var(--blauw); border-color: var(--blauw); }
.pin-invoer { width: 190px; min-height: 58px; text-align: center; font-size: 28px; letter-spacing: .4em; border: 2px solid var(--lijn-2); border-radius: 14px; }
.toetsen { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.met-toetsen .pin-bolletjes-groot { display: flex; }
.met-toetsen .toetsen { display: grid; }
.met-toetsen .pin-invoer { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.toets { min-height: 66px; border-radius: 16px; border: 1px solid var(--lijn); background: var(--wit); font-family: var(--kop); font-size: 28px; font-weight: 500; color: var(--tekst); cursor: pointer; }
.toets:hover { background: var(--achtergrond); }
.toets:active { transform: scale(.97); }
.toets-wis { border: 0; background: transparent; color: var(--tekst-2); display: inline-flex; align-items: center; justify-content: center; }

/* Quiz spelen */
.voortgang { display: flex; align-items: center; gap: 16px; }
.voortgang-tekst { font-size: 17px; font-weight: 700; white-space: nowrap; }
.voortgang-score { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: #B45309; white-space: nowrap; }
.balk-dik { flex: 1; height: 14px; border-radius: 7px; background: var(--lijn); overflow: hidden; }
.balk-dik span { display: block; height: 100%; border-radius: 7px; background: var(--groen-fel); transition: width .3s; }
.spel { display: flex; justify-content: center; }
.quizkop { display: none; }
.spel-meta { display: none; }
.spel-kaart { width: 100%; max-width: 880px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 28px; padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; }
.spel-labels { display: flex; gap: 10px; flex-wrap: wrap; }
.ronde-label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; padding: 6px 14px; border-radius: 20px; background: var(--paars-zacht); color: var(--paars-tekst); }
.spel-vraag { font-size: 30px; font-weight: 700; line-height: 1.25; }
.spel-vraag:focus { outline: none; }
.antwoorden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.antwoord { min-height: 76px; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--lijn); background: var(--wit); font-family: inherit; font-size: 19px; color: var(--tekst); text-align: left; display: flex; align-items: center; gap: 14px; cursor: pointer; line-height: 1.35; transition: opacity .2s; }
/* Hover alleen met een muis: op een telefoon blijft hover anders 'plakken' op het antwoord onder je vinger */
@media (hover: hover) and (pointer: fine) {
  .antwoord:hover:not(:disabled) { border-color: var(--blauw); background: var(--blauw-licht); }
}
.antwoord:focus { outline: none; }
.antwoord:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
.antwoord:disabled { cursor: default; }
.antwoord-letter { width: 38px; height: 38px; border-radius: 10px; background: #F1F5F9; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.antwoord-tekst { flex: 1; }
.antwoord.gedimd { opacity: .5; }
.antwoord.goed { border: 3px solid var(--groen-fel); background: var(--groen-zacht); color: var(--groen-tekst); font-weight: 700; opacity: 1; }
.antwoord.goed .antwoord-letter { background: var(--groen-knop); color: var(--wit); }
.antwoord.fout { border: 3px solid var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); font-weight: 700; opacity: 1; }
.antwoord.fout .antwoord-letter { background: var(--rood); color: var(--wit); }
.spel-melding { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; flex-wrap: wrap; }
.spel-melding-goed { background: var(--groen-licht); border: 1px solid #A7F3D0; color: var(--groen-tekst); }
.spel-melding-fout { background: var(--rood-licht); border: 1px solid #FECACA; color: var(--rood-tekst); }
.spel-melding-icoon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--wit); }
.spel-melding-goed .spel-melding-icoon { background: var(--groen-knop); }
.spel-melding-fout .spel-melding-icoon { background: var(--rood); }
.spel-melding-tekst { flex: 1; }
.spel-melding-titel { font-size: 20px; font-weight: 700; }
.spel-melding-sub { font-size: 16px; margin-top: 2px; }
.aftellen { width: 150px; font-size: 14px; text-align: right; }
.aftellen-balk { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .08); margin-top: 6px; overflow: hidden; }
.aftellen-balk span { display: block; height: 100%; width: 100%; border-radius: 3px; background: currentColor; transform-origin: left; }
.aftellen-loopt .aftellen-balk span { animation: aftel var(--duur, 1.5s) linear forwards; }
@keyframes aftel { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tussenscherm { width: 100%; max-width: 700px; margin: 0 auto; background: var(--wit); border: 1px solid var(--lijn); border-radius: 28px; padding: 44px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ster-rond { width: 100px; height: 100px; border-radius: 50%; background: var(--geel-zacht); color: var(--geel-donker); display: flex; align-items: center; justify-content: center; }
.tussenscherm h1 { font-size: 36px; }
.tussenscherm p { font-size: 19px; color: var(--tekst-2); max-width: 520px; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px; font-size: 18px; font-weight: 700; }
.chip-goed { background: var(--groen-zacht); color: var(--groen-tekst); }
.chip-let { background: var(--oranje-zacht); color: var(--oranje-tekst); }

/* Resultaat */
.resultaat { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
.resultaat-hoofd { background: var(--wit); border: 1px solid var(--lijn); border-radius: 28px; padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.resultaat-zij { display: flex; flex-direction: column; gap: 16px; }
.scorecirkel { position: relative; width: 190px; height: 190px; }
.scorecirkel svg { width: 190px; height: 190px; }
.scorecirkel-bg { fill: none; stroke: var(--lijn); stroke-width: 18; }
.scorecirkel-boog { fill: none; stroke: var(--groen-fel); stroke-width: 18; stroke-linecap: round; }
.scorecirkel-tekst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--groen-tekst); }
.scorecirkel-sub { font-size: 16px; font-weight: 700; }
.resultaat-titel { font-size: 38px; font-weight: 700; }
.resultaat-zin { font-size: 19px; color: var(--tekst-2); max-width: 48ch; }
.uitslagblokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; max-width: 600px; }
.uitslag { padding: 16px; border-radius: 16px; display: flex; flex-direction: column; font-size: 15px; }
.uitslag-getal { font-family: var(--kop); font-size: 30px; font-weight: 700; }
.uitslag-goed { background: var(--groen-zacht); color: var(--groen-tekst); }
.uitslag-info { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.uitslag-let { background: var(--oranje-zacht); color: var(--oranje-tekst); }
.ai-label { font-size: 15px; font-weight: 700; color: #6D28D9; margin-top: 4px; }
.tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; display: flex; flex-direction: column; gap: 14px; }
.tips li { counter-increment: tip; display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }
.tips li::before { content: counter(tip); width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--paars-zacht); color: var(--paars-tekst); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.terug-item { padding: 16px 0; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 6px; }
.terug-item:last-child { border-bottom: 0; padding-bottom: 0; }
.terug-vraag { font-size: 16px; font-weight: 700; }
.terug-antwoord { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--groen-tekst); font-weight: 700; }
.terug-uitleg { font-size: 15px; color: var(--tekst-2); }
.terug-poging { font-size: 14px; color: var(--oranje-tekst); font-weight: 700; }

/* ---------- Talen: uitspraak en voorlezen ---------- */

.melding-paars { background: var(--paars-zacht); color: var(--paars-tekst); }
.uitspraak { display: block; font-size: 15px; font-style: italic; font-weight: 500; color: #6D28D9; }
.vreemd-blok { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--blauw-licht); border: 1px solid var(--blauw-zacht); align-self: flex-start; min-width: min(100%, 360px); }
.vreemd-blok > div { flex: 1; }
.vreemd-label { font-size: 14px; font-weight: 700; color: var(--tekst-2); }
.vreemd-woord { font-family: var(--kop); font-size: 26px; font-weight: 700; line-height: 1.25; }
.vreemd-blok .uitspraak { font-size: 16px; margin-top: 2px; }
.spreek-knop { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw-tekst); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .spreek-knop:hover { background: #BFDBFE; } }
.spreek-knop:active { transform: scale(.95); }
.spreek-groot { width: 58px; height: 58px; background: var(--blauw); color: var(--wit); }
.spreek-groot:hover { background: var(--blauw-donker); }
.luister-blok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.luister-knop { width: 112px; height: 112px; border: 0; border-radius: 50%; background: var(--blauw); color: var(--wit); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px var(--blauw-zacht); }
.luister-knop:active { transform: scale(.96); }
.antwoord-rij { display: flex; align-items: center; gap: 8px; }
.antwoord-rij .antwoord { flex: 1; min-width: 0; }
.antwoord-tekst .uitspraak { margin-top: 2px; }
.antwoord.goed .uitspraak, .antwoord.fout .uitspraak { color: inherit; opacity: .85; }
.optie-tekst { flex: 1; }
.optie .spreek-knop { width: 40px; height: 40px; }
.terug-vreemd { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.terug-vreemd .uitspraak { display: inline; }

/* ---------- Leercoach, stap 3 en resultaatmail ---------- */

.quizrij-link { text-decoration: none; color: inherit; }
.quizrij-link:hover { text-decoration: none; color: inherit; background: var(--achtergrond); }
.quizrij-link .quizrij-titel, .quizrij-link .quizrij-meta { display: block; }
.coach-blok { border: 2px solid #DDD6FE; display: flex; flex-direction: column; gap: 18px; }
.coach-kop { display: flex; align-items: center; gap: 14px; }
.coach-kop h2 { margin: 0; }
.coach-icoon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: var(--paars-zacht); color: #6D28D9; display: flex; align-items: center; justify-content: center; }
.coach-icoon-groot { width: 72px; height: 72px; border-radius: 20px; }
.coach-datum { font-size: 15px; font-weight: 600; color: #6D28D9; }
.coach-laden { display: flex; align-items: center; gap: 12px; color: var(--tekst-2); }
.laden-klein { width: 24px; height: 24px; border-width: 3px; flex-shrink: 0; }
.coach-vakjes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.coach-vak { padding: 16px 18px; border-radius: 14px; font-size: 17px; }
.coach-vak-kop { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.coach-sterk { background: var(--groen-licht); color: var(--groen-tekst); }
.coach-groeien { background: #FFF7ED; color: var(--oranje-tekst); }
.coach-tip { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: #F5F3FF; font-size: 17px; }
.coach-tip .ic { color: #6D28D9; }
.coach-samenvatting { border: 2px solid #DDD6FE; background: #FBFAFF; display: flex; flex-direction: column; gap: 10px; }
.coach-label { font-size: 14px; font-weight: 700; color: #6D28D9; text-transform: uppercase; letter-spacing: .03em; }
.coach-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.coach-punt { display: flex; gap: 14px; }
.coach-punt p.sterk { font-size: 18px; }
.coach-punt-icoon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.balk-groen { background: var(--groen) !important; }
.balk-blauw { background: var(--blauw) !important; }
.balk-oranje { background: var(--oranje) !important; }
.balk { height: 12px; }
.tips-groot li { font-size: 17px; }
.volgende-stap { display: flex; align-items: center; gap: 20px; padding: 26px 30px; border-radius: 20px; background: var(--blauw-licht); border: 1px solid var(--blauw-zacht); flex-wrap: wrap; }
.volgende-stap > div { flex: 1; min-width: 240px; }
.volgende-stap-titel { font-size: 20px; font-weight: 700; }
.coach-voet { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--tekst-2); text-align: center; }

.klaar-scherm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 44px 32px; }
.klaar-icoon { width: 92px; height: 92px; border-radius: 50%; background: var(--groen-zacht); color: var(--groen); display: flex; align-items: center; justify-content: center; }
.klaar-scherm .sub { margin-top: 0; }
.klaar-knoppen { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; margin-top: 8px; }
.klaar-knoppen .knop { width: 100%; }
.knop-whatsapp { background: #16A34A; color: var(--wit); }
.knop-whatsapp:hover { background: #15803D; color: var(--wit); }
.knop-paars { background: var(--paars); color: var(--wit); }
.knop-paars:hover { background: #6D28D9; color: var(--wit); }
.uitspraak-balk { display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-radius: 18px; background: var(--paars-zacht); color: var(--paars-tekst); flex-wrap: wrap; }
.uitspraak-balk > div { flex: 1; min-width: 240px; }
.uitspraak-balk .sterk { font-size: 19px; }
.uitspraak-balk-icoon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--wit); display: flex; align-items: center; justify-content: center; }

/* ---------- Juridisch, afrekenen en cookiebanner ---------- */

.juridisch { max-width: 780px; margin: 0 auto; padding: 48px 24px 80px; font-size: 17px; line-height: 1.65; }
.juridisch h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 8px; }
.juridisch h2 { font-size: 24px; margin: 36px 0 10px; }
.juridisch h3 { font-size: 19px; margin: 22px 0 6px; }
.juridisch p, .juridisch ul, .juridisch ol { margin: 0 0 12px; }
.juridisch ul, .juridisch ol { padding-left: 22px; }
.juridisch li { margin-bottom: 4px; }
.juridisch-datum { color: var(--tekst-2); font-size: 15px; }
.adresblok { padding: 16px 20px; border-radius: 14px; background: var(--wit); border: 1px solid var(--lijn); }
.juridisch-belofte { margin-top: 32px; padding: 20px 22px; border-radius: 16px; background: var(--groen-licht); color: var(--groen-tekst); }
.tabel-scroll { overflow-x: auto; }
.juridisch-tabel { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--wit); border-radius: 12px; overflow: hidden; }
.juridisch-tabel th, .juridisch-tabel td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.juridisch-tabel th { background: #F1F5F9; }
.juridisch code { font-size: 14px; background: #F1F5F9; padding: 1px 6px; border-radius: 6px; }

.voet-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.voet-links a, .voet-links .link-knop { color: var(--tekst-2); font-weight: 500; }
.home-voet { flex-direction: column; align-items: stretch; }
.home-voet-boven { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.los-voet-links { margin-top: 12px; display: flex; justify-content: center; }
.app-voet { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lijn); }

.akkoord { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 400 !important; cursor: pointer; }
.akkoord input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--blauw); }

.bestelling { display: flex; flex-direction: column; gap: 16px; }
.bestelling-regel { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.bestelling-naam { font-size: 20px; font-weight: 700; }
.bestelling-prijs { font-family: var(--kop); font-size: 28px; font-weight: 700; white-space: nowrap; }
.bestelling-totaal { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 18px; }

.cookiebanner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; justify-content: center; }
.cookiebanner-inhoud { max-width: 720px; width: 100%; background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; box-shadow: 0 20px 50px rgba(23, 37, 84, .2); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.cookiebanner h2 { font-size: 21px; }
.cookiebanner p { font-size: 16px; color: var(--tekst-2); }
.cookie-voorkeuren { display: flex; flex-direction: column; gap: 12px; }
.cookie-optie { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.cookie-optie input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blauw); }
.cookie-optie strong { display: block; font-size: 16px; }

/* ---------- Inzicht: toets, tegels, grafieken, quizlijst, terugblik ---------- */

.balk { height: 12px; border-radius: 6px; background: var(--lijn); overflow: hidden; }
.balk > span { display: block; height: 100%; border-radius: 6px; background: var(--blauw); transition: width .3s; }
.balk-geel > span { background: #F59E0B; }
.vakbalk { display: flex; flex-direction: column; gap: 6px; }
.vakbalk-tekst { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.vakbalk-tekst > span:first-child { font-weight: 600; }

.toetskaart { display: flex; align-items: center; gap: 28px; padding: 26px 28px; border-radius: 22px; color: var(--wit); background: linear-gradient(135deg, #1E3A8A 0%, var(--blauw) 100%); }
.toetskaart-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.toetskaart-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #BFDBFE; text-transform: uppercase; letter-spacing: .05em; }
.toetskaart-titel { font-family: var(--kop); font-size: 28px; font-weight: 700; line-height: 1.2; }
.toetskaart-sub { font-size: 17px; color: #DBEAFE; }
.toetskaart-dagen { text-align: center; padding: 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, .12); font-family: var(--kop); font-size: 44px; font-weight: 700; line-height: 1; }
.toetskaart-dagen small { display: block; margin-top: 4px; font-family: var(--letter); font-size: 14px; font-weight: 500; color: #DBEAFE; }
.ring { position: relative; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; display: block; }
.ring-tekst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-getal { font-family: var(--kop); font-size: 26px; font-weight: 700; line-height: 1; }
.ring-sub { font-size: 12px; color: #DBEAFE; }

.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tegels-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tegel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.tegel-plat { background: var(--achtergrond); border: 0; }
.tegel-icoon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.tegel-getal { font-family: var(--kop); font-size: 30px; font-weight: 700; line-height: 1.1; }
.tegel-label { font-size: 15px; font-weight: 700; }
.tegel-sub { font-size: 14px; color: var(--tekst-3); }
.zw-grijs { background: #F1F5F9; color: #334155; }
.zw-geel { background: var(--geel-zacht); color: #B45309; }
.zw-oranje { background: var(--oranje-zacht); color: var(--oranje-tekst); }

.grafieken { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.grafiekkaart { display: flex; flex-direction: column; gap: 14px; }
.grafiek { width: 100%; height: auto; display: block; overflow: visible; }
.grafiek-radar { max-width: 320px; margin: 0 auto; }
.grafiek-midden { display: flex; justify-content: center; }
.svg-label { font-family: var(--letter); font-size: 11px; fill: #64748B; }
.svg-klein { font-family: var(--letter); font-size: 11px; fill: #475569; }
.svg-as { font-family: var(--letter); font-size: 12px; font-weight: 600; fill: #334155; }

.coach-regel { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: var(--wit); border: 2px solid #DDD6FE; }
.coach-regel p { flex: 1; font-size: 17px; }
.coach-regel .coach-icoon { width: 46px; height: 46px; border-radius: 14px; }

.quizlijst { display: flex; flex-direction: column; gap: 12px; }
.quizlijst-ouder { margin-top: 4px; }
.quizlijst-ouder > .quizlijst { margin-top: 12px; }
.quizkaart-ouder { background: var(--wit); border: 1.5px solid var(--lijn); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.quizkaart-open { border-color: #FCD34D; background: #FFFBEB; }
.qko-kop { display: flex; align-items: flex-start; gap: 14px; }
.qko-tekst { flex: 1; min-width: 0; }
.qko-titel { font-size: 18px; font-weight: 700; color: var(--tekst); }
.qko-meta { font-size: 15px; color: var(--tekst-2); margin-top: 2px; }
.qko-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.qko-feiten { justify-content: flex-start; gap: 18px; color: var(--tekst-2); }
.qko-tijd { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #334155; }
.qko-voortgang { display: flex; flex-direction: column; gap: 8px; }
.qko-let { color: #92400E; }
.qko-terugblik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #F5F3FF; }
.qko-terugblik-kop { font-size: 15px; font-weight: 700; color: #5B21B6; margin-right: 2px; }
.qko-tip { margin-left: auto; font-size: 15px; font-weight: 700; color: #6D28D9; }
.badge-geel { background: var(--geel-zacht); color: var(--geel-tekst); }
.badge-paars-licht { background: var(--wit); color: #5B21B6; border: 1px solid #DDD6FE; }

.toets-blok { gap: 16px; }
.toets-blok-kop { display: flex; gap: 14px; align-items: flex-start; }
.toets-blok-kop .label-groot { margin: 0; }
.keuzes-rij { display: flex; flex-wrap: wrap; gap: 10px; }
.tip-klein { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--geel-zacht); color: var(--geel-tekst); font-size: 15px; }

.kind-toets { padding: 20px; border-radius: 22px; color: var(--wit); background: linear-gradient(135deg, #1E3A8A 0%, var(--blauw) 100%); display: flex; flex-direction: column; gap: 14px; }
.kind-toets-kop { display: flex; align-items: center; gap: 16px; }
.kind-toets .ring-getal { font-size: 20px; }
.kind-toets-label { font-size: 13px; font-weight: 700; color: #BFDBFE; text-transform: uppercase; letter-spacing: .05em; }
.kind-toets-titel { font-family: var(--kop); font-size: 21px; font-weight: 700; line-height: 1.2; }
.kind-toets-datum { font-size: 15px; color: #DBEAFE; }
.kind-toets-klaar { font-size: 16px; font-weight: 600; }
.knop-geel { background: var(--geel); color: var(--tekst); }
.knop-geel:hover { background: #F59E0B; color: var(--tekst); }
.kind-week-kaart { display: flex; flex-direction: column; gap: 10px; }
.kind-week-kaart .grafiek { max-width: 420px; }

.terugblik { max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.terugblik-kop { display: flex; align-items: center; gap: 14px; }
.terugblik-kop h1 { font-family: var(--kop); font-size: 26px; }
.terugblik-kop p { color: var(--tekst-2); }
.terugblik-vink { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--groen-zacht); color: var(--groen-knop); display: flex; align-items: center; justify-content: center; }
.terugblik-vraag { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.terugblik-vraag legend { font-size: 19px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.schaal { display: flex; gap: 8px; }
.schaal-knop { flex: 1; }
.schaal-knop input { position: absolute; opacity: 0; pointer-events: none; }
.schaal-knop span { height: 60px; border-radius: 14px; border: 1.5px solid var(--lijn); background: var(--wit); display: flex; align-items: center; justify-content: center; font-family: var(--kop); font-size: 22px; font-weight: 700; cursor: pointer; }
.schaal-knop input:checked + span { border: 2.5px solid var(--blauw); background: var(--blauw-licht); color: var(--blauw-tekst); }
.schaal-knop input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
.schaal-uitleg { display: flex; justify-content: space-between; font-size: 14px; color: var(--tekst-3); }
.reden { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--lijn); background: var(--wit); font-size: 17px; cursor: pointer; }
.reden input { position: absolute; opacity: 0; pointer-events: none; }
.reden-vink { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid #CBD5E1; background: var(--wit); color: transparent; display: flex; align-items: center; justify-content: center; }
.reden:has(input:checked) { border: 2.5px solid var(--paars); background: #F5F3FF; color: #5B21B6; font-weight: 700; }
.reden input:checked + .reden-vink { background: var(--paars); border-color: var(--paars); color: var(--wit); }
.reden input:focus-visible + .reden-vink { outline: 3px solid var(--blauw); outline-offset: 2px; }
.terugblik-uitleg { font-size: 15px; color: var(--tekst-3); }
.terugblik-knoppen { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.terugblik-knoppen .knop { width: 100%; }

/* ---------- Menu onder je naam, Start en taken ---------- */

.tegoed-kort { display: none; }
.account { position: relative; }
.account > summary { list-style: none; }
.account > summary::-webkit-details-marker { display: none; }
.account-knop { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 6px; border-radius: 0; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--tekst); }
.account-knop:hover, .account[open] .account-knop, .account.actief .account-knop { background: #F1F5F9; }
.account-letter { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--blauw); color: var(--wit); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.account-letter-groot { width: 48px; height: 48px; font-size: 20px; }
.account-pijl { display: inline-flex; color: var(--tekst-2); transition: transform .15s; }
.account[open] .account-pijl { transform: rotate(180deg); }
.account-paneel { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; box-shadow: 0 20px 44px rgba(23, 37, 84, .16); padding: 8px; z-index: 50; }
.account-wie { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid var(--lijn); margin-bottom: 6px; }
.account-mail { font-size: 14px; color: var(--tekst-3); word-break: break-all; }
.account-item { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--tekst); font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.account-item:hover { background: var(--achtergrond); color: var(--tekst); text-decoration: none; }
.account-item > .ic { color: var(--tekst-2); flex-shrink: 0; }
.account-item > span { display: flex; flex-direction: column; }
.account-item-titel { font-size: 16px; font-weight: 600; }
.account-item-sub { font-size: 13px; color: var(--tekst-3); }
.account-uit { border-top: 1px solid var(--lijn); margin-top: 6px; padding-top: 6px; }
.account-item-uit, .account-item-uit > .ic { color: #B91C1C; }

.startblok { display: flex; flex-direction: column; gap: 14px; padding: 30px 34px; border-radius: 24px; background: linear-gradient(135deg, var(--blauw-licht) 0%, #FFFBEB 100%); border: 1.5px solid #BFDBFE; scroll-margin-top: 100px; }
.startblok-tekst { display: flex; flex-direction: column; gap: 14px; }
.startblok-label { font-size: 15px; font-weight: 700; color: var(--blauw-tekst); text-transform: uppercase; letter-spacing: .05em; }
.startblok-titel { font-family: var(--kop); font-size: 30px; line-height: 1.15; }
.startblok-upload { display: flex; flex-direction: column; gap: 12px; }
.startblok-knoppen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 18px; }
.startblok-knoppen.slepen { outline: 3px dashed var(--blauw); outline-offset: 6px; }
.startblok-sleep { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 15px; color: var(--tekst-2); }
.startblok .uploadknop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.startblok .uploadknop { position: relative; }
.startblok .uploadlijst { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.startblok-verder { display: none; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.startblok-upload.heeft-bestanden .startblok-verder { display: flex; }

.oogopslag { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.oogopslag-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.mini-tegel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--achtergrond); }
.mini-tegel .tegel-icoon { margin: 0; width: 38px; height: 38px; }
.mini-getal { font-family: var(--kop); font-size: 22px; font-weight: 700; line-height: 1.1; }
.mini-label { font-size: 13px; color: var(--tekst-2); }
.mini-groei { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 14px; }
.mini-groei .grafiek { max-height: 90px; }

.taak { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--wit); border: 1.5px solid var(--lijn); }
.taak .tegel-icoon { margin: 0; width: 46px; height: 46px; }
.taak-let { background: #FFFBEB; border-color: #FCD34D; }
.taak-tekst { flex: 1; min-width: 0; }
.taak-titel { font-size: 17px; font-weight: 700; }
.taak-sub { font-size: 15px; color: var(--tekst-2); margin-top: 2px; }
.taak-balk { max-width: 320px; margin-top: 8px; height: 8px; }
.taak-leeg p { flex: 1; font-size: 17px; color: #334155; }

/* ---------- Lesstof herkennen en filter ---------- */

.poort { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border-radius: 20px; border: 1.5px solid; }
.poort-oranje { background: #FFFBEB; border-color: #FCD34D; }
.poort-rood { background: #FEF2F2; border-color: #FECACA; }
.poort-icoon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--wit); background: #047857; }
.poort-oranje .poort-icoon { background: #D97706; }
.poort-rood .poort-icoon { background: #DC2626; }
.poort-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.poort-tekst h2 { font-family: var(--kop); font-size: 24px; }
.poort-tekst p { font-size: 17px; color: #334155; }
.poort-tekst .knoppen { margin-top: 6px; }
.poort-label { font-size: 14px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #047857 !important; }
.poort-oranje .poort-label { color: #B45309 !important; }
.poort-rood .poort-label { color: #B91C1C !important; }
.herkend-balk { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; background: var(--groen-licht); border: 1px solid #A7F3D0; }
.herkend-balk-titel { font-family: var(--kop); font-size: 22px; font-weight: 700; line-height: 1.25; }
.herkend-balk-sub { font-size: 15px; color: var(--groen-tekst); margin-top: 2px; }
.melding-waarschuwing { background: #FFF7ED; border: 1.5px solid #FDBA74; color: #9A3412; }
.vraagkaart-waarschuwing { border: 2px solid #FDBA74; }
.vraag-waarschuwing { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: #FFF7ED; color: #9A3412; font-size: 15px; }
.vraag-waarschuwing > span { flex: 1; min-width: 220px; }
.actiebalk-let { display: flex; align-items: center; gap: 8px; color: #9A3412; font-weight: 600; }

/* ---------- Homepagina: vier stappen in beweging ---------- */

.hs-vier { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.hs-stap { display: flex; flex-direction: column; gap: 14px; }
.hs-kopje { display: flex; align-items: flex-start; gap: 12px; min-height: 60px; }
.hs-nr { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: var(--geel); color: var(--tekst); display: flex; align-items: center; justify-content: center; font-family: var(--kop); font-size: 25px; font-weight: 700; }
.hs-kopje h3 { font-size: 22px; line-height: 1.15; }
.hs-uitleg { font-size: 16px; color: var(--tekst-2); line-height: 1.55; min-height: 74px; }
.hs-beeld { position: relative; height: 400px; border-radius: 26px; background: #EAF1FB; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hs-s1 .hs-beeld { animation: hs-a1 12s infinite; } .hs-s2 .hs-beeld { animation: hs-a2 12s infinite; }
.hs-s3 .hs-beeld { animation: hs-a3 12s infinite; } .hs-s4 .hs-beeld { animation: hs-a4 12s infinite; }
@keyframes hs-a1 { 0%, 24% { box-shadow: 0 0 0 4px var(--geel); background: #E0ECFF; } 27%, 100% { box-shadow: none; background: #EAF1FB; } }
@keyframes hs-a2 { 0%, 24%, 52%, 100% { box-shadow: none; background: #EAF1FB; } 27%, 49% { box-shadow: 0 0 0 4px var(--geel); background: #E0ECFF; } }
@keyframes hs-a3 { 0%, 49%, 77%, 100% { box-shadow: none; background: #EAF1FB; } 52%, 74% { box-shadow: 0 0 0 4px var(--geel); background: #E0ECFF; } }
@keyframes hs-a4 { 0%, 74% { box-shadow: none; background: #EAF1FB; } 77%, 97% { box-shadow: 0 0 0 4px var(--geel); background: #E0ECFF; } 100% { box-shadow: none; } }
.hs-pijl { position: absolute; top: 330px; width: 26px; height: 26px; margin-left: -13px; color: var(--tekst); z-index: 2; display: flex; }
.hs-pijl-1 { left: 25%; } .hs-pijl-2 { left: 50%; } .hs-pijl-3 { left: 75%; }

/* stap 1: boek en telefoon */
.hs-boek { position: absolute; right: -24px; top: 36px; width: 210px; height: 160px; background: var(--wit); border-radius: 6px; box-shadow: 0 6px 16px rgba(23, 37, 84, .12); transform: rotate(8deg); display: flex; gap: 10px; padding: 14px; box-sizing: border-box; }
.hs-boek > div, .hs-pagina { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.hs-boek b, .hs-pagina b { font-size: 9px; }
.hs-boek i, .hs-pagina i { display: block; height: 3px; border-radius: 2px; background: #CBD5E1; }
.hs-plaat { display: block; height: 56px; border-radius: 4px; background: linear-gradient(135deg, #C2410C, var(--geel)); }
.hs-stapel { position: absolute; right: 8px; bottom: 26px; display: flex; flex-direction: column; gap: 3px; transform: rotate(-4deg); }
.hs-stapel span { width: 140px; padding: 6px 10px; border-radius: 5px; color: var(--wit); font-size: 12px; font-weight: 700; }
.hs-st-blauw { background: var(--blauw); } .hs-st-rood { background: #DC2626; } .hs-st-groen { background: #16A34A; }
.hs-tel { position: relative; width: 158px; height: 300px; border-radius: 26px; background: var(--tekst); padding: 8px; box-sizing: border-box; transform: rotate(-6deg) translateX(-24px); box-shadow: 0 18px 36px rgba(23, 37, 84, .22); }
.hs-zoeker { position: relative; width: 100%; height: 100%; border-radius: 19px; background: #FFFBEB; overflow: hidden; }
.hs-pagina { position: absolute; inset: 26px 12px 70px; background: var(--wit); border-radius: 4px; padding: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.hs-hoek { position: absolute; width: 16px; height: 16px; border: 3px solid var(--geel); animation: hs-hoek 12s infinite; }
.hs-lb { left: 8px; top: 20px; border-right: 0; border-bottom: 0; } .hs-rb { right: 8px; top: 20px; border-left: 0; border-bottom: 0; }
.hs-lo { left: 8px; bottom: 64px; border-right: 0; border-top: 0; } .hs-ro { right: 8px; bottom: 64px; border-left: 0; border-top: 0; }
@keyframes hs-hoek { 0%, 8% { opacity: .3; } 10%, 17% { opacity: 1; } 18%, 100% { opacity: .3; } }
.hs-sluiter { position: absolute; left: 50%; bottom: 14px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--wit); border: 4px solid #CBD5E1; box-sizing: border-box; animation: hs-sluiter 12s infinite; }
@keyframes hs-sluiter { 0%, 16%, 20%, 100% { transform: scale(1); } 18% { transform: scale(.85); } }
.hs-flits { position: absolute; inset: 0; background: var(--wit); opacity: 0; animation: hs-flits 12s infinite; }
@keyframes hs-flits { 0%, 17.5% { opacity: 0; } 18% { opacity: .95; } 21%, 100% { opacity: 0; } }
.hs-gelukt { position: absolute; left: 50%; top: 44%; padding: 6px 10px; border-radius: 10px; background: var(--groen); color: var(--wit); font-size: 11px; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%) scale(0); animation: hs-gelukt 12s infinite; }
@keyframes hs-gelukt { 0%, 20% { transform: translate(-50%, -50%) scale(0); } 22% { transform: translate(-50%, -50%) scale(1.1); } 23%, 25% { transform: translate(-50%, -50%) scale(1); } 27%, 100% { transform: translate(-50%, -50%) scale(0); } }

/* stap 2 en 3: kaartje van Slimme Start */
.hs-kaart { width: 232px; background: var(--wit); border: 5px solid var(--tekst); border-radius: 22px; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 14px 30px rgba(23, 37, 84, .12); }
.hs-logo { display: flex; align-items: center; gap: 8px; font-family: var(--kop); font-size: 15px; font-weight: 700; }
.hs-logo span { width: 26px; height: 26px; border-radius: 8px; background: var(--geel); display: flex; align-items: center; justify-content: center; }
.hs-maak { padding: 14px; border-radius: 14px; background: var(--achtergrond); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hs-maak p { font-size: 14px; font-weight: 700; }
.hs-tandwiel { color: var(--blauw); display: flex; animation: hs-draai 12s linear infinite; }
@keyframes hs-draai { 0%, 25% { transform: rotate(0); } 50%, 100% { transform: rotate(360deg); } }
.hs-voortgang { width: 100%; height: 8px; border-radius: 4px; background: var(--lijn); overflow: hidden; }
.hs-voortgang span { display: block; height: 100%; background: var(--blauw); animation: hs-vg 12s infinite; }
@keyframes hs-vg { 0%, 26% { width: 0; } 48%, 100% { width: 100%; } }
.hs-lijst { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.hs-lijst div { display: flex; align-items: center; gap: 8px; }
.hs-lijst em { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--lijn); color: var(--wit); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; }
.hs-k1 em { animation: hs-k1 12s infinite; } .hs-k2 em { animation: hs-k2 12s infinite; } .hs-k3 em { animation: hs-k3 12s infinite; } .hs-k4 em { animation: hs-k4 12s infinite; }
@keyframes hs-k1 { 0%, 30% { background: var(--lijn); } 32%, 97% { background: var(--groen-fel); } 100% { background: var(--lijn); } }
@keyframes hs-k2 { 0%, 35% { background: var(--lijn); } 37%, 97% { background: var(--groen-fel); } 100% { background: var(--lijn); } }
@keyframes hs-k3 { 0%, 41% { background: var(--lijn); } 43%, 97% { background: var(--groen-fel); } 100% { background: var(--lijn); } }
@keyframes hs-k4 { 0%, 46% { background: var(--lijn); } 48%, 97% { background: var(--groen-fel); } 100% { background: var(--lijn); } }
.hs-vraag { padding: 12px; border-radius: 14px; border: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 7px; }
.hs-vraag small { font-size: 11px; color: var(--tekst-2); font-weight: 700; }
.hs-vraag strong { font-size: 13px; line-height: 1.35; }
.hs-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font-size: 12px; }
.hs-opt b { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #CBD5E1; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.hs-opt-goed { animation: hs-og 12s infinite; }
@keyframes hs-og { 0%, 56% { background: transparent; } 59%, 97% { background: var(--blauw-zacht); } 100% { background: transparent; } }
.hs-opt-goed b { animation: hs-ob 12s infinite; }
@keyframes hs-ob { 0%, 56% { background: var(--wit); border-color: #CBD5E1; box-shadow: none; } 59%, 97% { background: var(--blauw); border-color: var(--blauw); box-shadow: inset 0 0 0 4px var(--wit); } 100% { background: var(--wit); } }
.hs-klaar { height: 40px; border-radius: 12px; background: var(--blauw); color: var(--wit); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; animation: hs-kk 12s infinite; }
@keyframes hs-kk { 0%, 66%, 70%, 100% { transform: none; } 68% { transform: scale(.94); } }

/* stap 4: chat */
.hs-tel-chat { width: 196px; height: 360px; transform: rotate(5deg); }
.hs-chat { width: 100%; height: 100%; border-radius: 20px; background: #ECE5DD; overflow: hidden; display: flex; flex-direction: column; }
.hs-chat-kop { background: #075E54; color: var(--wit); padding: 24px 12px 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.hs-chat-kop > span { width: 28px; height: 28px; border-radius: 50%; background: var(--geel); color: var(--tekst); display: flex; align-items: center; justify-content: center; }
.hs-chat-kop small { display: block; font-weight: 400; font-size: 10px; opacity: .85; }
.hs-chat-lijf { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.hs-bel { max-width: 85%; padding: 8px 10px; border-radius: 12px; font-size: 12px; line-height: 1.4; opacity: 0; transform: translateY(8px); }
.hs-bel u { color: #1D4ED8; word-break: break-all; }
.hs-bel-uit { align-self: flex-end; background: #DCF8C6; animation: hs-b1 12s infinite; }
.hs-bel-in { align-self: flex-start; background: var(--wit); animation: hs-b2 12s infinite; }
@keyframes hs-b1 { 0%, 78% { opacity: 0; transform: translateY(8px); } 81%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hs-b2 { 0%, 88% { opacity: 0; transform: translateY(8px); } 91%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hs-typen { align-self: flex-start; background: var(--wit); padding: 8px 10px; border-radius: 12px; display: flex; gap: 3px; opacity: 0; animation: hs-typ 12s infinite; }
.hs-typen i { width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; }
@keyframes hs-typ { 0%, 83% { opacity: 0; } 84%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
.hs-via { position: absolute; right: 14px; top: 14px; padding: 6px 10px; border-radius: 12px; background: #16A34A; color: var(--wit); font-size: 12px; font-weight: 700; z-index: 2; }

/* ---------- Homepagina: taalcarrousel ---------- */

.home-taal { overflow: hidden; }
.tc-links { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tc-podium { --straal: 230px; position: relative; width: 460px; height: 560px; perspective: 1100px; touch-action: pan-y; }
.tc-ring { --draai: 0deg; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--straal) * -1)) rotateY(var(--draai)); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.tc-tel { position: absolute; left: 50%; top: 10px; width: 270px; height: 540px; margin-left: -135px; border-radius: 42px; background: var(--tekst); padding: 11px; box-sizing: border-box; box-shadow: 0 30px 60px rgba(23, 37, 84, .25); backface-visibility: hidden; transform: rotateY(var(--hoek)) translateZ(var(--straal)); filter: blur(2px) saturate(.6); opacity: .55; transition: filter .9s, opacity .9s; }
.tc-tel.voor { filter: none; opacity: 1; }
.tc-scherm { position: relative; width: 100%; height: 100%; border-radius: 32px; background: var(--achtergrond); overflow: hidden; padding: 44px 15px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; }
.tc-notch { position: absolute; top: 8px; left: 50%; width: 86px; height: 22px; margin-left: -43px; border-radius: 12px; background: var(--tekst); }
.tc-scherm .mq-antwoorden { margin-top: auto; }
.tc-luid { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--blauw); color: var(--wit); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tc-tel.voor .tc-luid { animation: tc-puls 4s infinite; }
@keyframes tc-puls { 0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); } 72% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } }
.tc-tel.voor .tc-goed { animation: tc-goed 4s forwards; }
@keyframes tc-goed { 0%, 50% { border-color: var(--lijn); background: var(--wit); } 60%, 100% { border-color: var(--groen-fel); background: var(--groen-zacht); color: var(--groen-tekst); font-weight: 700; } }
.tc-schaduw { position: absolute; left: 50%; bottom: -6px; width: 320px; height: 30px; margin-left: -160px; border-radius: 50%; background: radial-gradient(rgba(23, 37, 84, .18), transparent 70%); }
.tc-pillen { display: flex; gap: 8px; }
.tc-pil { position: relative; overflow: hidden; min-width: 100px; height: 46px; padding: 0 16px; border-radius: 23px; border: 1.5px solid #BFDBFE; background: var(--wit); color: var(--blauw-tekst); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.tc-pil.actief { background: var(--blauw); color: var(--wit); border-color: var(--blauw); }
.tc-pil > span:first-child { position: relative; z-index: 1; }
.tc-pil-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.tc-pil-balk span { display: block; height: 100%; width: 0; background: var(--geel); }
.loopt .tc-pil.actief .tc-pil-balk span { animation: tc-balk 4s linear forwards; }
@keyframes tc-balk { from { width: 0; } to { width: 100%; } }
.tc-hint { font-size: 14px; color: var(--tekst-2); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hs-vier *, .tc-links * { animation: none !important; transition: none !important; }
  .hs-bel, .hs-gelukt { opacity: 1 !important; transform: none !important; }
  .hs-gelukt, .hs-typen, .hs-flits { display: none; }
  .tc-tel:not(.voor) { display: none; }
}

/* ---------- Formules en plaatjes uit de lesstof ---------- */

math.formule { font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', 'Times New Roman', serif; font-size: 1.15em; }
.spel-vraag math.formule { font-size: 1.25em; }
.antwoord math.formule, .optie-tekst math.formule { font-size: 1.1em; }
.kader-stap { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.kader-foto { position: relative; flex: 0 1 460px; max-width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(23, 37, 84, .15); touch-action: none; user-select: none; }
.kader-foto img { display: block; width: 100%; height: auto; pointer-events: none; }
.kader { position: absolute; border: 3px dashed var(--blauw); border-radius: 6px; background: rgba(37, 99, 235, .08); cursor: move; box-sizing: border-box; }
.kader-label { position: absolute; left: 6px; top: 6px; padding: 4px 10px; border-radius: 8px; background: var(--blauw); color: var(--wit); font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.kader-hoek { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--wit); border: 3px solid var(--blauw); box-sizing: border-box; }
.kader-lb { left: -12px; top: -12px; cursor: nwse-resize; } .kader-rb { right: -12px; top: -12px; cursor: nesw-resize; }
.kader-lo { left: -12px; bottom: -12px; cursor: nesw-resize; } .kader-ro { right: -12px; bottom: -12px; cursor: nwse-resize; }
.kader-tekst { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.kader-tekst h2 { font-family: var(--kop); font-size: 26px; line-height: 1.2; }
.kader-tekst p { font-size: 17px; color: #334155; }
.kader-label-kop { color: var(--blauw) !important; }
.plaatjes-klaar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.plaatjes-klaar figure { margin: 0; width: 150px; }
.plaatjes-klaar img { width: 100%; height: 110px; object-fit: contain; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; }
.plaatjes-klaar figcaption { font-size: 13px; color: var(--tekst-2); margin-top: 4px; }
.plaatjes-klaar .hint { flex-basis: 100%; }
.plaatje-weg { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--tekst-2); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.plaatje-weg:hover { color: var(--tekst); }
.vraag-plaatje { margin: 0 0 12px; }
.vraag-plaatje img { max-width: 100%; max-height: 280px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--wit); }
.spel-plaatje { position: relative; display: flex; justify-content: center; padding: 8px; border: 1px solid var(--lijn); border-radius: 18px; background: var(--wit); cursor: zoom-in; }
.spel-plaatje img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; }
.spel-plaatje-zoom { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 12px; background: rgba(23, 37, 84, .75); color: var(--wit); display: flex; align-items: center; justify-content: center; }
.plaatje-groot { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.plaatje-groot img { max-width: 100%; max-height: 100%; border-radius: 12px; background: var(--wit); }
.plaatje-sluit { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top)); width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--wit); color: var(--tekst); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.terug-plaatje { max-width: 100%; max-height: 180px; border-radius: 10px; border: 1px solid var(--lijn); margin-bottom: 8px; }

/* ---------- Bonusquizzen ---------- */

.bonus-blok { gap: 14px; }
.bonus-banner { padding: 20px; border-radius: 22px; background: linear-gradient(135deg, var(--paars) 0%, #A855F7 100%); color: var(--wit); display: flex; flex-direction: column; gap: 6px; }
.bonus-banner-label { font-size: 13px; font-weight: 700; color: #EDE9FE; text-transform: uppercase; letter-spacing: .05em; }
.bonus-banner-titel { font-family: var(--kop); font-size: 22px; font-weight: 700; line-height: 1.2; }
.bonus-banner-sub { font-size: 15px; color: #EDE9FE; }
.bonus-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bonus-tegel { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--wit); border: 1.5px solid #DDD6FE; color: var(--tekst); text-decoration: none; }
a.bonus-tegel:hover { border-color: var(--paars); color: var(--tekst); text-decoration: none; }
.bonus-tegel .tegel-icoon { margin: 0; width: 46px; height: 46px; }
.bonus-titel { font-size: 17px; font-weight: 700; line-height: 1.25; }
.bonus-sub { font-size: 14px; color: var(--tekst-2); }
.bonus-status { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 14px; font-weight: 700; color: #6D28D9; }
.bonus-slot { opacity: .6; border-color: var(--lijn); }
.bonus-slot .bonus-status { color: var(--tekst-3); }
.bonus-hint { display: flex; align-items: center; gap: 8px; }
.bonus-instelling { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bonus-instelling > div { flex: 1; min-width: 240px; }
.spel-figuur { display: flex; justify-content: center; padding: 16px; border-radius: 18px; background: var(--wit); border: 1px solid var(--lijn); }
.figuur-vlag { width: 200px; height: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.figuur-pizza { width: 150px; height: 150px; }

/* ---------- Bonusquizzen voor ouders ---------- */

.bonus-kop { margin-top: 10px; }
.bonus-ouder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.bonus-ouder-kaart { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid #DDD6FE; }
.bonus-ouder-kaart .tegel-icoon { margin: 0; width: 52px; height: 52px; }
.bonus-ouder-kaart h2 { font-size: 21px; }
.bonus-ouder-kaart .knoppen { margin-top: auto; }
.bonus-stand { padding: 10px 12px; border-radius: 10px; background: #F5F3FF; color: #5B21B6; font-size: 14px; font-weight: 600; }
.bonus-start { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 20px; background: linear-gradient(135deg, var(--paars) 0%, #A855F7 100%); color: var(--wit); text-decoration: none; }
.bonus-start:hover { color: var(--wit); text-decoration: none; filter: brightness(1.05); }
.bonus-start-icoon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 15px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; }
.bonus-start-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bonus-start-tekst strong { font-family: var(--kop); font-size: 22px; }
.bonus-start-tekst span { font-size: 16px; color: #EDE9FE; }
.bonus-start-pijl { font-weight: 700; white-space: nowrap; }
.bonus-figuur-klein { margin-bottom: 10px; }
.bonus-figuur-klein .figuur-vlag { width: 120px; }
.bonus-figuur-klein .figuur-pizza, .bonus-figuur-klein .figuur-tekening { width: 110px; height: 110px; }
.bonus-speel { max-width: 720px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.bonus-speel-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.bonus-speel-score { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; color: #B45309; }
.bonus-speel-balk > span { background: var(--paars); }
.bonus-speel-kaart { display: flex; flex-direction: column; gap: 14px; }
.bonus-speel-nr { font-size: 14px; font-weight: 700; }
.bonus-figuur { display: flex; justify-content: center; padding: 14px; border-radius: 16px; background: var(--achtergrond); }
.bonus-speel-vraag { font-family: var(--kop); font-size: 24px; line-height: 1.3; }
.bonus-speel-opties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bonus-optie { min-height: 60px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--lijn); background: var(--wit); color: var(--tekst); font-family: inherit; font-size: 17px; text-align: left; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.bonus-optie:hover:not(:disabled) { border-color: var(--paars); }
.bonus-optie-letter { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.bonus-optie.dim { opacity: .5; }
.bonus-optie.goed { border: 3px solid var(--groen-fel); background: var(--groen-zacht); color: var(--groen-tekst); font-weight: 700; opacity: 1; }
.bonus-optie.fout { border: 3px solid #DC2626; background: var(--rood-licht); color: var(--rood-tekst); font-weight: 700; }
.bonus-speel-melding { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; }
.bonus-speel-melding.is-goed { background: var(--groen-licht); color: var(--groen-tekst); }
.bonus-speel-melding.is-fout { background: var(--rood-licht); color: var(--rood-tekst); }
.bonus-speel-melding-titel { font-size: 19px; font-weight: 700; }
.bonus-speel-melding .knop { align-self: flex-start; margin-top: 4px; }
.bonus-speel-klaar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 24px; }
.bonus-speel-klaar .klaar-icoon { background: var(--paars-zacht); color: var(--paars); }
.figuur-land { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.figuur-onderschrift { font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.figuur-tekening { width: 140px; height: 160px; }
.figuur-foto { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.figuur-foto img { max-width: 100%; max-height: 240px; border-radius: 12px; }
.figuur-foto figcaption { font-size: 12px; color: var(--tekst-3); }
.figuur-foto figcaption a { color: var(--tekst-3); }

/* ---------- Bonus in werelden, rustige bonusregel en interesses ---------- */

.zw-roze { background: #FCE7F3; color: #9D174D; }
.bonus-label { font-size: 14px; font-weight: 700; color: #6D28D9; }
.bonus-scheiding { border: 0; border-top: 1px solid var(--lijn); margin: 8px 0 0; }
.bonus-rustig { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--wit); border: 1px dashed #C4B5FD; color: var(--tekst); text-decoration: none; }
.bonus-rustig:hover { border-color: var(--paars); color: var(--tekst); text-decoration: none; }
.bonus-rustig-kop { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tekst-2); }
.bonus-rustig-kop > span:nth-child(2) { flex: 1; }
.bonus-rustig-pijl { font-weight: 700; color: #6D28D9; white-space: nowrap; }
.bonus-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bonus-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; font-size: 13px; font-weight: 700; }
.bonus-chip-meer { display: inline-flex; align-items: center; height: 34px; padding: 0 8px; font-size: 13px; font-weight: 700; color: #6D28D9; }
.wereld-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.wereld-tabs::-webkit-scrollbar { display: none; }
.wereld-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 21px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.wereld-tab:hover { text-decoration: none; filter: brightness(.97); }
.wereld-tab.actief { box-shadow: inset 0 0 0 2.5px currentColor; }
.wereld-kop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; }
.wereld-emoji { font-size: 30px; }
.wereld-kop > div { flex: 1; }
.wereld-naam { font-size: 18px; font-weight: 700; }
.wereld-sub { font-size: 14px; }
.wereld-sterren { font-size: 16px; font-weight: 700; color: #B45309; }
.bonus-sterren { display: flex; gap: 2px; font-size: 18px; color: #CBD5E1; }
.bonus-sterren .aan { color: #F59E0B; }
.wereld-lijst { display: flex; flex-direction: column; gap: 12px; }
.wereld-item { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; }
.wereld-item > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.wereld-item > summary::-webkit-details-marker { display: none; }
.wereld-emoji-klein { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.wereld-item-naam { flex: 1; font-size: 17px; font-weight: 700; }
.wereld-item-pijl { display: flex; color: var(--tekst-2); transition: transform .15s; }
.wereld-item[open] .wereld-item-pijl { transform: rotate(180deg); }
.wereld-themas { padding: 0 18px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wereld-thema { padding: 16px; border-radius: 14px; background: var(--achtergrond); display: flex; flex-direction: column; gap: 6px; }
.wereld-thema-titel { font-size: 17px; font-weight: 700; }
.bonus-stand-klein { font-size: 13px; font-weight: 600; color: #5B21B6; }
.wereld-thema-links { display: flex; gap: 14px; margin-top: 4px; font-size: 14px; font-weight: 700; }
.link-paars { color: #6D28D9; }
.interesses { border: 1px dashed #C4B5FD; display: flex; flex-direction: column; gap: 14px; }
.interesse-lijst { display: flex; flex-direction: column; gap: 6px; }
.interesse-rij { display: grid; grid-template-columns: 34px minmax(140px, 220px) 1fr 160px 56px; align-items: center; gap: 12px; }
.interesse-leeg { opacity: .55; }
.interesse-emoji { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.interesse-naam { font-size: 16px; font-weight: 600; }
.interesse-balk { height: 14px; }
.zw-groen-balk { background: #059669 !important; } .zw-oranje-balk { background: #C2410C !important; } .zw-geel-balk { background: #D97706 !important; }
.zw-roze-balk { background: #DB2777 !important; } .zw-blauw-balk { background: #2563EB !important; } .zw-paars-balk { background: #7C3AED !important; }
.interesse-keer { font-size: 14px; color: var(--tekst-2); }
.interesse-sterren { font-size: 14px; font-weight: 700; color: #B45309; text-align: right; }

/* ---------- Responsief ---------- */

@media (max-width: 1100px) {
  .hoofdmenu a { padding: 0 12px; font-size: 16px; }
  .account-naam, .account-menu .link-knop { display: none; }
  .resultaat, .registreer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body.ouder { padding-bottom: 88px; }
  .topbalk { height: 68px; padding: 0 16px; gap: 12px; }
  .hoofdmenu { display: none; }
  .logo-tekst { font-size: 19px; }
  .tegoed-knop { height: 42px; padding: 0 12px; font-size: 15px; }
  .tabbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 80px; background: var(--wit); border-top: 1px solid var(--lijn); padding-bottom: env(safe-area-inset-bottom); }
  .tabbalk a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--tekst-2); text-decoration: none; }
  .tabbalk a.actief { color: #121A3F; font-weight: 700; }
  /* Telefoon: navy streep boven het actieve onderdeel, geen pil */
  .tabbalk a { margin: 0; border-radius: 0; box-shadow: inset 0 3px 0 transparent; }
  .tabbalk a.actief { background: transparent; box-shadow: inset 0 3px 0 #121A3F; }
  .tegoed-lang, .account-naam, .account-pijl { display: none; }
  .tegoed-kort { display: inline; }
  .account-knop { padding: 0; height: 44px; }
  .account-knop:hover, .account[open] .account-knop, .account.actief .account-knop { background: transparent; }
  /* Het menu onder je naam schuift van onderen in beeld */
  .account[open]::before { content: ''; position: fixed; inset: 0; background: rgba(23, 37, 84, .4); z-index: 49; }
  .account-paneel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 24px 24px 0 0; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; animation: omhoog .2s ease-out; }
  .account-paneel::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #CBD5E1; margin: 0 auto 10px; }
  .account-item { min-height: 56px; }
  .topbalk:has(.account[open]) { z-index: 60; }
  .startblok { padding: 22px 18px; border-radius: 22px; }
  .startblok-titel { font-size: 24px; }
  .startblok-knoppen { flex-direction: column; align-items: stretch; }
  .startblok-knoppen .knop { width: 100%; }
  .startblok-sleep { display: none; }
  .startblok-verder .knop { width: 100%; }
  .oogopslag { padding: 16px; }
  .oogopslag-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mini-tegel { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px; }
  .mini-tegel .tegel-icoon { display: none; }
  .mini-getal { font-size: 18px; }
  .mini-label { font-size: 12px; }
  .mini-groei { grid-column: 1 / -1; }
  .taak { flex-wrap: wrap; padding: 16px; }
  .taak .knop { width: 100%; }
  .poort { flex-direction: column; padding: 20px; }
  .kader-foto { flex-basis: 100%; }
  .spel-plaatje img { max-height: 200px; }
  .bonus-tegels { grid-template-columns: 1fr 1fr; }
  .bonus-speel-opties { grid-template-columns: 1fr; }
  .interesse-rij { grid-template-columns: 30px 1fr 50px; }
  .interesse-balk, .interesse-keer { grid-column: 2 / 4; }
  .bonus-rustig-kop { flex-wrap: wrap; }
  .bonus-start { flex-wrap: wrap; padding: 18px; }
  .bonus-start-tekst strong { font-size: 20px; }
  .figuur-vlag { width: 160px; }
  .figuur-pizza { width: 130px; height: 130px; }
  .poort-tekst .knoppen form, .poort-tekst .knoppen .knop { width: 100%; }
  .herkend-balk { align-items: flex-start; }
  .herkend-balk-titel { font-size: 19px; }
  .inhoud { padding: 24px 16px 40px; gap: 22px; }
  .titel, .kind-titel, .resultaat-titel { font-size: 30px; }
  .sub { font-size: 17px; }
  .kaart { padding: 22px 20px; }
  .actiekaarten, .pakketten, .raster-3, .kind-raster, .antwoorden, .quizkaarten { grid-template-columns: minmax(0, 1fr); }
  .uitleg-stappen { flex-direction: column; gap: 16px; }
  .coach-vakjes, .coach-twee { grid-template-columns: minmax(0, 1fr); }
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tegels-drie, .grafieken { grid-template-columns: minmax(0, 1fr); }
  .toetskaart { flex-wrap: wrap; gap: 18px; padding: 22px; }
  .toetskaart-titel { font-size: 22px; }
  .toetskaart .ring { width: 96px !important; height: 96px !important; }
  .toetskaart-dagen { font-size: 32px; padding: 10px 14px; }
  .qko-kop { flex-wrap: wrap; }
  .qko-kop .badge { order: 3; }
  .coach-regel { flex-wrap: wrap; }
  .klaar-scherm { padding: 28px 18px; }
  .quizrij .status-pil { white-space: normal; }
  .uitleg-stappen ol { grid-template-columns: minmax(0, 1fr); }
  .stap span:not(.stap-bol) { display: none; }
  .stap-actief span:not(.stap-bol) { display: inline; }
  .inlogstap-rij { flex-direction: column; }
  .kind-kop { padding: 12px 16px; }
  .kind-inhoud { padding: 8px 16px 40px; }
  .spel-kaart, .resultaat-hoofd, .tussenscherm { padding: 24px 20px; }
  .spel-vraag { font-size: 23px; }
  .actiebalk-inhoud { padding: 12px 16px; }
  .actiebalk-inhoud p { display: none; }
  .actiebalk-inhoud .knop { width: 100%; }
  /* Uploaden op de telefoon: geen sleepvak, knoppen onder elkaar, verder-knop blijft in beeld */
  .uploadvak { border: 0; background: transparent; padding: 0; }
  .uploadvak-icoon, .uploadvak-titel, .uploadvak-sub { display: none; }
  .upload-knoppen { flex-direction: column; align-items: stretch; width: 100%; }
  .upload-knoppen .knop { width: 100%; }
  .uploadlijst { grid-template-columns: minmax(0, 1fr); }
  .formulier-voet.plakt { position: sticky; bottom: 80px; z-index: 5; background: var(--achtergrond); padding: 12px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-top: 1px solid var(--lijn); }
  .formulier-voet.plakt .hint { display: none; }
  .formulier-voet.plakt .knop { width: 100%; }
}

@media (max-width: 560px) {
  .raster-2, .uitslagblokken { grid-template-columns: minmax(0, 1fr); }
  .voortgang { flex-wrap: wrap; }
  .kind-kop .logo-tekst { display: none; }
  .knop { width: 100%; }
  .knoppen .knop, .kindopties .kindoptie { width: 100%; }
}

/* ---------- Kindomgeving op de telefoon ---------- */

@media (max-width: 700px) {
  body.kind { background: var(--achtergrond); }
  .kind-kop { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .kind-kop .logo-tekst { display: none; }
  .kind-kop .logo-teken { width: 36px; height: 36px; }
  .kind-inhoud { padding: 4px 18px 32px; gap: 22px; }
  .kind-titel { font-size: 28px; }
  .kind-titelrij { gap: 4px; }
  .kind-week { font-size: 16px; }
  .kind-blok h2, .kind-kaart h2 { font-size: 20px; }
  .kind-blok { gap: 10px; }
  .quizkaart { padding: 18px; border-radius: 20px; }
  .quizkaart-kop { gap: 14px; }
  .vak-icoon { width: 48px; height: 48px; border-radius: 14px; }
  .quizkaart-titel { font-size: 18px; }
  .quizkaart .knop { min-height: 54px; font-size: 18px; }
  .kind-kaart { padding: 18px; border-radius: 20px; }

  /* Pincode: geen kaart, groot toetsenbord */
  .pin-scherm { min-height: 100dvh; justify-content: flex-start; padding: max(28px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); gap: 16px; }
  .pin-scherm > .logo { display: none; }
  .pin-kaart { background: transparent; border: 0; padding: 0; max-width: none; flex: 1; gap: 10px; }
  .pin-kaart .avatar-xl { width: 76px; height: 76px; font-size: 34px; }
  .pin-titel { font-size: 30px; margin-top: 6px; }
  .pin-sub { font-size: 17px; }
  .pin-form { flex: 1; gap: 16px; }
  .pin-bolletjes-groot { margin: 12px 0 auto; gap: 18px; }
  .toetsen { gap: 12px; }
  .toets { min-height: 64px; border-radius: 18px; font-size: 28px; }
  .pin-voet { font-size: 14px; color: var(--tekst-3); padding: 0 16px; }

  /* Quiz: compacte kop, antwoorden onderaan binnen duimbereik */
  .kind-quiz .kind-kop, .kind-quiz .voortgang { display: none; }
  .kind-quiz .kind-inhoud { padding: 0 18px; gap: 0; min-height: 100dvh; }
  .quizkop { display: flex; align-items: center; gap: 12px; height: 60px; padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 10; background: var(--achtergrond); }
  .quizkop-stop { width: 44px; height: 44px; margin-left: -8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--tekst-2); flex-shrink: 0; }
  .quizkop .balk-dik { height: 12px; }
  .quizkop .voortgang-score { font-size: 17px; }
  .spel { flex: 1; display: flex; }
  .spel-kaart { background: transparent; border: 0; border-radius: 0; padding: 8px 0 max(24px, env(safe-area-inset-bottom)); gap: 14px; min-height: calc(100dvh - 60px); }
  .spel-labels .spel-vak { display: none; }
  .spel-labels:not(:has(.ronde-label:not([hidden]))) { display: none; }
  .spel-meta { display: block; font-size: 14px; font-weight: 700; color: var(--tekst-2); }
  .spel-vraag { font-size: 23px; line-height: 1.3; }
  .antwoorden { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: auto; padding-top: 16px; }
  .antwoord { min-height: 60px; padding: 10px 14px; font-size: 17px; line-height: 1.3; gap: 12px; }
  .antwoord-letter { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
  .vreemd-blok { align-self: stretch; padding: 14px 16px; }
  .vreemd-woord { font-size: 24px; }
  .luister-blok { padding: 16px 0 4px; }
  .antwoord-rij .spreek-knop { width: 44px; height: 44px; }

  /* Goed of fout schuift van onderen in beeld */
  .spel-melding { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-radius: 24px 24px 0 0; border-width: 1px 0 0 0; padding: 20px 20px max(26px, env(safe-area-inset-bottom)); gap: 14px; animation: omhoog .2s ease-out; }
  .spel-melding-icoon { width: 44px; height: 44px; }
  .spel-melding-titel { font-size: 20px; }
  .spel-melding-sub { font-size: 15px; }
  .aftellen { flex-basis: 100%; width: 100%; font-size: 0; text-align: left; }
  .aftellen-balk { margin-top: 0; }
  .spel-kaart.met-melding { padding-bottom: 150px; }

  /* Ronde klaar */
  .tussenscherm { background: transparent; border: 0; border-radius: 0; padding: 24px 6px max(24px, env(safe-area-inset-bottom)); min-height: calc(100dvh - 60px); gap: 16px; }
  .tussenscherm::before { content: ''; flex: 1; }
  .tussenscherm h1 { font-size: 28px; }
  .tussenscherm p { font-size: 17px; }
  .tussenscherm .knop { width: 100%; margin-top: auto; }
  .ster-rond { width: 96px; height: 96px; }

  /* Resultaat */
  .resultaat { gap: 18px; }
  .resultaat-hoofd { background: transparent; border: 0; padding: 12px 0 0; gap: 14px; }
  .scorecirkel, .scorecirkel svg { width: 150px; height: 150px; }
  .resultaat-titel { font-size: 28px; }
  .resultaat-zin { font-size: 17px; }
  .uitslagblokken { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .uitslag { padding: 12px; }
  .uitslag-getal { font-size: 26px; }
  .resultaat-hoofd .knop { width: 100%; }
}

@keyframes omhoog { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Homepagina ---------- */

html:has(body.home) { scroll-behavior: smooth; }
body.home { background: var(--achtergrond); }
.home h1, .home h2, .home h3 { font-family: var(--kop); }
.home-kop { max-width: 1280px; margin: 0 auto; height: 84px; padding: 0 48px; display: flex; align-items: center; gap: 36px; }
.home-kop .logo-teken { width: 42px; height: 42px; }
.home-kop .logo-tekst { font-size: 23px; }
.home-nav { display: flex; gap: 28px; }
.home-nav a { color: #334155; font-size: 17px; font-weight: 500; }
.home-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.home-inloggen { font-size: 17px; font-weight: 600; color: var(--tekst); }

.home-hero { background: linear-gradient(180deg, var(--achtergrond) 0%, #FFFBEB 100%); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 520px; align-items: center; gap: 40px; padding: 40px max(48px, calc((100% - 1184px) / 2)) 80px; }
.home-hero-tekst { display: flex; flex-direction: column; gap: 24px; }
.home-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: var(--geel-zacht); color: var(--geel-tekst); font-size: 15px; font-weight: 700; }
.home-hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: -.01em; }
.home-accent { color: var(--blauw); }
.home-intro { font-size: 21px; color: #334155; line-height: 1.55; max-width: 36ch; }
.home-vinkjes { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 16px; color: #334155; }
.home-vinkjes li { display: inline-flex; align-items: center; gap: 6px; }
.home-vinkjes .ic, .home-lijst .ic { color: var(--groen); }

.home-hero-beeld { position: relative; height: 660px; display: flex; justify-content: center; align-items: center; }
.home-gloed { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, var(--geel-zacht) 0%, var(--blauw-zacht) 70%, transparent 71%); }
.telefoon { position: relative; width: 300px; height: 610px; border-radius: 44px; background: var(--tekst); padding: 12px; box-shadow: 0 30px 60px rgba(23, 37, 84, .25); }
.telefoon-klein { width: 260px; height: 520px; }
.telefoon-scherm { position: relative; width: 100%; height: 100%; border-radius: 34px; background: var(--achtergrond); overflow: hidden; display: flex; flex-direction: column; }
.telefoon-notch { height: 30px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.telefoon-notch span { width: 90px; height: 22px; border-radius: 12px; background: var(--tekst); }
.mq-kop { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--tekst-2); }
.mq-balk { flex: 1; height: 8px; border-radius: 4px; background: var(--lijn); overflow: hidden; }
.mq-balk span { display: block; height: 100%; background: var(--groen-fel); }
.mq-score { font-size: 12px; font-weight: 700; color: #B45309; }
.mq-inhoud { flex: 1; padding: 6px 14px 70px; display: flex; flex-direction: column; gap: 8px; }
.mq-meta { font-size: 10px; font-weight: 700; color: var(--tekst-2); }
.mq-vraag { font-family: var(--kop); font-size: 17px; font-weight: 700; line-height: 1.3; }
.mq-antwoorden { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.mq-antwoord { min-height: 40px; padding: 7px 10px; border-radius: 12px; border: 2px solid var(--lijn); background: var(--wit); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.mq-antwoord b { width: 24px; height: 24px; border-radius: 7px; background: #F1F5F9; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.mq-goed { border-color: var(--groen-fel); background: var(--groen-zacht); color: var(--groen-tekst); font-weight: 700; }
.mq-goed b { background: var(--groen-knop); color: var(--wit); }
.mq-dim { color: #94A3B8; }
.mq-melding { position: absolute; left: 0; right: 0; bottom: 0; background: var(--groen-licht); border-top: 1px solid #A7F3D0; border-radius: 18px 18px 0 0; padding: 12px 14px 16px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--groen-tekst); }
.mq-melding span { width: 30px; height: 30px; border-radius: 50%; background: var(--groen-knop); color: var(--wit); display: flex; align-items: center; justify-content: center; }
.mq-woord { padding: 12px; border-radius: 14px; background: var(--wit); border: 1px solid var(--blauw-zacht); display: flex; align-items: center; gap: 10px; }
.mq-woord div { flex: 1; font-family: var(--kop); font-size: 19px; font-weight: 700; }
.mq-uitspraak { font-family: var(--letter); font-size: 12px; font-style: italic; font-weight: 500; color: #6D28D9; }
.mq-woord > span { width: 42px; height: 42px; border-radius: 50%; background: var(--blauw); color: var(--wit); display: flex; align-items: center; justify-content: center; }
.zwevend { position: absolute; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 14px 16px; box-shadow: 0 14px 30px rgba(23, 37, 84, .12); display: flex; align-items: center; gap: 12px; }
.zwevend p { font-size: 12px; color: var(--tekst-2); }
.zwevend p:first-child { font-size: 14px; font-weight: 700; color: var(--tekst); }
.zwevend-1 { left: -10px; top: 90px; }
.zwevend-2 { right: -20px; top: 300px; }
.zwevend-3 { left: 0; bottom: 70px; }
.zw-icoon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.zw-blauw { background: var(--blauw-zacht); color: var(--blauw-tekst); }
.zw-groen { background: var(--groen-zacht); color: var(--groen-tekst); }
.zw-paars { background: var(--paars-zacht); color: #6D28D9; }

.home-sectie { padding: 90px max(48px, calc((100% - 1184px) / 2)); display: flex; flex-direction: column; gap: 40px; }
.home-wit { background: var(--wit); }
.home-sectiekop { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.home-sectiekop h2 { font-size: clamp(30px, 3.6vw, 44px); max-width: 24ch; line-height: 1.15; }
.home-sectiekop .home-intro { max-width: none; font-size: 19px; color: var(--tekst-2); }
.home-label { font-size: 16px; font-weight: 700; color: var(--blauw); text-transform: uppercase; letter-spacing: .06em; }
.home-label-paars { color: #6D28D9; }
.home-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.belofte { background: var(--wit); border: 1px solid var(--lijn); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.belofte h3 { font-size: 24px; }
.belofte p { font-size: 17px; color: var(--tekst-2); line-height: 1.6; }
.belofte-icoon { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.stapkaart { display: flex; flex-direction: column; gap: 16px; }
.stapkaart-beeld { height: 260px; border-radius: 22px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; }
.stapkaart-tekst { display: flex; gap: 14px; }
.stapkaart-tekst h3 { font-size: 22px; }
.stapkaart-tekst p { margin-top: 6px; font-size: 17px; color: var(--tekst-2); }
.mini { width: 260px; background: var(--wit); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 24px rgba(23, 37, 84, .1); font-size: 13px; }
.mini-midden { align-items: center; text-align: center; gap: 10px; }
.mini-rij { display: flex; justify-content: space-between; }
.mini-blauw { color: var(--blauw-tekst); font-weight: 700; }
.mini-balk { height: 6px; border-radius: 3px; background: var(--lijn); overflow: hidden; }
.mini-balk span { display: block; height: 100%; background: var(--blauw); }
.mini-foto { display: flex; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--lijn); border-radius: 10px; font-weight: 700; }
.mini-foto i { width: 30px; height: 38px; border-radius: 5px; background: #FFFBEB; border: 1px solid var(--lijn); }
.mini-knop { height: 36px; border-radius: 10px; background: var(--blauw); color: var(--wit); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.mini-whatsapp { background: #16A34A; }
.mini-klein { font-size: 11px; font-weight: 700; color: var(--tekst-2); }
.mini-vraag { font-size: 14px; font-weight: 700; line-height: 1.35; }
.mini-optie { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--lijn); font-size: 12px; }
.mini-goed { border: 2px solid var(--groen); background: var(--groen-licht); color: var(--groen-tekst); font-weight: 700; }
.mini-vink { width: 52px; height: 52px; border-radius: 50%; background: var(--groen-zacht); color: var(--groen); display: flex; align-items: center; justify-content: center; }

.home-split { flex-direction: row; align-items: center; gap: 56px; }
.home-split-tekst { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.home-split-tekst h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; }
.home-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.home-lijst li { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; }
.browser { width: 640px; max-width: 100%; flex-shrink: 0; border-radius: 18px; background: var(--wit); border: 1px solid var(--lijn); box-shadow: 0 30px 60px rgba(23, 37, 84, .18); overflow: hidden; }
.browser-balk { height: 34px; background: #F1F5F9; display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 12px; color: var(--tekst-3); }
.browser-balk i { width: 10px; height: 10px; border-radius: 50%; background: #FCA5A5; }
.browser-balk i:nth-child(2) { background: #FCD34D; }
.browser-balk i:nth-child(3) { background: #86EFAC; }
.browser-balk span { margin-left: 12px; }
.browser-inhoud { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: var(--achtergrond); font-size: 14px; }
.bv-titel { font-family: var(--kop); font-size: 24px; font-weight: 700; }
.bv-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bv-coach { border: 2px solid #DDD6FE; }
.bv-kop { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.bv-icoon { width: 32px; height: 32px; border-radius: 10px; }
.bv-verdeling { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.bv-verdeling span:first-child { background: var(--groen); }
.bv-verdeling span:last-child { background: var(--blauw); }
.bv-vakjes { display: flex; gap: 10px; }
.bv-vakjes span { flex: 1; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.bv-sterk { background: var(--groen-licht); color: var(--groen-tekst); }
.bv-groei { background: #FFF7ED; color: var(--oranje-tekst); }

.home-taal { flex-direction: row; align-items: center; gap: 64px; background: var(--blauw-licht); }
.home-taal-beeld { width: 420px; display: flex; justify-content: center; flex-shrink: 0; }
.home-taal .home-intro { font-size: 19px; }

.home-prijzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.prijskaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.prijskaart-populair { border: 2px solid var(--blauw); }
.prijskaart-naam { font-size: 18px; font-weight: 700; }
.prijskaart-prijs { font-family: var(--kop); font-size: 40px; font-weight: 700; }
.prijskaart-sub { font-size: 16px; color: var(--tekst-2); }

.home-faq { flex-direction: row; gap: 64px; padding-top: 40px; }
.home-faq > h2 { width: 340px; flex-shrink: 0; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; }
.home-faq > div { flex: 1; }
.home-faq details { border-bottom: 1px solid var(--lijn); padding: 20px 0; }
.home-faq summary { font-size: 19px; font-weight: 700; cursor: pointer; }
.home-faq details p { margin-top: 10px; font-size: 17px; color: var(--tekst-2); }

.home-slot { margin: 0 max(48px, calc((100% - 1184px) / 2)) 80px; padding: 64px; border-radius: 32px; background: var(--tekst); color: var(--wit); display: flex; align-items: center; gap: 40px; }
.home-slot > div { flex: 1; }
.home-slot h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; }
.home-slot p { margin-top: 12px; font-size: 19px; color: #CBD5E1; }
.home-slot-knop { background: var(--geel); color: var(--tekst); }
.home-slot-knop:hover { background: #F59E0B; color: var(--tekst); }
.home-voet { max-width: 1280px; margin: 0 auto; padding: 30px 48px 50px; display: flex; align-items: center; gap: 24px; font-size: 15px; color: var(--tekst-2); border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.home-voet a { color: var(--tekst-2); }
.home-voet-naam { font-family: var(--kop); font-weight: 700; color: var(--tekst); }

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home-hero-beeld { height: 640px; }
  .home-split, .home-taal { flex-direction: column; }
  .home-split .browser { width: 100%; }
  .home-taal-beeld { width: 100%; order: 2; }
  .hs-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-pijl { display: none; }
  .tc-links { width: 100%; order: 2; }
}

@media (max-width: 800px) {
  .home-kop { height: 68px; padding: 0 18px; gap: 12px; }
  .home-nav, .home-kop-knop { display: none; }
  .home-kop .logo-teken { width: 36px; height: 36px; }
  .home-kop .logo-tekst { font-size: 19px; }
  .home-hero { padding: 18px 20px 40px; gap: 26px; }
  .home-intro { font-size: 18px; }
  .home-hero .knoppen .knop { width: 100%; }
  .home-hero-beeld { height: 580px; }
  .home-gloed { width: 340px; height: 340px; }
  .telefoon { width: 270px; height: 560px; }
  .zwevend { display: none; }
  .home-sectie { padding: 56px 20px; gap: 28px; }
  .home-drie { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .belofte { padding: 24px; }
  .bv-vakjes { flex-direction: column; }
  .home-faq { flex-direction: column; gap: 10px; }
  .home-faq > h2 { width: auto; }
  .hs-vier { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hs-uitleg, .hs-kopje { min-height: 0; }
  .hs-beeld { height: 380px; }
  .tc-podium { --straal: 150px; width: 320px; height: 470px; }
  .tc-tel { width: 230px; height: 460px; margin-left: -115px; border-radius: 38px; }
  .tc-pil { min-width: 0; padding: 0 14px; }
  .home-slot { margin: 0 16px 50px; padding: 36px 24px; flex-direction: column; align-items: stretch; text-align: center; }
  .home-slot .knop { width: 100%; }
  .home-voet { padding: 24px 20px 40px; gap: 14px; }
  .cookiebanner { left: 8px; right: 8px; bottom: 8px; }
  .cookiebanner .knoppen .knop { width: 100%; }
  .bestelling-regel { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Kindpagina: lijsten (Afgerond, Fouten oefenen) netjes op elk scherm ---------- */
.kind-kaart .rij,
.kind-kaart .foutrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.kind-kaart .rij-hoofd,
.kind-kaart .foutrij > div {
  flex: 1 1 220px;
  min-width: 0;
}
.kind-kaart .rij-titel,
.kind-kaart .foutrij-titel {
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.kind-kaart .rij > .knop,
.kind-kaart .foutrij > .knop {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}
.kind-kaart .rij:first-of-type {
  padding-top: 4px;
}
.kind-raster > .kind-kaart {
  min-width: 0;
}

@media (max-width: 640px) {
  .kind-kaart .rij {
    padding: 14px 0;
  }
  .kind-kaart .rij-hoofd,
  .kind-kaart .foutrij > div {
    flex-basis: 100%;
  }
  .kind-kaart .rij > .knop,
  .kind-kaart .foutrij > .knop {
    flex: 1 1 100%;
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  .kind-kaart .foutrij {
    padding: 14px;
  }
}