@charset "UTF-8";
/* ==========================================================================
   ZENTRO KOERIER, KAART EN SERVICEGEBIEDEN
   Bestand: site/assets/kaart.css
   Laadt alleen op /servicegebieden/.

   Deze stijl komt uit de WordPress-plugin die eerder voor deze kaart is
   gebouwd, ongewijzigd overgenomen zodat er geen verschil kan ontstaan tussen
   twee versies van dezelfde kaart. Alleen de tokenkoppeling hieronder is
   nieuw: de plugin gebruikt namen met --zk-, de nieuwe site gebruikt --paars,
   --navy enzovoort. Zo blijven de kleuren op een plek staan.
   ========================================================================== */

.zk-sg {
	--zk-primair:            var(--paars);
	--zk-primair-donker:     var(--paars-donker);
	--zk-primair-diep:       var(--paars-diep);
	--zk-primair-licht:      var(--paars-licht);
	--zk-accent:             var(--accent);
	--zk-accent-hover:       var(--accent-hover);
	--zk-kop:                var(--navy);
	--zk-tekst:              var(--tekst);
	--zk-tekst-zacht:        var(--tekst-zacht);
	--zk-achtergrond-zacht:  var(--vlak);
	--zk-rand:               var(--rand);
	--zk-rand-sterk:         var(--rand-sterk);
	--zk-focus:              var(--paars-donker);
	--zk-letter-kop:         var(--kop);
	--zk-letter-tekst:       var(--body);
	--zk-succes:             #146C43;
	--zk-succes-vlak:        #EDF7F2;
}

/* De plugin zette een eigen buitenmarge omdat hij in een Elementor-container
   stond. Hier zit de pagina al in .omhulsel, dus dat hoeft niet nog eens. */
.zk-sg { max-inline-size: none; margin-inline: 0; padding-inline: 0; }


/* ==========================================================================
   ZENTRO KOERIER, SERVICEGEBIEDPAGINA
   Bestand : assets/zentro-servicegebieden.css
   Datum   : 28 juli 2026

   OPZET
   Alle tokens staan op .zk-sg en niet op :root. Twee redenen. Ten eerste kan
   deze pagina dan niets aan de rest van de site veranderen. Ten tweede pakt
   elke token de waarde uit het ontwerpsysteem (zentro-ontwerpsysteem.css) op
   zodra dat ooit sitebreed wordt ingeladen, en valt hij tot die tijd terug op
   exact dezelfde, uit de live site gemeten merkwaarde. Er ontstaat dus nooit
   een tweede waarheid over de huisstijl.

   CONTRAST
   De regel uit het ontwerpsysteem geldt hier onverkort: oranje #F7931E is een
   vlakkleur en draagt NOOIT witte tekst. Tekst op oranje is altijd het
   donkerblauw #000038 en haalt daarmee 8,65:1. Wit op paars haalt 8,37:1.
   ========================================================================== */

