/* ============================================================
   SPORT & FUN KAMPEN — "De sportdag-poster"
   Design system: inktlijnen, stickerknoppen, polaroids, doodles.
   Palet en lettervormen komen rechtstreeks uit het logo.
   ============================================================ */

:root {
  --ink: #191919;
  --papier: #fffdf4;
  --papier-donker: #fbf6e4;
  --wit: #ffffff;

  --geel: #f7d842;
  --geel-fel: #ffd230;
  --geel-zacht: #fff4be;

  --groen: #3d9b4f;
  --groen-zacht: #e3f2e2;
  --oranje: #de5a2a;
  --oranje-zacht: #fdeadd;
  --paars: #5b2d8e;
  --paars-zacht: #efe7f7;
  --blauw: #24418e;
  --blauw-zacht: #e6ebf8;
  --hemel: #4fa6d8;
  --hemel-zacht: #e4f2fa;

  --f-display: "Luckiest Guy", "Baloo 2", cursive;
  --f-kop: "Baloo 2", "Nunito", sans-serif;
  --f-body: "Nunito", "Segoe UI", sans-serif;

  --schaduw: 6px 6px 0 var(--ink);
  --schaduw-klein: 4px 4px 0 var(--ink);
  --rand: 3px solid var(--ink);
  --radius: 18px;
  /* handgetekende, licht scheve radius */
  --radius-wiebel: 255px 25px 225px 25px / 25px 225px 25px 255px;

  --maat: min(1180px, 92vw);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--papier);
  /* subtiele confetti-stippen in de papierachtergrond */
  background-image:
    radial-gradient(rgba(61, 155, 79, .07) 2.5px, transparent 3px),
    radial-gradient(rgba(222, 90, 42, .07) 2.5px, transparent 3px),
    radial-gradient(rgba(36, 65, 142, .06) 2.5px, transparent 3px);
  background-size: 340px 340px, 420px 420px, 520px 520px;
  background-position: 0 0, 140px 220px, 260px 90px;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--geel); color: var(--ink); }

/* ---------- typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-kop);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .6em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--oranje); }

:focus-visible {
  outline: 3px dashed var(--blauw);
  outline-offset: 3px;
  border-radius: 4px;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
  text-transform: uppercase;
}

h1.display { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2.display { font-size: clamp(1.8rem, 4vw, 2.9rem); }

/* regenboogletters, zoals het logo */
.kleurletters .woord { display: inline-block; white-space: nowrap; }
.kleurletters .kl { display: inline-block; text-shadow: 2.5px 2.5px 0 var(--ink); }
.kl-1 { color: var(--groen); }
.kl-2 { color: var(--blauw); }
.kl-3 { color: var(--oranje); }
.kl-4 { color: var(--paars); }
.kl-5 { color: var(--geel-fel); }
.kl-6 { color: var(--hemel); }
.kl-op { transform: rotate(-2.5deg) translateY(-1px); }
.kl-neer { transform: rotate(2deg) translateY(1px); }

/* gele markeerstift onder een kernwoord */
.markeer {
  background-image: linear-gradient(104deg, transparent .6%, var(--geel) 2.4%, var(--geel) 97.6%, transparent 99.2%);
  background-repeat: no-repeat;
  background-size: 100% .48em;
  background-position: 0 88%;
  padding: 0 .12em;
}

.sublijn {
  font-family: var(--f-kop);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ink);
}

/* ---------- lay-out ---------- */

.wrap { width: var(--maat); margin-inline: auto; }

.sectie { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }
.sectie--strak { padding-block: clamp(2rem, 4vw, 3rem); }

