/* Opmaak van munan.nl (zelfde tokens als /internationaal/): band met logo, kaart met formulier, oranje knop. Alleen licht, zoals de site.
   Kleur = betekenis: groen goed, rood fout (afspraak 13-10). Oranje is alleen merk en knop. */
:root {
  color-scheme: light;
  --bg: #ffffff; --kopkleur: #1e293b; --inkt: #2b3440; --zacht: #67768e; --navy: #1a3a6a; --blauw: #1a5fa8; --blauwbg: #eef4fb; --rand: #dbe6f2;
  --oranje: #e0701f; --oranje-ink: #b4551c; --oranjebg: #fdf4e7; --rood: #b3412b; --roodbg: #fbeceA; --groen: #1a7a50; --groenbg: #eefaf1;
  --vlot: #2f9e6a; --traag: #b9e3cb; --fout: #d2553c; --leeg: #f1f4f8;
  --band-a: #ececf0; --band-b: #f8f9fa;
  --kop: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --tekst: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box }
body { background: var(--bg); color: var(--zacht); font: 400 16px/1.65 var(--tekst); margin: 0 }
strong, b { color: var(--inkt); font-weight: 700 }
h1, h2, h3 { margin: 0; text-wrap: balance; color: var(--kopkleur) }
h1 { font: 300 34px/1.12 var(--kop); letter-spacing: -.02em }
h2 { font: 300 26px/1.2 var(--kop); letter-spacing: -.015em }
h3 { font: 600 17px/1.3 var(--kop); color: var(--navy) }
p { margin: 0 }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0 }
button:focus-visible, select:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px }
.band { background: linear-gradient(var(--band-a), var(--band-b)); border-bottom: 1px solid var(--rand); padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.band > div { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px }
.merk img { height: 56px; width: auto; display: block }
.taal { display: flex; align-items: center; gap: 8px; font-size: 14px }
select { font: inherit; font-size: 15px; color: var(--navy); background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 6px 8px; min-height: 38px }
.proef { background: var(--oranjebg); color: var(--oranje-ink); font-size: 13.5px; text-align: center; padding-block: 6px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
main { margin: 0 auto; max-width: calc(1000px + 32px); padding-block: 28px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.eyebrow { font: 600 13px/1.3 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--oranje-ink) }
.lead { font-size: 18px; line-height: 1.6; color: var(--inkt) }
.knop { display: block; width: 100%; text-align: center; background: var(--oranje); color: #fff; font: 700 17px/1.4 var(--kop); border-radius: 999px; padding: 14px 26px }
.knop:hover { background: var(--oranje-ink) }
.knop.licht { background: #fff; color: var(--navy); border: 2px solid var(--navy); padding: 11px 22px; font-size: 15.5px }
.knop.licht:hover { background: var(--blauwbg) }
.kaart-form { background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 24px; box-shadow: 0 10px 28px rgba(26, 58, 106, .10); display: grid; gap: 14px }

/* Start: tekst links, voorbeeldkaart rechts */
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: start }
.start > * { min-width: 0 }
.intro { display: grid; gap: 18px }
.stappen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s }
.stappen li { display: flex; gap: 12px; align-items: baseline; color: var(--inkt); counter-increment: s }
.stappen li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blauwbg); border: 1.5px solid var(--navy); color: var(--navy); font: 700 13px/23px var(--kop); text-align: center }
.leeftijd { display: flex; flex-wrap: wrap; gap: 8px }
.leeftijd button { border: 1.5px solid #c9d6e6; border-radius: 10px; padding: 8px 14px; background: #fff; color: var(--navy); font: 600 15px var(--kop); font-variant-numeric: tabular-nums }
.leeftijd button[aria-pressed="true"] { border-color: var(--navy); background: var(--blauwbg) }
.voorbeeldlabel { font: 600 12px var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht) }

