/*
 * Fortuna Kaart — opmaak (uit de proef tools/fortuna-kaart). Bouwt op Fortuna UI: tokens.css, type, action, kpi, match (clubwapen).
 * Kleur, ruimte, radius, schaduw, tijd en maten komen uit tokens (fortuna-ui tokens.css, ook --fu-kaart-*). Controle:
 * python3 tools/fortuna-ui/tokencheck.py.
 */
.kaart {
	--kaart-pin-s: var(--fu-crest-s);
	--kaart-pin-m: var(--fu-crest-m);
	--kaart-pin-l: calc(var(--fu-crest-m) * 1.25);
	display: grid;
	gap: var(--fu-space-4);
	container-type: inline-size; /* kaart en kaartje naast elkaar alleen als de kaart zelf breed genoeg is (smalle tekstkolom: onder elkaar) */
}
.kaart [hidden] { display: none !important; } /* knoppen (.fu-btn) en lijstgroepen die het script verbergt */

/* Zitterd on Tour: ruimte tussen de seizoenspillen en het eerste blok, in beide tabs (Patrick 10-10) */
#tour-groep > [data-toon] { margin-top: var(--fu-space-6); }

/* Bediening: zoeken + afspelen */
.kaart__bediening { display: grid; gap: var(--fu-space-3); }
@media (min-width: 720px) { .kaart__bediening { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

.kaart__zoek { position: relative; }
.kaart__zoek-label { display: block; margin-bottom: var(--fu-space-2); }
.kaart__zoek-veld {
	display: flex;
	align-items: center;
	min-height: var(--fu-control-xl);
	border: var(--fu-lijn) solid var(--fu-c-line-strong);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-surface);
	padding-inline: var(--fu-space-5) var(--fu-space-2);
	gap: var(--fu-space-2);
}
.kaart__zoek-veld:focus-within { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.kaart__zoek-veld .fu-icon { width: var(--fu-icoon-l); height: var(--fu-icoon-l); color: var(--fu-c-fg-sub); flex: none; }
.kaart__zoek-invoer {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--fu-c-fg);
	font: inherit;
	font-size: var(--fu-fs-base);
}
.kaart__zoek-invoer:focus { outline: none; }
.kaart__zoek-invoer::placeholder { color: var(--fu-c-fg-faint); }

.kaart__lijstvak {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: calc(100% + var(--fu-space-2));
	max-height: var(--fu-kaart-lijst);
	margin: 0;
	padding: var(--fu-space-2);
	overflow: auto;
	list-style: none;
	border: var(--fu-lijn) solid var(--fu-c-line);
	border-radius: var(--fu-r-lg);
	background: var(--fu-c-surface);
	box-shadow: var(--fu-shadow-md);
}
.kaart__lijstvak[hidden] { display: none; }
.kaart__optie {
	display: flex;
	align-items: center;
	gap: var(--fu-space-3);
	min-height: var(--fu-control-l);
	padding: var(--fu-space-1) var(--fu-space-3);
	border-radius: var(--fu-r-md);
	cursor: pointer;
}
.kaart__optie.is-actief { background: var(--fu-c-brand-soft); }
.kaart__optie[aria-selected="true"] { background: var(--fu-c-brand); color: var(--fu-c-on-brand); }
.kaart__optie-naam { flex: 1; min-width: 0; font-weight: 600; }
.kaart__optie-km { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kaart__optie[aria-selected="true"] .kaart__optie-km { color: var(--fu-op-donker-tekst-sub); }
.kaart__leeg { padding: var(--fu-space-3); color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); }

.kaart__acties { display: flex; flex-wrap: wrap; gap: var(--fu-space-3); }
.kaart__acties .fu-btn { flex: 1 1 auto; }
.kaart__bediening .kaart__acties .fu-btn { min-height: var(--fu-control-xl); } /* zelfde hoogte als het zoekveld */
@media (min-width: 720px) { .kaart__acties .fu-btn { flex: none; } }

/* Podium: kaart + kaartje. Het kaartje staat náást of ónder de kaart, nooit erover (feedback Patrick 09-10). */
.kaart__podium {
	scroll-margin-top: var(--fu-space-3); /* bij scrollen naar de kaart (op het blok zelf: overflow hidden maakt het een eigen scrollvlak); met een vaste kop in het theme: + var(--fu-header-h) */
	display: grid;
	overflow: hidden;
	border-radius: var(--fu-r-lg);
	box-shadow: var(--fu-shadow-md);
}
@container (min-width: 900px) {
	.kaart__podium { grid-template-columns: minmax(0, 1fr) var(--fu-kaart-kaartje); align-items: stretch; }
}

/* Kaart en kaartje zijn één blok: geen ruimte ertussen, de ronde hoeken horen bij het blok. */
.kaart__kaart {
	position: relative;
	isolation: isolate; /* eigen stapellaag: de "Houd ⌘ ingedrukt"-laag van MapLibre (z-index 99999) bleef boven de plakkende pillenbalk (Patrick 10-10) */
	aspect-ratio: 1; /* telefoon en tablet: vierkant, zodat kaart en kaartje samen in beeld passen */
	overflow: hidden;
	background: var(--fu-groen-950);
}
@container (min-width: 900px) { .kaart__kaart { aspect-ratio: auto; min-height: var(--fu-kaart-hoogte); } }
.kaart .kaart__kaart-vlak { position: absolute; inset: 0; } /* .kaart ervoor: maplibre-gl.css (laadt later, bij de tab) zet .maplibregl-map op relative */

/* Kleine knop linksboven, in de lege Noordzee */
.kaart__terug {
	position: absolute;
	z-index: 6; /* boven spelden, bolletjes en Sittard */
	top: var(--fu-space-3);
	left: var(--fu-space-3);
	opacity: 0;
	transform: translateY(calc(var(--fu-space-2) * -1));
	pointer-events: none;
	transition: opacity var(--fu-dur-2) var(--fu-ease-out), transform var(--fu-dur-2) var(--fu-ease-out);
}
.kaart__terug.is-zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.kaart__terug.fu-btn { background: var(--fu-op-donker-actief); color: var(--fu-c-on-brand); border-color: var(--fu-op-donker-rand); }
.kaart__terug.fu-btn:hover { background: var(--fu-op-donker-vlak-hover); color: var(--fu-c-on-brand); }

.kaart__geen {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--fu-space-2);
	padding: var(--fu-space-6);
	text-align: center;
	color: var(--fu-c-on-brand);
}
.kaart__geen[hidden] { display: none; }

