/* Leesmuizen – seizoensthema's (automatisch, zie includes/seasons.php). Alles met de hand getekend in SVG/CSS. */

/* ---------- 1. Kleuren uit het actieve thema ---------- */
body[data-thema]{background-image:radial-gradient(circle at 12px 12px,var(--sz-dot) 2.5px,transparent 3px)}
body[data-thema] .topbar{background:linear-gradient(180deg,var(--sz-top1) 0%,var(--sz-top2) 55%,var(--sz-top3) 100%);box-shadow:0 6px 0 var(--sz-band),0 10px 24px rgba(20,10,30,.25)}
body[data-thema] .brand__name{color:var(--sz-brandA);text-shadow:0 3px 0 var(--sz-top3),0 5px 10px rgba(0,0,0,.3);-webkit-text-stroke:1px rgba(0,0,0,.25)}
body[data-thema] .brand__name .l5,body[data-thema] .brand__name .l6,body[data-thema] .brand__name .l7,body[data-thema] .brand__name .l8,body[data-thema] .brand__name .l9,body[data-thema] .brand__name .l10{color:var(--sz-brandB)}
body[data-thema] .menubar{background:var(--sz-menu);border-bottom-color:var(--sz-menuline)}
body[data-thema] .menubar__item,body[data-thema] .menubar__item svg{color:var(--sz-menuink)}
body[data-thema] .menubar__item:hover{background:var(--sz-menuhover)}
body[data-thema] .menubar__item[aria-current="page"]{background:var(--sz-act);color:var(--sz-actink);border-color:var(--sz-actshadow);box-shadow:0 3px 0 var(--sz-actshadow)}
body[data-thema] .menubar__item[aria-current="page"] svg{color:var(--sz-actink)}
body[data-thema] .tile{border-color:var(--sz-tile);box-shadow:0 6px 0 var(--sz-tile)}
body[data-thema] .tile:hover,body[data-thema] .tile:focus-visible{box-shadow:0 12px 0 var(--sz-tile)}
body[data-thema] .btn--alt{background:var(--sz-alt);color:var(--sz-altink);box-shadow:0 4px 0 var(--sz-altshadow)}
body[data-thema] .btn--alt svg{color:var(--sz-altink)}

