/* Groep 5-6-variant (?groep=56): grotere letters, knoppen en tikdoelen. Alles onder html.g56,
   dus de standaardles verandert niet. Moet NA de css van de les geladen worden. Digibord: html.klas.g56. */
html.g56 body{font-size:22px}
html.g56 .ballon{font-size:24px}
html.g56 h1{font-size:clamp(30px,7vw,38px)}
html.g56 .flaprij .flap{width:130px}
html.g56 .klein,html.g56 .hint,html.g56 .kansen .tal,html.g56 .vbkop .tal,html.g56 .duimleeg,html.g56 .rommeltekst,html.g56 .vakkop,html.g56 .vlabel{font-size:18px}
html.g56 .voet{font-size:16px}
html.g56 .klein .ballon{font-size:24px}
html.g56 .kansen .rij{font-size:20px}
html.g56 .kansen .staaf{height:22px;border-radius:11px}
html.g56 .leest{font-size:20px}
html.g56 .knop{min-height:72px;font-size:24px}
html.g56 .keuzes{gap:16px}
html.g56 .keuze{min-height:80px;font-size:24px}
html.g56 .keuze .ico{font-size:40px}
/* tikdoelen minimaal 64px, ook de gumknop en de duimnagels */
html.g56 .gum{min-height:64px;min-width:64px;font-size:20px}
html.g56 .tekenrij .knop{min-height:64px;font-size:22px}
html.g56 .duim{width:72px;height:72px}
html.g56 button.duim{min-width:72px;min-height:72px}
html.g56 button.duim.kies{width:88px;height:88px}
html.g56 .duimrij{min-height:72px;gap:10px}
html.g56 .kiesrij{gap:12px}
html.g56 .linkje.zelf{min-height:64px}
/* "Laat Flap tekenen" is een echte knop (zacht), geen tekstlink */
html.g56 .knop.zacht{min-height:64px}
html.g56 .zin{font-size:clamp(28px,7vw,40px)}
html.g56 .lampjes{font-size:20px}
html.g56 .balk{max-width:680px}
/* meer ruimte tussen de onderdelen, zodat een kind elk ding apart ziet */
html.g56 .scherm{gap:20px}
@media (max-width:420px){
  html.g56 .flaprij .flap{width:100px}
  html.g56 .ballon{font-size:22px}
  html.g56 .klein .ballon{font-size:22px}
  html.g56 .keuze,html.g56 .knop{font-size:22px}
  html.g56 .kansen .rij{grid-template-columns:minmax(0,5.5em) minmax(0,1fr) auto}
}
/* digibord */
html.klas.g56 body,html[data-klas="1"].g56 body{font-size:26px}
html.klas.g56 .ballon,html[data-klas="1"].g56 .ballon,html.klas.g56 .klein .ballon{font-size:30px}
html.klas.g56 .knop,html[data-klas="1"].g56 .knop{font-size:32px;min-height:88px}
html.klas.g56 .keuze,html[data-klas="1"].g56 .keuze{font-size:30px;min-height:96px}
html.klas.g56 .flaprij .flap{width:160px}
html.klas.g56 .klein,html.klas.g56 .hint{font-size:22px}
html.klas.g56 .zin{font-size:48px}
html.klas.g56 .tekenrij .knop,html.klas.g56 .gum{min-height:72px}
@media (max-width:420px){
  html.klas.g56 .flaprij .flap{width:110px}
  html.klas.g56 .ballon{font-size:24px}
  html.klas.g56 .knop{font-size:26px}
  html.klas.g56 .keuze{font-size:24px}
}
/* hulpscherm: grotere letters en tikdoelen */
html.g56 .hulp-knop{width:64px;height:64px;font-size:30px}
html.g56 .hulp-paneel{font-size:20px}
html.g56 .hulp-sluit{min-height:64px;font-size:22px}
html.klas.g56 .hulp-paneel{font-size:26px}
html.klas.g56 .hulp-knop{width:72px;height:72px}
html.klas.g56 .hulp-sluit{min-height:72px;font-size:26px}
/* Laag scherm (Chromebook 1366x768, digibord): Flap kleiner en minder lucht, zodat de hoofdknop vaker zonder scrollen in beeld staat */
@media (min-width:700px) and (max-height:820px){
  html.g56 .flaprij .flap{width:96px}
  html.g56 .scherm{gap:14px;padding-top:4px;padding-bottom:16px}
  html.klas.g56 .flaprij .flap{width:112px}
}
/* de ?-hulpknop (fixed rechtsonder) mag de laatste voetlink of knop niet bedekken: extra ruimte onderaan */
html.g56 body{padding-bottom:104px}
html.klas.g56 body{padding-bottom:112px}
/* losse tekstlinks in een les (zoals "Verder naar les 3") krijgen een tikdoel van 64px */
html.g56 .scherm p.klein > a{display:inline-flex;align-items:center;min-height:64px;padding:0 10px;font-size:20px}