/* Pinnen (HTML-markers: echte knoppen, dus met toetsenbord en schermlezer te bedienen) */
.kaart-pin {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--fu-r-pill);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: transform var(--fu-dur-2) var(--fu-ease-spring), opacity var(--fu-dur-2) var(--fu-ease-out);
}
.kaart-pin .fu-crest {
	--fu-crest: var(--kaart-pin-s);
	background: var(--fu-c-on-brand);
	box-shadow: 0 0 0 var(--fu-lijn-dik) var(--fu-c-accent);
	transition: box-shadow var(--fu-dur-2) var(--fu-ease-out);
}
@media (max-width: 719.98px) {
	.kaart { --kaart-pin-s: var(--fu-crest-xs); --kaart-pin-m: var(--fu-crest-s); --kaart-pin-l: var(--fu-crest-m); }
}
.kaart-pin.is-midden .fu-crest { --fu-crest: var(--kaart-pin-m); }
.kaart-pin.is-groot .fu-crest { --fu-crest: var(--kaart-pin-l); }
.kaart-pin.is-gepland .fu-crest {
	box-shadow: none;
	outline: var(--fu-lijn-dik) dashed var(--fu-op-donker-tekst);
	outline-offset: var(--fu-lijn-dik);
	opacity: 0.88;
}
/* Tikvlak groter dan het wapen zelf (minstens 44 px op een telefoon) */
.kaart-pin::after { content: ""; position: absolute; inset: calc(var(--fu-space-2) * -1); border-radius: var(--fu-r-pill); }
.kaart-pin:hover { transform: scale(1.12); }
.kaart-pin:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-on-brand); outline-offset: var(--fu-space-1); }
.kaart-pin.is-gekozen { transform: scale(1.28); }
.kaart-pin.is-gekozen .fu-crest { opacity: 1; outline: none; box-shadow: 0 0 0 var(--fu-lijn-dik) var(--fu-c-accent), 0 0 var(--fu-space-5) var(--fu-c-accent); }

