/* Thema kinderfeest (look branding/modern/03). Eigenaar: pakket I1.
   Regels: (1) rol-tokens uit basis.css deel 3 opnieuw gezet onder [data-thema="kids"]; (2) eigen onderdelen met
   klassen die beginnen met .kids-; (3) letters: Bagel Fat One en Bricolage Grotesque (plus het logo), dus drie
   bestanden; (4) contrast tekst minstens 4,5:1 (groot 3:1). Tekst staat nooit los op het verloop: lopende tekst
   staat op een witte of effen sticker, zodat controle.py hem kan meten.
   Opbouw: 1 tokens  2 kop en kruimelpad  3 opening  4 blokken van de showpagina  5 freeze  6 namen  7 beweging */

/* ---------- 1. tokens ---------- */
[data-thema="kids"]{
  --achter:#FFF5FB; --tekst:var(--kids-night); --tekst-zacht:#4B2A5E;
  --vlak:var(--kids-white); --vlak-tekst:var(--kids-night); --rand:var(--kids-night); --schaduw:var(--kids-night);
  --accent:var(--kids-bubblegum); --accent-tekst:var(--kids-night); --accent2:var(--kids-ultraviolet); --accent2-tekst:var(--kids-white);
  --donker:var(--kids-night); --donker-tekst:var(--kids-white); --donker-zacht:#E3D3F2; --donker-vlak:#2A0F45; --donker-accent:var(--kids-lime);
  --link:var(--kids-ultraviolet); --focus:var(--kids-ultraviolet);
  --knop:var(--kids-lime); --knop-tekst:var(--kids-night); --knop-rand:var(--kids-night); --knop-schaduw:var(--kids-night);
  --knop2-tekst:var(--kids-night); --knop2-rand:var(--kids-night);
  --letter-kop:"Bagel Fat One",system-ui,sans-serif; --letter-tekst:"Bricolage Grotesque",system-ui,sans-serif; --letter-knop:"Bricolage Grotesque",system-ui,sans-serif;
  --letter-accent:"Bagel Fat One",system-ui,sans-serif; --letter-nummer:"Bagel Fat One",system-ui,sans-serif;
  --kop-gewicht:400; --kop-spatie:0; --kop-hoogte:1.02; --kop-opsz:normal;
  --rond:28px; --rond-klein:18px;
  --logo-plaat:var(--kids-white); --logo-plaat-rand:var(--kids-night); --logo-plaat-pad:6px 10px 8px;
  /* mini-tv zoals op het bord: wit sticker-kader, donker scherm, roze bal, limoen vakjes en wolkjes */
  --tv-kast:var(--kids-white); --tv-schaduw:var(--kids-lime);
  --tv-scherm:radial-gradient(circle at 18% 30%,#5A1F8F 0,#2A0F45 42%,#16091F 100%);
  --tv-bal:radial-gradient(circle at 35% 30%,#FF8CC4,#FF2E93 55%,#C4136C); --tv-bal-in:var(--kids-white); --tv-bal-tekst:var(--kids-night); --tv-bal-letter:var(--kids-ultraviolet);
  --tv-vak:rgba(255,255,255,.12); --tv-vak-tekst:rgba(255,255,255,.72); --tv-vak-aan:var(--kids-lime); --tv-vak-aan-tekst:var(--kids-night); --tv-bord-letter:var(--kids-lime);
  --tv-wolk:var(--kids-lime); --tv-wolk-tekst:var(--kids-night); --tv-wolk-wie:var(--kids-night);
  --tv-liedje:var(--kids-ultraviolet); --tv-liedje-tekst:var(--kids-white); --tv-bingo:var(--kids-lime); --tv-bingo-tekst:var(--kids-night);
  --kaart-achter:var(--kids-white); --kaart-rand:var(--kids-night); --kaart-kop:var(--kids-bubblegum); --kaart-kop-tekst:var(--kids-night); --kaart-letter:var(--kids-night);
  --kaart-vak:#F3E9FF; --kaart-vak-tekst:var(--kids-night); --kaart-vrij:var(--kids-lime); --kaart-vrij-tekst:var(--kids-night); --kaart-naam-letter:"Bagel Fat One",system-ui,sans-serif;
  /* eigen */
  --kids-verloop:linear-gradient(160deg,#FF2E93 0%,#E02BB5 38%,#B12CFF 70%,#7B2CFF 100%);
  --kids-sticker-rand:0 0 0 3px var(--kids-night);
}
[data-thema="kids"] .logo{transform:rotate(-2deg);box-shadow:3px 4px 0 var(--kids-night)}
[data-thema="kids"] main h2{font-size:clamp(2.2rem,9vw,3.9rem)}
[data-thema="kids"] .logo-op-donker .wm{--wm-1:var(--kids-night)}
[data-thema="kids"] .label{color:var(--tekst)}

/* ---------- 2. kop en kruimelpad: effen bubblegum, dat loopt naadloos over in het verloop van de opening ---------- */
[data-thema="kids"] .kop{background:var(--kids-bubblegum);--tekst:var(--kids-night);--tekst-zacht:var(--kids-night);--rand:var(--kids-night)}
[data-thema="kids"] .kop .menuknop,[data-thema="kids"] .kop .taalwissel{background:var(--kids-white)}
[data-thema="kids"] .kop.open .hoofdmenu{background:var(--kids-white)}
[data-thema="kids"] .kruimelpad{background:var(--kids-bubblegum);box-shadow:0 0 0 100vmax var(--kids-bubblegum);clip-path:inset(0 -100vmax);--tekst:var(--kids-night);--tekst-zacht:var(--kids-night)}
[data-thema="kids"] .kruimelpad ol{padding:0}
[data-thema="kids"] .kruimelpad li+li::before{background:var(--kids-lime);box-shadow:0 0 0 2px var(--kids-night)}
[data-thema="kids"] .kruimelpad [aria-current]{font-weight:800}
@media (min-width:960px){ [data-thema="kids"] .sub{background:var(--kids-white)} }

/* ---------- 3. opening: verloop van het bord, stickers, het duo met de omroeper ---------- */
[data-thema="kids"] .opening{position:relative;isolation:isolate;overflow:hidden;background:var(--kids-verloop);color:var(--kids-white);padding:4px 0 64px;border-bottom:3px solid var(--kids-night)}
/* stickers en stippen in één laag; deze laag danst mee en bevriest bij "Freeze!" */
[data-thema="kids"] .opening::before{content:"";position:absolute;inset:-10px;z-index:-1;pointer-events:none;
  background:
    url(/beeld/kids/stickers/ster-sticker.svg) right 6% top 14px/54px no-repeat,
    url(/beeld/kids/stickers/bliksem-sticker.svg) right 5% bottom 7%/46px no-repeat,
    url(/beeld/kids/stickers/hart-sticker.svg) right 4% bottom 36%/40px no-repeat,
    radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.6px) 0 0/22px 22px;
  animation:kids-zweef 6s ease-in-out infinite}
[data-thema="kids"] .opening::after{content:"";position:absolute;z-index:-2;inset:0;background:url(/beeld/kids/stickers/confetti.svg) center top/380px repeat-x;opacity:.35;pointer-events:none}
[data-thema="kids"] .opening-rij{gap:10px}
[data-thema="kids"] .opening-tekst{gap:16px}
[data-thema="kids"] .opening .label{display:inline-block;background:var(--kids-white);color:var(--kids-night);border:3px solid var(--kids-night);border-radius:999px;padding:6px 14px;margin:0;font-size:12px;letter-spacing:.12em;box-shadow:3px 3px 0 var(--kids-night);transform:rotate(-1.5deg)}
[data-thema="kids"] .opening h1{color:var(--kids-white);max-width:12ch;font-size:clamp(2.6rem,11.2vw,5.9rem);line-height:.98;-webkit-text-stroke:2px var(--kids-night);paint-order:stroke fill;text-shadow:0 4px 0 var(--kids-night),0 5px 0 var(--kids-night)}
[data-thema="kids"] .opening .lead{background:var(--kids-white);color:var(--kids-night);border:3px solid var(--kids-night);border-radius:20px;padding:12px 16px;font-size:17px;line-height:1.42;font-weight:600;box-shadow:5px 5px 0 var(--kids-lime),5px 5px 0 3px var(--kids-night);transform:rotate(.6deg);max-width:30em}
[data-thema="kids"] .opening-prijs{background:var(--kids-lime);color:var(--kids-night);border:3px solid var(--kids-night);border-radius:999px;padding:6px 16px 6px 12px;gap:2px 10px;align-items:center;box-shadow:3px 3px 0 var(--kids-night);transform:rotate(-1deg);font-size:15px;line-height:1.2}
[data-thema="kids"] .opening-prijs .prijs-groot{font-size:34px;color:var(--kids-night);letter-spacing:0}
[data-thema="kids"] .opening-prijs span{color:var(--kids-night)}
[data-thema="kids"] .opening .knop-tweede{background:var(--kids-white);color:var(--kids-night);border-color:var(--kids-night);box-shadow:4px 4px 0 var(--kids-night)}
[data-thema="kids"] .opening .knoppen{gap:12px 14px}
/* beeld: op de telefoon klein boven de tekst, met de omroeper ernaast */
[data-thema="kids"] .opening-beeld{position:relative;height:178px;display:flex;justify-content:center;padding-right:64px}
[data-thema="kids"] .opening-beeld img{height:100%;width:auto;max-height:none;object-fit:contain;border:0;border-radius:0;filter:drop-shadow(0 5px 0 rgba(22,9,31,.35));animation:kids-wiebel 4.5s ease-in-out infinite;transform-origin:50% 100%}
[data-thema="kids"] .opening-beeld::after{content:"";position:absolute;bottom:0;left:calc(50% + 34px);width:76px;height:116px;background:url(/beeld/kids/omroeper-a-320.webp) center bottom/contain no-repeat;filter:drop-shadow(0 4px 0 rgba(22,9,31,.35));animation:kids-wiebel 5.2s ease-in-out -1.3s infinite;transform-origin:50% 100%}
[data-thema="kids"] .opening-beeld::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:230px;height:230px;transform:translate(-62%,-46%);border-radius:50%;background:radial-gradient(circle,rgba(198,244,50,.55),rgba(198,244,50,0) 68%)}
@media (min-width:430px){ [data-thema="kids"] .opening-beeld{height:200px} }
@media (min-width:760px){
  [data-thema="kids"] .opening{padding:24px 0 96px}
  [data-thema="kids"] .opening.met-beeld .opening-rij{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px}
  [data-thema="kids"] .opening-beeld{height:min(620px,72vh);padding-right:0;justify-content:flex-start;padding-left:4%}
  [data-thema="kids"] .opening-beeld::after{left:auto;right:0;width:36%;height:52%}
  [data-thema="kids"] .opening-beeld::before{width:520px;height:520px;transform:translate(-58%,-50%)}
  [data-thema="kids"] .opening .lead{font-size:20px;padding:16px 20px}
  [data-thema="kids"] .opening .label{font-size:13px}
  [data-thema="kids"] .opening::before{background:
    url(/beeld/kids/stickers/ster-sticker.svg) left 46% top 30px/72px no-repeat,
    url(/beeld/kids/stickers/bliksem-sticker.svg) left 2% bottom 12%/64px no-repeat,
    url(/beeld/kids/stickers/hart-sticker.svg) right 3% top 18%/56px no-repeat,
    url(/beeld/kids/stickers/bal-sticker.svg) left 49% bottom 10%/62px no-repeat,
    radial-gradient(rgba(255,255,255,.22) 1.6px,transparent 1.8px) 0 0/26px 26px}
  [data-thema="kids"] .opening::after{background:url(/beeld/kids/stickers/confetti.svg) center top/760px repeat-x;opacity:.45}
}

/* geruststelling: stickers die over de rand van de opening plakken */
[data-thema="kids"] .geruststelling{position:relative;z-index:2;margin-top:-30px;padding-bottom:16px}
[data-thema="kids"] .gerust-lijst li{border-width:3px;box-shadow:3px 3px 0 var(--kids-night);font-weight:800;border-radius:16px}
[data-thema="kids"] .gerust-lijst li:nth-child(odd){transform:rotate(-1.2deg)}
[data-thema="kids"] .gerust-lijst li:nth-child(even){transform:rotate(1deg)}
[data-thema="kids"] .gerust-lijst li:nth-child(5n+1){--bal-kleur:var(--kids-bubblegum)}
[data-thema="kids"] .gerust-lijst li:nth-child(5n+2){--bal-kleur:var(--kids-ultraviolet)}
[data-thema="kids"] .gerust-lijst li:nth-child(5n+3){--bal-kleur:var(--kids-tangerine)}
[data-thema="kids"] .gerust-lijst li:nth-child(5n+4){--bal-kleur:#8DB51A}
[data-thema="kids"] .gerust-lijst li:nth-child(5n){--bal-kleur:var(--kids-bubblegum)}
[data-thema="kids"] .gerust-lijst .balletje{width:22px;height:22px;box-shadow:0 0 0 2px var(--kids-night)}
[data-thema="kids"] .gerust-lijst li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center}
@media (min-width:760px){ [data-thema="kids"] .gerust-lijst{grid-template-columns:repeat(5,1fr)} [data-thema="kids"] .gerust-lijst li:last-child:nth-child(odd){grid-column:auto;justify-self:stretch} }

/* ---------- 4. blokken ---------- */
/* feiten: witte sticker met limoen schaduw */
[data-thema="kids"] .feiten{border-radius:26px;box-shadow:8px 8px 0 var(--kids-lime),8px 8px 0 3px var(--kids-night);position:relative}
[data-thema="kids"] .feiten .label{display:inline-block;background:var(--kids-bubblegum);color:var(--kids-night);border:2px solid var(--kids-night);border-radius:999px;padding:4px 12px;font-family:var(--letter-tekst);font-size:13px}
[data-thema="kids"] .feiten::after{content:"";position:absolute;right:-14px;top:-22px;width:58px;height:58px;background:url(/beeld/kids/stickers/ster-sticker.svg) center/contain no-repeat;transform:rotate(12deg)}

/* mini-tv: nachtblok met stippen, tv met wit sticker-kader */
[data-thema="kids"] .blok-minitv{position:relative;overflow:hidden;background-color:var(--kids-night);color:var(--kids-white);
  --tekst:var(--kids-white);--tekst-zacht:#E3D3F2;--rand:var(--kids-white);--focus:var(--kids-lime);--knop-rand:var(--kids-night);--knop-schaduw:var(--kids-lime);--knop2-tekst:var(--kids-white);--knop2-rand:var(--kids-white)}
[data-thema="kids"] .blok-minitv::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.09) 1.5px,transparent 1.7px) 0 0/24px 24px,radial-gradient(circle at 90% 10%,rgba(123,44,255,.55),transparent 45%),radial-gradient(circle at 0% 100%,rgba(255,46,147,.4),transparent 40%)}
[data-thema="kids"] .blok-minitv .wrap{position:relative}
[data-thema="kids"] .blok-minitv h2{color:var(--kids-lime)}
[data-thema="kids"] .tv{border:3px solid var(--kids-night);box-shadow:8px 8px 0 var(--kids-lime),8px 8px 0 3px var(--kids-night);border-radius:24px}
[data-thema="kids"] .scherm::before{content:"LIVE \00B7  BINGO BINGLEY";position:absolute;z-index:1;right:3cqw;bottom:auto;top:1.6cqw;font:800 clamp(9px,1.9cqw,13px)/1 var(--letter-tekst);letter-spacing:.1em;background:var(--kids-bubblegum);color:var(--kids-white);border-radius:99px;padding:.5em .9em}
@container (max-width:559px){ [data-thema="kids"] .scherm::before{display:none} }
[data-thema="kids"] .tv-wolk{border:.5cqw solid var(--kids-night);box-shadow:.8cqw .8cqw 0 var(--kids-night);border-radius:2.6cqw}
[data-thema="kids"] .tv-bal{box-shadow:0 0 0 1cqw rgba(255,255,255,.12),0 1.6cqw 0 rgba(0,0,0,.35)}
[data-thema="kids"] .tv-bord .tv-bord-l{background:var(--kids-white);color:var(--kids-night);border-radius:.8cqw}
[data-thema="kids"] .tv-bord-rij:nth-child(1) .tv-bord-l{background:var(--kids-bubblegum)}
[data-thema="kids"] .tv-bord-rij:nth-child(2) .tv-bord-l{background:var(--kids-lime)}
[data-thema="kids"] .tv-bord-rij:nth-child(3) .tv-bord-l{background:var(--kids-tangerine)}
[data-thema="kids"] .tv-bord-rij:nth-child(4) .tv-bord-l{background:#B98CFF}
[data-thema="kids"] .tv-naam{background:var(--kids-lime);color:var(--kids-night);font-family:var(--letter-kop);font-weight:400;border-color:var(--kids-night)}
[data-thema="kids"] .tv-bingo{font-weight:400;-webkit-text-stroke:.5cqw var(--kids-night);paint-order:stroke fill}

/* stemmen en speelknoppen */
[data-thema="kids"] .stem{box-shadow:4px 4px 0 var(--kids-night)}
[data-thema="kids"] .speel{box-shadow:2px 3px 0 var(--kids-night)}
[data-thema="kids"] .stem-wie{color:var(--tekst)}
[data-thema="kids"] .achter-vlak{background:var(--kids-white)}

/* presentatoren: drie gekleurde stickerkaarten, het figuurtje springt boven de kaart uit */
[data-thema="kids"] .personen{gap:56px 24px;margin-top:40px}
[data-thema="kids"] .persoon{position:relative;padding-top:0;--tekst-zacht:var(--kids-night);border-radius:26px}
[data-thema="kids"] .persoon[data-spreker="bella"]{background:var(--kids-bubblegum)}
[data-thema="kids"] .persoon[data-spreker="bingley"]{background:var(--kids-lime)}
[data-thema="kids"] .persoon[data-spreker="omroeper"]{background:var(--kids-tangerine)}
[data-thema="kids"] .persoon-beeld{width:auto;height:250px;margin:-44px auto 4px;object-fit:contain;border-radius:0;filter:drop-shadow(0 5px 0 rgba(22,9,31,.3))}
[data-thema="kids"] .persoon .label{justify-self:start;background:var(--kids-white);border:2px solid var(--kids-night);border-radius:999px;padding:4px 12px;font-size:12px;letter-spacing:.1em}
[data-thema="kids"] .persoon > p:not(.label){color:var(--kids-night);font-weight:600}
[data-thema="kids"] .persoon .stem{background:var(--kids-white);border-width:3px}
[data-thema="kids"] .blok-presentatoren .blok-kop{margin-bottom:60px}
@media (min-width:760px){ [data-thema="kids"] .personen{grid-template-columns:repeat(3,1fr)} [data-thema="kids"] .persoon-beeld{height:300px;margin-top:-60px} [data-thema="kids"] .blok-presentatoren .blok-kop{margin-bottom:80px} }

/* grappen: stickers die net niet recht hangen */
[data-thema="kids"] .grap:nth-child(3n+1) .stem{transform:rotate(-1deg);box-shadow:5px 5px 0 var(--kids-bubblegum),5px 5px 0 3px var(--kids-night)}
[data-thema="kids"] .grap:nth-child(3n+2) .stem{transform:rotate(.8deg);box-shadow:5px 5px 0 var(--kids-lime),5px 5px 0 3px var(--kids-night)}
[data-thema="kids"] .grap:nth-child(3n) .stem{transform:rotate(-.5deg);box-shadow:5px 5px 0 var(--kids-tangerine),5px 5px 0 3px var(--kids-night)}

/* tekstblokken met een eigen vorm: het verloop van het feest als tijdlijn, "For grown-ups" als vier kaartjes */
[data-thema="kids"] #how-it-goes .lees{counter-reset:stap;display:grid;gap:14px}
[data-thema="kids"] #how-it-goes .lees > *{max-width:860px}
[data-thema="kids"] #how-it-goes h2{margin-bottom:10px}
[data-thema="kids"] #how-it-goes p{counter-increment:stap;position:relative;margin:0;background:var(--kids-white);border:3px solid var(--kids-night);border-radius:20px;padding:16px 18px 16px 70px;box-shadow:4px 4px 0 var(--kids-night);min-height:72px}
[data-thema="kids"] #how-it-goes p::before{content:counter(stap);position:absolute;left:14px;top:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:400 22px/1 var(--letter-nummer);color:var(--kids-night);background:radial-gradient(circle,var(--kids-white) 0 46%,var(--kids-lime) 48%);box-shadow:0 0 0 3px var(--kids-night)}
[data-thema="kids"] #how-it-goes p:nth-of-type(2)::before{background:radial-gradient(circle,var(--kids-white) 0 46%,var(--kids-bubblegum) 48%)}
[data-thema="kids"] #how-it-goes p:nth-of-type(3)::before{background:radial-gradient(circle,var(--kids-white) 0 46%,var(--kids-tangerine) 48%)}
[data-thema="kids"] #how-it-goes p:nth-of-type(4)::before{background:radial-gradient(circle,var(--kids-white) 0 46%,#B98CFF 48%)}
[data-thema="kids"] #how-it-goes p:last-of-type{background:var(--kids-lime)}
[data-thema="kids"] #how-it-goes p:last-of-type::before{content:"";background:url(/beeld/kids/stickers/ster-sticker.svg) center/contain no-repeat;box-shadow:none}
[data-thema="kids"] #how-it-goes em,[data-thema="kids"] #for-grown-ups em{font-style:normal;font-weight:800;display:block;font-size:1.08em}
@media (min-width:760px){ [data-thema="kids"] #how-it-goes p{padding:20px 24px 20px 84px} [data-thema="kids"] #how-it-goes p::before{left:20px;top:18px;width:46px;height:46px} }

[data-thema="kids"] #for-grown-ups{background:#F3E9FF;border-top:3px solid var(--kids-night);border-bottom:3px solid var(--kids-night)}
[data-thema="kids"] #for-grown-ups .lees{display:grid;gap:14px}
[data-thema="kids"] #for-grown-ups .lees > *{max-width:none}
[data-thema="kids"] #for-grown-ups h2{margin-bottom:6px}
[data-thema="kids"] #for-grown-ups p{margin:0;background:var(--kids-white);border:3px solid var(--kids-night);border-radius:20px;padding:18px 20px;font-weight:500}
@media (min-width:760px){ [data-thema="kids"] #for-grown-ups .lees{grid-template-columns:1fr 1fr;gap:20px} [data-thema="kids"] #for-grown-ups h2{grid-column:1/-1} }

/* de muziek: paars blok met een equalizer, zonder titels of hoesjes */
[data-thema="kids"] #music{background:var(--kids-ultraviolet);color:var(--kids-white);--tekst:var(--kids-white);--tekst-zacht:var(--kids-white);--link:var(--kids-lime);--focus:var(--kids-lime)}
[data-thema="kids"] #music h2{display:flex;align-items:flex-end;gap:16px}
[data-thema="kids"] #music h2::after{content:"";flex:none;width:56px;height:40px;background:
  linear-gradient(var(--kids-lime),var(--kids-lime)) 0 100%/10px 60% no-repeat,
  linear-gradient(var(--kids-bubblegum),var(--kids-bubblegum)) 15px 100%/10px 100% no-repeat,
  linear-gradient(var(--kids-tangerine),var(--kids-tangerine)) 30px 100%/10px 45% no-repeat,
  linear-gradient(var(--kids-white),var(--kids-white)) 45px 100%/10px 80% no-repeat;animation:kids-eq .9s ease-in-out infinite alternate}

/* kaartvoorbeeld: als het kaartje van het bord */
[data-thema="kids"] .bkaart{transform:rotate(1.5deg);box-shadow:8px 8px 0 var(--kids-ultraviolet),8px 8px 0 3px var(--kids-night)}
[data-thema="kids"] .bkaart-naam{font-weight:400}
[data-thema="kids"] .bkaart-letters span{font-weight:400}
[data-thema="kids"] .bkaart-rij span{font-weight:400;border:2px solid var(--kids-night);border-radius:8px}
[data-thema="kids"] .bkaart-rij .vrij{font-weight:800}

/* prijs */
[data-thema="kids"] .blok-prijs .prijzen{max-width:720px}
[data-thema="kids"] .blok-prijs .prijs-kolom{box-shadow:8px 8px 0 var(--kids-lime);border-color:var(--kids-white)}
[data-thema="kids"] .blok-prijs .bedrag b{font-weight:400;letter-spacing:0}
[data-thema="kids"] .blok-prijs h3{color:var(--kids-lime)}

/* vragen */
[data-thema="kids"] .vraag{box-shadow:4px 4px 0 var(--kids-night)}
[data-thema="kids"] .vraag summary{font-weight:400;font-size:20px}
[data-thema="kids"] .vraag[open]{background:#FFE3F1;--tekst-zacht:var(--kids-night)}

/* slot: bubblegum met het platte duo */
[data-thema="kids"] .slot{position:relative;overflow:hidden}
[data-thema="kids"] .slot h2{font-size:clamp(2.4rem,10vw,4.4rem)}
[data-thema="kids"] .slot::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.28) 1.5px,transparent 1.7px) 0 0/22px 22px}
[data-thema="kids"] .slot .wrap{position:relative}
@media (min-width:1080px){
  [data-thema="kids"] .slot-rij{grid-template-columns:auto 1fr auto}
  [data-thema="kids"] .slot-rij::before{content:"";width:150px;height:216px;background:url(/beeld/kids/duo-plat-320.webp) center bottom/contain no-repeat;margin:-30px 0 -84px;animation:kids-wiebel 4s ease-in-out infinite;transform-origin:50% 100%}
}