.sectie-kop { max-width: 60ch; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

.band {
  background: var(--geel);
  border-top: var(--rand);
  border-bottom: var(--rand);
  position: relative;
  overflow: hidden;
}
.band--zacht { background: var(--geel-zacht); }
.band--papier { background: var(--papier-donker); }
.band .confetti { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

.golf { display: block; width: 100%; height: auto; margin-bottom: -2px; }

/* ---------- knoppen (stickers) ---------- */

.knop {
  display: inline-block;
  font-family: var(--f-kop);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ink);
  background: var(--geel-fel);
  border: var(--rand);
  border-radius: 14px;
  padding: .8rem 1.5rem;
  text-decoration: none;
  box-shadow: var(--schaduw-klein);
  transform: rotate(-1deg);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  cursor: pointer;
}
.knop:hover, .knop:focus-visible {
  color: var(--ink);
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--geel);
}
.knop:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.knop--groot { font-size: 1.3rem; padding: 1rem 2rem; }
.knop--wit { background: var(--wit); }
.knop--wit:hover, .knop--wit:focus-visible { background: var(--papier); }
.knop--groen { background: var(--groen); color: var(--wit); }
.knop--groen:hover, .knop--groen:focus-visible { background: #35893f; color: var(--wit); }
.knop--recht { transform: none; }

.knop .pijl { display: inline-block; transition: transform .15s ease; margin-left: .35em; }
.knop:hover .pijl { transform: translateX(4px); }

/* tekstlink met dikke pijl */
.doorlink {
  font-family: var(--f-kop);
  font-weight: 700;
  color: var(--blauw);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* ---------- header ---------- */

.site-kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--papier);
  border-bottom: var(--rand);
}
.site-kop__binnen {
  width: var(--maat);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .65rem;
}
.site-kop__logo img { width: clamp(150px, 18vw, 205px); height: auto; }
.site-kop__logo { flex: none; display: inline-block; transition: transform .2s ease; }
.site-kop__logo:hover { transform: rotate(-1.5deg) scale(1.02); }

.hoofdnav { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.4rem); }
.hoofdnav a:not(.knop) {
  font-family: var(--f-kop);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  padding: .35rem .4rem;
  position: relative;
}
.hoofdnav a:not(.knop)::after {
  content: "";
  position: absolute;
  left: .3rem; right: .3rem; bottom: 0;
  height: 4px;
  background: var(--oranje);
  border-radius: 3px;
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left;
  transition: transform .18s ease;
}
.hoofdnav a:not(.knop):hover::after,
.hoofdnav a:not(.knop)[aria-current="page"]::after { transform: scaleX(1) rotate(-1deg); }
.hoofdnav .knop { font-size: .98rem; padding: .55rem 1.1rem; }

.menu-knop {
  display: none;
  background: var(--wit);
  border: var(--rand);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: .45rem .6rem;
  font-family: var(--f-kop);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  align-items: center;
  gap: .45rem;
}
.menu-knop svg { width: 20px; height: 20px; }

@media (max-width: 920px) {
  .menu-knop { display: inline-flex; }
  .hoofdnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--papier);
    border-bottom: var(--rand);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem clamp(1rem, 4vw, 2rem) 1.4rem;
    gap: .35rem;
    box-shadow: 0 14px 24px -14px rgba(0,0,0,.35);
  }
  .hoofdnav.open { display: flex; }
  .hoofdnav a:not(.knop) { font-size: 1.2rem; padding: .55rem .2rem; border-bottom: 2px dashed rgba(25,25,25,.15); }
  .hoofdnav .knop { margin-top: .6rem; text-align: center; }
}

/* ---------- hero ---------- */

.hero { position: relative; padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.hero__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: center;
}
.hero--enkel .hero__binnen { grid-template-columns: 1fr; }
.hero__tekst { max-width: 58ch; }
.hero__tekst .knop { margin-top: 1.2rem; }
.hero__doodle { position: absolute; pointer-events: none; opacity: .9; }

.hero__foto { position: relative; }
.hero__foto .foto { margin-inline: auto; }

@media (max-width: 860px) {
  .hero__binnen { grid-template-columns: 1fr; }
  .hero__foto { max-width: 560px; }
}

/* ---------- fotokaders (polaroids) ---------- */

.foto {
  background: var(--wit);
  border: var(--rand);
  border-radius: 14px;
  padding: 10px 10px 14px;
  box-shadow: var(--schaduw);
  transform: rotate(-1.6deg);
  transition: transform .2s ease;
}
.foto img { border-radius: 8px; width: 100%; object-fit: cover; }
.foto--r { transform: rotate(1.8deg); }
.foto:hover { transform: rotate(0deg) scale(1.015); }

/* plakband-hoekjes */
.foto--tape { position: relative; }
.foto--tape::before, .foto--tape::after {
  content: "";
  position: absolute;
  width: 86px; height: 26px;
  background: rgba(247, 216, 66, .85);
  border: 2px solid rgba(25,25,25,.55);
  top: -13px;
  transform: rotate(-4deg);
  border-radius: 3px;
}
.foto--tape::before { left: 8%; }
.foto--tape::after { right: 8%; transform: rotate(5deg); }