.zk-sg {
	/* ---- Merkkleuren, overgenomen uit het ontwerpsysteem ----------------- */
	--zk-sg-paars:        var(--zk-primair, #4A2BCC);
	--zk-sg-paars-donker: var(--zk-primair-donker, #341AA1);
	--zk-sg-paars-diep:   var(--zk-primair-diep, #25107A);
	--zk-sg-paars-licht:  var(--zk-primair-licht, #E7E6FD);
	--zk-sg-accent:       var(--zk-accent, #F7931E);
	--zk-sg-accent-hover: var(--zk-accent-hover, #E5850F);
	--zk-sg-navy:         var(--zk-kop, #000038);
	--zk-sg-tekst:        var(--zk-tekst, #4C4C5B);
	--zk-sg-tekst-zacht:  var(--zk-tekst-zacht, #6A6A78);
	--zk-sg-vlak:         var(--zk-achtergrond-zacht, #F6F4FC);
	--zk-sg-rand:         var(--zk-rand, #D9D8E4);
	--zk-sg-rand-sterk:   var(--zk-rand-sterk, #767689);
	--zk-sg-focus:        var(--zk-focus, #341AA1);

	/* ---- Ruimte, ronding en schaduw -------------------------------------- */
	--zk-sg-ruimte:   clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	--zk-sg-radius:   14px;
	--zk-sg-radius-l: 24px;
	--zk-sg-schaduw:  0 1px 2px rgba(0, 0, 56, .06), 0 8px 24px rgba(0, 0, 56, .07);
	--zk-sg-schaduw-2: 0 16px 44px rgba(0, 0, 56, .14);
	--zk-sg-overgang: 160ms cubic-bezier(.2, 0, .2, 1);
	--zk-sg-raakvlak: 2.75rem;

	/* ---- Typografie ------------------------------------------------------ */
	--zk-sg-letter-kop:   var(--zk-letter-kop, "Outfit", "Saira Condensed", system-ui, sans-serif);
	--zk-sg-letter-tekst: var(--zk-letter-tekst, "Plus Jakarta Sans", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif);

	max-inline-size: 1200px;
	margin-inline: auto;
	padding-inline: clamp(0rem, -0.5rem + 2vw, 1rem);
	font-family: var(--zk-sg-letter-tekst);
	color: var(--zk-sg-tekst);
	font-size: clamp(1rem, .982rem + .09vw, 1.0625rem);
	line-height: 1.65;
}

/* Elk onderdeel rekent padding en rand binnen de eigen breedte. Zonder deze
   regel loopt een veld met width 100% precies de padding buiten beeld, en dat
   is op 320 px direct zichtbaar als horizontale schuifbalk. */
.zk-sg *,
.zk-sg *::before,
.zk-sg *::after {
	box-sizing: border-box;
}

/* Het attribuut hidden moet altijd winnen. Zonder deze regel verliest het van
   elke display-declaratie in dit bestand, en dan staat het kruisje in een leeg
   zoekveld en staan er veertig kaartknopjes in de lijst bij een bezoeker
   zonder JavaScript. Dat is precies wat hidden had moeten voorkomen. */
.zk-sg [hidden] {
	display: none !important;
}

.zk-sg img,
.zk-sg svg {
	max-inline-size: 100%;
}

/* Voor tekst die alleen een schermlezer hoeft te horen. Niet display:none,
   want dan leest een schermlezer hem juist niet. */
.zk-sg-verborgen {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.zk-sg-icoon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex: none;
}


/* ==========================================================================
   FOCUS
   Drie lagen: wit, donkerpaars, wit. Op een witte sectie zorgt de binnengrens
   wit/donkerpaars voor 11,61:1; op de paarse hero zorgt de buitenste witte
   ring voor 8,37:1 tegen het paars. Met twee lagen zou de buitenste rand op
   de hero altijd #341AA1 tegen #4A2BCC zijn, en dat is 1,39:1.
   ========================================================================== */

/* Bewust GEEN border-radius hier. Die stond er eerst wel, en daarmee werd elke
   pilvormige knop tijdens toetsenbordfocus ineens een afgeronde rechthoek. De
   box-shadow volgt vanzelf de eigen ronding van het element. */
.zk-sg :focus-visible {
	outline: 2px solid var(--zk-sg-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFF, 0 0 0 6px var(--zk-sg-focus), 0 0 0 8px #FFF;
}

.zk-sg-hero :focus-visible {
	outline-color: #FFF;
	box-shadow: 0 0 0 2px var(--zk-sg-paars-diep), 0 0 0 6px #FFF;
}


/* ==========================================================================
   KOPPEN EN SECTIES
   ========================================================================== */

.zk-sg h1,
.zk-sg h2,
.zk-sg h3 {
	font-family: var(--zk-sg-letter-kop);
	color: var(--zk-sg-navy);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .75rem;
	/* Geen enkele kop mag afkappen of buiten beeld lopen. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.zk-sg h2 { font-size: clamp(1.625rem, 1.375rem + 1.25vw, 2.5rem); }
.zk-sg h3 { font-size: clamp(1.125rem, 1.05rem + .36vw, 1.375rem); }

/* In :where() zodat deze basisregel specificiteit nul heeft. Anders wint hij
   van de componentregels verderop (0-1-0 tegen 0-1-0, en deze staat eerder),
   en dan verliezen bijvoorbeeld .zk-sg-gebied__tekst hun eigen marge. */
.zk-sg :where(p) { margin: 0 0 1rem; }
.zk-sg :where(p:last-child) { margin-bottom: 0; }

.zk-sg-sectie {
	margin-block-start: var(--zk-sg-ruimte);
}

.zk-sg-sectiekop {
	max-inline-size: 62ch;
	margin-block-end: 1.5rem;
}

.zk-sg-sectiekop p {
	color: var(--zk-sg-tekst-zacht);
	margin-block-end: 0;
}


/* ==========================================================================
   KNOPPEN
   ========================================================================== */

.zk-sg-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-block-size: var(--zk-sg-raakvlak);
	padding: .7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--zk-sg-letter-tekst);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--zk-sg-overgang),
	            border-color var(--zk-sg-overgang),
	            color var(--zk-sg-overgang),
	            transform var(--zk-sg-overgang);
}

.zk-sg-knop:hover { transform: translateY(-1px); }
.zk-sg-knop:active { transform: translateY(0); }

/* Oranje vlak, donkerblauwe tekst: 8,65:1. */
.zk-sg .zk-sg-knop--accent {
	background: var(--zk-sg-accent);
	border-color: var(--zk-sg-accent);
	color: var(--zk-sg-navy);
}
.zk-sg .zk-sg-knop--accent:hover,
.zk-sg .zk-sg-knop--accent:focus-visible {
	background: var(--zk-sg-accent-hover);
	border-color: var(--zk-sg-accent-hover);
	color: var(--zk-sg-navy);
}

/* Wit vlak op de paarse hero, paarse tekst: 8,37:1. */
.zk-sg .zk-sg-knop--licht {
	background: #FFF;
	border-color: #FFF;
	color: var(--zk-sg-paars-donker);
}
.zk-sg .zk-sg-knop--licht:hover,
.zk-sg .zk-sg-knop--licht:focus-visible {
	background: var(--zk-sg-paars-licht);
	border-color: var(--zk-sg-paars-licht);
	color: var(--zk-sg-paars-diep);
}

/* Omtrekknop op wit. De rand haalt 4,45:1 en voldoet daarmee aan 1.4.11. */
.zk-sg .zk-sg-knop--omtrek {
	background: #FFF;
	border-color: var(--zk-sg-rand-sterk);
	color: var(--zk-sg-navy);
}
.zk-sg .zk-sg-knop--omtrek:hover,
.zk-sg .zk-sg-knop--omtrek:focus-visible {
	background: var(--zk-sg-vlak);
	border-color: var(--zk-sg-paars);
	color: var(--zk-sg-paars-donker);
}


/* ==========================================================================
   1. HERO
   Een afgeronde kaart in plaats van een sectie over de volle breedte. Dat is
   bewust: binnen Elementor is een vlak over de volle breedte alleen te maken
   met negatieve marges of 100vw, en dat gaat op een pagina met een verticale
   schuifbalk altijd een keer mis. Deze opzet werkt in elke container.
   ========================================================================== */

.zk-sg-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--zk-sg-radius-l);
	padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
	background:
		radial-gradient(120% 140% at 92% 8%, rgba(247, 147, 30, .28) 0%, rgba(247, 147, 30, 0) 46%),
		linear-gradient(135deg, var(--zk-sg-paars-diep) 0%, var(--zk-sg-paars-donker) 42%, var(--zk-sg-paars) 100%);
	color: #FFF;
	isolation: isolate;
}

/* Subtiele routelijnen als achtergrond. Een SVG-patroon en geen foto: het
   kost geen netwerkverzoek, het kan niet vertragen, en er is geen enkele
   vraag over auteursrecht. */
.zk-sg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M-20 60h80l40 40h100M-20 180h60l50-50h130M60 -20v60l40 40v120'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='100' cy='100' r='3'/%3E%3Ccircle cx='110' cy='130' r='3'/%3E%3Ccircle cx='40' cy='180' r='3'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 240px 240px;
	opacity: .10;
}

.zk-sg-hero__inhoud {
	position: relative;
	max-inline-size: 46rem;
}

.zk-sg-hero__label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .85rem;
	padding: .3rem .8rem .3rem .6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #FFF;
}

.zk-sg .zk-sg-hero__titel {
	color: #FFF;
	font-size: clamp(2rem, 1.57rem + 2.14vw, 3.5rem);
	margin: 0 0 .6rem;
	max-inline-size: 18ch;
}

.zk-sg-hero__lead {
	font-size: clamp(1.0625rem, 1.009rem + .27vw, 1.25rem);
	color: rgba(255, 255, 255, .92);
	max-inline-size: 54ch;
	margin-block-end: 1.6rem;
}

.zk-sg-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.zk-sg-hero__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2.25rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 1.35rem 0 0;
	border-block-start: 1px solid rgba(255, 255, 255, .22);
}

.zk-sg-hero__feiten li {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.zk-sg-hero__feiten strong {
	font-family: var(--zk-sg-letter-kop);
	font-size: 1.5rem;
	line-height: 1.1;
	color: #FFF;
}

.zk-sg-hero__feiten span {
	font-size: .875rem;
	color: rgba(255, 255, 255, .82);
}


/* ==========================================================================
   2. ZOEKVELD EN SUGGESTIES
   ========================================================================== */

.zk-sg-zoek {
	position: relative;
	max-inline-size: 34rem;
	margin-block-end: .75rem;
}

.zk-sg-zoek__label {
	display: block;
	margin-block-end: .4rem;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--zk-sg-navy);
}

.zk-sg-zoek__veld {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-inline: .9rem;
	background: #FFF;
	border: 1px solid var(--zk-sg-rand-sterk);
	border-radius: 999px;
	transition: border-color var(--zk-sg-overgang), box-shadow var(--zk-sg-overgang);
}

.zk-sg-zoek__veld:focus-within {
	border-color: var(--zk-sg-focus);
	box-shadow: 0 0 0 2px #FFF, 0 0 0 5px var(--zk-sg-focus);
}

.zk-sg-zoek__veld > .zk-sg-icoon {
	color: var(--zk-sg-tekst-zacht);
}

.zk-sg .zk-sg-zoek__invoer {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: var(--zk-sg-raakvlak);
	padding: .55rem 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 1rem;
	color: var(--zk-sg-navy);
	box-shadow: none;
}

.zk-sg .zk-sg-zoek__invoer:focus {
	outline: none;
	box-shadow: none;
}

.zk-sg .zk-sg-zoek__invoer::placeholder {
	color: var(--zk-sg-tekst-zacht);
	opacity: 1;
}

.zk-sg .zk-sg-zoek__wissen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--zk-sg-vlak);
	color: var(--zk-sg-tekst);
	cursor: pointer;
}

.zk-sg .zk-sg-zoek__wissen:hover {
	background: var(--zk-sg-paars-licht);
	color: var(--zk-sg-paars-donker);
}

.zk-sg-suggesties {
	position: absolute;
	/* Leaflet loopt intern tot z-index 1000 (.leaflet-top en .leaflet-bottom).
	   Die waarden blijven binnen .zk-sg-kaartomhulsel dankzij isolation:isolate
	   daar, maar deze hogere waarde is het vangnet als die regel ooit sneuvelt. */
	z-index: 1100;
	inset-inline: 0;
	inset-block-start: calc(100% + .4rem);
	max-block-size: 17rem;
	overflow-y: auto;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: #FFF;
	border: 1px solid var(--zk-sg-rand);
	border-radius: var(--zk-sg-radius);
	box-shadow: var(--zk-sg-schaduw-2);
}

.zk-sg-suggestie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	min-block-size: var(--zk-sg-raakvlak);
	padding: .5rem .75rem;
	border-inline-start: 3px solid transparent;
	border-radius: var(--zk-sg-radius);
	cursor: pointer;
	font-size: .9375rem;
	color: var(--zk-sg-navy);
}

/* Beide kinderen moeten kunnen krimpen, anders duwt een lange gebiedsnaam de
   rij breder dan de lijst en ontstaat er een horizontale schuifbalk. */
.zk-sg-suggestie > span {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zk-sg-suggestie small {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--zk-sg-tekst-zacht);
	font-size: .8125rem;
	white-space: nowrap;
}

/* De gemarkeerde suggestie krijgt naast de lichte achtergrond (1,23:1, veel te
   weinig om als enige drager te dienen) een paarse streep van 8,37:1. Zo is de
   selectie ook zichtbaar voor wie kleurverschil slecht ziet. */
.zk-sg-suggestie:hover,
.zk-sg-suggestie[aria-selected="true"] {
	background: var(--zk-sg-paars-licht);
	border-inline-start-color: var(--zk-sg-paars);
	color: var(--zk-sg-paars-diep);
	font-weight: 700;
}

.zk-sg-uitslag {
	display: none;
	align-items: flex-start;
	gap: .6rem;
	margin: 0 0 1.25rem;
	padding: .75rem 1rem;
	border-radius: var(--zk-sg-radius);
	font-size: .9375rem;
	max-inline-size: 46rem;
}

.zk-sg-uitslag.is-zichtbaar { display: flex; }

.zk-sg-uitslag--gevonden {
	background: var(--zk-succes-vlak, #EDF7F2);
	border: 1px solid var(--zk-succes, #146C43);
	color: var(--zk-succes, #146C43);
}

.zk-sg-uitslag--onbekend {
	background: var(--zk-sg-vlak);
	border: 1px solid var(--zk-sg-rand);
	color: var(--zk-sg-tekst);
}

.zk-sg .zk-sg-uitslag a {
	color: inherit;
	font-weight: 700;
	text-underline-offset: .18em;
}

.zk-sg-uitslag__knop {
	margin-inline-start: auto;
	flex: none;
}


/* ==========================================================================
   3. DE KAART
   ========================================================================== */

.zk-sg-kaartomhulsel {
	position: relative;
	/* Eigen stapelcontext. Leaflet zet zijn bediening op z-index 800 en 1000 en
	   zijn popup op 700; zonder deze regel worden die rechtstreeks vergeleken
	   met de suggestielijst erboven en tekenen de zoomknoppen dwars door de
	   zoeksuggesties heen. */
	isolation: isolate;
	border-radius: var(--zk-sg-radius-l);
	border: 1px solid var(--zk-sg-rand);
	background: var(--zk-sg-vlak);
	box-shadow: var(--zk-sg-schaduw);
	overflow: hidden;
}

.zk-sg-kaart {
	block-size: clamp(24rem, 60vh, 40rem);
	inline-size: 100%;
	background: var(--zk-sg-vlak);
}

.zk-sg-kaart__terugval {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	margin: 0;
	padding: 2rem;
	text-align: center;
	color: var(--zk-sg-tekst-zacht);
	font-size: .9375rem;
}

/* De tegels van OpenStreetMap zijn kleurrijk. Een lichte ontkleuring zet ze
   een stap naar achteren zodat de paarse en oranje markers het beeld dragen.
   Alleen op de tegellaag, zodat markers en labels hun volle kleur houden. */
.zk-sg-kaart .leaflet-tile-pane {
	filter: saturate(.68) contrast(1.02) brightness(1.03);
}

/* .zk-sg-kaart is zelf het element dat Leaflet de klasse leaflet-container
   geeft. Met een spatie ertussen zou de selector een afstammeling zoeken en
   dus niets raken. */
.zk-sg-kaart.leaflet-container {
	font-family: var(--zk-sg-letter-tekst);
	background: #eef1f5;
}

/* ---- Markers ------------------------------------------------------------ */

/* Leaflet geeft een divIcon standaard een wit vlak met een blauwe rand. Dat is
   bedoeld als plaatshouder en moet hier weg, anders staat er een wit blokje om
   elke stip. */
.zk-sg-kaart .leaflet-div-icon,
.zk-sg-kaart .zk-sg-markerhouder {
	background: none;
	border: 0;
}

.zk-sg-marker {
	position: relative; /* Het label eronder wordt hierop uitgelijnd. */
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	background: none;
	border: 0;
}

.zk-sg-marker__stip {
	inline-size: .95rem;
	block-size: .95rem;
	border-radius: 999px;
	background: var(--zk-sg-paars, #4A2BCC);
	border: 2.5px solid #FFF;
	box-shadow: 0 1px 4px rgba(0, 0, 56, .45);
	transition: transform 140ms cubic-bezier(.2, 0, .2, 1);
}

.zk-sg-marker--accent .zk-sg-marker__stip {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	background: var(--zk-sg-accent, #F7931E);
	border-color: var(--zk-sg-navy, #000038);
	border-width: 2px;
}

.zk-sg-marker:hover .zk-sg-marker__stip,
.zk-sg-marker.is-actief .zk-sg-marker__stip {
	transform: scale(1.45);
}

.zk-sg-marker.is-actief .zk-sg-marker__stip {
	box-shadow: 0 0 0 5px rgba(74, 43, 204, .28), 0 1px 4px rgba(0, 0, 56, .45);
}

/* De focusregel staat verderop op .zk-sg-markerhouder. Dat is het element dat
   Leaflet een tabindex geeft en dus de focus krijgt; .zk-sg-marker is de span
   daarbinnen en krijgt hem nooit. */

/* Het verzamelpunt voor Amsterdam, zichtbaar zolang er ver is uitgezoomd. */
.zk-sg-marker--groep .zk-sg-marker__stip {
	inline-size: 2.15rem;
	block-size: 2.15rem;
	display: grid;
	place-items: center;
	background: var(--zk-sg-accent, #F7931E);
	border-color: var(--zk-sg-navy, #000038);
	color: var(--zk-sg-navy, #000038);
	font-family: var(--zk-sg-letter-kop, system-ui), system-ui;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1;
}

/* Plaatsnaam naast de stip, pas zichtbaar zodra er genoeg ruimte is. */
.zk-sg-marker__label {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(50% + .8rem);
	transform: translateY(-50%);
	padding: .12rem .4rem;
	border-radius: 5px;
	background: rgba(255, 255, 255, .9);
	color: var(--zk-sg-navy, #000038);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 140ms linear;
}

.zk-sg-kaart.is-labels-aan .zk-sg-marker__label { opacity: 1; }
.zk-sg-marker.is-actief .zk-sg-marker__label { opacity: 1; }

/* ---- Popup -------------------------------------------------------------- */

.zk-sg-kaart .leaflet-popup-content-wrapper {
	border-radius: var(--zk-sg-radius);
	box-shadow: var(--zk-sg-schaduw-2);
	padding: 0;
}

.zk-sg-kaart .leaflet-popup-content {
	margin: 0;
	inline-size: auto !important;
	min-inline-size: 15rem;
}

.zk-sg-popup {
	padding: 1rem 1.1rem 1.1rem;
	font-family: var(--zk-sg-letter-tekst);
	color: var(--zk-sg-tekst, #4C4C5B);
	font-size: .875rem;
	line-height: 1.55;
}

.zk-sg-popup__titel {
	margin: 0 0 .15rem;
	font-family: var(--zk-sg-letter-kop);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--zk-sg-navy, #000038);
}

.zk-sg-popup__gemeente {
	display: block;
	margin-block-end: .55rem;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--zk-sg-tekst-zacht, #6A6A78);
}

.zk-sg-popup__tekst { margin: 0 0 .85rem; }

.zk-sg-popup__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
}

.zk-sg-popup .zk-sg-knop {
	padding: .5rem 1rem;
	font-size: .875rem;
	min-block-size: 2.5rem;
}

.zk-sg-popup__meer {
	font-size: .875rem;
	font-weight: 700;
	color: var(--zk-sg-paars-donker, #341AA1);
	text-underline-offset: .18em;
}

/* ---- Bediening op de kaart ---------------------------------------------- */

.zk-sg-kaart .leaflet-bar a,
.zk-sg-kaart .leaflet-bar a:hover {
	color: var(--zk-sg-navy, #000038);
	border-bottom-color: var(--zk-sg-rand, #D9D8E4);
}

.zk-sg-kaart .leaflet-control-attribution {
	font-size: 11px;
	background: rgba(255, 255, 255, .85);
}

.zk-sg-kaartknop {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-block-size: 2.25rem;
	padding: .4rem .85rem;
	border: 1px solid var(--zk-sg-rand, #D9D8E4);
	border-radius: 999px;
	background: #FFF;
	color: var(--zk-sg-navy, #000038);
	font-family: var(--zk-sg-letter-tekst);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 56, .16);
}

.zk-sg-kaartknop:hover {
	background: var(--zk-sg-vlak, #F6F4FC);
	border-color: var(--zk-sg-paars, #4A2BCC);
	color: var(--zk-sg-paars-donker, #341AA1);
}

.zk-sg-kaartknop[aria-pressed="true"] {
	background: var(--zk-sg-paars, #4A2BCC);
	border-color: var(--zk-sg-paars, #4A2BCC);
	color: #FFF;
}

/* ---- Legenda ------------------------------------------------------------ */

.zk-sg-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
	font-size: .875rem;
	color: var(--zk-sg-tekst-zacht);
}

.zk-sg-legenda li {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.zk-sg-legenda__stip {
	inline-size: .8rem;
	block-size: .8rem;
	border-radius: 999px;
	background: var(--zk-sg-paars);
	border: 2px solid #FFF;
	box-shadow: 0 0 0 1px var(--zk-sg-rand);
	flex: none;
}

.zk-sg-legenda__stip--accent {
	background: var(--zk-sg-accent);
	border-color: var(--zk-sg-navy);
	box-shadow: none;
}

.zk-sg-legenda__vlak {
	inline-size: 1.35rem;
	block-size: .8rem;
	border-radius: 3px;
	background: rgba(74, 43, 204, .16);
	border: 1px solid rgba(74, 43, 204, .35);
	flex: none;
}


/* ==========================================================================
   4. DE GEBIEDENLIJST
   ========================================================================== */

.zk-sg-gebieden {
	display: grid;
	/* min(19rem, 100%) in plaats van 19rem: zonder die min kan de kolom niet
	   onder 304px krimpen en loopt de pagina op een scherm van 320px horizontaal
	   uit beeld. Dat is ook een WCAG-fout op 1.4.10 Reflow. */
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: 1rem;
}

.zk-sg-gebied {
	position: relative;
	padding: 1.35rem 1.4rem 1.5rem;
	background: #FFF;
	border: 1px solid var(--zk-sg-rand);
	border-radius: var(--zk-sg-radius-l);
	box-shadow: var(--zk-sg-schaduw);
	transition: border-color var(--zk-sg-overgang), box-shadow var(--zk-sg-overgang);
}

.zk-sg-gebied:hover,
.zk-sg-gebied:focus-within {
	border-color: var(--zk-sg-paars-licht);
	box-shadow: var(--zk-sg-schaduw-2);
}

/* Een smalle kleurstreep in plaats van een gekleurd vlak. De opdracht vroeg om
   minder massieve kleurvlakken, en zo blijft de tekst op wit staan waar het
   contrast het hoogst is. */
.zk-sg-gebied::before {
	content: "";
	position: absolute;
	inset-block-start: 1.4rem;
	inset-inline-start: 0;
	inline-size: 4px;
	block-size: 2.1rem;
	border-start-end-radius: 4px;
	border-end-end-radius: 4px;
	background: var(--zk-sg-paars);
}

.zk-sg-gebied--accent::before { background: var(--zk-sg-accent); }

.zk-sg-gebied__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-block-end: .35rem;
}

.zk-sg .zk-sg-gebied__titel {
	margin: 0;
	min-inline-size: 0;
}

.zk-sg-gebied__aantal {
	flex: none;
	margin: 0;
	padding: .15rem .55rem;
	border-radius: 999px;
	background: var(--zk-sg-vlak);
	color: var(--zk-sg-tekst-zacht);
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
}

.zk-sg-gebied__tekst {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: var(--zk-sg-tekst-zacht);
}

.zk-sg-plaatsen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .1rem .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--zk-sg-rand);
	padding-block-start: .75rem;
}

.zk-sg-plaats {
	display: flex;
	align-items: center;
	gap: .25rem;
	min-inline-size: 0;
	border-inline-start: 3px solid transparent;
	border-radius: 8px;
	transition: background-color var(--zk-sg-overgang), border-color var(--zk-sg-overgang);
}

/* Ook hier een streep naast de achtergrondkleur, om dezelfde reden als bij de
   zoeksuggesties: de lichte vulling alleen haalt 1,23:1. */
.zk-sg-plaats.is-actief {
	background: var(--zk-sg-paars-licht);
	border-inline-start-color: var(--zk-sg-paars);
}

.zk-sg .zk-sg-plaats__naam {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: .4rem .5rem;
	color: var(--zk-sg-tekst);
	font-size: .9375rem;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: break-word;
}

.zk-sg a.zk-sg-plaats__naam:hover,
.zk-sg a.zk-sg-plaats__naam:focus-visible {
	color: var(--zk-sg-paars-donker);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.zk-sg .zk-sg-plaats__kaart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.85rem;
	block-size: 1.85rem;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--zk-sg-rand-sterk);
	cursor: pointer;
	transition: background-color var(--zk-sg-overgang), color var(--zk-sg-overgang);
}

.zk-sg .zk-sg-plaats__kaart .zk-sg-icoon {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.zk-sg .zk-sg-plaats__kaart:hover,
.zk-sg .zk-sg-plaats__kaart:focus-visible,
.zk-sg-plaats:hover .zk-sg-plaats__kaart {
	background: var(--zk-sg-paars-licht);
	color: var(--zk-sg-paars-donker);
}


/* ==========================================================================
   5. INFORMATIE OVER HET BEREIK
   ========================================================================== */

.zk-sg-bereik {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1rem;
}

.zk-sg-bereik__blok {
	padding: 1.5rem 1.4rem;
	background: var(--zk-sg-vlak);
	border: 1px solid transparent;
	border-radius: var(--zk-sg-radius-l);
	transition: border-color var(--zk-sg-overgang), transform var(--zk-sg-overgang), box-shadow var(--zk-sg-overgang);
}

.zk-sg-bereik__blok:hover {
	transform: translateY(-2px);
	border-color: var(--zk-sg-paars-licht);
	box-shadow: var(--zk-sg-schaduw);
}

.zk-sg-bereik__icoon {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: .9rem;
	border-radius: var(--zk-sg-radius);
	background: #FFF;
	color: var(--zk-sg-paars-donker);
	box-shadow: var(--zk-sg-schaduw);
}

.zk-sg-bereik__icoon .zk-sg-icoon {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

.zk-sg .zk-sg-bereik__blok h3 { margin-block-end: .45rem; }

.zk-sg-bereik__blok p {
	margin: 0;
	font-size: .9375rem;
	color: var(--zk-sg-tekst);
}


/* ==========================================================================
   6. OFFERTE EN CONTACT
   ========================================================================== */

.zk-sg-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem 2rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--zk-sg-radius-l);
	background: linear-gradient(135deg, var(--zk-sg-paars-diep) 0%, var(--zk-sg-paars-donker) 100%);
	color: #FFF;
}

.zk-sg .zk-sg-cta h2 {
	color: #FFF;
	margin-block-end: .35rem;
}

.zk-sg-cta__tekst p {
	margin: 0;
	color: rgba(255, 255, 255, .9);
	max-inline-size: 46ch;
}

.zk-sg-cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.zk-sg-cta__tijden {
	grid-column: 1 / -1;
	margin: 0;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid rgba(255, 255, 255, .22);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .82);
	max-inline-size: 78ch;
}

.zk-sg-cta :focus-visible {
	outline-color: #FFF;
	box-shadow: 0 0 0 2px var(--zk-sg-paars-diep), 0 0 0 6px #FFF;
}


/* ==========================================================================
   RESPONSIEF
   Onder 720 px gaat de conversiesectie op een kolom en krijgt de kaart een
   hoogte die op een telefoon nog steeds bruikbaar is, zonder dat hij het hele
   scherm inneemt.
   ========================================================================== */

@media (max-width: 720px) {
	.zk-sg-cta {
		grid-template-columns: minmax(0, 1fr);
	}

	.zk-sg-cta__knoppen .zk-sg-knop {
		flex: 1 1 14rem;
	}

	.zk-sg-kaart {
		block-size: clamp(20rem, 56vh, 26rem);
	}

	.zk-sg-hero__feiten {
		gap: .9rem 1.5rem;
	}
}

@media (max-width: 420px) {
	.zk-sg-hero__knoppen .zk-sg-knop,
	.zk-sg-cta__knoppen .zk-sg-knop {
		inline-size: 100%;
	}

	.zk-sg-plaatsen {
		grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
	}
}


/* ==========================================================================
   MINDER BEWEGING
   Wie in zijn systeem heeft aangegeven beweging te willen beperken, krijgt
   geen schaal-, schuif- of vliegbeweging meer. De kaart springt dan direct
   naar de nieuwe positie in plaats van ernaartoe te vliegen; dat regelt het
   script zelf, deze regels dekken de rest.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.zk-sg *,
	.zk-sg *::before,
	.zk-sg *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.zk-sg-knop:hover,
	.zk-sg-bereik__blok:hover {
		transform: none;
	}
}


/* ==========================================================================
   AFDRUKKEN
   Op papier heeft een kaart met tegels geen enkel nut. De lijst met alle
   plaatsen wel, en die is de volledige inhoud van deze pagina.
   ========================================================================== */

@media print {
	.zk-sg-kaartomhulsel,
	.zk-sg-zoek,
	.zk-sg-uitslag,
	.zk-sg-legenda,
	.zk-sg-overslaan,
	.zk-sg-plaats__kaart {
		display: none !important;
	}

	/* Ook de kinderen, anders blijven de witte kop en de witte knoptekst wit op
	   een wit vel en drukt de pagina half leeg af. */
	.zk-sg-hero,
	.zk-sg-hero *,
	.zk-sg-cta,
	.zk-sg-cta * {
		background: none !important;
		color: #000 !important;
		border-color: #000 !important;
		box-shadow: none !important;
	}

	.zk-sg-hero,
	.zk-sg-cta {
		border: 1px solid #000;
	}
}

/* Overslaanlink: alleen zichtbaar bij toetsenbordfocus. De kaart bevat 41
   markers die allemaal in de tabvolgorde staan; zonder deze link moet iemand
   die met het toetsenbord werkt er stuk voor stuk doorheen. */
.zk-sg-overslaan {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.zk-sg-overslaan:focus-visible {
	position: static;
	display: inline-block;
	inline-size: auto;
	block-size: auto;
	clip-path: none;
	margin-block-end: .5rem;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--zk-sg-paars);
	color: #FFF;
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
}

/* Het element dat de toetsenbordfocus krijgt is de markerhouder die Leaflet
   afdrukt, niet de span erbinnen. */
.zk-sg .zk-sg-markerhouder:focus-visible {
	outline: 2px solid #FFF;
	outline-offset: 1px;
	box-shadow: 0 0 0 4px var(--zk-sg-paars-diep, #25107A);
	border-radius: 999px;
}