/* versiering op brede schermen, waar naast de tekst ruimte over is (alleen beeld, geen tekst) */
@media (min-width:1080px){
  [data-thema="kids"] .blok-feiten .wrap,[data-thema="kids"] #how-it-goes .wrap,[data-thema="kids"] .blok-vragen .wrap{position:relative}
  [data-thema="kids"] .blok-feiten .wrap::after{content:"";position:absolute;right:56px;top:50%;margin-top:-166px;width:230px;height:332px;background:url(/beeld/kids/duo-plat-320.webp) center/contain no-repeat;animation:kids-wiebel 4.4s ease-in-out infinite}
  [data-thema="kids"] #how-it-goes .wrap::after{content:"";position:absolute;right:40px;top:110px;width:250px;height:313px;border:3px solid var(--kids-night);border-radius:22px;transform:rotate(4deg);box-shadow:8px 8px 0 var(--kids-bubblegum),8px 8px 0 3px var(--kids-night);background:url(/beeld/kids/tegel-4x5-640.webp) center/cover no-repeat}
  [data-thema="kids"] .blok-vragen .wrap::after{content:"";position:absolute;right:60px;top:120px;width:300px;height:300px;background:url(/beeld/kids/bella-gezicht-290.webp) right 0 top 0/170px no-repeat,url(/beeld/kids/bingley-gezicht-280.webp) left 0 bottom 0/170px no-repeat;animation:kids-wiebel 5s ease-in-out infinite}
}