.kaart-pin__naam {
	position: absolute;
	top: calc(100% + var(--fu-space-1));
	left: 50%;
	padding: var(--fu-space-0-5) var(--fu-space-2);
	border-radius: var(--fu-r-pill);
	background: var(--fu-groen-950);
	color: var(--fu-c-on-brand);
	font-size: var(--fu-fs-xs);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(var(--fu-space-1) * -1));
	transition: opacity var(--fu-dur-1) var(--fu-ease-out), transform var(--fu-dur-1) var(--fu-ease-out);
}
.kaart-pin:hover .kaart-pin__naam,
.kaart-pin:focus-visible .kaart-pin__naam,
.kaart-pin.is-gekozen .kaart-pin__naam { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 720px) {
	.kaart-pin.is-gespeeld .kaart-pin__naam { opacity: 1; transform: translate(-50%, 0); }
}

/* Bij een keuze krijgt alleen die club een label; de rest wordt rustiger (hover of focus haalt het terug). */
.kaart__kaart.heeft-keuze .kaart-pin:not(.is-gekozen) { opacity: 0.6; }
.kaart__kaart.heeft-keuze .kaart-pin:not(.is-gekozen):hover,
.kaart__kaart.heeft-keuze .kaart-pin:not(.is-gekozen):focus-visible { opacity: 1; }
.kaart__kaart.heeft-keuze .kaart-pin:not(.is-gekozen):not(:hover):not(:focus-visible) .kaart-pin__naam { opacity: 0; }

/* Label naast de pin als een buurman in de weg staat (data: label l | r | o) */
.kaart-pin.label-l .kaart-pin__naam,
.kaart-pin.label-r .kaart-pin__naam { top: 50%; --kaart-weg: var(--fu-space-1); }
.kaart-pin.label-l .kaart-pin__naam { left: auto; right: calc(100% + var(--fu-space-1)); transform: translate(var(--kaart-weg), -50%); }
.kaart-pin.label-r .kaart-pin__naam { left: calc(100% + var(--fu-space-1)); transform: translate(calc(var(--kaart-weg) * -1), -50%); }
.kaart-pin.label-o .kaart-pin__naam { top: auto; bottom: calc(100% + var(--fu-space-1)); }
.kaart-pin.label-l:hover .kaart-pin__naam, .kaart-pin.label-l:focus-visible .kaart-pin__naam, .kaart-pin.label-l.is-gekozen .kaart-pin__naam,
.kaart-pin.label-r:hover .kaart-pin__naam, .kaart-pin.label-r:focus-visible .kaart-pin__naam, .kaart-pin.label-r.is-gekozen .kaart-pin__naam { transform: translate(0, -50%); }
@media (min-width: 720px) {
	.kaart-pin.label-l.is-gespeeld .kaart-pin__naam, .kaart-pin.label-r.is-gespeeld .kaart-pin__naam { transform: translate(0, -50%); }
	.kaart-pin.label-o.is-gespeeld .kaart-pin__naam { transform: translate(-50%, 0); }
}