/* ---------- kaarten ---------- */

.kaart {
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  position: relative;
}
.kaart--geel { background: var(--geel-zacht); }
.kaart--zweef { transition: transform .2s ease, box-shadow .2s ease; }
.kaart--zweef:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--ink); }

.tilt-l { transform: rotate(-1.2deg); }
.tilt-r { transform: rotate(1.2deg); }

/* kaartenrij (aanbod) */
.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: stretch;
}
.aanbod-kaart { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.aanbod-kaart__foto { border-bottom: var(--rand); position: relative; }
.aanbod-kaart__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aanbod-kaart__label {
  position: absolute;
  left: 14px; bottom: -16px;
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  background: var(--geel-fel);
  border: var(--rand);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: .45rem .8rem .3rem;
  transform: rotate(-2deg);
}
.aanbod-kaart__label--groen { background: var(--groen); color: var(--wit); }
.aanbod-kaart__label--hemel { background: var(--hemel); color: var(--wit); }
.aanbod-kaart__body { padding: 1.9rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.aanbod-kaart__body .knop { align-self: flex-start; margin-top: auto; }

/* ---------- stickerbadges (cijfers op home) ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3rem);
  justify-content: center;
}
.badge {
  width: clamp(150px, 17vw, 195px);
  aspect-ratio: 1;
  border: var(--rand);
  border-radius: var(--radius-wiebel);
  background: var(--wit);
  box-shadow: var(--schaduw-klein);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  gap: .1rem;
}
.badge:nth-child(1) { transform: rotate(-3deg); background: var(--groen-zacht); }
.badge:nth-child(2) { transform: rotate(2deg); background: var(--oranje-zacht); }
.badge:nth-child(3) { transform: rotate(-1.5deg); background: var(--hemel-zacht); }
.badge__cijfer {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1;
}
.badge:nth-child(1) .badge__cijfer { color: var(--groen); text-shadow: 2.5px 2.5px 0 var(--ink); }
.badge:nth-child(2) .badge__cijfer { color: var(--oranje); text-shadow: 2.5px 2.5px 0 var(--ink); }
.badge:nth-child(3) .badge__cijfer { color: var(--hemel); text-shadow: 2.5px 2.5px 0 var(--ink); }
.badge__label { font-family: var(--f-kop); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }

/* ---------- tekst + foto rijen ---------- */

.rij {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
}
.rij + .rij { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.rij__foto { position: relative; }
.rij--omgekeerd { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.rij--omgekeerd .rij__foto { order: -1; }
@media (max-width: 860px) {
  .rij, .rij--omgekeerd { grid-template-columns: 1fr; }
  .rij--omgekeerd .rij__foto { order: 0; }
  .rij__foto { max-width: 540px; }
}

/* ---------- lijsten met doodle-vinkjes ---------- */

.doodlelijst { list-style: none; margin: 0 0 1.1em; padding: 0; }
.doodlelijst li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .55rem;
}
.doodlelijst li > svg {
  position: absolute;
  left: 0;
  top: .3em;
  width: 1.35rem;
  height: 1.35rem;
}

/* ---------- feitenkaart (data/locatie/prijzen) ---------- */

.feiten { display: grid; gap: .1rem; }
.feiten p { margin: 0; }

.icoonrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.icoonkaart {
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-klein);
  padding: 1.2rem 1.2rem 1.1rem;
  text-align: center;
}
.icoonkaart:nth-child(odd) { transform: rotate(-.8deg); }
.icoonkaart:nth-child(even) { transform: rotate(.8deg); }
.icoonkaart svg { width: 44px; height: 44px; margin-inline: auto; margin-bottom: .5rem; display: block; }
.icoonkaart h2, .icoonkaart h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}
.icoonkaart p { margin: 0; font-weight: 600; line-height: 1.45; }

/* ---------- video ---------- */

.video {
  position: relative;
  border: var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw);
  background: var(--ink);
  aspect-ratio: 16 / 9;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.video-item .bijschrift {
  font-family: var(--f-kop);
  font-weight: 700;
  margin-top: .7rem;
  margin-bottom: 0;
}

/* thumbnail-tegel die een video-popup opent */
.video-thumb {
  display: block;
  position: relative;
  border: var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw-klein);
  cursor: pointer;
  padding: 0;
  background: var(--ink);
  width: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.video-thumb:hover { transform: translate(-2px, -2px); box-shadow: var(--schaduw); }
.video-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .92; }
.video-thumb .speel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-thumb .speel span {
  width: 64px; height: 64px;
  background: var(--geel-fel);
  border: var(--rand);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}
