/* Manrope staat op onze eigen server in plaats van bij Google. Dat scheelt twee
   verbindingen en een stylesheet die het tekenen tegenhield, en het voorkomt dat
   elke bezoeker ongevraagd een verzoek naar Google doet - wat slecht paste bij
   een site die pas na toestemming statistieken bijhoudt.

   Het is een variabel lettertype: een bestand voor alle diktes van 200 tot 800.
   Twee stukken: het gewone latijnse alfabet en de uitbreiding daarop. Een
   browser haalt alleen op wat hij nodig heeft. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.6d36d5bdedfa.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Costas Guide - vormgeving
   De kleuren van de Spaanse vlag: rood, geel en wit, met zwarte tekst.
   Er is bewust geen bouwstap: dit bestand wordt rechtstreeks geserveerd. */

:root {
  /* De kleuren van de Spaanse vlag: rood, geel, wit. Tekst is zwart.
     Geel is nergens tekstkleur op wit; daarvoor is het te licht. Waar geel
     als tekst moet werken staat --geel-diep, en op rood --geel-op-rood. */
  --rood: #c60b1e;
  --rood-donker: #9c0917;
  --geel: #ffc400;
  --geel-licht: #ffd84d;
  --geel-zacht: #fff4cf;
  --geel-vlak: #fff8e2;
  --geel-rand: #f0d98a;
  --geel-diep: #8a6a00;      /* geel dat op wit leesbaar blijft */
  --geel-op-rood: #ffe9a3;   /* geel dat op rood leesbaar blijft */

  --wit: #ffffff;
  --achtergrond: #fffdf7;
  --inkt: #111111;
  --inkt-zacht: #444444;
  --inkt-stil: #6d6d6d;
  --rand: #e3ded1;
  --rand-zacht: #efeade;
  --rand-veld: #ddd6c6;
  --vlak: #faf6ea;

  --goed-vlak: #e4f3ea;   --goed-inkt: #1f6b46;
  --letop-vlak: #fff1ce;  --letop-inkt: #7a5800;
  --vol-vlak: #f0e8f7;    --vol-inkt: #6b4684;
  --stop-vlak: #fdecec;   --stop-inkt: #8c1d18;
  --info-vlak: #e8edf8;   --info-inkt: #405b93;

  --rond: 1.5rem;
  --rond-groot: 2rem;
  --schaduw: 0 12px 35px rgba(0, 0, 0, .06);
  --schaduw-diep: 0 24px 70px rgba(198, 11, 30, .18);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font-family: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -.025em; line-height: 1.12; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rood);
  outline-offset: 2px;
  border-radius: 6px;
}

.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rood); color: var(--wit); padding: 12px 18px; border-radius: 0 0 12px 0;
  font-weight: 800; text-decoration: none;
}
.overslaan:focus { left: 0; }

.omhulsel { max-width: 1180px; margin: 0 auto; padding: 32px 20px; }
.omhulsel.smal { max-width: 720px; }

/* ---------------------------------------------------------------- kop --- */

.kop { border-bottom: 1px solid var(--rand); background: rgba(255, 253, 247, .96); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.kop__binnen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }

.merk { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.merk__teken {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(
    to bottom,
    var(--rood) 0 25%, var(--geel) 25% 75%, var(--rood) 75%);
  color: var(--inkt); font-size: 20px;
}
.merk__boven { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--geel-diep); }
.merk__naam { display: block; font-size: 19px; font-weight: 800; }

.kop__bediening { display: flex; align-items: center; gap: 8px; }
.kop__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--rand); border-radius: 999px; background: var(--wit); }
.nav a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--inkt-zacht); text-decoration: none; transition: background .15s, color .15s; }
.nav a:hover { background: var(--geel-zacht); }
.nav a[aria-current="page"] { background: var(--rood); color: var(--wit); }

/* De taalkiezer is een uitklaplijst met echte links: hij werkt daarmee ook
   zonder JavaScript en elke taal heeft een eigen adres. */
.taalkiezer { position: relative; }
.taalkiezer > summary {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--rand);
  border-radius: 999px; background: var(--wit); font-size: 13px; font-weight: 700; color: var(--inkt-zacht);
  cursor: pointer; list-style: none; user-select: none; white-space: nowrap;
}
.taalkiezer > summary::-webkit-details-marker { display: none; }
.taalkiezer > summary::after { content: "⌄"; margin-left: 2px; font-size: 14px; line-height: 1; }
.taalkiezer[open] > summary { background: var(--geel-zacht); }
.taalkiezer > summary:hover { background: var(--geel-zacht); }
.taalkiezer__code { display: none; }

.taalkiezer__lijst {
  position: absolute; top: calc(100% + 6px); z-index: 30;
  min-width: 170px; max-width: calc(100vw - 32px);
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--rand); border-radius: 16px; background: var(--wit);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
  /* De knop staat altijd rechts in de kop; naar links uitklappen houdt de
     volledige lijst ook op de smalste telefoons binnen beeld. */
  left: auto; right: 0;
}
.taalkiezer__lijst a {
  display: block; padding: 9px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--inkt-zacht); text-decoration: none;
}
.taalkiezer__lijst a:hover { background: var(--geel-zacht); }
.taalkiezer__lijst a[aria-current="true"] { background: var(--rood); color: var(--wit); }
.afmelden { margin: 0; }

/* ----------------------------------------------------- accountbanner --- */
/* Een smalle balk onder de kop, alleen voor wie niet is aangemeld. Geen
   display-regel op .accountbanner zelf: het hidden-attribuut moet kunnen
   winnen, anders klikt de knop hem weg zonder dat er iets gebeurt. */
.accountbanner { border-bottom: 1px solid var(--geel-rand); background: var(--geel-vlak); }
.accountbanner__binnen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding-top: 12px; padding-bottom: 12px;
}
.accountbanner__tekst { flex: 1 1 320px; font-size: 14px; color: var(--inkt-zacht); }
.accountbanner__tekst strong { display: block; color: var(--inkt); font-size: 14.5px; }
.accountbanner__weg {
  padding: 8px 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--inkt-stil); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.accountbanner__weg:hover { background: var(--geel-zacht); color: var(--inkt-zacht); }