/* ---------- 2. Begroetingslint + voorbeeldbalk ---------- */
.sz-greet{margin:0 0 .5rem}
.sz-greet span{display:inline-block;background:var(--sz-greet);color:var(--sz-greetink);font-family:var(--f-title);font-weight:600;font-size:1.05rem;padding:.3em 1em;border-radius:999px;box-shadow:0 3px 0 rgba(0,0,0,.18);transform:rotate(-2deg);animation:sz-wiggle 4s ease-in-out infinite}
.sz-preview{position:relative;z-index:6;background:#1f2430;color:#fff;font:600 .9rem/1.3 var(--f-title);text-align:center;padding:.35rem .8rem}
.sz-preview a{color:#ffd23f}

/* ---------- 3. Lagen ---------- */
body[data-thema] main,body[data-thema] .footer{position:relative;z-index:1}
/* Pasen, Lente en Zomer: logo en woordmerk liggen boven de onderrand van de header (gras, golven), die loopt erachter. Andere thema's ongewijzigd. */
body[data-thema=pasen] .topbar__inner,body[data-thema=lente] .topbar__inner,body[data-thema=zomer] .topbar__inner{z-index:2}
.brand__badge{position:relative;display:block;flex:none}
.sz-logohat{position:absolute;width:50px;height:45px;top:-16px;right:-14px;transform:rotate(20deg);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));overflow:visible}
.brand:hover .sz-logohat{transform:rotate(8deg) translateY(-3px);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.sz-top{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.sz-t{position:absolute;display:block}
.sz-t svg,.sz-h svg,.sz-p svg{display:block;width:100%;height:100%;overflow:visible}
.mouse--sz{overflow:visible}
.sz-mhat{animation:sz-hat 5s ease-in-out infinite;transform-box:view-box}
.sz-hero{position:absolute;inset:0;z-index:2;pointer-events:none}
.sz-h{position:absolute;display:block}
.sz-h--a{left:-14%;bottom:-2%;width:40%;aspect-ratio:1}
.sz-h--b{right:-10%;bottom:-2%;width:30%;aspect-ratio:1}
.sz-h--c{left:-8%;top:2%;width:28%;aspect-ratio:1}
.sz-h svg{height:auto}
.sz-small{width:24%}
.sz-fall{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
html.has-reader .sz-fall{display:none}
.sz-p{position:absolute;top:0;left:var(--x);width:var(--s);height:var(--s);opacity:.6;will-change:transform;animation:sz-down var(--d) linear var(--dl) infinite}
.sz-p--snow{animation-name:sz-snow;opacity:.85}
.sz-p--leaf{animation-name:sz-leaf;animation-duration:calc(var(--d) * 1.1);opacity:.75}
.sz-p--rise{animation-name:sz-up;animation-duration:calc(var(--d) * 1.2);opacity:.55}
.sz-p--fly{top:var(--y);left:0;animation-name:sz-across;animation-duration:calc(var(--d) * 1.4);opacity:.55}
.sz-p--conf{animation-name:sz-conf;animation-duration:calc(var(--d) * .7);opacity:.8;width:calc(var(--s) * .55);height:calc(var(--s) * .55)}
.sz-p:nth-child(1){--x:1.6vw;--s:22px;--d:17.3s;--dl:-0.8s;--dx:9vw;--rot:-360deg;--y:54vh}
.sz-p:nth-child(2){--x:9.2vw;--s:34px;--d:15.4s;--dl:-1.3s;--dx:5vw;--rot:-360deg;--y:38vh}
.sz-p:nth-child(3){--x:13.0vw;--s:30px;--d:13.7s;--dl:-7.7s;--dx:-9vw;--rot:420deg;--y:15vh}
.sz-p:nth-child(4){--x:21.6vw;--s:30px;--d:13.5s;--dl:-3.0s;--dx:9vw;--rot:-220deg;--y:45vh}
.sz-p:nth-child(5){--x:27.1vw;--s:34px;--d:14.3s;--dl:-4.4s;--dx:14vw;--rot:-220deg;--y:21vh}
.sz-p:nth-child(6){--x:34.2vw;--s:22px;--d:17.1s;--dl:-9.4s;--dx:-14vw;--rot:420deg;--y:15vh}
.sz-p:nth-child(7){--x:40.6vw;--s:30px;--d:20.5s;--dl:-8.8s;--dx:-5vw;--rot:300deg;--y:66vh}
.sz-p:nth-child(8){--x:45.6vw;--s:22px;--d:21.7s;--dl:-15.2s;--dx:-9vw;--rot:-360deg;--y:46vh}
.sz-p:nth-child(9){--x:52.6vw;--s:26px;--d:21.0s;--dl:-6.0s;--dx:-14vw;--rot:-360deg;--y:73vh}
.sz-p:nth-child(10){--x:58.3vw;--s:26px;--d:14.7s;--dl:-7.2s;--dx:-14vw;--rot:-360deg;--y:48vh}
.sz-p:nth-child(11){--x:64.2vw;--s:26px;--d:19.5s;--dl:-11.3s;--dx:5vw;--rot:-360deg;--y:19vh}
.sz-p:nth-child(12){--x:73.5vw;--s:30px;--d:20.7s;--dl:-1.3s;--dx:14vw;--rot:180deg;--y:65vh}
.sz-p:nth-child(13){--x:76.4vw;--s:30px;--d:22.8s;--dl:-7.9s;--dx:5vw;--rot:180deg;--y:29vh}
.sz-p:nth-child(14){--x:84.3vw;--s:30px;--d:13.6s;--dl:-10.4s;--dx:-9vw;--rot:-220deg;--y:58vh}
.sz-p:nth-child(15){--x:89.5vw;--s:30px;--d:13.9s;--dl:-6.2s;--dx:9vw;--rot:180deg;--y:25vh}
.sz-p:nth-child(16){--x:97.8vw;--s:34px;--d:16.1s;--dl:-6.7s;--dx:-5vw;--rot:300deg;--y:37vh}
/* ---------- 4. Bewegingen ---------- */
@keyframes sz-down{from{transform:translate3d(0,-12vh,0) rotate(0)}to{transform:translate3d(var(--dx),112vh,0) rotate(var(--rot))}}
@keyframes sz-snow{0%{transform:translate3d(0,-12vh,0) rotate(0)}25%{transform:translate3d(calc(var(--dx) * .5),20vh,0) rotate(60deg)}50%{transform:translate3d(calc(var(--dx) * -.3),50vh,0) rotate(120deg)}75%{transform:translate3d(calc(var(--dx) * .6),80vh,0) rotate(200deg)}100%{transform:translate3d(0,112vh,0) rotate(260deg)}}
@keyframes sz-leaf{0%{transform:translate3d(0,-12vh,0) rotate(0)}20%{transform:translate3d(6vw,10vh,0) rotate(50deg)}40%{transform:translate3d(-3vw,34vh,0) rotate(-30deg)}60%{transform:translate3d(7vw,58vh,0) rotate(70deg)}80%{transform:translate3d(-2vw,84vh,0) rotate(-20deg)}100%{transform:translate3d(4vw,112vh,0) rotate(40deg)}}
@keyframes sz-up{0%{transform:translate3d(0,112vh,0)}50%{transform:translate3d(calc(var(--dx) * .5),50vh,0)}100%{transform:translate3d(0,-14vh,0)}}
@keyframes sz-across{0%{transform:translate3d(-12vw,0,0)}25%{transform:translate3d(20vw,-4vh,0)}50%{transform:translate3d(50vw,3vh,0)}75%{transform:translate3d(80vw,-3vh,0)}100%{transform:translate3d(112vw,0,0)}}
@keyframes sz-conf{from{transform:translate3d(0,-10vh,0) rotate3d(1,1,0,0)}to{transform:translate3d(var(--dx),112vh,0) rotate3d(1,1,0,720deg)}}
@keyframes sz-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.35)}}
@keyframes sz-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sz-wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.04)}}
@keyframes sz-hat{0%,100%{transform:translate(100px,45px) rotate(-4deg) scale(.86)}50%{transform:translate(100px,43px) rotate(4deg) scale(.86)}}
@keyframes sz-spin{to{transform:rotate(360deg)}}
@keyframes sz-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes sz-blink{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.35;filter:none}}
@keyframes sz-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes sz-batloop{0%{transform:translate(0,0)}25%{transform:translate(-60px,12px)}50%{transform:translate(-110px,-4px)}75%{transform:translate(-50px,-14px)}100%{transform:translate(0,0)}}
@keyframes sz-dangle{0%,100%{transform:translateY(-22px)}50%{transform:translateY(0)}}
@keyframes sz-bellfly{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-90px,8px) rotate(8deg)}}
@keyframes sz-flakefall{from{transform:translateY(-30px) rotate(0)}to{transform:translateY(100px) rotate(240deg)}}
@keyframes sz-flutter{0%{transform:translate(0,0)}25%{transform:translate(-40px,-12px)}50%{transform:translate(-90px,4px)}75%{transform:translate(-40px,14px)}100%{transform:translate(0,0)}}
@keyframes sz-wing{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
@keyframes sz-wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sz-bounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(180deg)}}
@keyframes sz-plane{0%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(-260px,-6px) rotate(4deg)}100%{transform:translate(0,0) rotate(-6deg)}}
@keyframes sz-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}}
@keyframes sz-jump{0%,70%,100%{transform:translateY(0) rotate(0)}80%{transform:translateY(-12px) rotate(-8deg)}90%{transform:translateY(0) rotate(5deg)}}
@keyframes sz-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes sz-roll{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-14px) rotate(-200deg)}}
@keyframes sz-buzz{0%{transform:translate(0,0)}25%{transform:translate(30px,-16px)}50%{transform:translate(60px,4px)}75%{transform:translate(26px,18px)}100%{transform:translate(0,0)}}
@keyframes sz-gallop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes sz-roofwalk{0%,100%{transform:translateX(0)}50%{transform:translateX(-36px)}}

