/* ============================================================
   Aqua+ minigame, componenten.
   Bouwt op de tokens in aqua-tokens.css. Vlakke kleurvlakken,
   subtiele schaduw, geen glaseffect of decoratieve animatie.
   ============================================================ */

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
}

:where(button, a, input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---------------- Kaart + kopbalk ---------------- */
.kaart {
  width: 100%;
  max-width: 620px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  overflow: clip; /* clip, niet hidden: anders werkt position: sticky van de Controleer-knop niet */
}

.kop {
  background: var(--aqua-blue);
  color: var(--white);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.kop img { height: 30px; width: auto; display: block; }
.kop .eyebrow {
  margin-left: auto;
  margin-right: 72px; /* vrij van het sunburst-motief in de hoek */
  font-size: var(--fs-caption);
  color: var(--aqua-sky);
  text-align: right;
}

.body { padding: var(--sp-6); }

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--aqua-blue);
  margin: 0 0 var(--sp-3);
}
.sub { color: var(--ink-soft); font-size: var(--fs-small); margin: 0 0 var(--sp-5); }
.sub strong { color: var(--ink); font-weight: var(--fw-bold); }

/* ---------------- Voortgang + klok ---------------- */
.spelbalk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stap {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.klok {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--aqua-blue);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-small);
}
.klok.laag { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber); }
.klok.kritiek { color: var(--red); background: var(--red-bg); border-color: var(--red); }
.klokbalk {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.klokbalk > i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--aqua-blue);
  transform-origin: left center;
  transition: transform .2s linear, background .2s linear;
}
.klokbalk.laag > i { background: var(--amber); }
.klokbalk.kritiek > i { background: var(--red); }

