:root {
  --rood: #b8141b;
  --rood-donker: #8c0c11;
  --geel: #ffc20e;
  --geel-titel: #f6a700;
  --creme: #fff5e1;
  --creme-diep: #fbe6bd;
  --zwart: #000;
  --tekst: #2b1d17;
  --tekst-zacht: #6b5448;
  --groen: #1f7a3d;
  --radius-groot: 22px;
  --radius: 12px;
  --font-titel: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;
  --font: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--creme);
}
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--zwart); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.wrap { width: min(100% - 2.5rem, 640px); margin-inline: auto; }

/* ───────── Kop ───────── */
.kop {
  position: relative;
  background: var(--rood);
  color: #fff;
  padding: 1.75rem 0 4.5rem;
  overflow: hidden;
  isolation: isolate;
}
.kop::after { /* gescheurde onderrand */
  content: '';
  position: absolute; inset: auto 0 -1px 0; height: 34px;
  background: var(--creme);
  clip-path: polygon(0 60%, 6% 40%, 12% 62%, 19% 35%, 27% 58%, 34% 38%, 42% 64%, 50% 40%, 57% 60%, 65% 34%, 73% 58%, 80% 40%, 88% 62%, 94% 42%, 100% 58%, 100% 100%, 0 100%);
}
.logo { text-align: center; line-height: 1; }
.logo .jumbo {
  font-family: var(--font); font-weight: 800; font-size: 2.6rem; letter-spacing: .01em;
  color: var(--geel);
  text-shadow: 3px 3px 0 var(--zwart), -1px -1px 0 var(--zwart), 1px -1px 0 var(--zwart), -1px 1px 0 var(--zwart);
}
.logo .vestiging { display: block; font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; margin-top: .15rem; }

.titel {
  position: relative;
  margin: 1.5rem auto 0;
  width: min(100%, 520px);
  padding: 1.6rem 1.4rem 1.9rem;
  transform: rotate(-4deg);
}
.titel .veeg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.titel h1 {
  margin: 0;
  font-family: var(--font-titel); font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  line-height: .95;
  text-align: center;
}
.titel .gour { color: var(--zwart); }
.titel .met-elkaar { color: var(--geel-titel); text-shadow: 2px 2px 0 rgba(140, 12, 17, .18); }
.titel .regel { display: block; }

.badge {
  position: absolute; right: max(1rem, calc(50% - 300px)); bottom: 2.4rem;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--geel); color: var(--rood);
  border: 3px solid var(--zwart);
  display: grid; place-content: center; text-align: center;
  transform: rotate(8deg);
  font-weight: 800; line-height: 1;
  z-index: 2;
}
.badge small { font-size: .78rem; color: var(--zwart); }
.badge strong { font-size: 1.55rem; }
.badge sup { font-size: .7em; }

.deco { position: absolute; z-index: -1; pointer-events: none; }
.deco.mijter { width: 74px; height: 92px; left: max(.6rem, calc(50% - 320px)); top: 5.2rem; transform: rotate(-12deg); }
.deco.ster1 { width: 26px; height: 26px; right: 12%; top: 1.4rem; }
.deco.ster2 { width: 18px; height: 18px; left: 18%; top: 1.2rem; }
.deco.noot1 { width: 34px; height: 34px; right: 6%; top: 5.5rem; }
.deco.noot2 { width: 26px; height: 26px; left: 6%; bottom: 3.4rem; }

/* ───────── Inhoud ───────── */
main { padding: 1rem 0 3rem; }
.intro h2 { font-size: 1.6rem; line-height: 1.15; margin: .5rem 0 .4rem; color: var(--rood); font-weight: 800; }
.intro p { margin: 0 0 1rem; color: var(--tekst); }

.feiten { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 1.5rem; }
.feit { background: var(--creme-diep); border-radius: var(--radius); padding: .7rem .85rem; display: flex; gap: .6rem; align-items: center; }
.feit svg { width: 34px; height: 34px; flex: none; }
.feit span { font-size: .92rem; line-height: 1.25; }
.feit b { display: block; font-size: 1.02rem; }

