/* Thema bachelorette (look branding/bachelorette: Y2K roze, paars en chroom). SJABLOON van pakket A; eigenaar is nu pakket I2.
   Regels: (1) alleen rol-tokens uit basis.css deel 3 opnieuw zetten, onder [data-thema="bachelorette"];
   (2) eigen onderdelen onderaan, met klassen die beginnen met .bte-; (3) hoogstens vier letterbestanden per pagina
   (logo + Unbounded + Space Grotesk + Rye); (4) contrast tekst minstens 4,5:1, chroom nooit als tekstkleur op licht. */

[data-thema="bachelorette"]{
  --achter:var(--bte-plum); --tekst:var(--white); --tekst-zacht:var(--bte-lilac);
  --vlak:var(--bte-plum2); --vlak-tekst:var(--white); --rand:var(--bte-chrome); --schaduw:var(--bte-grape);
  --accent:var(--bte-pink); --accent-tekst:var(--bte-plum); --accent2:var(--bte-grape); --accent2-tekst:var(--white);
  --donker:#0E0320; --donker-tekst:var(--white); --donker-zacht:var(--bte-lilac); --donker-vlak:var(--bte-plum2); --donker-accent:var(--bte-pink);
  --link:var(--bte-lilac); --focus:var(--bte-chrome);
  --knop:linear-gradient(100deg,#F4F5FB 0%,#C3C7DA 22%,#FFFFFF 44%,#B5B9CF 62%,#E9EBF4 100%); --knop-tekst:var(--bte-plum); --knop-rand:var(--white); --knop-schaduw:var(--bte-pink);
  --knop2-tekst:var(--white); --knop2-rand:var(--bte-chrome);
  --letter-kop:"Unbounded",system-ui,sans-serif; --letter-tekst:"Space Grotesk",system-ui,sans-serif; --letter-knop:"Unbounded",system-ui,sans-serif;
  --letter-accent:"Rye",serif; --letter-nummer:"Unbounded",system-ui,sans-serif;
  --kop-gewicht:900; --kop-spatie:-.035em; --kop-hoogte:1; --kop-opsz:normal;
  /* logo op een inktplaatje */
  --wm-1:var(--white); --wm-2:var(--bte-pink); --wm-bal2:var(--bte-grape);
  --logo-plaat:var(--bte-plum2); --logo-plaat-rand:var(--bte-chrome); --logo-plaat-pad:6px 12px 8px;
  --tv-kast:#0E0320; --tv-schaduw:var(--bte-pink);
  --tv-scherm:linear-gradient(112deg,#5A1FD1 0 54%,#FF4FB0 54% 100%);
  --tv-bal:radial-gradient(circle at 35% 30%,#FFFFFF,#D9DCEA 45%,#8E92A8); --tv-bal-letter:var(--bte-grape); --tv-bal-tekst:var(--bte-plum);
  --tv-vak:rgba(28,6,54,.42); --tv-vak-tekst:var(--white); --tv-vak-aan:var(--bte-lilac); --tv-vak-aan-tekst:var(--bte-plum); --tv-bord-letter:var(--white);
  --tv-wolk:var(--white); --tv-wolk-tekst:var(--bte-plum); --tv-wolk-wie:var(--bte-grape);
  --tv-bingo:var(--white); --tv-bingo-tekst:var(--bte-plum);
  --kaart-kop:var(--bte-plum); --kaart-kop-tekst:var(--white); --kaart-letter:var(--bte-grape); --kaart-vak:#F1E9FF;
  --kaart-vrij:var(--bte-pink); --kaart-vrij-tekst:var(--bte-plum); --kaart-naam-letter:"Rye",serif;
}
/* Unbounded is breed: op een smalle telefoon kop compacter, anders past de kop niet op 390 (gemeten 27-10). */
@media (max-width:439px){
  [data-thema="bachelorette"] .logo{--logo-plaat-pad:4px 8px 5px;border-width:2px}
  [data-thema="bachelorette"] .kop .wm{font-size:19px}
  [data-thema="bachelorette"] .kop-knop{font-size:12px;letter-spacing:-.02em;padding:.5em .7em}
}

/* ---------- eigen onderdelen bachelorette (pakket I2): opening, mengpaneel, "The bride gets roasted", "Who wins?",
   dance break, platenbak, Nashville. Plus de look van de gedeelde blokken op deze pagina. ---------- */

/* glitter: een paar witte sterretjes, bewust weinig (uitleg.md van de look) */
body[data-thema="bachelorette"]{background-color:var(--bte-plum)}
/* glitter op een vaste laag achter alles, zodat de pagina zelf een effen kleur houdt (ook voor de contrastmeting) */
body[data-thema="bachelorette"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.55) 0 1px,transparent 2px),radial-gradient(circle at 78% 9%,rgba(255,255,255,.45) 0 1px,transparent 2px),
  radial-gradient(circle at 44% 62%,rgba(201,168,255,.5) 0 1px,transparent 2px),radial-gradient(circle at 90% 74%,rgba(255,255,255,.4) 0 1px,transparent 2px);
  background-size:420px 520px,360px 440px,500px 380px,300px 600px}
[data-thema="bachelorette"] .kop{background:transparent}
[data-thema="bachelorette"] .kop.open .hoofdmenu{background:var(--bte-plum)}
[data-thema="bachelorette"] .label{font-family:"Rye",serif;font-weight:400;letter-spacing:.04em;text-transform:none;font-size:16px;color:var(--bte-pink)}
[data-thema="bachelorette"] main h2{font-size:clamp(1.9rem,7.2vw,3.5rem)}
[data-thema="bachelorette"] #price .prijzen{max-width:760px}
[data-thema="bachelorette"] .achter-accent{--tekst-zacht:var(--bte-plum);--focus:var(--bte-plum);--rand:var(--bte-plum);
  --knop:linear-gradient(100deg,#F4F5FB 0%,#C3C7DA 22%,#FFFFFF 44%,#B5B9CF 62%,#E9EBF4 100%);--knop-tekst:var(--bte-plum);--knop-rand:var(--bte-plum);--knop-schaduw:var(--bte-plum)}

/* chromen knop met roze schaduw, met een glans die langzaam beweegt */
[data-thema="bachelorette"] .knop:not(.knop-tweede){background-color:#E4E6F0;background-size:220% 100%;background-position:0 0;font-weight:900}
[data-thema="bachelorette"] .knop-tweede{border-color:var(--bte-lilac)}
[data-thema="bachelorette"] .achter-accent .knop-tweede{border-color:var(--bte-plum)}
@media (prefers-reduced-motion:no-preference){
  [data-thema="bachelorette"] .knop:not(.knop-tweede){animation:bte-glans 5s ease-in-out infinite}
}
@keyframes bte-glans{0%,55%{background-position:0 0}80%,100%{background-position:100% 0}}

/* gedeelde blokken in deze look */
[data-thema="bachelorette"] .gerust-lijst li{background:var(--bte-plum2);border-color:rgba(217,220,234,.55);border-radius:999px;padding:10px 14px}
[data-thema="bachelorette"] .gerust-lijst li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center}
[data-thema="bachelorette"] .geruststelling .balletje{--bal-kleur:var(--bte-pink)}
[data-thema="bachelorette"] .feiten{background:var(--bte-plum2);border-color:var(--bte-chrome);box-shadow:5px 5px 0 var(--bte-pink),10px 10px 0 var(--bte-grape)}
@media (min-width:760px){ [data-thema="bachelorette"] .feiten{box-shadow:8px 8px 0 var(--bte-pink),16px 16px 0 var(--bte-grape)} }
[data-thema="bachelorette"] .scherm::before{content:"\25CF  LIVE \00B7 ROUND 2";position:absolute;z-index:2;left:3cqw;top:2.4cqw;background:linear-gradient(100deg,#F4F5FB,#C3C7DA 50%,#FFFFFF);color:var(--bte-plum);font-family:"Unbounded",sans-serif;font-weight:900;font-size:clamp(9px,1.9cqw,13px);letter-spacing:.06em;padding:.5em .9em;border-radius:999px}
[data-thema="bachelorette"] .tv{border:3px solid var(--bte-chrome)}
[data-thema="bachelorette"] .tv-wolk b{font-family:"Rye",serif;font-weight:400;letter-spacing:.02em;text-transform:none;font-size:clamp(12px,2.6cqw,17px)}
[data-thema="bachelorette"] .stem{border-color:rgba(217,220,234,.55)}
[data-thema="bachelorette"] .persoon{overflow:hidden;padding-top:0;border-color:var(--bte-chrome)}
[data-thema="bachelorette"] .persoon[data-spreker="bella"]{box-shadow:8px 8px 0 var(--bte-pink)}
[data-thema="bachelorette"] .persoon[data-spreker="bingley"]{box-shadow:8px 8px 0 var(--bte-grape)}
[data-thema="bachelorette"] .persoon-beeld{width:calc(100% + 44px);max-width:none;margin:0 -22px 6px;height:300px;object-fit:cover;object-position:50% 8%;border-radius:0;background:linear-gradient(180deg,#FF4FB0,#C9A8FF)}
[data-thema="bachelorette"] .persoon[data-spreker="bingley"] .persoon-beeld{background:linear-gradient(180deg,#C9A8FF,#7B2FF7)}
[data-thema="bachelorette"] .persoon h3{font-family:"Rye",serif;font-weight:400;letter-spacing:0;color:var(--white)}
[data-thema="bachelorette"] .persoon[data-spreker="bella"] .label{color:var(--bte-pink)}
[data-thema="bachelorette"] .persoon[data-spreker="bingley"] .label{color:var(--bte-lilac)}
@media (min-width:760px){ [data-thema="bachelorette"] .persoon-beeld{width:calc(100% + 60px);margin:0 -30px 8px;height:380px} }
[data-thema="bachelorette"] .bkaart{box-shadow:8px 8px 0 var(--bte-pink);border-color:var(--bte-chrome)}
[data-thema="bachelorette"] .bkaart-naam{font-weight:400}
[data-thema="bachelorette"] .vraag{border-color:rgba(217,220,234,.55)}
[data-thema="bachelorette"] .vraag summary{font-size:17px;font-weight:700}
[data-thema="bachelorette"] .prijs-kolom{border-color:var(--bte-chrome);box-shadow:8px 8px 0 var(--bte-pink)}
[data-thema="bachelorette"] .bedrag b{color:var(--bte-pink)}
[data-thema="bachelorette"] .slot{background:linear-gradient(90deg,var(--bte-pink) 0 50%,var(--bte-lilac) 50% 100%)}
[data-thema="bachelorette"] .slot h2{font-size:clamp(2.2rem,9vw,4.4rem)}

/* stappen: "How the jokes about her get written" en "How the night goes" als genummerde kaartjes en tijdlijn */
[data-thema="bachelorette"] #personal .lees > p,[data-thema="bachelorette"] #how-it-goes .lees > p{position:relative;max-width:780px;padding:16px 18px 16px 64px;background:var(--bte-plum);border:2px solid rgba(217,220,234,.4);border-radius:18px;counter-increment:bte-stap}
[data-thema="bachelorette"] #personal .lees,[data-thema="bachelorette"] #how-it-goes .lees{counter-reset:bte-stap}
[data-thema="bachelorette"] #personal .lees > p::before,[data-thema="bachelorette"] #how-it-goes .lees > p::before{content:counter(bte-stap);position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#D9DCEA 50%,#9A9EB6);color:var(--bte-plum);font-family:"Unbounded",sans-serif;font-weight:900;font-size:15px}
[data-thema="bachelorette"] #personal .lees > p+p,[data-thema="bachelorette"] #how-it-goes .lees > p+p{margin-top:12px}
[data-thema="bachelorette"] #personal em,[data-thema="bachelorette"] #how-it-goes em{display:block;font-style:normal;font-family:"Unbounded",sans-serif;font-weight:900;font-size:17px;color:var(--bte-pink);margin-bottom:2px}
[data-thema="bachelorette"] #how-it-goes .lees > p:last-child{background:transparent;border-style:dashed}
[data-thema="bachelorette"] #how-it-goes .lees > p:last-child em{display:inline;font-family:inherit;font-weight:700;font-size:inherit;color:var(--white)}
@media (min-width:1080px){
  [data-thema="bachelorette"] #personal .lees,[data-thema="bachelorette"] #how-it-goes .lees{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  [data-thema="bachelorette"] #how-it-goes .lees{grid-template-columns:repeat(4,1fr)}
  [data-thema="bachelorette"] #personal .lees > h2,[data-thema="bachelorette"] #how-it-goes .lees > h2,[data-thema="bachelorette"] #how-it-goes .lees > p:last-child{grid-column:1/-1}
  [data-thema="bachelorette"] #personal .lees > p,[data-thema="bachelorette"] #personal .lees > p+p,[data-thema="bachelorette"] #how-it-goes .lees > p,[data-thema="bachelorette"] #how-it-goes .lees > p+p{margin:0;max-width:none}
  [data-thema="bachelorette"] #how-it-goes .lees > p:not(:last-child){padding:62px 20px 20px}
}

/* ---------- opening: tweedeling roze en lila zoals op het bord, MC Bella links, DJ Bingley rechts.
   Het podium is een eigen blok vóór het gewone openingsblok (dat blijft de H1 houden). Op de telefoon staat het
   erboven, vanaf 760 breed rechts ernaast (absoluut in main geplaatst). ---------- */
[data-thema="bachelorette"] main{position:relative}
.bte-podium-blok{padding:6px 0 0}
.bte-podium{position:relative;height:196px;border-radius:24px;overflow:hidden;border:3px solid var(--bte-chrome);background:linear-gradient(90deg,var(--bte-pink) 0 50%,var(--bte-lilac) 50% 100%);box-shadow:6px 6px 0 var(--bte-grape)}
.bte-podium-mc,.bte-podium-dj{position:absolute;top:6px;font-family:"Rye",serif;font-size:84px;line-height:1;color:var(--bte-plum2)}
.bte-podium-mc{left:10px}
.bte-podium-dj{right:10px;color:#2B0C6B}
.bte-podium picture{position:absolute;top:36px;width:44%}
.bte-podium img{width:100%;height:auto;display:block}
.bte-podium-bella{left:0}
.bte-podium-bingley{right:-1%;top:32px}
.bte-naamkaartje{position:absolute;z-index:2;font-family:"Rye",serif;font-size:13px;background:var(--bte-plum);color:var(--white);padding:4px 10px 5px;border-radius:8px;border:2px solid var(--bte-chrome)}
.bte-naamkaartje-bella{left:10px;bottom:12px;transform:rotate(-4deg)}
.bte-naamkaartje-bingley{right:10px;bottom:12px;transform:rotate(3deg)}
.bte-avondlabel{display:none}
.bte-ster{position:absolute;z-index:1;width:18px;height:18px;background:var(--white);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.bte-ster-1{left:47%;top:16px}.bte-ster-2{left:36%;top:120px;width:12px;height:12px}.bte-ster-3{right:36%;top:84px;width:14px;height:14px}
@media (prefers-reduced-motion:no-preference){ .bte-ster{animation:bte-twinkel 2.6s ease-in-out infinite} .bte-ster-2{animation-delay:-.9s} .bte-ster-3{animation-delay:-1.7s} }
@keyframes bte-twinkel{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.45) rotate(45deg)}}
[data-thema="bachelorette"] .opening{padding:14px 0 36px}
@media (max-width:759px){
  [data-thema="bachelorette"] .kruimelpad ol{flex-wrap:nowrap;white-space:nowrap}
  [data-thema="bachelorette"] .kruimelpad li:last-child{min-width:0}
  [data-thema="bachelorette"] .kruimelpad [aria-current]{overflow:hidden;text-overflow:ellipsis}
  [data-thema="bachelorette"] .opening .label{font-size:14px}
  [data-thema="bachelorette"] .opening .lead{font-size:16px;line-height:1.45}
  [data-thema="bachelorette"] .opening .prijs-groot{font-size:34px}
  [data-thema="bachelorette"] .opening .knoppen{gap:12px}
}
[data-thema="bachelorette"] .opening-tekst{gap:14px}
[data-thema="bachelorette"] .opening .label{margin:0}
[data-thema="bachelorette"] .opening h1{font-size:clamp(1.8rem,8.2vw,4.6rem);max-width:14ch}
[data-thema="bachelorette"] .opening .lead{font-size:17px}
[data-thema="bachelorette"] .opening .prijs-groot{background:linear-gradient(100deg,#FFFFFF,#D9DCEA 40%,#FFFFFF 60%,#B9BDD2);-webkit-background-clip:text;background-clip:text;color:#E4E6F0}
@media (min-width:760px){
  .bte-podium-blok{position:absolute;left:0;right:0;top:0;padding:24px 0 0;pointer-events:none}
  .bte-podium-blok .wrap{display:flex;justify-content:flex-end}
  .bte-podium{pointer-events:auto;width:46%;height:min(640px,56vw);border-radius:30px;box-shadow:10px 10px 0 var(--bte-grape)}
  .bte-podium-mc,.bte-podium-dj{font-size:clamp(84px,10vw,160px);top:12px}
  .bte-podium-mc{left:4%}.bte-podium-dj{right:4%}
  .bte-podium picture{top:auto;bottom:-24%;width:62%}
  .bte-podium-bella{left:-6%}
  .bte-podium-bingley{bottom:-20%;right:-8%}
  .bte-naamkaartje{font-size:18px;padding:6px 14px 8px}
  .bte-naamkaartje-bella{left:5%;bottom:7%}.bte-naamkaartje-bingley{right:5%;bottom:11%}
  .bte-avondlabel{display:block;position:absolute;z-index:2;left:50%;top:30%;transform:translateX(-50%) rotate(-5deg);white-space:nowrap;font-family:"Rye",serif;font-size:clamp(14px,1.5vw,21px);background:var(--bte-plum);color:var(--white);padding:6px 16px 8px;border-radius:12px;border:2px solid var(--bte-chrome)}
  .bte-ster-1{top:6%}.bte-ster-2{top:28%;left:8%}.bte-ster-3{top:20%;right:10%}
  [data-thema="bachelorette"] .opening{padding:48px 0 64px;min-height:calc(min(640px,56vw) + 60px);display:flex;align-items:center}
  [data-thema="bachelorette"] .opening .opening-tekst{max-width:50%;gap:20px}
  [data-thema="bachelorette"] .opening .lead{font-size:20px}
}

/* ---------- mengpaneel: draaitafels, ledmeters en twee chromen schuiven ---------- */
.bte-deck{position:relative;display:grid;grid-template-columns:1fr;gap:18px;background:linear-gradient(180deg,#2A0748,#160426);border:3px solid var(--bte-chrome);border-radius:28px;padding:18px;box-shadow:8px 8px 0 var(--bte-pink),inset 0 1px 0 rgba(255,255,255,.25);--bas:.35;--bingo:.35}
.bte-deck-jog{display:none}
.bte-deck-midden{display:grid;gap:16px}
.bte-deck-scherm{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0B0218;border:2px solid rgba(217,220,234,.4);border-radius:14px;padding:10px 14px;min-height:56px}
.bte-deck-led{font-family:"Unbounded",sans-serif;font-weight:900;font-size:14px;letter-spacing:.12em;color:var(--bte-pink)}
[data-stand="bingo"] .bte-deck-led{color:var(--bte-lilac)}
.bte-deck-meters{display:flex;gap:4px;align-items:flex-end;height:34px}
.bte-deck-meters i{width:7px;border-radius:2px;background:linear-gradient(0deg,var(--bte-lilac),var(--bte-pink));height:calc(15% + 85% * var(--bas) * var(--f,1));opacity:.9}
.bte-deck-meters i:nth-child(even){background:linear-gradient(0deg,var(--bte-grape),var(--bte-lilac));height:calc(15% + 85% * var(--bingo) * var(--f,1))}
.bte-deck-meters i:nth-child(3n){--f:.7}.bte-deck-meters i:nth-child(4n){--f:.85}.bte-deck-meters i:nth-child(5n){--f:.55}
@media (prefers-reduced-motion:no-preference){ .bte-deck.klaar .bte-deck-meters i{animation:eq .5s ease-in-out infinite alternate;transform-origin:bottom} .bte-deck-meters i:nth-child(2n){animation-delay:-.2s}.bte-deck-meters i:nth-child(3n){animation-delay:-.35s} }
.bte-deck-schuiven{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bte-schuif{display:grid;justify-items:center;gap:10px;background:rgba(255,255,255,.04);border:2px solid rgba(217,220,234,.25);border-radius:18px;padding:14px 8px}
.bte-schuif label{display:grid;text-align:center;gap:2px;font-weight:700;font-size:14px;color:var(--bte-lilac)}
.bte-schuif label b{font-family:"Unbounded",sans-serif;font-weight:900;font-size:15px;color:var(--white)}
.bte-schuif-bas label b{color:var(--bte-pink)}
/* staande schuif: een liggende input in een staand vak, gedraaid; zo is de maat in elke browser gelijk */
.bte-schuif-baan{position:relative;width:64px;height:200px}
.bte-schuif-baan::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:8px;margin-left:-4px;border-radius:4px;background:#05010C;box-shadow:inset 0 0 0 1px rgba(217,220,234,.35)}
.bte-schuif-baan::after{content:"";position:absolute;left:8px;right:8px;top:6px;bottom:6px;background:repeating-linear-gradient(180deg,rgba(217,220,234,.45) 0 2px,transparent 2px 20px);clip-path:polygon(0 0,22% 0,22% 100%,0 100%,0 0,78% 0,100% 0,100% 100%,78% 100%,78% 0);pointer-events:none}
.bte-schuif input{position:absolute;left:50%;top:50%;width:200px;height:64px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);background:transparent;-webkit-appearance:none;appearance:none;cursor:grab;z-index:1}
.bte-schuif input::-webkit-slider-runnable-track{height:64px;background:transparent}
.bte-schuif input::-moz-range-track{height:64px;background:transparent}
.bte-schuif input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:56px;margin-top:4px;border-radius:8px;border:2px solid #FFFFFF;background:linear-gradient(90deg,#9A9EB6,#FFFFFF 30%,#D9DCEA 50%,#FFFFFF 70%,#9A9EB6);box-shadow:-4px 0 0 var(--bte-pink)}
.bte-schuif input::-moz-range-thumb{width:30px;height:56px;border-radius:8px;border:2px solid #FFFFFF;background:linear-gradient(90deg,#9A9EB6,#FFFFFF 30%,#D9DCEA 50%,#FFFFFF 70%,#9A9EB6);box-shadow:-4px 0 0 var(--bte-pink)}
.bte-schuif-bingo input::-webkit-slider-thumb{box-shadow:-4px 0 0 var(--bte-lilac)}
.bte-schuif-bingo input::-moz-range-thumb{box-shadow:-4px 0 0 var(--bte-lilac)}
.bte-schuif input:focus-visible{outline:none}
.bte-schuif:focus-within{border-color:var(--white)}
.bte-deck-wolk{display:grid;gap:4px;background:var(--white);color:var(--bte-plum);border-radius:18px;padding:14px 18px;font-weight:700;font-size:18px;line-height:1.35;box-shadow:5px 5px 0 var(--bte-pink)}
.bte-deck-wolk[data-kant="bingo"]{box-shadow:5px 5px 0 var(--bte-grape)}
.bte-deck-wolk b{font-family:"Rye",serif;font-weight:400;color:var(--bte-grape);font-size:16px}
.bte-deck-wolk.nieuw{animation:wolk .3s ease-out}
.bte-deck-tekst{margin-top:28px}
@media (prefers-reduced-motion:no-preference){ [data-stand="bas"] .bte-deck-jog i{animation:bte-draai 1.1s linear infinite} [data-stand="bingo"] .bte-deck-jog i{animation:bte-draai 5s linear infinite} }
@keyframes bte-draai{to{transform:rotate(360deg)}}
@media (min-width:760px){
  .bte-deck{grid-template-columns:1fr minmax(300px,380px) 1fr;align-items:center;gap:28px;padding:30px}
  .bte-deck-jog{display:block;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#1A1A24 0 3px,#2C2C3A 3px 5px);border:6px solid #C3C7DA;box-shadow:0 0 0 3px var(--bte-plum),0 0 0 6px var(--bte-chrome),inset 0 0 30px rgba(0,0,0,.6);position:relative;max-width:300px;width:100%;justify-self:center}
  .bte-deck-jog i{position:absolute;inset:0;border-radius:50%;display:block;background:radial-gradient(circle,var(--bte-pink) 0 17%,var(--bte-plum) 17.5% 19%,transparent 19.5%),conic-gradient(from 0deg,transparent 0 80deg,rgba(255,255,255,.18) 90deg,transparent 100deg 260deg,rgba(255,255,255,.12) 270deg,transparent 280deg)}
  .bte-deck-jog-r i{background:radial-gradient(circle,var(--bte-lilac) 0 17%,var(--bte-plum) 17.5% 19%,transparent 19.5%),conic-gradient(from 0deg,transparent 0 80deg,rgba(255,255,255,.18) 90deg,transparent 100deg 260deg,rgba(255,255,255,.12) 270deg,transparent 280deg)}
  .bte-deck-wolk{grid-column:1/-1}
}

/* ---------- roast: pittigheidsschakelaar en grappen als getrokken ballen ---------- */
.bte-pit,.bte-keuze{border:0;margin:0 0 22px;padding:0;min-width:0}
.bte-pit legend,.bte-keuze legend{font-weight:800;margin-bottom:10px;padding:0}
.bte-pit-knoppen,.bte-keuze-knoppen{display:inline-flex;flex-wrap:wrap;gap:6px;background:#0B0218;border:2px solid var(--bte-chrome);border-radius:999px;padding:5px}
.bte-pit-optie,.bte-keuze-knoppen label{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font-weight:800;cursor:pointer}
.bte-pit-optie input,.bte-keuze-knoppen input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bte-pit-optie:has(input:checked),.bte-keuze-knoppen label:has(input:checked){background:var(--bte-pink);color:var(--bte-plum)}
.bte-pit-optie:has(input:focus-visible),.bte-keuze-knoppen label:has(input:focus-visible){outline:3px solid var(--white);outline-offset:2px}
.bte-pepers{display:inline-block;height:14px;width:calc(11px * var(--n,1));background:radial-gradient(ellipse 4px 6.5px at 5px 50%,currentColor 96%,transparent 100%) repeat-x;background-size:11px 100%}
.bte-pepers-2{--n:2}.bte-pepers-3{--n:3}
.bte-pit-noot{margin:-8px 0 20px;font-weight:700;color:var(--bte-lilac)}
.bte-roast .bte-grap{position:relative}
.bte-grap.met-bal .stem{padding-top:52px}
.bte-grap-bal{position:absolute;z-index:1;right:16px;top:-22px;width:66px;height:66px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:.9;
  background:radial-gradient(circle at 50% 50%,var(--bte-pink) 0 47%,transparent 48%),radial-gradient(circle at 35% 30%,#FFFFFF,#D9DCEA 45%,#8E92A8);color:var(--white);font-family:"Unbounded",sans-serif;font-weight:900;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.bte-grap-bal b{font-size:10px}
.bte-grap-bal span{font-size:18px;letter-spacing:-.04em}
.bte-roast{gap:34px 20px;padding-top:18px}
[data-pit="spicy"] .bte-roast .stem{box-shadow:4px 4px 0 var(--bte-pink)}

/* ---------- Who wins? ---------- */
.bte-winnaar-rij{display:grid;gap:30px}
.bte-winnaar-tekst{display:grid;gap:14px;max-width:560px}
.bte-winnaar-tekst p:last-child{font-family:"Rye",serif;font-size:22px;color:var(--bte-pink)}
.bte-minis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bte-mini{position:relative;background:var(--white);color:var(--bte-plum);border-radius:16px;padding:10px 10px 12px;display:grid;gap:8px;box-shadow:5px 5px 0 var(--bte-grape);transition:transform .3s,opacity .3s}
.bte-mini-naam{font-weight:800;font-size:13px;text-align:center;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.bte-mini-bruid{box-shadow:5px 5px 0 var(--bte-pink)}
.bte-mini-bruid .bte-mini-naam{font-family:"Rye",serif;font-weight:400;font-size:16px}
.bte-mini-raster{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.bte-mini-raster i{aspect-ratio:1;border-radius:4px;background:#EFE7FB;display:block}
.bte-mini-raster i.x{background:radial-gradient(circle,var(--bte-pink) 0 55%,#EFE7FB 57%)}
.bte-mini-raster i.vrij{background:radial-gradient(circle,var(--bte-grape) 0 40%,#EFE7FB 42%)}
.bte-mini-raster i.nieuw{animation:knal .35s cubic-bezier(.2,1.6,.4,1)}
.bte-mini-stempel{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-12deg) scale(.4);opacity:0;font-family:"Unbounded",sans-serif;font-weight:900;font-size:22px;color:var(--white);background:var(--bte-pink);border:3px solid var(--bte-plum);border-radius:10px;padding:4px 10px;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.bte-mini.wint{transform:scale(1.04);z-index:1}
.bte-mini.wint .bte-mini-stempel{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
.bte-mini.verliest{opacity:.55}
@media (min-width:760px){ .bte-minis{grid-template-columns:repeat(4,1fr)} .bte-mini-naam{font-size:14px} }
@media (min-width:1080px){ .bte-winnaar-rij{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:56px} }

/* ---------- dance break ---------- */
.bte-dans{overflow:hidden;background:linear-gradient(90deg,var(--bte-pink) 0 50%,var(--bte-lilac) 50% 100%)}
.bte-dans-rij{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.bte-dans-midden{grid-column:1/-1;grid-row:1;display:grid;justify-items:center;gap:18px;text-align:center}
[data-thema="bachelorette"] .bte-dans h2{font-size:clamp(2.6rem,13vw,6.5rem);color:var(--bte-plum);text-shadow:4px 4px 0 var(--white)}
.bte-dans .stem{background:var(--bte-plum);color:var(--white);border-color:var(--bte-plum);text-align:left;max-width:560px;--tekst-zacht:var(--bte-lilac)}
.bte-dans-beeld img{width:100%;max-height:340px;object-fit:contain;object-position:bottom}
.bte-dans{padding-bottom:0}
.bte-discobal{width:64px;height:64px;border-radius:50%;background:repeating-linear-gradient(0deg,rgba(28,6,54,.35) 0 2px,transparent 2px 9px),repeating-linear-gradient(90deg,rgba(28,6,54,.35) 0 2px,transparent 2px 9px),radial-gradient(circle at 35% 30%,#FFFFFF,#D9DCEA 45%,#8E92A8);box-shadow:0 0 0 3px var(--bte-plum)}
@media (prefers-reduced-motion:no-preference){ .bte-discobal{animation:bte-zwaai 3s ease-in-out infinite} }
@keyframes bte-zwaai{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media (min-width:760px){
  .bte-dans-rij{grid-template-columns:1fr 1.3fr 1fr;gap:24px}
  .bte-dans-midden{grid-column:2;grid-row:1;padding-bottom:72px}
  .bte-dans-beeld img{max-height:520px}
}

/* ---------- platenbak ---------- */
.bte-muziek-rij{display:grid;gap:30px}
.bte-muziek-tekst{display:grid;gap:14px;max-width:620px}
.bte-bakken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bte-bak-knop{position:relative;width:100%;min-height:168px;display:flex;align-items:flex-end;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.bte-platen{position:absolute;left:0;right:0;top:0;height:120px;overflow:hidden}
.bte-platen i{position:absolute;left:50%;top:12px;width:96px;height:96px;margin-left:-48px;border-radius:50%;background:radial-gradient(circle,var(--bte-pink) 0 15%,#0B0218 16% 18%,#1A1A24 19%),repeating-radial-gradient(circle,#1A1A24 0 2px,#2C2C3A 2px 3px);box-shadow:0 0 0 2px rgba(217,220,234,.5);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.bte-platen i:nth-child(1){transform:translate(-26px,16px) rotate(-8deg)}
.bte-platen i:nth-child(2){transform:translate(0,20px)}
.bte-platen i:nth-child(3){transform:translate(26px,16px) rotate(8deg)}
.bte-bak-2 .bte-platen i{background:radial-gradient(circle,var(--bte-lilac) 0 15%,#0B0218 16% 18%,#1A1A24 19%),repeating-radial-gradient(circle,#1A1A24 0 2px,#2C2C3A 2px 3px)}
.bte-bak-3 .bte-platen i{background:radial-gradient(circle,#F4F5FB 0 15%,#0B0218 16% 18%,#1A1A24 19%),repeating-radial-gradient(circle,#1A1A24 0 2px,#2C2C3A 2px 3px)}
.bte-bak-4 .bte-platen i{background:radial-gradient(circle,var(--bte-grape) 0 15%,#0B0218 16% 18%,#1A1A24 19%),repeating-radial-gradient(circle,#1A1A24 0 2px,#2C2C3A 2px 3px)}
.bte-bak-label{position:relative;z-index:1;display:flex;align-items:center;width:100%;min-height:84px;padding:14px 16px;border-radius:12px 12px 18px 18px;font-family:"Unbounded",sans-serif;font-weight:900;font-size:16px;line-height:1.15;color:var(--bte-plum);background:linear-gradient(180deg,#FFFFFF,#D9DCEA);border:3px solid var(--white);box-shadow:5px 5px 0 var(--bte-pink)}
.bte-bak-2 .bte-bak-label{box-shadow:5px 5px 0 var(--bte-lilac)}
.bte-bak-3 .bte-bak-label{box-shadow:5px 5px 0 var(--white);background:linear-gradient(180deg,#FFD1EA,#FF9FD2)}
.bte-bak-4 .bte-bak-label{box-shadow:5px 5px 0 var(--bte-grape)}
.bte-bak-knop[aria-pressed="true"] .bte-platen i:nth-child(2){transform:translate(0,-6px)}
@media (prefers-reduced-motion:no-preference){ .bte-bak-knop[aria-pressed="true"] .bte-platen i:nth-child(2){animation:bte-plaat 1.6s linear .45s infinite} }
@keyframes bte-plaat{from{transform:translate(0,-6px) rotate(0)}to{transform:translate(0,-6px) rotate(360deg)}}
.bte-bak-knop:focus-visible{outline:3px solid var(--white);outline-offset:4px;border-radius:14px}
@media (min-width:760px){ .bte-bakken{grid-template-columns:repeat(4,1fr);gap:20px} .bte-bak-knop{min-height:170px} }
@media (min-width:1080px){ .bte-muziek-rij{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:56px} }

/* ---------- Nashville: het vakantiehuis met een kaartje erover ---------- */
.bte-nash-rij{display:grid}
.bte-nash-beeld img{width:100%;border-radius:22px;border:3px solid var(--bte-plum);aspect-ratio:3/2;object-fit:cover;object-position:70% 50%}
.bte-nash-kaart{position:relative;margin:-48px 12px 0;background:var(--bte-plum);color:var(--white);border:3px solid var(--bte-chrome);border-radius:22px;padding:22px 20px 24px;display:grid;gap:12px;box-shadow:6px 6px 0 var(--bte-grape);--tekst:var(--white);--tekst-zacht:var(--bte-lilac)}
.bte-nash-kaart h2{color:var(--white)}
.bte-nash-bord{justify-self:start;font-family:"Rye",serif;font-size:20px;color:var(--bte-pink);border:2px solid var(--bte-pink);border-radius:10px;padding:2px 12px 4px;text-shadow:0 0 12px rgba(255,79,176,.6);box-shadow:0 0 14px rgba(255,79,176,.35)}
@media (min-width:760px){
  .bte-nash-rij{grid-template-columns:repeat(12,1fr);align-items:center}
  .bte-nash-beeld{grid-column:4/13;grid-row:1}
  .bte-nash-kaart{grid-column:1/7;grid-row:1;margin:0;z-index:1;padding:34px}
}