/* Thuis: Sittard */
.kaart-thuis { position: relative; isolation: isolate; display: grid; place-items: center; pointer-events: none; }
.kaart-thuis .fu-crest {
	--fu-crest: var(--fu-crest-m);
	background: var(--fu-c-on-brand);
	box-shadow: 0 0 0 var(--fu-lijn-dik) var(--fu-c-accent), 0 0 var(--fu-space-4) var(--fu-c-accent);
}
/* Pulse: twee ronde cirkels die om en om uitwaaieren. Vaste maat en eigen middelpunt, dus altijd een cirkel. */
.kaart-thuis::before,
.kaart-thuis::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: var(--fu-crest-m);
	height: var(--fu-crest-m);
	margin: calc(var(--fu-crest-m) / -2) 0 0 calc(var(--fu-crest-m) / -2);
	border: var(--fu-lijn-dik) solid var(--fu-c-accent);
	border-radius: var(--fu-r-pill);
	opacity: 0;
	animation:
		kaart-puls-groei calc(var(--fu-dur-4) * 3) var(--fu-ease-out) infinite,
		kaart-puls-fade calc(var(--fu-dur-4) * 3) linear infinite;
}
.kaart-thuis::after { animation-delay: calc(var(--fu-dur-4) * 1.5); }
.kaart-thuis__naam {
	position: absolute;
	z-index: 1; /* boven de pulse-ringen */
	top: calc(100% + var(--fu-space-1));
	left: 50%;
	transform: translateX(-50%);
	padding: var(--fu-space-0-5) var(--fu-space-2);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-accent);
	color: var(--fu-c-on-accent);
	font-size: var(--fu-fs-xs);
	font-weight: 700;
	white-space: nowrap;
}
/* Groeien en uitfaden lopen apart: de ring is helemaal weg als hij zijn eindmaat bereikt. */
@keyframes kaart-puls-groei {
	from { transform: scale(1); }
	to { transform: scale(2.6); }
}
@keyframes kaart-puls-fade {
	from { opacity: 0.8; }
	85%, to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.kaart-thuis::before, .kaart-thuis::after { animation: none; opacity: 0; }
	.kaart-pin, .kaart-pin .fu-crest, .kaart-pin__naam, .kaart__terug { transition: none; }
}

/* Kaartje */
.kaart__kaartje {
	display: grid;
	align-content: start;
	gap: var(--fu-space-5);
	padding: var(--fu-space-6);
	background: var(--fu-c-surface);
}
.kaart__kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fu-space-4); align-items: center; }
.kaart__kop .fu-crest { --fu-crest: var(--fu-crest-l); }
.kaart__kop .fu-label { margin: 0 0 var(--fu-space-1); }
.kaart__naam { margin: 0; }
.kaart__meta { margin: var(--fu-space-1) 0 0; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); }

.kaart__cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fu-space-3); margin: 0; }
.kaart__cijfer { display: grid; gap: var(--fu-space-1); padding: var(--fu-space-3) var(--fu-space-4); border-radius: var(--fu-r-md); background: var(--fu-c-bg-sub); }
.kaart__cijfer dd {
	order: 1;
	margin: 0;
	color: var(--fu-c-brand);
	font-family: var(--fu-font-num);
	font-size: var(--fu-fs-xl);
	font-weight: var(--fu-display-weight);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.kaart__cijfer dd small { margin-left: var(--fu-space-1); color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); font-weight: 500; letter-spacing: 0; }
.kaart__cijfer dt { order: 2; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); line-height: 1.3; }
.kaart__cijfer--breed { grid-column: 1 / -1; }

.kaart__verhouding { display: grid; gap: var(--fu-space-2); font-size: var(--fu-fs-sm); color: var(--fu-c-fg-sub); }
.kaart__verhouding[hidden] { display: none; }
.kaart__spoor { height: var(--fu-space-1-5); overflow: hidden; border-radius: var(--fu-r-pill); background: var(--fu-c-line); }
.kaart__vul {
	display: block;
	width: var(--kaart-w, 0%);
	height: 100%;
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-brand);
	transition: width var(--fu-dur-3) var(--fu-ease-out);
}
@media (prefers-reduced-motion: reduce) { .kaart__vul { transition: none; } }

.kaart__verslag[aria-disabled="true"] { background: var(--fu-c-bg-sub); color: var(--fu-c-fg-faint); pointer-events: none; }

