/* ===== Batch 31 okt: levendige categoriepagina's, reeksen, grote bladwijzers, feestelijk einde ===== */

/* ---- Hero: parallax-lagen ---- */
.cat-hero{container-type:inline-size;padding-top:3.4rem;padding-bottom:3.6rem}
.hp{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hp>div{position:absolute;inset:0;transition:transform .35s ease-out;will-change:transform}
.hp-far{transform:translate3d(calc(var(--px,0)*-12px),calc(var(--py,0)*-6px + var(--sy,0)*.12px),0)}
.hp-mid{transform:translate3d(calc(var(--px,0)*-26px),calc(var(--py,0)*-12px + var(--sy,0)*.22px),0)}
.hp-near{transform:translate3d(calc(var(--px,0)*-44px),calc(var(--py,0)*-20px + var(--sy,0)*.32px),0)}
.hp svg{display:block;overflow:visible}
.hp-tap{pointer-events:auto;cursor:pointer}
/* wolkjes */
.hp-cloud{position:absolute;width:110px;opacity:.75;animation:hp-drift 38s linear infinite}
.hp-cloud.c1{top:8px;animation-delay:-6s}
.hp-cloud.c2{top:34px;width:80px;opacity:.55;animation-duration:52s;animation-delay:-30s}
.hp-cloud.c3{top:4px;width:64px;opacity:.5;animation-duration:46s;animation-delay:-18s}
@keyframes hp-drift{from{transform:translateX(-140px)}to{transform:translateX(calc(100cqw + 40px))}}
/* stad onderaan */
.hp-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:64px}
.hp-lights rect{animation:hp-win 5s steps(1) infinite}
.hp-lights .w1{animation-delay:-1.3s}.hp-lights .w2{animation-delay:-2.6s;animation-duration:7s}.hp-lights .w3{animation-delay:-3.9s;animation-duration:4s}
@keyframes hp-win{0%,60%{opacity:1}61%,100%{opacity:.15}}
/* vliegers: steken het hele scherm over */
.hp-fly{position:absolute;left:0;top:6px;width:120px;animation:hp-fly 13s linear infinite}
.hp-fly svg{width:100%;animation:hp-wave 1.6s ease-in-out infinite alternate}
@keyframes hp-fly{from{transform:translateX(-180px)}to{transform:translateX(calc(100cqw + 60px))}}
@keyframes hp-flyback{from{transform:translateX(calc(100cqw + 60px)) scaleX(-1)}to{transform:translateX(-180px) scaleX(-1)}}
@keyframes hp-wave{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(8px) rotate(3deg)}}
.hp-fly--hero{width:150px;top:4px}
.hp-cape{transform-box:fill-box;transform-origin:100% 30%;animation:hp-cape .35s ease-in-out infinite alternate}
@keyframes hp-cape{from{transform:skewY(-6deg) scaleX(1)}to{transform:skewY(5deg) scaleX(.9)}}
.hp-speed{animation:hp-speed .3s linear infinite alternate}
@keyframes hp-speed{from{opacity:.3;transform:translateX(4px)}to{opacity:.9}}
.hp-fly--star{width:100px;top:auto;bottom:70px;animation-duration:7s;animation-delay:-3s}
.hp-bub{position:absolute;width:96px;animation:hp-pop 6s ease-in-out infinite}
.hp-bub--1{right:4%;bottom:10px}
.hp-bub--2{left:45%;bottom:4px;width:82px;animation-delay:-3s}
@keyframes hp-pop{0%,8%{transform:scale(0) rotate(-20deg)}16%{transform:scale(1.15) rotate(6deg)}22%,46%{transform:scale(1) rotate(-4deg)}54%,100%{transform:scale(0) rotate(10deg)}}
/* avonturiers */
.hp-balloon{position:absolute;right:30%;top:6px;width:54px;animation:hp-balloon 9s ease-in-out infinite alternate}
@keyframes hp-balloon{from{transform:translate(-30px,6px) rotate(-4deg)}to{transform:translate(40px,-4px) rotate(4deg)}}
.hp-fly--parrot{width:84px;top:10px;animation-duration:11s;animation-delay:-4s}
.hp-wing{transform-box:fill-box;transform-origin:0 100%;animation:hp-flap .28s ease-in-out infinite alternate}
@keyframes hp-flap{from{transform:rotate(-8deg)}to{transform:scaleY(-.7) rotate(10deg)}}
.hp-waves{position:absolute;left:0;bottom:0;width:200%;height:30px;animation:hp-waves 6s linear infinite}
@keyframes hp-waves{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hp-sail{position:absolute;left:0;bottom:8px;width:92px;animation:hp-sail 26s linear infinite}
.hp-sail svg{width:100%;animation:hp-rock 2.4s ease-in-out infinite alternate;transform-origin:50% 90%}
@keyframes hp-sail{from{transform:translateX(-120px)}to{transform:translateX(calc(100cqw + 20px))}}
@keyframes hp-rock{from{transform:rotate(-6deg)}to{transform:rotate(5deg) translateY(-3px)}}
.hp-fish{position:absolute;left:62%;bottom:6px;width:34px;animation:hp-fish 4.5s ease-in-out infinite}
@keyframes hp-fish{0%,55%{transform:translateY(30px) rotate(0);opacity:0}65%{opacity:1}75%{transform:translate(18px,-34px) rotate(-30deg)}88%{transform:translate(36px,0) rotate(40deg);opacity:1}100%{transform:translate(40px,30px) rotate(60deg);opacity:0}}
/* agenten */
.hp-stars{position:absolute;left:0;right:0;top:0;width:100%;height:80px}
.hp-stars circle{animation:hp-tw 2.4s ease-in-out infinite alternate}
.hp-stars .s1{animation-delay:-.8s}.hp-stars .s2{animation-delay:-1.6s;animation-duration:3.2s}
@keyframes hp-tw{from{opacity:.25}to{opacity:1}}
.hp-fly--plane{width:58px;top:14px;animation:hp-flyback 12s linear infinite;animation-delay:-2s}
.hp-walk{position:absolute;left:0;bottom:2px;width:118px;animation:hp-walk 22s linear infinite}
.hp-walk svg{width:100%}
@keyframes hp-walk{from{transform:translateX(-160px)}to{transform:translateX(calc(100cqw + 20px))}}
.hp-step{animation:hp-tiptoe .5s ease-in-out infinite alternate}
@keyframes hp-tiptoe{from{transform:translateY(0)}to{transform:translateY(-5px) rotate(-2deg)}}
.hp-beam{animation:hp-beam 1.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 50%}
@keyframes hp-beam{from{transform:rotate(-8deg);opacity:.2}to{transform:rotate(8deg);opacity:.45}}
.hp-q{position:absolute;font-family:var(--f-title);font-weight:700;font-size:2rem;color:#7ef0ff;opacity:0;animation:hp-q 7s ease-in-out infinite}
.hp-q--1{right:6%;bottom:30%}.hp-q--2{right:28%;bottom:12%;font-size:1.5rem;animation-delay:-2.3s}.hp-q--3{left:52%;top:18%;font-size:1.7rem;color:#ffd23f;animation-delay:-4.6s}
@keyframes hp-q{0%{opacity:0;transform:translateY(20px) scale(.6)}20%,60%{opacity:.85;transform:translateY(-10px) scale(1) rotate(-8deg)}100%{opacity:0;transform:translateY(-50px) rotate(8deg)}}
.hp--hackers .hp-q{font-family:monospace;color:#39f2a0;text-shadow:0 0 10px rgba(57,242,160,.6)}
/* hackers */
.hp-pixels{position:absolute;left:0;right:0;top:0;width:100%;height:80px}
.hp-pixels rect{animation:hp-tw 1.8s steps(2) infinite}
.hp-pixels .x1{animation-delay:-.4s}.hp-pixels .x2{animation-delay:-.9s;fill:#ff5ab1}.hp-pixels .x3{animation-delay:-1.3s;fill:#7ef0ff}
.hp-circuit{position:absolute;left:0;right:0;bottom:0;width:100%;height:70px}
.hp-data{stroke-dasharray:24 1400;animation:hp-data 4s linear infinite}
.hp-data.d2{animation-duration:5.5s;animation-delay:-2s;stroke:#ff5ab1}
@keyframes hp-data{from{stroke-dashoffset:24}to{stroke-dashoffset:-1300}}
.hp-fly--drone{width:92px;top:8px;animation-duration:15s;animation-delay:-6s}
.hp-prop{transform-box:fill-box;transform-origin:center;animation:hp-prop .12s linear infinite alternate}
@keyframes hp-prop{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
.hp-walk--robot{width:70px;bottom:6px;animation-duration:18s}
.hp-wheel{transform-box:fill-box;transform-origin:center;animation:hp-spin .8s linear infinite}
@keyframes hp-spin{to{transform:rotate(360deg)}}
.hp-blink{animation:hp-tw .7s steps(2) infinite}
.hp-eyes{transform-box:fill-box;transform-origin:center;animation:hp-eyes 3.2s infinite}
@keyframes hp-eyes{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.hp-walk--robot .hp-step{animation-duration:.25s}
/* tekst blijft boven de lagen */
.cat-hero__text,.cat-hero__mascot{z-index:2}
.cat-hero__mascot{animation:hp-mascot 4s ease-in-out infinite alternate}
@keyframes hp-mascot{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-8px) rotate(1.5deg)}}
.cat-hero__text>*{animation:hp-textin .7s cubic-bezier(.2,.9,.3,1.2) both}
.cat-hero__text>:nth-child(2){animation-delay:.08s}.cat-hero__text>:nth-child(3){animation-delay:.16s}.cat-hero__text>:nth-child(4){animation-delay:.24s}
@keyframes hp-textin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cat-hero__age{animation:hp-age 2.6s ease-in-out infinite}
@keyframes hp-age{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) scale(1.08)}}
@media (max-width:640px){
  .cat-hero{padding-top:3rem;padding-bottom:3.4rem}
  .hp-fly--hero{width:112px}.hp-bub{width:70px}.hp-bub--2{display:none}
  .hp-balloon{right:6%;width:42px}
  .hp-walk{width:90px}.hp-walk--robot{width:54px}
  .hp-q--3{display:none}
}

/* ---- Boekjesraster: binnenkomen, hover en tik ---- */
.books__grid>.book-item{animation:book-in .7s cubic-bezier(.2,1.1,.3,1.15) both}
.books__grid>.book-item:nth-child(2){animation-delay:.09s}.books__grid>.book-item:nth-child(3){animation-delay:.18s}
.books__grid>.book-item:nth-child(4){animation-delay:.27s}.books__grid>.book-item:nth-child(5){animation-delay:.36s}
.books__grid>.book-item:nth-child(6){animation-delay:.45s}.books__grid>.book-item:nth-child(7){animation-delay:.54s}
.books__grid>.book-item:nth-child(8){animation-delay:.63s}.books__grid>.book-item:nth-child(n+9){animation-delay:.72s}
@keyframes book-in{0%{opacity:0;transform:translateY(60px) rotate(-6deg) scale(.85)}60%{opacity:1;transform:translateY(-10px) rotate(2deg) scale(1.03)}100%{opacity:1;transform:none}}
.books__grid>.book-item:nth-child(even){animation-name:book-in2}
@keyframes book-in2{0%{opacity:0;transform:translateY(60px) rotate(6deg) scale(.85)}60%{opacity:1;transform:translateY(-10px) rotate(-2deg) scale(1.03)}100%{opacity:1;transform:none}}
.book-item.is-tap .book__body{animation:book-tap .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes book-tap{0%{transform:none}35%{transform:scale(.92,1.06)}70%{transform:scale(1.05,.95) translateY(-6px)}100%{transform:none}}
.book-meta__title{transition:color .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.book-item:hover .book-meta__title{transform:translateY(-3px) rotate(-1deg)}
.book::after{content:"";position:absolute;inset:-14px;border-radius:24px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,210,63,.55) 0 3px,transparent 4px) 0 0/22px 22px;transition:opacity .3s,transform .5s;transform:scale(.8)}
.book:hover::after,.book:focus-visible::after{opacity:.9;transform:scale(1) rotate(8deg)}
.book__cover{transition:box-shadow .3s}

/* ---- Reeks: stapel boekjes ---- */
.stack{position:relative;display:block;width:var(--bw,168px);height:var(--bh,252px);margin:10px 0 18px;text-decoration:none;color:inherit;
  --bw:168px;--bh:252px;border-radius:14px}
.stack__pile{position:absolute;inset:0}
.stack__card.book{position:absolute;inset:0;margin:0;width:100%;height:100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.stack__card .book__body{transform:none!important;animation:none!important}
.stack__card--2{transform:translate(18px,-14px) rotate(9deg)}
.stack__card--1{transform:translate(9px,-7px) rotate(4.5deg)}
.stack__card--0{transform:rotate(-2deg)}
.stack__pile--2 .stack__card--1{transform:translate(14px,-10px) rotate(7deg)}
.stack__card--1 .book__cover,.stack__card--2 .book__cover{filter:brightness(.92)}
.stack:hover .stack__card--2,.stack:focus-visible .stack__card--2{transform:translate(48px,-18px) rotate(16deg)}
.stack:hover .stack__card--1,.stack:focus-visible .stack__card--1{transform:translate(24px,-12px) rotate(8deg)}
.stack:hover .stack__card--0,.stack:focus-visible .stack__card--0{transform:translate(-14px,-6px) rotate(-6deg)}
.stack:active .stack__card--0{transform:scale(.96) rotate(-2deg)}
.stack:focus-visible{outline:3px solid #1d6fe0;outline-offset:8px}
.stack__badge{position:absolute;z-index:5;left:50%;bottom:-14px;transform:translateX(-50%) rotate(-3deg);display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;
  background:#c62828;color:#fff;font-family:var(--f-title);font-weight:700;font-size:.95rem;padding:.35em .85em;border-radius:999px;box-shadow:0 4px 0 #8e1b1b,0 8px 16px rgba(0,0,0,.2);
  animation:stack-badge 2.8s ease-in-out infinite}
.stack__badge svg{width:20px;height:20px;--ic2:#ffd23f;color:#fff}
@keyframes stack-badge{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(2deg) scale(1.06)}}
.book-item--stack .peek{display:none}
@media (max-width:640px){.stack{--bw:128px;--bh:192px}.stack__badge{font-size:.8rem}}

/* ---- Reeks-venster ---- */
.reeks-pop{border:0;padding:0;background:transparent;max-width:min(980px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:visible}
.reeks-pop::backdrop{background:rgba(20,10,5,.62)}
.reeks-pop__box{background:#fff8e7;color:#3b2a1e;border-radius:24px;padding:1.2rem 1.4rem 2rem;box-shadow:0 24px 60px rgba(0,0,0,.45);max-height:calc(100dvh - 24px);overflow:auto;
  background-image:radial-gradient(circle,rgba(201,164,106,.25) 0 2px,transparent 3px);background-size:26px 26px}
.reeks-pop__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.reeks-pop__title{font-family:var(--f-title);font-size:clamp(1.4rem,4vw,2rem);margin:0;color:#8a2a12}
.reeks-pop__close{color:#3b2a1e;border:2px solid #d9c7a5;background:#fff}
.reeks-pop__hint{margin:.2rem 0 1.4rem;font-weight:600}
.reeks-pop__grid{gap:2.4rem 1.6rem}
.reeks-pop__grid>.book-item{animation:none}
html.has-reeks{overflow:hidden}

/* ---- Grote bladwijzer in het open boek (tussen de bladzijden) ---- */
.bm-tab{top:-64px;width:64px;height:200px;overflow:visible;border-radius:6px 6px 0 0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.bm-tab img{width:64px;height:192px;border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.bm-tab::after{display:none}
.bm-tab--gr{right:10px;left:auto;transform:rotate(3deg);transform-origin:50% 0}
.bm-tab--gl{left:10px;right:auto;transform:rotate(-3deg);transform-origin:50% 0}
.slot--l .bm-tab.bm-tab--gr,.face--back .bm-tab.bm-tab--gr{right:10px;left:auto}
.bm-tab:hover img,.bm-tab:focus-visible img{transform:translateY(-8px) rotate(-1deg)}
.bm-tab:focus-visible{outline:none}.bm-tab:focus-visible img{outline:3px solid #1d6fe0;outline-offset:3px}
.single .bm-tab{right:14px;left:auto;top:-70px;transform:rotate(4deg)}
.bm-jump{top:-46px;width:44px;height:60px}
.bm-jump img{width:44px;height:132px;border-radius:4px}
@media (max-width:700px){
  .bm-tab,.single .bm-tab{top:-62px;width:54px;height:170px}
  .bm-tab img{width:54px;height:162px}
}
/* bladwijzer-keuze: grotere bladwijzers */
.bm-picker__box{max-width:min(860px,100%);max-height:calc(100% - 1rem);overflow:auto}
.bm-picker__list{gap:.7rem}
.bm-opt img{width:72px;height:216px;border-radius:7px}
.bm-opt:hover img,.bm-opt:focus-visible img{transform:rotate(-3deg)}
.bm-opt img{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
@media (max-width:860px){.bm-picker__list{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){
  .bm-picker__list{gap:.4rem}
  .bm-opt img{width:56px;height:168px}
}
@media (max-width:380px){.bm-opt img{width:48px;height:144px}}

/* ---- Feestelijk einde ---- */
.page--end{overflow:hidden;gap:0;padding-top:4%}
.page--end .end-title{margin:0;font-family:var(--f-title);font-size:calc(var(--pw)*.15);line-height:1;color:var(--pacc)}
.end-title__l{display:inline-flex}
.end-title__l span{display:inline-block;animation:end-letter .7s cubic-bezier(.3,1.7,.5,1) both;text-shadow:0 4px 0 color-mix(in srgb,var(--pacc) 35%,#fff)}
.end-title__l span:nth-child(2){animation-delay:.08s}.end-title__l span:nth-child(3){animation-delay:.16s}.end-title__l span:nth-child(4){animation-delay:.24s}
.end-title__l span:nth-child(5){animation-delay:.32s}.end-title__l span:nth-child(6){animation-delay:.4s;color:#e23b3b}
@keyframes end-letter{0%{opacity:0;transform:translateY(-80px) rotate(-20deg) scale(.4)}60%{opacity:1;transform:translateY(8px) rotate(6deg) scale(1.15)}100%{transform:none}}
.page--end .end-title__l span{animation:end-letter .7s cubic-bezier(.3,1.7,.5,1) both,end-jump 2.4s ease-in-out 1.2s infinite}
.page--end .end-title__l span:nth-child(2){animation-delay:.08s,1.3s}.page--end .end-title__l span:nth-child(3){animation-delay:.16s,1.4s}
.page--end .end-title__l span:nth-child(4){animation-delay:.24s,1.5s}.page--end .end-title__l span:nth-child(5){animation-delay:.32s,1.6s}.page--end .end-title__l span:nth-child(6){animation-delay:.4s,1.7s}
@keyframes end-jump{0%,20%,100%{transform:none}10%{transform:translateY(-10px)}}
.end-mouse{width:40%;max-width:170px;margin:.2em auto 0;animation:end-mouse .9s cubic-bezier(.3,1.5,.5,1) .3s both}
.end-mouse .mouse--end{width:100%;max-width:none;margin:0}
@keyframes end-mouse{from{opacity:0;transform:translateY(60px) scale(.6)}to{opacity:1;transform:none}}
.page--end .end-sub{font-family:var(--f-title);font-weight:700;font-size:calc(var(--pw)*.065);margin:.15em 0 0;color:var(--pacc)}
.page--end .end-hint{margin:.25em 0 .5em;font-size:calc(var(--pw)*.04)}
.end-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;position:relative;z-index:2}
.page--end .end-btn{display:inline-flex;align-items:center;gap:.4em;margin:0;font-size:calc(var(--pw)*.038);padding:.6em 1.1em;border-radius:999px;
  box-shadow:0 4px 0 color-mix(in srgb,var(--pacc) 60%,#000);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.page--end .end-btn svg{width:1.2em;height:1.2em;flex:none}
.page--end .end-btn:hover,.page--end .end-btn:focus-visible{transform:translateY(-3px) scale(1.04)}
.page--end .end-btn:focus-visible{outline:3px solid #1d6fe0;outline-offset:3px}
.page--end .end-btn--again{background:#fff;color:#3b2a1e;box-shadow:0 4px 0 #d9c7a5;border:2px solid #d9c7a5}
.page--end .end-btn--next{background:#c62828;color:#fff;box-shadow:0 4px 0 #8e1b1b;animation:end-next 1.6s ease-in-out 1.5s infinite}
@keyframes end-next{0%,100%{transform:none}50%{transform:scale(1.07)}}
.page--end .end-btn--more svg{--ic2:#ffd23f;color:#fff}
/* confetti + sterren */
.end-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.end-fx i{position:absolute;top:-8%;width:10px;height:16px;border-radius:2px;background:#e23b3b;opacity:0;animation:end-conf 3.2s linear infinite}
.end-fx i:nth-child(3n){background:#ffd23f;width:12px;height:12px;border-radius:50%}
.end-fx i:nth-child(3n+1){background:#2e9bd6}
.end-fx i:nth-child(4n){background:#4f9b3f}
.end-fx i:nth-child(5n){background:none;width:22px;height:22px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background-color:#ffd23f}
.end-fx i:nth-child(1){left:4%;animation-delay:0s}.end-fx i:nth-child(2){left:12%;animation-delay:.6s;animation-duration:2.8s}
.end-fx i:nth-child(3){left:20%;animation-delay:1.3s}.end-fx i:nth-child(4){left:27%;animation-delay:.3s;animation-duration:3.6s}
.end-fx i:nth-child(5){left:34%;animation-delay:1.9s}.end-fx i:nth-child(6){left:41%;animation-delay:.9s;animation-duration:2.6s}
.end-fx i:nth-child(7){left:48%;animation-delay:2.4s}.end-fx i:nth-child(8){left:55%;animation-delay:.15s;animation-duration:3.4s}
.end-fx i:nth-child(9){left:62%;animation-delay:1.1s}.end-fx i:nth-child(10){left:69%;animation-delay:2.1s;animation-duration:2.9s}
.end-fx i:nth-child(11){left:76%;animation-delay:.5s}.end-fx i:nth-child(12){left:83%;animation-delay:1.6s;animation-duration:3.7s}
.end-fx i:nth-child(13){left:90%;animation-delay:.8s}.end-fx i:nth-child(14){left:96%;animation-delay:2.7s}
.end-fx i:nth-child(15){left:8%;animation-delay:2.9s;animation-duration:3.5s}.end-fx i:nth-child(16){left:23%;animation-delay:2.2s}
.end-fx i:nth-child(17){left:44%;animation-delay:1.5s;animation-duration:3.8s}.end-fx i:nth-child(18){left:66%;animation-delay:2.5s}
.end-fx i:nth-child(19){left:86%;animation-delay:1.2s;animation-duration:2.7s}.end-fx i:nth-child(20){left:58%;animation-delay:3s}
@keyframes end-conf{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(calc(var(--pw)*1.6)) translateX(30px) rotate(540deg)}}
.leaf .end-fx{display:none}

/* ---- Minder beweging ---- */
@media (prefers-reduced-motion:reduce){
  .hp *,.hp>div,.cat-hero__mascot,.cat-hero__text>*,.cat-hero__age,.books__grid>.book-item,.book-item.is-tap .book__body,.stack__badge,
  .end-title__l span,.end-mouse,.page--end .end-btn--next,.end-fx i{animation:none!important}
  .hp>div{transform:none!important;transition:none}
  .hp-fly{transform:translateX(30cqw)}.hp-fly--star,.hp-fly--plane{transform:translateX(70cqw)}
  .hp-walk,.hp-sail{transform:translateX(56cqw)}.hp-cloud.c1{transform:translateX(20cqw)}.hp-cloud.c2{transform:translateX(60cqw)}.hp-cloud.c3{transform:translateX(80cqw)}
  .hp-bub,.hp-q{transform:none;opacity:.85}.hp-fish{display:none}
  .end-fx i{opacity:.85;transform:translateY(calc(var(--pw)*.5))}
  .end-fx i:nth-child(even){transform:translateY(calc(var(--pw)*1.1))}
  .stack__card,.book::after,.bm-opt img{transition:none}
}

/* einde over twee bladzijden (boekmodus) */
.page--end-a{justify-content:center}
.page--end-a .end-mouse{width:60%;max-width:240px}
.page--end-b{justify-content:center}
.end-medal{width:48%;max-width:200px;margin:0 auto .4em;position:relative;z-index:2;animation:end-mouse .9s cubic-bezier(.3,1.5,.5,1) .5s both}
.end-medal svg{display:block;width:100%;overflow:visible}
.end-medal__rays{fill:color-mix(in srgb,var(--pacc) 30%,#fff);transform-origin:60px 60px;animation:hp-spin 14s linear infinite}
.page--end-b .end-sub{font-size:calc(var(--pw)*.09)}
.page--end-b .end-hint{font-size:calc(var(--pw)*.05)}
.page--end-b .end-btn{font-size:calc(var(--pw)*.045)}
.bm-jump{top:-36px;width:40px;height:48px}.bm-jump img{width:40px;height:120px}
@media (prefers-reduced-motion:reduce){.end-medal,.end-medal__rays{animation:none!important}}
.reeks-pop .peek{display:none}.reeks-pop__grid{padding-top:.4rem}
/* contrast: themakleur verdonkerd voor tekst en knoppen op het einde (≥4.5:1 op papier en wit) */
.page--end{--pdark:color-mix(in srgb,var(--pacc) 74%,#000)}
.page--end .end-title,.page--end .end-sub{color:var(--pdark)}
.page--end .end-btn--more{background:var(--pdark);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--pacc) 45%,#000)}

/* ===================== Kleurplaten ===================== */
.kp-hero{max-width:1100px;margin:1.5rem auto 0;padding:1.6rem 1.4rem;display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;align-items:center;
  background:linear-gradient(135deg,#fff 0%,#fff4d6 60%,#ffe2ef 100%);border-radius:var(--radius);box-shadow:0 6px 0 rgba(59,42,30,.12);position:relative;overflow:hidden}
.kp-hero h1{font-family:var(--f-title);color:var(--red-d);font-size:clamp(2rem,6vw,3.2rem);margin:.1em 0 .2em;animation:kp-pop .7s cubic-bezier(.3,1.6,.5,1) both}
.kp-hero p{margin:0 0 .5em;max-width:34em;line-height:1.5}
.kp-hero__art svg{width:100%;max-width:280px;display:block;margin:0 auto;overflow:visible}
.kp-scribble__l{stroke-dasharray:420;stroke-dashoffset:420;animation:kp-draw 2.4s ease-in-out .3s forwards}
.kp-scribble__l--2{animation-delay:1.4s}
.kp-pencil{animation:kp-pencil 3.2s ease-in-out .3s infinite}
@keyframes kp-draw{to{stroke-dashoffset:0}}
@keyframes kp-pencil{0%,100%{transform:translate(-90px,90px)}25%{transform:translate(-30px,30px)}50%{transform:translate(10px,60px)}75%{transform:translate(-50px,110px)}}
@keyframes kp-pop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.kp-list{max-width:1100px;margin:1.6rem auto 3rem;padding:0 1rem}
.kp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.2rem}
.kp-card a{display:block;text-decoration:none;color:var(--ink);text-align:center;border-radius:14px;outline-offset:4px}
.kp-card__paper{display:block;background:#fff;border-radius:8px;padding:6px;box-shadow:0 4px 0 rgba(59,42,30,.15),0 8px 18px rgba(59,42,30,.12);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;transform:rotate(var(--kr,-1.5deg))}
.kp-card:nth-child(even) .kp-card__paper{--kr:1.5deg}
.kp-card:nth-child(3n) .kp-card__paper{--kr:-.5deg}
.kp-thumb{display:block;width:100%;height:auto;aspect-ratio:595/842}
.kp-card__t{display:block;font-family:var(--f-title);font-weight:600;margin-top:.6rem;font-size:1.05rem;color:var(--red-d)}
.kp-card a:hover .kp-card__paper,.kp-card a:focus-visible .kp-card__paper{transform:rotate(0) translateY(-6px) scale(1.04);box-shadow:0 10px 0 rgba(59,42,30,.12),0 16px 26px rgba(59,42,30,.18)}
.kp-card a:hover .kp-card__paper{animation:kp-wiggle .5s ease-in-out}
@keyframes kp-wiggle{0%,100%{rotate:0deg}30%{rotate:-2deg}60%{rotate:2deg}}
.kp-card{animation:book-in .6s cubic-bezier(.3,1.4,.5,1) both}
.kp-card:nth-child(2){animation-delay:.05s}.kp-card:nth-child(3){animation-delay:.1s}.kp-card:nth-child(4){animation-delay:.15s}
.kp-card:nth-child(5){animation-delay:.2s}.kp-card:nth-child(6){animation-delay:.25s}.kp-card:nth-child(7){animation-delay:.3s}
.kp-card:nth-child(8){animation-delay:.35s}.kp-card:nth-child(9){animation-delay:.4s}.kp-card:nth-child(10){animation-delay:.45s}
.kp-card:nth-child(11){animation-delay:.5s}.kp-card:nth-child(12){animation-delay:.55s}
.kp-tip{margin:2rem auto 0;max-width:42em;text-align:center;background:#fff;border-radius:12px;padding:.8rem 1rem;line-height:1.5}

.kp-detail{max-width:1100px;margin:1rem auto 3rem;padding:0 1rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"crumb crumb" "head sheet" "tools sheet" "paint sheet" "pager pager";grid-template-rows:auto auto auto 1fr auto;column-gap:2rem;align-items:start}
.kp-crumb{grid-area:crumb;margin:.4rem 0 1rem}.kp-crumb a{color:var(--red-d);font-weight:600}
.kp-head{grid-area:head}.kp-head h1{font-family:var(--f-title);color:var(--red-d);font-size:clamp(1.7rem,4.5vw,2.6rem);margin:0 0 .3em;animation:kp-pop .6s cubic-bezier(.3,1.6,.5,1) both}
.kp-head p{margin:0 0 1rem;line-height:1.5}
.kp-tools{grid-area:tools;display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.kp-tools .btn{display:inline-flex;align-items:center;gap:.45em;cursor:pointer;font:inherit;font-weight:700}
.kp-tools .btn svg{width:1.2em;height:1.2em}
.kp-tools .btn:disabled{opacity:.6;cursor:progress}
.kp-paint{grid-area:paint}
.kp-palette{border:0;margin:0;padding:1rem;background:#fff;border-radius:14px;box-shadow:0 4px 0 rgba(59,42,30,.1)}
.kp-palette legend{font-weight:700;padding:0;margin-bottom:.6rem;float:left;width:100%}
.kp-palette__list{display:flex;flex-wrap:wrap;gap:.35rem;clear:both;margin-bottom:.8rem}
.kp-col{position:relative;display:block;cursor:pointer}
.kp-col input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kp-col__dot{display:block;width:40px;height:40px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kp-col:hover .kp-col__dot{transform:scale(1.12)}
.kp-col input:checked+.kp-col__dot{transform:scale(1.2) translateY(-3px);filter:drop-shadow(0 3px 0 rgba(59,42,30,.35))}
.kp-col input:focus-visible+.kp-col__dot{outline:3px solid var(--ink);outline-offset:2px;border-radius:50%}
.kp-undo,.kp-clear{font:inherit;font-weight:600;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.35em .9em;cursor:pointer;margin:0 .3rem .3rem 0}
.kp-undo:disabled{opacity:.5;cursor:default}
.kp-status{min-height:1.4em;margin:.6rem 0 0;font-weight:600}
.kp-sheet{grid-area:sheet;background:#fff;border-radius:6px;box-shadow:0 6px 0 rgba(59,42,30,.12),0 14px 30px rgba(59,42,30,.15);padding:8px;animation:book-in .7s cubic-bezier(.3,1.4,.5,1) both}
.kp-svg{display:block;width:100%;height:auto;aspect-ratio:595/842;cursor:pointer;touch-action:manipulation}
.kp-pager{grid-area:pager;display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.kp-pager a{color:var(--red-d);font-weight:700}
@media (max-width:760px){
  .kp-hero{grid-template-columns:1fr;margin:1rem .6rem 0;padding:1.2rem 1rem}
  .kp-hero__art svg{max-width:150px}
  .kp-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .kp-detail{grid-template-columns:1fr;grid-template-areas:"crumb" "head" "tools" "sheet" "paint" "pager";grid-template-rows:none}
  .kp-sheet{margin-bottom:1rem}
  .kp-col__dot{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .kp-hero h1,.kp-head h1,.kp-card,.kp-sheet,.kp-pencil,.kp-card a:hover .kp-card__paper{animation:none!important}
  .kp-scribble__l{animation:none;stroke-dashoffset:0}
  .kp-card__paper,.kp-col__dot{transition:none}
}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff!important;margin:0!important;padding:0!important;min-height:0!important;display:block!important}
  body.kp-printing > :not(main),body:has(.kp-detail) > :not(main){display:none!important}
  main > :not(.kp-detail){display:none!important}
  .kp-detail{display:block;margin:0;padding:0;max-width:none}
  .kp-detail > :not(.kp-sheet){display:none!important}
  .kp-sheet{box-shadow:none;padding:0;border-radius:0;animation:none;width:210mm;height:297mm;margin:0;overflow:hidden}
  .kp-svg{width:210mm;height:297mm;aspect-ratio:auto}
}
.kp-hero .welcome__hi{color:color-mix(in srgb,var(--orange) 55%,#000)}

/* ===== Actielaag categoriekoppen (includes/catstage.php): veel zichtbare beweging, enkel transform/opacity ===== */
.cat-stage{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}
.cat-stage .st-tap{pointer-events:auto;cursor:pointer}
.cat-stage .st-rx{transform-box:fill-box;transform-origin:50% 60%}
.cat-stage.is-off *{animation-play-state:paused!important}
html.lm-levendig .cat-hero__text{position:relative;z-index:3;border-radius:26px;padding:1rem 1.4rem 1.1rem;box-shadow:0 6px 18px rgba(0,0,0,.12)}
html.lm-levendig .cat--avonturiers .cat-hero__text{background:rgba(246,231,193,.92);border:3px dashed #c9a46a}
html.lm-levendig .cat--superhelden .cat-hero__text{background:rgba(29,74,170,.9);border:3px solid #ffd23f}
html.lm-levendig .cat--agenten .cat-hero__text{background:rgba(20,22,46,.88);border:2px solid rgba(126,240,255,.45)}
html.lm-levendig .cat--hackers .cat-hero__text{background:rgba(6,16,26,.9);border:2px solid rgba(57,242,160,.5)}
html.lm-levendig .cat--avonturiers .cat-decor .cd-trail,html.lm-levendig .hp--avonturiers .hp-balloon{display:none}
.cat-hero__mascot--stage{animation:none}
/* zijaanzicht-muis */
.st-bob{animation:st-bob .2s ease-in-out infinite alternate}
@keyframes st-bob{to{transform:translateY(-2px)}}
.st-leg{transform-box:fill-box;transform-origin:50% 0;animation:st-leg .4s ease-in-out infinite alternate}
.st-leg--b{animation-delay:-.4s}
@keyframes st-leg{from{transform:rotate(-30deg)}to{transform:rotate(30deg)}}
.st-leg--fly{animation:st-kick .35s ease-in-out infinite alternate}
@keyframes st-kick{from{transform:rotate(60deg)}to{transform:rotate(80deg)}}
.st-tail{transform-box:fill-box;transform-origin:100% 100%;animation:st-tail .6s ease-in-out infinite alternate}
@keyframes st-tail{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
.st-ear{transform-box:fill-box;transform-origin:50% 100%;animation:st-ear .5s ease-in-out infinite alternate}
@keyframes st-ear{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
.st-head{transform-box:fill-box;transform-origin:30% 80%;animation:st-head 1.2s ease-in-out infinite alternate}
@keyframes st-head{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
.st-eye{transform-box:fill-box;transform-origin:center;animation:st-blink 3.6s infinite}
@keyframes st-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.st-cape{transform-box:fill-box;transform-origin:100% 30%;animation:st-cape .16s ease-in-out infinite alternate}
@keyframes st-cape{from{transform:scaleY(.8) skewY(-6deg)}to{transform:scaleY(1.15) skewY(6deg)}}
.st-mag{transform-box:fill-box;transform-origin:0 100%;animation:st-mag 1s ease-in-out infinite alternate}
@keyframes st-mag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.st-mapflap{transform-box:fill-box;transform-origin:0 50%;animation:st-flap .45s ease-in-out infinite alternate}
@keyframes st-flap{from{transform:skewY(-10deg) scaleX(.9)}to{transform:skewY(10deg) scaleX(1.05)}}
.st-sneak{animation:st-tiptoe .7s ease-in-out infinite alternate}
.st-sneak .st-leg{animation-duration:.7s}.st-sneak .st-leg--b{animation-delay:-.7s}.st-sneak .st-bob{animation:none}
@keyframes st-tiptoe{from{transform:translateY(0)}to{transform:translateY(-7px)}}
/* lucht en natuur */
.st-cloud{opacity:.9;animation:st-drift 46s linear infinite}
.st-cloud.c2{opacity:.75;animation-duration:62s;animation-delay:-31s}
@keyframes st-drift{from{transform:translateX(-160px)}to{transform:translateX(1380px)}}
.st-balloon{transform-box:fill-box;transform-origin:50% 0;animation:st-swing 2.6s ease-in-out infinite alternate}
@keyframes st-swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.st-wing{transform-box:fill-box;transform-origin:100% 90%;animation:st-wing .22s ease-in-out infinite alternate}
.st-wing--r{transform-origin:0 90%}
@keyframes st-wing{from{transform:scaleY(1)}to{transform:scaleY(-.7)}}
.st-bw{transform-box:fill-box;transform-origin:100% 50%;animation:st-bw .13s ease-in-out infinite alternate}
.st-bw--r{transform-origin:0 50%}
@keyframes st-bw{from{transform:scaleX(1)}to{transform:scaleX(.2)}}
.st-sway{transform-box:fill-box;transform-origin:50% 100%;animation:st-sway 2.4s ease-in-out infinite alternate}
.t2 .st-sway{animation-duration:3.1s;animation-delay:-1s}
@keyframes st-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
html.lm-levendig .cat--avonturiers .cd-palm{animation-duration:2.2s}
html.lm-levendig .cat--avonturiers .cd-needle{animation:st-spin 3s cubic-bezier(.4,1.5,.5,1) infinite}
@keyframes st-spin{0%{transform:rotate(0)}40%{transform:rotate(400deg)}60%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}
.st-flagmap{transform-box:fill-box;transform-origin:0 50%;animation:st-flap .5s ease-in-out infinite alternate}
.st-twinkle{transform-box:fill-box;transform-origin:center;animation:st-tw 1.4s ease-in-out infinite alternate}
.st-twinkle.d1{animation-delay:-.5s}.st-twinkle.d2{animation-delay:-1s;animation-duration:1.8s}.st-twinkle.d3{animation-delay:-.3s;animation-duration:1.1s}
@keyframes st-tw{from{transform:scale(.35) rotate(0);opacity:.5}to{transform:scale(1.15) rotate(45deg);opacity:1}}
.st-burst{transform-box:fill-box;transform-origin:50% 100%;animation:st-burst .5s ease-in-out infinite alternate}
@keyframes st-burst{from{transform:scale(.8)}to{transform:scale(1.15)}}
/* superhelden */
.st-speed{animation:st-speed .14s steps(2) infinite}
@keyframes st-speed{from{opacity:.9}to{opacity:.35}}
.st-shoot g.s1,.st-shoot g.s2{opacity:0;animation:st-shoot 5s ease-in infinite}
.st-shoot g.s2{animation-duration:7s;animation-delay:-3s}
@keyframes st-shoot{0%{transform:translate(150px,330px);opacity:0}4%{opacity:1}28%{transform:translate(1150px,20px);opacity:1}32%,100%{transform:translate(1250px,-10px);opacity:0}}
/* agenten */
.st-search{transform-box:fill-box;transform-origin:50% 100%;animation:st-search 4s ease-in-out infinite alternate}
.st-search.s2{animation-duration:5.2s;animation-delay:-2.6s}
@keyframes st-search{from{transform:rotate(-30deg)}to{transform:rotate(30deg)}}
.st-laser{animation:st-laser 2.2s ease-in-out infinite alternate}
.st-laser.l2{animation-duration:2.9s;animation-delay:-1s}.st-laser.l3{animation-duration:1.7s;animation-delay:-.6s}
@keyframes st-laser{0%{transform:translateY(-30px);opacity:.95}45%{opacity:.4}50%{opacity:.95}100%{transform:translateY(34px);opacity:.8}}
.st-flutter{transform-box:fill-box;transform-origin:center;animation:st-flutter .5s ease-in-out infinite alternate}
@keyframes st-flutter{from{transform:rotate(-12deg) scaleY(1)}to{transform:rotate(12deg) scaleY(.8)}}
/* hackers */
.st-rainwrap{opacity:.3}
.st-rain{animation:st-rain 6s linear infinite}
.st-rain.r1{animation-duration:8s}.st-rain.r2{animation-duration:5s}.st-rain.r3{animation-duration:7s}
@keyframes st-rain{from{transform:translateY(-400px)}to{transform:translateY(0)}}
.st-scroll{animation:st-scroll 2.4s linear infinite}.st-scroll.k2{animation-duration:3.3s}.st-scroll.k3{animation-duration:1.8s}
@keyframes st-scroll{from{transform:translateY(0)}to{transform:translateY(-88px)}}
.st-blink{opacity:0;animation:st-scrflash 3s steps(1) infinite}.st-blink.k2{animation-delay:-1.1s;animation-duration:4.2s}.st-blink.k3{animation-delay:-2s}
@keyframes st-scrflash{0%,88%,100%{opacity:0}90%{opacity:.5}92%{opacity:0}94%{opacity:.35}}
.st-glitch rect{opacity:0;animation:st-glitch 3.7s steps(1) infinite}
.st-glitch .g2{animation-duration:5.3s;animation-delay:-2s}.st-glitch .g3{animation-duration:4.1s;animation-delay:-1s}
@keyframes st-glitch{0%,90%,100%{opacity:0;transform:none}91%{opacity:.55;transform:translateX(-40px)}93%{opacity:.3;transform:translateX(60px)}95%{opacity:0}}
html.lm-levendig .cat--hackers h1{animation:hp-textin .7s cubic-bezier(.2,.9,.3,1.2) both,st-h1 4s steps(1) 1s infinite}
@keyframes st-h1{0%,88%,100%{transform:none}90%{transform:translate(4px,-2px) skewX(10deg)}92%{transform:translate(-5px,1px)}94%{transform:translate(2px,0) skewX(-6deg)}}
.st-hover{animation:st-hover 1s ease-in-out infinite alternate}
@keyframes st-hover{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.st-prop{transform-box:fill-box;transform-origin:center;animation:st-prop .08s linear infinite alternate}
@keyframes st-prop{from{transform:scaleX(1)}to{transform:scaleX(.15)}}
.st-led{animation:st-led .6s steps(1) infinite}
@keyframes st-led{50%{opacity:.15}}
.st-wheel{transform-box:fill-box;transform-origin:center;animation:st-wheel .7s linear infinite}
@keyframes st-wheel{to{transform:rotate(360deg)}}
.st-armw{transform-box:fill-box;transform-origin:0 100%;animation:st-armw .5s ease-in-out infinite alternate}
@keyframes st-armw{from{transform:rotate(-30deg)}to{transform:rotate(25deg)}}
.st-roboeyes{transform-box:fill-box;transform-origin:center;animation:st-blink 2.8s infinite}
.st-robot{animation:st-bob .25s ease-in-out infinite alternate}
.st-bits text{opacity:0;animation:st-bits 2.6s ease-out infinite}
.st-bits .b2{animation-delay:-.65s}.st-bits .b3{animation-delay:-1.3s}.st-bits .b4{animation-delay:-1.95s}
@keyframes st-bits{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-150px);opacity:0}}
@media (max-width:640px){
  .cat-stage{inset:auto;top:0;left:calc(50% - var(--mc,600) * .7px);width:840px;height:280px}
  .cat-stage--avonturiers{--mc:830;width:740px;height:247px;top:16px;left:calc(50% - var(--mc) * .6167px)}.cat-stage--superhelden{--mc:820}.cat-stage--hackers{--mc:760}
  html.lm-levendig .cat-hero__text{padding:.9rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .cat-stage *,.cat--hackers h1{animation:none!important}
  .st-glitch,.st-shoot,.st-bits{display:none}
}
.st-say{font-family:var(--f-title),sans-serif;font-weight:700;font-size:30px;fill:#fff;stroke:#2a2523;stroke-width:6px;paint-order:stroke;transform-box:fill-box;transform-origin:center;pointer-events:none}

/* ===== Knop Rustig / Levendig (menu; assets/js/beweging.js zet html:not(.lm-levendig) of html.lm-levendig) ===== */
.menubar__mode{margin-left:auto;padding-left:.4rem;display:flex;align-items:center}
.mtoggle{--mt-ink:var(--sz-menuink,var(--red-d));--mt-on:var(--sz-act,var(--red));--mt-onink:var(--sz-actink,#fff);--mt-off:var(--sz-menu,#fff7e3);
  display:flex;align-items:stretch;gap:2px;padding:3px;margin:0;border:2px solid var(--mt-ink);border-radius:999px;background:var(--mt-off);color:var(--mt-ink);
  font:600 .95rem/1 var(--f-title),sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.mtoggle__opt{--mt-bg:var(--mt-off);display:flex;align-items:center;gap:.3rem;padding:.3em .7em .3em .5em;border-radius:999px;color:var(--mt-ink);background:transparent;transition:background .25s,color .25s}
.mtoggle__opt svg{width:22px;height:22px;flex:none}
.mtoggle .mt-cut-s{stroke:var(--mt-bg)}.mtoggle .mt-cut-f{fill:var(--mt-bg)}
html.lm-levendig .mtoggle__opt--levendig,html:not(.lm-levendig) .mtoggle__opt--rustig{--mt-bg:var(--mt-on);background:var(--mt-on);color:var(--mt-onink);box-shadow:0 2px 0 var(--sz-actshadow,var(--red-d))}
.mtoggle:hover .mtoggle__opt:not(:only-child){text-decoration:none}
.mtoggle:hover{background:var(--sz-menuhover,#ffe9a8)}
.mtoggle:hover .mtoggle__opt{--mt-bg:var(--sz-menuhover,#ffe9a8)}
html.lm-levendig .mtoggle:hover .mtoggle__opt--levendig,html:not(.lm-levendig) .mtoggle:hover .mtoggle__opt--rustig{--mt-bg:var(--mt-on)}
.mtoggle:focus-visible{outline:3px solid var(--sz-menuink,var(--orange));outline-offset:3px}
html.lm-levendig .mtoggle__opt--levendig svg{animation:mt-zoom 1.6s ease-in-out infinite alternate}
@keyframes mt-zoom{from{transform:translateY(1px)}to{transform:translateY(-2px)}}
@media (max-width:640px){.mtoggle{font-size:.9rem}.mtoggle__opt{padding:.28em .6em .28em .42em}.mtoggle__opt svg{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.mtoggle__opt svg{animation:none!important}.mtoggle__opt{transition:none}}
@media print{.menubar__mode{display:none}}

/* ===== Rustig: de vroegere categoriekoppen + minder franjes elders ===== */
html:not(.lm-levendig) .cat-stage,html:not(.lm-levendig) .cat-hero__mascot--stage{display:none}
html.lm-levendig .cat-hero__mascot--calm{display:none}
html:not(.lm-levendig) .sz-fall,html:not(.lm-levendig) .end-fx{display:none}
html:not(.lm-levendig) .tile__icon,html:not(.lm-levendig) .mouse--tile,html:not(.lm-levendig) .mouse--tile *,html:not(.lm-levendig) .tile .scene *,html:not(.lm-levendig) .tile__cat *,
html:not(.lm-levendig) .end-medal__rays,html:not(.lm-levendig) .menubar--nudge .menubar__list li{animation:none!important}

/* ===== Menu op pc (vanaf 1000px, ook 1024-schermen met schuifbalk): alles op één rij (korte labels op middelbreed, volle labels op breed) ===== */
.mb-short{display:none}
@media (min-width:1000px){
  .menubar__list{max-width:1600px;gap:.3rem;padding-inline:1rem}
}
@media (min-width:1000px) and (max-width:1679px){.mb-full{display:none}.mb-short{display:inline}}
@media (min-width:1000px) and (max-width:1439px){
  .menubar__list{gap:.2rem;padding-inline:.75rem}
  .menubar__item{padding:.38em .7em .38em .45em;gap:.32rem}
  .mtoggle{font-size:.92rem}.mtoggle__opt{padding:.28em .6em .28em .42em}
}
@media (min-width:1000px) and (max-width:1279px){
  .menubar__list{gap:.12rem;padding-inline:.5rem}
  .menubar__item{font-size:.92rem;padding:.36em .5em .36em .36em;gap:.25rem}
  .menubar__item svg{width:21px;height:21px}
  .mtoggle__opt{padding:.3em .5em}.mtoggle__opt>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.mtoggle[aria-disabled="true"]{cursor:default}