.video-thumb:hover .speel span { transform: scale(1.12) rotate(-4deg); }
.video-thumb .speel svg { width: 24px; height: 24px; margin-left: 4px; }

/* ---------- galerij + lightbox ---------- */

.galerij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.galerij .foto { padding: 8px 8px 10px; cursor: zoom-in; }
.galerij .foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.galerij button.foto { display: block; width: 100%; }

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 18, 8, .88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
}
.lichtbak.open { display: flex; }
.lichtbak img, .lichtbak .video { max-width: min(1100px, 94vw); max-height: 88vh; }
.lichtbak img {
  object-fit: contain;
  border: 4px solid var(--wit);
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.lichtbak .video { width: min(1000px, 94vw); aspect-ratio: 16 / 9; }
.lichtbak__sluit {
  position: absolute;
  top: 18px; right: 18px;
  width: 52px; height: 52px;
  background: var(--geel-fel);
  border: var(--rand);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-kop);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lichtbak__sluit:hover { transform: rotate(90deg); }

/* ---------- agenda ---------- */

.agenda-lijst { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.agenda-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-klein);
  padding: 1.1rem 1.4rem;
  font-family: var(--f-kop);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.agenda-item:nth-child(odd) { transform: rotate(-.6deg); }
.agenda-item:nth-child(even) { transform: rotate(.5deg); }
.agenda-item:hover {
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
  color: var(--ink);
}
.agenda-item .stip { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ink); }
.agenda-item:nth-child(3n+1) .stip { background: var(--groen); }
.agenda-item:nth-child(3n+2) .stip { background: var(--oranje); }
.agenda-item:nth-child(3n+3) .stip { background: var(--hemel); }
.agenda-item .pijl { flex: none; font-family: var(--f-display); font-size: 1.3rem; transition: transform .18s ease; }
.agenda-item:hover .pijl { transform: translateX(6px); }
.agenda-item .agenda-tekst { flex: 1; }

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.teamlid { text-align: center; padding-top: 3.4rem; margin-top: 3rem; }
.teamlid__foto {
  width: 118px; height: 118px;
  border-radius: 50%;
  border: var(--rand);
  box-shadow: 3px 3px 0 var(--ink);
  object-fit: cover;
  background: var(--geel-zacht);
  margin: -6.6rem auto .9rem;
  position: relative;
}
.teamlid h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.teamlid:nth-child(1) h2 { color: var(--groen); }
.teamlid:nth-child(2) h2 { color: var(--oranje); }
.teamlid:nth-child(3) h2 { color: var(--blauw); }
.teamlid:nth-child(4) h2 { color: var(--paars); }
.teamlid p { margin: 0; font-weight: 600; }

/* ---------- formulieren ---------- */

.veld { margin-bottom: 1.05rem; }
.veld label {
  display: block;
  font-family: var(--f-kop);
  font-weight: 700;
  margin-bottom: .3rem;
}
.veld input, .veld textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--wit);
  border: var(--rand);
  border-radius: 12px;
  padding: .7rem .9rem;
  box-shadow: 3px 3px 0 rgba(25,25,25,.18);
  transition: box-shadow .15s ease, transform .15s ease;
}
.veld input:focus, .veld textarea:focus {
  outline: 3px dashed var(--blauw);
  outline-offset: 2px;
}
.veld textarea { min-height: 150px; resize: vertical; }

/* ---------- popup (aanmelden) ---------- */