/* gedeelde onderdelen */
.sz-wings,.sz-bwing,.sz-wl,.sz-wr{transform-box:fill-box}
.sz-wings{transform-origin:50% 40%;animation:sz-flap .32s ease-in-out infinite}
.sz-bwing{transform-origin:50% 80%;animation:sz-flap .5s ease-in-out infinite}
.sz-wl{transform-origin:100% 50%;animation:sz-wing .4s ease-in-out infinite}
.sz-wr{transform-origin:0 50%;animation:sz-wing .4s ease-in-out infinite}
.sz-rays{animation:sz-spin 18s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
.sz-spin{animation:sz-spin 6s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
.sz-bloom{transform-box:fill-box;transform-origin:50% 50%;animation:sz-spin 14s linear infinite}
.sz-ball{animation:sz-blink 1.6s ease-in-out infinite}.sz-ball--1{animation-delay:-.5s}.sz-ball--2{animation-delay:-1.1s}
.sz-star{transform-box:fill-box;transform-origin:50% 55%;animation:sz-twinkle 2.4s ease-in-out infinite}
.sz-swing{animation:sz-sway 3s ease-in-out infinite}.sz-swing--1{animation-delay:-1s}.sz-swing--2{animation-delay:-2s}
.sz-legs{animation:sz-gallop .5s ease-in-out infinite}
.sz-arm{transform-box:fill-box;transform-origin:100% 100%;animation:sz-sway 2.2s ease-in-out infinite}
.sz-bear{transform-box:fill-box;transform-origin:50% 100%;animation:sz-sway 2.6s ease-in-out infinite}
.sz-float{animation:sz-float 4s ease-in-out infinite}
.sz-jump{animation:sz-jump 3.2s ease-in-out infinite}
.sz-hop{animation:sz-hop 1.8s ease-in-out infinite}
.sz-wob{animation:sz-sway 2.4s ease-in-out infinite;transform-origin:50% 100%}
.sz-wob2{animation:sz-sway 3s ease-in-out -1s infinite;transform-origin:50% 100%}
.sz-sway{animation:sz-sway 3.4s ease-in-out infinite;transform-origin:50% 100%}
.sz-sway2{animation:sz-sway 2.8s ease-in-out -1.2s infinite;transform-origin:50% 100%}
.sz-spinslow svg{animation:sz-spin 16s linear infinite}
.sz-roll{animation:sz-roll 4s ease-in-out infinite}
.sz-buzz{animation:sz-buzz 5s ease-in-out infinite}
.sz-fly{animation:sz-float 3s ease-in-out infinite}
.sz-pn{display:flex;align-items:flex-end;gap:2px}.sz-pn svg{width:33%;height:auto}

/* ---------- 5. Topbalk per thema ---------- */
/* Halloween: maan, vleermuizen, spinnetje, pompoen */
.sz-moon{right:4%;top:6px;width:58px;height:58px}
.sz-bat{width:46px;height:23px;animation:sz-batloop 7s ease-in-out infinite}
.sz-bat--1{right:12%;top:12px}.sz-bat--2{right:22%;top:40px;width:34px;height:17px;animation-delay:-2.3s;animation-duration:8.5s}.sz-bat--3{right:34%;top:18px;width:38px;height:19px;animation-delay:-4.6s;animation-duration:9s}
.sz-spider{right:28%;top:0;width:26px;height:58px;animation:sz-dangle 4.5s ease-in-out infinite}
.sz-pump{right:44%;bottom:2px;width:48px;height:43px;animation:sz-bob 3s ease-in-out infinite}
body[data-thema=halloween] .topbar::after{opacity:.5;background-image:radial-gradient(circle,#fff6c9 1px,transparent 1.6px),radial-gradient(circle,#fff6c9 .8px,transparent 1.3px);background-size:61px 47px,37px 29px;background-position:0 0,18px 11px}
/* Sinterklaas: dak met de Sint op zijn paard */
.sz-roofwrap{right:3%;bottom:0;width:252px;height:84px}
.sz-walk{animation:sz-roofwalk 9s ease-in-out infinite}
.sz-horse{animation:sz-gallop .9s ease-in-out infinite}
.sz-star1,.sz-star2{width:16px;height:16px;animation:sz-twinkle 2.6s ease-in-out infinite}
.sz-star1{right:30%;top:12px}.sz-star2{right:36%;top:42px;width:11px;height:11px;animation-delay:-1.3s}
/* Kerst: lichtjes en boom */
.sz-wire{left:0;right:0;top:5px;height:2px;background:#0b3d22;opacity:.8}
.sz-lights{left:0;right:0;top:4px;display:flex;justify-content:space-around}
.sz-lights i{display:block;width:11px;height:15px;border-radius:45% 45% 50% 50%/40% 40% 60% 60%;background:#ffd23f;box-shadow:0 0 10px 2px currentColor;color:#ffd23f;animation:sz-blink 1.4s ease-in-out infinite;position:relative}
.sz-lights i::before{content:"";position:absolute;left:3px;top:-3px;width:5px;height:5px;background:#2b2b2b;border-radius:1px}
.sz-lights i:nth-child(4n+1){background:#ff4d4d;color:#ff4d4d}.sz-lights i:nth-child(4n+2){background:#ffd23f;color:#ffd23f;animation-delay:-.35s}.sz-lights i:nth-child(4n+3){background:#5ec8ff;color:#5ec8ff;animation-delay:-.7s}.sz-lights i:nth-child(4n){background:#7dff8a;color:#7dff8a;animation-delay:-1.05s}
.sz-lights i:nth-child(odd){margin-top:3px}
.sz-ktree{right:4%;bottom:0;width:62px;height:80px}
/* Pasen: vliegende klokken, eitjes in het gras */
.sz-grass{left:0;right:0;bottom:0;height:14px;background:radial-gradient(circle at 8px 14px,#4caf50 8px,transparent 8.5px) 0 0/16px 14px repeat-x;opacity:.9}
.sz-bellfly{width:52px;height:44px;top:6px;animation:sz-bellfly 6s ease-in-out infinite}
.sz-bellfly--1{right:8%}.sz-bellfly--2{right:24%;top:26px;width:42px;height:36px;animation-delay:-3s;animation-duration:7s}
.sz-tegg{bottom:3px;width:24px;height:30px;animation:sz-sway 2.6s ease-in-out infinite;transform-origin:50% 100%}
.sz-tegg--1{right:36%}.sz-tegg--2{right:39%;width:20px;height:25px;animation-delay:-.9s}.sz-tegg--3{right:42%;animation-delay:-1.7s}
/* Winter: sneeuwlaag en dwarrelende vlokken */
.sz-snowcap{left:0;right:0;top:0;height:12px;background:radial-gradient(circle at 10px 0,#fff 11px,transparent 11.5px) 0 0/20px 12px repeat-x;opacity:.95}
.sz-tflake{width:22px;height:22px;top:0;animation:sz-flakefall 6s linear infinite;opacity:.9}
.sz-tflake--1{right:8%}.sz-tflake--2{right:18%;width:16px;height:16px;animation-delay:-2s;animation-duration:7s}.sz-tflake--3{right:30%;animation-delay:-4s;animation-duration:8s}.sz-tflake--4{right:42%;width:14px;height:14px;animation-delay:-1s}
/* Lente: bloemetjes en een vlinder */
.sz-grass--lente{background-image:radial-gradient(circle at 8px 14px,#6cc04a 8px,transparent 8.5px)}
.sz-tfl{bottom:0;width:26px;height:58px;animation:sz-sway 3s ease-in-out infinite;transform-origin:50% 100%}
.sz-tfl--1{right:6%}.sz-tfl--2{right:11%;height:46px;width:22px;animation-delay:-.8s}.sz-tfl--3{right:16%;animation-delay:-1.6s}.sz-tfl--4{right:21%;height:48px;width:22px;animation-delay:-2.2s}
.sz-tbf{right:30%;top:14px;width:40px;height:34px;animation:sz-flutter 7s ease-in-out infinite}
/* Zomer: zon, golfjes en strandbal */
.sz-tsun{right:4%;top:4px;width:70px;height:70px}
.sz-twave{left:0;bottom:0;width:200%;height:18px;animation:sz-wave 9s linear infinite}
.sz-twave .sz-wavesvg{width:100%;height:100%}
.sz-tball{right:18%;bottom:8px;width:34px;height:34px;animation:sz-bounce 2.4s ease-in-out infinite}
/* Herfst: tak met wiegende blaadjes */
.sz-tbranch{right:0;top:0;width:300px;height:82px}
.sz-tacorn{right:32%;top:8px;width:20px;height:27px;animation:sz-sway 2.8s ease-in-out infinite;transform-origin:50% 0}
/* Laatste schooldag: vlaggetjes, banner en papieren vliegtuigje */
.sz-bunting{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:0 .5rem}
.sz-flag{display:block;width:22px;height:20px;clip-path:polygon(0 0,100% 0,50% 100%);background:#e63946;animation:sz-sway 2.6s ease-in-out infinite;transform-origin:50% 0}
.sz-flag[data-c="1"]{background:#ffd23f;animation-delay:-.4s}.sz-flag[data-c="2"]{background:#43a047;animation-delay:-.8s}.sz-flag[data-c="3"]{background:#1e88e5;animation-delay:-1.2s}.sz-flag[data-c="4"]{background:#e0218a;animation-delay:-1.6s}.sz-flag[data-c="5"]{background:#ff8a1f;animation-delay:-2s}
.sz-banner{right:4%;top:28px;animation:sz-wiggle 3s ease-in-out infinite}
.sz-banner span{display:block;background:#fff;color:#1e3a8a;font:700 1.15rem/1 var(--f-title);padding:.45em .9em;border-radius:10px;box-shadow:0 3px 0 #c2187a}
.sz-tplane{right:22%;top:30px;width:52px;height:30px;animation:sz-plane 10s ease-in-out infinite}

/* ---------- 6. Mobiel ---------- */
@media (max-width:640px){
  .sz-p:nth-child(n+9){display:none}
  .sz-logohat{width:36px;height:32px;top:-12px;right:-10px}
  .sz-greet span{font-size:.95rem}
  .sz-bat--3,.sz-spider,.sz-pump,.sz-star2,.sz-tegg,.sz-tflake--3,.sz-tflake--4,.sz-tfl--3,.sz-tfl--4,.sz-tball,.sz-tacorn,.sz-banner,.sz-bellfly--2{display:none}
  .sz-moon{width:40px;height:40px;right:10px}
  .sz-bat--1{right:56px;top:6px;width:32px;height:16px}.sz-bat--2{right:30px;top:44px;width:26px;height:13px}
  .sz-bat{animation-name:sz-bob}
  .sz-roofwrap{width:150px;height:50px;right:0}
  .sz-ktree{width:44px;height:58px;right:8px}
  .sz-bellfly--1{right:12px;width:40px;height:34px}.sz-bellfly{animation-name:sz-bob}
  .sz-tsun{width:50px;height:50px;right:8px}
  .sz-tbranch{width:170px;height:48px}
  .sz-tbf{right:70px}.sz-tbf{animation-name:sz-bob}
  .sz-tplane{right:16px;top:36px;animation-name:sz-bob}
  .sz-flag{width:16px;height:14px}
  .sz-h--a{left:-22%}.sz-h--b{right:-18%}
}
@media (max-width:420px){.sz-tfl--2,.sz-tflake--2{display:none}}

/* ---------- 7. Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .sz-fall{display:none}
  .sz-top *,.sz-hero *,.sz-greet span,.sz-mhat,.sz-logohat,.sz-p{animation:none!important;transition:none!important}
  .sz-mhat{transform:translate(100px,45px) scale(.86)}
}
@media print{.sz-fall,.sz-top,.sz-hero,.sz-preview{display:none}}
/* zichtbaarheid vleermuizen op de donkere balk + bredere vliegers */
.sz-top .sz-bat path,.sz-top .sz-bat ellipse{stroke:#e2ccff;stroke-width:1.4;stroke-linejoin:round}
.sz-top .sz-bat{width:56px;height:28px}
.sz-p--fly{width:calc(var(--s) * 1.9);height:calc(var(--s) * 1.1)}
.sz-p--rise{width:calc(var(--s) * 1.25);height:calc(var(--s) * 1.25)}
/* deeltjes zacht houden zodat tekst altijd leesbaar blijft */
.sz-p{opacity:.42}.sz-p--snow{opacity:.6}.sz-p--leaf{opacity:.5}.sz-p--conf{opacity:.55}.sz-p--rise,.sz-p--fly{opacity:.38}
.sz-sw .sz-logohat{position:static;transform:none;width:64px;height:56px;filter:none}
.topbar .sz-logohat{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.35))}