.melding { border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1.25rem; }
.melding.info { background: #fff; border: 2px dashed var(--rood); }
.melding.fout { background: #fde8e8; border-left: 5px solid var(--rood); color: var(--rood-donker); font-weight: 600; }
.melding a, .linkknop { color: var(--rood); font-weight: 700; }
.linkknop { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

/* ───────── Formulier ───────── */
.kaart {
  background: #fff;
  border-radius: var(--radius-groot);
  padding: 1.4rem 1.2rem 1.5rem;
  box-shadow: 0 2px 0 var(--creme-diep), 0 14px 30px -18px rgba(140, 12, 17, .45);
}
fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
legend, .label { font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; padding: 0; color: var(--zwart); }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.veld label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.veld input {
  width: 100%; font: inherit; font-size: 1.05rem; padding: .7rem .8rem;
  border: 2px solid #e2cfb0; border-radius: 10px; background: var(--creme);
}
.veld input:focus { border-color: var(--zwart); outline: none; background: #fff; }

.dagen { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dag input { position: absolute; opacity: 0; pointer-events: none; }
.dag label {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  border: 2px solid #e2cfb0; border-radius: 14px; padding: .75rem .8rem;
  background: var(--creme); line-height: 1.15; transition: border-color .15s, background .15s;
}
.dag label svg { width: 34px; height: 34px; flex: none; }
.dag label small { display: block; font-weight: 600; font-size: .85rem; color: var(--tekst-zacht); }
.dag label b { font-size: 1.05rem; }
.dag input:checked + label { border-color: var(--rood); background: #fff4c7; box-shadow: inset 0 0 0 1px var(--rood); }
.dag input:focus-visible + label { outline: 3px solid var(--zwart); outline-offset: 2px; }

.aantal { display: flex; align-items: center; gap: 1rem; }
.stap {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rood); color: #fff; font: 800 1.8rem/1 var(--font);
  display: grid; place-items: center; padding-bottom: 4px;
}
.stap:disabled { background: #e6d6c0; color: #fff; cursor: not-allowed; }
.aantal output { font-size: 2.4rem; font-weight: 800; min-width: 2ch; text-align: center; color: var(--zwart); }
.aantal .eenheid { font-weight: 700; color: var(--tekst-zacht); }
.max-hint { font-size: .88rem; color: var(--tekst-zacht); margin: .35rem 0 0; }

.spaarkaarten { margin-top: 1rem; background: var(--creme); border-radius: 14px; padding: .9rem; }
.kaartjes { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.kaartje {
  width: 46px; padding: 5px; background: var(--rood); border-radius: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  animation: plop .25s ease-out;
}
.kaartje i { aspect-ratio: 1; border-radius: 50%; background: var(--geel); }
@keyframes plop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.som { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .2rem 1.4rem; }
.som div { line-height: 1.15; }
.som b { display: block; font-size: 1.3rem; color: var(--zwart); }
.som span { font-size: .85rem; color: var(--tekst-zacht); }

.akkoord { display: flex; gap: .75rem; align-items: flex-start; background: #fff4c7; border-radius: 14px; padding: .9rem; cursor: pointer; }
.akkoord input { width: 24px; height: 24px; flex: none; margin-top: .15rem; accent-color: var(--rood); }
.akkoord span { font-size: .97rem; line-height: 1.4; }

#turnstile { margin: 1rem 0 0; min-height: 0; }

.knop {
  display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
  width: 100%; margin-top: 1.25rem; padding: 1rem 1.2rem;
  font: 800 1.2rem/1.1 var(--font); color: var(--zwart);
  background: var(--geel); border: 3px solid var(--zwart); border-radius: 14px;
  box-shadow: 0 4px 0 var(--zwart); cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.knop:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--zwart); }
.knop:disabled { opacity: .6; cursor: progress; }
.knop.secundair { background: #fff; }
.fout-tekst { color: var(--rood-donker); font-weight: 600; font-size: .92rem; margin: .3rem 0 0; }

/* ───────── Ophalen ───────── */
.ophalen { margin-top: 2.25rem; }
.ophalen h2 { font-family: var(--font-titel); font-weight: 400; font-size: 1.9rem; color: var(--rood); margin: 0 0 .75rem; transform: rotate(-1.5deg); }
.ophalen ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ophalen li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: .75rem; align-items: start; }
.ophalen li::before {
  content: counter(s); width: 36px; height: 36px; border-radius: 50%;
  background: var(--rood); color: #fff; font-weight: 800; display: grid; place-items: center;
}
.ophalen li p { margin: .35rem 0 0; }

/* ───────── Bevestiging ───────── */
.bevestiging { text-align: center; }
.bevestiging .vink { width: 64px; height: 64px; margin: 0 auto .5rem; }
.bevestiging h2 { font-size: 1.7rem; color: var(--groen); margin: 0 0 .25rem; }
.ticket {
  margin: 1.2rem 0; background: var(--creme); border: 3px dashed var(--rood);
  border-radius: 16px; padding: 1.1rem; text-align: left;
}
.ticket .nummer { text-align: center; margin-bottom: .9rem; }
.ticket .nummer span { display: block; font-size: .9rem; color: var(--tekst-zacht); font-weight: 700; }
.ticket .nummer strong { font-size: 2.3rem; letter-spacing: .04em; color: var(--zwart); line-height: 1.1; }
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.ticket dt { color: var(--tekst-zacht); }
.ticket dd { margin: 0; font-weight: 700; }
.waarschuwing {
  background: var(--rood); color: #fff; border-radius: 16px; padding: 1rem 1.1rem; text-align: left;
}
.waarschuwing strong { display: block; font-size: 1.25rem; color: var(--geel); margin-bottom: .25rem; line-height: 1.2; }
.waarschuwing p { margin: 0; font-size: .97rem; }
.screenshot-tip { font-size: .92rem; color: var(--tekst-zacht); margin: 1rem 0 0; }

footer { text-align: center; font-size: .88rem; color: var(--tekst-zacht); padding: 1.5rem 0 2.5rem; }
footer a { color: inherit; }

.laden { text-align: center; padding: 2rem 0; color: var(--tekst-zacht); }
[hidden] { display: none !important; }

@media (max-width: 420px) {
  .velden, .dagen { grid-template-columns: 1fr; }
  .feiten { grid-template-columns: 1fr; }
  .badge { width: 82px; height: 82px; bottom: 2rem; right: .6rem; }
  .badge strong { font-size: 1.3rem; }
  .deco.mijter { width: 52px; height: 65px; top: 6.4rem; }
}