/* ---------- 5. Freeze! ---------- */
[data-thema="kids"] .kids-freeze{position:relative;overflow:hidden}
[data-thema="kids"] .kids-freeze-rij{display:grid;gap:26px}
[data-thema="kids"] .kids-freeze h2{font-size:clamp(3rem,15vw,6.4rem);color:var(--kids-white);-webkit-text-stroke:2px var(--kids-night);paint-order:stroke fill;text-shadow:0 5px 0 var(--kids-night)}
[data-thema="kids"] .kids-freeze .blok-kop{margin-bottom:0}
[data-thema="kids"] .kids-freeze .blok-kop p{color:var(--kids-night);font-weight:600}
[data-thema="kids"] .kids-freeze-bediening{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
[data-thema="kids"] .kids-freeze .knop{--knop:var(--kids-lime);--knop-tekst:var(--kids-night);--knop-schaduw:var(--kids-night)}
[data-thema="kids"] .kids-freeze .knop-tweede{background:var(--kids-white);color:var(--kids-night);box-shadow:4px 4px 0 var(--kids-night)}
[data-thema="kids"] .kids-freeze-nu{font-family:var(--letter-kop);font-weight:400;font-size:28px;min-height:64px;padding:.45em 1.3em;background:var(--kids-white)!important;color:var(--kids-night);animation:kids-ring .47s ease-in-out infinite alternate}
[data-thema="kids"] .kids-podium{position:relative;isolation:isolate;container-type:inline-size;border:3px solid var(--kids-night);border-radius:28px;overflow:hidden;background:var(--kids-night);box-shadow:8px 8px 0 var(--kids-lime),8px 8px 0 3px var(--kids-night);aspect-ratio:3/2}
[data-thema="kids"] .kids-podium-kamer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transition:filter .25s}
[data-thema="kids"] .kids-danser{position:absolute;left:1%;bottom:-3%;height:96%;width:auto;filter:drop-shadow(0 6px 0 rgba(22,9,31,.4));transform-origin:50% 100%}
[data-thema="kids"] .kids-sticker{position:absolute;width:13cqw;height:auto}
[data-thema="kids"] .kids-s-ster{right:3%;top:4%}
[data-thema="kids"] .kids-s-bal{left:32%;top:5%;width:10cqw;animation-delay:-.8s}
[data-thema="kids"] .kids-s-hart{right:30%;top:30%;width:9cqw;animation-delay:-1.6s}
[data-thema="kids"] .kids-podium-wolk{position:absolute;z-index:2;left:36%;right:3%;bottom:4%;margin:0;background:var(--kids-white);color:var(--kids-night);border:3px solid var(--kids-night);border-radius:16px;padding:8px 12px;box-shadow:4px 4px 0 var(--kids-night);font-weight:700;font-size:clamp(14px,3.6cqw,20px);line-height:1.3}
@container (max-width:420px){ [data-thema="kids"] .kids-podium-wolk{left:40%;font-size:13px;padding:6px 9px;line-height:1.25} }
[data-thema="kids"] .kids-podium-wolk b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--kids-ultraviolet)}
[data-thema="kids"] .kids-podium-wolk.nieuw{animation:wolk .3s ease-out}
[data-thema="kids"] .kids-ijs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .15s;
  background:radial-gradient(circle,rgba(190,240,255,.35),rgba(120,200,255,.25) 60%,rgba(255,255,255,.55));box-shadow:inset 0 0 0 1.6cqw rgba(255,255,255,.8),inset 0 0 6cqw rgba(140,210,255,.9)}