.formulier__voet-link { color: var(--rood); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Een afbeelding bij een evenement komt van de bron; formaat onbekend, dus
   begrensd in hoogte en netjes bijgesneden. */
.detail__beeld {
  display: block; width: 100%; max-height: 360px; object-fit: cover;
  margin-top: 18px; border: 1px solid var(--rand); border-radius: var(--rond); background: var(--vlak);
}
.detail__beeldknop {
  position: relative; display: block; width: 100%; margin: 18px 0 0; padding: 0;
  border: 0; border-radius: var(--rond); background: transparent; color: inherit;
  cursor: zoom-in;
}
.detail__beeldknop .detail__beeld { margin-top: 0; }
.detail__beeldknop:focus-visible { outline: 3px solid var(--rood); outline-offset: 4px; }
.detail__beeldhint {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: rgba(20, 17, 16, .82); color: #fff; font-size: 24px; line-height: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28); pointer-events: none;
}
.afbeeldingdialoog {
  width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 24px;
  border: 0; background: rgba(13, 11, 10, .94); color: #fff; overflow: hidden;
}
.afbeeldingdialoog[open] { display: grid; place-items: center; }
.afbeeldingdialoog::backdrop { background: rgba(13, 11, 10, .94); }
.afbeeldingdialoog__beeld {
  display: block; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px);
  width: auto; height: auto; object-fit: contain; cursor: zoom-out;
}
.afbeeldingdialoog__sluiten {
  position: fixed; z-index: 1; top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right)); width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: rgba(0, 0, 0, .72); color: #fff; font: 400 34px/1 sans-serif; cursor: pointer;
}
.afbeeldingdialoog__sluiten:hover, .afbeeldingdialoog__sluiten:focus-visible {
  background: #fff; color: #111; outline: none;
}

/* Plaatsen in de buurt, onderaan een plaatspagina. */
.dichtbij { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.dichtbij a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--wit); font-size: 14px; font-weight: 700; text-decoration: none;
}
.dichtbij a:hover { background: var(--geel-zacht); border-color: var(--geel-rand); }
.dichtbij__afstand { color: var(--inkt-stil); font-size: 12.5px; font-weight: 600; }

/* Een evenement dat geweest is: de pagina blijft, maar zegt het meteen. */
.verlopen {
  margin-top: 14px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--letop-vlak); background: var(--letop-vlak);
  color: var(--letop-inkt); font-size: 14.5px;
}
.verlopen strong { display: block; }

/* --------------------------------------------------------- 404-pagina --- */
.nietgevonden__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nietgevonden__kop { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rand); font-size: 15px; font-weight: 800; }
.nietgevonden__lijst { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.nietgevonden__lijst a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 11px 14px; border: 1px solid var(--rand); border-radius: 14px;
  background: var(--vlak); text-decoration: none;
}
.nietgevonden__lijst a:hover { background: var(--geel-zacht); border-color: var(--geel-rand); }
.nietgevonden__titel { font-weight: 700; font-size: 14.5px; }
.nietgevonden__bij { color: var(--inkt-stil); font-size: 13px; }

/* ------------------------------------------------------- tekstpagina --- */
/* De privacyverklaring is de enige pagina met lopende tekst, en die erfde de
   globale regels: p { margin: 0 } en koppen zonder marge. Alles plakte daardoor
   aan elkaar in een kolom van tachtig tekens breed. Hier staat het ritme:
   een smallere kolom, lucht tussen de alinea's en een haarlijn boven elk kopje,
   zodat de negen onderwerpen op een rij te scannen zijn. */
.tekstpagina { padding: 34px 32px 28px; }
.tekstpagina > * { max-width: 62ch; margin-inline: auto; }
.tekstpagina .paginatitel__onder {
  margin-top: 10px; color: var(--inkt-zacht); font-size: 17px; line-height: 1.6;
}
.tekstpagina h2 {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rand);
  font-size: 17px; font-weight: 800; letter-spacing: -.012em;
}
.tekstpagina p { margin-top: 12px; }
.tekstpagina a {
  color: var(--rood); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tekstpagina a:hover { color: var(--rood-donker); }

/* De verantwoordelijke: een adresblok dat je overslaat als je het niet zoekt. */
.verantwoordelijke {
  margin-top: 16px; padding: 15px 18px; border: 1px solid var(--rand);
  border-radius: 14px; background: var(--vlak);
  color: var(--inkt-zacht); font-size: 14px; line-height: 1.75;
}
.tekstpagina__voet {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rand);
  color: var(--inkt-stil); font-size: 13px;
}