/* ---------------- Schema ---------------- */
.schema {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.gat { fill: var(--white); stroke: var(--aqua-blue); stroke-width: 2.5; stroke-dasharray: 6 4; }

/* ---------------- Opties ---------------- */
.opties {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
@media (max-width: 460px) { .opties { grid-template-columns: repeat(2, 1fr); } }

.optie {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.optie:hover:not(:disabled) { border-color: var(--aqua-blue); background: var(--card-alt); }
.optie.gekozen {
  border-color: var(--aqua-blue);
  background: var(--card-alt);
  color: var(--aqua-blue);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 1px var(--aqua-blue);
}
.optie:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.optie.juist { border-color: var(--green); background: var(--green-bg); color: var(--green); opacity: 1; }
.optie.onjuist { border-color: var(--red); background: var(--red-bg); color: var(--red); opacity: 1; }
.optie svg { display: block; margin: 0 auto var(--sp-2); }

/* ---------------- Knoppen ---------------- */
.knop {
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-5);
  width: 100%;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.knop-primair { background: var(--aqua-blue); color: var(--white); }
.knop-primair:hover:not(:disabled) { background: var(--aqua-blue-700); }
.knop-secundair { background: var(--white); color: var(--aqua-blue); border-color: var(--aqua-blue); }
.knop-secundair:hover:not(:disabled) { background: var(--card-alt); }
.knop:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ---------------- Callout ---------------- */
.callout {
  border-left: var(--accent-bar) solid var(--aqua-blue);
  background: var(--card-alt);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  margin-bottom: var(--sp-4);
}
.callout.goed { border-left-color: var(--green); background: var(--green-bg); color: var(--green); }
.callout.fout { border-left-color: var(--red); background: var(--red-bg); color: var(--red); }
.callout.let-op { border-left-color: var(--amber); background: var(--amber-bg); color: var(--amber-ink); }
.callout .teken { font-weight: var(--fw-bold); margin-right: var(--sp-2); }

/* ---------------- Score ---------------- */
.scorevlak {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.scorevlak .cijfer {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--aqua-blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.scorevlak .label { font-size: var(--fs-small); color: var(--ink-soft); }
.pill {
  display: inline-block;
  background: var(--aqua-pill);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}

/* ---------------- Formulier ---------------- */
label { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); margin: var(--sp-4) 0 var(--sp-1); }
input, select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}
input:hover, select:hover { border-color: var(--aqua-cyan-text); }
.akkoord {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  font-weight: var(--fw-regular);
}
.akkoord input { width: auto; margin-top: 3px; flex: none; }
.akkoord a { color: var(--aqua-cyan-text); }

/* ---------------- Leaderboard ---------------- */
table.bord { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-bottom: var(--sp-4); }
table.bord th {
  background: var(--aqua-blue);
  color: var(--white);
  text-align: left;
  font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-caption);
  letter-spacing: 1px;
  text-transform: uppercase;
}
table.bord td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
table.bord tbody tr:nth-child(even) { background: var(--card); }
table.bord tbody tr.ikzelf { background: var(--card-alt); }
table.bord tbody tr.ikzelf td.pos { border-left: var(--accent-bar) solid var(--aqua-blue); }
table.bord tbody tr.ikzelf td { font-weight: var(--fw-bold); color: var(--aqua-blue); }
table.bord td.pos { width: 36px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
table.bord td.score { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.leeg { color: var(--ink-soft); font-size: var(--fs-small); padding: var(--sp-4) 0; }

/* ---------------- Voettekst ---------------- */
.voet {
  background: var(--aqua-blue-dark);
  color: var(--white);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-caption);
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  flex-wrap: wrap;
}
.voet .slogan { margin-left: auto; font-style: italic; color: var(--aqua-sky); }

.verborgen { display: none !important; }
.voet a { color: inherit; font-weight: var(--fw-bold); }
.overslaan { text-align: center; margin-top: var(--sp-2); }

/* Telefoon: tekening zo breed mogelijk, labels blijven leesbaar */
@media (max-width: 460px) {
  body { padding: var(--sp-3) var(--sp-2) var(--sp-8); }
  .body { padding: var(--sp-4); }
  .tekening { padding: var(--sp-2); }

  /* Levelscherm verticaal compacter, zodat de Controleer-knop in beeld blijft */
  .kop { padding: var(--sp-3) var(--sp-4); }
  .kop img { height: 24px; }
  .spelbalk { margin-bottom: var(--sp-2); }
  .klokbalk, .stappen { margin-bottom: var(--sp-3); }
  #scherm-level h1 { font-size: var(--fs-h2); }
  #scherm-level .sub, .vraag, .tekening, .opties { margin-bottom: var(--sp-3); }
  .opties.letters .optie { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); }
  #checkKnop { position: sticky; bottom: var(--sp-2); box-shadow: var(--shadow-card); }
}
.mini { font-size: var(--fs-caption); color: var(--ink-soft); margin-top: var(--sp-4); }

/* Sunburst als rustig merkaccent achter de kopbalk */
.merkaccent { position: relative; overflow: hidden; }
.merkaccent .sun {
  /* Rechterbovenhoek zo dat van de plus alleen de linkerarm en de onderste
     arm zichtbaar zijn (hoekpunt op de binnenhoek van het pluskruis). */
  position: absolute; right: -98px; top: -98px; width: 210px; height: 210px;
  opacity: .75; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   Aqua+ Challenge, aanvullingen
   ============================================================ */

.lijst { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.lijst li { margin-bottom: var(--sp-1); }

.vraag { font-weight: var(--fw-bold); margin: 0 0 var(--sp-4); }

/* Startscherm: de vier uitdagingen met level-iconen */
.uitdagingen {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.uitdagingen li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
}
.uitdagingen svg { flex: none; color: var(--aqua-blue); }

/* Voortgang: vier blokjes */
.stappen { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.stappen > i {
  flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--border);
}
.stappen > i.gedaan { background: var(--green); }
.stappen > i.gemist  { background: var(--amber); }
.stappen > i.nu      { background: var(--aqua-blue); }

/* Tekening */
.tekening {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.tekening svg { display: block; width: 100%; height: auto; }

/* Klikbare onderdelen in de tekening */
.hotspot { cursor: pointer; }
.hotspot rect, .hotspot circle, .hotspot line, .hotspot polyline { transition: none; }
.hotspot .raak { fill: transparent; stroke: transparent; }
.hotspot:hover .vlak { fill: var(--card-alt); stroke: var(--aqua-blue); }
.hotspot:hover .naam { fill: var(--aqua-blue); }
.hotspot:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.hotspot.juist .vlak   { fill: var(--green-bg); stroke: var(--green); }
.hotspot.juist .naam   { fill: var(--green); }
.hotspot.onjuist .vlak { fill: var(--red-bg); stroke: var(--red); }
.hotspot.onjuist .naam { fill: var(--red); }
.tekening.vast .hotspot { cursor: default; pointer-events: none; }

/* Meerkeuze met letters */
/* Twee kolommen houdt het level laag; op een telefoon onder elkaar, de labels zijn lang. */
.opties.letters { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (max-width: 460px) { .opties.letters { grid-template-columns: 1fr; } }
.opties.letters .optie {
  display: flex; align-items: center; gap: var(--sp-3);
  text-align: left; font-size: var(--fs-body); padding: var(--sp-3) var(--sp-4);
}
.opties.letters .optie .letter {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.opties.letters .optie.gekozen .letter { background: var(--aqua-blue); color: var(--white); }
.opties.letters .optie.juist .letter   { background: var(--green); color: var(--white); }
.opties.letters .optie.onjuist .letter { background: var(--red); color: var(--white); }

/* Levels-overzicht in het resultaatscherm */
table.bord td.tijd { text-align: right; font-variant-numeric: tabular-nums; }
table.bord td.uitslag { width: 24px; font-weight: var(--fw-bold); }
table.bord td.uitslag.ok  { color: var(--green); }
table.bord td.uitslag.nok { color: var(--amber-ink); }

/* Formuliervelden twee aan twee; invoervakken op één lijn, ook als een label
   over twee regels loopt. Op een telefoon onder elkaar. */
.velden { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-4); align-items: end; margin-bottom: var(--sp-5); }
.velden .callout { grid-column: 1 / -1; }
@media (max-width: 460px) { .velden { grid-template-columns: 1fr; } }

/* Ja/nee-keuze in het formulier */
.keuzeknoppen { display: flex; gap: var(--sp-3); }
.keuzeknop {
  flex: 1; font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold);
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.keuzeknop:hover { border-color: var(--aqua-blue); background: var(--card-alt); }
.keuzeknop.aan {
  border-color: var(--aqua-blue); background: var(--card-alt); color: var(--aqua-blue);
  box-shadow: inset 0 0 0 1px var(--aqua-blue);
}

/* Aftellen naar de vacaturepagina */
.aftellen { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.aftellen .lijn { height: 3px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.aftellen .lijn > i {
  display: block; height: 100%; width: 100%; background: var(--aqua-gradient);
  transform-origin: left center; transition: transform 1s linear;
}
.aftelTekst { font-size: var(--fs-small); color: var(--ink-soft); margin: var(--sp-3) 0 var(--sp-4); }
.aftelTekst strong { color: var(--aqua-blue); font-size: var(--fs-h1); font-variant-numeric: tabular-nums; }
a.knop { display: block; text-align: center; text-decoration: none; }

/* ============================================================
   Donker thema (voorstel marketing, sept 2026): donkerblauw vlak,
   witte tekst en iconen, rood als accent, lichtblauw voor bijregels.
   Tekeningen blijven op licht "papier", zodat de schema's leesbaar
   blijven zonder de tekencode aan te passen.
   Verwijder dit blok om terug te gaan naar het lichte thema.
   ============================================================ */
:root {
  --rood: #E52A21;                 /* bevestigd door marketing, zie sunburst */
  --vlak:        rgba(255,255,255,.08);
  --vlak-hover:  rgba(255,255,255,.14);
  --rand:        rgba(255,255,255,.18);
  --focus-ring-color: #FFFFFF;
}

/* Wit om de kaart, zodat het spel in het iframe op www.aqua.nl aansluit. */
body { background: var(--white); color: var(--white); }

.kaart { background: var(--aqua-blue-700); border-color: var(--rand); box-shadow: none; }
/* Even hoog op elk scherm, zodat het blok in het iframe niet verspringt.
   650px houdt de korte schermen gelijk; levels en formulier groeien mee. De voet
   blijft onderaan. Langere inhoud, zoals op een telefoon, groeit gewoon mee. */
body > div.kaart { min-height: 650px; display: flex; flex-direction: column; }
body > div.kaart > .body { flex: 1; }
.kop   { background: var(--aqua-blue-700); border-bottom: 1px solid var(--rand); }
.kop .sun { opacity: .9; }
.voet  { background: var(--aqua-blue-700); border-top: 1px solid var(--rand); color: var(--white); }
.voet .slogan { color: var(--aqua-sky); }

h1, h2, .vraag, label { color: var(--white); }
.sub, .mini, .stap, .leeg, .aftelTekst, .akkoord, .scorevlak .label { color: var(--aqua-sky); }
.sub strong, .aftelTekst strong { color: var(--white); }
.akkoord a { color: var(--white); }

/* Klok */
.klok { color: var(--white); background: var(--vlak); border-color: var(--rand); }
.klok.laag    { color: var(--white); background: rgba(227,154,31,.25); border-color: var(--amber); }
.klok.kritiek { color: var(--white); background: rgba(229,42,33,.35); border-color: var(--rood); }
.klokbalk { background: var(--rand); }
.klokbalk > i { background: var(--aqua-cyan); }
.klokbalk.kritiek > i { background: var(--rood); }
.klokbalk.laag > i { background: var(--amber); }
.stappen > i { background: var(--rand); }
.stappen > i.nu { background: var(--rood); }

/* Waaier draait mee met de klok (zie tikKlok in app.js) */
.sun .stralen { transform-box: fill-box; transform-origin: center; transition: transform .1s linear; }

/* Vlakken */
.uitdagingen li, .scorevlak, .callout { background: var(--vlak); border-color: var(--rand); }
.uitdagingen svg { color: var(--white); }
.scorevlak .cijfer { color: var(--white); }
.callout { border-left-color: var(--rood); }
.callout.goed   { border-left-color: var(--green); background: rgba(35,119,58,.3);  color: var(--white); }
.callout.fout   { border-left-color: var(--rood);  background: rgba(229,42,33,.3);  color: var(--white); }
.callout.let-op { border-left-color: var(--amber); background: rgba(227,154,31,.3); color: var(--white); }
.pill { background: var(--rood); }
.tekening, .schema { background: var(--white); border-color: transparent; }

/* Opties en keuzes */
.optie, .keuzeknop { background: var(--vlak); border-color: var(--rand); color: var(--white); }
.optie:hover:not(:disabled), .keuzeknop:hover { background: var(--vlak-hover); border-color: var(--white); }
.optie.gekozen, .keuzeknop.aan {
  background: rgba(229,42,33,.25); border-color: var(--rood); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--rood);
}
.optie.juist   { background: rgba(35,119,58,.35); border-color: var(--green); color: var(--white); }
.optie.onjuist { background: rgba(229,42,33,.35); border-color: var(--rood);  color: var(--white); }
.opties.letters .optie .letter { background: var(--vlak-hover); color: var(--white); }
.opties.letters .optie.gekozen .letter { background: var(--rood); }
.opties.letters .optie.onjuist .letter { background: var(--rood); }

/* Knoppen */
.knop-primair { background: var(--rood); }
.knop-primair:hover:not(:disabled) { background: var(--rood); filter: brightness(.85); }
.knop-secundair { background: transparent; color: var(--white); border-color: var(--white); }
.knop-secundair:hover:not(:disabled) { background: var(--vlak); }

/* Formulier */
input, select { background: var(--vlak); color: var(--white); border-color: var(--rand); }
input::placeholder { color: var(--aqua-sky); opacity: .7; }
input:hover, select:hover { border-color: var(--white); }
input[aria-invalid="true"] {
  border-color: var(--rood);
  box-shadow: inset 0 0 0 1px var(--rood);
  background: rgba(229,42,33,.18);
}
#telefoonFout { margin-top: var(--sp-2); }

/* Ranglijst */
table.bord th { background: var(--vlak-hover); color: var(--aqua-sky); }
table.bord td { border-bottom-color: var(--rand); }
table.bord tbody tr:nth-child(even) { background: var(--vlak); }
table.bord tbody tr.ikzelf { background: var(--vlak-hover); }
table.bord tbody tr.ikzelf td.pos { border-left-color: var(--rood); }
table.bord tbody tr.ikzelf td { color: var(--white); }
table.bord td.pos { color: var(--aqua-sky); }
table.bord td.uitslag.nok { color: var(--amber); }

/* Medailles voor plek 1, 2 en 3 op de ranglijst */
.medaille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: #1a1a1a;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.medaille.m1 { background: #E8B923; }
.medaille.m2 { background: #C4CAD3; }
.medaille.m3 { background: #C9803A; }

/* Medailles ploppen na elkaar in en glimmen kort. prefers-reduced-motion zet dit uit. */
.medaille {
  position: relative; overflow: hidden;
  animation: medaillePop .45s cubic-bezier(.16,1,.3,1) both;
}
.medaille.m2 { animation-delay: .15s; }
.medaille.m3 { animation-delay: .3s; }
.medaille::after {
  content: ''; position: absolute; inset: -4px;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: medailleGlim 1.2s ease-out .6s both;
}
.medaille.m2::after { animation-delay: .75s; }
.medaille.m3::after { animation-delay: .9s; }
@keyframes medaillePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes medailleGlim {
  to { transform: translateX(120%); }
}

/* Viering bij een podiumplek: grote medaille midden in beeld die uitfadet, plus confetti */
.viering {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.medaille.groot {
  width: 140px; height: 140px; font-size: var(--fs-display);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35), 0 12px 40px rgba(0,0,0,.35);
  animation: medailleGroot 3.2s cubic-bezier(.16,1,.3,1) both;
  animation-delay: 0s;
}
@keyframes medailleGroot {
  0%   { transform: scale(.2); opacity: 0; }
  15%  { transform: scale(1);  opacity: 1; }
  70%  { transform: scale(1);  opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.confetti {
  position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px;
  animation: confettiVal 3s linear both;
}
@keyframes confettiVal {
  0%   { translate: 0 0;      rotate: 0deg;   opacity: 1; }
  80%  { opacity: 1; }
  100% { translate: 0 110vh;  rotate: 720deg; opacity: 0; }
}

/* Aftellen */
.aftellen { border-top-color: var(--rand); }
.aftellen .lijn { background: var(--rand); }
.aftellen .lijn > i { background: var(--rood); }

/* ---------------- Privacyverklaring in een dialoogvenster ---------------- */
.privacyDialog {
  width: min(560px, calc(100vw - 2 * var(--sp-4)));
  max-width: none;
  max-height: min(80vh, 640px);
  padding: 0;
  margin: auto;
  color: var(--white);
}
/* display alleen als het venster openstaat: een kale `display: flex` overschrijft
   de browserregel `dialog:not([open]) { display: none }` en dan blijft het staan. */
.privacyDialog[open] { display: flex; flex-direction: column; }
.privacyDialog::backdrop { background: rgba(0, 0, 0, .55); }
.privacyKop {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rand);
  font-weight: var(--fw-bold);
}
.privacyKop form { margin-left: auto; }
.privacySluit {
  background: none;
  border: 0;
  color: inherit;
  font-size: var(--fs-h2);
  line-height: 1;
  padding: var(--sp-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.privacySluit:hover { background: var(--vlak-hover); }
/* Scrollen gebeurt hierbinnen: .kaart heeft overflow: clip, dus niet op het venster zelf. */
.privacyInhoud { overflow-y: auto; }
.privacyInhoud h1 { font-size: var(--fs-h2); }
.privacyInhoud h2 { font-size: var(--fs-body); margin-top: var(--sp-5); }
.privacyInhoud a { color: var(--white); }