/* Nora op 3 poten — zonnige tuin: lucht boven, gras onder, grote speelse tegels */
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(../fonts/fredoka-600.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(../fonts/fredoka-700.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(../fonts/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(../fonts/atkinson-700.woff2) format("woff2")}

:root{
  --paper:#FFFCF5; --surface:#FFFFFF; --ink:#1F2A33; --soft:#5B6670;
  /* kleuren uit de illustraties: hemel, geelgroen gras, houten schutting */
  --red:#E5412F; --red-ink:#FFFCF5; --sun:#F6C744; --grass:#9BB536; --grass-num:#4F6B18;
  --sky:#D6EEFC; --sky-strong:#8FCDF8; --wood:#B97D42; --wood-dark:#7E4F25;
  --line:#E6DFD0; --ok:#357A22; --nope:#C2410C;
  --display:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --r:22px; color-scheme:only light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.15rem;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:980px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:700}
h3{font-size:1.3rem;font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:8px}
.tag{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.klein{font-size:.95rem;color:var(--soft)}
.lead{font-size:1.3rem}

header.top{background:var(--sky-strong);border-bottom:6px solid var(--grass)}
header.top .wrap{padding-block:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.6rem}
.three{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--red);color:var(--red-ink);border:3px solid var(--paper);box-shadow:0 3px 0 var(--ink);transform:rotate(-8deg);font-size:1.35rem;line-height:1}
nav{display:flex;flex-wrap:wrap;gap:8px}
nav a{font-family:var(--display);font-weight:600;text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--surface);border:2px solid var(--ink);font-size:1rem}
nav a[aria-current="page"]{background:var(--sun);color:#1F2A33}

main .wrap{padding-block:28px 48px;display:flex;flex-direction:column;gap:28px}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:1.25rem;text-decoration:none;padding:14px 22px;border-radius:18px;background:var(--red);color:var(--red-ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn.ghost{background:var(--surface);color:var(--ink)}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.hero>*{min-width:0}
.hero .pic{border:4px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:0 8px 0 var(--ink);transform:rotate(1.5deg);background:var(--sky)}
.hero .pic img{display:block;width:100%;height:auto}
.hero .txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.bende{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dier{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.dier .badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.5rem;color:#1F2A33}
.dier small{color:var(--soft);font-size:.95rem}
.plank{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;padding-bottom:14px;border-bottom:14px solid var(--wood);border-radius:0 0 6px 6px;box-shadow:0 4px 0 var(--wood-dark)}
.boek{border-radius:var(--r);padding:18px;border:3px solid var(--ink);display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--surface);min-height:150px}
.boek .nr{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--red)}
.boek.dicht{border-style:dashed;border-color:var(--line);color:var(--soft)}
.boek.dicht .nr{color:var(--soft)}

.kaart{background:var(--sky);border-radius:var(--r);padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.stempels{display:flex;gap:8px;flex-wrap:wrap}
.stempel{width:44px;height:44px;border-radius:50%;border:3px dashed var(--soft);display:grid;place-items:center;background:var(--surface)}
.stempel.vol{border:3px solid var(--ink);background:var(--sun);color:#1F2A33}
.stempel svg{width:24px;height:24px}
.hfdst{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tegel{position:relative;text-decoration:none;background:var(--surface);border:3px solid var(--wood-dark);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 5px 0 var(--wood);transition:transform .12s}
.tegel:hover{transform:translateY(-3px)}
.tegel .nr{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--grass-num)}
.tegel .gehaald{position:absolute;top:14px;right:14px}

.kop{display:flex;flex-direction:column;gap:6px}
.kop .tag{color:var(--red)}
.blokken{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.blok{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.blok.breed{grid-column:1/-1}
.blok h3{display:flex;align-items:center;gap:10px}
.icoon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.icoon svg{width:22px;height:22px}
.video{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:16px;overflow:hidden;background:#000}
.video video{width:100%;height:100%;display:block;object-fit:contain}
.leeg{aspect-ratio:16/9;max-width:100%;border-radius:16px;background:repeating-linear-gradient(135deg,var(--sky) 0 18px,var(--paper) 18px 36px);border:3px dashed var(--soft);display:grid;place-items:center;text-align:center;padding:16px;color:var(--soft)}
.leeg.foto{aspect-ratio:4/3}
.vraag{display:flex;flex-direction:column;gap:10px}
.vraag p{font-weight:700}
.opties{display:flex;flex-wrap:wrap;gap:10px}
.optie{font:inherit;font-size:1.1rem;padding:10px 16px;border-radius:14px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.optie.goed{background:var(--ok);color:#fff;border-color:var(--ok)}
.optie.fout{border-color:var(--nope);color:var(--nope);text-decoration:line-through}
.optie.gekozen{background:var(--sun);color:#1F2A33}
.feedback{min-height:1.5em;font-weight:700}
.feedback.goed{color:var(--ok)} .feedback.fout{color:var(--nope)}
.weetje{font-size:1.25rem}
.fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fotos figure{margin:0;display:flex;flex-direction:column;gap:10px}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.papier{background:#FFFFFF;border-radius:12px;border:2px solid var(--line);padding:8px;max-width:440px}
.papier svg,.papier img{display:block;width:100%;height:auto}
.zoek{position:relative;max-width:640px;border-radius:16px;overflow:hidden;border:3px solid var(--ink)}
.zoek svg{display:block;width:100%;height:auto;cursor:crosshair}
.verder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.beloning h3{justify-content:center}
.beloning{background:var(--sun);color:#1F2A33;border:3px solid #1F2A33;border-radius:var(--r);padding:20px;text-align:center;display:flex;flex-direction:column;gap:6px}
.oorkonde{background:#FFFCF5;color:#1F2A33;border:6px double #1F2A33;border-radius:18px;padding:28px 20px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;max-width:640px;margin:0 auto}
.oorkonde .lijn{width:80%;border-bottom:3px dotted #1F2A33;height:2.2rem}
.oorkonde h2{color:#E5412F}

.uitleg{background:var(--sky);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px;max-width:70ch;align-items:flex-start}
.lijst{display:flex;flex-direction:column;gap:12px;max-width:65ch;padding:0;margin:0}
.lijst li{margin-left:1.2em}
.product{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:20px}
.product>*{min-width:0}
.product img{border-radius:14px;border:3px solid var(--ink);display:block;width:100%;height:auto}
.product .info{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.prijs{font-family:var(--display);font-weight:700;font-size:2rem;font-variant-numeric:tabular-nums}
.poort{background:var(--sky);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:10px;max-width:60ch}
.poort input,.slot input{font:inherit;font-size:1.2rem;width:6em;padding:8px 10px;border-radius:12px;border:3px solid var(--ink);background:var(--surface);color:var(--ink)}
.poort .rij,.slot .rij{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.voorlees audio{width:100%;display:block}
.slot{background:var(--sky);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.slot-kop{display:flex;gap:8px;align-items:center}
.slot-kop svg{width:24px;height:24px;flex:none}
.slot label{font-family:var(--display);font-weight:600}

.teaser{display:flex;gap:20px;align-items:center;background:var(--surface);border:3px dashed var(--wood);border-radius:var(--r);padding:20px}
.teaser>*{min-width:0}
.teaser-nr{flex:none;width:84px;height:110px;border-radius:10px;background:var(--wood);border:3px solid var(--wood-dark);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:3rem;color:#FFFCF5;transform:rotate(-4deg);box-shadow:0 5px 0 var(--wood-dark)}
.teaser-tekst{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.teaser-tekst .tag{color:var(--wood-dark)}
@media (max-width:440px){.teaser{flex-direction:column;align-items:flex-start}}

/* Digibord: alles groter, voor klassikaal gebruik (?bord=1) */
body.digibord{font-size:1.45rem}
body.digibord .wrap{max-width:1400px}
body.digibord h1{font-size:clamp(2.6rem,5vw,4rem)}
body.digibord .optie{font-size:1.6rem;padding:16px 26px;border-radius:18px}
body.digibord .blokken{grid-template-columns:1fr}
body.digibord .zoek{max-width:1000px}
.les{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.les>div{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bordlinks{display:flex;flex-wrap:wrap;gap:10px}
.bordlinks a{font-family:var(--display);font-weight:600;text-decoration:none;padding:10px 16px;border-radius:14px;border:3px solid var(--wood-dark);background:var(--surface);box-shadow:0 4px 0 var(--wood)}
@media (max-width:760px){.les{grid-template-columns:1fr}}

footer{border-top:6px solid var(--grass);background:var(--sky-strong)}
footer .wrap{padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.95rem;color:var(--ink)}

@media (max-width:760px){
  .hero,.product{grid-template-columns:1fr}
  .bende,.plank,.hfdst{grid-template-columns:1fr 1fr}
  .blokken{grid-template-columns:1fr}
}
@media (max-width:440px){
  .bende,.plank,.hfdst,.fotos{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Printen: alleen de kleurplaat of oorkonde */
@media print{
  body{background:#fff}
  body.print-mode header,body.print-mode footer,body.print-mode main .wrap>*:not(.print-doel){display:none!important}
  body.print-mode .print-doel{display:block!important;border:0!important}
  body.print-mode .print-doel>*:not(.papier):not(.oorkonde){display:none!important}
  .papier{max-width:none;border:0}
}