/* ----------------------------------------- clubs en feestdagen --- */
.informatiepagina { display: grid; gap: 48px; padding-bottom: 56px; }
.informatiepagina__kop {
  max-width: 790px; padding: 34px 36px; border-radius: var(--rond-groot);
  background: linear-gradient(135deg, var(--rood) 0 62%, var(--rood-donker) 62%);
  color: var(--wit); box-shadow: var(--schaduw-diep);
}
.informatiepagina__kop .bovenkop { color: var(--geel-op-rood); }
.informatiepagina__kop .paginatitel { margin-top: 8px; }
.informatiepagina__kop > p:last-child { margin-top: 14px; max-width: 66ch; line-height: 1.65; }
.informatiepagina__sectiekop { max-width: 760px; margin-bottom: 20px; }
.informatiepagina__sectiekop > p:last-child { margin-top: 10px; color: var(--inkt-zacht); }
.clubregios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.clubregio {
  padding: 24px; border: 1px solid var(--rand); border-radius: var(--rond);
  background: var(--wit); box-shadow: var(--schaduw);
}
.clubregio:last-child { grid-column: 1 / -1; }
.clubregio h3, .feestkalender h3 { font-size: 19px; }
.clublijst { list-style: none; display: grid; gap: 0; margin: 14px 0 0; padding: 0; }
.clublijst li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--rand-zacht);
}
.clublijst a, .feestkalender__bron a { flex: 0 0 auto; color: var(--rood); font-size: 13px; font-weight: 800; }
.feestdagen { display: grid; }
.feestdagen__melding {
  margin-bottom: 20px; padding: 16px 18px; border: 1px solid var(--geel-rand);
  border-radius: 14px; background: var(--geel-zacht); color: #5d4800;
}
.feestdagen__regios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feestkalender { padding: 24px; border: 1px solid var(--rand); border-radius: var(--rond); background: var(--wit); box-shadow: var(--schaduw); }
.feestkalender__tabel { margin-top: 14px; overflow-x: auto; }
.feestkalender table { width: 100%; border-collapse: collapse; font-size: 14px; }
.feestkalender th { padding: 9px 8px; border-bottom: 2px solid var(--rand); text-align: left; color: var(--inkt-stil); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.feestkalender td { padding: 10px 8px; border-bottom: 1px solid var(--rand-zacht); vertical-align: top; }
.feestkalender td:first-child { width: 34%; white-space: nowrap; font-weight: 800; }
.feestkalender__bron { margin-top: 14px; }
.informatiepagina__bijgewerkt { margin-top: 14px; color: var(--inkt-stil); font-size: 13px; }

@media (max-width: 760px) {
  .informatiepagina { gap: 36px; }
  .informatiepagina__kop { padding: 26px 22px; }
  .clubregios, .feestdagen__regios { grid-template-columns: 1fr; }
  .clubregio:last-child { grid-column: auto; }
  .clubregio, .feestkalender { padding: 19px; }
  .clublijst li { display: grid; gap: 4px; }
}

/* Aanmelden met Google, Apple of Facebook: knoppen onder het formulier,
   gescheiden door een lijn met "Of ga verder met". */

/* ----------------------------------------------------------- meldingen --- */

.meldingen { padding-top: 0; padding-bottom: 0; display: grid; gap: 10px; }
.melding { margin-top: 18px; padding: 14px 18px; border-radius: 16px; border: 1px solid; font-size: 14px; font-weight: 700; }
.melding--success, .melding--info { background: var(--goed-vlak); border-color: #bcdcc8; color: var(--goed-inkt); }
.melding--error, .melding--warning { background: var(--stop-vlak); border-color: #f0bdbd; color: var(--stop-inkt); }

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

.hero-rij { display: grid; gap: 18px; }
@media (min-width: 1000px) {
  .hero-rij { grid-template-columns: 1fr auto; align-items: stretch; }
}

.hero {
  position: relative; overflow: hidden;
  border-radius: var(--rond-groot); background: var(--rood); color: var(--wit);
  padding: 32px 32px 32px 40px; box-shadow: var(--schaduw-diep);
}
/* Een smalle band langs de zijkant in de verhoudingen van de vlag: rood, geel,
   rood. Het donkere rood is nodig om de banden op het rode vlak te zien. */
.hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(
    to bottom,
    var(--rood-donker) 0 25%, var(--geel) 25% 75%, var(--rood-donker) 75%);
}
.hero__boven { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--geel-op-rood); }
.hero__titel { margin-top: 12px; max-width: 46ch; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.035em; }
.hero__tekst { margin-top: 16px; max-width: 60ch; color: #ffdfe2; font-size: 15px; line-height: 1.6; }

.kerncijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; min-width: 260px; border: 1px solid var(--rand); border-radius: var(--rond-groot); background: var(--rand); overflow: hidden; }
@media (min-width: 1000px) { .kerncijfers { grid-template-columns: 1fr; } }
.kerncijfer { background: var(--wit); padding: 18px; }
.kerncijfer__label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-stil); }
.kerncijfer__waarde { margin-top: 5px; font-size: 15px; font-weight: 800; }
.kerncijfer__waarde.is-fout { color: var(--stop-inkt); }

/* ----------------------------------------------------------- sectiekop --- */

.sectiekop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sectiekop__boven { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--geel-diep); }
.sectiekop__boven--licht { color: var(--geel-op-rood); }
.sectiekop h2, .paginatitel { margin-top: 8px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; }
.sectiekop__uitleg { margin-top: 8px; color: var(--inkt-zacht); font-size: 15px; }
.sectiekop__voetnoot { margin-top: 4px; font-size: 13.5px; color: var(--inkt-stil); }

.teller { padding: 9px 18px; border-radius: 999px; background: var(--rood); color: var(--wit); font-size: 14px; font-weight: 800; }
.tellers { display: flex; flex-wrap: wrap; gap: 8px; }
.tellers a { text-decoration: none; }

.kruimels { font-size: 13px; font-weight: 700; color: var(--inkt-stil); }
.kruimels a { color: var(--rood); }

/* ------------------------------------------------------------- filters --- */

/* Op een telefoon vulden de filters het hele eerste scherm. Ze staan daar nu
   achter deze knop; vanaf 900 px is er ruimte genoeg en verbergt het script de
   knop weer. Zonder JavaScript blijft de knop verborgen en staan de filters
   gewoon open, zoals eerst. */
.filterknop {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px;
  margin-top: 22px; padding: 13px 18px;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--wit);
  font: inherit; font-size: 14px; font-weight: 800; color: var(--inkt);
  cursor: pointer; text-align: left;
}
.filterknop[hidden] { display: none; }
.filterknop:hover { background: var(--geel-zacht); }
.filterknop__tekst { flex: 1; }
.filterknop__aantal {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px;
  background: var(--rood); color: var(--wit); font-size: 12px; font-weight: 800;
}
.filterknop__teken { font-size: 15px; line-height: 1; transition: transform .15s; }
.filterknop--open .filterknop__teken { transform: rotate(180deg); }

.filters[hidden] { display: none; }


