/* Klassenkist: gedeelde opmaak voor /klassenkist/ en de vier losse onderdelen
   (/sinterklaasbingo/, /sinterklaasquiz/,
   /kringgesprek-sinterklaas/, /aftelposter/).

   Elk onderdeel heeft precies één .kk-mod op zijn eigen pagina. De hub heeft er
   geen, die toont alleen kaarten. Daarom staat hier alles bij elkaar: het scheelt
   vier keer dezelfde regels onderhouden. */

.kk-top{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.kk-top p{font-size:17.5px;color:#41504a}
.kk-illu svg{width:100%;height:auto;filter:drop-shadow(0 18px 16px rgba(69,44,25,.16))}
.kk-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.kk-badge{padding:8px 12px;border-radius:999px;background:#f2e2c1;border:1px solid rgba(39,52,47,.14);font-size:13px;font-weight:800}

/* Kaarten op de hub: één kaart per onderdeel, met eigen tekening. */
.kk-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin:30px 0 0}
.kk-kaart{display:flex;flex-direction:column;gap:10px;padding:20px 22px 18px;border-radius:18px;background:#fff8e9;border:1px solid rgba(39,52,47,.14);box-shadow:var(--shadow-soft);text-decoration:none;color:var(--ink);transition:transform .15s ease,border-color .15s ease}
.kk-kaart:hover{transform:translateY(-3px);border-color:var(--green)}
.kk-kaart svg{width:72px;height:72px}
.kk-kaart b{font:700 23px/1.05 "Alegreya",Georgia,serif;color:var(--red)}
.kk-kaart span{font-size:15px;color:#4c5a52}
.kk-kaart em{margin-top:auto;font-style:normal;font-size:13.5px;font-weight:850;color:var(--green)}

/* Doorlinkbalk onderaan elk los onderdeel: de vier andere onderdelen. */
.kk-verder{margin-top:56px;padding:24px 26px 22px;border-radius:20px;background:#f4e5c7;border:1px solid rgba(39,52,47,.13)}
.kk-verder h2{margin:0 0 4px;font:700 26px/1.05 "Alegreya",Georgia,serif}
.kk-verder>p{margin:0 0 16px;font-size:15px;color:#6b756f}
.kk-verder ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.kk-verder a{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:13px;background:#fffaf0;border:1px solid rgba(39,52,47,.12);text-decoration:none;color:var(--ink)}
.kk-verder a:hover{border-color:var(--green);background:#eef3e4}
.kk-verder a svg{width:34px;height:34px;flex:none}
.kk-verder a b{display:block;font:700 17px/1.1 "Alegreya",Georgia,serif}
.kk-verder a span{display:block;font-size:13px;color:#6b756f;margin-top:1px}
.kk-verder .kk-terug{display:inline-block;margin-top:16px;font-size:14.5px;font-weight:800;color:var(--green)}

.kk-mod{margin-top:8px;scroll-margin-top:80px}
.kk-mod-kop{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin-bottom:14px}
.kk-mod-kop svg{width:96px;height:auto}
.kk-mod-kop h2{margin:0;font:700 clamp(27px,3.4vw,38px)/1.02 "Alegreya",Georgia,serif}
.kk-mod-kop p{margin:6px 0 0;color:var(--muted);font-size:15.5px}
.kk-uitleg{max-width:70ch}
.kk-uitleg p{font-size:16.5px;color:#3f4e48}
.kk-uitleg h3{margin:26px 0 6px;font:700 23px/1.1 "Alegreya",Georgia,serif}
.kk-uitleg ul{margin:0 0 14px;padding-left:20px}
.kk-uitleg li{margin-bottom:7px;font-size:16px;color:#3f4e48}

.kk-controls{margin-top:18px;padding:18px 20px;border-radius:16px;background:#fff8e9;border:1px solid rgba(39,52,47,.14);box-shadow:var(--shadow-soft)}
.kk-rij{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.kk-veld{display:flex;flex-direction:column;gap:5px}
.kk-veld label{font-size:12.5px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#786b54}
.kk-veld select,.kk-veld input[type=text],.kk-veld input[type=date],.kk-veld input[type=number]{border:2px solid rgba(39,52,47,.18);border-radius:11px;background:#fffaf0;padding:10px 12px;font-size:15.5px;font-weight:600;color:var(--ink);font-family:inherit;min-width:170px}
.kk-veld input[type=number]{min-width:130px}
.kk-veld textarea{border:2px solid rgba(39,52,47,.18);border-radius:11px;background:#fffaf0;padding:10px 12px;font-size:15px;color:var(--ink);font-family:inherit;width:100%;max-width:420px}
.kk-veld select:focus-visible,.kk-veld input:focus-visible,.kk-veld textarea:focus-visible{outline:3px solid #a52d29;outline-offset:2px}
.kk-acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.kk-status{font-size:14px;font-weight:800;color:var(--green);min-height:20px}
.kk-tip{margin:12px 0 0;font-size:13.5px;color:#6b756f}

.kk-vel{display:none;margin-top:22px}
.kk-vel.is-open{display:block}
.kk-velkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:8px;border-bottom:2px dashed rgba(39,52,47,.2)}
.kk-velkop b{font:700 19px/1 "Alegreya",Georgia,serif}
.kk-velkop span{font-size:13px;color:#6b756f}

/* merk onderaan het printvel, alleen zichtbaar bij het printen, zie @media print */
.kk-merk-print{display:none}

/* bingo */
.bingo-vel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bingo-kaart{border:4px solid #27342f;border-radius:14px;background:#fffaf0;padding:12px;break-inside:avoid;content-visibility:auto;contain-intrinsic-height:auto 400px}
.bingo-titel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.bingo-titel b{font:700 20px/1 "Alegreya",Georgia,serif;color:var(--red);letter-spacing:.04em}
.bingo-titel span{font-size:11px;font-weight:800;color:#7a857e}
.bingo-grid{display:grid;gap:4px}
.bingo-cel{border:2px solid #27342f;border-radius:8px;background:#fff8e9;padding:5px 3px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;min-width:0}
.bingo-cel svg{width:34px;height:34px}
.bingo-cel span{font-size:13.5px;font-weight:800;line-height:1.08;color:#3f4e48;overflow-wrap:anywhere;hyphens:auto}
.bingo-cel.vrij{background:#f0d38d}
.bingo-cel.vrij span{font-size:12.5px;color:#7b4037}

/* voorleeslijst bij de bingo */
.roeplijst{margin-top:26px;padding:18px 20px;border-radius:16px;background:#fff8e9;border:1px solid rgba(39,52,47,.14);break-before:page;page-break-before:always}
.roeplijst h3{margin:0 0 4px;font:700 21px/1.1 "Alegreya",Georgia,serif}
.roeplijst p{margin:0 0 12px;font-size:13.5px;color:#6b756f}
.roeplijst ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px;margin:0;padding-left:22px}
.roeplijst li{font-size:15px;padding:3px 0;border-bottom:1px dashed rgba(39,52,47,.18)}

/* quiz (.quiz-tab wordt ook hergebruikt door de kringgesprek-tabs hieronder,
   vandaar de gedeelde selector) */
.quiz-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.quiz-tab,.kr-tab{border:2px solid rgba(39,52,47,.18);background:#fffaf0;border-radius:12px;padding:10px 15px;font:inherit;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer}
.quiz-tab[aria-selected=true],.kr-tab[aria-selected=true]{background:var(--green);border-color:var(--green);color:#fff5de}
.vraag-kaart{margin:0 0 12px;padding:16px 18px;border-radius:15px;background:#fff8e9;border:1px solid rgba(39,52,47,.14)}
.vraag-kaart .v-nr{font:700 13px/1 "Alegreya",Georgia,serif;text-transform:uppercase;letter-spacing:.12em;color:#8b7d63}
.vraag-kaart h3{margin:6px 0 12px;font:700 20px/1.25 "Alegreya",Georgia,serif}
.antwoorden{display:grid;gap:7px}
.antwoorden button{text-align:left;border:2px solid rgba(39,52,47,.16);background:#fffaf0;border-radius:11px;padding:10px 13px;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer}
.antwoorden button:hover:not([disabled]){border-color:var(--green);background:#eef3e4}
.antwoorden button.goed{border-color:#2f6b46;background:#e2f0e2;font-weight:800}
.antwoorden button.fout{border-color:var(--red);background:#f6e0dd}
.antwoorden button[disabled]{cursor:default}
.v-toelicht{margin:11px 0 0;font-size:14.5px;color:#4c5a52;display:none}
.v-toelicht.is-open{display:block}
.quiz-score{margin-top:14px;font:700 19px/1.2 "Alegreya",Georgia,serif;color:var(--green)}
.antwoordblad{display:none}
.ab-lijst{margin:0;padding:0;list-style:none;counter-reset:ab}
.ab-lijst li{counter-increment:ab;padding:7px 0;border-bottom:1px dashed rgba(39,52,47,.22);font-size:14px}
.ab-lijst li:before{content:counter(ab) ". ";font-weight:800}
.ab-lijst li b{color:#1f4a30}

/* kring */
.kring-vel{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kringkaart{border:3px solid #27342f;border-radius:13px;padding:13px 15px;background:#fffaf0;break-inside:avoid}
.kringkaart small{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.kringkaart p{margin:5px 0 0;font:600 17px/1.3 "Alegreya",Georgia,serif}
.kring-groepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}
.kring-groep{padding:16px 18px;border-radius:15px;background:#fff8e9;border:1px solid rgba(39,52,47,.14)}
.kring-groep h3{margin:0 0 8px;font:700 20px/1.15 "Alegreya",Georgia,serif;color:var(--green)}
.kring-groep ul{margin:0;padding-left:18px}
.kring-groep li{margin-bottom:6px;font-size:15.5px;color:#3f4e48}

/* kring: digitaal een kaartje trekken (los van het printvel hieronder) */
.kr-trekker{margin-top:18px;padding:22px 24px;border-radius:18px;background:#f4e5c7;border:1px solid rgba(39,52,47,.14);text-align:center}
.kr-kaart{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:3px solid #27342f;border-radius:16px;background:#fffaf0;padding:22px 26px;transform:rotate(-1deg)}
.kr-kaart.is-getrokken{animation:kr-pop .3s ease}
@keyframes kr-pop{0%{transform:rotate(-1deg) scale(.94)}60%{transform:rotate(-1deg) scale(1.03)}100%{transform:rotate(-1deg) scale(1)}}
.kr-kaart small{font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.kr-kaart p{margin:0;font:700 clamp(19px,3.4vw,24px)/1.32 "Alegreya",Georgia,serif;max-width:46ch}
.kr-kaart-leeg{color:#7a857e;font-size:16px;max-width:34ch}
.kr-trek-knoppen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.kr-trek-teller{margin:10px 0 0;font-size:13.5px;color:#6b756f}

/* aftelposter: een printvel met één vakje per kalenderdag. De vakjes zijn een
   vierkant (aspect-ratio:1) en tegelijk een container (container-type:size), zodat
   de datumtekst met cqmin-eenheden vanzelf meeschaalt met de vakgrootte. Het aantal
   kolommen wordt in klassenkist.js per aantal kinderen gekozen en op .p-vakjes als
   inline grid-template-columns gezet, zowel op het scherm als in de print. */
.poster{border:5px solid #27342f;border-radius:16px;background:#fffaf0;padding:22px 24px 18px;max-width:560px}
.poster .p-kop{text-align:center;margin-bottom:2px}
.poster .p-titel{display:block;font:800 clamp(20px,3vw,26px)/1.1 "Alegreya",Georgia,serif;color:var(--red)}
.poster .p-sub{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--green);margin-top:3px}
.poster .p-begin{text-align:center;font:700 15.5px/1.2 "Alegreya",Georgia,serif;color:var(--ink);margin:8px 0 2px}
.p-vakjes{display:grid;gap:6px;margin:12px 0 10px}
.p-vakje{aspect-ratio:1;container-type:size;border:2.5px solid #27342f;border-radius:12px;background:#fff8e9;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;overflow:hidden;color:#3f4e48}
.p-vakje .v-dag{font-size:16cqmin;font-weight:800;color:#7a857e}
.p-vakje .v-num{font:800 40cqmin/1 "Alegreya",Georgia,serif;color:#27342f;margin:3cqmin 0}
.p-vakje .v-maand{font-size:15cqmin;font-weight:800;color:#7a857e}
.p-vakje.weekend{background:#e6eef0;border-style:dashed;border-color:#557382}
.p-vakje.weekend .v-num{color:#2f5361}
.p-vakje.laatste{background:#a52d29;border-color:#74211f}
.p-vakje.laatste .v-dag,.p-vakje.laatste .v-maand{color:#f3d9a6}
.p-vakje.laatste .v-num{color:#fff8e9}
.p-legenda{display:flex;gap:10px 18px;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:#5a675f;border-top:2px dashed rgba(39,52,47,.24);padding-top:10px;margin-top:4px}
.p-legenda span{display:inline-flex;align-items:center;gap:6px}
.p-legenda i{width:15px;height:15px;border-radius:4px;flex:none;border:2px solid #27342f;background:#fff8e9}
.p-legenda i.lg-weekend{border-style:dashed;border-color:#557382;background:#e6eef0}
.p-legenda i.lg-laatste{background:#a52d29;border-color:#74211f}

/* de berekende uitkomst op de pagina (niet op het printvel) */
.po-uitslag{display:none;margin-top:14px;padding:14px 16px;border-radius:12px;background:#eef3e4;border:1px solid rgba(49,87,68,.25)}
.po-uitslag:not(:empty){display:block}
.po-uitslag b{display:block;font:700 20px/1.15 "Alegreya",Georgia,serif;color:var(--green)}
.po-uitslag span{display:block;margin-top:4px;font-size:14.5px;color:#3f4e48}

/* in tien minuten */
.kk-tien{margin-top:60px;padding:clamp(22px,3.6vw,36px);border-radius:22px;background:var(--green);color:#fff5de;box-shadow:var(--shadow-soft)}
.kk-tien h2{margin:0 0 6px;font:700 clamp(28px,3.6vw,40px)/1 "Alegreya",Georgia,serif}
.kk-tien .t-intro{margin:0 0 20px;color:#d2ded7;max-width:66ch}
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.t-kaart{background:#f7e8ca;color:var(--ink);border-radius:15px;padding:15px 17px;text-decoration:none;display:block;transition:transform .15s ease}
.t-kaart b{display:block;font:700 19px/1.1 "Alegreya",Georgia,serif;color:var(--red);margin-bottom:4px}
.t-kaart span{font-size:14.5px;color:#4c5a52}
.t-kaart:hover{transform:translateY(-2px)}

.kk-slot{margin-top:56px;max-width:72ch}
.kk-slot h2{font:700 clamp(26px,3.2vw,34px)/1.05 "Alegreya",Georgia,serif;margin:0 0 10px}
.kk-slot p{font-size:16.5px;color:#3f4e48}

/* vragenlijst onderaan de losse pagina's, goed voor de zoekresultaten */
.kk-vragen{margin-top:52px;max-width:74ch}
.kk-vragen h2{font:700 clamp(26px,3.2vw,34px)/1.05 "Alegreya",Georgia,serif;margin:0 0 14px}
.kk-vragen details{border-bottom:1px solid rgba(39,52,47,.16);padding:12px 0}
.kk-vragen summary{cursor:pointer;font:700 18.5px/1.3 "Alegreya",Georgia,serif;list-style:none}
.kk-vragen summary::-webkit-details-marker{display:none}
.kk-vragen summary:before{content:"+";display:inline-block;width:20px;font-weight:800;color:var(--red)}
.kk-vragen details[open] summary:before{content:"–"}
.kk-vragen details p{margin:8px 0 0 20px;font-size:16px;color:#3f4e48}

.kk-sprite{position:absolute;width:0;height:0;overflow:hidden}

@media(max-width:820px){
  .kk-top{grid-template-columns:1fr}
  .kk-mod-kop{grid-template-columns:64px 1fr;gap:12px}
  .kk-mod-kop svg{width:64px}
  .lootjes-vel,.bingo-vel,.kring-vel{grid-template-columns:1fr}
  .kk-veld select,.kk-veld input[type=text],.kk-veld input[type=date],.kk-veld input[type=number]{min-width:0;width:100%}
  .kk-veld{width:100%}
  .p-vakjes{grid-template-columns:repeat(5,1fr)}
  .bingo-cel span{word-break:break-word;font-size:12px}
  .bingo-cel svg{width:26px;height:26px}
  .bingo-cel{min-height:50px;padding:4px 2px}
  .bingo-titel b{font-size:17px}
}

/* ==========================================================================
   Bingomolen: klassikaal draaien op het digibord.
   Alleen op /sinterklaasbingo/. Hergebruikt exact dezelfde plaatjes (de #ic-…
   symbols in de sprite) en dezelfde woordenlijst als de kaarten. De molen mag
   nooit mee-printen: zie het @media print-blok onderaan (.molen display:none).
   ========================================================================== */
.molen-start{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px dashed rgba(39,52,47,.2)}
.molen-start b{display:block;font:700 18px/1.15 "Alegreya",Georgia,serif}
.molen-start span{font-size:14px;color:#6b756f}
.molen-start .btn{font-size:17px;padding:14px 22px}

/* De overlay staat als direct kind van <body> (buiten <main>, dat een eigen
   z-index-context heeft), zodat hij ècht over de navigatie valt. Geen flex-
   centrering op .molen zelf: dat kapt de bovenkant af zodra de inhoud hoger is
   dan het scherm. In plaats daarvan een scroll-container met een binnenwrap van
   min-height:100% die de inhoud centreert als het past en anders netjes van
   boven af laat scrollen (geen vaste hoogtes waar tekst in moet passen). */
.molen{position:fixed;inset:0;z-index:2000;background:#243029;color:#fff8e9;overflow-y:auto;overflow-x:hidden}
.molen[hidden]{display:none}
.molen-binnen{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,20px);padding:clamp(16px,3.2vh,34px) clamp(14px,3vw,30px);text-align:center}
.molen-kop{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.molen-titel{font:700 clamp(20px,3vh,30px)/1.1 "Alegreya",Georgia,serif;color:#f0d38d}
.molen-teller{font-size:clamp(13px,1.8vh,16px);font-weight:700;color:#c7d3c9}

.molen-groot{width:min(42vh,380px);max-width:100%;aspect-ratio:1;background:#fffaf0;border:8px solid #f0d38d;border-radius:30px;box-shadow:0 20px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#27342f}
.molen-groot svg{width:54%;height:54%}
.molen-groot .molen-woord{font:700 clamp(24px,4.6vh,42px)/1.05 "Alegreya",Georgia,serif;color:#a52d29;max-width:100%;padding:0 12px;overflow-wrap:anywhere}
.molen-groot .molen-leeg{font:600 clamp(16px,2.6vh,23px)/1.3 "Alegreya",Georgia,serif;color:#7a857e;padding:0 20px}
.molen-groot.is-spin svg{filter:blur(.4px)}
.molen-groot.is-land{animation:molen-pop .35s ease}
@keyframes molen-pop{0%{transform:scale(.85)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

.molen-draai{border:0;border-radius:16px;background:#a52d29;color:#fff8e9;font:800 clamp(22px,3.2vh,32px)/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.06em;padding:clamp(13px,2.2vh,22px) clamp(40px,8vw,82px);box-shadow:0 7px 0 #74211f;cursor:pointer}
.molen-draai:hover:not([disabled]){background:#b23a32}
.molen-draai:active:not([disabled]){transform:translateY(4px);box-shadow:none}
.molen-draai:focus-visible{outline:4px solid #f0d38d;outline-offset:3px}
.molen-draai[disabled]{background:#4a5b4f;color:#c7d3c9;box-shadow:0 7px 0 #333f37;cursor:default}

.molen-slot{margin:0;font:700 clamp(18px,2.6vh,24px)/1.25 "Alegreya",Georgia,serif;color:#f0d38d}
.molen-slot[hidden]{display:none}

/* strook met ALLE al gedraaide plaatjes; nieuwste gemarkeerd */
.molen-gedraaid-wrap{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.molen-gedraaid-kop{font-size:clamp(12px,1.6vh,15px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb0a4}
.molen-gedraaid-kop[hidden]{display:none}
.molen-gedraaid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(5px,.9vh,9px);list-style:none;margin:0;padding:0;max-width:min(900px,100%)}
.molen-gedraaid li{display:flex;flex-direction:column;align-items:center;gap:1px;background:#fffaf0;border:2px solid #cdb98a;border-radius:10px;padding:5px 4px 3px;width:clamp(52px,6.6vh,70px);color:#27342f}
.molen-gedraaid li svg{width:clamp(26px,3.6vh,40px);height:clamp(26px,3.6vh,40px)}
.molen-gedraaid li span{font-size:clamp(9px,1.2vh,12px);font-weight:800;line-height:1;overflow-wrap:anywhere}
.molen-gedraaid li.is-nieuw{border-color:#f0d38d;background:#fff;box-shadow:0 0 0 3px rgba(240,211,141,.55);transform:scale(1.06)}

.molen-voet{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-top:2px}
.molen-terug-wrap{display:flex;flex-direction:column;align-items:center;gap:1px}
.molen-terug-hint{font-size:clamp(11px,1.4vh,13px);color:#8ea394}
.molen-link{background:none;border:0;color:#c7d3c9;font:inherit;font-size:clamp(13px,1.8vh,16px);text-decoration:underline;cursor:pointer;padding:6px}
.molen-link:hover{color:#fff8e9}
.molen-link:focus-visible{outline:3px solid #f0d38d;outline-offset:2px;border-radius:6px}

/* bevestiging bij opnieuw beginnen, in huisstijl (geen native confirm) */
.molen-bevestig{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;background:rgba(20,28,23,.74);padding:20px}
.molen-bevestig[hidden]{display:none}
.molen-bevestig-kaart{background:#fffaf0;color:#27342f;border-radius:18px;border:1px solid rgba(39,52,47,.14);box-shadow:0 24px 60px rgba(0,0,0,.45);padding:clamp(22px,3.2vh,32px);max-width:430px;text-align:center}
.molen-bevestig-titel{margin:0 0 6px;font:700 clamp(22px,3vh,28px)/1.15 "Alegreya",Georgia,serif;color:var(--red)}
.molen-bevestig-tekst{margin:0 0 18px;font-size:16px;color:#3f4e48}
.molen-bevestig-knoppen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.molen-bevestig-knoppen .btn{font-size:16px;padding:12px 18px;cursor:pointer}

@media(prefers-reduced-motion:reduce){
  .molen-groot.is-land{animation:none}
  .molen-groot.is-spin svg{filter:none}
  .molen-gedraaid li.is-nieuw{transform:none}
  .kr-kaart.is-getrokken{animation:none}
}

@media print{
  @page{margin:12mm}
  body{background:#fff}
  .site-nav,.mobile-menu,.site-footer,.page-hero,.kk-top,.kk-inhoud,.kk-kaarten,
  .kk-tien,.kk-slot,.kk-verder,.kk-vragen,.ontdek,.molen{display:none !important}
  .content{padding:0;max-width:none}
  .kk-mod{margin:0}
  .kk-mod-kop,.kk-uitleg,.kk-controls,.quiz-knoppen,.kring-groepen,
  .quiz-score,.trek-uitslag,.kk-velkop span,.kr-trekker{display:none !important}
  .kk-vel{display:block !important}
  .bingo-kaart,.lootje,.kringkaart,.vraag-kaart,.poster{break-inside:avoid;page-break-inside:avoid}
  .bingo-kaart{content-visibility:visible !important;contain-intrinsic-height:none !important}
  /* aftelposter: geen velkop-titel op het vel, en het vakjesraster vult de volle
     bedrukbare breedte. De kolomkeuze in klassenkist.js garandeert dat het raster
     plus kop, legenda en merk op één staand A4 passen. */
  #po-vel .kk-velkop{display:none !important}
  .poster{max-width:none;border-width:3px;padding:9mm 8mm 6mm}
  .poster .p-titel{font-size:22px}
  .poster .p-begin{margin:6px 0 2px}
  .p-vakjes{gap:2.5mm;margin:6mm 0 5mm}
  .p-vakje{border-width:2px}
  .antwoorden button{border-width:1px}
  .antwoordblad{display:block;margin-top:14px;page-break-before:always;break-before:page}
  .v-toelicht{display:none !important}
  .antwoorden button.goed,.antwoorden button.fout{background:#fffaf0 !important;border-color:rgba(39,52,47,.3) !important;font-weight:600 !important}
  .kk-merk-print{display:flex !important;justify-content:center;margin-top:14px}
  .kk-merk-print img{height:56px;width:auto;display:block}
}