.popup {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 8, .8);
  padding: 4vmin;
}
.popup.open { display: flex; }
.popup__kaart {
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--papier);
  border: var(--rand);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 rgba(0,0,0,.35);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  position: relative;
}
.popup__sluit {
  position: absolute;
  top: 12px; right: 12px;
  width: 42px; height: 42px;
  background: var(--wit);
  border: var(--rand);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--f-kop);
  font-weight: 800;
  font-size: 1.2rem;
  cursor: pointer;
}
.balk {
  height: 18px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--wit);
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.balk span {
  display: block;
  height: 100%;
  width: 50%;
  background: repeating-linear-gradient(-45deg, var(--geel-fel) 0 12px, var(--geel) 12px 24px);
  border-right: 2.5px solid var(--ink);
}
.microtekst { font-size: .85rem; opacity: .75; text-align: center; margin-top: .8rem; }

/* ---------- prikbord-notitie (mededelingen zoals "aanmelding gesloten") ---------- */

.notitie {
  background: var(--geel-zacht);
  border: var(--rand);
  border-radius: 6px 22px 8px 20px;
  box-shadow: var(--schaduw-klein);
  padding: 1.2rem 1.5rem;
  transform: rotate(-.8deg);
  position: relative;
}
.notitie::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 110px;
  height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(79, 166, 216, .5);
  border: 2px solid rgba(25,25,25,.45);
  border-radius: 3px;
}
.notitie h2, .notitie h3 { margin-bottom: .3rem; }
.notitie p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */

.site-voet {
  background: var(--ink);
  color: var(--papier);
  margin-top: clamp(3rem, 7vw, 5rem);
  position: relative;
}
.site-voet__golf { display: block; width: 100%; height: auto; transform: translateY(1px); }
.site-voet__binnen {
  width: var(--maat);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  align-items: start;
}
.site-voet h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--geel-fel);
  margin-bottom: .8rem;
}
.site-voet ul { list-style: none; margin: 0; padding: 0; }
.site-voet li { margin-bottom: .4rem; }
.site-voet a { color: var(--papier); text-decoration: none; border-bottom: 2px solid transparent; }
.site-voet a:hover { color: var(--geel-fel); border-bottom-color: var(--geel-fel); }
.site-voet__logo {
  background: var(--papier);
  border: 3px solid var(--geel-fel);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  box-shadow: 5px 5px 0 rgba(247, 216, 66, .4);
  transform: rotate(-1.2deg);
}
@media (max-width: 820px) {
  .site-voet__binnen { grid-template-columns: 1fr 1fr; }
  .site-voet__kolom--logo { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 520px) {
  .site-voet__binnen { grid-template-columns: 1fr; }
}

/* ---------- longread (privacy e.d.) ---------- */

.longread { max-width: 74ch; }
.longread h3 {
  margin-top: 2.2rem;
  padding-bottom: .3rem;
  border-bottom: 3px solid var(--geel);
  display: inline-block;
}
.longread ul { padding-left: 1.3rem; }
.longread li { margin-bottom: .35rem; }

/* ---------- inklapbare vraag (faq) ---------- */

details.vraag {
  background: var(--wit);
  border: var(--rand);
  border-radius: 14px;
  box-shadow: var(--schaduw-klein);
  margin-bottom: 1rem;
  overflow: hidden;
}
details.vraag summary {
  font-family: var(--f-kop);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 1.3rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::after {
  content: "+";
  font-family: var(--f-display);
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--oranje);
}
details.vraag[open] summary::after { content: "–"; }
details.vraag .antwoord { padding: 0 1.3rem 1.2rem; }

/* ---------- reveal-animaties ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px) rotate(.001deg);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
  }
  .reveal.zichtbaar { opacity: 1; transform: translateY(0); }
  .reveal:nth-child(2) { transition-delay: .08s; }
  .reveal:nth-child(3) { transition-delay: .16s; }
  .reveal:nth-child(4) { transition-delay: .24s; }

  @keyframes zweef {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
  }
  .zweeft { animation: zweef 5.5s ease-in-out infinite; }

  @keyframes stuiter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .zweeft { animation: none; }
}

/* ---------- diversen ---------- */

.uitgelijnd-midden { text-align: center; }
.smal { max-width: 68ch; margin-inline: auto; }

.embed-formulier {
  border: var(--rand);
  border-radius: var(--radius);
  background: var(--wit);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.embed-formulier iframe { display: block; width: 100%; border: 0; }

.skiplink {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 99;
  background: var(--geel-fel);
  border: var(--rand);
  border-radius: 10px;
  padding: .5rem 1rem;
  font-family: var(--f-kop);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.skiplink:focus-visible { left: 8px; }

.doodle { pointer-events: none; user-select: none; }