.filterbalk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.filterbalk input[type="search"] {
  flex: 1 1 260px; padding: 11px 16px; border: 1px solid var(--rand-veld); border-radius: 999px;
  background: var(--wit); font: inherit; font-size: 14px;
}
.filterbalk input[type="search"]:focus { border-color: var(--rood); }

.categorieen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rand-veld); background: var(--wit); color: var(--inkt-zacht);
  font-size: 12.5px; font-weight: 800; text-decoration: none; transition: background .15s;
}
.chip:hover { background: var(--geel-zacht); }
.chip--aan { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.chip__aantal { font-weight: 700; opacity: .65; }

/* De costa's staan boven de categorieen en mogen zwaarder wegen: het is de
   grofste keuze die een bezoeker maakt. */
.categorieen--costa { margin-top: 20px; }
.categorieen--costa .chip { border-color: var(--geel-rand); background: var(--geel-vlak); color: var(--rood); }
/* De plaatsen staan tussen de costa's en de categorieen in: rustiger dan de
   costa's, want het is een verwijzing en geen filter op deze pagina. */
.categorieen--plaats { margin-top: 10px; }
.categorieen--plaats .chip { font-weight: 700; }
.chip--meer { border-style: dashed; color: var(--inkt-zacht); }
.categorieen--costa .chip:hover { background: var(--geel-licht); }
.categorieen--costa .chip--aan { background: var(--rood); border-color: var(--rood); color: var(--wit); }

/* ----------------------------------------------------------- verderop --- */

.verderop { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--rand); }
.verderop__blok { margin-top: 20px; }
.verderop__blok h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.linkenrij { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.linkenrij a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--rand-veld); background: var(--wit); color: var(--inkt-zacht);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.linkenrij a:hover { background: var(--geel-zacht); color: var(--rood); }

/* -------------------------------------------------------------- dagen --- */

/* De agenda toont soms meer dan driehonderd kaarten. Met content-visibility
   slaat de browser het opmaken en tekenen over van wat nog buiten beeld staat.
   Dat gebeurt per kaart en niet per dag: een dag is 20.000 tot 38.000 pixels
   hoog en dan is elke schatting mis, waardoor de schuifbalk zou springen. Een
   kaart is er ongeveer 360, en zodra hij een keer in beeld is geweest onthoudt
   de browser de echte hoogte. Browsers die dit niet kennen negeren het. */
.kaart { content-visibility: auto; contain-intrinsic-size: auto 360px; }
.dagen { display: grid; gap: 36px; margin-top: 28px; }
.dag__kop { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.dag__kop h3 { font-size: 20px; font-weight: 800; text-transform: capitalize; }
.dag__lijn { flex: 1; height: 1px; background: var(--rand); }
.dag__aantal { font-size: 12px; font-weight: 800; color: var(--inkt-stil); }

.kaarten { display: grid; gap: 16px; }
@media (min-width: 900px) { .kaarten { grid-template-columns: repeat(2, 1fr); } }

.kaart {
  position: relative; overflow: hidden; padding: 22px;
  border: 1px solid var(--rand); border-radius: var(--rond); background: var(--wit); box-shadow: var(--schaduw);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* De hele tegel is de link naar het evenement. De titel blijft de echte link
   (goed voor toetsenbord en zoekmachines); zijn ::after legt er een vlak
   overheen dat de tegel bedekt. De knoppen eronder liggen er weer bovenop,
   anders zou je nooit meer bij de bron of de tickets komen. */
.kaart__titel a::after { content: ""; position: absolute; inset: 0; }
.kaart:hover { border-color: var(--geel-rand); box-shadow: 0 10px 28px rgba(0, 0, 0, .09); transform: translateY(-1px); }
.kaart:focus-within { border-color: var(--rood); }
.kaart__knoppen { position: relative; z-index: 1; }
.kaart .labels { position: relative; z-index: 1; }
.kaart--afgelast { border-color: #f0bdbd; opacity: .78; }
.kaart--afgelast .kaart__titel { text-decoration: line-through; }
.kaart__vlag {
  position: absolute; right: 0; top: 0; padding: 8px 16px; border-bottom-left-radius: 16px;
  background: var(--geel); color: var(--inkt); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.kaart__datum {
  margin-top: 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--geel-diep);
}
.kaart__titel { margin-top: 4px; font-size: 20px; font-weight: 800; }
.kaart__titel a { text-decoration: none; }
.kaart__titel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kaart__wanneer { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--inkt); }
.kaart__tekst { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--inkt-zacht); }
.kaart__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.labels { display: flex; flex-wrap: wrap; gap: 7px; padding-right: 70px; }
.label {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.label--categorie { background: var(--geel-zacht); color: var(--inkt-zacht); }
.label--goed { background: var(--goed-vlak); color: var(--goed-inkt); }
.label--let-op { background: var(--letop-vlak); color: var(--letop-inkt); }
.label--vol { background: var(--vol-vlak); color: var(--vol-inkt); }
.label--stop { background: var(--stop-vlak); color: var(--stop-inkt); }
.label--info { background: var(--info-vlak); color: var(--info-inkt); }
.label--tip { background: var(--geel); color: var(--inkt); }

.feiten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0 0; padding: 16px; border-radius: 16px; background: var(--vlak); font-size: 12px; }
.feiten--breed { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.feiten dt { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-stil); }
.feiten dd { margin: 5px 0 0; font-weight: 800; font-size: 13px; }

/* -------------------------------------------------------------- detail --- */

.detail__titel { margin-top: 14px; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
.detail__wanneer { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--inkt); }
.detail__tekst { margin-top: 16px; max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--inkt-zacht); }
.detail .labels { padding-right: 0; margin-top: 18px; }
.detail__verwant { margin: 40px 0 16px; font-size: 20px; font-weight: 800; }

