/* Bingo Bingley: basisstijl.
   Opbouw: 1 letters  2 merkkleuren (hoofdmerk en de vier shows)  3 rol-tokens (wat een thema overschrijft)
   4 basis  5 kop, voet, kruimelpad  6 knoppen  7 blokken  8 onderdelen  9 vaste knop  10 print, minder beweging.
   Mobiel eerst: alles zonder media query is 390 breed; daarboven @media (min-width: 760px) en (min-width: 1080px).
   Een thema (css/thema-<show>.css) zet alleen de rol-tokens uit deel 3 opnieuw onder [data-thema="<show>"]
   en voegt zijn eigen onderdelen toe. Het logo en de bal veranderen nooit, het feest verandert alles eromheen. */

/* ---------- 1. letters (zelf gehost, alleen latin; een browser haalt alleen wat een pagina echt gebruikt) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"BB Logo";src:url(/fonts/bingley-logo.woff2) format("woff2");font-weight:800;font-display:block}
@font-face{font-family:"Bagel Fat One";src:url(/fonts/bagel-fat-one-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-latin.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-latin.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Rye";src:url(/fonts/rye-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(/fonts/yellowtail-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url(/fonts/bebas-neue-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Special Elite";src:url(/fonts/special-elite-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-latin.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Pacifico";src:url(/fonts/pacifico-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin.woff2) format("woff2");font-weight:600 800;font-display:swap}

/* ---------- 2. merkkleuren: vaste waarden uit de borden (branding/), nooit per pagina aanpassen ---------- */
:root{
  /* hoofdmerk, branding/merk/uitleg.md */
  --ink:#1D0B30; --pink:#FF3D8B; --violet:#5B2EE6; --paper:#FFF4E8; --white:#FFFFFF; --ink-soft:#4A3A5C; --ink-plum:#2B1747;
  /* kinderfeest, branding/modern/03 */
  --kids-bubblegum:#FF2E93; --kids-ultraviolet:#7B2CFF; --kids-lime:#C6F432; --kids-tangerine:#FF8A1F; --kids-night:#16091F; --kids-white:#FFFFFF;
  /* bachelorette, branding/bachelorette */
  --bte-plum:#1C0636; --bte-plum2:#2A0748; --bte-grape:#7B2FF7; --bte-pink:#FF4FB0; --bte-lilac:#C9A8FF; --bte-chrome:#D9DCEA;
  /* bachelor "Last Call at Bella's", branding/bella-latina/03 */
  --bar-red:#E2333F; --bar-amber:#E59A3A; --bar-teal:#2BA89C; --bar-mahogany:#3B2016; --bar-black:#0F0B0A; --bar-cream:#F3E8D2; --bar-denim:#6E8FB5; --bar-strawberry:#D98A57;
  /* bridal shower, branding/bridal3/09 */
  --shw-pink:#E83E8C; --shw-blush:#FBD3E0; --shw-rose:#C98B7B; --shw-cream:#FFF7F0; --shw-sky:#7FB8E8; --shw-sun:#FFD23F; --shw-berry:#6B1E45;
}

