:root {
  /* Stuurt de standaardopmaak van formulierelementen (vinkjes, scrollbars,
     de keuzelijst) mee met het thema. */
  color-scheme: dark;

  /* Het grijs komt uit shadcn (thema "zinc"), letterlijk uit hun registry
     overgenomen. De kern ervan: --accent is bijna-wit in het donker en
     bijna-zwart in het licht — dus geen kleur. Kleur is voorbehouden aan
     dingen die iets betekenen, en dat is bij een knop of een aangevinkt
     filter zelden zo. */
  --bg: oklch(0.141 0.005 285.823);
  --vlak: oklch(0.21 0.006 285.885);
  --vlak-hoog: oklch(0.274 0.006 286.033);
  --rand: oklch(1 0 0 / 10%);
  --rand-zacht: oklch(1 0 0 / 6%);
  --tekst: oklch(0.985 0 0);
  --tekst-zacht: oklch(0.705 0.015 286.067);
  --tekst-flauw: oklch(0.552 0.016 285.938);
  --accent: oklch(0.92 0.004 286.32);
  --accent-tekst: oklch(0.21 0.006 285.885);
  --waarschuwing: oklch(0.704 0.191 22.216);

  /* Het merkbolletje houdt zijn eigen rood: dat is het logo, geen besturing. */
  --merk: #ff5a4e;

  --radius: 0.625rem;

  /* Dringendheid op de kaart. Dit is data, geen chroom, dus die houdt kleur. */
  --vandaag: #ff4d4d;
  --week: #ffa62b;
  --maand: #35c1f1;
  --later: #8a97ab;

  /* Kleur per soort evenement. Vaste volgorde, acht vaste plekken — een
     negende soort krijgt geen verzonnen kleur maar valt terug op grijs.
     Deze reeks is gecontroleerd op onderscheidbaarheid, ook bij
     kleurenblindheid, tegen zowel de donkere als de lichte achtergrond. */
  --soort-1: #3987e5;  /* Beurs */
  --soort-2: #d95926;  /* Ruildag */
  --soort-3: #199e70;  /* Toernooi */
  --soort-4: #c98500;  /* Comic Con */
  --soort-5: #d55181;  /* (Retro) Games */
  --soort-6: #008300;  /* Markt */
  --soort-7: #9085e9;  /* Tour */
  --soort-8: #e66767;  /* Winkel opening */
  --soort-0: #8a97ab;  /* onbekend */
  --schaduw: 0 6px 24px rgb(0 0 0 / .45);
  --kaart-tint: 0;

  --kop-h: 58px;
  --paneel-b: 384px;

}

:root[data-thema="licht"] {
  color-scheme: light;

  --bg: oklch(0.985 0 0);
  --vlak: oklch(1 0 0);
  --vlak-hoog: oklch(0.967 0.001 286.375);
  --rand: oklch(0.92 0.004 286.32);
  --rand-zacht: oklch(0.945 0.004 286.32);
  --tekst: oklch(0.141 0.005 285.823);
  --tekst-zacht: oklch(0.552 0.016 285.938);
  --tekst-flauw: oklch(0.646 0.015 286);
  --accent: oklch(0.21 0.006 285.885);
  --accent-tekst: oklch(0.985 0 0);
  --waarschuwing: oklch(0.577 0.245 27.325);

  --vandaag: #e0322f;
  --week: #d97b06;
  --maand: #0d82b8;
  --later: #7a8699;

  /* Dezelfde reeks, eigen stappen voor de lichte achtergrond — geen
     automatische omkering maar apart gekozen en gecontroleerd. */
  --soort-1: #2a78d6;
  --soort-2: #eb6834;
  --soort-3: #1baf7a;
  --soort-4: #eda100;
  --soort-5: #e87ba4;
  --soort-6: #008300;
  --soort-7: #4a3aa7;
  --soort-8: #e34948;
  --soort-0: #7a8699;
  --schaduw: 0 4px 18px rgb(18 28 45 / .12);

}

* { box-sizing: border-box; }

/* Tekst die alleen voor schermlezers bedoeld is: de volledige naam achter
   een afkorting of een icoonknop. Wel in de leesvolgorde, niet in beeld. */