/* Legenda onder de kaart (geen overlay) */
.kaart__legenda { display: flex; flex-wrap: wrap; gap: var(--fu-space-2) var(--fu-space-6); margin: 0; padding: 0; list-style: none; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); }
.kaart__legenda li { display: inline-flex; align-items: center; gap: var(--fu-space-2); }
.kaart__sleutel { flex: none; width: var(--fu-space-4); height: var(--fu-space-4); border-radius: var(--fu-r-pill); background: var(--fu-c-on-brand); }
.kaart__sleutel--gespeeld { box-shadow: 0 0 0 var(--fu-lijn-dik) var(--fu-geel-500), inset 0 0 0 var(--fu-space-0-5) var(--fu-c-on-brand); background: var(--fu-geel-400); }
.kaart__sleutel--gepland { background: none; outline: var(--fu-lijn-dik) dashed var(--fu-c-fg-sub); outline-offset: calc(var(--fu-lijn-dik) * -1); }

/* Lijst onder de kaart: ook het alternatief zonder kaart */
.kaart__alle { display: grid; gap: var(--fu-space-8); margin-top: var(--fu-space-6); }
.kaart__groep-kop { margin: 0 0 var(--fu-space-3); }
.kaart__rijen { display: grid; gap: 0 var(--fu-space-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .kaart__rijen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kaart__rijen { grid-template-columns: repeat(3, 1fr); } }
.kaart__rij {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--fu-space-3);
	align-items: center;
	width: 100%;
	min-height: var(--fu-control-2xl);
	padding: var(--fu-space-2) var(--fu-space-3); /* ruimte binnen het groene vlak van de gekozen rij (Patrick 10-10) */
	border: 0;
	border-top: var(--fu-lijn) solid var(--fu-c-line);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.kaart__rij:hover .kaart__rij-naam { text-decoration: underline; text-underline-offset: var(--fu-space-1); }
.kaart__rij:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: calc(var(--fu-focus-breedte) * -1); }
.kaart__rij[aria-current="true"] { border-radius: var(--fu-r-md); border-top-color: transparent; background: var(--fu-c-brand-soft); }
.kaart__rijen li:has(> .kaart__rij[aria-current="true"]) + li > .kaart__rij { border-top-color: transparent; } /* geen lijn tegen het vlak */
.kaart__rij .fu-crest { --fu-crest: var(--fu-crest-s); }
.kaart__rij-naam { font-weight: 600; }
.kaart__rij-sub { display: block; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); font-weight: 400; }
.kaart__rij-km { color: var(--fu-c-fg); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.kaart__rij-km small { display: block; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); font-weight: 400; }

.kaart__bron { margin: var(--fu-space-6) 0 0; color: var(--fu-c-fg-faint); font-size: var(--fu-fs-xs); }

/* MapLibre: bediening en bronvermelding in de huisstijl */
.kaart .maplibregl-ctrl.maplibregl-ctrl-group { overflow: hidden; border-radius: var(--fu-r-md); background: var(--fu-op-donker-actief); box-shadow: none; }
.kaart .maplibregl-ctrl-group button { width: var(--fu-control-s); height: var(--fu-control-s); }
.kaart .maplibregl-ctrl-group button + button { border-top: var(--fu-lijn) solid var(--fu-op-donker-lijn); }
.kaart .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.kaart .maplibregl-ctrl-attrib { background: var(--fu-op-donker-zacht); color: var(--fu-op-donker-tekst-sub); font-size: var(--fu-fs-2xs); }
.kaart .maplibregl-ctrl-attrib a { color: inherit; }
.kaart .maplibregl-cooperative-gesture-screen { font-family: var(--fu-font-text); }

/* Geen logo? Beginletters (gezet door kaart.js) */
.fu-crest--initials[data-letters]::after { content: attr(data-letters); }

