/* De opmaak van de deelautokaart van Dégage.
   ------------------------------------------------------------------------------------
   Hoort bij `kaart.html`, dat de structuur en de pictogrammen draagt, bij `kaart.js`,
   dat de logica draagt, en bij `taal/*.js`, dat de teksten draagt. Alle vier worden ze
   door de browser rechtstreeks gelezen: geen bouwstap, geen preprocessor, geen module.

   Wordt in de kop van `kaart.html` ingeladen, ná de opmaak van Leaflet en
   Leaflet.markercluster — want een deel van de regels hieronder overschrijft die.

   Wat hier in volgorde staat:

   · de kleuren en maten als variabelen op `:root` — verander een kleur daar en nergens
     anders;
   · de pagina zelf, het paneel linksboven en alles wat eromheen over de kaart ligt: de
     meldknop, het voorbehoud, de knoppen, het instellingendoosje, het zoekveld;
   · de balk met dichtstbijzijnde auto's onderaan;
   · de filters in het paneel: chips, schuiven, inklapbare secties;
   · de kaart zelf: pins, clusters, naamlabels, popups, en het laadscherm;
   · helemaal onderaan één `@media (max-width: 640px)` met alles wat op een telefoon
     anders ligt, en een kleine voor heel smalle schermen.

   Twee dingen om te weten voor je iets verschuift:

   · Een paar maten komen uit het script en staan als variabele op `<html>`:
     `--dichtbij-hoogte` en `--dichtbij-ruimte` (zie `meetDichtbij()` in `kaart.js`). Ze
     zijn gemeten en niet vastgezet, want ze veranderen mee met de tekst.
   · De overlays (paneel, balk, knoppen) staan op `z-index: 1000` en liggen daarmee boven
     álle lagen van Leaflet: die zitten samen in één stapelcontext op 400. Een popup kan
     er dus nooit bovenop komen; wat moet wijken, wordt weggezet met een klasse op
     `<body>` (`toont-popup`, `popup-over-balk`).
*/

:root {
  --inkt:        #1d2a28;
  --inkt-zacht:  #5a6a67;
  --groen:       #2f6f5e;
  --groen-diep:  #235348;
  --elektrisch:  #0b6ea8;
  --lijn:        #dfe4e2;
  --vlak:        #ffffff;
  --vlak-zacht:  #f4f6f5;
  --schaduw:     0 1px 2px rgba(29,42,40,.08), 0 4px 16px rgba(29,42,40,.10);
  --radius:      10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--inkt);
  background: var(--vlak-zacht);
  -webkit-text-size-adjust: 100%;
}
#kaart { position: absolute; inset: 0; background: var(--vlak-zacht); }

/* ---------- paneel linksboven ---------------------------------------------------- */
.paneel {
  position: absolute;
  z-index: 1000;
  top: 12px; left: 12px;
  /* Breed genoeg dat de meeste keuzegroepen op één of twee regels passen: elke extra
     regel chips maakt de filterlijst hoger, en die moet dan eerder scrollen. */
  width: 380px;
  max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
/* De kop staat vast, de filterlijst eronder scrollt. `min-height: 0` op die lijst hoort
   erbij omdat een flexitem standaard weigert kleiner te worden dan zijn inhoud — zonder
   dat groeit de lijst uit het paneel en snijdt `overflow: hidden` haar onderkant af. */
.paneel__kop { flex: none; padding: 11px 13px 12px; }
.kopregel { display: flex; gap: 7px; }

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

/* Leaflet zet de zoomknoppen linksboven — precies waar het paneel ligt. Op een breed
   scherm lagen ze daar onzichtbaar ónder, en ingeklapt staken ze er half onderuit.
   Naar de rechterkant, waar het paneel nooit komt. */
.leaflet-top.leaflet-left { left: auto; right: 0; }

/* De uitzoomknop onder + en −. Leaflet levert de doos (wit, rand, hoeken); alleen het
   pictogram moet nog gecentreerd worden, want `.leaflet-bar a` rekent op een letter. */
.alles-knop {
  display: flex !important; align-items: center; justify-content: center;
  color: var(--inkt);
}
.alles-knop svg { width: 15px; height: 15px; }
.alles-knop:hover { color: var(--inkt); }

/* ---------- melden ---------------------------------------------------------------
   Een zwevende knop links naast de kaartknoppen, op gelijke hoogte met de plusknop.
   Niet in het instellingendoosje: wie een fout ziet, ziet hem terwijl hij naar de
   kaart kijkt — dan moet de uitweg dáár staan en niet achter een tandwiel. Met
   woorden erbij, want een pictogram alleen vertelt niet waar je op drukt.

   De afstand tot de rand: de kaartknoppen houden 10 px marge en zijn ten hoogste
   30 px breed (34 px op een aanraakscherm), dus 52 px zet de knop er net links van,
   hoe breed die balk ook uitvalt. */
.melden {
  position: absolute; z-index: 1000;
  top: 10px; right: 52px;
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--groen);
  border: 1px solid var(--groen-diep); border-radius: 999px;
  box-shadow: var(--schaduw);
}
.melden svg { flex: 0 0 auto; width: 16px; height: 16px; }
.melden:hover { background: var(--groen-diep); }
.melden:focus-visible { outline: 2px solid var(--groen-diep); outline-offset: 2px; }

.telling {
  margin: 10px 0 0;
  font-size: 13px; color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
/* De datum hoort bij de telling: het aantal wagens is maar waar op één dag. */
.telling__datum:not(:empty)::before { content: " · "; }

/* ---------- het voorbehoud bij het openen ----------------------------------------------
   Een kaart onderaan in het midden, die van onderen binnenschuift: over de kaart, maar
   zonder haar af te dekken, en weg van het paneel en de knoppen bovenaan. Boven de
   overlays (1000), onder de laadmelding en de taalvraag.

   Na 15 seconden gaat het vanzelf weg (zonder zichtbare klok). Bij het sluiten vliegt het naar het ⓘ-knopje in de
   kaartknoppen (sluitVoorbehoud() in het script); zie `.voorbehoud-knop` hieronder. */
.voorbehoud {
  position: fixed; z-index: 1100;
  left: 16px; right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 440px; margin: 0 auto;
  padding: 13px 42px 16px 16px;
  font-size: 13px; line-height: 1.45; color: var(--inkt-zacht);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(29,42,40,.08), 0 12px 32px rgba(29,42,40,.18);
  overflow: hidden;
  animation: voorbehoud-in .35s cubic-bezier(.2,.8,.3,1);
}
.voorbehoud[hidden] { display: none; }
.voorbehoud h2 { margin: 0 0 8px; font-size: 14px; color: var(--inkt); }
.voorbehoud ul { list-style: none; margin: 0; padding: 0; }
.voorbehoud li { position: relative; padding-left: 15px; }
.voorbehoud li + li { margin-top: 7px; }
/* Een groen bolletje in plaats van een opsommingsteken: rustiger, en in de kleur van
   Dégage. Op de hoogte van de eerste regel. */
.voorbehoud li::before {
  content: ""; position: absolute; left: 1px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--groen);
}
.voorbehoud strong { color: var(--inkt); font-weight: 600; }
.voorbehoud__sluit {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--inkt-zacht); background: none;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.voorbehoud__sluit svg { width: 14px; height: 14px; }
.voorbehoud__sluit:hover { background: var(--vlak-zacht); border-color: var(--lijn); color: var(--inkt); }
.voorbehoud__sluit:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }
@keyframes voorbehoud-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* Het ⓘ-knopje onder het tandwiel: het voorbehoud in het klein. Komt het venster er net
   in terecht, dan tikt het knopje één keer aan (`is-nieuw`), zodat je ziet waar het
   gebleven is. */