.vb {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Een eigen `display` op een element overschrijft het hidden-attribuut,
   dus die moet hier expliciet weer terug. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  /* `pan-y` en niet `none`: verticaal schuiven blijft toegestaan, zodat de
     lijst met je vinger scrolt, maar knijpzoomen en de zoomsprong bij
     dubbeltikken zijn eraf. Met `none` zou ook het scrollen sneuvelen.
     De kaart valt hier buiten: Leaflet zet op zijn eigen container
     `touch-action: none` en vangt slepen en knijpen zelf af. */
  touch-action: pan-y;
}

body {
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

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

.kop {
  height: var(--kop-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 16px;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  z-index: 1200;
}

.merk { display: flex; align-items: center; gap: 11px; min-width: 0; }

.merk-bal {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--merk);
  position: relative;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2.5px var(--vlak), 0 0 0 1px var(--rand);
}
.merk-bal::before {
  content: ""; position: absolute; inset: 0; top: 50%;
  height: 2.5px; margin-top: -1.25px; background: var(--vlak);
}
.merk-bal::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--vlak);
  box-shadow: inset 0 0 0 2px var(--merk);
}

.kop h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.merk-onder {
  margin: 0;
  font-size: 11.5px;
  color: var(--tekst-zacht);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kop-rechts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.teller {
  font-size: 12.5px;
  color: var(--tekst-zacht);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.teller b { color: var(--tekst); font-weight: 650; }

.icoonknop {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
  color: var(--tekst-zacht);
  cursor: pointer;
}
.icoonknop:hover { color: var(--tekst); border-color: var(--tekst-flauw); }
.icoonknop svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icoon-zon { display: none; }
:root[data-thema="licht"] .icoon-maan { display: none; }
:root[data-thema="licht"] .icoon-zon { display: block; }

/* ---------- werkblad ---------- */

/* Filters en lijst staan los van elkaar in het raster, zodat de filters op
   mobiel zichtbaar kunnen blijven terwijl de lijst wegschuift. Op het
   bureaublad stapelt het raster ze weer tot één zijbalk. */
.werkblad {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--paneel-b) 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

.filters { grid-area: 1 / 1; }
.paneel { grid-area: 2 / 1; }
.kaartvak { grid-area: 1 / 2 / -1 / -1; }

.paneel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--vlak);
  border-right: 1px solid var(--rand);
  z-index: 1100;
}

.kaartvak { position: relative; min-width: 0; }
#kaart { position: absolute; inset: 0; background: var(--vlak-hoog); }

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

.filters {
  padding: 12px 13px 10px;
  background: var(--vlak);
  border-right: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 1100;
}

/* Zonder `min-width: 0` mag een raster- of flexitem groeien met zijn inhoud
   mee. De filterbalk werd daardoor breder dan het scherm en de schuifbare
   rij had niets om te schuiven. */
.filters, .filterrij { min-width: 0; max-width: 100%; }

.filterrij { display: flex; gap: 7px; align-items: center; }

/* ---------- keuzebalk ----------
   Eén omhulsel met knoppen erin, waarvan de gekozene omhoog komt te liggen.
   Dat leest als "kies er één uit deze rij", terwijl losse gekleurde pillen
   er allemaal even hard om aandacht schreeuwen. Geen accentkleur hier: die
   is voorbehouden aan dingen die echt aanstaan of ingedrukt moeten worden. */

.keuzebalk {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
  flex: 0 0 auto;
}
.keuzebalk > button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tekst-zacht);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.keuzebalk > button:hover { color: var(--tekst); }
.keuzebalk > button.is-actief {
  background: var(--vlak);
  color: var(--tekst);
  font-weight: 620;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3), 0 0 0 1px var(--rand-zacht);
}
:root[data-thema="licht"] .keuzebalk > button.is-actief { box-shadow: 0 1px 3px rgb(18 28 45 / .14); }

