/* De Quizmaster — de site als quizavond in een café.
   Blauw = de zaal, crème = papier, rood = de spotlight uit het logo.
   Domine is de stem van de quizmaster (vragen, uitspraken), Lato is het huis eromheen. */

@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-regular.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/lato-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-bold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/lato-black.woff2") format("woff2"); }
@font-face { font-family: "Domine"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/domine.woff2") format("woff2"); }

:root {
  /* palet */
  --zaal: #4f6367;
  --zaal-diep: #3a4a4d;
  --zaal-nacht: #2c393b;
  --papier: #eef5db;
  --papier-2: #e1ebc6;
  --wit: #ffffff;
  --spot: #fe5f55;
  --spot-inkt: #b8352b;      /* rood voor tekst op licht papier (leesbaar contrast) */
  --inkt: #263335;           /* tekst op papier */
  --inkt-zacht: #56676a;
  --potlood: #c6d2b2;        /* lijntjes op papier */
  --goed: #2f7a4f;

  /* letters: schaal 1,25 op 17px */
  --stem: "Domine", Georgia, "Times New Roman", serif;
  --huis: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-1: .8rem; --t0: 1.0625rem; --t1: 1.33rem; --t2: 1.66rem; --t3: 2.07rem; --t4: 2.6rem; --t5: 3.24rem; --t6: 4.05rem;

  --breed: 1180px;
  --vel-schaduw: 0 1px 0 rgba(38,51,53,.08), 0 18px 40px -22px rgba(38,51,53,.55);
  --straal: polygon(0 24%, 100% 0, 95% 100%, 0 80%);
  --korrel: url("../img/korrel.svg");

  /* compatibiliteit met beheer en oudere onderdelen */
  --rood: var(--spot); --creme: var(--papier); --blauw: var(--zaal); --tekst: var(--inkt); --gedempt: var(--inkt-zacht);
  --lijn: var(--potlood); --kaart: var(--wit); --sans: var(--huis); --serif: var(--stem); --koper-donker: var(--spot-inkt);
  --radius: 14px; --schaduw: var(--vel-schaduw); --fout: var(--spot-inkt); --groen: var(--goed);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--papier); color: var(--inkt);
       font: 400 var(--t0)/1.6 var(--huis); }
main { flex: 1; }
img { max-width: 100%; height: auto; }
a { color: var(--spot-inkt); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--inkt); }
:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; text-wrap: balance; color: inherit; }
/* De quizmaster praat in Domine */
h1 { font: 700 var(--t5)/1.06 var(--stem); letter-spacing: -.015em; }
/* Het huis praat in Lato */
h2 { font: 900 var(--t3)/1.1 var(--huis); letter-spacing: -.01em; }
h3 { font: 900 var(--t1)/1.2 var(--huis); }
p { margin: 0 0 1em; }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 780px; }
.gedempt { color: var(--inkt-zacht); }
.klein { font-size: .875rem; }
.zichtbaar-voor-schermlezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { :root { --t3: 1.75rem; --t4: 2.1rem; --t5: 2.35rem; --t6: 2.8rem; } .wrap { padding: 0 18px; } }

/* ---------- Oppervlakken ---------- */
.zaal { background: var(--korrel), var(--zaal); color: var(--papier); position: relative; }
.zaal a:not(.knop) { color: var(--papier); }
.zaal .gedempt { color: #c9d6c6; }
/* papier in de zaal houdt zijn eigen inktkleuren */
.zaal .vel, .zaal .paneel { color: var(--inkt); }
.zaal .vel .gedempt, .zaal .paneel .gedempt { color: var(--inkt-zacht); }
.zaal .vel a:not(.knop), .zaal .paneel a:not(.knop) { color: var(--spot-inkt); }
.papier { background: var(--korrel), var(--papier); }
/* Gescheurde papierrand onder een vlak: de volgende kleur scheurt erin. */
.scheur { position: relative; }
.scheur::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--scheur-kleur, var(--papier));
  -webkit-mask: url("../img/scheur.svg") bottom / 100% 100% no-repeat; mask: url("../img/scheur.svg") bottom / 100% 100% no-repeat; z-index: 2; pointer-events: none; }
.scheur-naar-zaal { --scheur-kleur: var(--zaal); }
.scheur-naar-wit { --scheur-kleur: var(--wit); }

/* Een vel papier (antwoordformulier, boekje, tekst) */
.vel { background: var(--wit); color: var(--inkt); border-radius: 3px; box-shadow: var(--vel-schaduw); }

/* ---------- Kop: crème luifel met geschulpte rand ---------- */
.kop { background: var(--papier); position: sticky; top: 0; z-index: 30; }
.kop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background: radial-gradient(circle at 12px 0, var(--papier) 11px, transparent 12px) 0 0 / 24px 12px repeat-x;
  filter: drop-shadow(0 3px 0 var(--spot)); }