.kaartlink { margin-top: 14px; }
.detailkaart { margin-top: 28px; }
.detailkaart__kop, .kaartpagina__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.detailkaart__kop h2 { font-size: 20px; font-weight: 800; }
.detailkaart__kop p { margin-top: 4px; color: var(--inkt-zacht); font-size: 14px; }
.evenementenkaart { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--rand); border-radius: 20px; background: var(--vlak); box-shadow: var(--schaduw); z-index: 0; }
.evenementenkaart__laden { position: absolute; inset: 50% auto auto 50%; z-index: 1; min-width: 13rem; transform: translate(-50%, -50%); }
.evenementenkaart__laden[aria-busy="true"] { cursor: progress; opacity: .75; }
.evenementenkaart--klein { height: 280px; }
.evenementenkaart--groot { height: min(68vh, 760px); min-height: 480px; }
.kaartpagina__kop { margin-top: 22px; }
.kaartpagina__kop h1 { margin-top: 4px; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
.kaartpagina__telling { margin: 14px 0; color: var(--inkt-zacht); font-size: 14px; }
.kaartmarkering { background: transparent; border: 0; }
.kaartmarkering span { display: block; width: 28px; height: 28px; transform: rotate(45deg); border: 3px solid var(--wit); border-radius: 50% 50% 50% 0; background: var(--rood); box-shadow: 0 3px 9px rgba(0, 0, 0, .3); }
.kaartmarkering span::after { content: ""; position: absolute; width: 8px; height: 8px; margin: 7px; border-radius: 50%; background: var(--geel); }
.kaartpopup { display: grid; gap: 10px; max-height: 250px; overflow-y: auto; }
.kaartpopup article + article { padding-top: 10px; border-top: 1px solid #ddd; }
.kaartpopup__titel { font-size: 14px; font-weight: 800; color: var(--rood); }
.kaartpopup__wanneer, .kaartpopup__waar { margin: 3px 0 0; font-size: 12px; line-height: 1.35; }
.kaartpopup__waar { color: #665f5c; }
@media (max-width: 600px) {
  .evenementenkaart--klein { height: 240px; }
  .evenementenkaart--groot { height: 65vh; min-height: 420px; }
}

/* -------------------------------------------------------------- lege --- */

.leegstaat { margin-top: 26px; padding: 44px 24px; border: 1px dashed var(--rand-veld); border-radius: 1.75rem; background: var(--wit); text-align: center; }
.leegstaat--klein { padding: 28px 20px; border-style: solid; }
.leegstaat__teken { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--geel-zacht); font-size: 24px; }
.leegstaat h3 { margin-top: 18px; font-size: 22px; font-weight: 800; }
.leegstaat p { margin: 12px auto 0; max-width: 58ch; font-size: 14.5px; line-height: 1.6; color: var(--inkt-zacht); }
.leegstaat__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* ------------------------------------------------------------ knoppen --- */

.knop {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--rood); color: var(--wit); font: inherit; font-size: 14px; font-weight: 800;
  text-decoration: none; cursor: pointer; transition: background .15s, opacity .15s;
}
.knop:hover { background: var(--rood-donker); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop--klein { padding: 9px 16px; font-size: 12.5px; }
.knop--stil { background: var(--wit); color: var(--inkt); border: 1px solid var(--rand-veld); }
.knop--stil:hover { background: var(--geel-zacht); }
.knop--geel { background: var(--geel); color: var(--inkt); width: 100%; justify-content: center; }
.knop--geel:hover { background: var(--geel-licht); }
.knop--rood { background: var(--goed-vlak); color: var(--goed-inkt); }
.knop--rood:hover { background: #d3ecdd; }
.knop--grijs { background: #ececea; color: var(--inkt-zacht); }
.knop--grijs:hover { background: #e0e0dd; }
.knop--gevaar { background: transparent; color: var(--stop-inkt); }
.knop--gevaar:hover { background: var(--stop-vlak); }

/* ------------------------------------------------- aanmelden met ... --- */
/* Staat bewust onder het knoppenblok hierboven: .knop en .knop--sociaal zijn
   even specifiek, dus de laatste wint. Toen dit erboven stond, werden alle
   drie de knoppen rood en was het logo niet meer te herkennen.

   Alle drie wit met een dunne rand, zodat het merkteken het werk doet: de
   vierkleuren-G van Google, het blauwe rondje van Facebook en de zwarte appel.
   Dat is ook wat de drie aanbieders zelf toestaan. */
.sociaal { margin-top: 22px; }
.sociaal__of { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; color: var(--inkt-stil); }
.sociaal__of::before, .sociaal__of::after { content: ""; flex: 1; border-top: 1px solid var(--rand); }
.sociaal__knoppen { display: grid; gap: 8px; }
.sociaal__vorm { margin: 0; }
.knop--sociaal {
  width: 100%; justify-content: center; gap: 10px;
  background: var(--wit); color: var(--inkt); border: 1px solid var(--rand-veld);
}
.knop--sociaal:hover { background: var(--vlak); border-color: var(--inkt-stil); }
.knop--sociaal svg { flex: 0 0 auto; }
/* Op de registratiepagina staan de knoppen bovenaan en is het formulier de
   tweede keuze; de scheiding zit dan binnen het paneel. */
.formulier__scheiding { margin-bottom: 4px; }
.sociaal--eerst { margin-top: 18px; }
@media (min-width: 620px) { .sociaal__knoppen { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* ------------------------------------------------------------- panelen --- */

.paneel { margin-top: 24px; padding: 26px; border: 1px solid var(--rand); border-radius: 1.75rem; background: var(--wit); }
.paneel--gevuld { box-shadow: var(--schaduw); }
.paneel--zacht { background: var(--vlak); }
.paneel--donker { background: var(--rood); color: var(--wit); border-color: var(--rood); }
.paneel--donker h2 { margin-top: 4px; font-size: 22px; font-weight: 800; }
.paneel__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.paneel__kop h2 { margin-top: 4px; font-size: 22px; font-weight: 800; }
.paneel__teken { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--geel-zacht); font-size: 20px; }
.paneel__filter select { padding: 8px 14px; border: 1px solid var(--rand-veld); border-radius: 999px; background: var(--wit); font: inherit; font-size: 13px; font-weight: 700; }

.beheerraster { display: grid; gap: 24px; }
@media (min-width: 1100px) { .beheerraster { grid-template-columns: 1.35fr .65fr; align-items: start; } }
.beheerraster__hoofd > .paneel:first-child { margin-top: 24px; }

.opsomming { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--inkt-zacht); }

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

.formulier { display: grid; gap: 14px; }
.formulier label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.veld__label { font-weight: 700; }
.veld__label em { font-style: normal; font-weight: 500; color: var(--inkt-stil); }
.veld__hulp { font-size: 12px; font-weight: 500; color: var(--inkt-stil); }
.veld__fout { font-size: 12.5px; font-weight: 700; color: var(--stop-inkt); }

.formulier input, .formulier select, .formulier textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--rand-veld); border-radius: 12px;
  background: var(--achtergrond); font: inherit; font-size: 14px; font-weight: 500; color: var(--inkt);
}
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { border-color: var(--rood); outline-offset: 0; }
.formulier textarea { min-height: 96px; resize: vertical; }

.paneel--donker .veld__label { color: var(--wit); }
.paneel--donker .veld__hulp { color: #ffdfe2; }
.paneel--donker input, .paneel--donker select {
  border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .12); color: var(--wit);
}
.paneel--donker input::placeholder { color: #ffdfe2; }

.veldenraster { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 700px) { .veldenraster { grid-template-columns: repeat(2, 1fr); } }
.veld--breed { grid-column: 1 / -1; }

/* ------------------------------------------------------------ bronnen --- */

.bronlijst { list-style: none; margin: 22px 0 0; padding: 0; }
.bron { display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid var(--rand-zacht); }
.bron:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 720px) { .bron { grid-template-columns: 1fr auto; align-items: center; } }
.bron__naamrij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bron__naamrij h3 { font-size: 16px; font-weight: 800; }
.bron__link { display: block; margin-top: 5px; font-size: 13.5px; color: var(--rood); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.bron__notitie { margin-top: 5px; font-size: 12.5px; color: var(--inkt-stil); }
.bron__knoppen { display: flex; align-items: center; gap: 8px; }
.bron__knoppen form { margin: 0; }

/* ------------------------------------------------------------ historie --- */

.runlijst { list-style: none; margin: 0; padding: 0; }
.run { padding: 20px 0; border-top: 1px solid var(--rand-zacht); }
.run:first-child { border-top: 0; padding-top: 0; }
.run__hoofd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.run__titel { font-size: 16px; font-weight: 800; }
.run__meta { margin-top: 6px; font-size: 13.5px; color: var(--inkt-stil); }
.run__fout { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--stop-inkt); }
.run__rapport { margin-top: 12px; }
.run__rapport summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--rood); text-decoration: underline; text-underline-offset: 4px; }
.run__rapport pre {
  margin-top: 12px; max-height: 36rem; overflow: auto; padding: 16px; border-radius: 16px;
  background: var(--vlak); font-family: inherit; font-size: 12.5px; line-height: 1.65; color: var(--inkt-zacht); white-space: pre-wrap;
}

/* -------------------------------------------------------------- tabel --- */

.tabelomhulsel { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--rand-zacht); white-space: nowrap; }
.tabel th { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-stil); }
.tabel td:nth-child(2) { white-space: normal; min-width: 220px; font-weight: 700; }