/* ---------- 3. rol-tokens: het hoofdmerk. Een thema zet deze opnieuw. ---------- */
:root{
  --achter:var(--paper); --tekst:var(--ink); --tekst-zacht:var(--ink-soft);
  --vlak:var(--white); --vlak-tekst:var(--ink); --rand:var(--ink); --schaduw:var(--ink);
  --accent:var(--pink); --accent-tekst:var(--ink); --accent2:var(--violet); --accent2-tekst:var(--white);
  --donker:var(--ink); --donker-tekst:var(--white); --donker-zacht:#D9D0E8; --donker-vlak:var(--ink-plum); --donker-accent:var(--pink);
  --link:var(--violet); --focus:var(--violet);
  --knop:var(--pink); --knop-tekst:var(--ink); --knop-rand:var(--ink); --knop-schaduw:var(--ink);
  --knop2-tekst:var(--ink); --knop2-rand:var(--ink);
  --letter-kop:"Bricolage Grotesque",system-ui,sans-serif; --letter-tekst:"Figtree",system-ui,sans-serif; --letter-knop:"Bricolage Grotesque",system-ui,sans-serif;
  --letter-accent:"Bricolage Grotesque",system-ui,sans-serif; --letter-nummer:"Bricolage Grotesque",system-ui,sans-serif;
  --kop-gewicht:800; --kop-spatie:-.03em; --kop-hoogte:1; --kop-opsz:"opsz" 96; --kop-hoofdletters:none;
  --rond:26px; --rond-klein:16px; --randdikte:3px; --schaduw-maat:6px;
  /* logo-stempel: het woordmerk zelf verandert niet, alleen de plaat eronder */
  --wm-1:var(--ink); --wm-2:var(--pink); --wm-bal1:var(--pink); --wm-bal2:var(--violet);
  --logo-plaat:transparent; --logo-plaat-rand:transparent; --logo-plaat-pad:0;
  /* mini-tv */
  --tv-kast:var(--ink); --tv-schaduw:var(--pink);
  --tv-scherm:radial-gradient(circle at 28% 45%,#7A4BFF 0,#5B2EE6 35%,#2A0F66 100%);
  --tv-bal:radial-gradient(circle at 35% 30%,#FF7DB2,#FF3D8B 55%,#C81E66); --tv-bal-in:var(--white); --tv-bal-tekst:var(--ink); --tv-bal-letter:var(--violet);
  --tv-vak:rgba(255,255,255,.14); --tv-vak-tekst:rgba(255,255,255,.78); --tv-vak-aan:var(--pink); --tv-vak-aan-tekst:var(--ink); --tv-bord-letter:var(--white);
  --tv-wolk:var(--white); --tv-wolk-tekst:var(--ink); --tv-wolk-wie:var(--violet);
  --tv-liedje:var(--ink); --tv-liedje-tekst:var(--white); --tv-bingo:var(--pink); --tv-bingo-tekst:var(--ink);
  /* kaart */
  --kaart-achter:var(--white); --kaart-rand:var(--ink); --kaart-kop:var(--violet); --kaart-kop-tekst:var(--white);
  --kaart-letter:var(--ink); --kaart-vak:var(--paper); --kaart-vak-tekst:var(--ink); --kaart-vrij:var(--pink); --kaart-vrij-tekst:var(--ink);
  --kaart-naam-letter:var(--letter-kop);
}

/* ---------- 4. basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--achter);color:var(--tekst);font-family:var(--letter-tekst);font-size:17px;line-height:1.55;font-weight:500;overflow-wrap:break-word}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--letter-kop);font-weight:var(--kop-gewicht);letter-spacing:var(--kop-spatie);line-height:var(--kop-hoogte);font-variation-settings:var(--kop-opsz);text-transform:var(--kop-hoofdletters);margin:0;text-wrap:balance}
h1{font-size:clamp(2.45rem,10.5vw,5.25rem)}
h2{font-size:clamp(2rem,7.6vw,3.6rem)}
h3{font-size:clamp(1.35rem,4.6vw,1.75rem);line-height:1.08}
p{margin:0}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.18em}
.lees a,.feiten a,.vraag a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 16px}
.lees > *{max-width:780px}
.label{font-family:var(--letter-tekst);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-zacht);margin:0 0 12px}
.klein{font-size:15px;color:var(--tekst-zacht)}
.naar-inhoud{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:var(--white);padding:12px 18px;border-radius:12px;font-weight:800}
.naar-inhoud:focus{top:12px}
main:focus{outline:none}
.balletje{flex:none;display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--white) 0 30%,var(--bal-kleur,var(--accent)) 34%)}
@media (min-width:760px){ body{font-size:18px} .wrap{padding:0 32px} }
@media (min-width:1080px){ .wrap{padding:0 40px} }

/* ---------- logo (woordmerk uit branding/merk/logo.css; de punten op de i's zijn Bingley en Bella) ---------- */
.logo{display:inline-flex;align-items:center;text-decoration:none;background:var(--logo-plaat);border:var(--randdikte) solid var(--logo-plaat-rand);border-radius:14px;padding:var(--logo-plaat-pad);flex:none}
.wm{font-family:"BB Logo","Bricolage Grotesque",sans-serif;font-variation-settings:"opsz" 96;font-weight:800;letter-spacing:-.028em;line-height:.86;color:var(--wm-1);white-space:nowrap;display:inline-block;font-size:24px}
.wm .w{display:inline-block}
.wm .w2{color:var(--wm-2);margin-left:.22em}
.wm .i{position:relative;display:inline-block}
.wm .i i{position:absolute;left:calc(50% + .025em);top:.075em;width:.25em;height:.25em;margin-left:-.125em;border-radius:50%;background:radial-gradient(circle,var(--white) 0 28%,var(--wm-bal1) 38%)}
.wm .w2 .i i{background:radial-gradient(circle,var(--white) 0 28%,var(--wm-bal2) 38%)}
.logo-op-donker .wm{--wm-1:var(--white);--wm-2:var(--pink)}
@media (min-width:760px){ .kop .wm{font-size:32px} }

/* ---------- 5. kop ---------- */
.kop{position:relative;z-index:20;background:var(--achter)}
.kop-rij{display:flex;align-items:center;gap:10px;min-height:68px;padding-top:10px;padding-bottom:10px}
.kop .logo{margin-right:auto}
.hoofdmenu{display:none}
.menu-lijst,.menu-lijst ul{list-style:none;margin:0;padding:0}
.menu-lijst a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font-weight:700;text-decoration:none;border-radius:10px}
.menu-lijst a:hover{text-decoration:underline}
.menu-lijst a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent)}
.groep-knop .pijl{width:12px;height:8px;transition:transform .15s}
.groep-knop[aria-expanded="true"] .pijl{transform:rotate(180deg)}
/* taalwissel: altijd zichtbaar in de kop, op elke breedte, als compact knopje naast de menuknop */
.taalwissel{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;height:44px;padding:0 8px;border:2px solid var(--rand);border-radius:12px;font-weight:800;font-size:14px;letter-spacing:.06em;line-height:1;text-decoration:none;color:var(--tekst)}
.taalwissel:hover{text-decoration:underline}
.voet-taal{margin:10px 0 0;font-weight:700}
.opening-beeld picture,.persoon picture{display:contents}
.menuknop{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--rand);border-radius:50%;color:var(--tekst);flex:none;text-decoration:none}
.menuknop svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:none}
.menuknop-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kop .kop-knop{display:none;white-space:nowrap}
/* mobiel menu: paneel onder de kop (alleen met JS; zonder JS gaat de menuknop naar de voet) */
.kop.open .hoofdmenu{display:block;position:absolute;left:0;right:0;top:100%;background:var(--achter);border-top:2px solid var(--rand);border-bottom:var(--randdikte) solid var(--rand);padding:8px 16px 18px;box-shadow:0 12px 24px rgba(0,0,0,.12)}
.kop.open .menu-lijst a{min-height:48px;font-size:18px;padding:0 4px}
.kop.open .groep-knop{pointer-events:none;color:var(--tekst-zacht);font-size:13px!important;letter-spacing:.14em;text-transform:uppercase;min-height:36px!important}
.kop.open .groep-knop .pijl{display:none}
.kop.open .sub{padding-left:8px!important}
/* bestelknop in de kop pas vanaf 520: daaronder past hij niet naast logo, taalwissel en menuknop (bachelorette 360 tot 519 gemeten 27-10);
   op de telefoon staat de bestelknop in de opening en komt de vaste knop onderaan na het eerste scherm */