/* De periodebalk vult de volle breedte; de rest past zich aan zijn inhoud aan. */
.filters > .keuzebalk { display: flex; }
.keuze-icoon { flex: 0 0 auto !important; display: grid; place-items: center; padding: 5px 8px !important; }
.keuze-icoon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.keuzebalk-klein > button { font-size: 11.5px; padding: 3px 8px; }

/* Land is geen keuze-uit-één maar twee losse schakelaars; ze delen de
   vormtaal, maar een uitgezette staat dimt in plaats van te verdwijnen. */
.keuzebalk-land > button { display: inline-flex; align-items: center; gap: 5px; }
.keuzebalk-land > button:not(.is-actief) { opacity: .45; }
/* Inline SVG in plaats van vlagemoji: Windows rendert die als lege blokjes. */
.vlag { width: 14px; height: 9.5px; border-radius: 1.5px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); }

/* ---------- keuzeveld ----------
   Een uitklaplijst hoort er niet uit te zien als een kaal besturingselement
   van het besturingssysteem tussen de rest. */

.keuzeveld { position: relative; flex: 1 1 0; min-width: 0; }
.keuzeveld select {
  width: 100%;
  height: 32px;
  appearance: none;
  padding: 0 26px 0 10px;
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
  color: var(--tekst);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.keuzeveld select:hover { border-color: var(--tekst-flauw); }
.keuzeveld::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  margin-top: -2px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-top-color: var(--tekst-flauw);
  pointer-events: none;
}
/* Staat er iets anders dan "alles", dan is dat een actief filter: dát mag
   je zien. */
.keuzeveld select.is-gefilterd {
  border-color: var(--accent);
  color: var(--tekst);
  font-weight: 600;
}
.keuzeveld-klein { flex: 0 0 auto; width: 112px; }
.keuzeveld-klein select { height: 27px; font-size: 11.5px; padding: 0 22px 0 8px; }
.keuzeveld-klein::after { right: 8px; }

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

.vierkantknop {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.vierkantknop:hover { color: var(--tekst); border-color: var(--tekst-flauw); }
.vierkantknop svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Accent alleen hier: dit staat écht aan en heeft gevolgen voor de hele lijst. */
.vierkantknop.is-actief {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-tekst);
}
.vierkantknop.is-bezig { opacity: .6; }
.vierkantknop.is-mis { border-color: var(--vandaag); color: var(--vandaag); }

/* ---------- instellingen ---------- */

.instellingen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
}
.instelling {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  font-size: 12px;
  color: var(--tekst-zacht);
}
.instelling-vink { cursor: pointer; justify-content: flex-start; gap: 8px; }
.instelling-vink:hover { color: var(--tekst); }
.instelling input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px; height: 15px;
  flex: 0 0 auto;
  cursor: pointer;
}

/* Zelf je plaats intypen. Nodig omdat een browser zonder GPS je positie
   afleidt uit je IP-adres of wifi-netwerk, wat er flink naast kan zitten. */
.instelling-locatie { align-items: center; }
.plaatsveld {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  width: 158px;
}
.plaatsveld input {
  flex: 1 1 auto;
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--tekst);
  font: inherit;
  font-size: 11.5px;
}
.plaatsveld input:focus { outline: none; border-color: var(--accent); }
.plaatsveld input::placeholder { color: var(--tekst-flauw); }
.plaatsveld button {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
}
.plaatsveld button:hover { color: var(--accent-tekst); background: var(--accent); border-color: var(--accent); }
.plaatsveld button svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.instelling-uitleg {
  margin: -1px 0 3px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--tekst-flauw);
}
.instelling-uitleg.is-waarschuwing { color: var(--week); }

.zoekveld {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
}
.zoekveld:focus-within { border-color: var(--accent); }
.zoekveld svg { fill: none; stroke: var(--tekst-flauw); stroke-width: 1.9; stroke-linecap: round; flex: 0 0 auto; }
.zoekveld input {
  flex: 1; min-width: 0;
  border: 0; background: none; color: var(--tekst);
  font: inherit; font-size: 13.5px; outline: none;
}
.zoekveld input::placeholder { color: var(--tekst-flauw); }
.zoekveld input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

/* ---------- eigen datumbereik ---------- */

