/* mam.tdgdigital.com — "Alles van papier": de kijkdoos van Mamo. Vanilla CSS, maten in rem (schaalt mee vanaf 1440). */
@font-face{font-family:"Grandstander";src:url(/fonts/grandstander.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Andika";src:url(/fonts/andika-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url(/fonts/andika-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--inkt:#2a1c12;--papier:#fdf6e7;--wit:#fffdf8;--karton:#c9a27a;--karton-d:#a47f58;--geel:#ffd84a;--roze:#ff8fc7;--blauw:#2f55d4;
  --gras:#79c46f;--pruim:#3a1c40;--nacht:#1e2858;--rood:#d93a40;--lucht:#a9d8ec;--rand:clamp(1rem,4vw,4rem);--kop:"Grandstander","Andika",system-ui,sans-serif;
  --plak:.2rem .28rem 0 var(--inkt);--lijn:.16rem solid var(--inkt)}
html[data-seizoen=lente]{--lucht:#a9d8ec}html[data-seizoen=zomer]{--lucht:#5fb2e3}html[data-seizoen=winter]{--lucht:#b5dcee}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:"Andika",system-ui,sans-serif;font-size:1.125rem;line-height:1.6;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:manual;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--kop);font-weight:800;line-height:1.05;margin:0;hyphens:manual;overflow-wrap:normal;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem)}h2{font-size:clamp(2rem,4.2vw,3.5rem)}h3{font-size:1.7rem}
p{margin:0 0 1em}ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:.12em;text-underline-offset:.18em}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:.22rem solid var(--blauw);outline-offset:.2rem;border-radius:.4rem}
a[href^=mailto]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--wit);padding:.6rem 1rem;border:var(--lijn)}
.wrap{width:min(100% - 2*var(--rand),84rem);margin-inline:auto}
.boven{font-family:var(--kop);font-weight:700;font-size:1.05rem;margin:0 0 .4rem;color:#7a4a1c}
.knoppen{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.4rem 0 0}.knoppen.midden{justify-content:center;margin-top:2.2rem}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:3.2rem;padding:.55em 1.25em .45em;font-family:var(--kop);font-weight:700;font-size:1.15rem;line-height:1.1;
  text-decoration:none;color:var(--inkt);background:var(--wit);border:var(--lijn);border-radius:1.1rem;box-shadow:var(--plak);transition:transform .12s,box-shadow .12s}