.kaart__sr { position: absolute; width: var(--fu-sr-maat); height: var(--fu-sr-maat); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kaart met plekken (Groundhopping, Kaartplekken) ---------- */
.kaart--plekken .kaart__kaart { aspect-ratio: 4 / 5; }
@media (min-width: 720px) { .kaart--plekken .kaart__kaart { aspect-ratio: 4 / 3; } }
@container (min-width: 900px) { .kaart--plekken .kaart__kaart { aspect-ratio: auto; min-height: var(--fu-kaart-hoogte); } }

/* Clusterbolletje: aantal stadions, tik = inzoomen */
.kaart-cluster {
	display: grid;
	place-items: center;
	width: var(--fu-crest-s);
	height: var(--fu-crest-s);
	padding: 0;
	border: var(--fu-lijn-dik) solid var(--fu-geel-400);
	border-radius: var(--fu-r-pill);
	background: var(--fu-groen-900);
	box-shadow: 0 0 0 var(--fu-space-1) color-mix(in srgb, var(--fu-geel-400) 25%, transparent);
	color: var(--fu-c-on-brand);
	font: 700 var(--fu-fs-xs) / 1 var(--fu-font-num);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: transform var(--fu-dur-2) var(--fu-ease-out);
}
.kaart-cluster.is-midden { width: var(--fu-crest-m); height: var(--fu-crest-m); font-size: var(--fu-fs-sm); }
.kaart-cluster.is-groot { width: var(--kaart-pin-l); height: var(--kaart-pin-l); font-size: var(--fu-fs-base); }
.kaart-cluster:hover { transform: scale(1.08); }
.kaart-cluster:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-on-brand); outline-offset: var(--fu-space-1); }
@media (prefers-reduced-motion: reduce) { .kaart-cluster { transition: none; } }