.datumrij { display: flex; gap: 7px; }
.datumveld {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--tekst-flauw);
}
.datumveld > span { flex: 0 0 auto; }
.datumveld input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: var(--vlak-hoog);
  color: var(--tekst);
  font: inherit;
  font-size: 12.5px;
}
.datumveld input:focus { outline: none; border-color: var(--accent); }

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

/* De speld voor je eigen locatie: een blauwe stip met een halo, zoals in
   navigatie-apps, zodat hij niet te verwarren is met een beurs. */
.ik {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #2b8cf0;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 5px rgb(43 140 240 / .25), 0 1px 5px rgb(0 0 0 / .4);
}

.kaartje { position: relative; }
.kaartje-afstand {
  position: absolute;
  top: 9px;
  right: 11px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tekst-flauw);
  background: var(--vlak-hoog);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}
.kaartje:hover .kaartje-afstand { color: var(--tekst-zacht); }
.kaartje-naam { padding-right: 52px; }

.kaartje-datum {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--kleur, var(--tekst-flauw));
  margin-bottom: 3px;
}

/* De legenda is geen besturing maar een sleutel, dus staat hij onderaan,
   afgescheiden door een lijntje en in een kleinere letter. In soortmodus is
   hij wél aanklikbaar, en dat mag je aan de knopvorm zien. */
.legenda {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
  color: var(--tekst-flauw);
  padding-top: 8px;
  margin-top: 1px;
  border-top: 1px solid var(--rand-zacht);
}
.legenda:empty { display: none; }
.legenda-item { display: inline-flex; align-items: center; gap: 4px; }
.stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* In de soortmodus is de legenda meteen een filter: klikken op een soort
   toont alleen die soort. */
.legenda-knop {
  font: inherit;
  font-size: 11px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--tekst-flauw);
  cursor: pointer;
}
.legenda-knop:hover { color: var(--tekst); background: var(--vlak-hoog); border-color: var(--rand); }
.legenda-knop.is-actief {
  color: var(--tekst);
  background: var(--vlak-hoog);
  border-color: var(--tekst-flauw);
  font-weight: 600;
}
.legenda-n { opacity: .6; font-variant-numeric: tabular-nums; }

/* ---------- lijst ---------- */

.lijst {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rand) transparent;
}
.lijst::-webkit-scrollbar { width: 9px; }
.lijst::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 9px; border: 2px solid var(--vlak); }

.datumkop {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 14px 6px;
  background: color-mix(in srgb, var(--vlak) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rand-zacht);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.datumkop .relatief { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tekst-flauw); }

.kaartje {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0 11px;
  padding: 9px 13px 10px 0;
  border-bottom: 1px solid var(--rand-zacht);
  cursor: pointer;
  position: relative;
}
.kaartje:hover, .kaartje.is-hover { background: var(--vlak-hoog); }
.kaartje.is-gekozen { background: color-mix(in srgb, var(--accent) 12%, var(--vlak)); }
.kaartje::before {
  content: "";
  grid-row: 1 / -1;
  background: var(--kleur, var(--later));
  border-radius: 0 3px 3px 0;
}
.kaartje.is-af { opacity: .5; }

.kaartje-lijf { min-width: 0; grid-column: 2; }

.kaartje-naam {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kaartje-plaats {
  font-size: 12.5px;
  color: var(--tekst-zacht);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kaartje-plaats b { color: var(--tekst); font-weight: 600; }

.kaartje-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11px;
  color: var(--tekst-flauw);
}
.tijd { font-variant-numeric: tabular-nums; }

.leeg {
  padding: 40px 22px;
  text-align: center;
  color: var(--tekst-flauw);
  font-size: 13.5px;
  line-height: 1.6;
}
.leeg b { display: block; color: var(--tekst-zacht); font-size: 14.5px; margin-bottom: 5px; }

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

.voet {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-top: 1px solid var(--rand);
  font-size: 11px;
  color: var(--tekst-flauw);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.voet a { color: var(--tekst-zacht); text-decoration: underline; text-underline-offset: 2px; }
.voet a:hover { color: var(--accent); }
.voet-scheiding { opacity: .5; }

/* ---------- kaartspelden ---------- */

/* Het aanraakvlak is groter dan het bolletje; hier wordt het bolletje in
   het midden gezet. */
.speld-wrap { display: grid; place-items: center; }

.speld {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--kleur);
  border: 2.5px solid var(--vlak);
  box-shadow: 0 1px 5px rgb(0 0 0 / .5);
  transition: transform .12s;
}
.speld-wrap.is-actief .speld { transform: scale(1.6); z-index: 500; }
.speld-af { background: var(--tekst-flauw) !important; }
.speld-veel {
  width: auto; min-width: 22px; height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  color: #fff;
}

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background: transparent;
}
.marker-cluster div {
  background: var(--accent);
  color: #fff;
  border: 2.5px solid var(--vlak);
  box-shadow: 0 2px 9px rgb(0 0 0 / .45);
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
}
.marker-cluster span { display: block; }