.knop:hover{transform:translate(-.06rem,-.1rem);box-shadow:.26rem .38rem 0 var(--inkt)}.knop:active{transform:translate(.14rem,.2rem);box-shadow:.06rem .08rem 0 var(--inkt)}
.knop svg{flex:none;width:1.3rem;height:1.3rem}.knop-klein svg{width:1.25rem;height:1.25rem}.rond svg{width:1.6rem;height:1.6rem}.seizoenen svg,.s-seiz svg{width:1.9rem;height:1.9rem}.les-lijst svg,.map-lijst svg{width:1.3rem;height:1.3rem}.knop-geel{background:var(--geel)}.knop-wit{background:var(--wit)}.knop-lijn{background:transparent}
.knop-lijn-licht{background:transparent;color:#fff5e6;border-color:#fff5e6;box-shadow:.2rem .28rem 0 rgba(0,0,0,.45)}
.knop-klein{min-height:2.75rem;font-size:1rem;padding:.4em .9em .3em;border-radius:.9rem}
.rond{display:grid;place-items:center;width:3rem;height:3rem;flex:none;padding:0;background:var(--wit);border:var(--lijn);border-radius:50%;box-shadow:.14rem .2rem 0 var(--inkt)}
.sectiekop{max-width:44rem;margin-bottom:clamp(1.6rem,3vw,2.8rem)}.sectiekop p{margin:.8rem 0 0;font-size:1.2rem;max-width:36rem}
.sectiekop.licht{color:#fff5e6}
.lood{font-size:1.2rem;max-width:46rem;margin-bottom:2rem}
.mail{font-weight:700}

/* papiervlakken + geknipte randen */
section,.voet{position:relative}
.vriendjes,.theater,.tafel,.speel-band,.les,.winkel,.ouders,.voet,.pkop,.mappen,.lesbrieven,.liedboek,.spellen,.verhaal,.contact,.proza{
  background:var(--vlak,var(--papier)) url(/img/korrel.png);background-blend-mode:soft-light;padding:clamp(3.5rem,7vw,6.5rem) 0}
.rand{position:absolute;left:0;right:0;top:1px;height:1.5rem;transform:translateY(-100%);background:var(--vlak,var(--papier)) url(/img/korrel.png);background-blend-mode:soft-light;pointer-events:none;
  -webkit-mask:var(--m) repeat-x 0 0/auto 100%;mask:var(--m) repeat-x 0 0/auto 100%}
.rand-golf{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' viewBox='0 0 96 24'%3E%3Cpath d='M0 24V12Q24-8 48 12T96 12V24Z'/%3E%3C/svg%3E")}
.rand-kartel{height:1rem;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Cpath d='M0 16V14L10 1L20 14V16Z'/%3E%3C/svg%3E")}
.rand-scheur{height:1.1rem;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='18' viewBox='0 0 260 18'%3E%3Cpath d='M0 18V9L14 5L27 10L41 3L58 8L70 4L88 11L103 5L121 9L137 2L152 8L170 5L184 11L201 4L217 9L233 3L247 8L260 9V18Z'/%3E%3C/svg%3E")}

/* kop */
.kop{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.9rem var(--rand)}
.kop-logo{display:block;flex:none;width:9rem;min-height:2.75rem}.kop-logo img{width:100%;height:auto}
.kop-nav{margin-left:auto}
.kop-nav ul{display:flex;align-items:center;gap:.1rem;padding:.25rem .5rem;background:var(--wit);border:var(--lijn);border-radius:1.1rem;box-shadow:.14rem .2rem 0 var(--inkt)}
.kop-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .8rem;font-family:var(--kop);font-weight:700;font-size:1.08rem;text-decoration:none;border-radius:.7rem;white-space:nowrap}
.kop-nav a:hover{background:var(--geel)}.kop-nav a[aria-current]{background:var(--inkt);color:var(--wit)}
.kop-knoppen{display:flex;gap:.6rem;flex:none}
.menu-knop{display:none}.menu-knop svg+svg{display:none}.menu-knop[aria-expanded=true] svg:first-child{display:none}.menu-knop[aria-expanded=true] svg+svg{display:block}
#geluid .g-uit{display:none}#geluid[aria-pressed=false] .g-aan{display:none}#geluid[aria-pressed=false] .g-uit{display:block}
@media (max-width:1040px){
  .menu-knop{display:grid}.kop-nav{margin:0}.kop-knoppen{margin-left:auto;position:relative;z-index:32}
  .kop-nav{display:none;position:fixed;inset:0;z-index:30;overflow-y:auto;background:var(--geel) url(/img/korrel.png);background-blend-mode:soft-light;padding:6rem var(--rand) 2rem}
  .kop-nav.open{display:block}
  .kop-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:0;background:none;border:0;box-shadow:none}
  .kop-nav a{justify-content:flex-start;min-height:3.6rem;font-size:clamp(1.7rem,7vw,2.4rem);font-weight:800;border-bottom:.14rem dashed var(--inkt);border-radius:0;padding:0 .2rem}
  .kop-nav a[aria-current]{background:none;color:var(--inkt);text-decoration:underline}
  html.menu-open{overflow:hidden}
}

/* opening: het deksel van de doos */
.deksel{display:none}
.doos-dicht{overflow:hidden}
.doos-dicht .deksel{display:block;position:fixed;inset:0;z-index:100;transition:transform .95s cubic-bezier(.55,0,.25,1);touch-action:none}
.deksel.gaat{transform:translateY(-112%) rotate(-2.5deg)}
.deksel-vlak{position:absolute;inset:0 0 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,3svh,2rem);padding:1.5rem var(--rand);overflow-y:auto;
  background:repeating-linear-gradient(90deg,rgba(90,55,20,.07) 0 .09rem,transparent .09rem .62rem),var(--karton) url(/img/korrel.png);background-blend-mode:normal,soft-light}
.deksel-rand{position:absolute;left:0;right:0;bottom:0;height:2rem;background:var(--karton-d);border-top:.12rem solid rgba(60,35,10,.35);box-shadow:0 .5rem .9rem rgba(40,25,10,.35)}
.deksel-etiket{position:relative;width:min(78vw,27rem,62svh);padding:1.6rem 1.6rem 1.1rem;background:var(--wit);border:var(--lijn);border-radius:.5rem;box-shadow:var(--plak);transform:rotate(-2deg);text-align:center}
.deksel-etiket::before,.deksel-etiket::after{content:"";position:absolute;top:-.8rem;width:5rem;height:1.6rem;background:rgba(255,216,74,.82);border:.08rem solid rgba(42,28,18,.25)}
.deksel-etiket::before{left:-1.6rem;transform:rotate(-32deg)}.deksel-etiket::after{right:-1.6rem;transform:rotate(30deg)}
.deksel-etiket img{width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.deksel-etiket p{margin:.7rem 0 0;font-family:var(--kop);font-weight:700;font-size:clamp(1.15rem,3.6vw,1.5rem)}
.deksel-open{font-size:clamp(1.3rem,4vw,1.6rem);min-height:4rem;padding-inline:1.6em}
.deksel-over{min-height:2.75rem;padding:0 1rem;background:none;border:0;font-family:var(--kop);font-weight:600;text-decoration:underline;color:#4a2f18}
@media (prefers-reduced-motion:reduce){.doos-dicht .deksel{transition:opacity .2s}.deksel.gaat{transform:none;opacity:0}}

/* hero: de kijkdoos */
.kijk{height:max(100svh,40rem);overflow:hidden;background:var(--lucht)}
.kijk-beeld{position:absolute;inset:0}
.kijk-doos{position:absolute;left:50%;bottom:0;width:max(100%,calc(max(100svh,40rem)*1.7927));aspect-ratio:1280/714;transform:translateX(-50%)}
.kijk-poster,.kijk-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kijk-film{opacity:0;transition:opacity .7s}.kijk-film.speelt{opacity:1}
.kijk-figuren{position:absolute;inset:0}
.fig{position:absolute;left:var(--x);bottom:var(--b);width:var(--w);padding:0;margin:0;background:none;border:0;transform:translateX(-50%);-webkit-tap-highlight-color:transparent}
.fig img,.vr-knop img{width:100%;height:auto;pointer-events:none;transform-origin:50% 100%}
.fig-slowy{--x:47%;--b:19%;--w:10.5%}.fig-snoepie{--x:55.500%;--b:21.500%;--w:6.800%}.fig-dobbi{--x:89.300%;--b:17%;--w:8.500%}
.fig-hippi{--x:58.500%;--b:60%;--w:6%}.fig-meme{--x:79.500%;--b:3%;--w:15.500%}.fig-mamo{--x:63.500%;--b:1.500%;--w:17%}
.js .fig-hippi img{animation:fladder 2.4s steps(2,jump-none) infinite}
@keyframes fladder{0%{transform:translateY(0) rotate(-3deg)}100%{transform:translateY(-9%) rotate(3deg)}}
.springt img{animation:spring .62s cubic-bezier(.3,.6,.4,1)!important}
@keyframes spring{0%{transform:scale(1,1)}18%{transform:scale(1.08,.86)}45%{transform:translateY(-22%) scale(.95,1.07) rotate(-4deg)}72%{transform:translateY(0) scale(1.06,.92)}100%{transform:none}}
.fig-naam{position:absolute;left:50%;bottom:calc(100% + .2rem);padding:.15rem .7rem 0;font-family:var(--kop);font-weight:800;font-size:1.25rem;white-space:nowrap;background:var(--wit);border:var(--lijn);border-radius:.7rem;
  transform:translateX(-50%) scale(0);transform-origin:50% 100%;transition:transform .18s;pointer-events:none}
.springt .fig-naam,.fig.genoemd .fig-naam{transform:translateX(-50%) scale(1) rotate(-3deg)}
.kijk-tip{position:absolute;left:calc(50% + 14vw);bottom:47%;margin:0;padding:.3rem .8rem .15rem;font-family:var(--kop);font-weight:700;font-size:1rem;background:var(--geel);border:var(--lijn);border-radius:.7rem;transform:rotate(4deg);transition:opacity .3s}
.kijk-tip.weg{opacity:0}
.kijk-tekst{position:absolute;inset:0;pointer-events:none}
.kijk-vel{position:absolute;left:var(--rand);bottom:clamp(1.4rem,5svh,3.2rem);width:min(31rem,37vw);padding:1.6rem 1.7rem 1.4rem;background:var(--wit) url(/img/korrel.png);background-blend-mode:soft-light;border:var(--lijn);border-radius:.6rem;
  box-shadow:.3rem .42rem 0 var(--inkt);transform:rotate(-1.3deg);pointer-events:auto}
.kijk-vel h1{font-size:clamp(2.1rem,3.6vw,3.3rem)}
.kijk-vel .intro{margin:.9rem 0 0;font-size:1.08rem}
.feiten{margin:1.1rem 0 0;font-size:.92rem;font-weight:700;color:#5b3a1c}.feiten i{display:inline-block;width:.38rem;height:.38rem;margin:0 .35rem .12rem;border-radius:50%;background:currentColor}
.kijk-seizoen{position:absolute;right:var(--rand);top:5.4rem;padding:.6rem .7rem .55rem;background:var(--wit);border:var(--lijn);border-radius:.9rem;box-shadow:.14rem .2rem 0 var(--inkt);transform:rotate(1.2deg);pointer-events:auto}
.kijk-seizoen p{margin:0 .2rem .4rem;font-family:var(--kop);font-weight:600;font-size:1rem;line-height:1.2}
.seizoenen{display:flex;gap:.3rem}
.seizoenen button{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:3.6rem;min-height:3.6rem;padding:.35rem .3rem .2rem;background:none;border:.14rem solid transparent;border-radius:.7rem;font-family:var(--kop);font-weight:700;font-size:.82rem}
.seizoenen button:hover{background:#fff1b8}.seizoenen button[aria-pressed=true]{background:var(--geel);border-color:var(--inkt)}

@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .kijk{height:auto;overflow:visible;padding-top:4.6rem}
  .kijk-beeld{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
  .kijk-doos{width:134.500%;-webkit-mask:linear-gradient(#0000,#000 7%);mask:linear-gradient(#0000,#000 7%)}
  .fig-slowy{--x:24%;--b:21%;--w:15%}.fig-snoepie{--x:54%;--b:22%;--w:10%}.fig-dobbi{--x:80%;--b:18%;--w:12.500%}
  .fig-hippi{--x:60%;--b:60%;--w:8.500%}.fig-meme{--x:67%;--b:3%;--w:23%}.fig-mamo{--x:38%;--b:1.500%;--w:26%}
  .fig-naam{font-size:1rem}
  .kijk-tip{left:50%;right:auto;bottom:auto;top:calc(4.6rem + 75vw - 1.1rem);z-index:3;font-size:.95rem;white-space:nowrap;transform:translateX(-50%) rotate(-2deg)}
  .kijk-tekst{position:relative;inset:auto;pointer-events:auto;padding:1.6rem var(--rand) 3.4rem;background:var(--papier) url(/img/korrel.png);background-blend-mode:soft-light}
  .kijk-vel{position:static;width:auto;max-width:40rem;padding:0;background:none;border:0;box-shadow:none;transform:none}
  .kijk-vel h1{font-size:clamp(2.2rem,9.4vw,3.6rem)}
  .kijk-seizoen{position:static;display:inline-block;margin-top:1.8rem;transform:rotate(-.8deg)}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){.kijk-beeld{aspect-ratio:16/10}.kijk-doos{width:112.100%}.kijk-tip{top:calc(4.6rem + 62.500vw - 1.1rem)}
  .fig-slowy{--x:20%}.fig-dobbi{--x:86%}.fig-mamo{--x:37%;--w:22%}.fig-meme{--x:64%;--w:20%}}
@media (orientation:landscape) and (max-height:520px) and (min-width:761px){
  .kijk{height:max(100svh,21rem)}.kijk-doos{width:max(100%,calc(max(100svh,21rem)*1.7927))}
  .kijk-vel{bottom:.8rem;padding:.9rem 1.1rem .8rem;width:min(22rem,42vw)}.kijk-vel h1{font-size:1.7rem}.kijk-vel .intro,.feiten,.kijk-vel .boven,.kijk-tip{display:none}
  .kijk-vel .knoppen{margin-top:.7rem;gap:.6rem}.kijk-vel .knop{min-height:2.75rem;font-size:1rem}
  .kijk-seizoen{top:4.6rem;padding:.3rem .4rem}.kijk-seizoen p{display:none}.seizoenen button{min-width:2.9rem;min-height:2.9rem;font-size:.7rem}
  .fig-slowy{--x:52%}.fig-snoepie{--x:61%}.fig-mamo{--x:68%;--w:15%}.fig-meme{--x:82%;--w:13.500%}.fig-hippi{--x:70%}
}

/* vriendjes */
.vriendjes{--vlak:var(--papier)}
.vr-rij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)}
.vr{text-align:center}.vr:nth-child(even){margin-top:2.2rem}
.vr-knop{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:9%;background:var(--vel) url(/img/korrel.png);background-blend-mode:soft-light;border:var(--lijn);
  border-radius:47% 53% 50% 50%/54% 47% 53% 46%;box-shadow:var(--plak);transform:rotate(-2deg);transition:transform .15s;-webkit-tap-highlight-color:transparent}
.vr:nth-child(even) .vr-knop{transform:rotate(2.5deg);border-radius:52% 48% 46% 54%/47% 55% 45% 53%}
.vr-knop:hover{transform:rotate(0) scale(1.03)}
.vr-knop img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.vr-mamo .vr-knop img,.vr-meme .vr-knop img{width:128%;max-width:none;max-height:none}
.vr h3{margin:1.1rem 0 .3rem;font-size:clamp(1.6rem,2.4vw,2.2rem)}.vr p{margin:0 auto;max-width:15rem;font-size:1rem;line-height:1.45}
@media (max-width:1100px){.vr-rij{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.4rem}.vr:nth-child(even){margin-top:0}}
@media (max-width:560px){.vr-rij{grid-template-columns:repeat(2,minmax(0,1fr))}.vr h3{font-size:1.6rem}.vr p{font-size:.95rem}}

/* theater */
.theater{--vlak:var(--pruim);color:#fff5e6}
.theater-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start}
.toneel-lijst{position:relative;padding:1.9rem clamp(.9rem,2.4vw,2.2rem) clamp(.9rem,2vw,1.6rem);background:#24102a;border:.18rem solid #150818;border-radius:1rem;overflow:hidden;box-shadow:.3rem .42rem 0 #150818}
.toneel-lijst::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:1.5rem;background:radial-gradient(circle at 50% 0,var(--rood) 0 .98rem,transparent 1rem) 0 .4rem/2rem 1.2rem repeat-x,linear-gradient(var(--rood) 0 .5rem,transparent .5rem)}
.scherm{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:.5rem;background:#000}
.scherm img,.scherm iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.scherm{cursor:pointer}.speel{position:absolute;right:4%;bottom:6%;display:grid;place-items:center;width:5.4rem;height:5.4rem;padding:0 0 0 .3rem;color:var(--inkt);background:var(--geel);border:var(--lijn);border-radius:50%;box-shadow:var(--plak);transition:transform .15s}
.speel:hover,.scherm:hover .speel{transform:scale(1.08)}.speel svg{width:2.6rem;height:2.6rem}
.doek{position:absolute;z-index:2;top:0;bottom:0;width:50.500%;background:repeating-linear-gradient(90deg,#d93a40 0 1.1rem,#b3262c 1.1rem 1.45rem,#e4555a 1.45rem 2.6rem);pointer-events:none;transition:transform 1.5s cubic-bezier(.6,0,.2,1)}
.doek-l{left:0;transform-origin:0 50%}.doek-r{right:0;transform-origin:100% 50%}
.doek{transform:scaleX(.07)}.js .toneel:not(.open) .doek{transform:scaleX(1)}
.toneel-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-top:1.1rem}
.scherm-titel{margin:0;font-family:var(--kop);font-weight:800;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1}
.taal{display:flex;gap:.3rem;padding:.25rem;background:#24102a;border-radius:.9rem}
.taal button{min-height:2.75rem;padding:.1rem .9rem 0;background:none;border:0;border-radius:.7rem;color:#fff5e6;font-family:var(--kop);font-weight:700;font-size:1rem}
.taal button[aria-pressed=true]{background:var(--geel);color:var(--inkt)}
.kaartjes{display:grid;gap:.5rem}
.kaartje{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:1rem;width:100%;min-height:4.6rem;padding:.4rem;text-align:left;color:inherit;background:none;border:.14rem dashed rgba(255,245,230,.35);border-radius:.9rem}
.kaartje:hover{background:rgba(255,255,255,.08);border-style:solid}
.kaartje[aria-current=true]{background:var(--geel);color:var(--inkt);border:.14rem solid var(--inkt)}
.kaartje-beeld{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:.55rem;background:#000}
.kaartje-beeld img{width:100%;height:100%;object-fit:cover}
.kaartje-beeld i{position:absolute;right:.3rem;bottom:.3rem;display:grid;place-items:center;width:1.7rem;height:1.7rem;color:var(--inkt);background:var(--geel);border-radius:50%}.kaartje-beeld i svg{width:1rem;height:1rem}
.kaartje-titel{font-family:var(--kop);font-weight:700;font-size:1.15rem;line-height:1.15}
.theater-rechts .knoppen{margin-top:1.6rem}
@media (max-width:900px){.theater-in{grid-template-columns:minmax(0,1fr)}.kaartjes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .kaartje{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.45rem .45rem .6rem;align-content:start}.kaartje-titel{font-size:1.05rem;padding:0 .2rem}.speel{width:4.4rem;height:4.4rem}}
/* filmpjespagina */
.theater-pagina{padding-top:0}.theater-breed{max-width:62rem;margin-inline:auto}
.alles{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin:clamp(2.5rem,5vw,4rem) 0 2rem;padding:1.6rem 0;border-block:.14rem dashed rgba(255,245,230,.4)}
.alles h2{font-size:clamp(1.7rem,3vw,2.4rem)}.alles p{margin:.5rem 0 0;max-width:34rem}
.kaartjes-alle{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem}
.kaartjes-alle .kaartje{grid-template-columns:minmax(0,1fr);gap:.6rem;padding:.5rem .5rem .7rem;align-content:start;height:100%}
@media (max-width:560px){.kaartjes-alle{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}}

/* kleurtafel */
.tafel{--vlak:var(--karton)}
.tafel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(90,55,20,.06) 0 .09rem,transparent .09rem .62rem);pointer-events:none}
.tafel .wrap{position:relative}
.kt{display:grid;grid-template-columns:13rem minmax(0,1fr) 15rem;grid-template-areas:"doos vel platen";gap:clamp(1.2rem,2.5vw,2.5rem);align-items:start}
.kt-vel{grid-area:vel;justify-self:center;padding:clamp(.5rem,1.2vw,1rem);background:var(--wit);border:var(--lijn);border-radius:.3rem;box-shadow:.36rem .5rem 0 rgba(60,35,10,.55);transform:rotate(.5deg);max-width:100%}
.kt-doek{width:auto;max-width:100%;max-height:min(84svh,58rem);cursor:crosshair;touch-action:manipulation;background:#fff}
.kt-doos{grid-area:doos;padding:1rem;background:var(--wit);border:var(--lijn);border-radius:.8rem;box-shadow:var(--plak)}
.kt-label{margin:0 0 .6rem;font-family:var(--kop);font-weight:800;font-size:1.2rem;line-height:1.1}
.kt-krijt{display:grid;gap:.1rem}
.krijt{display:block;width:100%;height:2.45rem;padding:0;background:none;border:0;border-radius:.4rem}
.krijt i{display:block;height:1.55rem;margin:.45rem 1.6rem .45rem 0;background:linear-gradient(90deg,var(--k) 0 10%,rgba(255,255,255,.45) 10% 13%,var(--k) 13% 62%,rgba(0,0,0,.12) 62% 64%,var(--k) 64%);
  clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%);box-shadow:inset 0 0 0 .1rem rgba(42,28,18,.4);transition:transform .15s}
.krijt-gum i{background:linear-gradient(90deg,#ff9db9 0 22%,#fff 22%);clip-path:none;border-radius:.35rem;margin-right:2.4rem}
.krijt:hover i{transform:translateX(.5rem)}.krijt[aria-checked=true] i{transform:translateX(1.5rem)}
.krijt[aria-checked=true]{background:radial-gradient(circle at .5rem 50%,var(--inkt) 0 .28rem,transparent .3rem)}
.kt-knoppen{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1.1rem}.kt-knoppen .knop{justify-content:flex-start}
.kt-pdf{margin:1rem 0 0;font-size:.95rem;line-height:1.35}
.kt-platen{grid-area:platen}
.kt-platen ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;max-height:min(80svh,54rem);overflow-y:auto;padding:.3rem .5rem .6rem .1rem}
.plaatje{display:block;width:100%;padding:.3rem .3rem .2rem;background:var(--wit);border:var(--lijn);border-radius:.5rem;text-align:center}
.plaatje img{width:100%;aspect-ratio:1;object-fit:contain}
.plaatje span{display:block;font-family:var(--kop);font-weight:600;font-size:.82rem;line-height:1.15;padding:.2rem 0 .1rem}
.plaatje[aria-pressed=true]{background:var(--geel);box-shadow:.14rem .2rem 0 var(--inkt)}
.afdruk{display:none}
@media (max-width:1100px){
  .kt{grid-template-columns:minmax(0,1fr);grid-template-areas:"vel" "doos" "platen"}
  .kt-doek{max-height:none;width:100%}
  .kt-krijt{grid-template-columns:repeat(7,minmax(0,1fr));gap:.2rem .1rem}
  .krijt{height:4.2rem}.krijt i{width:62%;height:3.3rem;margin:.7rem auto .2rem;clip-path:polygon(0 22%,50% 0,100% 22%,100% 100%,0 100%);
    background:linear-gradient(0deg,var(--k) 0 12%,rgba(255,255,255,.45) 12% 15%,var(--k) 15% 55%,rgba(0,0,0,.12) 55% 57%,var(--k) 57%)}
  .krijt-gum i{background:linear-gradient(0deg,#ff9db9 0 26%,#fff 26%);clip-path:none;margin:1.2rem auto .2rem;height:2.8rem}
  .krijt:hover i{transform:none}.krijt[aria-checked=true] i{transform:translateY(-.6rem)}
  .krijt[aria-checked=true]{background:radial-gradient(circle at 50% calc(100% - .35rem),var(--inkt) 0 .28rem,transparent .3rem)}
  .kt-knoppen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-platen ul{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden;padding:.3rem .3rem .8rem;scroll-snap-type:x proximity}
  .kt-platen li{flex:0 0 6.6rem;scroll-snap-align:start}
}
@media (min-width:700px) and (max-width:1100px){.kt{grid-template-columns:minmax(0,1fr) 15rem;grid-template-areas:"vel doos" "platen platen"}.kt-krijt{grid-template-columns:repeat(5,minmax(0,1fr))}.kt-knoppen{grid-template-columns:1fr}}
.tafel-pagina{padding-top:clamp(2rem,4vw,3rem)}

/* spelletjes-band op home */
.speel-band{--vlak:var(--gras);overflow:hidden;padding-bottom:0}
.speel-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2rem;align-items:end}
.speel-tekst{padding-bottom:clamp(3.5rem,7vw,6rem)}.speel-tekst p{font-size:1.2rem;max-width:32rem;margin-top:1rem}
.speel-heg{position:relative;height:clamp(13rem,24vw,21rem)}
.heg{position:absolute;z-index:2;left:-6%;right:-6%;bottom:0;height:44%;background:radial-gradient(circle at 50% 100%,#3f9a4a 0 2.95rem,transparent 3rem) 0 0/6rem 3rem repeat-x,linear-gradient(#3f9a4a,#3f9a4a) 0 2.95rem/100% 100% no-repeat}
.gluur{position:absolute;z-index:1;bottom:22%;width:26%;height:auto}
.gluur-hippi{left:3%;bottom:34%;width:20%;transform:rotate(-8deg)}.gluur-slowy{left:26%;bottom:22%;width:27%}.gluur-snoepie{left:55%;bottom:24%;width:19%;transform:rotate(5deg)}.gluur-dobbi{left:75%;bottom:24%;width:25%;transform:rotate(-3deg)}
@media (max-width:800px){.speel-in{grid-template-columns:minmax(0,1fr)}.speel-tekst{padding-bottom:1rem}.speel-heg{height:clamp(11rem,46vw,17rem)}.heg{height:34%;background-size:4.4rem 2.2rem,100% 100%;background-position:0 0,0 2.15rem;background-image:radial-gradient(circle at 50% 100%,#3f9a4a 0 2.15rem,transparent 2.2rem),linear-gradient(#3f9a4a,#3f9a4a)}}

/* lesmateriaal */
.les{--vlak:var(--papier)}
.les-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.les-lijst{border-top:.14rem dashed var(--inkt)}
.les-lijst a{display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr) auto;grid-template-areas:"naam wat pijl" "naam tal pijl";gap:.1rem 1.2rem;align-items:center;padding:1.1rem .3rem;text-decoration:none;border-bottom:.14rem dashed var(--inkt)}
.les-lijst a:hover{background:#fff1b8}
.les-naam{grid-area:naam;font-family:var(--kop);font-weight:800;font-size:clamp(1.5rem,2vw,1.8rem);line-height:1.05}
.les-wat{grid-area:wat;line-height:1.4}.les-tal{grid-area:tal;font-size:.92rem;font-weight:700;color:#7a4a1c}.les-lijst svg{grid-area:pijl}
.les-stapel{position:relative;aspect-ratio:1/1.05;max-width:30rem;width:100%;justify-self:center}
.blad{position:absolute;width:56%;height:auto;border:var(--lijn);box-shadow:.25rem .35rem 0 rgba(42,28,18,.3);background:#fff}
.blad-4{left:2%;top:14%;transform:rotate(-11deg)}.blad-3{left:40%;top:2%;transform:rotate(7deg)}.blad-2{left:8%;top:28%;transform:rotate(-3deg)}.blad-1{left:36%;top:20%;transform:rotate(4deg)}
@media (max-width:900px){.les-in{grid-template-columns:minmax(0,1fr)}.les-stapel{max-width:24rem}}
@media (max-width:560px){.les-lijst a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"naam pijl" "wat pijl" "tal pijl"}}

/* winkel */
.winkel{--vlak:var(--roze);text-align:center}
.winkel-in{max-width:44rem}.winkel p{font-size:1.25rem;margin:1rem auto 0;max-width:34rem}.winkel .knoppen{justify-content:center}
.winkel h2{font-size:clamp(2.4rem,6vw,4.6rem)}
.winkel{overflow:hidden}.winkel-fig{position:absolute;right:max(2vw,calc(50% - 40rem));bottom:.1rem;width:clamp(9rem,17vw,17rem);height:auto;transform:rotate(-7deg)}
@media (max-width:1000px){.winkel{padding-bottom:clamp(9rem,34vw,13rem)}.winkel-fig{right:50%;transform:translateX(50%) rotate(-5deg);width:clamp(9rem,36vw,13rem)}}

/* ouders */
.ouders{--vlak:#dff0f7}
.ouders-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.ouders-kop p{margin-top:1.1rem;font-size:1.15rem;max-width:30rem}
.waarden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem clamp(1.5rem,3vw,3rem);margin:0}
.waarden div{padding-top:1rem;border-top:.14rem dashed var(--inkt)}
.waarden dt{font-family:var(--kop);font-weight:800;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.1}.waarden dd{margin:.4rem 0 0}
@media (max-width:900px){.ouders-in{grid-template-columns:minmax(0,1fr)}}@media (max-width:480px){.waarden{grid-template-columns:minmax(0,1fr)}}
.ouders-pagina .ouders-in{grid-template-columns:minmax(0,1fr)}

/* voet */
.voet{--vlak:var(--nacht);color:#fff5e6;overflow:hidden;padding-bottom:1.6rem}
.voet-sterren{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,246,194,.8) 0 .12rem,transparent .14rem) 7% 22%/17rem 13rem,radial-gradient(circle,rgba(255,246,194,.55) 0 .08rem,transparent .1rem) 3rem 5rem/11rem 7.3rem,radial-gradient(circle,rgba(255,246,194,.7) 0 .1rem,transparent .12rem) 9rem 1rem/23rem 10.7rem}
.voet-sterren::after{content:"";position:absolute;right:max(var(--rand),8vw);top:2.6rem;width:5rem;height:5rem;border-radius:50%;background:#ffe27a;box-shadow:inset -1.1rem -.5rem 0 #f2c94c}
.voet-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.2fr);gap:2rem clamp(1.5rem,4vw,4rem);align-items:end}
.voet-kop{font-family:var(--kop);font-weight:800;font-size:clamp(3rem,8vw,6rem);line-height:.95;margin:0 0 1rem}
.voet-groet p{max-width:24rem}
.voet-nav a{display:inline-flex;align-items:center;min-height:2.75rem;font-family:var(--kop);font-weight:700;font-size:1.15rem;text-decoration:none}.voet-nav a:hover{text-decoration:underline}
.voet-groep img{width:100%;height:auto}
.voet-klein{grid-column:1/-1;margin:1rem 0 0;padding-top:1.2rem;border-top:.12rem dashed rgba(255,245,230,.4);font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem}
.voet-klein a{display:inline-block;padding:.5rem 0}
@media (max-width:900px){.voet-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.voet-groet{grid-column:1/-1}.voet-nav{columns:1}}
@media (max-width:520px){.voet-in{grid-template-columns:minmax(0,1fr)}.voet-nav{columns:2}.voet-sterren::after{width:3.4rem;height:3.4rem;top:1.6rem}}

/* paginakoppen */
.pkop{--vlak:var(--geel);padding:clamp(7rem,13vw,9.5rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.pkop-pruim{--vlak:var(--pruim);color:#fff5e6}.pkop-karton{--vlak:var(--karton)}.pkop-groen{--vlak:#bfe6a8}.pkop-gras{--vlak:var(--gras)}.pkop-roze{--vlak:var(--roze)}.pkop-blauw{--vlak:#bfe2f1}.pkop-geel{--vlak:var(--geel)}
.pkop-in{display:grid;grid-template-columns:minmax(0,1fr) clamp(7rem,20vw,16rem);gap:1.5rem;align-items:end}
.pkop h1{font-size:clamp(2.8rem,8vw,6rem)}.pkop p{margin:1rem 0 0;font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:40rem}
.pkop-gast img{width:100%;height:auto;transform:rotate(4deg);margin-bottom:-1rem}
.terug{display:inline-flex;align-items:center;min-height:2.75rem;font-family:var(--kop);font-weight:700;text-decoration:none}.terug:hover{text-decoration:underline}
.subnav{margin-top:1.6rem;margin-bottom:-1rem;position:relative;z-index:2}
.subnav ul{display:flex;flex-wrap:wrap;gap:.6rem}
.subnav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.1rem 1rem 0;font-family:var(--kop);font-weight:700;text-decoration:none;background:var(--wit);border:var(--lijn);border-radius:.9rem}
.subnav a[aria-current]{background:var(--inkt);color:var(--wit)}.subnav a:hover{background:var(--geel);color:var(--inkt)}
.p-kleurplaten,.p-kleurboek{background:var(--karton)}.p-kleurplaten .subnav,.p-kleurboek .subnav{margin-bottom:0;padding-top:.4rem}
.p-kleurplaten .tafel .rand,.p-kleurboek .tafel .rand{display:none}

/* lesmateriaal-overzicht */
.map-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.map-lijst a{display:grid;grid-template-columns:8rem minmax(0,1fr) auto;gap:1.3rem;align-items:center;height:100%;padding:1rem 1.2rem 1rem 1rem;text-decoration:none;background:var(--wit);border:var(--lijn);border-radius:.8rem;box-shadow:var(--plak);transition:transform .12s}
.map-lijst a:hover{transform:translate(-.06rem,-.12rem) rotate(-.4deg)}
.map-beeld img{width:100%;aspect-ratio:1;object-fit:cover;border:.1rem solid rgba(42,28,18,.3);border-radius:.4rem;background:#fff}
.map-tekst{display:grid;gap:.2rem}.map-tekst .les-naam{font-size:1.9rem}
.binnenkort{margin-top:clamp(2.5rem,5vw,4rem);padding:1.6rem 0 0;border-top:.14rem dashed var(--inkt);max-width:44rem}.binnenkort h2{font-size:clamp(1.7rem,3vw,2.3rem)}.binnenkort p:last-child{margin:.7rem 0 0}
@media (max-width:900px){.map-lijst{grid-template-columns:minmax(0,1fr)}}@media (max-width:480px){.map-lijst a{grid-template-columns:5rem minmax(0,1fr);}.map-lijst a>svg{display:none}}

/* lesbrieven */
.lesgroep{padding:1.8rem 0;border-top:.14rem dashed var(--inkt)}.lesgroep h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1.3rem}
.lesgroep ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.lesblad{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.1rem;align-items:start}
.lesblad-beeld{display:block;border:var(--lijn);box-shadow:.18rem .25rem 0 rgba(42,28,18,.3);background:#fff;transition:transform .12s}.lesblad-beeld:hover{transform:rotate(-2deg)}
.lesblad-beeld img{width:100%;height:auto}
.lesblad h3{font-size:1.3rem;line-height:1.15}.lesblad-noot{margin:.25rem 0 .5rem;font-size:.92rem;color:#7a4a1c;font-weight:700}
.talen{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;font-size:.95rem}.talen span{flex-basis:100%}
.talen a{display:inline-grid;place-items:center;min-width:2.9rem;min-height:2.75rem;padding:.1rem .5rem 0;font-family:var(--kop);font-weight:700;text-decoration:none;background:var(--wit);border:var(--lijn);border-radius:.7rem}.talen a:hover{background:var(--geel)}
@media (max-width:1000px){.lesgroep ul{grid-template-columns:minmax(0,1fr)}}

/* liedboek */
.liedboek-in{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.lied-inhoud{position:sticky;top:1.5rem;padding:1.1rem 1.2rem;background:var(--wit);border:var(--lijn);border-radius:.8rem;box-shadow:var(--plak)}
.lied-inhoud p{margin:0 0 .3rem;font-family:var(--kop);font-weight:800;font-size:1.3rem}
.lied-inhoud ol{counter-reset:l}.lied-inhoud li{counter-increment:l}
.lied-inhoud a{display:flex;gap:.6rem;align-items:baseline;min-height:2.75rem;padding:.55rem 0 .2rem;line-height:1.25;text-decoration:none;border-bottom:.1rem dashed rgba(42,28,18,.4)}
.lied-inhoud a::before{content:counter(l);font-family:var(--kop);font-weight:800;min-width:1.4rem}.lied-inhoud a:hover{background:#fff1b8}
.lied{padding:0 0 2.6rem;margin-bottom:2.6rem;border-bottom:.14rem dashed var(--inkt);scroll-margin-top:1.5rem}
.lied header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.4rem}.lied h2{font-size:clamp(1.9rem,3.6vw,3rem)}.lied .knoppen{margin:0}
.lied-tekst{columns:2 17rem;column-gap:3rem;font-size:1.15rem;line-height:1.55}.lied-tekst p{break-inside:avoid;hyphens:manual}
@media (max-width:900px){.liedboek-in{grid-template-columns:minmax(0,1fr)}.lied-inhoud{position:static}.lied-inhoud ol{columns:2 12rem;column-gap:1.5rem}}

/* over, contact, proza */
.verhaal-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.verhaal-tekst h2{margin-bottom:1.2rem}.verhaal-tekst p{font-size:1.2rem;max-width:38rem}
.verhaal-beeld{margin:0;padding:.8rem .8rem .6rem;background:var(--wit);border:var(--lijn);box-shadow:var(--plak);transform:rotate(2deg)}.verhaal-beeld img{width:100%;height:auto}
.verhaal-beeld figcaption{margin-top:.5rem;font-family:var(--kop);font-weight:600;font-size:1rem;line-height:1.3}
@media (max-width:900px){.verhaal-in{grid-template-columns:minmax(0,1fr)}}
.contact-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.brief{padding:clamp(1.4rem,3vw,2.4rem);background:var(--wit);border:var(--lijn);border-radius:.6rem;box-shadow:var(--plak);transform:rotate(-1deg)}.brief-2{transform:rotate(1.2deg);margin-top:2rem}
.brief h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:.8rem}.mail.groot{display:inline-block;padding:.5rem 0;font-family:var(--kop);font-weight:800;font-size:clamp(1.25rem,2.6vw,2rem)}
@media (max-width:800px){.contact-in{grid-template-columns:minmax(0,1fr)}.brief-2{margin-top:0}}
.lees{max-width:44rem}.lees h2{font-size:1.8rem;margin:2.2rem 0 .6rem}.lees h2:first-child{margin-top:0}.noot{margin-top:2.5rem;padding-top:1rem;border-top:.14rem dashed var(--inkt);font-size:.95rem}

/* spelletjes */
.spel-tabs{display:flex;gap:.6rem;overflow-x:auto;padding:.2rem .3rem 1rem .1rem;margin-bottom:1.2rem}
.spel-tabs button{flex:none;min-height:3rem;padding:.15rem 1.1rem 0;font-family:var(--kop);font-weight:700;font-size:1.1rem;background:var(--wit);border:var(--lijn);border-radius:.9rem;white-space:nowrap}
.spel-tabs button[aria-selected=true]{background:var(--geel);box-shadow:.14rem .2rem 0 var(--inkt)}
.spel h2{font-size:clamp(2rem,4vw,3rem)}.spel-uitleg{font-size:1.25rem;margin:.6rem 0 1.4rem;max-width:40rem}
.spel-stand{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin:1.4rem 0 0;font-family:var(--kop);font-weight:800;font-size:1.4rem}
.spel-veld{position:relative;max-width:60rem}
.goedzo{position:fixed;left:50%;top:38%;z-index:50;margin:0;padding:.6rem 1.8rem .3rem;font-family:var(--kop);font-weight:800;font-size:clamp(2.2rem,8vw,4rem);background:var(--geel);border:var(--lijn);border-radius:1.2rem;box-shadow:var(--plak);transform:translate(-50%,-50%) rotate(-4deg);pointer-events:none;animation:plop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes plop{from{transform:translate(-50%,-50%) scale(.3) rotate(-4deg)}}
.s-zoek{position:relative;aspect-ratio:1280/714;overflow:hidden;border:var(--lijn);border-radius:.8rem;background:var(--lucht)}
.s-zoek>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-zoek button{position:absolute;padding:0;background:none;border:0;transform:translate(-50%,0);transition:transform .35s,opacity .35s}
.s-zoek button img{width:100%;height:auto;pointer-events:none}
.s-zoek button.gevonden{transform:translate(-50%,-55%) scale(1.25)!important;clip-path:none!important;z-index:3}
.s-kaarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,1.4vw,1rem);max-width:38rem}
.s-kaart{aspect-ratio:1;padding:8%;background:var(--blauw) repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 .5rem,transparent .5rem 1rem);border:var(--lijn);border-radius:.8rem}
.s-kaart img{width:100%;height:100%;object-fit:contain;visibility:hidden}.s-kaart.om,.s-kaart.klaar{background:var(--wit)}.s-kaart.om img,.s-kaart.klaar img{visibility:visible}.s-kaart.klaar{background:#d8f5c8}
.s-tel{display:flex;flex-wrap:wrap;gap:.8rem;min-height:9rem;padding:1.2rem;background:var(--wit);border:var(--lijn);border-radius:.8rem;align-items:center}
.s-tel img{width:clamp(4rem,11vw,6.5rem);height:auto}
.s-keuze{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}
.s-keuze button{min-width:4.4rem;min-height:4.4rem;padding:.2rem 1rem 0;font-family:var(--kop);font-weight:800;font-size:2rem;background:var(--wit);border:var(--lijn);border-radius:1rem;box-shadow:var(--plak);display:inline-flex;align-items:center;gap:.5rem}
.s-keuze button.fout{background:#ffc9c9;animation:schud .3s}.s-keuze button.goed{background:#b9ee9d}
.s-keuze.s-seiz button{font-size:1.3rem}
@keyframes schud{25%{transform:translateX(-.3rem)}75%{transform:translateX(.3rem)}}
.s-puzzel{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;max-width:44rem;aspect-ratio:16/9;padding:.25rem;background:var(--inkt);border-radius:.6rem}
.s-stuk{padding:0;border:0;background-size:300% 300%;border-radius:.3rem}.s-stuk.gekozen{outline:.3rem solid var(--geel);outline-offset:-.3rem}
.s-plaat{max-width:30rem;padding:.6rem;background:var(--wit);border:var(--lijn);border-radius:.8rem}.s-plaat img{width:100%;height:auto;border-radius:.4rem}
.s-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,2vw,1.2rem);max-width:44rem}
.s-rij button{aspect-ratio:1;padding:10%;background:var(--wit);border:var(--lijn);border-radius:1rem;box-shadow:var(--plak)}.s-rij img{width:100%;height:100%;object-fit:contain}
.s-rij button.fout{background:#ffc9c9;animation:schud .3s}.s-rij button.goed{background:#b9ee9d}

/* binnenkomen: alleen zacht, één keer */
.js .komt{opacity:0;transform:translateY(1.2rem)}.js .komt.is{opacity:1;transform:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js .komt{opacity:1;transform:none}}
@media print{
  .kop,.voet,.deksel,.subnav,.knoppen,.rand,.lied-inhoud,.pkop{display:none!important}
  body{background:#fff;font-size:12pt}section{background:none!important;padding:0!important}
  html.drukt body *{visibility:hidden}html.drukt .print-doel,html.drukt .print-doel *{visibility:visible}
  html.drukt .print-doel{position:absolute;left:0;top:0;width:100%;border:0;margin:0;padding:0}
  html.drukt .afdruk{display:block;max-height:26cm;width:auto;max-width:100%;margin:0 auto}
  .lied-tekst{columns:2}
}
/* liggend maar bijna vierkant (iPad): de doos wordt links en rechts afgesneden → vriendjes dichter bij elkaar */
@media (min-width:761px) and (orientation:landscape) and (max-aspect-ratio:3/2){
  .fig-slowy{--x:47.500%;--w:9%}.fig-snoepie{--x:55.500%;--w:6.200%}.fig-hippi{--x:59%}.fig-mamo{--x:61.500%;--w:15%}.fig-meme{--x:75.500%;--w:13.500%}.fig-dobbi{--x:82%;--b:19%;--w:7.500%}
}
/* smalle schermen */
.fig{min-width:2.75rem}
.lesblad h3,.map-tekst .les-naam,.kaartje-titel{overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){
  .pkop-in{grid-template-columns:minmax(0,1fr);gap:0}.pkop-gast{justify-self:end;width:6.5rem;margin-top:.6rem}
  .pkop h1{font-size:min(3rem,calc((100vw - 2*var(--rand))/6.900))}
  .map-tekst .les-naam{font-size:1.45rem}
  .taal{max-width:100%}.taal button{padding-inline:.6rem;font-size:.95rem}
}
@media (max-width:360px){.taal button{padding-inline:.42rem;font-size:.88rem}}

/* ===== ronde 2: overlap op /lesmateriaal + de winkel ===== */
.map-tekst>span{grid-area:auto}
.mandje-knop{position:relative}
.mandje-knop b{position:absolute;right:-.35rem;top:-.35rem;display:grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:.1rem .3rem 0;font-family:var(--kop);font-weight:800;font-size:.85rem;line-height:1;color:#fff;background:var(--rood);border:.12rem solid var(--inkt);border-radius:1rem}
.mandje{width:min(100%,29rem);max-width:100%;height:100dvh;max-height:100dvh;margin:0 0 0 auto;padding:0;border:0;border-left:var(--lijn);background:var(--papier) url(/img/korrel.png);background-blend-mode:soft-light;color:var(--inkt);overflow-y:auto}
.mandje::backdrop{background:rgba(42,28,18,.45)}
.mandje-in{display:flex;flex-direction:column;min-height:100%;padding:1.2rem 1.3rem 1.6rem}
.mandje header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.mandje h2{font-size:2.2rem}
.mandje-lijst{border-top:.14rem dashed var(--inkt)}
.mandje-lijst li{display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto;gap:.3rem .9rem;align-items:center;padding:.9rem 0;border-bottom:.14rem dashed var(--inkt)}
.mandje-lijst img{grid-row:1/3;width:4.6rem;height:4.6rem;object-fit:contain;background:#bfe2f1;border:.1rem solid rgba(42,28,18,.35);border-radius:.5rem;padding:.3rem}
.mandje-naam{font-family:var(--kop);font-weight:700;line-height:1.15;hyphens:auto;overflow-wrap:break-word}.mandje-naam small{display:block;font-family:"Andika",sans-serif;font-weight:400;font-size:.9rem;margin-top:.15rem}
.mandje-prijs{font-family:var(--kop);font-weight:800;white-space:nowrap}
.mandje-tal{grid-column:2/4;display:flex;align-items:center;gap:.5rem}
.mandje-tal button{display:grid;place-items:center;min-width:2.75rem;height:2.75rem;padding:.1rem .6rem 0;font-family:var(--kop);font-weight:800;font-size:1.2rem;background:var(--wit);border:var(--lijn);border-radius:.8rem}
.mandje-tal output{min-width:1.6rem;text-align:center;font-family:var(--kop);font-weight:800;font-size:1.2rem}
.mandje-tal .weg{margin-left:auto;font-size:.95rem;font-weight:700}
.mandje-som{margin-top:auto;padding-top:1.2rem}.mandje-som p{margin:0 0 .6rem}
.mandje-som p:first-child{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--kop);font-weight:800;font-size:1.5rem}
.mandje-verzend{font-weight:700;color:#7a4a1c}.mandje-som .knop{width:100%;min-height:3.6rem;font-size:1.3rem;margin:.4rem 0 .9rem}.mandje-noot{font-size:.9rem;line-height:1.45}
.mandje-leeg{font-size:1.2rem}.mandje.vol .mandje-leeg,.mandje:not(.vol) .mandje-lijst,.mandje:not(.vol) .mandje-som{display:none}

.winkel{text-align:left;overflow:visible}.winkel .sectiekop p{margin:.8rem 0 0;font-size:1.2rem}
.winkelrek{--vlak:var(--papier);background:var(--vlak) url(/img/korrel.png);background-blend-mode:soft-light;padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.rek-ook{--vlak:var(--roze)}
.rek-kop{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 1.2rem}.rek-kop:not(:first-child){margin-top:clamp(2.5rem,5vw,4rem)}
.waslijn{position:relative;padding-top:.4rem}
.touw{position:absolute;left:-2%;top:0;width:104%;height:2.4rem;pointer-events:none}
.waslijn-rij{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,2vw,2rem)}
.waslijn-rij.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:75%}
.hang{position:relative;padding-top:.55rem}.n4 .hang:nth-child(2),.n4 .hang:nth-child(3),.n3 .hang:nth-child(2){padding-top:1.1rem}
.hang a{display:grid;justify-items:center;gap:.15rem;text-align:center;text-decoration:none;color:inherit;border-radius:.8rem;padding-bottom:.4rem}
.knijper{position:relative;z-index:2;display:block;width:.95rem;height:2.5rem;margin-bottom:-1.25rem;background:linear-gradient(#e6b877 0 44%,#8a8f98 44% 52%,#d9a865 52%);border:.13rem solid var(--inkt);border-radius:.22rem}
.hang-beeld{display:grid;place-items:start center;width:100%;height:clamp(9.5rem,19vw,17rem);transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.hang-beeld img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hang a:hover .hang-beeld,.hang a:focus-visible .hang-beeld{transform:rotate(3deg)}.hang:nth-child(even) a:hover .hang-beeld{transform:rotate(-3deg)}
.hang-foto .hang-beeld img{background:#fff;padding:.4rem .4rem 1.2rem;border:var(--lijn);max-height:92%}
.hang-naam{margin:.7rem 0 0;font-family:var(--kop);font-weight:800;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.15;letter-spacing:0;hyphens:auto;overflow-wrap:break-word;max-width:100%}
.hang-prijs{font-family:var(--kop);font-weight:700;color:#5b3a1c}
.winkel .hang-prijs{color:var(--inkt)}
@media (max-width:760px){
  .touw{display:none}.waslijn{overflow:hidden;margin-inline:calc(-1*var(--rand));padding-inline:var(--rand)}
  .waslijn-rij,.waslijn-rij.n3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;row-gap:1.6rem}
  .hang,.n4 .hang:nth-child(n),.n3 .hang:nth-child(n){padding-top:.55rem}
  .hang::before{content:"";position:absolute;left:-3rem;right:-3rem;top:1.7rem;border-top:.2rem solid #7a5a3a}
  .hang-beeld{height:clamp(9rem,42vw,15rem)}
}
.winkel-info .waarden a{font-weight:700}

.product{background:var(--papier) url(/img/korrel.png);background-blend-mode:soft-light;padding:clamp(6.5rem,10vw,8.5rem) 0 clamp(3rem,6vw,5rem)}
.product-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.product-vel{position:sticky;top:1.5rem;display:grid;place-items:center;aspect-ratio:1;padding:11%;background:var(--vel) url(/img/korrel.png);background-blend-mode:soft-light;border:var(--lijn);border-radius:.6rem;box-shadow:.3rem .42rem 0 var(--inkt);transform:rotate(-1.3deg);transition:background-color .3s}
.product-vel .knijper{position:absolute;left:50%;top:-1.2rem;margin:0 0 0 -.5rem}
.product-beeld{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.product-foto .product-beeld{background:#fff;padding:.5rem .5rem 1.6rem;border:var(--lijn)}
.product-tekst h1{font-size:clamp(2rem,4vw,3.4rem);margin-top:.3rem}
.product-prijs{margin:1rem 0 0}.product-prijs b{font-family:var(--kop);font-weight:800;font-size:2.2rem;margin-right:.5rem}.product-prijs span{font-size:.95rem;color:#5b3a1c}
.keuzes{min-width:0;margin:1.3rem 0 0;padding:0;border:0}.keuzes legend{padding:0;margin-bottom:.5rem;font-family:var(--kop);font-weight:800;font-size:1.2rem}
.keuzes>div{display:flex;flex-wrap:wrap;gap:.6rem}
.keus{position:relative;display:block}.keus input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.keus span{display:grid;place-items:center;min-width:3.4rem;min-height:3.1rem;padding:.15rem 1rem 0;font-family:var(--kop);font-weight:700;font-size:1.1rem;background:var(--wit);border:var(--lijn);border-radius:.9rem}
.keus input:checked+span{background:var(--geel);box-shadow:.14rem .2rem 0 var(--inkt)}.keus input:focus-visible+span{outline:.22rem solid var(--blauw);outline-offset:.2rem}
.knop-groot{min-height:3.8rem;font-size:1.35rem;padding-inline:1.5em}
.product-gelukt{margin:1rem 0 0;font-family:var(--kop);font-weight:700;font-size:1.15rem}
.product-body{margin-top:2.2rem;max-width:38rem}.product-body>p:first-child{font-size:1.2rem}
.product-body ul{margin:1.2rem 0;border-top:.14rem dashed var(--inkt)}.product-body li{padding:.6rem 0;border-bottom:.14rem dashed var(--inkt);line-height:1.45}
.product-body small{font-size:.88rem;line-height:1.45;display:block}
@media (max-width:900px){.product-in{grid-template-columns:minmax(0,1fr)}.product-vel{position:relative;top:auto;max-width:30rem;width:100%;justify-self:center}}
.winkelrek{--vlak:#a9d8ec}.rek-ook{--vlak:#a9d8ec}
.hang-foto .hang-beeld img{max-height:86%;max-width:78%;box-sizing:border-box}
.hang-prijs{color:var(--inkt)}
a[href^=tel]{white-space:nowrap}
.hang-beeld{display:block}.hang-beeld img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:50% 0}
.hang-foto .hang-beeld img{width:auto;height:84%;max-width:86%;max-height:none;margin:0 auto;aspect-ratio:1;object-fit:cover}
.winkel-info dd a{display:inline-block;padding:.65rem 0}
@media (max-width:400px){.kop{gap:.5rem}.kop-logo{width:6.6rem}.kop-knoppen{gap:.4rem}}