/* Speld (locatiemarker) per plek: valt zacht op zijn plek, naam bij aanwijzen; de gekozen speld groter met pulse */
.kaart-speld {
	position: relative;
	display: block;
	width: var(--fu-crest-xs);
	height: var(--fu-crest-s);
	padding: 0;
	border: 0;
	background: none;
	color: var(--fu-geel-400);
	cursor: pointer;
	filter: drop-shadow(0 var(--fu-space-0-5) var(--fu-space-1) color-mix(in srgb, var(--fu-groen-950) 60%, transparent));
	transform-origin: 50% 100%;
	animation: kaart-speld-val var(--fu-dur-3) var(--fu-ease-out) backwards; /* backwards: na afloop geen transform vasthouden, anders werkt hover niet */
	transition: transform var(--fu-dur-2) var(--fu-ease-out);
}
.kaart-speld svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kaart-speld path { fill: currentColor; stroke: var(--fu-groen-950); stroke-width: 1.5; }
.kaart-speld circle { fill: var(--fu-groen-950); }
.kaart-speld:hover, .kaart-speld:focus-visible { transform: translateY(calc(var(--fu-space-1) * -1)) scale(1.12); }
.kaart-speld:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-on-brand); outline-offset: var(--fu-space-1); }
.kaart-speld.is-verborgen { display: none; }
.kaart-speld__naam {
	position: absolute;
	bottom: calc(100% + var(--fu-space-1));
	left: 50%;
	padding: var(--fu-space-0-5) var(--fu-space-2);
	border-radius: var(--fu-r-pill);
	background: var(--fu-groen-950);
	color: var(--fu-c-on-brand);
	font: 600 var(--fu-fs-xs) / 1.3 var(--fu-font-text);
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, var(--fu-space-1));
	transition: opacity var(--fu-dur-2) var(--fu-ease-out), transform var(--fu-dur-2) var(--fu-ease-out);
	pointer-events: none;
}
.kaart-speld:hover .kaart-speld__naam, .kaart-speld:focus-visible .kaart-speld__naam, .kaart-speld.is-gekozen .kaart-speld__naam { opacity: 1; transform: translate(-50%, 0); }
.kaart-speld.is-gekozen { width: var(--fu-crest-s); height: var(--fu-crest-m); animation: kaart-speld-val var(--fu-dur-4) var(--fu-ease-out) backwards; }
.kaart-speld.is-gekozen .kaart-speld__naam { background: var(--fu-c-accent); color: var(--fu-c-on-accent); font-weight: 700; }
/* Pulse aan de voet: twee platte ringen die om en om uitwaaieren (dezelfde ademhaling als bij Sittard). */
.kaart-speld.is-gekozen::before,
.kaart-speld.is-gekozen::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: 0;
	width: var(--fu-crest-s);
	height: var(--fu-space-3);
	margin-left: calc(var(--fu-crest-s) / -2);
	border: var(--fu-lijn-dik) solid var(--fu-c-accent);
	border-radius: var(--fu-r-pill);
	transform-origin: 50% 50%;
	opacity: 0;
	animation:
		kaart-puls-groei calc(var(--fu-dur-4) * 3) var(--fu-ease-out) infinite,
		kaart-puls-fade calc(var(--fu-dur-4) * 3) linear infinite;
}
.kaart-speld.is-gekozen::after { animation-delay: calc(var(--fu-dur-4) * 1.5); }
@keyframes kaart-speld-val {
	from { opacity: 0; transform: translateY(calc(var(--fu-space-4) * -1)) scale(0.6); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kaart-speld, .kaart-speld.is-gekozen, .kaart-speld__naam { animation: none; transition: none; }
	.kaart-speld.is-gekozen::before, .kaart-speld.is-gekozen::after { animation: none; opacity: 0; }
}

/* Kaartje: speld i.p.v. clubwapen, verhalen als links */
.kaart__speld { display: grid; place-items: center; color: var(--fu-c-brand); }
.kaart__speld .fu-icon { width: var(--fu-icoon-l); height: var(--fu-icoon-l); }
.kaart__artikelen { display: grid; gap: var(--fu-space-2); margin: 0; padding: 0; list-style: none; }
.kaart__artikelen a { display: block; padding: var(--fu-space-3) var(--fu-space-4); border-radius: var(--fu-r-md); background: var(--fu-c-bg-sub); color: var(--fu-c-brand); font-weight: 600; line-height: 1.3; }
.kaart__artikelen a:hover { background: var(--fu-c-brand-soft); }
/* Fortuna-duels per stadion (onder de bestaande verhalen; alleen zichtbaar als er duels zijn). */
.kaart__duels-blok { display: grid; gap: var(--fu-space-2); margin-top: var(--fu-space-4); }
.kaart__duels { max-height: calc(var(--fu-space-8) * 10); overflow: auto; }
.kaart__duel-zonder { display: block; padding: var(--fu-space-3) var(--fu-space-4); border-radius: var(--fu-r-md); background: var(--fu-c-bg-sub); color: var(--fu-c-fg); font-weight: 600; line-height: 1.3; }

/* Lijst per land */
.kaart__landen { display: grid; gap: var(--fu-space-2); margin-top: var(--fu-space-6); }
.kaart__land { border-top: var(--fu-lijn) solid var(--fu-c-line); }
.kaart__land summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fu-space-3); padding: var(--fu-space-3) 0; font-weight: 700; cursor: pointer; }
.kaart__land summary small { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); font-weight: 400; }
.kaart__land[open] summary { color: var(--fu-c-brand); }
.kaart__land .kaart__rijen { margin-bottom: var(--fu-space-4); }
.kaart__rij--plek { grid-template-columns: minmax(0, 1fr); }
.kaart__rij--plek .kaart__rij-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Volgorde op de kaart: spelden < bolletjes < Sittard < gekozen speld < knoppen. */
.kaart .kaart-speld { z-index: 1; }
.kaart .kaart-cluster { z-index: 2; }
.kaart .kaart-thuis { z-index: 4; }
.kaart .kaart-thuis.is-verborgen { display: none; }
.kaart .kaart-speld.is-gekozen { z-index: 5; }
.kaart .maplibregl-ctrl-top-right, .kaart .maplibregl-ctrl-bottom-right { z-index: 6; }

/* ---------- Stadswandeling (De Stad Sittard) ---------- */
.kaart__bediening--knoppen { grid-template-columns: 1fr; }
.kaart--wandeling .kaart__kaart { aspect-ratio: 4 / 5; }
@media (min-width: 720px) { .kaart--wandeling .kaart__kaart { aspect-ratio: 4 / 3; } }
@container (min-width: 900px) { .kaart--wandeling .kaart__kaart { aspect-ratio: auto; min-height: var(--fu-kaart-hoogte); } }