/* Toets */
.toets { max-width: 460px; margin: 0 auto; display: grid; gap: 18px }
.voortgang { height: 6px; border-radius: 99px; background: var(--leeg); overflow: hidden }
.voortgang i { display: block; height: 100%; width: 0; background: var(--navy); transition: width .2s }
.teller { font-size: 14px; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums }
.som { background: var(--blauwbg); border: 2px solid var(--navy); border-radius: 16px; padding: 22px 16px; text-align: center; font: 600 52px/1.1 var(--kop); color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.som .ant { display: inline-block; min-width: 2.2ch; border-bottom: 3px solid var(--oranje); color: var(--kopkleur) }
.toetsen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.toetsen button { border: 1.5px solid #c9d6e6; border-radius: 12px; background: #fff; font: 600 26px/1 var(--kop); color: var(--kopkleur); padding-block: 16px; font-variant-numeric: tabular-nums }
.toetsen button:hover { border-color: var(--blauw); background: var(--blauwbg) }
.toetsen button.ok { background: var(--oranje); border-color: var(--oranje); color: #fff; font-size: 20px }
.toetsen button.ok:hover { background: var(--oranje-ink) }
.toetsen button.weg { font-size: 20px; color: var(--navy) }
.stil { text-align: center; font-size: 14px }

/* Uitslag */
.uitslag { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 36px; align-items: start }
.uitslag > * { min-width: 0 }
.kop-uitslag { display: grid; gap: 8px; grid-column: 1 / -1 }
.tellers { display: flex; flex-wrap: wrap; gap: 10px }
.tel { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; color: var(--inkt); font-variant-numeric: tabular-nums }
.tel b { font: 600 20px var(--kop) }
.blokje { width: 14px; height: 14px; border-radius: 4px; flex: none }
.b-vlot { background: var(--vlot) } .b-traag { background: var(--traag) } .b-fout { background: var(--fout) } .b-leeg { background: var(--leeg); border: 1px solid var(--rand) }

.raster { display: grid; grid-template-columns: 30px repeat(10, minmax(0, 1fr)); gap: 3px; font-variant-numeric: tabular-nums }
.raster .k { font: 600 13px/28px var(--kop); color: var(--navy); text-align: center }
.raster .c { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 600 12px var(--kop); color: transparent; background: var(--leeg); position: relative }
.raster .c.vlot { background: var(--vlot); color: #fff }
.raster .c.traag { background: var(--traag); color: #164d33 }
.raster .c.fout { background: var(--fout); color: #fff }
.raster .c.gevraagd::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--navy); border-radius: 8px; pointer-events: none }
.raster .hoek { font: 700 13px/28px var(--kop); color: var(--oranje-ink); text-align: center }
.uitleg-raster { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px }
.uitleg-raster span { display: inline-flex; align-items: center; gap: 6px }

.kolom { display: grid; gap: 16px }
.kaart { border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; background: #fff; color: var(--inkt) }
.kaart .waar { font-size: 13.5px; color: var(--zacht); font-variant-numeric: tabular-nums }
.kaart p.zo { background: var(--groenbg); border-radius: 8px; padding: 9px 11px; font-size: 15.5px; font-variant-numeric: tabular-nums }
.kaart p.zo b { display: block; font-size: 13px; color: var(--groen); font-weight: 600 }
.pad { border: 2px dashed var(--rand); border-radius: 14px; padding: 18px; display: grid; gap: 10px; background: #fff }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { border-radius: 8px; padding: 4px 9px; font: 600 14px var(--kop); font-variant-numeric: tabular-nums }
.chip.fout { background: var(--roodbg); color: var(--rood) } .chip.traag { background: var(--groenbg); color: var(--groen) }
.klein { font-size: 13.5px }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px } .knoppen .knop { width: auto }

@media (max-width: 760px) {
  .start, .uitslag { grid-template-columns: minmax(0, 1fr); gap: 28px }
  h1 { font-size: 29px }
  .som { font-size: 44px }
  .raster { grid-template-columns: 22px repeat(10, minmax(0, 1fr)); gap: 2px }
  .raster .c { font-size: 10px; border-radius: 4px }
}
@media (prefers-reduced-motion: reduce) { .voortgang i { transition: none } }

/* ---------- Munan Maths versie 0: aanvullingen op de tafelscan-opmaak ---------- */
/* Systeemletters: snel op elke telefoon en geen verzoeken naar Google. */
:root { --kop: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif }
html[lang="ar"] { --kop: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --tekst: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif }
html[lang="ar"] body { font-size: 17px }
h1 { font-weight: 400 } h2 { font-weight: 400 }
.kopacties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.cijferknop { border: 1px solid var(--rand); border-radius: 8px; padding: 6px 10px; min-height: 38px; color: var(--navy); background: #fff; font-size: 14px }
.merk { display: flex; align-items: center; gap: 8px; text-decoration: none }
.merk img { height: 44px }
.merk span { font: 600 15px var(--kop); color: var(--navy); letter-spacing: .02em }
.landbalk { background: var(--blauwbg); border-bottom: 1px solid var(--rand); padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-size: 14.5px; color: var(--inkt) }
.landbalk .knop.klein { width: auto; padding: 5px 14px; font-size: 14px }
.welkom { background: var(--groenbg); color: var(--groen); border-radius: 10px; padding: 10px 12px; font-weight: 600 }
.naamveld { display: grid; gap: 4px; font-size: 14.5px; color: var(--inkt) }
.naamveld input { font: inherit; font-size: 16px; border: 1px solid var(--rand); border-radius: 8px; padding: 9px 10px; color: var(--kopkleur) }
.naamveld small { color: var(--zacht); font-size: 12.5px }
.ladder { background: var(--blauwbg); border-radius: 10px; padding: 10px 12px; color: var(--navy); font-size: 15px; max-width: 760px }
.chip { background: var(--blauwbg); color: var(--navy) }
.pad { border-style: solid }
.slot { border: 2px solid var(--oranje); border-radius: 14px; padding: 18px; display: grid; gap: 10px; background: var(--oranjebg); color: var(--inkt) }
.slot.open { border-color: var(--groen); background: var(--groenbg) }
.slot.nadruk { box-shadow: 0 0 0 4px rgba(224, 112, 31, .18) }
.meter { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy) }
.meter i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--navy); background: #fff }
.meter i.aan { background: var(--groen); border-color: var(--groen) }
.meter span { margin-inline-start: 6px }
.deelknoppen { display: flex; flex-wrap: wrap; gap: 8px }
.deelknoppen .knop { width: auto; padding: 10px 18px; font-size: 15px; text-decoration: none }
.knop.wa { background: #1f8f4e } .knop.wa:hover { background: #17713d }
.knop.tg { background: #2a7fb8 } .knop.tg:hover { background: #1f6593 }
.knop.line { background: #17a33f } .knop.line:hover { background: #12812f }
.terug { min-height: 1.6em; text-align: center; font: 600 18px var(--kop) }
.terug .goed { color: var(--groen) } .terug .mis { color: var(--rood) }
.kindslot { font-size: 18px; color: var(--inkt) }
footer { max-width: 1032px; margin: 0 auto; padding: 18px 16px 32px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--zacht); display: grid; gap: 4px }
footer a { color: var(--blauw) }
bdi { unicode-bidi: isolate }
[dir="rtl"] .stappen li::before { margin-inline-end: 0 }
.privacy main { max-width: 760px }
.privacy h2 { margin-top: 22px } .privacy p, .privacy li { color: var(--inkt); margin: 8px 0 }
.concept { background: var(--roodbg); color: var(--rood); border-radius: 8px; padding: 8px 12px; font-weight: 600 }

[hidden] { display: none !important }
@media (max-width: 520px) {
  .taal > span { display: none }
  .merk img { height: 34px }
  .merk span { font-size: 13px }
  .band > div { gap: 8px }
  #taalkeuze { max-width: 132px }
  .cijferknop { font-size: 13px; padding: 4px 8px }
}

/* 8-11-2026: startscherm met de knop boven de vouw; kaart 2 t/m 9; traag beter zichtbaar; geen hangende toetskleur op touch. */
.start { grid-template-areas: "intro form" "verder form" }
.start > .intro { grid-area: intro } .start > .kaart-form { grid-area: form } .start > .verder { grid-area: verder; display: grid; gap: 22px }
.voorbeeld { display: grid; gap: 10px }
.raster { grid-template-columns: 30px repeat(8, minmax(0, 1fr)) }
.raster .c { font-size: 13px }
.raster .c.traag, .b-traag { box-shadow: inset 0 0 0 2px var(--vlot) }
.conclusie { font-size: 17px; color: var(--inkt); max-width: 760px; margin: 4px 0 0 }
.conclusie strong { color: var(--kopkleur) }
#oefennu { margin-top: 14px } #oefennu .knop { width: 100% }
.toetsen button:active { background: var(--blauwbg); border-color: var(--blauw) }
@media (hover: none) {
  .toetsen button:hover { border-color: #c9d6e6; background: #fff }
  .toetsen button.ok:hover { background: var(--oranje); border-color: var(--oranje) }
  .toetsen button:active { background: var(--blauwbg); border-color: var(--blauw) }
  .toetsen button.ok:active { background: var(--oranje-ink) }
}
@media (max-width: 760px) {
  .start { grid-template-areas: "intro" "form" "verder"; gap: 22px }
  .raster { grid-template-columns: 24px repeat(8, minmax(0, 1fr)); gap: 3px }
  .raster .c { font-size: 12px }
  .start .lead { font-size: 16.5px }
}

/* 8-11-2026: tafelkeuze, oefenen in drie stappen */
.leeftijd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px } .leeftijd button { min-width: 0; width: 100%; padding-inline: 0 }
.kaart-form { gap: 11px }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.preset { border: 1.5px solid #c9d6e6; border-radius: 12px; padding: 10px 12px; text-align: start; background: #fff; display: grid; gap: 1px }
.preset b { font: 600 15.5px/1.25 var(--kop); color: var(--navy) } .preset span { font-size: 13.5px; color: var(--zacht) }
.preset[aria-pressed="true"] { border-color: var(--navy); background: var(--blauwbg); box-shadow: inset 0 0 0 1px var(--navy) }
.zelf summary { cursor: pointer; color: var(--blauw); font-size: 14.5px; min-height: 28px }
.zelf-in { display: grid; gap: 11px; margin-top: 8px }
.chipkop { font-size: 14px; color: var(--inkt); margin-bottom: -6px }
.tafelknoppen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px }
.tafelknoppen button { border: 1.5px solid #c9d6e6; border-radius: 10px; min-height: 44px; font: 600 16px var(--kop); color: var(--navy); background: #fff }
.tafelknoppen button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff }
.eigenrij { display: flex; gap: 8px } .eigenrij input, .naamkort { font: inherit; font-size: 16px; width: 100%; min-width: 0; border: 1px solid var(--rand); border-radius: 8px; padding: 9px 10px; color: var(--kopkleur) }
.eigenrij .knop { width: auto; white-space: nowrap; padding: 8px 16px; font-size: 15px }
.eigenlijst { display: flex; flex-wrap: wrap; gap: 6px } .eigenlijst:empty { display: none }
.eigenchip { background: var(--blauwbg); color: var(--navy); border-radius: 999px; padding: 6px 12px; font: 600 14px var(--kop) } .eigenchip i { font-style: normal; margin-inline-start: 4px }
.fouttekst { color: var(--rood); font-size: 14px; width: 100% }
.samenvatting { color: var(--inkt); font-size: 15px; background: var(--leeg); border-radius: 10px; padding: 8px 12px }
.knop.uit { opacity: .45; cursor: not-allowed }
.lead-onder { display: none }
.tussendoel { margin-top: 14px; background: var(--blauwbg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px }
.tussendoel b { color: var(--navy); font: 600 14.5px var(--kop) }
.doelrij { display: flex; flex-wrap: wrap; gap: 6px } .doelrij span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #c9d6e6; font: 600 14px var(--kop); color: var(--zacht) }
.doelrij span.aan { background: var(--vlot); border-color: var(--vlot); color: #fff }
.oefenknoppen { display: grid; gap: 8px; margin: 10px 0 }
.stapjes { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 } .stapjes li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/1.2 var(--kop); color: var(--zacht); background: var(--leeg); border-radius: 999px; padding: 7px 6px; text-align: center }
.stapjes li span { width: 20px; height: 20px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px }
.stapjes li.nu { background: var(--navy); color: #fff } .stapjes li.nu span { color: var(--navy) } .stapjes li.af { background: var(--groenbg); color: var(--groen) }
.oefenkop { text-align: center }
.oefen { gap: 8px } .oefen .oefenkop { font-size: 20px } .oefen .som { padding-block: 8px; font-size: 34px } .oefen .toetsen { gap: 6px } .oefen .toetsen button { padding-block: 10px; font-size: 22px } .oefen .terug { min-height: 1.3em; font-size: 16px }
.tafelrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; background: var(--blauwbg); border-radius: 12px; padding: 6px 10px; font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums }
.tafelrij span { padding: 1px 6px; border-radius: 6px } .tafelrij span.nu { background: var(--navy); color: #fff } .tafelrij span.nu b { color: #fff } .tafelrij span.af { color: var(--zacht) } .tafelrij b { color: var(--navy) }
.tip { font-size: 14px; color: var(--inkt); background: var(--oranjebg); border-radius: 10px; padding: 6px 10px; line-height: 1.4 }
.tijdbalk { height: 8px; border-radius: 99px; background: var(--leeg); overflow: hidden } .tijdbalk i { display: block; height: 100%; background: var(--navy); width: 100%; transform-origin: left; animation: krimp linear forwards }
[dir="rtl"] .tijdbalk i { transform-origin: right }
@keyframes krimp { to { transform: scaleX(0) } }
@media (max-width: 760px) { .lead-boven { display: none } .lead-onder { display: block } }
@media (max-width: 520px) { .stapjes li { font-size: 12px; padding: 6px 4px } .stapjes li span { display: none } }

/* 8-11-2026: cijfers links naar rechts. Oosters-Arabische cijfers met een × ertussen keren anders om (1 × 5 wordt 5 × 1). */
bdi[dir="ltr"] { unicode-bidi: isolate-override }
.tafelrij span { direction: ltr; unicode-bidi: isolate-override }
@media (max-width: 520px) {
  main { padding-block-start: 16px }
  .start { gap: 14px }
  .start h1 { font-size: 27px }
  .start .intro { gap: 10px }
  .kaart-form { padding: 16px; gap: 9px }
  .preset { padding: 7px 10px }
  .zelf summary { font-size: 13.5px; min-height: 0 }
}

/* 8-11-2026: les keer */
.leslink { color: var(--blauw); text-decoration: underline; font-size: 15px; padding: 4px 0; text-align: center; width: 100% }
.les { gap: 10px }
.leszin { color: var(--inkt); font-size: 17px; line-height: 1.45; text-align: center }
.leszin.groot { font: 600 24px var(--kop); color: var(--navy); min-height: 1.4em }
.groepen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.groep { display: inline-grid; gap: 5px; padding: 10px; background: var(--blauwbg); border: 2px solid var(--rand); border-radius: 14px; transition: border-color .15s }
.groep i, .rooster i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--navy) }
.groep.aan { border-color: var(--navy); background: #dce9f7 }
.roosterplek { display: flex; justify-content: center; min-height: 118px; align-items: center }
.rooster { display: inline-grid; gap: 7px; padding: 12px; background: var(--blauwbg); border-radius: 14px }
.plaatjes { display: grid; gap: 8px }
.plaatje { border: 2px solid #c9d6e6; border-radius: 14px; padding: 8px; background: #fff }
.plaatje .groepen { gap: 6px } .plaatje .groep { padding: 6px; gap: 3px; border-width: 1px } .plaatje .groep i { width: 11px; height: 11px }
.plaatje.goed { border-color: var(--vlot); background: var(--groenbg) } .plaatje.mis { border-color: var(--fout); background: var(--roodbg) }
.les .toetsen { gap: 6px } .les .toetsen button { padding-block: 9px; font-size: 22px } .les .som { padding-block: 6px; font-size: 32px } .les .oefenkop { font-size: 20px } .les .terug { min-height: 1.3em; font-size: 16px }

/* 8-11-2026: plaatje bovenaan het startscherm, 300 px hoog, aan de beginkant (links; bij Arabisch rechts). Op een smal scherm de volle breedte. */
.topbeeld { display: block; width: 100%; max-width: 577px; height: auto; margin-inline-end: auto }
@media (min-width: 1040px) { .topbeeld { width: 577px; max-width: none } }

/* 8-11-2026: telefoon, naamveld ingeklapt; formulier iets compacter zodat de startknop in het eerste scherm staat */
@media (max-width: 520px) {
  .kaart-form { padding: 12px 14px; gap: 7px }
  .preset { padding: 5px 10px }
  .samenvatting { font-size: 14px; padding: 6px 10px; line-height: 1.35 }
  .start { gap: 10px }
  .start .intro { gap: 8px }
}