/* Beamerquiz, alleen gebruikt op /klaslokaal/beamerquiz/.
   Bewust een eigen bestand: de pagina heeft een showscherm en een printvel die
   nergens anders voorkomen, en zo blijft de gedeelde CSS ongemoeid.
   Alle maten in de show schalen mee met de schermhoogte (vh) en breedte (vw),
   zodat de tekst op een beamer van 4:3 net zo goed leesbaar is als op een breed
   digibord. */

/* ---------- kop en uitleg op de gewone pagina ---------- */
.bq-top{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.bq-top p{font-size:17.5px;color:#41504a}
.bq-illu svg{width:100%;height:auto;filter:drop-shadow(0 18px 16px rgba(69,44,25,.16))}

.bq-hoe{margin:0 0 6px;font:700 clamp(26px,3.2vw,34px)/1.05 "Alegreya",Georgia,serif}
.bq-stappen{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px;counter-reset:bqstap}
.bq-stappen li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:#3f4e48}
.bq-stappen li:before{counter-increment:bqstap;content:counter(bqstap);flex:none;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff8e9;font:800 15px/28px "Source Sans 3",system-ui,sans-serif;text-align:center}

/* ---------- keuzescherm ---------- */
.bq-start{margin-top:26px;padding:22px 24px;border-radius:18px;background:#fff8e9;border:1px solid rgba(39,52,47,.14);box-shadow:var(--shadow-soft)}
.bq-start h2{margin:0 0 4px;font:700 clamp(24px,3vw,30px)/1.05 "Alegreya",Georgia,serif}
.bq-start > p{margin:0 0 16px;font-size:15.5px;color:#6b756f}
.bq-kieskop{display:block;margin:16px 0 8px;font-size:12.5px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#786b54}
.bq-keuzes{display:flex;gap:10px;flex-wrap:wrap}
.bq-keuze{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:190px;padding:12px 16px;border-radius:13px;border:2px solid rgba(39,52,47,.16);background:#fffaf0;color:var(--ink);font-family:inherit;cursor:pointer}
.bq-keuze b{font:700 19px/1.1 "Alegreya",Georgia,serif}
.bq-keuze span{font-size:14px;color:#6b756f}
.bq-keuze:hover{border-color:var(--green)}
.bq-keuze[aria-pressed="true"]{border-color:var(--red);background:#f7e6c8;box-shadow:inset 0 0 0 2px rgba(165,45,41,.28)}
.bq-keuze:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.bq-startrij{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}
.bq-groot{border:0;border-radius:14px;background:var(--red);color:#fff8e9;font:800 21px/1 "Source Sans 3",system-ui,sans-serif;padding:17px 30px;box-shadow:0 6px 0 #74211f;cursor:pointer;font-family:inherit}
.bq-groot:hover:not([disabled]){background:#b23a32}
.bq-groot:active:not([disabled]){transform:translateY(3px);box-shadow:none}
.bq-groot:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.bq-groot[disabled]{background:#c3b79f;box-shadow:0 6px 0 #ab9c80;cursor:default}
.bq-statusregel{font-size:14px;font-weight:700;color:var(--green)}

/* ---------- het showscherm ---------- */
.bq-show{position:fixed;inset:0;z-index:2000;background:#243029;color:#fff8e9;overflow-y:auto}
.bq-show[hidden]{display:none}
body.bq-vast{overflow:hidden}
.bq-doek{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(10px,2vh,22px);padding:clamp(14px,2.6vh,26px) clamp(16px,3vw,44px) clamp(12px,2.2vh,22px)}

.bq-showkop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:2px solid rgba(240,211,141,.3);padding-bottom:clamp(6px,1.2vh,12px)}
.bq-showtitel{font:600 clamp(15px,2.1vh,21px)/1.15 "Alegreya",Georgia,serif;color:#f0d38d}
.bq-kopvast{display:flex;align-items:center;gap:14px}
.bq-teller{font:800 clamp(14px,1.9vh,19px)/1 "Source Sans 3",system-ui,sans-serif;color:#c7d3c9;letter-spacing:.02em}
.bq-sluit{background:none;border:2px solid rgba(199,211,201,.45);color:#c7d3c9;border-radius:10px;font:700 14px/1 "Source Sans 3",system-ui,sans-serif;padding:9px 13px;cursor:pointer;font-family:inherit}
.bq-sluit:hover{color:#fff8e9;border-color:#f0d38d}
.bq-sluit:focus-visible{outline:3px solid #f0d38d;outline-offset:2px}

.bq-midden{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.4vh,26px);position:relative}
.bq-vraagtekst{margin:0;font:700 clamp(28px,4.6vh,58px)/1.06 "Alegreya",Georgia,serif;color:#fff8e9;max-width:22ch;text-wrap:balance}
.bq-vraagtekst[hidden]{display:none}

.bq-opties{display:grid;grid-template-columns:1fr 1fr;gap:clamp(9px,1.7vh,18px);margin:0;padding:0;list-style:none}
.bq-opties[hidden]{display:none}
.bq-optie{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);padding:clamp(10px,1.7vh,18px) clamp(14px,1.8vw,24px);border-radius:16px;background:#fffaf0;border:3px solid #27342f;color:#27342f;font:700 clamp(19px,2.9vh,34px)/1.15 "Source Sans 3",system-ui,sans-serif}
.bq-optie .bq-schild{flex:none;width:clamp(34px,4.4vh,54px);height:auto}
.bq-optie.is-goed{background:#f6e7c4;border-color:#a52d29;box-shadow:0 0 0 5px rgba(240,211,141,.55)}
.bq-optie.is-af{opacity:.42}

.bq-weetje{display:flex;flex-direction:column;gap:4px;padding:clamp(12px,1.9vh,20px) clamp(16px,2vw,26px);border-radius:16px;background:#315744;border:2px solid #f0d38d}
.bq-weetje[hidden]{display:none}
.bq-weetje b{font:700 clamp(18px,2.6vh,30px)/1.15 "Alegreya",Georgia,serif;color:#f0d38d}
.bq-weetje span{font:400 clamp(15px,2.1vh,24px)/1.35 "Source Sans 3",system-ui,sans-serif;color:#eef3e4}

.bq-slot{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,16px)}
.bq-slot[hidden]{display:none}
.bq-slot h2{margin:0;font:700 clamp(26px,4vh,48px)/1.05 "Alegreya",Georgia,serif;color:#f0d38d}
.bq-slot p{margin:0;font-size:clamp(14px,2vh,21px);color:#c7d3c9}
.bq-slotlijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(5px,1vh,10px);margin:6px 0 0;padding:0;list-style:none}
.bq-slotlijst li{display:flex;align-items:center;gap:10px;background:#fffaf0;color:#27342f;border-radius:11px;padding:clamp(6px,1.1vh,11px) 12px;font:600 clamp(14px,1.9vh,21px)/1.2 "Source Sans 3",system-ui,sans-serif}
.bq-slotnr{flex:none;width:clamp(24px,3vh,32px);height:clamp(24px,3vh,32px);border-radius:50%;background:#a52d29;color:#fff8e9;text-align:center;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,1.6vh,16px)}
.bq-slotantwoord b{color:#a52d29;margin-right:4px}

.bq-voet{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.bq-hint{font-size:clamp(12px,1.6vh,16px);color:#9fb0a4}
.bq-knoppen{display:flex;gap:10px;align-items:center}
.bq-knop{border:0;border-radius:13px;font:800 clamp(15px,2.1vh,22px)/1 "Source Sans 3",system-ui,sans-serif;padding:clamp(11px,1.8vh,18px) clamp(18px,2.6vw,34px);cursor:pointer;font-family:inherit}
.bq-knop--terug{background:#3d4f45;color:#dbe4dc;box-shadow:0 5px 0 #2b382f}
.bq-knop--terug:hover:not([disabled]){background:#4a5f54}
.bq-knop--verder{background:#a52d29;color:#fff8e9;box-shadow:0 5px 0 #74211f}
.bq-knop--verder:hover:not([disabled]){background:#b23a32}
.bq-knop:active:not([disabled]){transform:translateY(3px);box-shadow:none}
.bq-knop:focus-visible{outline:3px solid #f0d38d;outline-offset:3px}
.bq-knop[disabled]{opacity:.45;cursor:default}

/* decorillustratie rechtsonder in de show, verdwijnt op kleine schermen */
.bq-decor{position:absolute;right:0;bottom:-6px;width:clamp(90px,13vh,168px);height:auto;opacity:.95;pointer-events:none}
@media(max-width:900px),(max-height:620px){.bq-decor{display:none}}

@media(max-width:820px){
  .bq-top{grid-template-columns:1fr}
  .bq-opties{grid-template-columns:1fr}
  .bq-vraagtekst{max-width:none}
  .bq-keuze{min-width:0;width:100%}
}

/* ---------- printbare scoreblaadjes ---------- */
.bq-blad-wrap{margin-top:56px}
.bq-blad-wrap h2{margin:0 0 6px;font:700 clamp(26px,3.2vw,34px)/1.05 "Alegreya",Georgia,serif}
.bq-blad-wrap > p{margin:0 0 18px;max-width:70ch;font-size:16.5px;color:#3f4e48}
.bq-blad{background:#fffaf0;border:1px solid rgba(39,52,47,.16);border-radius:16px;box-shadow:var(--shadow-soft);padding:26px 28px;max-width:760px}
.bq-blad-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:2px solid rgba(39,52,47,.2);padding-bottom:8px;margin-bottom:14px}
.bq-blad-kop b{font:700 22px/1.05 "Alegreya",Georgia,serif}
.bq-blad-kop span{font-size:13px;color:#6b756f}
.bq-teamveld{margin-bottom:18px}
.bq-teamveld .bq-teamlabel{display:block;font-size:13px;font-weight:700;color:#41504a;margin-bottom:7px}
.bq-teamveld .bq-teamlijn{display:block;height:34px;border-bottom:1.5px dotted rgba(39,52,47,.5)}
.bq-rooster{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:13px}
.bq-rooster caption{text-align:left;font:700 16px/1.1 "Alegreya",Georgia,serif;padding-bottom:5px;color:var(--red)}
.bq-rooster th,.bq-rooster td{border:1px solid rgba(39,52,47,.45);padding:4px 6px;text-align:left}
.bq-rooster thead th{background:#f2e2c1;font-size:12px;font-weight:800}
.bq-rooster th[scope="row"]{width:52px;font-weight:700;background:#fbf5e7}
.bq-rooster tfoot td,.bq-rooster tfoot th{background:#f2e2c1;font-weight:800}
.bq-blad-merk{display:flex;justify-content:flex-end;align-items:center;margin-top:10px}
.bq-blad-merk img{height:34px;width:auto}
.bq-printrij{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 0}
.bq-printknop{border:0;border-radius:11px;padding:12px 18px;font:800 16px/1 "Source Sans 3",system-ui,sans-serif;background:#e4d6ba;color:var(--ink);box-shadow:0 5px 0 #c9b48b;cursor:pointer;font-family:inherit}
.bq-printknop:hover{background:#eee0c6}
.bq-printknop:active{transform:translateY(3px);box-shadow:none}
.bq-printknop:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* Alle maten hieronder staan bewust in mm, niet px/em: zo hangt de hoogte van
   het vel nooit af van de basisfontgrootte of zoomstand van de browser, en
   past het gegarandeerd op één staand A4 (297mm hoog). Optelsom, naar boven
   afgerond per onderdeel (incl. tabelranden), zie ook het fix-rapport:
   10 + 10 (marge boven/onder) + 12 (kop) + 23 (teamregel) + 3 x 73 (roosters
   van caption + 10 vragen + totaalrij) + 12 (logo) = 286mm, dus ruim 11mm
   marge over op de 297mm hoogte van het vel. */
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff}
  .site-nav,.mobile-menu,.site-footer,.page-hero,.bq-top,.bq-uitleg,.bq-start,
  .bq-verder,.bq-vragen,.ontdek,.bq-show,.bq-printrij,.bq-blad-wrap > h2,
  .bq-blad-wrap > p{display:none !important}
  .content{padding:0;max-width:none}
  .bq-blad-wrap{margin:0}
  .bq-blad{max-width:none;border:0;border-radius:0;box-shadow:none;padding:0;background:#fff;page-break-inside:avoid;break-inside:avoid;page-break-after:avoid}

  .bq-blad-kop{border-bottom:.4mm solid rgba(39,52,47,.4);padding-bottom:2mm;margin-bottom:4mm}
  .bq-blad-kop b{font-size:5mm;line-height:5.5mm}
  .bq-blad-kop span{font-size:2.8mm;line-height:3.2mm}

  .bq-teamveld{margin-bottom:6mm;page-break-inside:avoid}
  .bq-teamveld .bq-teamlabel{font-size:3.2mm;line-height:3.6mm;margin-bottom:2mm}
  .bq-teamveld .bq-teamlijn{height:11mm;border-bottom:.6mm solid #27342f}

  .bq-rooster{margin-bottom:4mm;page-break-inside:avoid;break-inside:avoid}
  .bq-rooster caption{font-size:3.6mm;line-height:4mm;padding-bottom:1mm}
  .bq-rooster th,.bq-rooster td{padding:1mm 1.6mm;font-size:2.6mm;line-height:3mm}

  .bq-blad-merk{margin-top:3mm;page-break-inside:avoid;page-break-before:avoid}
  .bq-blad-merk img{height:9mm}
}