/* ---------- popup ---------- */

/* Leaflet laat een kaartje in twee tienden van een seconde wegvagen. Dat is
   traag genoeg om te blijven plakken op het moment dat je de kaart al aan het
   verslepen bent — het kaartje schuift dan nog mee terwijl je er al vanaf
   wilt. Korter, en met een afremmende curve zodat het meteen vaart maakt. */
.leaflet-fade-anim .leaflet-popup { transition: opacity .12s ease-out; }

.leaflet-popup-content-wrapper {
  background: var(--vlak);
  color: var(--tekst);
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  /* Twee zachte schaduwen over elkaar in plaats van één harde: dat is hoe
     shadcn een kaartje laat zweven zonder dat je de schaduw opmerkt. */
  box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 12px 32px -8px rgb(0 0 0 / .35);
  /* De beeldbalk loopt tot de rand, dus die moet op de ronding afgesneden. */
  overflow: hidden;
  padding: 0;
}
.leaflet-popup-tip { background: var(--vlak); border: 1px solid var(--rand); }
/* De inhoud krijgt zelf geen marge meer: de beeldbalk moet tot de rand van
   het kaartje lopen, dus de witruimte zit per blok binnenin. */
/* De hoogte komt van het kaartvlak, niet van het venster: zie
   ververPopupHoogte(). De terugval geldt alleen tot de eerste berekening.
   Zelf niet scrollen: dat doet het middenstuk van het kaartje, zodat de
   voet met het adres en de knoppen altijd blijft staan. */
.leaflet-popup-content {
  margin: 0;
  width: 304px !important;
  overflow: hidden;
}

/* Leaflet zet zelf `margin: 1.3em 0` op elke alinea in een popup, en die
   regel is specifieker dan een losse klasse. Dat gaf gaten van zestien pixels
   boven én onder het adres en de rijtijd, terwijl de afstanden hier via de
   `gap` van de voet geregeld worden. */
.leaflet-popup-content p { margin: 0; }
/* Het kruisje zweeft boven de inhoud — en soms boven een foto — dus krijgt
   het een eigen achtergrondje zodat het altijd leesbaar blijft. */
.leaflet-container a.leaflet-popup-close-button {
  width: 26px;
  height: 26px;
  top: 8px;
  right: 8px;
  padding: 0 !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--tekst-zacht);
  background: color-mix(in oklab, var(--vlak) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px var(--rand);
}
.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--tekst);
  background: var(--vlak-hoog);
}
/* ---------------------------------------------------------------
   Het beurskaartje, opnieuw opgezet in de vormtaal van shadcn.

   Wat er anders is dan hiervoor:
   - geen emoji meer, maar lijniconen uit Lucide die in dezelfde dikte
     met de tekstkleur meetekenen;
   - geen gekleurde etiketten. Alles is neutraal grijs; de enige kleur
     in het kaartje is de rode rand van een geannuleerde beurs;
   - de knop is bijna-zwart in plaats van knalrood. Dat is de kern van
     hoe shadcn eruitziet: kleur zegt "let op", en dat zegt een knop die
     je uit zichzelf al ziet staan niet;
   - veel minder doosjes. De feiten stonden in een grijze balk met
     scheidingslijnen; nu zijn het gewoon regels tekst met een icoontje.
   --------------------------------------------------------------- */

