:root{--cookie-vlak:#2A0A08;--cookie-accent:#DE1F00;--cookie-knop:#DE1F00;--cookie-max:1200px;--cookie-tekst:#F3E9E7;--cookie-venster-tekst:#121319;--cookie-lijn:#E6E7EA;--cookie-display:"Clash Display",system-ui,sans-serif}
/* ============================================================
   LAB35: cookietoestemming, styling
   Merk-neutraal: alle kleuren en maten lopen via custom properties
   met een nette fallback. Zet in de site-CSS alleen de variabelen
   die je wilt afwijken, bijvoorbeeld:

     :root{
       --cookie-vlak:#0C1130;
       --cookie-accent:#F2780B;
       --cookie-knop:#2E33D9;
     }
   ============================================================ */

.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--cookie-z, 300);
  background: var(--cookie-vlak, #11162e);
  color: var(--cookie-tekst, #dde3ff);
  border-top: 4px solid var(--cookie-accent, #f2780b);
  box-shadow: 0 -18px 50px rgba(6, 8, 32, .35);
  font-family: var(--cookie-font, inherit);
}
.cookie[hidden] { display: none; }

.cookie__in {
  max-width: var(--cookie-max, 1200px);
  margin-inline: auto;
  padding: 22px var(--cookie-gap, 24px);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 20px 40px;
}
.cookie__tekst { max-width: 64ch; }
.cookie__tekst h2 {
  color: var(--cookie-kop, #fff);
  font-family: var(--cookie-display, inherit);
  font-size: 1.12rem; margin: 0 0 6px; line-height: 1.2;
}
.cookie__tekst p { margin: 0; font-size: .94rem; line-height: 1.6; }
.cookie__tekst a { color: var(--cookie-kop, #fff); text-decoration: underline; text-underline-offset: 3px; }

.cookie__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Accepteren en weigeren zijn met opzet identiek: weigeren moet net zo
   makkelijk zijn als accepteren. Maak ze in de site-CSS nooit ongelijk. */
.cookie__knop {
  font-family: var(--cookie-display, inherit);
  font-weight: 600; font-size: 1rem;
  padding: 13px 24px; border-radius: var(--cookie-radius, 10px);
  border: 1.5px solid transparent; cursor: pointer;
  background: var(--cookie-knop, #2e33d9);
  color: var(--cookie-knop-tekst, #fff);
  transition: transform .2s ease, background .2s ease;
}
.cookie__knop:hover { transform: translateY(-2px); }
.cookie__knop--rand {
  background: transparent;
  color: var(--cookie-knop-tekst, #fff);
  border-color: currentColor;
}
.cookie__link {
  background: none; border: 0; padding: 10px 4px; cursor: pointer;
  font-family: var(--cookie-display, inherit); font-weight: 600; font-size: .95rem;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.cookie__link:hover { color: var(--cookie-kop, #fff); }

/* ── voorkeurenvenster ─────────────────────────────────── */
.cookie__venster {
  border: 0; padding: 0;
  border-radius: var(--cookie-radius, 10px);
  max-width: 560px; width: calc(100% - 32px);
  color: var(--cookie-venster-tekst, #0c1130);
  background: var(--cookie-venster-vlak, #fff);
  box-shadow: 0 30px 80px rgba(6, 8, 32, .4);
}
.cookie__venster::backdrop { background: rgba(6, 8, 32, .6); }
.cookie__venster form { padding: clamp(24px, 4vw, 34px); }
.cookie__venster h2 {
  font-family: var(--cookie-display, inherit);
  font-size: 1.5rem; margin: 0 0 8px; line-height: 1.15;
}
.cookie__intro { margin: 0 0 22px; font-size: .95rem; opacity: .75; }

.cookie__cat { border-top: 1.5px solid var(--cookie-lijn, #e4ebff); padding: 16px 0; }
.cookie__cat label {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--cookie-display, inherit); font-size: 1.02rem;
}
.cookie__cat input {
  width: 20px; height: 20px; flex: none;
  accent-color: var(--cookie-knop, #2e33d9);
}
.cookie__cat input[disabled] + span { cursor: default; }
.cookie__cat em {
  font-style: normal; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .6; margin-left: 8px;
}
.cookie__cat p { margin: 8px 0 0 32px; font-size: .92rem; opacity: .75; }

.cookie__vensterknoppen {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
  border-top: 1.5px solid var(--cookie-lijn, #e4ebff); padding-top: 22px;
}
.cookie__vensterknoppen .cookie__knop { flex: 1 1 160px; text-align: center; }
.cookie__vensterknoppen .cookie__knop--licht {
  background: transparent;
  color: var(--cookie-venster-tekst, #0c1130);
  border-color: var(--cookie-lijn, #e4ebff);
}

/* De balk dekt de onderkant af; deze ruimte houdt de laatste regel
   en de footerknoppen bereikbaar zolang hij staat. */
body.heeft-cookiebanner { padding-bottom: 190px; }

@media (max-width: 880px) {
  .cookie__in { flex-direction: column; align-items: stretch; padding-block: 18px; }
  .cookie__knoppen { width: 100%; }
  .cookie__knoppen .cookie__knop { flex: 1 1 140px; }
  .cookie__link { width: 100%; text-align: center; }
  body.heeft-cookiebanner { padding-bottom: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie__knop { transition: none; }
  .cookie__knop:hover { transform: none; }
}

.cookieknop{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.f-voet{flex-wrap:wrap;row-gap:8px}