.kop .wrap { display: flex; align-items: center; gap: 28px; height: 78px; }
.logo { display: block; flex: none; }
.logo img { height: 58px; width: auto; display: block; }
.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav a { color: var(--inkt); text-decoration: none; font-weight: 700; padding: 8px 12px; border-radius: 999px; }
.nav a:not(.wagen):hover, .nav a:not(.wagen)[aria-current="page"] { background: var(--papier-2); color: var(--inkt); }
.nav .wagen { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; background: var(--inkt); color: var(--papier); padding: 9px 16px; }
.nav .wagen:hover { background: var(--zaal); color: var(--papier); }
.nav .wagen b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--spot); color: var(--inkt); font-size: .78rem; font-weight: 900; }
@media (max-width: 760px) {
  .kop .wrap { height: 64px; gap: 10px; } .logo img { height: 42px; }
  .nav .verberg-mobiel { display: none; } .nav a { padding: 8px 8px; } .nav .wagen { padding: 9px 12px; margin-left: 2px; }
  .nav .wagen-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Knoppen: als een buzzer, met drukrand ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 0;
  font: 900 1.06rem/1.1 var(--huis); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s, background .15s; }
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25) !important; }
.knop-koper { background: var(--spot); color: var(--inkt); box-shadow: 0 4px 0 var(--spot-inkt); }
.knop-koper:hover { color: var(--inkt); }
.knop-inkt { background: var(--inkt); color: var(--papier); box-shadow: 0 4px 0 #111b1d; }
.knop-inkt:hover { color: var(--papier); }
.knop-papier { background: var(--papier); color: var(--inkt); box-shadow: 0 4px 0 #b7c39c; }
.knop-rand { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.knop-klein { padding: 9px 16px; font-size: .9rem; }
.knop-breed { width: 100%; }
.knop[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.tekstlink { font-weight: 900; color: inherit; }

/* ---------- Meldingen ---------- */
.melding { padding: 12px 16px; border-radius: 6px; margin: 16px 0; font-weight: 700; background: var(--wit); border-left: 5px solid var(--goed); color: var(--inkt); box-shadow: var(--vel-schaduw); }
.melding-fout { border-left-color: var(--spot); }
.melding-ok { border-left-color: var(--goed); }
.meldingen { position: fixed; z-index: 40; top: 100px; right: 20px; max-width: min(420px, calc(100% - 40px)); animation: melding-in .35s ease-out both; }
.meldingen .melding { margin: 0 0 10px; box-shadow: 0 16px 34px -14px rgba(0,0,0,.45); }
@keyframes melding-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .meldingen { top: 82px; right: 12px; left: 12px; max-width: none; } }

/* =========================================================
   HOME: de zaal met de proefronde
   ========================================================= */
.podium { padding: 48px 0 0; overflow: hidden; }
.podium h1 { font-size: var(--t6); color: var(--papier); margin: 0 0 8px; max-width: 16em; position: relative; z-index: 3; }
.podium-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 470px); grid-template-areas: "tekst master kaart";
  column-gap: 40px; position: relative; align-items: end; }
.podium-tekst { grid-area: tekst; align-self: start; padding: 18px 0 130px; }
.podium-master { grid-area: master; position: relative; height: 340px; }
.podium-kaart { grid-area: kaart; position: relative; margin-bottom: -6px; padding-top: 36px; }
.podium .lead { font-size: var(--t1); line-height: 1.5; color: #dfe8d9; max-width: 24em; }
.podium .acties { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.podium .voorraad { margin-top: 22px; color: #c9d6c6; font-size: .92rem; max-width: 28em; }
.podium .pr-vel { min-height: 380px; }
@media (max-width: 1100px) {
  .podium-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tekst tekst" "master kaart"; }
  .podium-tekst { padding-bottom: 8px; }
}
@media (max-width: 760px) {
  .podium-raster { grid-template-columns: 1fr; grid-template-areas: "tekst" "kaart" "master"; }
  .podium-kaart { margin: 12px 0 0; padding-top: 0; }
  .podium-master { height: 310px; margin-top: 48px; }
  .podium .pr-vel { min-height: 0; }
}

/* ---------- De Quizmaster achter de toog ---------- */
.master { position: absolute; left: 50%; bottom: -2px; width: 300px; height: 330px; transform: translateX(-52%); }
.master .lijf { position: absolute; left: 0; bottom: 0; width: 300px; height: auto; }
.master .hoofd { position: absolute; left: 77px; bottom: 104px; width: 146px; height: auto; transform-origin: 50% 90%;
  animation: knik 7s ease-in-out 1.8s infinite; }
@keyframes knik { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-4deg); } 55% { transform: rotate(-4deg); } }
.master .microfoon { position: absolute; left: 214px; bottom: -4px; width: 62px; height: auto; }
.lijf .nek { fill: var(--papier); stroke: var(--zaal-diep); stroke-width: 6; }
.lijf .jasje { fill: var(--zaal-nacht); stroke: var(--zaal-nacht); stroke-width: 6; stroke-linejoin: round; }
.lijf .hemd { fill: var(--papier); stroke: var(--zaal-nacht); stroke-width: 5; stroke-linejoin: round; }
.lijf .revers { fill: #46585b; stroke: var(--zaal-nacht); stroke-width: 5; stroke-linejoin: round; }
.lijf .strik { fill: var(--spot); stroke: var(--zaal-nacht); stroke-width: 3; stroke-linejoin: round; }
.microfoon .statief { stroke: var(--zaal-nacht); stroke-width: 6; stroke-linecap: round; fill: none; }
.microfoon .voet { fill: var(--zaal-nacht); }
.microfoon .kop { fill: var(--zaal-nacht); stroke: var(--zaal-nacht); stroke-width: 3; }
.microfoon .rooster { stroke: #8fa3a6; stroke-width: 2.5; stroke-linecap: round; }
.microfoon .ring { fill: var(--papier); stroke: var(--zaal-nacht); stroke-width: 3; }
.podium.is-goed .master .hoofd { animation: juich .5s cubic-bezier(.3,1.6,.5,1); }
.podium.is-fout .master .hoofd { animation: schud .45s ease-in-out; }
@keyframes juich { 0% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(3deg); } 100% { transform: none; } }
@keyframes schud { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* Cafélamp aan een snoer: daar komt de spotlight vandaan */
.lamp { position: absolute; left: 50%; top: -100px; width: 120px; margin-left: -60px; z-index: 2; }
.lamp svg { display: block; width: 120px; height: auto; position: relative; }
.lamp .snoer { position: absolute; left: 59px; bottom: 100%; width: 3px; height: 600px; background: var(--zaal-nacht); margin-bottom: -2px; }
.lamp .kap { fill: var(--zaal-nacht); stroke: var(--zaal-nacht); stroke-width: 4; stroke-linejoin: round; }
.lamp .fitting { fill: var(--zaal-nacht); }
.lamp .peer { fill: #fff6d6; }
.podium.is-fout .lamp .peer { fill: #8a9a96; }

/* Plankje met flessen tegen de achterwand */
.plank { position: absolute; left: 50%; bottom: 150px; width: 420px; transform: translateX(-50%); opacity: .55; z-index: -1; }
.plank .fles, .plank .glas { fill: #6b8185; }
.plank .glas { fill: #5c7276; }
.plank .plankje { fill: #2f3d40; }

/* De toog: blad, tap en voorkant */
.toog { position: relative; z-index: 2; }
.toog-blad { height: 30px; background: var(--papier); border-top: 6px solid var(--zaal-nacht); border-bottom: 6px solid var(--zaal-nacht);
  box-shadow: 0 10px 0 rgba(0,0,0,.18); position: relative; z-index: 1; }
.toog-front { height: 128px; position: relative; border-bottom: 6px solid var(--zaal-nacht);
  background:
    linear-gradient(var(--zaal-nacht), var(--zaal-nacht)) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 176px, var(--zaal-nacht) 176px 182px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(238,245,219,.035) 22px 25px),
    var(--korrel), var(--zaal-diep); }
/* panelen in de voorkant */
.toog-front::before { content: ""; position: absolute; inset: 22px 0 46px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(20,28,30,.45) 18px 22px, rgba(238,245,219,.06) 22px 160px, rgba(20,28,30,.45) 160px 164px, transparent 164px 182px); }
.voetsteun { position: absolute; left: 0; right: 0; bottom: 18px; height: 14px; background: var(--spot); border: 4px solid var(--zaal-nacht); border-left: 0; border-right: 0; }
.tap { position: absolute; z-index: 2; left: max(24px, calc(50% - 560px)); bottom: calc(100% - 6px); width: 130px; height: auto; }
.tap .tap-buis { fill: #c9d3cf; stroke: var(--zaal-nacht); stroke-width: 5; }
.tap .tap-poot { fill: #c9d3cf; stroke: var(--zaal-nacht); stroke-width: 5; }
.tap .tap-kraan { fill: #c9d3cf; stroke: var(--zaal-nacht); stroke-width: 4; stroke-linejoin: round; }
.tap .tap-hendel { fill: var(--spot); stroke: var(--zaal-nacht); stroke-width: 4; }
.tap .bierglas { fill: var(--papier-2); stroke: var(--zaal-nacht); stroke-width: 4; stroke-linejoin: round; }
.tap .schuim { fill: #fffdf3; stroke: var(--zaal-nacht); stroke-width: 4; }
@media (max-width: 1100px) {
  .master { transform: translateX(-50%) scale(.92); transform-origin: 50% 100%; }
  .plank { transform: translateX(-50%) scale(.9); }
  .tap { left: 12px; width: 104px; }
  .toog-front { height: 96px; }
}
@media (max-width: 640px) { .tap { display: none; } }

/* De spotlight uit het logo valt van rechtsboven op het formulier */
.spot { position: absolute; z-index: 0; top: -80px; right: 2%; width: 56%; height: calc(100% + 120px); pointer-events: none;
  background: linear-gradient(180deg, rgba(254,95,85,1), rgba(254,95,85,.82) 55%, rgba(254,95,85,.25));
  clip-path: polygon(74% 0, 86% 0, 100% 100%, 12% 100%); transform-origin: 80% 0; opacity: .9;
  transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1), filter .5s; }
.podium .spot { left: 50%; right: auto; width: 480px; margin-left: -240px; top: -58px; height: calc(100% + 58px);
  clip-path: polygon(41% 0, 59% 0, 94% 100%, 6% 100%); transform-origin: 50% 0; animation: zwaai 1.6s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes zwaai { from { transform: rotate(-24deg); opacity: 0; } to { transform: rotate(0); opacity: .9; } }
.podium.is-fout .spot { opacity: .28; }
.podium.is-goed .spot { opacity: 1; filter: brightness(1.08); }
.podium-tekst, .podium-kaart { position: relative; z-index: 3; }
.podium-master { z-index: 1; }
@media (max-width: 1100px) { .podium-tekst { padding-bottom: 0; } .lamp .snoer { height: 44px; } }
@media (max-width: 760px) { .podium .spot { top: -58px; height: calc(100% + 58px); } .lamp .snoer { height: 120px; } }

/* ---------- Proefronde ---------- */
.proefronde { position: relative; }
.pr-vel { position: relative; padding: 26px 30px 26px; transform: rotate(-1.2deg); min-height: 440px; display: flex; flex-direction: column; }
.pr-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--inkt); padding-bottom: 10px; margin-bottom: 18px; font-weight: 900; }
.pr-kop .pr-team { display: flex; gap: 8px; align-items: baseline; }
.pr-kop .pr-team i { font-style: normal; font-family: var(--stem); font-weight: 400; color: var(--inkt-zacht); }
.pr-teller { color: var(--spot-inkt); white-space: nowrap; }
.pr-vragen { list-style: none; margin: 0; padding: 0; counter-reset: pr; }
.pr-vraag { counter-increment: pr; padding: 0 0 18px 42px; position: relative; }
.pr-vraag + .pr-vraag { border-top: 1px dashed var(--potlood); padding-top: 18px; }
.pr-vraag::before { content: counter(pr) "."; position: absolute; left: 0; font: 700 var(--t2)/1 var(--stem); color: var(--spot-inkt); top: .15em; }
.pr-vraag + .pr-vraag::before { top: calc(18px + .15em); }
.pr-tekst { font: 700 var(--t2)/1.28 var(--stem); margin: 0 0 12px; color: var(--inkt); }
.pr-cat { display: block; font-size: .85rem; font-weight: 700; color: var(--inkt-zacht); margin-bottom: 6px; }
.pr-antwoord summary { cursor: pointer; font-weight: 900; color: var(--spot-inkt); }
.pr-antwoord p { font: 700 var(--t1)/1.3 var(--stem); margin: 8px 0 0; }

/* Met JavaScript: één vraag tegelijk, zoals in de zaal */
.js .proefronde .pr-vraag { display: none; padding: 0 0 0 0; border: 0; }
.js .proefronde .pr-vraag::before { display: none; }
.js .proefronde .pr-vraag.huidig { display: block; animation: vraagin .35s ease-out both; }
@keyframes vraagin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .proefronde .pr-tekst { font-size: var(--t3); line-height: 1.22; }
.js .proefronde .pr-antwoord { display: none; }
.pr-onthulling { margin-top: 18px; padding: 14px 0 0; border-top: 2px dashed var(--potlood); display: none; }
.pr-onthulling.open { display: block; animation: vraagin .3s ease-out both; }
.pr-onthulling span { display: block; font-weight: 900; font-size: .9rem; color: var(--inkt-zacht); }
.pr-onthulling b { display: block; font: 700 var(--t2)/1.25 var(--stem); color: var(--inkt); }
.pr-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; }
.pr-knoppen[hidden] { display: none; }
.pr-knoppen .knop-goed { background: var(--goed); color: #fff; box-shadow: 0 4px 0 #1d4e32; }
.pr-knoppen .knop-fout { background: var(--wit); color: var(--inkt); box-shadow: inset 0 0 0 2px var(--inkt), 0 4px 0 var(--inkt); }
.pr-vraag-lbl { flex-basis: 100%; font-weight: 900; color: var(--inkt-zacht); font-size: .9rem; margin: 0 0 4px; }

/* Stempel bij goed/fout */
.stempel { position: absolute; right: 22px; top: 62px; font: 900 1.3rem/1 var(--huis); padding: 8px 14px; border: 3px solid currentColor; border-radius: 6px;
  transform: rotate(-9deg) scale(.6); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .2s; background: rgba(255,255,255,.85); }
.stempel.toon { transform: rotate(-9deg) scale(1); opacity: 1; }
.stempel.goed { color: var(--goed); }
.stempel.fout { color: var(--spot-inkt); }

/* Einde van de proefronde */
.pr-einde { display: none; }
.pr-einde.open { display: block; animation: vraagin .35s ease-out both; }
.pr-einde h3 { font: 700 var(--t3)/1.15 var(--stem); margin-bottom: .3em; }
.pr-einde .knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Bierviltje met turfjes: de score */
.viltje { position: absolute; z-index: 4; right: -26px; bottom: -58px; width: 148px; height: 148px; border-radius: 50%;
  background: var(--korrel), var(--papier); color: var(--inkt); display: grid; place-items: center; text-align: center; transform: rotate(8deg);
  box-shadow: 0 0 0 5px var(--papier), 0 0 0 7px var(--spot), 0 16px 26px -10px rgba(0,0,0,.55); }
.viltje svg { width: 92px; height: 54px; display: block; margin: 4px auto 0; }
.viltje svg line.leeg { stroke: var(--potlood); stroke-width: 4; opacity: .7; stroke-dasharray: none; stroke-dashoffset: 0; }
.viltje svg line:not(.leeg) { stroke: var(--spot-inkt); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 0; transition: stroke-dashoffset .45s ease-out; }
.viltje svg line.getrokken { stroke-dashoffset: 0; opacity: 1; }
.viltje .viltje-kop { display: block; font: 700 .72rem var(--stem); color: var(--spot-inkt); margin-bottom: -2px; }
.viltje small { display: block; font-weight: 900; font-size: .8rem; line-height: 1.2; }
.viltje b { font: 700 .95rem var(--stem); }
.no-js .viltje, .viltje[hidden] { display: none; }
@media (max-width: 640px) {
  .pr-vel { padding: 22px 20px; transform: none; min-height: 0; }
  .js .proefronde .pr-tekst { font-size: var(--t2); }
  .viltje { width: 112px; height: 112px; right: -6px; bottom: -64px; }
  .viltje svg { width: 70px; height: 40px; }
  .stempel { top: auto; bottom: 90px; right: 12px; }
}

/* Het hoofd van de quizmaster gluurt over het formulier */
.gluurder { position: absolute; z-index: 0; width: 96px; left: 28px; top: -112px; transform: rotate(-9deg); filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); }
@media (max-width: 640px) { .gluurder { width: 64px; left: auto; right: 18px; top: -76px; transform: rotate(9deg); } }

/* =========================================================
   Secties
   ========================================================= */
.sectie { padding: 96px 0; position: relative; }
.sectie-kop { max-width: 640px; margin-bottom: 40px; }
.sectie-kop p { font-size: var(--t1); line-height: 1.5; color: var(--inkt-zacht); }
.zaal .sectie-kop p { color: #c9d6c6; }
@media (max-width: 640px) { .sectie { padding: 68px 0; } }

/* Wat je downloadt: drie spullen op tafel */
.tafel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
.tafel figure { margin: 0; }
.tafel figure > div:first-child:not(.blad) { aspect-ratio: 1 / 1.1; display: grid; align-content: center; }
.tafel figcaption { margin-top: 24px; }
.tafel figcaption h3 { margin-bottom: 4px; }
.tafel figcaption p { color: var(--inkt-zacht); margin: 0; }
.blad { padding: 18px 20px 22px; aspect-ratio: 1 / 1.1; overflow: hidden; position: relative; font-size: .74rem; line-height: 1.5; }
.tafel figure:nth-child(1) .blad { transform: rotate(-2deg); }
.tafel figure:nth-child(2) .blad { transform: rotate(1.6deg); }
.blad h4 { font: 700 1.15rem/1.2 var(--stem); color: var(--inkt); margin: 6px 0 2px; }
.blad .streep { width: 34px; height: 3px; background: var(--spot); margin-bottom: 8px; }
.blad ol { margin: 0 0 10px; padding-left: 18px; }
.blad ol.antw li { font-weight: 900; }
.blad .regel { display: flex; gap: 8px; align-items: flex-end; height: 22px; border-bottom: 1px solid #b8c2bf; color: var(--spot-inkt); font-weight: 900; }
.blad .team { display: flex; gap: 8px; margin: 8px 0 6px; font-weight: 900; }
.blad .team span:nth-child(2) { flex: 1; border-bottom: 1px solid var(--inkt); }
.blad .team i { width: 46px; height: 20px; border: 2px solid var(--spot); }
.beamer { background: var(--zaal-nacht); border-radius: 8px; padding: 12px; box-shadow: var(--vel-schaduw); transform: rotate(-1deg); }
.dia { aspect-ratio: 16 / 9; background: var(--zaal); border-top: 6px solid var(--spot); display: grid; place-items: center; text-align: center; padding: 16px; color: var(--papier); font: 700 1.05rem/1.3 var(--stem); }
.dia small { display: block; color: var(--spot); font: 900 .72rem var(--huis); margin-bottom: 6px; }
.beamer-voet { height: 34px; width: 40%; margin: 0 auto -12px; background: linear-gradient(var(--zaal-nacht), #1f2a2c); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
@media (max-width: 900px) { .tafel { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; gap: 48px; } }

/* ---------- Kaartjes (de quizpakketten) ---------- */
.kaartjes { display: grid; gap: 22px; }
.kaartje { --kleur: var(--wit); display: grid; grid-template-columns: minmax(0, 1fr) 240px; background: var(--kleur); color: var(--inkt); border-radius: 10px; position: relative;
  box-shadow: var(--vel-schaduw); }
/* perforatie met halve gaatjes boven en onder */
.kaartje::before, .kaartje::after { content: ""; position: absolute; right: 240px; width: 26px; height: 26px; border-radius: 50%; background: var(--gat, var(--papier)); transform: translateX(50%); }
.kaartje::before { top: -13px; } .kaartje::after { bottom: -13px; }
.kaartje .hoofddeel { padding: 30px 34px; }
.kaartje .hoofddeel h3 { font-size: var(--t2); margin-bottom: 6px; }
.kaartje .hoofddeel p { color: var(--inkt-zacht); margin: 0 0 14px; max-width: 34em; }
.kaartje .feitjes { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-weight: 700; font-size: .95rem; }
.kaartje .feitjes li::before { content: "✓"; color: var(--spot-inkt); font-weight: 900; margin-right: 6px; }
.kaartje .strook { border-left: 3px dashed var(--potlood); padding: 26px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.kaartje .vanaf { font-size: .85rem; font-weight: 700; color: var(--inkt-zacht); }
.kaartje .bedrag { font: 900 var(--t4)/1 var(--huis); letter-spacing: -.02em; }
.kaartje .extra { font-size: .82rem; color: var(--inkt-zacht); }
.kaartje.uitgelicht { --kleur: var(--spot); }
.kaartje.uitgelicht .hoofddeel p, .kaartje.uitgelicht .vanaf, .kaartje.uitgelicht .extra { color: #4a1813; }
.kaartje.uitgelicht .feitjes li::before { color: var(--inkt); }
.kaartje.uitgelicht .strook { border-left-color: rgba(38,51,53,.35); }
.kaartje.uitgelicht .knop-koper { background: var(--inkt); color: var(--papier); box-shadow: 0 4px 0 #111b1d; }
.kaartje .label { position: absolute; top: -12px; left: 30px; background: var(--inkt); color: var(--papier); font-weight: 900; font-size: .8rem; padding: 4px 12px; border-radius: 4px; transform: rotate(-2deg); }
.zaal .kaartje { --gat: var(--zaal); }
@media (max-width: 760px) {
  .kaartje { grid-template-columns: 1fr; }
  .kaartje::before, .kaartje::after { right: auto; top: auto; bottom: auto; }
  .kaartje::before { left: -13px; top: calc(100% - 175px); transform: none; }
  .kaartje::after { right: -13px; top: calc(100% - 175px); bottom: auto; transform: none; }
  .kaartje .strook { border-left: 0; border-top: 3px dashed var(--potlood); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 150px; }
  .kaartje .hoofddeel { padding: 26px 22px; }
}

/* ---------- Zo werkt het: een antwoordformulier met drie rondes ---------- */
.formulier { max-width: 860px; padding: 30px 36px 18px; position: relative; }
.formulier-kop { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; border-bottom: 2px solid var(--inkt); padding-bottom: 12px; margin-bottom: 4px; }
.formulier-kop .naam { font-weight: 900; display: flex; gap: 10px; align-items: baseline; flex: 1; }
.formulier-kop .naam i { font: 400 1.25rem var(--stem); color: var(--inkt); flex: 1; border-bottom: 1px solid var(--inkt-zacht); padding: 0 6px 2px; }
.formulier-kop .score { font-weight: 900; display: flex; gap: 10px; align-items: center; }
.formulier-kop .score i { width: 58px; height: 36px; border: 3px solid var(--spot); border-radius: 3px; display: inline-grid; place-items: center; font: 700 1.2rem var(--stem); font-style: normal; color: var(--spot-inkt); }
.rondes { list-style: none; margin: 0; padding: 0; }
.rondes li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--potlood); }
.rondes li:last-child { border-bottom: 0; }
.rondes .nr { font: 700 1.05rem/1.4 var(--stem); color: var(--spot-inkt); }
.rondes h3 { margin: 0 0 4px; }
.rondes p { margin: 0; color: var(--inkt-zacht); }
.rondes .vink { width: 40px; height: 40px; border: 2px solid var(--inkt); border-radius: 3px; display: grid; place-items: center; }
.rondes .vink svg { width: 30px; height: 30px; }
@media (max-width: 640px) { .formulier { padding: 22px 20px 10px; } .rondes li { grid-template-columns: 1fr 40px; gap: 6px 14px; } .rondes .nr { grid-column: 1 / -1; } }

/* ---------- Onderwerpen als gedrukte lijst ---------- */
.onderwerpen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font: 900 var(--t3)/1.25 var(--huis); letter-spacing: -.01em; }
.onderwerpen li { display: inline; }
.onderwerpen li:not(:last-child)::after { content: "/"; color: var(--spot); margin: 0 .35em; font-weight: 400; }
.onderwerpen sup { font-size: .42em; font-weight: 700; color: var(--inkt-zacht); margin-left: .2em; vertical-align: .9em; }
.onderwerpen a { color: inherit; text-decoration: none; }
.onderwerpen a:hover { color: var(--spot-inkt); }

/* ---------- Wie is de quizmaster ---------- */
.wie { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: center; }
.polaroid { margin: 0; background: var(--wit); padding: 14px 14px 18px; box-shadow: var(--vel-schaduw); transform: rotate(-3deg); }
.polaroid .foto { aspect-ratio: 1; background: var(--korrel), var(--zaal); display: grid; place-items: end center; overflow: hidden; position: relative; }
.polaroid .foto::before { content: ""; position: absolute; inset: 0; background: var(--spot); clip-path: polygon(70% 0, 90% 0, 100% 100%, 20% 100%); opacity: .9; }
.polaroid .foto img { width: 62%; position: relative; margin-bottom: -6%; }
.polaroid figcaption { text-align: center; margin-top: 12px; font: 700 1.05rem var(--stem); }
.wie blockquote { margin: 0 0 22px; font: 700 var(--t2)/1.35 var(--stem); }
.wie p { font-size: 1.08rem; }
.huisregels { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 2px solid var(--inkt); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.huisregels li { padding-left: 28px; position: relative; }
.huisregels li::before { content: "★"; position: absolute; left: 0; color: var(--spot-inkt); }
.huisregels b { display: block; }
.huisregels span { color: var(--inkt-zacht); font-size: .95rem; }
@media (max-width: 860px) { .wie { grid-template-columns: 1fr; gap: 36px; } .polaroid { max-width: 260px; } .huisregels { grid-template-columns: 1fr; } }

/* ---------- Veelgestelde vragen ---------- */
.faq { border-top: 2px solid var(--inkt); }
.faq details { border-bottom: 1px solid var(--potlood); }
.faq summary { cursor: pointer; padding: 20px 44px 20px 0; font: 700 1.15rem/1.35 var(--stem); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; border-right: 3px solid var(--spot-inkt); border-bottom: 3px solid var(--spot-inkt); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 44px 22px 0; }
.faq details > div p { margin: 0; color: var(--inkt); }

/* ---------- Slotakkoord en voet ---------- */
.slot { padding: 110px 0 84px; text-align: left; overflow: hidden; }
.slot .wrap { position: relative; }
.slot h2 { font: 700 var(--t6)/1.04 var(--stem); color: var(--papier); max-width: 12em; margin-bottom: .35em; }
.slot p { color: #dfe8d9; font-size: var(--t1); max-width: 28em; }
.slot .spot { top: -80px; right: 4%; width: 36%; height: calc(100% + 120px); opacity: .9; }
.slot .wrap > * { position: relative; z-index: 1; }
@media (max-width: 760px) { .slot .spot { width: 60%; right: -18%; opacity: .55; } .slot { padding: 80px 0 64px; } }
.voet { background: var(--zaal-nacht); color: #c3cfc4; padding: 52px 0 44px; font-size: .95rem; }
.voet .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.voet .merk { display: flex; gap: 16px; align-items: center; max-width: 360px; }
.voet .merk img { width: 52px; flex: none; }
.voet .merk b { color: var(--papier); font: 700 1.1rem var(--stem); display: block; }
.voet-kolommen { display: flex; gap: 56px; flex-wrap: wrap; }
.voet-kolommen div { display: grid; gap: 6px; align-content: start; }
.voet-kolommen b { color: var(--papier); font-weight: 900; margin-bottom: 4px; }
.voet a { color: #dfe8d9; text-decoration: none; }
.voet a:hover { color: var(--spot); text-decoration: underline; }
@media (max-width: 860px) { .voet .wrap { grid-template-columns: 1fr; } .voet-kolommen { gap: 32px; } }

/* =========================================================
   Binnenpagina's
   ========================================================= */
.paginakop { padding: 56px 0 84px; overflow: hidden; }
.paginakop .wrap { position: relative; z-index: 1; }
.paginakop h1 { color: var(--papier); max-width: 15em; margin: 0; }
.paginakop p.intro { color: #dfe8d9; max-width: 34em; font-size: var(--t1); line-height: 1.5; margin: 18px 0 0; }
.paginakop .spot { top: -80px; right: 4%; width: 32%; height: calc(100% + 120px); opacity: .85; }
@media (max-width: 760px) { .paginakop { padding: 36px 0 66px; } .paginakop .spot { display: none; } }
.kruimels { font-size: .9rem; margin: 0 0 18px; color: #c9d6c6; display: flex; flex-wrap: wrap; gap: 4px 0; }
.kruimels a { color: var(--papier); font-weight: 700; }
.kruimels span[aria-hidden] { margin: 0 8px; color: var(--spot); }
.na-kop { margin-top: -40px; position: relative; z-index: 3; }
.pagina { padding: 48px 0 96px; }
.na-kop.pagina { padding-top: 0; }

/* Leesbare tekst op een vel */
.vel-tekst { background: var(--wit); border-radius: 3px; box-shadow: var(--vel-schaduw); padding: 48px 56px; }
.vel-tekst h2 { font-size: var(--t2); margin-top: 1.6em; }
.vel-tekst h2:first-child { margin-top: 0; }
.vel-tekst h3 { margin-top: 1.4em; }
@media (max-width: 640px) { .vel-tekst { padding: 30px 22px; } }
.lees { font-size: 1.08rem; }
.lees ol:not(.pr-vragen):not(.vraagkaarten), .lees ul:not(.vinkjes):not(.huisregels) { padding-left: 1.3em; }
.lees li { margin: 5px 0; }
.lees .pr-vraag, .lees .vraagkaart { margin: 0; }
.vinkjes { list-style: none; margin: 0 0 1em; padding: 0; }
.vinkjes li { padding: 6px 0 6px 32px; position: relative; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 10px; width: 20px; height: 20px; border: 2px solid var(--inkt); border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4 4.5L18 2' fill='none' stroke='%23b8352b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 3px -4px / 20px no-repeat; }
.inhoudsopgave { border: 2px solid var(--inkt); border-radius: 3px; padding: 18px 22px; margin: 0 0 32px; }
.inhoudsopgave b { display: block; margin-bottom: 6px; }
.inhoudsopgave ol { margin: 0; }
.cta-blok { background: var(--korrel), var(--zaal); color: var(--papier); border-radius: 8px; padding: 26px 30px; margin: 36px 0; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-blok h3 { color: var(--papier); margin: 0 0 4px; }
.cta-blok p { margin: 0; color: #dfe8d9; max-width: 34em; }

/* Vragen met antwoorden (gratis vragen): genummerd zoals op een antwoordvel */
.vraagkaarten { list-style: none; margin: 18px 0 10px; padding: 0; border-top: 2px solid var(--inkt); }
.vraagkaart { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--potlood); }
.vraagkaart .nr { font: 700 1.2rem/1.4 var(--stem); color: var(--spot-inkt); grid-row: 1 / span 3; grid-column: 1; }
.vraagkaart > :not(.nr) { grid-column: 2; }
.vraagkaart p { margin: 0; font: 700 1.1rem/1.4 var(--stem); color: var(--inkt); }
.vraagkaart .niv { font-size: .8rem; font-weight: 700; color: var(--inkt-zacht); }
.vraagkaart details summary { cursor: pointer; color: var(--spot-inkt); font-weight: 900; font-size: .92rem; width: max-content; }
.vraagkaart details[open] summary { margin-bottom: 2px; }
.vraagkaart .antw { font-weight: 900; color: var(--inkt); }
.categorie-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 28px; margin: 16px 0; border-top: 2px solid var(--inkt); }
.categorie-tegels a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--potlood); color: var(--inkt); text-decoration: none; font-weight: 900; font-size: 1.05rem; }
.categorie-tegels a span { font-weight: 700; font-size: .85rem; color: var(--inkt-zacht); white-space: nowrap; }
.categorie-tegels a:hover { color: var(--spot-inkt); }
.proefronde-blok { margin: 0 0 40px; }
.proefronde-blok .pr-vel { transform: none; box-shadow: 0 0 0 2px var(--inkt), var(--vel-schaduw); min-height: 360px; }
.proefronde-blok .viltje { right: 10px; bottom: -40px; width: 120px; height: 120px; }
.proefronde-blok .viltje svg { width: 72px; height: 42px; }

/* 404 */
.fout404 { padding: 72px 0 100px; }
.fout404 .vel { max-width: 640px; padding: 34px 38px; transform: rotate(-1deg); }
.fout404 .vraag { font: 700 var(--t2)/1.3 var(--stem); }
.fout404 .doorgestreept { text-decoration: line-through; text-decoration-color: var(--spot); text-decoration-thickness: 3px; color: var(--inkt-zacht); }

/* =========================================================
   Formulieren, configurator, bon
   ========================================================= */
.paneel { background: var(--wit); border-radius: 3px; box-shadow: var(--vel-schaduw); padding: 30px; margin-bottom: 24px; }
.paneel > h3 { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--inkt); margin-bottom: 16px; }
.paneel > h3 .nr { font: 700 1rem var(--stem); color: var(--spot-inkt); flex: none; }
label.veld { display: block; font-weight: 900; margin: 18px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--potlood); border-radius: 6px; font: 1rem/1.4 var(--huis); background: #fff; color: var(--inkt); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 4px rgba(254,95,85,.3); }
.fout-tekst { color: var(--spot-inkt); font-size: .9rem; margin-top: 4px; font-weight: 700; }
.vinkje { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; }
.vinkje input { margin-top: 4px; accent-color: var(--spot-inkt); width: 20px; height: 20px; flex: none; }

/* Titel als "Teamnaam"-regel op een antwoordformulier */
.titelregel { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.titelregel label { font-weight: 900; white-space: nowrap; }
.titelregel input { flex: 1; min-width: 220px; border: 0; border-bottom: 2px solid var(--inkt); border-radius: 0; padding: 6px 4px; font: 700 1.35rem var(--stem); background: transparent; }
.titelregel input:focus { box-shadow: none; border-bottom-color: var(--spot); }
.titelregel input::placeholder { color: #a6b0a8; font-weight: 400; }

.config { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; padding: 0 0 96px; }
@media (max-width: 960px) { .config { grid-template-columns: 1fr; } }
.cat-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--potlood); }
.cat-rij:last-child { border-bottom: 0; }
.cat-rij .naam { font-weight: 900; }
.cat-rij .naam small { display: block; font-weight: 400; color: var(--inkt-zacht); }
.segment { display: inline-flex; border: 2px solid var(--inkt); border-radius: 999px; padding: 3px; background: #fff; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment label { padding: 6px 13px; border-radius: 999px; font-size: .86rem; font-weight: 900; cursor: pointer; color: var(--inkt-zacht); white-space: nowrap; }
.segment label:hover { color: var(--inkt); }
.segment input:checked + label { background: var(--inkt); color: var(--papier); }
.segment input[value="3"]:checked + label { background: var(--spot); color: var(--inkt); }
.segment input[value="0"]:checked + label { background: var(--papier-2); color: var(--inkt-zacht); }
.segment input:focus-visible + label { outline: 3px solid var(--spot); outline-offset: 1px; }
@media (max-width: 540px) { .cat-rij { grid-template-columns: 1fr; } .segment label { padding: 6px 9px; } }

.niveaus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 540px) { .niveaus { grid-template-columns: 1fr; } }
.niveaus > div { position: relative; }
.niveaus input { position: absolute; opacity: 0; }
.niveaus label { display: block; height: 100%; border: 2px solid var(--potlood); border-radius: 6px; padding: 16px 14px; cursor: pointer; text-align: center; font-weight: 900; background: #fff; }
.niveaus label::before { content: attr(data-sterren); display: block; color: var(--spot-inkt); letter-spacing: 3px; margin-bottom: 4px; }
.niveaus label small { display: block; font-weight: 400; color: var(--inkt-zacht); font-size: .84rem; }
.niveaus input:checked + label { border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt), 4px 4px 0 var(--spot); }
.niveaus input:focus-visible + label { outline: 3px solid var(--spot); outline-offset: 2px; }

.stepper { display: inline-flex; align-items: center; border: 2px solid var(--inkt); border-radius: 999px; overflow: hidden; background: #fff; }
.stepper button { width: 48px; height: 48px; border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; color: var(--inkt); font-weight: 900; }
.stepper button:hover { background: var(--papier); }
.stepper output { min-width: 50px; text-align: center; font: 700 1.4rem var(--stem); }

/* Bon: kassabon van het café */
.bon { position: sticky; top: 106px; background: var(--korrel), #fffef8; padding: 28px 26px 34px; box-shadow: var(--vel-schaduw); }
.bon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: linear-gradient(-45deg, transparent 8px, #fffef8 0) 0 0 / 16px 12px repeat-x, linear-gradient(45deg, transparent 8px, #fffef8 0) 0 0 / 16px 12px repeat-x; }
.bon .bon-kop { text-align: center; border-bottom: 2px dashed var(--potlood); padding-bottom: 14px; margin-bottom: 14px; }
.bon .bon-kop b { display: block; font: 700 1.15rem var(--stem); }
.bon .bon-kop span { font-size: .85rem; color: var(--inkt-zacht); }
.bon h3 { margin-bottom: 6px; }
.verdeling { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 12px 0; font-variant-numeric: tabular-nums; }
.verdeling th { text-align: left; font-weight: 900; color: var(--inkt-zacht); font-size: .8rem; padding-bottom: 6px; }
.verdeling td { padding: 8px 0; border-top: 1px dotted var(--potlood); vertical-align: top; }
.verdeling td.n, .verdeling th.n { text-align: right; width: 40px; font-weight: 900; }
.balk { height: 6px; border-radius: 3px; background: var(--papier-2); overflow: hidden; display: flex; margin-top: 6px; }
.balk i { display: block; height: 100%; transition: width .3s; }
.balk .m { background: #8fbf9e; } .balk .g { background: #e3bf55; } .balk .z { background: var(--spot); }
.legenda { display: flex; gap: 14px; font-size: .78rem; color: var(--inkt-zacht); font-weight: 700; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legenda .m { background: #8fbf9e; } .legenda .g { background: #e3bf55; } .legenda .z { background: var(--spot); }
.bon .totaal { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed var(--potlood); padding-top: 16px; margin-top: 10px; font-weight: 900; }
.prijs { font: 900 var(--t2)/1 var(--huis); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.waarschuwing { background: #fde2df; color: var(--spot-inkt); padding: 10px 12px; border-radius: 4px; font-size: .88rem; margin-top: 10px; font-weight: 700; }

/* ---------- Tabellen ---------- */
.tabel { width: 100%; border-collapse: collapse; background: var(--wit); box-shadow: var(--vel-schaduw); }
.tabel th, .tabel td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--potlood); vertical-align: top; }
.tabel th { background: var(--inkt); color: var(--papier); font-weight: 900; font-size: .86rem; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel-scroll { overflow-x: auto; }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 900; background: var(--papier-2); color: var(--inkt); }
.status-geleverd { background: #e1f0e6; color: var(--goed); }
.status-mislukt, .status-geannuleerd { background: #fde2df; color: var(--spot-inkt); }
.status-betaald { background: #f7ecc8; color: #7a5b00; }

/* ---------- Winkelwagen als rekening ---------- */
.rekening { max-width: 760px; margin: 0 auto; }
.rekening .bon { position: relative; top: 0; }
.rekening-regel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 18px 0; border-bottom: 1px dotted var(--potlood); }
.rekening-regel:last-of-type { border-bottom: 0; }
.rekening-regel b { font: 700 1.2rem/1.3 var(--stem); }
.rekening-regel .inhoud { color: var(--inkt-zacht); font-size: .92rem; grid-column: 1; }
.rekening-regel .bedrag { font-weight: 900; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; text-align: right; }
.rekening-regel form { grid-column: 2; text-align: right; }
.rekening-regel button.weg { background: none; border: 0; color: var(--spot-inkt); font-weight: 900; cursor: pointer; padding: 0; text-decoration: underline; font-size: .88rem; }
.rekening .acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; align-items: center; }

/* ---------- Bestelstatus: het kaartje dat je afscheurt ---------- */
.status-kaart { text-align: center; padding: 48px 32px; }
.draaier { width: 58px; height: 58px; border-radius: 50%; border: 6px solid var(--papier-2); border-top-color: var(--spot); margin: 0 auto 20px; animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.vink-groot { width: 72px; height: 72px; border-radius: 50%; background: var(--goed); color: #fff; display: grid; place-items: center; font-size: 2.2rem; margin: 0 auto 18px; }
.toegang { display: grid; grid-template-columns: minmax(0, 1fr) 210px; background: var(--wit); box-shadow: var(--vel-schaduw); border-radius: 10px; position: relative; text-align: left; }
.toegang .hoofddeel { padding: 38px 40px; }
.toegang .hoofddeel h1 { font-size: var(--t4); margin-bottom: .25em; }
.toegang .strook { border-left: 3px dashed var(--potlood); padding: 28px 22px; display: grid; place-items: center; text-align: center; background: var(--korrel), var(--papier); border-radius: 0 10px 10px 0; }
.toegang .strook b { font: 900 1.6rem/1 var(--huis); display: block; }
.toegang .strook span { font-size: .85rem; color: var(--inkt-zacht); font-weight: 700; }
.downloads { display: grid; gap: 10px; margin-top: 22px; }
@media (max-width: 680px) { .toegang { grid-template-columns: 1fr; } .toegang .strook { border-left: 0; border-top: 3px dashed var(--potlood); border-radius: 0 0 10px 10px; } .toegang .hoofddeel { padding: 30px 22px; } }

/* ---------- Over de quizmaster ---------- */
.over { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.over-verhaal p { font-size: 1.08rem; }
.handtekening { font: 700 1.6rem/1.2 var(--stem); margin-top: 28px; transform: rotate(-2deg); display: inline-block; }
.handtekening span { font: 400 1rem var(--huis); color: var(--inkt-zacht); }
.over-zij { position: sticky; top: 110px; display: grid; gap: 30px; }
.over-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--inkt); padding-top: 18px; }
.over-feiten b { display: block; font: 900 var(--t3)/1 var(--huis); }
.over-feiten span { font-size: .85rem; font-weight: 700; color: var(--inkt-zacht); }
@media (max-width: 900px) { .over { grid-template-columns: 1fr; } .over-zij { position: static; grid-template-columns: 260px 1fr; align-items: center; } }
@media (max-width: 560px) { .over-zij { grid-template-columns: 1fr; } }

/* Updatebalk (alleen lokaal) */
.updatebalk { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; gap: 16px; align-items: center; background: var(--zaal-nacht); color: var(--papier); padding: 12px 14px 12px 22px; border-radius: 999px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); font-weight: 700; border: 2px solid var(--spot); max-width: calc(100% - 32px); }
.updatebalk[hidden] { display: none; }

mark { background: #ffe58a; color: inherit; padding: 0 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .viltje svg line { stroke-dashoffset: 0; }
}

.voet .bedrijfsregel { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 18px; border-top: 1px solid rgba(238,245,219,.15); font-size: .85rem; color: #a9b8ae; }