/* Beeld en voet liggen vast, het middenstuk schuift. Zo kun je nooit in een
   kaartje zitten waarvan de knoppen onbereikbaar onderaan hangen. */
/* Buiten beeld, alleen om te meten hoe hoog een kaartje wordt voordat het
   opengaat — zie meetKaartjeHoogte(). Krijgt bewust dezelfde opmaak als een
   echt kaartje, anders klopt de meting niet. */
.meetvak {
  position: absolute;
  top: 0;
  left: -10000px;
  visibility: hidden;
  pointer-events: none;
}

.pop {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;

  /* De hoogtegrens staat hier, als lengte. Eerder stond hij op de ouder en
     had dit `max-height: 100%` — maar die ouder heeft geen vaste hoogte,
     alleen een maximum, dus dat percentage had niets om zich tegen af te
     zetten. Chrome vulde het alsnog in, Safari op de telefoon maakte er
     `none` van: het kaartje groeide door en er viel niets meer te schuiven. */
  max-height: var(--popup-max, 60vh);
  touch-action: pan-y;
}

.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* De beeldbalk is het eerste dat mag inleveren als de ruimte krap is: liever
   een strakker uitgesneden foto dan dat de openingstijd en de knoppen uit
   beeld scrollen. Bij genoeg hoogte blijft hij gewoon 16:7. */
/* De banner schuift mee met de inhoud in plaats van vast te staan. Zo kan
   hij uit beeld als het krap is — en dat is precies de bedoeling: van alles
   in dit kaartje is het plaatje het minst belangrijk. De negatieve marges
   halen hem door de padding van .pop-lijf heen tot aan de rand; de ronding
   komt van de overflow op .leaflet-popup-content-wrapper. */
.pop-beeld {
  aspect-ratio: 16 / 7;
  max-height: calc(var(--popup-max, 400px) * 0.34);
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--vlak-hoog);
  margin: -13px -15px 13px;
}
.pop-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pop-lijf {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Leaflet zet `touch-action: none` op de kaart om slepen en knijpen zelf
     af te handelen. Hier moet je vinger juist wél verticaal kunnen schuiven. */
  touch-action: pan-y;
  padding: 13px 15px 8px;
}

.pop-datum {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin-bottom: 6px;
}
.pop-wanneer { text-transform: none; letter-spacing: 0; font-weight: 400; }

.pop-naam {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0 0 2px;
  color: var(--tekst);
}


/* De openingstijd is waarvoor je dit kaartje opent, dus die krijgt de meeste
   ruimte van allemaal. Grote cijfers in vaste breedte, zodat 10:00 en 11:00
   onder elkaar uitlijnen als je door de spelden klikt. */
/* Socials links, tijd rechts ernaast op dezelfde regel. Daarmee staat er
   niets meer leeg naast de icoontjes én staan de grote cijfers rechts, in
   plaats van los onder de kop met een gat ernaast. */
/* De openingstijd op een eigen regel: grote cijfers links, de duur tegen de
   rechterrand. Past het bijschrift er niet naast — bij een beurs met
   VIP-tijd bijvoorbeeld — dan zakt het naar de volgende regel. */
.pop-tijd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 11px;
}
.pop-tijd-groot {
  display: block;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}
.pop-tijd-groot .tot {
  color: var(--tekst-flauw);
  font-weight: 400;
  margin: 0 .18em;
}
.pop-tijd-bij {
  font-size: 12px;
  line-height: 1.35;
  color: var(--tekst-zacht);
}

/* Hoe groot en hoe ingeburgerd: twee getallen die helpen kiezen, maar die
   niet met de openingstijd om aandacht hoeven te vechten. */
.pop-feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--tekst);
}
.feit { display: inline-flex; align-items: center; gap: 6px; }
.feit .ic { color: var(--tekst-zacht); }

/* Soort en voorzieningen: alles wat deze beurs kenmerkt, bij elkaar. */
.pop-etiketten {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
}

.etiket {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  background: var(--vlak-hoog);
  color: var(--tekst);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}
.etiket .ic { color: var(--tekst-zacht); }