/* Genummerde speld: het nummer in de kop van de speld */
.kaart-speld--nr { width: var(--fu-crest-s); height: var(--fu-crest-m); }
.kaart-speld__cijfer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 75%;
	display: grid;
	place-items: center;
	color: var(--fu-groen-950);
	font: 800 var(--fu-fs-xs) / 1 var(--fu-font-num);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.kaart-speld--nr.is-gekozen { width: var(--kaart-pin-l); height: calc(var(--kaart-pin-l) * 1.3); }
.kaart-speld--nr.is-gekozen .kaart-speld__cijfer { font-size: var(--fu-fs-base); }

/* Kaartje: nummer van de stop in het rondje */
.kaart__speld--nr.is-nr .fu-icon { display: none; }
.kaart__speld--nr.is-nr::after { content: attr(data-nr); color: var(--fu-c-brand); font: 800 var(--fu-fs-xl) / 1 var(--fu-font-num); }
.kaart__stappen { justify-content: space-between; }
.kaart__stappen .fu-btn { flex: 1 1 0; }

/* Lijst van stops */
.kaart__stops { display: grid; gap: 0 var(--fu-space-8); margin: var(--fu-space-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .kaart__stops { grid-template-columns: 1fr 1fr; } }
.kaart__rij--stop { grid-template-columns: auto minmax(0, 1fr); }
.kaart__stop-nr {
	display: grid;
	place-items: center;
	width: var(--fu-crest-s);
	height: var(--fu-crest-s);
	border-radius: var(--fu-r-pill);
	background: var(--fu-geel-400);
	color: var(--fu-groen-950);
	font: 800 var(--fu-fs-sm) / 1 var(--fu-font-num);
}

/* Waar ben ik: witte stip met gele gloed */
.kaart-ik {
	width: var(--fu-space-4);
	height: var(--fu-space-4);
	border: var(--fu-lijn-dik) solid var(--fu-groen-950);
	border-radius: var(--fu-r-pill);
	background: var(--fu-zand-0);
	box-shadow: 0 0 0 var(--fu-space-2) color-mix(in srgb, var(--fu-geel-400) 35%, transparent);
}

/* Groundhopping: filter (Alles / Trip / Met Fortuna) en landkiezer (Patrick 11-10) */
.kaart__filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-space-2); margin-top: var(--fu-space-4); }
.kaart__filter[hidden], .kaart__landkeuze[hidden] { display: none; }
.kaart__pil {
	display: inline-flex;
	gap: var(--fu-space-1-5);
	min-height: var(--fu-control-m);
	padding: 0 var(--fu-space-4);
	border: var(--fu-lijn) solid var(--fu-c-line-strong);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg);
	font: inherit;
	font-size: var(--fu-fs-sm);
	font-weight: 600;
	align-items: center;
	cursor: pointer;
}
.kaart__pil small { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.kaart__pil:hover { background: var(--fu-c-bg-sub); }
.kaart__pil[aria-pressed="true"] { border-color: var(--fu-c-brand); background: var(--fu-c-brand); color: var(--fu-c-on-brand); }
.kaart__pil[aria-pressed="true"] small { color: inherit; }
.kaart__pil:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.kaart__telling { flex-basis: 100%; margin: 0; }
@media (min-width: 720px) { .kaart__telling { flex-basis: auto; margin-inline-start: var(--fu-space-2); } }
.kaart__landkeuze { display: grid; gap: var(--fu-space-2); margin-top: var(--fu-space-6); max-width: var(--fu-kaart-lijst); }
.kaart__land-select {
	min-height: var(--fu-control-l);
	padding: 0 var(--fu-space-4);
	border: var(--fu-lijn) solid var(--fu-c-line-strong);
	border-radius: var(--fu-r-md);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg);
	font: inherit;
	font-size: var(--fu-fs-base);
}
.kaart__land-select:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.kaart__landkeuze + .kaart__landen { margin-top: var(--fu-space-3); }