[data-thema="kids"] .kids-ijs span{font:400 clamp(44px,17cqw,120px)/1 var(--letter-kop);color:#DFF6FF;-webkit-text-stroke:.9cqw var(--kids-night);paint-order:stroke fill;text-shadow:0 1.2cqw 0 var(--kids-night);transform:rotate(-6deg) scale(.6);transition:transform .25s cubic-bezier(.2,1.6,.4,1);margin-top:-14cqw}
[data-thema="kids"] .kids-podium[data-stand="freeze"] .kids-ijs{opacity:1}
[data-thema="kids"] .kids-podium[data-stand="freeze"] .kids-ijs span{transform:rotate(-6deg) scale(1)}
[data-thema="kids"] .kids-podium[data-stand="freeze"] .kids-podium-kamer{filter:saturate(.35) brightness(1.08) hue-rotate(-20deg)}
[data-thema="kids"] .kids-podium[data-stand="dans"] .kids-podium-kamer{animation:kids-beat .47s ease-in-out infinite alternate}
[data-thema="kids"] .kids-freeze-stemmen{margin-top:32px}
[data-thema="kids"] .kids-freeze .stem{background:var(--kids-white);color:var(--kids-night)}
@media (min-width:760px){
  [data-thema="kids"] .kids-freeze-rij{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:48px}
  [data-thema="kids"] .kids-podium-wolk{font-size:clamp(15px,2.6cqw,20px);padding:12px 16px}
}

/* ---------- 6. Hear your kid's name ---------- */
[data-thema="kids"] .kids-namen-rij{display:grid;gap:4px}
[data-thema="kids"] .kids-namen{display:grid;gap:24px}
[data-thema="kids"] .kids-taart{position:relative;display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:end;background:var(--kids-verloop);border:3px solid var(--kids-night);border-radius:26px;padding:14px 14px 0;box-shadow:6px 6px 0 var(--kids-night);overflow:hidden;min-height:170px}
[data-thema="kids"] .kids-taart::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(/beeld/kids/stickers/confetti.svg) center/420px repeat;opacity:0}
[data-thema="kids"] .kids-taart.knal::after{animation:kids-confetti 1.1s ease-out}
[data-thema="kids"] .kids-taart-omroeper{width:92px;height:auto;align-self:end;filter:drop-shadow(0 4px 0 rgba(22,9,31,.35))}
[data-thema="kids"] .kids-taart-tekst{align-self:center;background:var(--kids-white);color:var(--kids-night);border:3px solid var(--kids-night);border-radius:18px;padding:10px 14px;margin-bottom:14px;box-shadow:4px 4px 0 var(--kids-night)}
[data-thema="kids"] .kids-taart-wie{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kids-night)}
[data-thema="kids"] .kids-taart-regel{font:400 clamp(21px,6vw,34px)/1.12 var(--letter-kop);margin-top:4px}
[data-thema="kids"] .kids-taart-regel mark{background:var(--kids-lime);color:var(--kids-night);border-radius:6px;padding:0 .04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-thema="kids"] .kids-namen-lijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
[data-thema="kids"] .kids-namen-lijst li{display:contents}
html:not(.js) [data-thema="kids"] .kids-namen-lijst{display:grid;gap:6px}
html:not(.js) [data-thema="kids"] .kids-namen-lijst li{display:list-item;margin-left:20px;font-weight:600}
[data-thema="kids"] .kids-namen.klaar .kids-naam-zin{display:none}
[data-thema="kids"] .kids-naam{min-height:48px;padding:6px 18px;border:3px solid var(--kids-night);border-radius:999px;background:var(--kids-white);color:var(--kids-night);font:400 20px/1 var(--letter-kop);cursor:pointer;box-shadow:3px 3px 0 var(--kids-night);transition:transform .08s}
[data-thema="kids"] .kids-naam:nth-child(n){transform:rotate(0)}
[data-thema="kids"] .kids-namen-lijst li:nth-child(4n+1) .kids-naam{transform:rotate(-2deg)}
[data-thema="kids"] .kids-namen-lijst li:nth-child(4n+3) .kids-naam{transform:rotate(1.5deg)}
[data-thema="kids"] .kids-naam:hover{background:#FFE3F1}
[data-thema="kids"] .kids-naam:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--kids-night)}
[data-thema="kids"] .kids-naam[aria-pressed="true"]{background:var(--kids-lime)}
[data-thema="kids"] .kids-naam[data-speelt]{animation:kids-gloed .47s ease-in-out infinite alternate}
@media (min-width:760px){
  [data-thema="kids"] .kids-namen{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px}
  [data-thema="kids"] .kids-taart{grid-template-columns:150px 1fr;min-height:260px;padding:20px 20px 0;gap:18px}
  [data-thema="kids"] .kids-taart-omroeper{width:150px}
  [data-thema="kids"] .kids-taart-tekst{padding:16px 20px;margin-bottom:24px}
}