@media (min-width:520px){ .kop .kop-knop{display:inline-flex} }
@media (max-width:439px){ .kop .wm{font-size:21px} .kop-rij{gap:8px} .kop-knop{font-size:14px;padding:.45em .8em} }
@media (min-width:960px){
  .hoofdmenu{display:block}
  .menuknop{display:none}
  .menu-lijst{display:flex;align-items:center;gap:4px}
  .groep{position:relative}
  .sub{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:220px;background:var(--vlak);color:var(--vlak-tekst);border:var(--randdikte) solid var(--rand);border-radius:var(--rond-klein);padding:8px!important;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--schaduw)}
  .groep.open .sub,html:not(.js) .groep:focus-within .sub,html:not(.js) .groep:hover .sub{display:block}
  .sub a{padding:0 12px!important}
  .kop-rij{gap:16px}
}

/* kruimelpad */
.kruimelpad ol{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:15px;font-weight:600;color:var(--tekst-zacht)}
.kruimelpad li{display:flex;align-items:center}
.kruimelpad li+li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 10px}
.kruimelpad a{display:inline-flex;align-items:center;min-height:44px}
.kruimelpad [aria-current]{color:var(--tekst)}
/* één regel: een lange paginanaam wordt afgekapt met ... in plaats van onder "Home" te vallen */
.kruimelpad ol{flex-wrap:nowrap}
.kruimelpad li:last-child{min-width:0}
.kruimelpad li:last-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* voet */
.voet{background:var(--ink);color:var(--white);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.voet .wm{font-size:36px}
.voet-boven{display:grid;gap:40px}
.voet-regel{color:#CFC4E2;font-weight:600;margin-top:14px}
.voet-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.voet-kop{font-family:var(--letter-tekst);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#CFC4E2;margin:0 0 6px;font-weight:800}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.voet li a:hover{text-decoration:underline}
.voet :focus-visible{outline-color:var(--white)}
.voet-onder{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:15px;color:#CFC4E2}
/* drie kolommen naast het merk pas vanaf 900: op 760 tot 899 liep de derde kolom 50 tot 80 px buiten beeld (gemeten 27-10) */
@media (min-width:900px){ .voet-boven{grid-template-columns:1fr auto;align-items:start} .voet-kolommen{grid-template-columns:repeat(3,minmax(140px,auto));gap:28px 56px} }

/* ---------- 6. knoppen (vorm van het hoofdmerk: dikke rand, harde schaduw, in de kleuren van het thema) ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;font-family:var(--letter-knop);font-variation-settings:"opsz" 48;font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.1;text-align:center;
  background:var(--knop);color:var(--knop-tekst);border:var(--randdikte) solid var(--knop-rand);border-radius:999px;padding:.7em 1.25em;box-shadow:5px 5px 0 var(--knop-schaduw);text-decoration:none;cursor:pointer;transition:transform .08s,box-shadow .08s}
.knop:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--knop-schaduw)}
.knop-groot{font-size:20px;min-height:56px}
.knop-klein{font-size:15px;min-height:44px;padding:.5em .95em;box-shadow:3px 3px 0 var(--knop-schaduw);border-width:2px}
.knop-tweede{background:transparent;color:var(--knop2-tekst);border-color:var(--knop2-rand);box-shadow:none}
.knop-tweede:active{transform:translate(1px,1px);box-shadow:none}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (min-width:760px){ .knop-klein{font-size:16px} }

/* ---------- 7. blokken en achtergronden ---------- */
.blok{padding:56px 0}
.achter-licht+.blok.achter-licht{padding-top:8px}
.achter-vlak{background:var(--vlak);color:var(--vlak-tekst);border-top:var(--randdikte) solid var(--rand);border-bottom:var(--randdikte) solid var(--rand)}
.achter-donker{background:var(--donker);color:var(--donker-tekst);--tekst:var(--donker-tekst);--tekst-zacht:var(--donker-zacht);--rand:var(--donker-tekst);--link:var(--donker-accent);--focus:var(--donker-tekst);
  --knop-rand:var(--donker-tekst);--knop-schaduw:var(--donker-tekst);--knop2-tekst:var(--donker-tekst);--knop2-rand:var(--donker-tekst);--vlak:var(--donker-vlak);--vlak-tekst:var(--donker-tekst);--accent:var(--donker-accent)}
.achter-accent{background:var(--accent);color:var(--accent-tekst);border-top:var(--randdikte) solid var(--rand);--tekst:var(--accent-tekst);--tekst-zacht:var(--accent-tekst);--focus:var(--accent-tekst);--link:var(--accent-tekst);
  --knop:var(--ink);--knop-tekst:var(--white);--knop-rand:var(--ink);--knop-schaduw:var(--white)}
.blok-kop{display:grid;gap:12px;margin-bottom:28px;max-width:760px}
.blok-kop p{color:var(--tekst-zacht);font-size:18px}
@media (min-width:760px){ .blok{padding:96px 0} .achter-licht+.blok.achter-licht{padding-top:16px} .blok-kop{margin-bottom:44px} }

/* opening */
.opening{padding:20px 0 40px}
.opening-rij{display:grid;gap:24px}
.opening-tekst{display:grid;gap:18px;justify-items:start}
.opening h1{max-width:13ch}
.opening .lead{font-size:18px;color:var(--tekst-zacht);max-width:34em}
.opening-prijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-weight:700;color:var(--tekst-zacht)}
.opening-extra{flex-basis:100%;font-size:16px}
.opening-extra b{color:var(--tekst)}
.prijs-groot{font-family:var(--letter-nummer);font-variation-settings:"opsz" 96;font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:1;color:var(--tekst)}
.opening-beeld img{width:100%;max-height:34svh;object-fit:cover;border-radius:var(--rond);border:var(--randdikte) solid var(--rand)}
@media (min-width:760px){
  .opening{padding:40px 0 72px}
  .opening .lead{font-size:21px}
  .opening.met-beeld .opening-rij{grid-template-columns:1fr 1.05fr;align-items:center;gap:56px}
  .opening.met-beeld .opening-beeld{order:2}
  .opening-beeld img{max-height:none}
}

/* geruststelling */
.geruststelling{padding:0 0 8px}
.gerust-lijst{list-style:none;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gerust-lijst li{display:flex;align-items:center;gap:10px;background:var(--vlak);color:var(--vlak-tekst);border:2px solid var(--rand);border-radius:14px;padding:10px 12px;font-weight:700;font-size:15px;line-height:1.25}
@media (min-width:760px){ .gerust-lijst{grid-template-columns:repeat(4,1fr);gap:16px} .gerust-lijst li{font-size:16px;padding:14px 16px} }

/* feiten */
.feiten{background:var(--vlak);color:var(--vlak-tekst);border:var(--randdikte) solid var(--rand);border-radius:var(--rond);padding:24px 22px;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--accent);max-width:900px}
.feiten p{font-size:18px;font-weight:600;line-height:1.5}
@media (min-width:760px){ .feiten{padding:34px 38px} .feiten p{font-size:21px} }

/* tekst */
.lees h2{margin-bottom:20px}
.lees p+p{margin-top:16px}

/* ---------- 8. onderdelen ---------- */
/* speelknop: laadt pas bij een klik, één geluid tegelijk (js/geluid.js) */
.stemmen-rij{display:grid;gap:14px}
@media (min-width:760px){ .stemmen-rij{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} }
.stem{margin:0;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;background:var(--vlak);color:var(--vlak-tekst);border:var(--randdikte) solid var(--rand);border-radius:var(--rond-klein);padding:16px}
.achter-vlak .stem{background:var(--achter);color:var(--tekst)}
.speel{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent2);color:var(--accent2-tekst);border:var(--randdikte) solid var(--rand);cursor:pointer;padding:0;position:relative}
.speel svg{width:24px;height:24px;fill:currentColor}
.speel .ic-stop{display:none}
.speel[aria-pressed="true"]{background:var(--accent);color:var(--accent-tekst)}
.speel[aria-pressed="true"] .ic-speel{display:none}
.speel[aria-pressed="true"] .ic-stop{display:block}
.speel[aria-pressed="true"]::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--accent);animation:golf 1.2s ease-out infinite}
.speel[data-laden]::after{border-style:dashed;animation:draai 1s linear infinite}
.speel-leeg{background:transparent;color:var(--tekst-zacht);border-style:dashed;border-width:2px;cursor:default}
.speel-leeg svg{fill:none}
.stem figcaption{display:grid;gap:4px;min-width:0}
.stem-wie{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-zacht)}
.stem-regels{display:grid;gap:4px;font-size:17px;font-weight:600;line-height:1.4}
.stem-regel b{font-weight:800}
@keyframes golf{from{transform:scale(.9);opacity:1}to{transform:scale(1.25);opacity:0}}
@keyframes draai{to{transform:rotate(360deg)}}