.etiket-knop { font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; }
.etiket-knop:hover { background: color-mix(in oklab, var(--vlak-hoog) 70%, var(--tekst)); }

/* Bekend maar afwezig: blijft staan, want "geen gratis parkeren" is ook
   iets waard als je met de auto komt. Wel gedempt. */
.etiket.is-niet { background: none; border-color: var(--rand); color: var(--tekst-zacht); }
.etiket.is-niet .ic { opacity: .55; }
.etiket.is-niet::after { content: ": nee"; }

/* De enige kleur in het hele kaartje. */
.etiket.is-af {
  background: none;
  border-color: color-mix(in oklab, var(--waarschuwing) 45%, transparent);
  color: var(--waarschuwing);
  font-weight: 600;
}

/* Een etiket zonder tekst: in de lijst is er geen ruimte voor het woord,
   dus staat er alleen een icoontje met een tooltip. */
.etiket-kaal { padding: 3px 6px; cursor: default; }

/* Een aangeklikt soortfilter. Bijna-zwart in het licht en bijna-wit in het
   donker — hetzelfde signaal als de hoofdknop, want het is hetzelfde soort
   "dit staat aan". */
.etiket-knop.is-actief {
  background: var(--accent);
  color: var(--accent-tekst);
  font-weight: 600;
}
.etiket-knop.is-actief:hover { background: var(--accent); opacity: .9; }

.tijd { font-variant-numeric: tabular-nums; }

/* Merklogo's uit Simple Icons zijn gevulde vormen, geen lijntekeningen, dus
   die krijgen `fill` in plaats van `stroke`. Eenkleurig gehouden: zes felle
   merkkleuren naast elkaar zouden het kaartje weer bont maken, en twee van
   de zes zijn zwart — onzichtbaar in het donkere thema. */
.merk-ic { fill: currentColor; }

.social { text-decoration: none; }
.social:hover { background: color-mix(in oklab, var(--vlak-hoog) 70%, var(--tekst)); }
/* De socials: op één regel bij elkaar, onder de naam. */
.pop-socials {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin-top: 8px;
}

.pop-tekst { margin-top: 10px; }
.pop-tekst summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tekst-zacht);
  list-style: none;
}
.pop-tekst summary::-webkit-details-marker { display: none; }
.pop-tekst summary .ic { transition: transform .15s; }
.pop-tekst[open] summary .ic { transform: rotate(90deg); }
.pop-tekst summary:hover { color: var(--tekst); }
.pop-tekst > div {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tekst-zacht);
  max-height: 170px;
  overflow-y: auto;
  padding-right: 6px;
}

/* De voet is door één lijn van de rest gescheiden, niet door een eigen
   achtergrond. */
.pop-voet {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 11px 15px 13px;
  border-top: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Eén nette adresregel die je kunt kopiëren. Stond eerst als "plaats · zaal"
   onder de titel, waar hij alleen ruimte kostte; hier onderaan staat hij
   naast de rijtijd, precies waar je hem nodig hebt als je op weg gaat. */
.pop-adres {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tekst);
}
.pop-adres .ic { color: var(--tekst-zacht); margin-top: 1px; }
.pop-adres-tekst { flex: 1 1 auto; min-width: 0; }

.kopieerknop {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin: -3px -4px 0 0;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: none;
  color: var(--tekst-flauw);
  cursor: pointer;
}
.kopieerknop:hover { color: var(--tekst); background: var(--vlak-hoog); }
.kopieerknop .ic { margin: 0; }
/* Even bevestigen dat het gelukt is, anders weet je niet of er iets gebeurde. */
.kopieerknop.is-gelukt { color: var(--soort-3); }
.kopieerknop.is-gelukt .ic { stroke-width: 2.6; }

/* De rijtijd is waar je op afgaat als je besluit of je gaat, dus die staat
   groter dan de rest van de voet en de tijd zelf in de gewone tekstkleur.
   De afstand eromheen blijft ingetogen. */
.pop-reis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--tekst-zacht);
}
.pop-reis b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}
.pop-reis .ic { color: var(--tekst-zacht); }
.reis-scheiding { opacity: .5; margin: 0 1px; }