/* ---------- 7. beweging: alles wiebelt zachtjes, danst bij een dansje en bevriest bij FREEZE ---------- */
[data-thema="kids"] .kids-sticker,[data-thema="kids"] .kids-danser{animation:kids-wiebel 3.2s ease-in-out infinite}
html.kids-danst [data-thema="kids"] .kids-sticker,html.kids-danst [data-thema="kids"] .kids-danser,
html.kids-danst [data-thema="kids"] .opening-beeld img,html.kids-danst [data-thema="kids"] .opening-beeld::after,
html.kids-danst [data-thema="kids"] .persoon-beeld,html.kids-danst [data-thema="kids"] .slot-rij::before{animation:kids-dans .47s ease-in-out infinite}
html.kids-danst [data-thema="kids"] .kids-danser{animation-duration:.94s}
html.kids-danst [data-thema="kids"] .opening::before,html.kids-danst [data-thema="kids"] .feiten::after,html.kids-danst [data-thema="kids"] .blok-feiten .wrap::after,html.kids-danst [data-thema="kids"] .blok-vragen .wrap::after{animation:kids-zweef .94s ease-in-out infinite}
html.kids-bevroren [data-thema="kids"] *,html.kids-bevroren [data-thema="kids"] *::before,html.kids-bevroren [data-thema="kids"] *::after{animation-play-state:paused!important}
html.kids-bevroren [data-thema="kids"] .kids-ijs span,html.kids-bevroren [data-thema="kids"] .kids-podium-wolk,html.kids-bevroren [data-thema="kids"] .tv-wolk{animation:none!important}

@keyframes kids-wiebel{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes kids-dans{0%{transform:rotate(-7deg) translateX(-4px)}25%{transform:rotate(5deg) translateY(-12px)}50%{transform:rotate(-5deg) translateX(5px)}75%{transform:rotate(7deg) translateY(-7px)}100%{transform:rotate(-7deg) translateX(-4px)}}
@keyframes kids-zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes kids-beat{from{transform:scale(1)}to{transform:scale(1.025)}}
@keyframes kids-gloed{from{background:var(--kids-lime)}to{background:var(--kids-white)}}
@keyframes kids-ring{from{box-shadow:5px 5px 0 var(--kids-night),0 0 0 0 rgba(198,244,50,.9)}to{box-shadow:5px 5px 0 var(--kids-night),0 0 0 10px rgba(198,244,50,0)}}
@keyframes kids-eq{from{transform:scaleY(.6)}to{transform:scaleY(1)}}
@keyframes kids-confetti{0%{opacity:1;background-position:center -60px}100%{opacity:0;background-position:center 160px}}