/* presentatoren */
.personen{display:grid;gap:18px}
.persoon{background:var(--vlak);color:var(--vlak-tekst);border:var(--randdikte) solid var(--rand);border-radius:var(--rond);padding:22px;display:grid;gap:10px;align-content:start;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--schaduw)}
.persoon .label{margin:0}
.persoon h3{font-size:clamp(1.9rem,7vw,2.6rem)}
.persoon > p:not(.label){color:var(--tekst-zacht)}
.persoon .stem{border-width:2px;background:var(--achter);margin-top:6px}
.persoon-beeld{width:100%;border-radius:var(--rond-klein)}
@media (min-width:760px){ .personen{grid-template-columns:1fr 1fr;gap:28px} .persoon{padding:30px} }

/* grappen */
.grappen{display:grid;gap:14px}
.grap .stem{height:100%;box-shadow:4px 4px 0 var(--schaduw)}
@media (min-width:760px){ .grappen{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px} }

/* mini-tv */
.minitv-rij{display:grid;gap:8px}
.minitv{display:grid;gap:20px;max-width:900px}
.tv{container-type:inline-size;background:var(--tv-kast);border-radius:20px;padding:8px;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--tv-schaduw)}
.scherm{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--tv-scherm);color:var(--white)}
.tv-bal{position:absolute;left:5cqw;top:6cqw;width:34cqw;height:34cqw;border-radius:50%;background:var(--tv-bal);display:flex;align-items:center;justify-content:center;box-shadow:0 1.6cqw 0 rgba(0,0,0,.25)}
.tv-bal-in{width:21cqw;height:21cqw;border-radius:50%;background:var(--tv-bal-in);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--letter-nummer);font-variation-settings:"opsz" 96;font-weight:800;line-height:.9;color:var(--tv-bal-tekst)}
.tv-bal-l{font-size:5cqw;color:var(--tv-bal-letter)}
.tv-bal-n{font-size:10cqw;letter-spacing:-.05em}
.tv-bal.rolt{animation:rol .9s cubic-bezier(.2,.8,.3,1.1)}
@keyframes rol{from{transform:translateX(-60cqw) rotate(-300deg)}to{transform:none}}
.tv-bord{position:absolute;left:44cqw;top:6cqw;right:4cqw;display:grid;gap:.6cqw}
.tv-bord-rij{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:.5cqw}
.tv-bord span{aspect-ratio:1;min-width:0;overflow:hidden;border-radius:.6cqw;background:var(--tv-vak);color:var(--tv-vak-tekst);font-family:var(--letter-tekst);font-weight:800;font-size:1.5cqw;display:flex;align-items:center;justify-content:center}
.tv-bord .tv-bord-l{background:transparent;color:var(--tv-bord-letter);font-family:var(--letter-nummer);font-size:2.4cqw}
.tv-bord .aan{background:var(--tv-vak-aan);color:var(--tv-vak-aan-tekst)}
.tv-bord .nu{background:var(--white);color:var(--ink);box-shadow:0 0 0 .4cqw var(--tv-vak-aan)}
.tv-wolk{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;min-height:20cqw;background:var(--tv-wolk);color:var(--tv-wolk-tekst);border-radius:3cqw;padding:2.4cqw 3.4cqw;font-weight:700;font-size:clamp(13px,3.4cqw,24px);line-height:1.28;display:flex;flex-direction:column;justify-content:center}
/* voor de demo start staat er niets in het wolkje (de knop eronder zegt al "Play the demo"); doorzichtig, zodat schermlezers het wel houden */
html.js .tv-wolk:not(.nieuw){opacity:0}
.tv-wolk b{display:block;font-size:clamp(11px,2.3cqw,15px);letter-spacing:.12em;text-transform:uppercase;color:var(--tv-wolk-wie);margin-bottom:.4em}
.tv-wolk b:empty{display:none}
.tv-wolk.nieuw{animation:wolk .3s ease-out}
@keyframes wolk{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.tv-liedje{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;background:var(--tv-liedje);color:var(--tv-liedje-tekst);text-align:center;padding:6cqw;font-weight:800;font-size:clamp(14px,3.6cqw,26px);line-height:1.25}
.eq{display:flex;gap:1.6cqw;align-items:flex-end;height:10cqw}
.eq i{width:3cqw;height:100%;background:var(--accent);border-radius:1cqw;animation:eq .8s ease-in-out infinite alternate;transform-origin:bottom}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.45s}.eq i:nth-child(4){animation-delay:-.6s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.tv-naam{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-3deg);background:var(--accent);color:var(--accent-tekst);border:.6cqw solid var(--white);border-radius:2cqw;padding:2cqw 5cqw;font-family:var(--letter-kop);font-weight:800;font-size:clamp(22px,8cqw,64px);line-height:1;white-space:nowrap}
.tv-bingo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--letter-kop);font-weight:800;font-size:clamp(40px,17cqw,140px);letter-spacing:-.04em;color:var(--tv-bingo);text-shadow:.8cqw .8cqw 0 var(--tv-bingo-tekst);background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.tv-bingo:not([hidden]){animation:knal .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes knal{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.tv-voet{width:24%;height:16px;margin:0 auto;background:var(--tv-kast);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);transform:translateY(8px)}
.tv-bediening{display:flex;flex-wrap:wrap;gap:12px}
[hidden]{display:none!important}
@container (min-width:560px){
  .scherm{aspect-ratio:16/10}
  .tv-bal{top:10cqw;width:30cqw;height:30cqw}
  .tv-bal-in{width:19cqw;height:19cqw}
  .tv-bord{top:10cqw}
  .tv-bord span{font-size:1.25cqw}
  .tv-wolk{left:42cqw;right:4cqw;bottom:5cqw;min-height:0;font-size:clamp(13px,2.5cqw,22px)}
}
@media (min-width:760px){ .tv{padding:14px;border-radius:26px} .scherm{border-radius:16px} .minitv-rij{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center} }

/* kaartvoorbeeld */
.kaart-rij{display:grid;gap:28px}
.kaart-uitleg{display:grid;gap:18px;align-content:start;justify-items:start}
.kaart-uitleg .blok-kop{margin-bottom:0}
.veld{display:grid;gap:8px;width:100%;max-width:420px}
.veld label{font-weight:800}
.veld input{font:inherit;font-size:18px;font-weight:700;min-height:52px;padding:10px 16px;border:var(--randdikte) solid var(--rand);border-radius:14px;background:var(--white);color:var(--ink);width:100%}
.veld input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.bkaart{background:var(--kaart-achter);border:var(--randdikte) solid var(--kaart-rand);border-radius:var(--rond);overflow:hidden;max-width:420px;width:100%;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--accent);color:var(--ink)}
.bkaart-kop{background:var(--kaart-kop);color:var(--kaart-kop-tekst);padding:14px 18px;display:grid;gap:2px;text-align:center}
.bkaart-show{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.bkaart-naam{font-family:var(--kaart-naam-letter);font-weight:800;font-size:clamp(26px,8vw,36px);letter-spacing:-.02em;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkaart-raster{padding:12px;display:grid;gap:6px}
.bkaart-letters,.bkaart-rij{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bkaart-letters span{text-align:center;font-family:var(--letter-nummer);font-weight:800;font-size:clamp(22px,7vw,30px);color:var(--kaart-letter);line-height:1.1}
.bkaart-rij span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--kaart-vak);color:var(--kaart-vak-tekst);border-radius:10px;font-family:var(--letter-nummer);font-weight:800;font-size:clamp(18px,5.6vw,24px)}
.bkaart-rij .vrij{background:var(--kaart-vrij);color:var(--kaart-vrij-tekst);font-family:var(--letter-tekst);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:760px){ .kaart-rij{grid-template-columns:1fr minmax(320px,420px);gap:56px;align-items:center} }

/* prijs */
.prijzen{display:grid;gap:22px}
.prijs-kolom{position:relative;background:var(--vlak);color:var(--vlak-tekst);border:var(--randdikte) solid var(--rand);border-radius:var(--rond);padding:26px 22px;display:grid;gap:12px;align-content:start}
.prijs-kolom.uitgelicht{border-color:var(--accent);box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--accent)}
.badge{position:absolute;top:-15px;left:20px;background:var(--accent);color:var(--accent-tekst);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:2px solid var(--rand)}
.achter-donker .badge{color:var(--ink);border-color:var(--ink)}
.bedrag{display:flex;align-items:baseline;gap:10px;font-weight:700;color:var(--tekst-zacht)}
.bedrag b{font-family:var(--letter-nummer);font-variation-settings:"opsz" 96;font-weight:800;font-size:64px;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.inbegrepen{list-style:none;margin:0 0 8px;padding:0}
.inbegrepen li{padding:9px 0 9px 30px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);position:relative;font-weight:600}
.inbegrepen li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--white) 0 30%,var(--bal-kleur,var(--accent)) 34%)}
.prijs-kolom .knop{justify-self:start}
.prijs-onder{margin-top:26px;font-weight:600;color:var(--tekst-zacht);max-width:820px}
.garantie{margin-top:18px;display:flex;gap:12px;align-items:flex-start;font-weight:700;max-width:820px}
.garantie .balletje{margin-top:4px}
@media (min-width:760px){ .prijzen{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px} .prijs-kolom{padding:34px} .bedrag b{font-size:84px} }