/* --------------------------------------------------------------- voet --- */

.voet {
  margin-top: 64px;
  border-top: 4px solid var(--geel);
  background: #541322;
  color: #fff8e9;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.voet .voet__binnen { padding-top: 48px; padding-bottom: 28px; }
.voet__boven {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
}
.voet__boven > * { min-width: 0; }
.voet a { text-underline-offset: .22em; overflow-wrap: anywhere; }
.voet a:hover { color: var(--geel-licht); }
.voet a:focus-visible { outline: 3px solid var(--geel-licht); outline-offset: 5px; }
.voet__merk {
  display: flex; align-items: center; gap: 14px;
  width: fit-content; max-width: 100%; min-height: 56px;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.2; text-decoration: none;
}
.voet__merk img { width: 56px; height: 56px; flex: 0 0 auto; }
.voet__merk strong { min-width: 0; }
.voet__regio { margin-top: 18px; font-size: 1.125rem; color: #ffe4a0; }
.voet__controle { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; max-width: 29ch; }
.voet__controle svg { flex: 0 0 auto; margin-top: 3px; color: #ffe4a0; }
.voet h2 { font-size: 1.25rem; line-height: 1.4; letter-spacing: -.015em; }
.voet__navigatie h2 { margin-bottom: 12px; }
.voet__links { list-style: none; margin: 0; padding: 0; }
.voet__links a { display: flex; align-items: center; min-height: 44px; padding: 7px 0; font-weight: 600; }
.voet__app { padding: 24px; border: 1px solid #965766; border-radius: 20px; background: #682334; }
.voet__app p { margin-top: 12px; }
.voet__appknop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; margin-top: 20px; padding: 12px 16px;
  border-radius: 12px; background: var(--geel); color: #35101a;
  font-weight: 800; line-height: 1.45; text-decoration: none;
}
.voet__appknop svg { flex: 0 0 auto; }
.voet__appknop span:last-child { margin-left: auto; }
.voet .voet__appknop:hover { background: var(--geel-licht); color: #35101a; }
.voet__onder {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid #965766;
  font-size: 1rem; color: #f2dbe0;
}
.voet__bron { max-width: 72ch; }
.voet__info { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 24px; }
.voet__info a { display: flex; align-items: center; min-height: 44px; font-weight: 600; }
.voet__copyright { grid-column: 1 / -1; }
@media (max-width: 999px) {
  .voet__boven { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .voet__app { grid-column: 1 / -1; }
  .voet__appknop { width: fit-content; max-width: 100%; }
  .voet__onder { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .voet { margin-top: 40px; }
  .voet .voet__binnen { padding: 32px 20px 24px; }
  .voet__boven { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .voet__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 4px 20px; }
  .voet__app { padding: 20px; }
  .voet__appknop { width: 100%; }
  .voet__onder { gap: 16px; margin-top: 28px; }
}
@media (max-width: 359px) {
  .voet__appknop svg, .voet__appknop span:last-child { display: none; }
}

/* ------------------------------------------------------------- afdruk --- */

@media print {
  .kop, .voet, .filterbalk, .categorieen, .kaart__knoppen, .overslaan { display: none; }
  body { background: #fff; }
  .kaart { break-inside: avoid; box-shadow: none; }
}

/* ------------------------------------------------------- smalle schermen --- */

/* Op een telefoon telde alles boven de agenda op tot ruim achthonderd pixels:
   kop, hero, kerncijfers en sectiekop samen. Je zag dus geen enkel evenement
   zonder te scrollen. Hieronder wordt datzelfde in compactere vorm getoond;
   er verdwijnt niets. */
@media (max-width: 899px) {
  .omhulsel { padding: 18px 16px; }

  /* De kop is op een telefoon 169 px hoog en zou als plakkende balk een vijfde
     van het scherm blijven opeisen. Daar is hij te groot voor; hij scrollt nu
     gewoon mee. Op een breed scherm blijft hij wel staan.
     Wel positioned met een z-index: de backdrop-filter maakt van de kop een
     eigen stapel, en zonder z-index schoof de uitgeklapte taalkiezer achter de
     inhoud eronder. */
  .kop { position: relative; z-index: 20; }

  .kop__binnen { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .merk__teken { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
  .merk__boven { font-size: 10px; letter-spacing: .14em; }
  .merk__naam { font-size: 17px; }
  .nav a { padding: 7px 12px; font-size: 13px; }

  .hero { padding: 22px 22px 22px 30px; border-radius: 1.5rem; }
  .hero__titel { font-size: clamp(1.55rem, 6.5vw, 2rem); margin-top: 8px; }
  .hero__tekst { margin-top: 10px; font-size: 14px; }

  /* De kerncijfers zijn nuttig maar geen reden om de agenda weg te duwen; op
     een telefoon worden het drie smalle kolommetjes in plaats van blokken. */
  .kerncijfer { padding: 8px 6px; text-align: center; }
  .kerncijfer__label { font-size: 9px; letter-spacing: .06em; }
  .kerncijfer__waarde { margin-top: 2px; font-size: 13px; }

  .sectiekop { gap: 10px; }
  .sectiekop h2, .paginatitel { margin-top: 4px; }
  .sectiekop__uitleg { margin-top: 4px; font-size: 14px; }

  .dagen { gap: 26px; margin-top: 20px; }
}

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

/* ------------------------------------------------------- aanmeldformulier --- */

/* Het honeypot-veld moet voor bezoekers en schermlezers onvindbaar zijn, maar
   wel in het document staan zodat een bot het invult. display:none zou door
   sommige bots juist worden herkend; dit is onopvallender. */
.honeypot {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.veldgroep { margin: 0 0 26px; padding: 0; border: 0; }
.veldgroep legend {
  padding: 0; margin-bottom: 6px;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--inkt);
}
.veldgroep__uitleg { margin-bottom: 14px; font-size: 13.5px; color: var(--inkt-zacht); }

.keuzerij { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 620px) { .keuzerij { grid-template-columns: repeat(2, 1fr); } }
.keuze {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--rand-veld); border-radius: 14px; background: var(--achtergrond);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.keuze:hover { background: var(--geel-vlak); }
.keuze input { width: auto; margin: 0; }
.keuze:has(input:checked) { border-color: var(--rood); background: var(--geel-zacht); }

.veld[hidden] { display: none; }
.veld__nodig { color: var(--geel-diep); text-decoration: none; border: 0; }

.formulier__voet { margin-top: 14px; font-size: 13px; color: var(--inkt-stil); }
.formulier__hulp-link { margin-top: -4px; font-size: 13px; text-align: right; }
.formulier--account { margin-top: 22px; }

.bedankt { text-align: center; }
.bedankt__teken {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  margin-bottom: 14px; border-radius: 999px;
  background: var(--goed-vlak); color: var(--goed-inkt); font-size: 26px; font-weight: 800;
}
.bedankt p { margin-top: 12px; color: var(--inkt-zacht); font-size: 15px; line-height: 1.65; }
.bedankt .kaart__knoppen { justify-content: center; }

/* -------------------------------------------------------- aanmeldingen --- */

.aanmeldlijst { list-style: none; margin: 0; padding: 0; }
.aanmelding { padding: 22px 0; border-top: 1px solid var(--rand-zacht); }
.aanmelding:first-child { border-top: 0; padding-top: 0; }
.aanmelding__hoofd { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.aanmelding__titel { margin-top: 10px; font-size: 19px; font-weight: 800; }
.aanmelding__meta { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--inkt); }
.aanmelding__ingediend { font-size: 12.5px; color: var(--inkt-stil); white-space: nowrap; }
.aanmelding__tekst { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--inkt-zacht); }
.aanmelding__acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.aanmelding__acties form { display: flex; gap: 8px; align-items: center; margin: 0; }
.afwijsformulier input {
  padding: 8px 14px; border: 1px solid var(--rand-veld); border-radius: 999px;
  background: var(--wit); font: inherit; font-size: 13px; min-width: 190px;
}
.aanmelding__beoordeling { margin-top: 14px; font-size: 13px; color: var(--inkt-stil); line-height: 1.6; }

/* ------------------------------------------------------------ locatie --- */

.locatiebalk {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 22px; padding: 16px 18px;
  border: 1px solid var(--rand); border-radius: 18px; background: var(--wit);
}
.locatiebalk label {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inkt-stil);
}
.locatiebalk__waar { flex: 1 1 240px; }
.locatiebalk__waar select { width: 100%; font-weight: 400; }
.locatiebalk input[type="text"], .locatiebalk__waar input {
  width: 100%; padding: 10px 16px; border: 1px solid var(--rand-veld); border-radius: 999px;
  background: var(--achtergrond); font: inherit; font-size: 14px;
}
.locatiebalk select {
  padding: 10px 14px; border: 1px solid var(--rand-veld); border-radius: 999px;
  background: var(--wit); font: inherit; font-size: 14px; font-weight: 700;
}

.locatiemelding {
  margin-top: 12px; padding: 12px 18px; border-radius: 14px;
  background: var(--geel-zacht); font-size: 13.5px; font-weight: 700; color: var(--inkt);
}
.locatiemelding__nuance {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 500; color: var(--inkt-zacht);
}

/* ------------------------------------------------------------ account --- */

.melding__actie { display: inline-block; margin: 8px 0 0; }
.melding__actie .knop { background: var(--rood); color: var(--wit); }

/* Toestemming voor bezoekersstatistieken: een keuze vooraf, de pagina erachter afgedekt.
   De weergave staat bewust op :not([hidden]); een gewone display-regel zou van het
   hidden-attribuut winnen, en dan blijft de banner na een klik gewoon staan. */
.toestemming-achtergrond:not([hidden]) { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 12, 12, .55); backdrop-filter: blur(2px); }
.toestemming { width: min(100%, 460px); padding: 26px 28px 22px; background: var(--wit); color: var(--inkt); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.toestemming__titel { margin: 0; font-size: 20px; line-height: 1.25; }
.toestemming p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.knop--groot { padding: 15px 28px; font-size: 17px; font-weight: 800; width: 100%; margin-top: 6px; }
.toestemming__nee { background: none; border: 0; padding: 6px; font: inherit; font-size: 13px; color: var(--inkt-zacht, #6b615f); text-decoration: underline; cursor: pointer; }
.toestemming__nee:hover, .toestemming__nee:focus-visible { color: var(--inkt); }
body.toestemming-open { overflow: hidden; }

/* De agenda begint met kiezen en ontdekken, ook op een telefoon. */
.introductie { padding-bottom: 0; }
.hoofdmenu > summary { display: none; }
.introductie h1 { max-width: 30ch; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.introductie > p { margin-top: 10px; color: var(--inkt-zacht); font-size: 1rem; }
.agenda-samenvatting { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.agenda-samenvatting h2 { font-size: 1.15rem; }
.agenda-samenvatting > span, .controle-datum { font-size: .875rem; color: var(--inkt-zacht); }
.datumkeuzes { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.datumkeuzes .chip { min-height: 42px; font-size: .875rem; }
.locatiebalk { margin: 16px 0; }
.locatiebalk__waar { flex: 1 1 220px; }
.kaart__beeld { display: block; width: calc(100% + 44px); max-width: none; margin: -22px -22px 18px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.kaart__tekst { font-size: 1rem; }
.kaart__wanneer, .feiten dd { font-size: .95rem; }
.detail__beeld { aspect-ratio: 16 / 9; height: auto; max-height: 440px; object-fit: contain; background: var(--vlak); }
.deelknoppen, .paginering { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.paginering { justify-content: center; margin-bottom: 22px; }
.uitleg p { margin: 18px 0; font-size: 1rem; }
.uitleg h2 { margin-top: 30px; font-size: 1.4rem; }
.controle-notitie { display: block; white-space: normal; margin-top: 6px; max-width: 45ch; }
.bronlink { font-size: .875rem; align-self: center; padding: 8px 0; color: var(--inkt-zacht); }
.categorieen--plaats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 8px 0; }
.categorieen--plaats .chip { white-space: nowrap; flex-shrink: 0; }
.toestemming-achtergrond:not([hidden]) { inset: auto 16px 16px auto; padding: 0; width: min(460px, calc(100% - 32px)); background: none; backdrop-filter: none; }
.toestemming { padding: 18px; border: 1px solid var(--rand); border-radius: 16px; text-align: left; gap: 8px; }
.toestemming__titel { font-size: 1rem; }
.toestemming p, .toestemming__nee { font-size: .875rem; }
.toestemming__nee { padding: 10px; border: 1px solid var(--rand); border-radius: 999px; text-decoration: none; }
@media (max-width: 899px) {
  .hoofdmenu > summary { display: block; cursor: pointer; padding: 9px 14px; border: 1px solid var(--rand); border-radius: 999px; background: var(--wit); font-size: 1rem; }
  .kop__bediening { position: relative; flex: none; gap: 5px; margin-left: auto; }
  .hoofdmenu[open] .kop__rechts {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 25;
    width: min(360px, calc(100vw - 32px)); padding: 10px;
    border: 1px solid var(--rand); border-radius: 16px; background: var(--wit);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
  }
  .hoofdmenu[open] .nav { flex: 1 1 100%; }
  .taalkiezer__code { display: inline; }
  .taalkiezer__naam {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .categorieen--plaats { display: none; }
  .introductie { padding-top: 20px; }
  .introductie h1 { font-size: 1.65rem; }
  .kop__binnen { flex-wrap: nowrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .kop__rechts { gap: 5px; }
  .merk__boven { display: none; }
  .hoofdmenu > summary, .nav a, .taalkiezer > summary, .kop__rechts > .knop { font-size: .875rem; padding: 8px 10px; }
  .locatiebalk { gap: 8px; padding: 12px; }
  .locatiebalk__waar { flex-basis: calc(100% - 116px); min-width: 0; }
  .locatiebalk__straal { flex: 0 0 108px; }
  .locatiebalk select { width: 100%; min-width: 0; font-size: 1rem; }
  .locatiebalk label { font-size: .875rem; }
  .datumkeuzes { gap: 6px; margin: 12px 0; }
  .filterknop { padding: 10px 12px; font-size: .875rem; }
  .toestemming-achtergrond:not([hidden]) { right: 8px; bottom: 8px; width: calc(100% - 16px); }
}