/* Even breed, ongeacht hoeveel het er zijn. Een raster met gelijke kolommen
   doet dat vanzelf, terwijl flex ze op hun tekstlengte laat verschillen —
   en dan staat "Website" naast een dubbel zo brede "Pokeradar". */
.pop-knoppen {
  margin-top: 3px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

.pop-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s;
}
.pop-knop-hoofd { background: var(--accent); color: var(--accent-tekst); }
.pop-knop-hoofd:hover { background: color-mix(in oklab, var(--accent) 90%, var(--accent-tekst)); }
.pop-knop-hoofd .ic { opacity: .7; }
.pop-knop-zacht { border-color: var(--rand); color: var(--tekst); }
.pop-knop-zacht:hover { background: var(--vlak-hoog); }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--vlak) 88%, transparent) !important;
  color: var(--tekst-flauw) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--tekst-zacht) !important; }
.leaflet-bar a {
  background: var(--vlak) !important;
  color: var(--tekst) !important;
  border-bottom-color: var(--rand) !important;
}
.leaflet-bar a:hover { background: var(--vlak-hoog) !important; }
.leaflet-touch .leaflet-bar { border-color: var(--rand) !important; }

/* ---------- mobiel ---------- */

.mobielschakel { display: none; }

@media (max-width: 860px) {
  /* De schakelbalk staat vast onderaan; paneel en kaart houden er
     allebei ruimte voor vrij, inclusief de veilige zone op iPhones. */
  :root {
    --paneel-b: 100%;
    --kop-h: 44px;
    --balk-h: calc(48px + env(safe-area-inset-bottom));
  }

  /* Eén kolom, twee rijen: filters bovenaan en daaronder de rij waarin
     kaart en lijst elkaar afwisselen. De filters blijven dus in beide
     weergaven bereikbaar. */
  .werkblad {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: var(--balk-h);
  }

  .filters { grid-area: 1 / 1; border-right: 0; }
  .paneel { grid-area: 2 / 1; border-right: 0; }
  .kaartvak { grid-area: 2 / 1; }

  body[data-weergave="kaart"] .paneel { display: none; }
  body[data-weergave="lijst"] .kaartvak { display: none; }

  .mobielschakel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px 9px calc(5px + env(safe-area-inset-bottom));
    background: var(--vlak);
    border-top: 1px solid var(--rand);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1300;
  }
  .mobielknop {
    padding: 7px;
    border-radius: 9px;
    border: 1px solid var(--rand);
    background: var(--vlak-hoog);
    color: var(--tekst-zacht);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
  }
  .mobielknop.is-actief { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
  .mobiel-telling { opacity: .75; font-weight: 500; }

  /* Op een telefoon telt elke pixel voor de kaart. De kop wordt een smalle
     balk en van de filters blijft alleen de periodekeuze staan; de rest komt
     achter "Meer filters" vandaan. */
  .kop { padding: 0 8px 0 10px; gap: 8px; }
  .merk { gap: 8px; }
  .merk-bal { width: 20px; height: 20px; box-shadow: inset 0 0 0 2px var(--vlak), 0 0 0 1px var(--rand); }
  .merk-bal::before { height: 2px; margin-top: -1px; }
  .merk-bal::after { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: inset 0 0 0 1.5px var(--accent); }
  .kop h1 { font-size: 14px; }
  .merk-onder { display: none; }
  .teller { font-size: 12px; }
  .icoonknop { width: 30px; height: 30px; border-radius: 8px; }

  .filters { padding: 7px 9px; gap: 7px; }

  /* Alles iets krapper, zodat de drie rijen samen niet meer ruimte kosten
     dan nodig. */
  .zoekveld { height: 32px; }
  .keuzebalk > button { padding: 5px 7px; font-size: 12px; }
  .keuzeveld select { height: 30px; }
  .vierkantknop { width: 30px; height: 30px; }

  /* De kleurensleutel kost een hele regel en het filteren op soort kan hier
     ook via de uitklaplijst, dus die laten we op een telefoon weg. */
  .legenda { display: none; }
}

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