/* vragen */
.vragen{display:grid;gap:12px;margin-top:24px}
.vraag{background:var(--vlak);color:var(--vlak-tekst);border:var(--randdikte) solid var(--rand);border-radius:var(--rond-klein)}
.vraag summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:12px 18px;font-family:var(--letter-kop);font-weight:800;font-size:19px;letter-spacing:-.01em;line-height:1.2;cursor:pointer}
.vraag summary::-webkit-details-marker{display:none}
.vraag .plus{flex:none;width:20px;height:20px;transition:transform .15s}
.vraag[open] .plus{transform:rotate(45deg)}
.vraag p{padding:0 18px 18px;color:var(--tekst-zacht)}
.vraag summary:focus-visible{outline-offset:-3px;border-radius:12px}
.meer{margin-top:20px;font-weight:800}
.meer a{display:inline-flex;align-items:center;min-height:44px;color:var(--link)}

/* slot */
.slot{padding:56px 0}
.slot-rij{display:grid;gap:24px}
.slot h2{max-width:14ch}
.slot p{margin-top:12px;font-size:18px;font-weight:600}
.slot-knop{display:grid;gap:12px;justify-items:start}
.slot-prijs{margin:0!important;font-weight:700}
.slot-prijs b{font-family:var(--letter-nummer);font-weight:800;font-size:28px;letter-spacing:-.03em}
@media (min-width:760px){ .slot{padding:84px 0} .slot-rij{grid-template-columns:1fr auto;align-items:center;gap:40px} .slot-knop{justify-items:end} }

/* ---------- 9. vaste bestelknop onderaan op mobiel (js/vasteknop.js) ---------- */
.vaste-knop{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--vlak);color:var(--vlak-tekst);border-top:var(--randdikte) solid var(--rand);box-shadow:0 -6px 20px rgba(0,0,0,.12);transform:translateY(110%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
.vaste-knop[data-zichtbaar]{transform:none;visibility:visible;transition:transform .2s}
.vaste-knop-prijs{font-weight:700;color:var(--tekst-zacht);line-height:1.1}
.vaste-knop-prijs b{display:block;font-family:var(--letter-nummer);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--vlak-tekst)}
.vaste-knop .knop{font-size:17px;min-height:48px;padding:.6em 1.1em;box-shadow:3px 3px 0 var(--knop-schaduw)}
@media (min-width:760px){ .vaste-knop{display:none} }

/* ---------- 10. print en minder beweging ---------- */
#printvak{display:none}
@media print{
  html.printmodus body > :not(#printvak){display:none!important}
  html.printmodus #printvak{display:block}
  html.printmodus #printvak .bkaart{box-shadow:none;max-width:120mm;margin:10mm auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vaste-knop,.kop,.menuknop{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}