.voorbehoud-knop {
  display: flex !important; align-items: center; justify-content: center;
  color: var(--inkt);
}
.voorbehoud-knop svg { width: 16px; height: 16px; }
/* De knop naar de beheerpagina, onder de ⓘ; alleen voor beheerders (kiesBeheerknop()). */
.beheer-knop {
  display: flex !important; align-items: center; justify-content: center;
  color: var(--groen);
}
.beheer-knop svg { width: 16px; height: 16px; }
.voorbehoud-knop[aria-expanded="true"] { color: var(--groen); }
.voorbehoud-knop.is-nieuw { animation: voorbehoud-knop-tik .7s ease-out; }
.voorbehoud-knop.is-nieuw svg { animation: voorbehoud-knop-wip .7s ease-out; }
@keyframes voorbehoud-knop-tik {
  0%, 100% { background-color: var(--vlak); color: var(--inkt); }
  25%      { background-color: var(--groen); color: #fff; }
}
@keyframes voorbehoud-knop-wip {
  0%, 100% { transform: none; }
  25%      { transform: scale(1.3); }
  55%      { transform: scale(.92); }
}
/* Zonder binnenschuiven en zonder tik; het wegvliegen slaat het script dan ook over. */
@media (prefers-reduced-motion: reduce) {
  .voorbehoud,
  .voorbehoud-knop.is-nieuw,
  .voorbehoud-knop.is-nieuw svg { animation: none; }
}

/* ---------- knoppen -------------------------------------------------------------- */
.knop {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 11px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.knop:hover { background: var(--vlak-zacht); border-color: #cfd6d3; }
.knop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.knop[aria-expanded="true"] { background: var(--groen); border-color: var(--groen); color: #fff; }
.knop__telbol {
  display: inline-block; min-width: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  background: var(--groen); color: #fff; border-radius: 9px;
}
.knop[aria-expanded="true"] .knop__telbol { background: rgba(255,255,255,.28); }
.knop__telbol[hidden] { display: none; }
/* Vierkant, even groot als de zoekknop ernaast. */
.knop--ico { flex: none; width: 38px; padding: 0; }
.knop--ico svg { width: 18px; height: 18px; }

/* ---------- ingeklapt paneel ------------------------------------------------------
   Geminimaliseerd blijft er van het paneel niets over dan de knop zelf, met het
   hamburgerpictogram erin: geen tekst, want een knop van één pictogram breed heeft er
   geen plaats voor en het pictogram zegt het al. De kaart komt zo helemaal vrij. */
.paneel.is-klein {
  width: auto;
  border-radius: 9px;
}
.paneel.is-klein .paneel__kop { padding: 4px; }
.paneel.is-klein .zoek,
.paneel.is-klein .zoek__melding,
.paneel.is-klein .tellingregel,
.paneel.is-klein .filters { display: none; }
.paneel.is-klein .knop--ico { border-color: transparent; }
/* Open staat er een minteken in de knop, ingeklapt het hamburgerpictogram. Aan de
   klasse op het paneel, niet aan een `hidden` op de SVG: dan kan er nooit een moment
   zijn waarop ze allebei of geen van beide te zien zijn. */
.ico-menu { display: none; }
.paneel.is-klein .ico-min { display: none; }
.paneel.is-klein .ico-menu { display: block; }

/* ---------- instellingen achter de tandwielknop -----------------------------------
   De knop hangt bij de kaartbediening (zie AllesInBeeld en Instellingen in het script),
   en dit doosje hangt aan die knop. Absoluut, zodat het openklappen de knoppenrij niet
   verschuift. De kaartknoppen staan rechtsboven, dus klapt het naar links open. */
.instellingen {
  position: absolute;
  top: 0; right: calc(100% + 8px);
  width: 210px;
  padding: 9px 11px;
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px;
  box-shadow: var(--schaduw);
  /* Leaflet legt zijn eigen lettertype op aan alles in de kaart; hier weer dat van
     de rest van het paneel. */
  font-family: var(--font); font-size: 13.5px; color: var(--inkt);
  cursor: default;
}
.instellingen[hidden] { display: none; }
.instellingen .schakel { margin-top: 0; }
.instellingen .schakel + .schakel { margin-top: 8px; }
/* De taalkeuze staat onder de schakelaars, met een streep ertussen: het is geen
   weergavekeuze zoals de rest, maar iets waar je één keer aan komt. */
.schakel--taal {
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--lijn);
  cursor: default;
}
.schakel--taal select {
  flex: 1 1 auto; min-width: 0;
  min-height: 30px; padding: 3px 6px;
  font: inherit; font-size: 12.5px; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 7px;
  cursor: pointer;
}
/* Of de taal bewaard is, en een knop om dat te vergeten. Bewust zo klein en zacht als
   de colofon eronder: iets voor wie het zoekt, geen keuze die aandacht vraagt. */
.taalonthouden {
  margin: 4px 0 0;
  font-size: 11.5px; color: var(--inkt-zacht);
}
.taalonthouden[hidden] { display: none; }
.taalonthouden button {
  padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline;
  background: none; border: 0; cursor: pointer;
}
.taalonthouden button:hover { color: var(--inkt); }
.taalonthouden button:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.schakel--taal select:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
/* Leaflet geeft zijn knoppen een vaste regelhoogte en centreert de tekst; binnen dit
   doosje zou dat de labels uit elkaar trekken. */
.instellingen, .instellingen * { line-height: 1.45; text-align: left; }
/* De naamsvermelding van het pictogram, onder dezelfde streep als de taalkeuze: ze hoort
   er te staan, maar ze is niets om aan te draaien. Klein en zacht dus, net als de
   attributie onderaan de kaart. */
.instellingen .colofon {
  margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--lijn);
  font-size: 11.5px; color: var(--inkt-zacht);
}
/* Hoe actueel de gegevens zijn en de naamsvermelding: samen één voetnoot, één streep. */
.instellingen .colofon + .colofon { margin-top: 6px; padding-top: 0; border-top: 0; }
/* Dit paneel hangt in een `.leaflet-bar`, en Leaflet kleedt élke <a> daarin aan als een
   knop: display:block, 30x30, gecentreerd, met een rand eronder. Dat is prima voor + en −,
   maar het knipt een lopende zin af tot één vierkantje. Alles daarvan hier terugzetten —
   zonder dit staat er letterlijk alleen "Car" in beeld. */
.instellingen .colofon a {
  display: inline; width: auto; height: auto;
  line-height: inherit; text-align: left;
  background: none; border: 0;
  color: inherit; text-decoration: underline;
}

/* Het wolkje na de taalvraag: "hier kan je de taal altijd aanpassen". Het staat naast
   het tandwiel, net boven het ⓘ-knopje onderaan de knoppenbalk, en het pijltje wijst er
   recht naar.
   Groen, zodat het opvalt tussen de witte kaartknoppen; het gaat na 7 s vanzelf weg. */
.tandwielhint {
  position: absolute;
  bottom: 31px; right: calc(100% + 10px);   /* één knop (30 px) en zijn rand hoger */
  width: max-content; max-width: 220px;
  margin: 0; padding: 7px 10px;
  font-family: var(--font); font-size: 13px; line-height: 1.4; color: #fff;
  background: var(--groen); border-radius: 8px;
  box-shadow: var(--schaduw);
  cursor: pointer;
  animation: tandwielhint-in .25s ease-out;
}
.tandwielhint[hidden] { display: none; }
/* Het pijltje, midden op de hoogte van het tandwiel (30 px). */
.tandwielhint::after {
  content: ""; position: absolute;
  bottom: 9px; left: 100%;
  border: 6px solid transparent; border-left-color: var(--groen);
}
@keyframes tandwielhint-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Anker voor het uitklapdoosje hierboven: zonder dit hangt het aan de pagina. */
.kaartknoppen { position: relative; }

/* Het tandwiel, in dezelfde doos als + , − en de uitzoomknop. */
.tandwiel-knop {
  display: flex !important; align-items: center; justify-content: center;
  color: var(--inkt);
}
.tandwiel-knop svg { width: 15px; height: 15px; }
.tandwiel-knop:hover { color: var(--inkt); }
/* Het uitklapdoosje staat als laatste kind in de balk, dus Leaflet rondt het tandwiel
   niet meer af als onderste knop. Hier alsnog. */
.tandwiel-knop { border-bottom: none; border-radius: 0 0 4px 4px; }
.tandwiel-knop[aria-expanded="true"] { background: var(--groen); color: #fff; }

/* ---------- adres zoeken ----------------------------------------------------------
   De kop van het paneel. Het veld neemt de ruimte die de twee knoppen overlaten. */
.zoek { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.zoek input {
  flex: 1 1 auto; min-width: 0;
  min-height: 38px; padding: 8px 11px;
  font: inherit; font-size: 13.5px; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px;
}
.zoek input::placeholder { color: var(--inkt-zacht); }
.zoek input:focus-visible { outline: 2px solid var(--groen); outline-offset: -1px; }
.zoek__knop {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  color: #fff; background: var(--groen);
  border: 1px solid var(--groen); border-radius: 8px; cursor: pointer;
}
.zoek__knop svg { width: 17px; height: 17px; }
.zoek__knop:hover { background: var(--groen-diep); border-color: var(--groen-diep); }
.zoek__knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.zoek__knop[aria-busy="true"] { opacity: .6; }
/* Zelfde maat als de zoekknop ernaast, maar wit: de groene knop blijft de
   hoofdhandeling. Draait tijdens het opzoeken, zodat je ziet dat er iets gebeurt. */
.zoek__locatie {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  color: var(--inkt); background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.zoek__locatie svg { width: 17px; height: 17px; }
.zoek__locatie:hover { background: var(--vlak-zacht); border-color: #cfd6d3; }
.zoek__locatie:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.zoek__locatie[aria-busy="true"] { color: var(--groen); }
.zoek__locatie[aria-busy="true"] svg { animation: draai 1.1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
/* Wie geen beweging wil, krijgt ze niet — de kleurwissel zegt het dan alleen. */
@media (prefers-reduced-motion: reduce) {
  .zoek__locatie[aria-busy="true"] svg { animation: none; }
}

/* Jouw eigen positie. Een gevulde stip met een halo, anders dan de rode ring van een
   gezocht adres: het ene is waar jij bent, het andere waar je naar zocht. */
.hierpunt {
  display: block; width: 13px; height: 13px; margin: 7px 0 0 7px;
  border: 3px solid #fff; border-radius: 50%;
  background: var(--elektrisch);
  box-shadow: 0 0 0 3px rgba(11,110,168,.28), 0 1px 4px rgba(29,42,40,.45);
}

.zoek__melding {
  margin: 6px 0 0;
  font-size: 12.5px; color: var(--inkt-zacht);
}
.zoek__melding[hidden] { display: none; }

/* Het gezochte punt. Een ring, geen pin: het is geen standplaats. */
.zoekpunt {
  display: block; width: 15px; height: 15px; margin: 6px 0 0 6px;
  border: 3px solid #b3402f; border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 1px 4px rgba(29,42,40,.45);
}

/* ---------- balk met dichtstbijzijnde wagens --------------------------------------
   Onderaan, want de kaart eromheen moet zichtbaar blijven: de lijst is een antwoord
   op "wat staat er dicht bij dit adres", niet een tweede paneel. */
/* Twee lagen, en dat heeft een reden. `.dichtbij` is de RUIMTE waarin de balk mag staan:
   onzichtbaar, altijd even breed, en de container waarop de kaartjes hieronder hun query
   doen. `.dichtbij__doos` is de balk zelf, en die is niet breder dan wat erin staat.

   Waarom de ruimte vast staat en de doos niet: een balk die van rand tot rand loopt met
   twee kaartjes erin is drie kwart leegte over de kaart, en een balk die van breedte
   verspringt zodra je de filters opent, laat de kaartjes onder je cursor wegschuiven. De
   ruimte houdt daarom links altijd plaats vrij voor het filterpaneel op zijn volle hoogte
   (12 + 380 + 12), ook als dat nu dicht staat — dan is die plaats gewoon kaart. Alleen
   een geminimaliseerd paneel geeft ze terug, want daar komt niets meer uit open.

   De containerquery hoort op de ruimte en niet op de doos: hoevéél kaartjes er passen,
   hangt af van de plaats die er ís, niet van de breedte die ze daarna innemen. Een query
   op een doos die zich naar haar inhoud voegt, zou naar zichzelf kijken. */
.dichtbij {
  position: absolute; z-index: 1000;
  /* Boven de OSM-attributie blijven: die is een licentievoorwaarde en mag niet
     bedekt worden. Ze is ongeveer 17 px hoog en staat rechtsonder. */
  left: 404px; right: 12px; bottom: 34px;
  display: flex;
  /* De ruimte zelf vangt geen klikken: naast de doos ligt gewoon kaart, en daar hoort
     slepen en zoomen te werken alsof er niets staat. */
  pointer-events: none;
  container: dichtbij / inline-size;
}
.paneel.is-klein ~ .dichtbij { left: 12px; }
.dichtbij[hidden] { display: none; }
.dichtbij__doos {
  /* `min-width: 0` en `max-width: 100%`: nooit breder dan de ruimte, en de kaartjes
     krimpen mee in plaats van eruit te steken. */
  min-width: 0; max-width: 100%;
  pointer-events: auto;
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 10px 12px 12px;
}
.dichtbij__kop { display: flex; align-items: baseline; gap: 10px; }
.dichtbij__titel {
  margin: 0 auto 0 0;
  font-size: 12.5px; color: var(--inkt-zacht);
}
.dichtbij__titel b { color: var(--inkt); font-weight: 600; }
.dichtbij__sluit {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; margin: -2px -3px 0 0;
  color: var(--inkt-zacht); background: none;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.dichtbij__sluit svg { width: 15px; height: 15px; }
.dichtbij__sluit:hover { background: var(--vlak-zacht); border-color: var(--lijn); color: var(--inkt); }
.dichtbij__sluit:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }

/* Nooit een horizontale schuifbalk. De kaartjes delen de breedte gelijk op en krimpen
   mee tot 112 px; wat daaronder niet meer past, valt weg — van achteren af, want de
   lijst staat op afstand en de verste wagen mist het minst. Een half kaartje aan de
   rand, of een schuifbalk onder vijf kaartjes, helpt niemand.

   Welk kaartje wegvalt, beslist een containerquery op de balk zelf en niet op het
   venster: de balk is breder of smaller naargelang de filters open staan, en op een
   telefoon loopt ze van rand tot rand. Elke drempel is n × (112 + 8) − 8: n kaartjes van
   minstens 112 px met 8 px ertussen. Acht is het meeste dat de balk ooit draagt
   (MAX_NAAMTREFFERS in het script). */
.dichtbij__lijst {
  display: flex; gap: 8px; margin: 9px 0 0; padding: 0; list-style: none;
}
/* `flex: 0 1 260px` en niet `1 1 0`: een kaartje rekt niet uit om leegte op te vullen —
   dat is nu net wat de doos niet meer doet — maar krimpt wél als de ruimte krap wordt. */
.dichtbij__lijst > li { flex: 0 1 260px; min-width: 0; display: flex; }
@container dichtbij (width < 952px) { .dichtbij__lijst > li:nth-child(n+8) { display: none; } }
@container dichtbij (width < 832px) { .dichtbij__lijst > li:nth-child(n+7) { display: none; } }
@container dichtbij (width < 712px) { .dichtbij__lijst > li:nth-child(n+6) { display: none; } }
@container dichtbij (width < 592px) { .dichtbij__lijst > li:nth-child(n+5) { display: none; } }
@container dichtbij (width < 472px) { .dichtbij__lijst > li:nth-child(n+4) { display: none; } }
@container dichtbij (width < 352px) { .dichtbij__lijst > li:nth-child(n+3) { display: none; } }
@container dichtbij (width < 232px) { .dichtbij__lijst > li:nth-child(n+2) { display: none; } }
.dichtbij__kaartje {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px;
  text-align: left; font: inherit;
  background: var(--vlak-zacht);
  border: 1px solid var(--lijn); border-radius: 8px;
  cursor: pointer;
}
.dichtbij__kaartje:hover { border-color: var(--groen); background: #eaf1ee; }
.dichtbij__kaartje:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }
.dichtbij__naam {
  font-size: 13.5px; font-weight: 600; color: var(--inkt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dichtbij__model {
  font-size: 12px; color: var(--inkt-zacht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dichtbij__waar {
  font-size: 11.5px; color: var(--inkt-zacht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dichtbij__afstand {
  margin-top: 3px;
  font-size: 12px; font-weight: 600; color: var(--groen-diep);
  font-variant-numeric: tabular-nums;
}

/* ---------- weergaveschakelaar ---------------------------------------------------- */
.schakel {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 12.5px; color: var(--inkt-zacht);
  cursor: pointer;
}
.schakel input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--groen); }
.schakel input:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ---------- filters -------------------------------------------------------------- */
.filters {
  flex: 1 1 auto; min-height: 0;
  border-top: 1px solid var(--lijn);
  padding: 4px 15px 14px;
  overflow-y: auto;
  /* Laat de ruimte voor de schuifbalk altijd staan: anders verspringt de hele
     filterlijst een paar pixels zodra ze lang genoeg wordt om te scrollen. */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.filters[hidden] { display: none; }
/* De filterschakelaar bovenaan: een eigen blokje met een streep eronder, zodat ze
   bij de filters horen maar niet voor een van de koppen aangezien worden. */
.filterschakels {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--lijn);
}
.filterschakels .schakel { margin-top: 0; }
.filterschakels .schakel + .schakel { margin-top: 8px; }
.filters h2 {
  margin: 13px 0 3px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--inkt-zacht);
}
.keuzes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.keuze { position: relative; }
.keuze input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.keuze span {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 5px 10px;
  font-size: 13px;
  background: var(--vlak); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 16px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.keuze em {
  font-style: normal; font-size: 11.5px; color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.keuze input:checked + span {
  background: var(--groen); border-color: var(--groen); color: #fff;
}
.keuze input:checked + span em { color: rgba(255,255,255,.75); }
.keuze input:focus-visible + span { outline: 2px solid var(--groen); outline-offset: 2px; }
.keuze input:disabled + span { opacity: .38; cursor: default; }

/* ---------- bouwjaar: van/tot ----------------------------------------------------
   Twee keuzelijsten en geen dubbele schuifbalk: een schuifbalk met twee grepen is op
   een telefoon lastig te raken en met een toetsenbord nauwelijks te bedienen. */
.bereik { display: flex; gap: 8px; margin-top: 7px; }
.bereik__veld {
  flex: 1 1 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--inkt-zacht);
}
.bereik__veld select {
  flex: 1 1 auto; min-width: 0;
  min-height: 32px; padding: 4px 6px;
  font: inherit; font-size: 13px; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px;
  cursor: pointer;
}
.bereik__veld select:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ---------- euronorm: één schuif, geen aanvinkvakjes ------------------------------
   De euronorm is een schaal, geen verzameling losse keuzes: Euro 5 is beter dan
   Euro 4. Aanvinkvakjes suggereren dat je er willekeurig uit kunt plukken; een schuif
   zegt "vanaf hier". */
.schuif { margin-top: 9px; }
.schuif input[type="range"] {
  width: 100%; margin: 0;
  accent-color: var(--groen);
  cursor: pointer;
}
.schuif input[type="range"]:focus-visible { outline: 2px solid var(--groen); outline-offset: 3px; }
.schuif__waarde {
  margin: 5px 0 0;
  font-size: 13px; font-weight: 500; color: var(--inkt);
}
.schuif__uitleg {
  margin: 4px 0 0;
  font-size: 11.5px; line-height: 1.35; color: var(--inkt-zacht);
}

/* Twee bolletjes op één balk (de euronorm): twee schuiven exact over elkaar, allebei
   doorzichtig. Alleen hun bolletjes vangen de muis of de vinger (`pointer-events`), zodat
   je altijd het bolletje pakt waar je op drukt, ook dat van de onderste schuif. Het groene
   stuk tussen de twee is een eigen balk eronder; het script zet --van en --tot (0 tot 1).

   `--duim` is de breedte van een bolletje: een schuif zet het midden van zijn bolletje
   niet op 0% en 100% maar een halve duim naar binnen, en de groene balk moet daar
   precies tussen lopen. */
.dubbel {
  --duim: 18px; --van: 0; --tot: 1;
  position: relative; height: 24px;
}
.dubbel__balk {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 6px; margin-top: -3px;
  background: var(--lijn); border-radius: 3px;
}
.dubbel__balk::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--duim) / 2 + var(--van) * (100% - var(--duim)));
  right: calc(var(--duim) / 2 + (1 - var(--tot)) * (100% - var(--duim)));
  background: var(--groen); border-radius: 3px;
}
.dubbel input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0;
  width: 100%; height: 24px; margin: 0;
  background: transparent;
  pointer-events: none;
}
.dubbel input[type="range"]::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.dubbel input[type="range"]::-moz-range-track { height: 24px; background: transparent; }
.dubbel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--duim); height: var(--duim); margin-top: calc((24px - var(--duim)) / 2);
  background: var(--groen); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  pointer-events: auto; cursor: grab;
}
.dubbel input[type="range"]::-moz-range-thumb {
  width: calc(var(--duim) - 4px); height: calc(var(--duim) - 4px);
  background: var(--groen); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  pointer-events: auto; cursor: grab;
}
.dubbel input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.dubbel input[type="range"]:active::-moz-range-thumb { cursor: grabbing; }
/* Het omlijnde bolletje bij toetsenbordbediening, niet de hele (onzichtbare) schuif. */
.dubbel input[type="range"]:focus-visible { outline: none; }
.dubbel input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--groen); outline-offset: 2px; }
.dubbel input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--groen); outline-offset: 2px; }
/* Op een aanraakscherm een groter bolletje: een vinger is geen muispijl. */
@media (pointer: coarse) {
  .dubbel { --duim: 24px; }
}

/* ---------- het OV-filter -----------------------------------------------------------
   Per modus een blokje: de naam en de twee schuiven eronder. Het streepje links is
   grijs, en groen zodra een schuif van die modus verzet is: zo zie je in één oogopslag
   welke modi meetellen. */
/* De drie knoppen waarmee je een modus openklapt: ze zien eruit als de chips (`.keuze`),
   maar zijn knoppen met aria-pressed, geen vakjes — ze filteren zelf niets. */
.ovknop {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 5px 10px;
  font: inherit; font-size: 13px;
  background: var(--vlak); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 16px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ovknop[hidden] { display: none; }
.ovknop .ico { width: 16px; height: 16px; color: var(--groen); }
.ovknop[aria-pressed="true"] { background: var(--groen); border-color: var(--groen); color: #fff; }
.ovknop[aria-pressed="true"] .ico { color: #fff; }
.ovknop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.ovmodus {
  margin-top: 9px; padding: 2px 0 2px 10px;
  border-left: 3px solid var(--lijn);
}
.ovmodus.is-aan { border-left-color: var(--groen); }
.ovmodus[hidden] { display: none; }
.ovmodus__kop {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12.5px; font-weight: 600; color: var(--inkt);
}
.ovmodus__kop .ico { width: 16px; height: 16px; color: var(--groen); }
.ovmodus .schuif { margin-top: 6px; }

/* De stand IN de schuifbalk, niet eronder (alleen in het OV-filter, `schuif--in`). De
   balk is een pil van 26 px hoog met de tekst erin; de tekst staat aan de kant waar het
   bolletje NIET staat (`duim-links` zet hem rechts), zodat het bolletje hem nooit
   bedekt. Een balk die iets filtert (`is-gezet`), kleurt lichtgroen, zoals een
   aangevinkte chip. Zie zetSchuifIn() in het script.

   Een schuifbalk is in elke browser anders opgebouwd, vandaar de twee reeksen
   pseudo-elementen: -webkit- voor Chrome, Edge en Safari, -moz- voor Firefox. */
.schuif--in { position: relative; margin-top: 6px; }
.schuif--in input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 26px; margin: 0;
  background: transparent;
}
.schuif--in input[type="range"]::-webkit-slider-runnable-track {
  height: 26px; box-sizing: border-box;
  background: var(--vlak-zacht); border: 1px solid var(--lijn); border-radius: 13px;
}
.schuif--in input[type="range"]::-moz-range-track {
  height: 26px; box-sizing: border-box;
  background: var(--vlak-zacht); border: 1px solid var(--lijn); border-radius: 13px;
}
.schuif--in.is-gezet input[type="range"]::-webkit-slider-runnable-track { background: #e6f2ed; border-color: #bcd9cd; }
.schuif--in.is-gezet input[type="range"]::-moz-range-track { background: #e6f2ed; border-color: #bcd9cd; }
.schuif--in input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: 2px;
  background: var(--groen); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.schuif--in input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--groen); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.schuif--in input[type="range"]:disabled { cursor: default; opacity: .45; }
.schuif--in input[type="range"]:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; border-radius: 13px; }
.schuif--in .schuif__waarde {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 12px 0 30px;
  font-size: 12px; font-weight: 500; color: var(--inkt);
  white-space: nowrap; overflow: hidden;
  pointer-events: none;
}
.schuif--in.duim-links .schuif__waarde { justify-content: flex-end; padding: 0 12px 0 30px; }
.schuif--in:not(.duim-links) .schuif__waarde { padding: 0 30px 0 12px; }
.ovbeide { margin-top: 10px; }
.ovbeide[hidden] { display: none; }

/* ---------- meer filters -----------------------------------------------------------
   Eén uitklapper onderaan de lijst, met de filters die de beheerders daar zetten (zie
   plaatsMeerFilters() in het script). Een streep erboven scheidt hem van de gewone
   filters; het label is groen en iets groter dan een filterkop, want het is geen filter
   maar een knop die er meer toont. Het telbolletje zegt hoeveel filters erin aanstaan,
   zodat een dichte uitklapper niet verzwijgt dat de kaart uitgedund wordt. */
.meerfilters {
  margin-top: 14px; padding-top: 8px;
  border-top: 1px solid var(--lijn);
}
.meerfilters[hidden] { display: none; }
.meerfilters > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  font-size: 13px; font-weight: 600; color: var(--groen);
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.meerfilters > summary::-webkit-details-marker { display: none; }
.meerfilters > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s;
}
.meerfilters[open] > summary::before { transform: rotate(90deg); }
.meerfilters > summary:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.meerfilters > summary[data-aantal]::after {
  content: attr(data-aantal);
  min-width: 16px; padding: 0 5px; box-sizing: border-box;
  font-size: 10px; font-weight: 600; line-height: 16px;
  text-align: center;
  color: #fff; background: var(--groen); border-radius: 8px;
}

/* ---------- filters wissen ---------------------------------------------------------
   Een pictogram rechts op de tellerregel, recht onder de minimaliseerknop en even breed:
   het hoort bij de teller, want het zet "12 van 568" terug op "568". Vroeger stond er
   een tekstknop bovenaan in de filterlijst, en die duwde bij de eerste filter die je
   aanzette de hele lijst naar beneden. Nu blijft zijn plaats ook leeg bewaard als er
   niets te wissen valt: `visibility` in plaats van `display`, dus niets verspringt —
   en een onzichtbare knop krijgt ook geen toetsenbordfocus. */
.tellingregel { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.tellingregel .telling { flex: 1 1 auto; min-width: 0; margin: 0; }
.herstel-knop {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 28px; padding: 0;
  color: var(--groen); background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.herstel-knop[hidden] { display: inline-flex; visibility: hidden; }
.herstel-knop svg { width: 17px; height: 17px; }
.herstel-knop:hover { background: var(--vlak-zacht); border-color: #cfd6d3; }
.herstel-knop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ---------- schuifbalken ----------------------------------------------------------
   De standaardschuifbalk van Windows is vijftien pixels breed en donkergrijs: in een
   paneel van 350 px trekt hij meer aandacht dan de filters zelf. Smal en zacht, en
   alleen zichtbaar als er iets te schuiven valt. */
.filters { scrollbar-width: thin; scrollbar-color: #c5cecb transparent; }
.filters::-webkit-scrollbar { width: 8px; height: 8px; }
.filters::-webkit-scrollbar-track { background: transparent; }
.filters::-webkit-scrollbar-thumb { background: #c5cecb; border-radius: 4px; }
.filters:hover::-webkit-scrollbar-thumb { background: #a9b5b1; }

/* ---------- filters sluiten ---------------------------------------------------------
   Alleen op een telefoon; zie de HTML en het `@media`-blok onderaan. */
.filters__voet { display: none; }
.filters__sluit {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 40px; padding: 8px 12px;
  font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--groen);
  border: 1px solid var(--groen); border-radius: 8px;
  cursor: pointer;
}
.filters__sluit svg { width: 16px; height: 16px; flex: none; }
.filters__sluit:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ---------- markers en clusters -------------------------------------------------- */
.pin-wrap { background: none; border: 0; }
.pin {
  /* 20 px in een pictogram van 26 px (zie teken()): (26 − 20) / 2 = 3 px rondom. */
  display: block; width: 20px; height: 20px; margin: 3px 0 0 3px;
  background: var(--groen);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(29,42,40,.45);
}
/* Elektrisch krijgt een eigen merkteken in plaats van hetzelfde bolletje: een
   bliksemschicht, en niet alléén een andere kleur — kleur op zichzelf is geen
   onderscheid voor wie kleurenblind is. De vorm doet het werk, de kleur versterkt. */
/* Even groot als een gewone pin: een elektrische wagen is niet belangrijker, alleen
   anders. De maat komt dus van `.pin`; hier alleen de kleur en de schicht. */
.pin--elektrisch {
  background: var(--elektrisch);
  display: flex; align-items: center; justify-content: center;
}
.pin--elektrisch::before {
  content: "";
  width: 12px; height: 12px;
  background: #fff;
  /* bliksemschicht */
  clip-path: polygon(58% 0, 22% 55%, 45% 55%, 38% 100%, 78% 42%, 52% 42%);
}
/* Uitgefilterd: wel te zien, niet in de weg. Kleiner en grijs, zodat het oog meteen
   ziet wat er wél past. De vorm blijft een pin, want het blijft een standplaats. */
.pin--grijs {
  width: 14px; height: 14px; margin: 6px 0 0 6px;
  background: #9aa5a2;
  border-width: 2px;
  box-shadow: 0 1px 2px rgba(29,42,40,.3);
  opacity: .85;
}
.pin--grijs::before { display: none; }   /* ook de bliksemschicht valt weg */

/* ---------- naam onder de pin ----------------------------------------------------
   Alleen als er ver genoeg ingezoomd is; JavaScript zet daarvoor `toont-namen` op de
   kaart. Een pin die te dicht bij zijn buur staat, zit nog in een cluster en heeft dus
   geen label. Wat dan nog botst — twee losse pins net ver genoeg uit elkaar — schuift
   schikNamen() in index.js naar rechts, links of boven de pin, of verbergt het met
   `.naamlabel--botst` als er nergens plaats is.

   Het is een Leaflet-tooltip, maar zonder het pijltje: het label plakt aan de pin en
   wijst nergens naar. `pointer-events: none` staat al in Leaflets eigen opmaak, zodat
   een label nooit een klik op de kaart opvangt. */
.naamlabel {
  display: none;
  padding: 1px 6px;
  font: 600 11.5px/1.55 var(--font);
  color: var(--inkt);
  background: rgba(255,255,255,.93);
  border: 1px solid var(--lijn); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(29,42,40,.2);
  white-space: nowrap;
}
.naamlabel::before { display: none; }   /* het pijltje van de tooltip */
#kaart.toont-namen .naamlabel { display: block; }
/* Zou over een andere naam, pin of bol vallen: zie schikNamen() in index.js. */
#kaart.toont-namen .naamlabel--botst { display: none; }

.leaflet-marker-icon:focus-visible .pin { outline: 2px solid var(--inkt); outline-offset: 2px; }
.cluster {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 600; color: #fff;
  background: var(--groen-diep);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(29,42,40,.4);
  font-variant-numeric: tabular-nums;
}
.cluster--s { width: 34px; height: 34px; font-size: 12.5px; }
.cluster--m { width: 41px; height: 41px; font-size: 13.5px; }
.cluster--l { width: 49px; height: 49px; font-size: 14px; }

/* NA `.cluster` en de maten, anders wint de groene achtergrond hierboven: gelijke
   specificiteit, en dan telt de volgorde. Stond dit eerder, dan bleef een grijze
   cluster gewoon groen. */
.cluster--grijs { background: #9aa5a2; box-shadow: 0 1px 3px rgba(29,42,40,.3); }
/* "12/47" is bijna dubbel zo breed als "12": kleinere letter en een ruimere bol,
   anders loopt het getal tegen de rand. */
.cluster--breuk { letter-spacing: -.02em; }
.cluster--breuk.cluster--s { width: 40px; height: 40px; font-size: 11px; }
.cluster--breuk.cluster--m { width: 46px; height: 46px; font-size: 12px; }
.cluster--breuk.cluster--l { width: 54px; height: 54px; font-size: 12.5px; }

/* ---------- popup ---------------------------------------------------------------- */
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.leaflet-popup-content { margin: 9px 14px 12px; font-family: var(--font); line-height: 1.45; }
.popup { min-width: 210px; max-width: 262px; font-size: 13.5px; }
.wagen + .wagen { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
/* Strak op elkaar: de naam en het model zijn samen één kop. Met `.popup` ervoor, want
   Leaflet geeft elke <p> in een popup `margin: 1.3em 0` via `.leaflet-popup-content p`,
   en die regel wint van een gewone klasse: zonder dit stond er boven en onder de naam
   zo'n 20 px lucht. Alleen de kop; de rest van de popup houdt de ruimte van Leaflet. */
.popup .wagen__naam { margin: 0; font-size: 15.5px; line-height: 1.25; font-weight: 600; color: var(--inkt); }
.popup .wagen__model { margin: 1px 0 0; line-height: 1.3; color: var(--inkt-zacht); font-size: 12.5px; }
/* De gemeente tussen haakjes achter de autonaam: erbij, maar zachter dan de naam zelf. */
.wagen__plaats { font-weight: 400; color: var(--inkt-zacht); }
/* Een nieuwe auto: staat in de live vloot maar nog niet in de feed (zie "de live vloot"
   in index.js). Het label staat waar anders merk en model staan. */
.wagen__nieuw {
  display: inline-block; padding: 1px 8px;
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: var(--groen); border-radius: 11px;
}
.wagen__nieuwuitleg {
  display: block; margin: 4px 0 0;
  font-size: 11.5px; line-height: 1.4; color: var(--inkt-zacht);
}
/* Waarom deze wagen buiten de filters valt. Grijs randje, zoals de grijze pin: het
   hoort bij dezelfde uitleg. */
.wagen__buiten {
  margin: 6px 0 0; padding: 4px 8px;
  font-size: 11.5px; line-height: 1.4; color: var(--inkt-zacht);
  background: var(--vlak-zacht);
  border-left: 3px solid #9aa5a2; border-radius: 4px;
}

/* De stockfoto toont het model, niet dít exemplaar. Daarom een vaste verhouding en
   `object-fit: cover`: de foto's uit Commons hebben allemaal een andere maat, en
   zonder dit springt de popup bij elke wagen een andere hoogte in. */
/* Op een breed scherm staat de naamsvermelding verticaal naast de foto; zie de popup op
   een breed scherm, onderaan. Smal staat ze eronder: daar is de popup al zo breed als
   het scherm toelaat, en valt er met draaien niets te winnen. */
.wagen__beeld { margin: 8px 0 0; }
.wagen__foto {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  margin: 0;
  object-fit: cover;
  background: var(--vlak-zacht);
  border: 1px solid var(--lijn); border-radius: 7px;
}
.wagen__geenfoto {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 9;
  margin: 0;
  background: var(--vlak-zacht);
  border: 1px dashed var(--lijn); border-radius: 7px;
  color: #b9c3c0;
}
.wagen__geenfoto svg { width: 46%; height: auto; }

/* Naamsvermelding is een licentievoorwaarde, geen sierregel — zie de OSM-attributie. */
.popup .wagen__bron {
  margin: 3px 0 0;
  font-size: 10.5px; line-height: 1.3; color: var(--inkt-zacht);
}
.wagen__bron a { color: inherit; }

/* De feiten stonden op één regel met punten ertussen. Dat leest als een muur; als
   lijstje met een pictogram ervoor is elk feit in één oogopslag te vinden. */
.feiten {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
}
.feit { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--inkt); }
.feit--breed { grid-column: 1 / -1; }
.ico { flex: none; width: 14px; height: 14px; color: var(--inkt-zacht); }
.feit--stroom .ico { color: var(--elektrisch); }

.labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px;
  font-size: 11.5px; color: var(--groen-diep);
  background: #eaf1ee; border: 1px solid #d3e2dc; border-radius: 11px;
}
.label .ico { width: 12px; height: 12px; color: var(--groen); }

.popup__voet {
  display: flex; align-items: center; gap: 5px;
  margin: 10px 0 0; padding-top: 8px;
  border-top: 1px solid var(--lijn);
  font-size: 12px; color: var(--inkt-zacht);
}
.popup__voet .ico { color: var(--inkt-zacht); }
/* Een tweede voetregel sluit aan bij de eerste in plaats van er een streep bij te zetten. */
.popup__voet + .popup__voet { margin-top: 3px; padding-top: 0; border-top: 0; }
/* De plek (het district): een pictogram met de naam erachter. In de voetregel van het
   OV-blok of, zonder OV-gegevens, op een eigen voetregel. */
.plek { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.plek .ico { color: var(--inkt-zacht); }

/* De oproep om lid te worden: het enige in de popup dat iets van de bezoeker vraagt, en
   dus het enige dat mag opvallen. Een groen getint kader, de vraag vet, en twee knoppen
   in hetzelfde ontwerp: wit met een groene rand, vol groen onder de muis. */
.lid {
  margin: 10px 0 0; padding: 9px 11px 10px;
  background: #e6f2ed;
  border: 1px solid #bcd9cd; border-left: 4px solid var(--groen); border-radius: 7px;
  color: var(--inkt);
}
.popup .lid__tekst { margin: 0; font-size: 13.5px; line-height: 1.35; }
.lid__tekst strong { color: var(--groen-diep); }
.popup .lid__knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.popup a.lid__knop {
  display: inline-block; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--groen); border-radius: 999px;
  color: var(--groen-diep); background: #fff;
}
.popup a.lid__knop:hover { border-color: var(--groen-diep); background: var(--groen-diep); color: #fff; }
.popup a.lid__knop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
/* Smal: de twee knoppen naast elkaar houden. Onder elkaar maken ze de popup een regel
   hoger, en dan moet pasPopupIn() hem verder verkleinen. */
@media (max-width: 640px) {
  .lid { padding: 8px 9px 9px; }
  .popup .lid__knoppen { flex-wrap: nowrap; gap: 5px; }
  .popup a.lid__knop { padding: 4px 9px; font-size: 12px; white-space: nowrap; }
}

/* Bereikbaarheid met openbaar vervoer. Een eigen blokje onder de wagens, want het hoort
   bij de standplaats en niet bij één wagen. Per halte of station één regel: een groot
   pictogram (de naam van de halte zit in zijn alt-tekst), de frequentie groot ernaast, en
   rechts de afstand. De Mobiscore staat klein in de voetregel. */
.ov {
  margin: 10px 0 0; padding: 8px 10px;
  background: var(--vlak-zacht);
  border: 1px solid var(--lijn); border-radius: 7px;
  font-size: 12.5px; line-height: 1.35; color: var(--inkt-zacht);
}
.ov p { margin: 0; }
.ov__lijst { list-style: none; margin: 0; padding: 0; }
.ov__rij {
  display: flex; align-items: center; gap: 8px;
}
.ov__rij + .ov__rij { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--lijn); }
.ov__icoon { flex: none; display: inline-flex; cursor: help; }
.ov__icoon .ico { width: 30px; height: 30px; color: var(--groen); }
.ov__freq { flex: 1 1 auto; min-width: 0; white-space: nowrap; color: var(--inkt-zacht); }
.ov__freq strong {
  font-size: 18px; font-weight: 700; color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.ov__geen { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 700; color: var(--inkt-zacht); }
.ov__afstand {
  flex: none;
  font-size: 16px; font-weight: 700; color: var(--groen);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* De Mobiscore: klein en zacht, met de ⓘ voor de uitleg van het hele blok erachter. */
/* De voetregel: het district links, de Mobiscore rechts — allebei over de plek. */
.ov__voet {
  display: flex; align-items: center; justify-content: space-between; gap: 4px 10px;
  flex-wrap: wrap;
  margin-top: 7px !important; padding-top: 6px; border-top: 1px solid var(--lijn);
  font-size: 11.5px; color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.ov__score { display: inline-flex; align-items: center; margin-left: auto; white-space: nowrap; }

/* Uitleg achter een ⓘ. De popup toont de feiten; wat een getal betekent en waar het
   vandaan komt, staat één klik verder — wie het wil weten vindt het, wie niet, leest
   een rustige popup. Een knop en geen <details>, zodat het ⓘ naast de titel kan staan
   terwijl de tekst eronder openklapt. */
.uitleg-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin: -3px 0 -3px 4px; flex: none;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--inkt-zacht); cursor: pointer; vertical-align: middle;
}
.uitleg-knop svg.ico { width: 15px; height: 15px; margin: 0; }
.uitleg-knop:hover, .uitleg-knop[aria-expanded="true"] { color: var(--groen); }
.uitleg-knop:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }
.uitleg {
  margin: 5px 0 0 !important;
  font-size: 11.5px; line-height: 1.4; font-style: italic; color: var(--inkt-zacht);
}
.uitleg[hidden] { display: none; }
.popup__voet a { color: var(--groen-diep); }

/* De andere auto's op dezelfde standplaats, als er maar één in de popup staat (zie
   ookHierHtml()). Een regel onder de wagen, met elke naam als een kleine knop: klikken zet
   die auto in de popup. */
.popup .popup__ook {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 10px 0 0; padding-top: 8px;
  border-top: 1px solid var(--lijn);
  font-size: 12px; color: var(--inkt-zacht);
}
.ook-knop {
  padding: 2px 10px;
  font: inherit; font-weight: 600; color: var(--groen-diep);
  background: #fff; border: 1px solid var(--groen); border-radius: 999px;
  cursor: pointer;
}
.ook-knop:hover { border-color: var(--groen-diep); background: var(--groen-diep); color: #fff; }
.ook-knop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ---------- de popup op een breed scherm -------------------------------------------
   Smal stond alles onder elkaar: naam, foto, feiten, labels, openbaar vervoer — een lange
   strook die op een laptopscherm al gauw moest scrollen. Op een breed scherm is er plaats
   genoeg om naast elkaar te zetten wat bij elkaar hoort:

   · per wagen de kop over de volle breedte, dan de foto links en de feiten rechts, en
     de toebehoren weer over de volle breedte. Het HTML blijft in de volgorde waarin het
     op een telefoon leest; het rooster hieronder schikt het anders;
   · de halte en het station naast elkaar in plaats van onder elkaar.

   Dezelfde grens als `mobiel` in popupRanden(), dat Leaflet hier de ruimte voor geeft. */
@media (min-width: 641px) {
  /* De foto 225 × 127 (16:9): tussen de volle breedte van vroeger (± 260, te groot) en
     de 190 van de eerste tweekolomsversie (te klein) in. Met de naamsvermelding verticaal
     ernaast en de feiten in één kolom past alles in 410 px; dat was 490. */
  .popup { width: 410px; min-width: 0; max-width: none; }
  /* De kop — naam, model en eventueel waarom de wagen buiten de filters valt — staat
     altijd bovenaan over de volle breedte, ook boven de foto: dat is waar je eerst naar
     kijkt. Daaronder de foto links en de feiten rechts, en helemaal onderaan de
     toebehoren weer over de volle breedte, want dat zijn losse labels die liggen waar
     plaats is.

     De foto spant de rijen van de feiten, de uitleg bij het bereik en een rij van 1fr.
     Een item dat over een flexibele rij spant, zet zijn hoogte alleen in die rij: is de
     foto hoger dan de feiten, dan komt de rest daar en schuiven de feiten niet uit
     elkaar. Wat een wagen niet heeft (geen uitleg, geen labels), is een lege rij van 0. */
  .wagen {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "naam   naam"
      "model  model"
      "buiten buiten"
      "beeld  feiten"
      "beeld  uitleg"
      "beeld  ."
      "labels labels";
    grid-template-rows: auto auto auto auto auto 1fr auto;
    column-gap: 14px; align-items: start;
  }
  .wagen > .wagen__naam   { grid-area: naam; }
  .wagen > .wagen__model  { grid-area: model; }
  .wagen > .wagen__buiten { grid-area: buiten; }  .wagen > .wagen__beeld  { grid-area: beeld; }
  .wagen > .feiten        { grid-area: feiten; }
  .wagen > .uitleg        { grid-area: uitleg; }
  .wagen > .labels        { grid-area: labels; }
  /* Foto en naamsvermelding naast elkaar: de vermelding staat verticaal langs de
     rechterrand van de foto, van onder naar boven te lezen, zoals een fotobijschrift in
     een krant. Ze kost zo een smalle strook breedte in plaats van een regel hoogte. Ze is
     nooit hoger dan de foto: een lange auteursnaam loopt over in een tweede kolom. Dat
     doet `height: 0; min-height: 100%` — meetellen voor de hoogte van de rij doet ze
     niet, vullen wel. Dat werkt omdat de foto hier een vaste breedte heeft. */
  .wagen__beeld { display: grid; grid-template-columns: 225px auto; column-gap: 3px; }
  .wagen__geenfoto { grid-column: 1 / -1; }
  .popup .wagen__bron {
    margin: 0; height: 0; min-height: 100%;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 9.5px; line-height: 1.2;
  }
  /* Naast de foto is er plaats voor één kolom feiten, en die leest ook makkelijker. */
  .wagen > .feiten { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }

  /* Bus, tram en trein naast elkaar. Drie kolommen zijn te smal voor pictogram, frequentie
     en afstand op één lijn: het pictogram staat links, de frequentie en de afstand onder
     elkaar ernaast. */
  .ov__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  .ov__rij {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icoon freq" "icoon afstand";
    column-gap: 7px; align-items: center;
  }
  .ov__icoon { grid-area: icoon; }
  .ov__freq, .ov__geen { grid-area: freq; }
  .ov__geen { grid-row: 1 / span 2; }
  .ov__afstand { grid-area: afstand; }
  .ov__rij + .ov__rij {
    margin-top: 0; padding-top: 0; border-top: 0;
    padding-left: 10px; border-left: 1px solid var(--lijn);
  }
}

/* ---------- laden en fouten ------------------------------------------------------ */
.melding {
  position: absolute; z-index: 1200; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(360px, calc(100vw - 32px));
  padding: 15px 18px;
  text-align: center; font-size: 14px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.melding[hidden] { display: none; }
.melding h2 { margin: 0 0 5px; font-size: 15px; }
.melding p { margin: 0; color: var(--inkt-zacht); font-size: 13px; }
.melding code {
  font-size: 12px;
  background: var(--vlak-zacht); padding: 1px 4px; border-radius: 4px;
}

/* De taalvraag ligt boven alles, ook boven de laadmelding: tot er een taal gekozen is,
   heeft lezen weinig zin. Knoppen in plaats van `confirm()`: in een iframe kan dat
   venster geblokkeerd zijn, en dan verdwijnt de vraag gewoon. */
.taalvraag {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(29,42,40,.35);
}
.taalvraag[hidden] { display: none; }
.taalvraag__kader {
  max-width: 340px; width: 100%;
  padding: 16px 18px;
  text-align: center;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.taalvraag h2 { margin: 0 0 12px; font-size: 15px; }
.taalvraag__knoppen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.taalvraag__knoppen button {
  flex: 1 1 auto; min-height: 36px; padding: 6px 12px;
  font: inherit; font-size: 13.5px; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px; cursor: pointer;
}
.taalvraag__knoppen button:hover { background: var(--vlak-zacht); }
.taalvraag__knoppen .taalvraag__huidig { background: var(--groen); border-color: var(--groen); color: #fff; }
.taalvraag__knoppen .taalvraag__huidig:hover { background: var(--groen-diep); }
.taalvraag__knoppen button:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* Het meldformulier. Zoals de taalvraag een venster midden op een verduisterde kaart,
   maar onder de taalvraag (1300) en boven het voorbehoud (1100). Een klik naast het
   venster sluit het niet: wie al een halve tekst getypt heeft, mag die niet verliezen
   door mis te tikken. Het kruisje is dat van het voorbehoud. */
.meldvenster {
  position: fixed; inset: 0; z-index: 1250;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(29,42,40,.35);
}
.meldvenster[hidden] { display: none; }
.meldvenster__kader {
  position: relative;
  max-width: 440px; width: 100%; max-height: 100%; overflow-y: auto;
  padding: 14px 18px 16px;
  font-size: 13.5px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(29,42,40,.08), 0 12px 32px rgba(29,42,40,.18);
}
.meldvenster h2 { margin: 2px 36px 10px 0; font-size: 15px; }
.meldvenster p { margin: 0 0 12px; }
/* De waarschuwing dat alles publiek is: het eerste wat je leest, en niet te missen. */
.meldvenster__publiek {
  padding: 9px 11px;
  color: var(--inkt-zacht);
  background: #fff7e0; border: 1px solid #ecd9a0; border-left: 4px solid #c99a1e;
  border-radius: 8px;
}
.meldvenster__publiek strong { color: var(--inkt); }
.meldvenster__veld { display: block; margin-bottom: 12px; }
.meldvenster__veld > span { display: block; margin-bottom: 4px; font-weight: 600; }
.meldvenster__uitleg { display: block; margin-top: 4px; font-size: 12px; color: var(--inkt-zacht); }
.meldvenster select,
.meldvenster textarea,
.meldvenster input[type="email"] {
  display: block; width: 100%;
  padding: 7px 9px;
  font: inherit; font-size: 14px; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px;
}
.meldvenster textarea { resize: vertical; min-height: 96px; }
.meldvenster select:focus-visible,
.meldvenster textarea:focus-visible,
.meldvenster input:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }
/* Weg voor mensen, maar niet `display: none` — sommige robots slaan zulke velden over. */
.meldvenster__lok {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}
.meldvenster__akkoord {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 12px; cursor: pointer;
}
.meldvenster__akkoord input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--groen); }
.meldvenster__controle:not(:empty) { margin-bottom: 12px; }
/* De screenshot: een klein voorbeeld, zodat de bezoeker ziet wat er openbaar meegaat. */
.meldbeeld { margin-bottom: 12px; }
.meldbeeld .meldvenster__akkoord { margin-bottom: 6px; }
.meldbeeld__bezig { margin: 0; font-size: 12px; color: var(--inkt-zacht); }
.meldbeeld__voorbeeld {
  display: block; max-width: 100%; max-height: 150px;
  border: 1px solid var(--lijn); border-radius: 6px;
}
.meldbeeld:has(#meldbeeld-aan:not(:checked)) .meldbeeld__voorbeeld { opacity: .35; }
.meldbeeld__voorbeeld[hidden] { display: none; }   /* anders wint `display: block` hierboven */
.meldoverzicht .meldbeeld__voorbeeld { margin-top: 8px; }
.meldvenster__fout {
  padding: 8px 10px;
  color: #8a1f1f; background: #fdecec; border: 1px solid #f0c4c4; border-radius: 8px;
}
.meldvenster__fout a { color: inherit; }
.meldvenster a { color: var(--groen-diep); }

/* Het overzicht na een geslaagde melding: wat er verstuurd is, in een rustig kader dat
   duidelijk geen invulveld meer is. De soort erboven, de tekst eronder zoals ze getikt
   werd — `pre-wrap` houdt de regelafbrekingen van de bezoeker, en een schuifbalk vangt
   een lange melding op zonder het venster uit te rekken. */
.meldbedankt__kop { font-weight: 600; }
.meldoverzicht {
  margin: 10px 0;
  padding: 8px 11px;
  color: var(--inkt-zacht);
  background: var(--vlak-zacht);
  border-left: 3px solid var(--lijn);
  border-radius: 6px;
}
.meldoverzicht__soort { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.meldoverzicht__tekst {
  margin: 0;
  max-height: 160px; overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.meldvenster__knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.meldvenster__knoppen button {
  min-height: 36px; padding: 6px 14px;
  font: inherit; font-size: 13.5px; color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 8px; cursor: pointer;
}
.meldvenster__knoppen button:hover { background: var(--vlak-zacht); }
.meldvenster__knoppen .is-hoofd { background: var(--groen); border-color: var(--groen); color: #fff; font-weight: 600; }
.meldvenster__knoppen .is-hoofd:hover { background: var(--groen-diep); }
.meldvenster__knoppen .is-hoofd:disabled { opacity: .6; cursor: progress; }
.meldvenster__knoppen button:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ---------- telefoon -------------------------------------------------------------- */
@media (max-width: 640px) {
  .paneel {
    top: 8px; left: 8px; right: 8px;
    width: auto;
    max-height: calc(100% - 16px);
  }
  .paneel__kop { padding: 11px 13px; }
  /* Ingeklapt hoort de knop alleen zichzelf breed te zijn — `right` zou hem hier
     anders over de volle breedte uitrekken. */
  .paneel.is-klein { right: auto; }
  /* De kaartknoppen staan op een telefoon linksonder: het doosje klapt dus naar rechts
     open, en met de onderkant gelijk aan de knop. */
  .instellingen {
    top: auto; bottom: 0;
    right: auto; left: calc(100% + 8px);
  }
  /* Het wolkje bij het tandwiel volgt: rechts ervan, met het pijltje naar links. */
  .tandwielhint { right: auto; left: calc(100% + 10px); }
  .tandwielhint::after {
    left: auto; right: 100%;
    border-left-color: transparent; border-right-color: var(--groen);
  }
  .filters { padding: 0 11px 8px; max-height: 46vh; }
  /* Compacte filterlijst: op een telefoon telt elke regel, want de lijst deelt het
     scherm met de kaart. Kleinere chips, kleinere koppen en minder lucht ertussen,
     zodat er meer filters tegelijk in beeld staan. Op een breed scherm is er ruimte
     genoeg en blijft alles zoals hierboven. */
  /* De schakelaars zelf staan hier in het instellingendoosje; zie plaatsFilterschakels()
     in het script. Het lege blokje met zijn streep blijft dan niet staan. */
  .filterschakels { display: none; }
  /* Schakelaars die op een telefoon niets te zeggen hebben ("volgt muis", "sluiten bij
     scrollen"): weg uit het instellingendoosje. Ze blijven op hun standaardwaarde. */
  .schakel--breed { display: none; }
  /* Labels in een vast raster, opties in één vak eronder (zie plaatsOpties() in het
     script). Niets aan een label mag van grootte veranderen door iets aan te klikken —
     anders verspringt het onder je vinger. Dus:
     · elk label neemt één kolom, open of dicht, altijd op dezelfde plek;
     · het open label kleurt alleen, het wordt niet breder of hoger;
     · het telbolletje ligt in een vooraf vrijgehouden strook rechts in het label, zodat
       het verschijnen ervan de tekst niet opschuift of op een extra regel duwt;
     · labels van schuiven komen met `order` onder die van de chips; daaronder de
       sluitknop over de volle breedte. De opties zelf zweven onder het paneel; zie
       `.filters__opties` hieronder. */
  .filters:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-content: start;
  }
  .filters h2 {
    position: relative;
    display: flex; align-items: center; gap: 5px;
    margin: 0; padding: 7px 24px 7px 0;
    font-size: 10.5px; line-height: 1.3;
    cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .filters h2::before {
    content: ""; flex: none;
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform .12s;
  }
  .sectie.is-open > h2 { color: var(--groen); }
  .sectie.is-open > h2::before { transform: rotate(90deg); }
  .filters h2:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
  .sectie { min-width: 0; }
  .sectie--schuif, .sectie--ov { order: 1; }
  /* "Meer filters" over de volle breedte onder de gewone labels, met zijn eigen labels
     in hetzelfde raster van twee kolommen. */
  .meerfilters { grid-column: 1 / -1; order: 2; margin-top: 2px; padding-top: 2px; }
  .meerfilters > summary { padding: 7px 0; font-size: 12px; }
  .meerfilters__lijst {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  /* De opties van het open label: een zwevend kaartje net onder het paneel, over de
     kaart. In de filterlijst zelf vielen ze vaak onder de scrollrand. `fixed` ontsnapt
     aan de `overflow: hidden` van het paneel (dat geen transform draagt); top en
     max-height zet plaatsOptieVak() in het script. Dicht mee met de filters. */
  .filters__opties:not([hidden]) {
    display: block;
    position: fixed; left: 8px; right: 8px; z-index: 1;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 11px 4px;
    background: var(--vlak);
    border: 1px solid var(--lijn); border-radius: var(--radius);
    box-shadow: var(--schaduw);
  }
  .paneel:not(.toont-filters) > .filters__opties,
  .paneel.is-klein > .filters__opties { display: none; }
  .sectie__opties { padding: 2px 0 6px; }
  .sectie__opties--chips:not([hidden]) { display: flex; flex-wrap: wrap; gap: 4px; }
  .sectie__opties--chips .keuzes { display: contents; }
  .filters__voet { grid-column: 1 / -1; order: 3; }
  /* Telbolletje: zoveel filters staan er achter dit label aan; zie werkKoppenBij(). */
  .filters h2[data-aantal]::after {
    content: attr(data-aantal);
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    min-width: 16px; padding: 0 5px; box-sizing: border-box;
    font-size: 10px; font-weight: 600; line-height: 16px; letter-spacing: 0;
    text-align: center;
    color: #fff; background: var(--groen); border-radius: 8px;
  }
  .keuzes { gap: 4px; margin-top: 4px; }
  .keuze span { min-height: 26px; padding: 2px 8px; gap: 4px; font-size: 12px; border-radius: 13px; }
  .keuze em { font-size: 10.5px; }
  .schuif { margin-top: 4px; }
  .schuif__waarde { margin-top: 2px; font-size: 12px; }
  .schuif__uitleg { margin-top: 2px; font-size: 11px; }
  .uitleg-knop { width: 20px; height: 20px; }
  /* Plakt onderaan de scrollende lijst. De negatieve marges heffen de padding van
     `.filters` op, zodat de witte strook de volle breedte neemt en er geen chips onder
     de knop door schemeren. */
  .filters__voet {
    display: block;
    position: sticky; bottom: -8px; z-index: 1;
    margin: 6px -11px -8px; padding: 5px 11px;
    background: var(--vlak);
    border-top: 1px solid var(--lijn);
  }
  .filters__sluit { min-height: 30px; padding: 4px 10px; gap: 5px; font-size: 12.5px; border-radius: 7px; }
  .filters__sluit svg { width: 12px; height: 12px; }
  /* Het voorbehoud dichter tegen de onderrand en iets compacter: zo blijft er boven het
     venster zoveel mogelijk kaart over. */
  .voorbehoud {
    left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 11px 40px 14px 14px;
    font-size: 12.5px;
  }
  .voorbehoud h2 { margin-bottom: 6px; font-size: 13.5px; }
  /* Onder 16 px zoomt Safari op een iPhone in zodra je in een veld tikt. */
  .meldvenster select,
  .meldvenster textarea { font-size: 16px; }
  .meldvenster { padding-left: 8px; padding-right: 8px; }
  /* Op een telefoon beslaat het paneel de volle breedte: de zoomknoppen naar onderaan,
     en weer naar links, want daar zit de duim.

     Staat de balk met dichtstbijzijnde wagens open, dan schuiven ze daarboven. De
     hoogte van die balk komt uit JavaScript, want ze hangt af van hoeveel er in past
     — een vast getal zou bij de eerste tekstwijziging niet meer kloppen. */
  .leaflet-top.leaflet-left {
    top: auto; left: 0; right: auto;
    bottom: calc(26px + var(--dichtbij-hoogte, 0px));
  }
  .leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
  .leaflet-touch .tandwielhint { bottom: 35px; }
  /* De knoppen staan hier linksonder, dus schuift de meldknop mee naar onderen en komt
     hij er rechts van te staan — 10 px marge plus de 34 px brede balk. De onderkant is
     dezelfde als die van de knoppen, balk of geen balk. */
  .melden {
    top: auto; right: auto;
    left: 52px;
    bottom: calc(26px + var(--dichtbij-hoogte, 0px));
  }
  /* Het instellingendoosje klapt hier naar rechts open — precies over de meldknop
     heen. Zolang het openstaat, gaat de knop weg; zetInstellingen() zet de klasse.

     Een popup doet hetzelfde: die mag hier over de knop vallen (popupRanden() houdt
     links onderaan geen plaats meer voor hem vrij), en omdat de knop hoger ligt dan de
     popuplaag van Leaflet moet hij daarvoor echt weg — anders staat er een groene pil
     over de tekst. De kaart zet `toont-popup` bij popupopen. */
  .toont-instellingen .melden,
  .toont-popup .melden { display: none; }
  /* Iets hoger dan op een breed scherm, zodat de zoomknoppen vrij blijven. */
  .dichtbij, .paneel.is-klein ~ .dichtbij {
    left: 8px; right: 8px; bottom: 30px;
  }
  /* Hier is het scherm soms te klein om een popup ergens neer te zetten waar niets
     staat; popupRanden() laat hem dan over de balk vallen in plaats van hem half buiten
     beeld te duwen. Bovenop komt hij daar niet: alle lagen van Leaflet zitten samen in
     één stapelcontext (`.leaflet-map-pane`, z-index 400) en blijven dus onder de 1000
     van de balk. Die z-index optrekken zou de tegels óók boven het paneel leggen. De
     balk gaat daarom zolang weg — een popup achter de balk is geen haar beter dan een
     popup die van het scherm valt. Alleen als hij haar écht raakt; de kaart meet dat na
     het openen en zet `popup-over-balk`. */
  .popup-over-balk .dichtbij { display: none; }
  /* Hier staat het paneel bovenaan over de volle breedte, dus er valt links niets vrij te
     houden en mag de doos de hele ruimte nemen: op een telefoon is die toch smaller dan
     twee kaartjes. */
  .dichtbij__doos { width: 100%; padding: 9px 10px 10px; }
  /* Filters open én de balk open: ze mogen elkaar niet overlappen, en de filters gaan
     voor — daar ben je op dat moment mee bezig. Paneel en balk liggen op een telefoon
     boven elkaar en laten samen nauwelijks kaart over; de balk gaat daarom zolang
     helemáál weg in plaats van te krimpen tot een strookje dat toch niet meer te lezen
     is. Ze komt ongewijzigd terug zodra de filters dichtgaan — dit is alleen opmaak, de
     inhoud blijft ondertussen staan.

     --dichtbij-ruimte staat dan vanzelf op 0: meetDichtbij() meet een balk die er niet
     staat als niets (zie balkInBeeld()), en het paneel krijgt de volle hoogte. */
  .paneel.toont-filters { max-height: calc(100% - 16px - var(--dichtbij-ruimte, 0px)); }
  .paneel.toont-filters ~ .dichtbij { display: none; }
}
@media (max-width: 380px) {
  .keuze span { font-size: 11.5px; padding: 2px 7px; }
}