/* =========================================================================
   SAB Maastricht — thema-opmaak
   Ontwerp v1.0 · desktop 1440 · tablet 768 · mobiel 390
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	/* Kleur */
	--sab-blauw: #5390D3;
	--donkerblauw: #0B4F99;
	--blauw-actief: #083C75;
	--antraciet: #1A1A1A;
	--grijs: #6B6B6B;
	--wit: #FFFFFF;
	--blauw-50: #EDF4FB;
	--blauw-100: #D9E7F7;
	--grijs-50: #F4F7FB;
	--rand: #DCE4EE;
	--rand-input: #B9C6D6;
	--fout: #B3261E;

	/* Type */
	--f-kop: Anton, Impact, sans-serif;
	--f-tekst: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Spacing — 8-punts raster */
	--s-1: 8px;
	--s-2: 16px;
	--s-3: 24px;
	--s-4: 32px;
	--s-6: 48px;
	--s-8: 64px;
	--s-11: 88px;
	--s-12: 96px;

	/* Radii */
	--r-knop: 8px;
	--r-tegel: 10px;
	--r-kaart: 12px;
	--r-pill: 22px;
	--r-badge: 15px;

	/* Schaduw */
	--schaduw-1: 0 1px 3px rgba(11, 79, 153, .08);
	--schaduw-2: 0 6px 20px rgba(11, 79, 153, .10);
	--schaduw-3: 0 8px 24px rgba(11, 79, 153, .12);

	/* Containers */
	--container: 1200px;
	--container-artikel: 720px;
	--container-nieuws: 784px;
	--zijmarge: 32px;
	--header-hoogte: 88px;
}

/* -------------------------------------------------------------------------
   2. Basis
   ---------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--wit);
	color: var(--antraciet);
	font-family: var(--f-tekst);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--donkerblauw);
}

a:hover {
	color: var(--blauw-actief);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--donkerblauw);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--blauw-100);
}

p {
	margin: 0 0 var(--s-2);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--rand);
	margin: var(--s-6) 0;
}

/* Verborgen, maar leesbaar voor schermlezers */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.overslaan {
	position: absolute;
	top: -100px;
	left: var(--s-2);
	z-index: 200;
	padding: 12px 20px;
	background: var(--donkerblauw);
	color: var(--wit);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 var(--r-knop) var(--r-knop);
	transition: top .15s ease;
}

.overslaan:focus {
	top: 0;
	color: var(--wit);
}

/* -------------------------------------------------------------------------
   3. Typografie
   ---------------------------------------------------------------------- */

.kop-display,
.kop-h1,
.kop-h2,
.kop-h3,
.kop-artikel,
.kop-blauw {
	font-family: var(--f-kop);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sab-blauw);
	margin: 0;
	text-wrap: pretty;
}

.kop-display { font-size: 58px; line-height: 1.08; }
.kop-h1      { font-size: 52px; line-height: 1.08; }
.kop-h2      { font-size: 40px; line-height: 1.1; }
.kop-h3      { font-size: 32px; line-height: 1.15; }
.kop-artikel { font-size: 44px; line-height: 1.12; }

.kicker {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--donkerblauw);
	line-height: 1.4;
}

/* 14px is de ondergrens in dit thema. Alles eronder wordt met hoofdletters
   én letterafstand snel onleesbaar, en de doelgroep is senioren. Waar het
   krapper moest, is de letterafstand teruggebracht in plaats van de letter. */
.kicker--klein {
	font-size: 14px;
	letter-spacing: 2px;
}

.kicker--grijs {
	color: var(--grijs);
}

.intro {
	font-size: 20px;
	line-height: 1.6;
	max-width: 680px;
}

.meta {
	font-size: 15px;
	color: var(--grijs);
	margin: 0;
}

/* inline-flex + min-height maakt van deze losstaande link een klikdoel van
   44px, zonder dat de tekst zelf verspringt. Zie ook "Klikdoelen" verderop. */
.tekstlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 17px;
	font-weight: 700;
	color: var(--donkerblauw);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.tekstlink--klein {
	font-size: 16px;
}

/* Een link die op zijn eigen regel staat in plaats van in een lopende zin —
   het mailadres in een contactkaart, de "ook handig"-rijtjes. Zonder deze
   klasse is zo'n link maar 22px hoog en dus een te klein klikdoel; de
   WCAG-uitzondering voor links in een tekstregel geldt hier niet. */
.stapellink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
   4. Layout
   ---------------------------------------------------------------------- */

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--zijmarge);
	padding-right: var(--zijmarge);
}

.sectie {
	padding: var(--s-11) 0 var(--s-12);
}

.sectie--kort   { padding: 72px 0 var(--s-6); }
.sectie--top    { padding: 72px 0 40px; }
.sectie--vervolg { padding: 0 0 var(--s-12); }
.sectie--blauw  { background: var(--blauw-50); padding: var(--s-11) 0; }
.sectie--grijs  { background: var(--grijs-50); }
.sectie--lijn   { border-top: 1px solid var(--rand); }

.sectiekop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
}

.raster {
	display: grid;
	gap: var(--s-3);
}

.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--5 { grid-template-columns: repeat(5, 1fr); }

.tweekolom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
}

/* Formulier met zijkolom (hulploket). */
.formulierraster {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 72px;
	align-items: start;
}

/* Rasterkolommen mogen nooit breder worden dan hun spoor: zonder deze regel
   groeit een grid- of flexitem tot zijn min-content-breedte en ontstaat er
   horizontale overloop op smalle schermen. */
.raster > *,
.tweekolom > *,
.formulierraster > *,
.artikelraster > * {
	min-width: 0;
}

/* -------------------------------------------------------------------------
   5. Knoppen
   ---------------------------------------------------------------------- */

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 var(--s-4);
	border: 2px solid transparent;
	border-radius: var(--r-knop);
	font-family: var(--f-tekst);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.knop--primair {
	background: var(--sab-blauw);
	color: var(--wit);
}

.knop--primair:hover,
.knop--primair:focus {
	background: var(--donkerblauw);
	color: var(--wit);
}

.knop--primair:active {
	background: var(--blauw-actief);
}

.knop--secundair {
	background: var(--wit);
	border-color: var(--donkerblauw);
	color: var(--donkerblauw);
}

.knop--secundair:hover,
.knop--secundair:focus {
	background: var(--blauw-50);
	color: var(--donkerblauw);
}

.knop--wit {
	background: var(--wit);
	color: var(--donkerblauw);
}

.knop--wit:hover,
.knop--wit:focus {
	background: var(--blauw-50);
	color: var(--blauw-actief);
}

.knop--klein {
	min-height: 48px;
	padding: 0 var(--s-3);
	font-size: 16px;
}

.knop[disabled],
.knop--uit {
	background: var(--rand);
	border-color: var(--rand);
	color: var(--grijs);
	cursor: not-allowed;
}

.knoprij {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
}

/* Twee knoppen naast elkaar, allebei zo breed as de breedste.
   inline-grid + width:max-content laat de 1fr-sporen samen op de
   max-content-breedte uitkomen, dus beide knoppen worden even groot. */
.knoprij--gelijk {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: max-content;
	max-width: 100%;
	gap: var(--s-2);
}

/* Knoppen op een fotoachtergrond: wit vlak voor de hoofdactie, witte
   omlijning voor de tweede. Blauw op blauw leest daar niet. */
.knop--hero-primair {
	background: var(--wit);
	color: var(--donkerblauw);
}

.knop--hero-primair:hover,
.knop--hero-primair:focus {
	background: var(--blauw-50);
	color: var(--blauw-actief);
}

.knop--hero-secundair {
	background: rgba(255, 255, 255, .08);
	border-color: var(--wit);
	color: var(--wit);
}

.knop--hero-secundair:hover,
.knop--hero-secundair:focus {
	background: rgba(255, 255, 255, .2);
	color: var(--wit);
}

/* Zonder achtergrondfoto vallen ze terug op het oorspronkelijke ontwerp. */
.hero-sectie:not(.hero-sectie--foto) .knop--hero-primair {
	background: var(--sab-blauw);
	color: var(--wit);
}

.hero-sectie:not(.hero-sectie--foto) .knop--hero-primair:hover {
	background: var(--donkerblauw);
}

.hero-sectie:not(.hero-sectie--foto) .knop--hero-secundair {
	background: var(--wit);
	border-color: var(--donkerblauw);
	color: var(--donkerblauw);
}

.hero-sectie:not(.hero-sectie--foto) .knop--hero-secundair:hover {
	background: var(--blauw-50);
}

/* -------------------------------------------------------------------------
   6. Header
   ---------------------------------------------------------------------- */

.siteheader {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wit);
	border-bottom: 1px solid var(--rand);
}

/* Drie kolommen: logo links, menu exact in het midden, taalkeuze rechts.
   Met 1fr aan beide kanten blijft het menu gecentreerd op de pagina, ook
   als het logo en de taalknop verschillend breed zijn. */
.siteheader__binnen {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	height: var(--header-hoogte);
}

.merk {
	justify-self: start;
}

.hoofdnav {
	justify-self: center;
}

.siteheader__rechts {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Het logo bevat zelf het wordmark en "Lokaal Maastricht", dus er staat
   geen losse tekst meer naast. De sitenaam blijft wel in de DOM voor
   schermlezers (.screen-reader-text in header.php). */
/* min-width: het logo is staand en wordt op mobiel maar 33px breed, terwijl
   dit de link naar de homepage is. Het klikgebied blijft zo minstens 44px. */
.merk {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	text-decoration: none;
	flex-shrink: 0;
}

/* De hoogte komt uit de Customizer via --logo-hoogte (zie header.php).
   De max-height is het vangnet: wat er ook ingesteld wordt, het logo blijft
   binnen de header en kan er nooit onderuit steken. */
.merk__logo {
	height: var(--logo-hoogte, 72px);
	max-height: calc(var(--header-hoogte) - 16px);
	width: auto;
	display: block;
}

.hoofdnav {
	display: flex;
	align-self: stretch;
}

.hoofdmenu {
	display: flex;
	align-self: stretch;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hoofdmenu > li {
	display: flex;
	align-items: stretch;
	position: relative;
}

.hoofdmenu a,
.hoofdmenu .menuknop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 var(--s-2);
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	font-family: var(--f-tekst);
	font-size: 16px;
	font-weight: 600;
	color: var(--antraciet);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.hoofdmenu a:hover,
.hoofdmenu .menuknop:hover {
	color: var(--donkerblauw);
}

.hoofdmenu .is-actief > a,
.hoofdmenu .is-actief > .menuknop,
.hoofdmenu .current-menu-item > a,
.hoofdmenu .current_page_item > a {
	color: var(--donkerblauw);
	font-weight: 700;
	border-bottom-color: var(--sab-blauw);
}

.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: var(--s-1) 0;
	list-style: none;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: 0 0 var(--r-knop) var(--r-knop);
	box-shadow: var(--schaduw-3);
	display: none;
}

.submenu[data-open="true"] {
	display: flex;
	flex-direction: column;
}

.submenu a {
	display: block;
	padding: 11px 20px;
	border-bottom: none;
	font-size: 15px;
	font-weight: 600;
}

.submenu a:hover {
	background: var(--blauw-50);
	color: var(--donkerblauw);
}

.submenu .current-menu-item > a {
	font-weight: 700;
	color: var(--donkerblauw);
}

/* Taalkeuze */

.taalkeuze {
	position: relative;
	flex-shrink: 0;
}

.taalkeuze__knop {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	height: 44px;
	padding: 0 12px;
	background: var(--wit);
	border: 2px solid var(--rand);
	border-radius: var(--r-knop);
	cursor: pointer;
	color: var(--donkerblauw);
}

.taalkeuze__knop:hover {
	border-color: var(--donkerblauw);
	background: var(--blauw-50);
}

.vlag {
	display: block;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.taalkeuze__lijst {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 4px 0 0;
	padding: var(--s-1) 0;
	min-width: 180px;
	list-style: none;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--r-knop);
	box-shadow: var(--schaduw-3);
	display: none;
}

.taalkeuze__lijst[data-open="true"] {
	display: block;
}

.taalkeuze__lijst a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--antraciet);
	text-decoration: none;
}

.taalkeuze__lijst a:hover {
	background: var(--blauw-50);
	color: var(--donkerblauw);
}

.taalkeuze__lijst [aria-current="true"] {
	font-weight: 700;
}

/* Mobiel menu — alleen zichtbaar op mobiel én wanneer het opengeklapt is.
   De basisregel staat bewust buiten de media query, anders is het paneel
   op desktop zichtbaar. */

.mobielmenu {
	display: none;
}

/* Hamburger */

.hamburger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--rand);
	border-radius: var(--r-knop);
	background: var(--wit);
	color: var(--donkerblauw);
	cursor: pointer;
	flex-shrink: 0;
}

.hamburger[aria-expanded="true"] {
	border-color: var(--donkerblauw);
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */

/* Hero met sfeerfoto over de volle breedte. De foto zit als <img> in de
   sectie (niet als background-image) zodat de browser via srcset een
   passend formaat kiest en het beeld als LCP goed laadt. */
.hero-sectie {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--s-11) 0 var(--s-12);
}

.hero-sectie--foto {
	background: var(--blauw-actief);
	padding: 128px 0 136px;
}

.hero-sectie__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	z-index: -2;
}

/* De waas houdt de witte tekst ruim boven de AA-drempel. Links vol
   dekkend, naar rechts oplopend transparant zodat de foto ademt. */
.hero-sectie__waas {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg,
			rgba(8, 60, 117, var(--waas, .8)) 0%,
			rgba(8, 60, 117, var(--waas, .8)) 42%,
			rgba(8, 60, 117, .40) 100%),
		linear-gradient(180deg,
			rgba(8, 60, 117, .28) 0%,
			rgba(8, 60, 117, 0) 45%);
}

.hero__tekst {
	max-width: 680px;
}

.hero__intro {
	font-size: 20px;
	line-height: 1.6;
	max-width: 560px;
	margin: 0 0 36px;
}

.hero-sectie .kop-display {
	margin: 0 0 var(--s-3);
}

.hero-sectie .kicker {
	margin-bottom: 20px;
}

/* Witte tekst zodra er een foto achter zit. */
.hero-sectie--foto .kop-display,
.hero-sectie--foto .hero__intro {
	color: var(--wit);
}

.hero-sectie--foto .kicker {
	color: var(--blauw-100);
}

figure {
	margin: 0;
}

figcaption,
.wp-element-caption {
	margin-top: 12px;
	font-size: 15px;
	color: var(--grijs);
	line-height: 1.5;
}

.beeld {
	width: 100%;
	object-fit: cover;
	border-radius: var(--r-kaart);
	display: block;
}

.beeld--3-2  { aspect-ratio: 3 / 2; }
.beeld--16-9 { aspect-ratio: 16 / 9; }
.beeld--16-10 { aspect-ratio: 16 / 10; }
.beeld--1-1  { aspect-ratio: 1 / 1; }
.beeld--vierkant-blok { border-radius: 0; }

/* -------------------------------------------------------------------------
   8. Kaarten
   ---------------------------------------------------------------------- */

.kaart {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	text-decoration: none;
	color: var(--antraciet);
	transition: border-color .15s ease, box-shadow .15s ease;
}

a.kaart:hover,
.kaart--klikbaar:hover,
.kaart:focus-within {
	border-color: var(--sab-blauw);
	box-shadow: var(--schaduw-2);
}

.kaart--ruim { padding: 36px; }
.kaart--beeld { padding: 0; overflow: hidden; }
.kaart--vlak { border: none; background: var(--blauw-50); }

.kaart__inhoud {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
}

.kaart__titel {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--antraciet);
}

.kaart__titel--groot {
	font-size: 22px;
}

.kaart__tekst {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--antraciet);
}

.kaart__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 16px;
	font-weight: 700;
	color: var(--donkerblauw);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Icoontegel */

.icoontegel {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--blauw-50);
	border-radius: var(--r-tegel);
	color: var(--donkerblauw);
	flex-shrink: 0;
}

.icoontegel--klein {
	width: 48px;
	height: 48px;
}

/* Standpuntkaart met kop naast het icoon */

.kaart__kop {
	display: flex;
	gap: var(--s-2);
	align-items: center;
	flex-wrap: wrap;
}

.kaart__kop > * {
	min-width: 0;
}

/* Personenkaart */

.persoonkaart {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
}

.persoonkaart__naam {
	font-size: 18px;
	font-weight: 700;
	color: var(--antraciet);
}

/* "BURGERRAADSLID" is één woord van veertien hoofdletters; met 2px
   letterafstand paste dat op smalle kaarten niet en liep het uit zijn vak.
   Minder letterafstand lost dat op. Voor de echt lange rollen
   ("FRACTIEVOORZITTER") doet hyphens het werk: die breekt netjes met een
   koppelteken op een lettergreep, in plaats van blind na de voorlaatste
   letter zoals overflow-wrap: anywhere deed. break-word blijft als vangnet
   staan voor het geval de browser geen afbreekpatronen voor de taal heeft. */
.persoonkaart__rol {
	margin-top: -6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--donkerblauw);
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Raadswerkkaart */

.raadswerkkaart {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: var(--s-4);
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
}

.raadswerkkaart--ruim { padding: 36px; }

.raadswerkkaart__titel {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--antraciet);
}

.drieslag {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.drieslag__label {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--donkerblauw);
}

.drieslag__tekst {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	overflow-wrap: break-word;
}

.badgerij {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.badge {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: var(--r-badge);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.badge--licht {
	background: var(--blauw-50);
	color: var(--donkerblauw);
}

.badge--donker {
	background: var(--donkerblauw);
	color: var(--wit);
}

.badgerij__soort {
	font-size: 14px;
	font-weight: 600;
	color: var(--grijs);
}

/* Nieuwsregels op de homepage */

.nieuwsregel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 0;
	border-bottom: 1px solid var(--rand);
	text-decoration: none;
}

.nieuwsregel__datum {
	font-size: 15px;
	color: var(--grijs);
}

.nieuwsregel__titel {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--donkerblauw);
}

/* Hulpverhaal */

.hulpverhaal {
	background: var(--wit);
	border-radius: var(--r-kaart);
	padding: 40px;
	box-shadow: var(--schaduw-1);
}

.hulpverhaal--vlak {
	background: var(--blauw-50);
	box-shadow: none;
	padding: var(--s-4);
}

.hulpverhaal--rand {
	background: var(--wit);
	border: 1px solid var(--rand);
	box-shadow: none;
	padding: 36px;
}

.hulpverhaal__citaat {
	margin: 0 0 20px;
	font-style: italic;
	font-size: 23px;
	line-height: 1.5;
	color: var(--antraciet);
}

.hulpverhaal--rand .hulpverhaal__citaat {
	font-size: 19px;
	margin-bottom: 12px;
}

.hulpverhaal__streep {
	height: 4px;
	width: 56px;
	background: var(--sab-blauw);
	border-radius: 2px;
	margin-bottom: var(--s-2);
}

.hulpverhaal__bron {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--grijs);
}

/* Videocitaat ------------------------------------------------------------
   De opnamen zijn staand (9:16). Naast elkaar zetten werkt daarom beter dan
   onder elkaar: een staande video op volle breedte duwt de tekst compleet
   van het scherm. De speler krijgt een vaste maximale hoogte, anders wordt
   hij op een breed scherm absurd groot.
   -------------------------------------------------------------------- */

/* Verticale ruimte om het blok heen. De video is een zwaar, donker vlak; met
   de 40 px die hier eerst stond plakte hij tegen de linkkaart eronder. Als
   losse klasse en niet als marge op .videocitaat zelf, want in de blauwe band
   en in een rij zorgt de omgeving al voor de ruimte. */
.videoblok {
	margin: var(--s-8) 0;
}

.videocitaat {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: var(--s-6);
	align-items: center;
	margin: 0;
}

.videocitaat--liggend {
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
}

.videocitaat__speler {
	position: relative;
	border-radius: var(--r-kaart);
	overflow: hidden;
	background: var(--antraciet);
	box-shadow: var(--schaduw-2);
}

.videocitaat__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

.videocitaat--liggend .videocitaat__video {
	aspect-ratio: 16 / 9;
}

/* Afspeeldriehoek over het posterframe. Puur decoratief — de video heeft
   gewoon `controls`, dus klikken en tabben werkt ook zonder JavaScript. De
   knop verdwijnt zodra er gespeeld wordt (klasse via theme.js). */
.videocitaat__afspelen {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--schaduw-3);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.videocitaat__afspelen::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--donkerblauw);
	transform: translateX(3px);
}

.videocitaat--speelt .videocitaat__afspelen {
	opacity: 0;
	transform: scale(.8);
}

.videocitaat__citaat {
	margin: 0 0 var(--s-2);
	font-style: italic;
	font-size: 25px;
	line-height: 1.45;
	color: var(--antraciet);
}

.videocitaat__spreker {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--antraciet);
}

.videocitaat__rol {
	display: block;
	font-weight: 400;
	color: var(--grijs);
}

/* Variant "band": het blok op de homepage, op een blauw vlak over de volle
   breedte van de sectie. Het vlak is 1136 px breed; met 48 px eromheen stond
   de video te dicht op de rand voor zo'n groot vlak. */
.videocitaat--band {
	background: var(--blauw-50);
	border-radius: var(--r-kaart);
	padding: var(--s-8);
	gap: var(--s-8);
}

/* Variant "compact": video bóven de tekst, voor de rij op een persoonspagina.
   Daar staan er meerdere naast elkaar en is naast elkaar zetten geen optie. */
/* `align-content: start` is hier geen detail. In de rij worden alle figuren
   even hoog gerekt (het langste citaat bepaalt de hoogte), en de standaard
   `align-content: stretch` verdeelt die extra hoogte over de twee rijen van
   dit rastertje. De video blijft dan wel bovenaan staan, maar het citaat
   zakt bij elk item een ander stukje omlaag — vier citaten die op vier
   verschillende hoogtes beginnen. Met `start` blijft alles tegen elkaar. */
.videocitaat--compact {
	grid-template-columns: 1fr;
	gap: var(--s-3);
	align-items: start;
	align-content: start;
}

.videocitaat--compact .videocitaat__citaat {
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 0;
}

.videocitaat--compact .videocitaat__afspelen {
	width: 56px;
	height: 56px;
}

.videocitaat--compact .videocitaat__afspelen::after {
	border-width: 10px 0 10px 16px;
}

/* De rij zelf. auto-fill vouwt vanzelf terug van vier kolommen naar één,
   zonder dat er een breekpunt aan te pas komt. De rijen staan verder uit
   elkaar dan de kolommen: de citaten zijn ongelijk lang, en met dezelfde
   afstand in beide richtingen loopt de tekst van de ene rij tegen de video
   van de volgende aan. */
.videorij {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	column-gap: var(--s-4);
	row-gap: var(--s-8);
}

/* Een liggende opname in één kolom van 260 px is maar 146 px hoog en staat
   als een streepje tussen de staande video's. Twee kolommen breed komt hij
   ongeveer op dezelfde hoogte uit. Op mobiel staat de rij in één kolom en
   zou een span van 2 een extra kolom aanmaken — daar dus niet. */
.videorij .videocitaat--liggend {
	grid-column: span 2;
}

/* -------------------------------------------------------------------------
   9. Filters, chips, paginering, lege staat
   ---------------------------------------------------------------------- */

.chiprij {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.filterblok {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.filtergroep {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.filtergroep__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--grijs);
}

.chip {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border: 2px solid var(--rand-input);
	border-radius: var(--r-pill);
	background: var(--wit);
	color: var(--donkerblauw);
	font-family: var(--f-tekst);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.chip:hover {
	border-color: var(--donkerblauw);
	color: var(--donkerblauw);
}

.chip[aria-pressed="true"],
.chip.is-actief {
	background: var(--donkerblauw);
	border-color: var(--donkerblauw);
	color: var(--wit);
}

.chip--tag {
	background: var(--blauw-50);
	border-color: transparent;
}

.chip--tag:hover {
	background: var(--blauw-100);
	border-color: transparent;
}

.paginering {
	display: flex;
	gap: var(--s-1);
	justify-content: center;
	margin-top: 56px;
	flex-wrap: wrap;
}

.paginering .page-numbers {
	min-width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 12px;
	border: 2px solid var(--rand-input);
	border-radius: var(--r-knop);
	font-size: 17px;
	font-weight: 700;
	color: var(--donkerblauw);
	text-decoration: none;
}

.paginering .page-numbers:hover {
	border-color: var(--donkerblauw);
	background: var(--blauw-50);
}

.paginering .page-numbers.current {
	background: var(--donkerblauw);
	border-color: var(--donkerblauw);
	color: var(--wit);
}

.paginering .page-numbers.dots {
	border-color: transparent;
}

.paginering .prev,
.paginering .next {
	padding: 0 18px;
}

.lege-staat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
	border: 1px dashed var(--rand-input);
	border-radius: var(--r-kaart);
	padding: 40px;
	color: var(--grijs);
	max-width: 560px;
	margin: 0 auto;
}

.lege-staat__titel {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--antraciet);
}

.lege-staat__tekst {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--antraciet);
}

/* Broodkruimels */

/* align-items: center, anders blijven de scheidingstekens bovenaan hangen
   nu de links 44px hoog zijn. */
.broodkruimels {
	display: flex;
	gap: var(--s-1);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 20px;
	font-size: 15px;
}

.broodkruimels a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--donkerblauw);
}

.broodkruimels span {
	color: var(--grijs);
}

/* Zoekveld */

.zoekform {
	display: flex;
	gap: 12px;
	max-width: 560px;
}

.zoekform__veld {
	position: relative;
	flex: 1;
}

.zoekform__icoon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--grijs);
	pointer-events: none;
}

.zoekform input[type="search"] {
	width: 100%;
	height: 56px;
	padding: 0 18px 0 52px;
	border: 2px solid var(--rand-input);
	border-radius: var(--r-knop);
	font-family: var(--f-tekst);
	font-size: 18px;
	color: var(--antraciet);
	background: var(--wit);
}

.zoekform input[type="search"]:focus {
	border-color: var(--donkerblauw);
}

/* -------------------------------------------------------------------------
   10. Formulieren
   ---------------------------------------------------------------------- */

.formulier {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	max-width: 560px;
}

.veld {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.veld__label,
.formulier legend {
	font-size: 17px;
	font-weight: 700;
	color: var(--antraciet);
	padding: 0;
}

.veld__uitleg {
	margin: 0;
	font-size: 15px;
	color: var(--grijs);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea,
select {
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border: 2px solid var(--rand-input);
	border-radius: var(--r-knop);
	font-family: var(--f-tekst);
	font-size: 18px;
	color: var(--antraciet);
	background: var(--wit);
}

textarea {
	padding: 16px 18px;
	line-height: 1.5;
	resize: vertical;
	min-height: 140px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--donkerblauw);
}

input[disabled],
textarea[disabled] {
	border-color: var(--rand);
	background: var(--grijs-50);
	color: var(--grijs);
	cursor: not-allowed;
}

.veld--fout input,
.veld--fout textarea {
	border-color: var(--fout);
}

.veldfout {
	display: flex;
	gap: var(--s-1);
	align-items: center;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--fout);
}

.checkbox {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-height: 44px;
	padding: 8px 0;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.55;
}

.checkbox input,
.radio input {
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
	accent-color: var(--donkerblauw);
	flex-shrink: 0;
}

.radiogroep {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	border: none;
}

.radio {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	font-size: 17px;
}

.radio input {
	margin: 0;
}

.honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bevestiging {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
	background: var(--blauw-50);
	border: 2px solid var(--sab-blauw);
	border-radius: var(--r-kaart);
	padding: 28px;
	max-width: 560px;
	color: var(--donkerblauw);
}

.bevestiging__titel {
	margin: 0 0 var(--s-1);
	font-size: 20px;
	font-weight: 700;
	color: var(--antraciet);
}

.bevestiging__tekst {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--antraciet);
}

.formulierfout {
	display: flex;
	gap: var(--s-1);
	align-items: center;
	margin: 0 0 var(--s-3);
	padding: var(--s-2);
	border-left: 4px solid var(--fout);
	background: #FDF3F2;
	color: var(--fout);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. Stappen (hulploket)
   ---------------------------------------------------------------------- */

.stap {
	background: var(--wit);
	border-radius: var(--r-kaart);
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stap__nummer {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sab-blauw);
	border-radius: 50%;
	font-family: var(--f-kop);
	font-size: 22px;
	color: var(--wit);
}

.stap__titel {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--antraciet);
}

.stap__tekst {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.vinklijst {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-2) var(--s-4);
	max-width: 980px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vinklijst li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 18px;
	line-height: 1.5;
}

.vinklijst svg {
	color: var(--donkerblauw);
	flex-shrink: 0;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
   12. Artikel (themapagina + nieuws)
   ---------------------------------------------------------------------- */

.artikelraster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 72px;
	align-items: start;
	/* Alleen boven en onder: de zijmarges komen van .container. */
	padding-top: 56px;
	padding-bottom: var(--s-12);
}

.artikel {
	max-width: var(--container-artikel);
}

.artikel--nieuws {
	/* Even breed als de header (container), zoals de rest van de site. */
	max-width: none;
	padding: 56px 0 72px;
}

.artikel__inhoud > * {
	margin-bottom: var(--s-2);
}

.artikel__inhoud h2 {
	font-family: var(--f-kop);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--donkerblauw);
	text-transform: uppercase;
	margin: 40px 0 var(--s-2);
	scroll-margin-top: 110px;
}

.artikel__inhoud h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--antraciet);
	margin: var(--s-4) 0 12px;
	scroll-margin-top: 110px;
}

.artikel__inhoud p {
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: var(--s-2);
}

.artikel__inhoud ul,
.artikel__inhoud ol {
	padding-left: var(--s-3);
	margin-bottom: var(--s-3);
}

.artikel__inhoud li {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 10px;
}

.artikel__inhoud img {
	border-radius: var(--r-kaart);
}

.artikel__inhoud blockquote,
.wp-block-quote {
	margin: var(--s-4) 0;
	padding: var(--s-4) 36px;
	background: var(--blauw-50);
	border-radius: var(--r-kaart);
	border: none;
}

.artikel__inhoud blockquote p,
.wp-block-quote p {
	font-style: italic;
	font-size: 23px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.artikel__inhoud blockquote cite,
.wp-block-quote cite {
	font-style: normal;
	font-size: 16px;
	font-weight: 700;
	color: var(--donkerblauw);
}

.artikel__lead {
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: var(--s-4);
}

.artikel--nieuws .artikel__lead {
	font-size: 21px;
	margin-bottom: 36px;
}

.artikel__meta {
	margin: 0 0 28px;
	font-size: 15px;
	color: var(--grijs);
}

.artikel__tag {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--donkerblauw);
	text-decoration: none;
}

/* Zijkolom */

.zijkolom {
	position: sticky;
	top: 112px;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.inhoudsopgave {
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	padding: 28px;
}

.inhoudsopgave__kop {
	margin: 0 0 var(--s-2);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--grijs);
}

.inhoudsopgave__samenvatting {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: var(--s-1);
}

.inhoudsopgave__samenvatting::-webkit-details-marker {
	display: none;
}

.inhoudsopgave__chevron {
	display: none;
	color: var(--donkerblauw);
}

.inhoudsopgave[open] .inhoudsopgave__chevron svg {
	transform: rotate(180deg);
}

.inhoudsopgave ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.inhoudsopgave a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	color: var(--donkerblauw);
	text-decoration: none;
}

.inhoudsopgave a:hover {
	text-decoration: underline;
}

.zijkaart {
	background: var(--blauw-50);
	border-radius: var(--r-kaart);
	padding: 28px;
}

.zijkaart p {
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: var(--s-2);
}

/* Callout "Wat vindt SAB?" */

.callout {
	background: var(--blauw-50);
	border-radius: var(--r-kaart);
	padding: 36px;
	margin: 40px 0;
}

.callout h2 {
	font-family: var(--f-kop);
	font-weight: 400;
	font-size: 28px;
	color: var(--sab-blauw);
	text-transform: uppercase;
	margin: 0 0 var(--s-2);
	scroll-margin-top: 110px;
}

.callout ul {
	margin: 0 0 20px;
	padding-left: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.callout li {
	font-size: 18px;
	line-height: 1.6;
}

/* Raadswerk-linkkaart */

.linkkaart {
	display: flex;
	gap: 20px;
	align-items: center;
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	padding: 28px;
	margin-bottom: var(--s-6);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.linkkaart:hover {
	border-color: var(--sab-blauw);
	box-shadow: var(--schaduw-2);
}

.linkkaart__label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--donkerblauw);
}

.linkkaart__titel {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--antraciet);
}

/* FAQ */

.faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: var(--s-6);
}

.faq__item {
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	overflow: hidden;
}

.faq__knop {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-2);
	padding: 20px 24px;
	background: var(--wit);
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--f-tekst);
	font-size: 18px;
	font-weight: 700;
	color: var(--antraciet);
	min-height: 44px;
}

.faq__knop:hover {
	background: var(--grijs-50);
}

.faq__knop svg {
	color: var(--donkerblauw);
	flex-shrink: 0;
}

.faq__antwoord {
	padding: 0 24px 20px;
}

.faq__antwoord p {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
}

.faq__item[data-open="false"] .faq__antwoord {
	display: none;
}

/* CTA-blok */

.cta {
	background: var(--sab-blauw);
	border-radius: var(--r-kaart);
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	align-items: flex-start;
	margin-bottom: var(--s-6);
}

.cta__titel {
	margin: 0;
	font-family: var(--f-kop);
	font-weight: 400;
	font-size: 26px;
	color: var(--wit);
	text-transform: uppercase;
}

.cta__tekst {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--wit);
}

/* Verder lezen */

.verderlezen__kop {
	margin: 0 0 var(--s-2);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--grijs);
	font-family: var(--f-tekst);
}

.verderlezen__lijst {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.verderlezen__lijst a {
	font-size: 18px;
	font-weight: 600;
	color: var(--donkerblauw);
}

/* Deelbalk */

.deelbalk {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	padding: var(--s-3) 0;
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

.deelbalk__label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--grijs);
}

.deelbalk__links {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
}

.deelbalk__links a,
.deelbalk__kopieer {
	font-family: var(--f-tekst);
	font-size: 16px;
	font-weight: 700;
	color: var(--donkerblauw);
	background: none;
	border: none;
	padding: 8px 0;
	cursor: pointer;
	text-decoration: none;
}

.deelbalk__links a:hover,
.deelbalk__kopieer:hover {
	text-decoration: underline;
}

/* Persoonsdetail */

.persoon {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 72px;
	align-items: start;
}

.persoon__quote {
	margin: 0 0 var(--s-4);
	padding: 0 0 0 var(--s-3);
	border-left: 4px solid var(--sab-blauw);
	background: none;
	border-radius: 0;
}

.persoon__quote p {
	margin: 0;
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	max-width: 560px;
}

.persoon__bio {
	font-size: 19px;
	line-height: 1.65;
	max-width: 600px;
	margin-bottom: 20px;
}

/* Agenda */

.agendalijst {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	max-width: 880px;
}

.agenda-item {
	display: flex;
	gap: 28px;
	align-items: center;
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	padding: var(--s-3) 28px;
}

.datumtegel {
	width: 84px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--blauw-50);
	border-radius: var(--r-tegel);
	padding: 14px 0;
}

.datumtegel__dag {
	font-family: var(--f-kop);
	font-size: 30px;
	line-height: 1;
	color: var(--donkerblauw);
}

.datumtegel__maand {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--donkerblauw);
}

.agenda-item__inhoud {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.agenda-item__titel {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--antraciet);
}

.agenda-item__details {
	margin: 0;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 16px;
	color: var(--grijs);
}

.agenda-item__details span {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

/* Infobalk */

.infobalk {
	display: flex;
	gap: var(--s-2);
	align-items: center;
	padding: 28px;
	background: var(--blauw-50);
	border-radius: var(--r-kaart);
	max-width: 880px;
}

.infobalk--breed {
	max-width: none;
	justify-content: center;
	margin-top: 56px;
}

.infobalk p {
	margin: 0;
	font-size: 18px;
}

.infobalk svg {
	color: var(--donkerblauw);
	flex-shrink: 0;
}

/* Tabel */

.wp-block-table table,
.sab-tabel {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	overflow: hidden;
}

.wp-block-table th,
.sab-tabel th {
	background: var(--grijs-50);
	padding: 14px 24px;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--grijs);
	border: none;
}

.wp-block-table td,
.sab-tabel td {
	padding: 16px 24px;
	border: none;
	border-top: 1px solid var(--rand);
	font-size: 16px;
}

/* Brede tabellen in de artikeltekst scrollen binnen de kolom in plaats van de
   pagina breder te maken (een tabel krimpt niet onder zijn min-content-breedte).
   De editor zet een tabel in figure.wp-block-table; een losse table wordt zelf
   het scrollvak. */
.artikel__inhoud .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--r-kaart);
}

.artikel__inhoud > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.wp-block-table th,
	.wp-block-table td,
	.sab-tabel th,
	.sab-tabel td {
		padding: 12px 16px;
	}
}

/* -------------------------------------------------------------------------
   13. Footer
   ---------------------------------------------------------------------- */

.hulpbalk {
	background: var(--sab-blauw);
}

.hulpbalk__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	flex-wrap: wrap;
	padding-top: var(--s-8);
	padding-bottom: var(--s-8);
}

.hulpbalk__tekst {
	max-width: 640px;
}

.hulpbalk__titel {
	margin: 0 0 12px;
	font-family: var(--f-kop);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	color: var(--wit);
	text-transform: uppercase;
}

.hulpbalk p {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wit);
}

.sitefooter {
	background: var(--grijs-50);
	border-top: 1px solid var(--rand);
}

.sitefooter__kolommen {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--s-6);
	padding-top: var(--s-8);
	padding-bottom: var(--s-6);
}

.sitefooter__logo {
	height: 96px;
	width: auto;
	display: block;
	margin-bottom: 20px;
}

.sitefooter__slogan {
	margin: 0;
	font-family: var(--f-kop);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	color: var(--sab-blauw);
	text-transform: uppercase;
	max-width: 280px;
}

.sitefooter h2 {
	margin: 0 0 var(--s-1);
	font-family: var(--f-tekst);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--grijs);
}

/* Geen gap meer: de 44px klikhoogte van de links levert zelf al ruimte
   tussen de regels, en met gap erbij werd de footer onnodig lang. */
.sitefooter ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sitefooter ul a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	color: var(--donkerblauw);
	text-decoration: none;
}

.sitefooter ul a:hover {
	text-decoration: underline;
}

.sitefooter__kolom p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
}

.sitefooter__onderregel {
	border-top: 1px solid var(--rand);
}

.sitefooter__onderregel .container {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
	padding-top: 20px;
	padding-bottom: 20px;
}

.sitefooter__onderregel p {
	margin: 0;
	font-size: 14px;
	color: var(--grijs);
}

/* Sticky mobiele hulpbalk */

.mobielebalk {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--donkerblauw);
	padding: 14px 20px;
}

.mobielebalk__tekst {
	font-size: 16px;
	font-weight: 700;
	color: var(--wit);
}

.mobielebalk .knop {
	min-height: 44px;
	padding: 0 18px;
	font-size: 15px;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   14. Tablet — 768 tot 1023
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.kop-display { font-size: 46px; }
	.kop-h1      { font-size: 42px; }
	.kop-h2      { font-size: 34px; }
	.kop-artikel { font-size: 36px; }

	/* De header moet passen: logo + volledig menu + taalknop halen 768 px niet,
	   dus hier compactere menu-items. Sinds Contact erbij kwam zijn het vijf
	   items plus de dropdown; op precies 768 px werd de taalknop daardoor
	   samengedrukt, vandaar 10 px in plaats van 12. */
	.hoofdmenu a,
	.hoofdmenu .menuknop {
		padding: 0 10px;
		font-size: 15px;
	}

	.siteheader__binnen {
		gap: 12px;
	}

	.tweekolom,
	.formulierraster {
		gap: var(--s-6);
	}

	.hero-sectie--foto {
		padding: 96px 0 104px;
	}

	.raster--4 { grid-template-columns: repeat(2, 1fr); }
	.raster--5 { grid-template-columns: repeat(3, 1fr); }
	.raster--3 { grid-template-columns: repeat(2, 1fr); }

	.vinklijst { grid-template-columns: repeat(2, 1fr); }

	.artikelraster {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
	}

	.zijkolom {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.zijkolom > * {
		flex: 1 1 300px;
	}

	.persoon {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--s-6);
	}

	.sitefooter__kolommen {
		grid-template-columns: 1fr 1fr;
		gap: var(--s-4);
	}

	.videocitaat {
		grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
		gap: var(--s-4);
	}

	.videocitaat--liggend {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	}

	/* De compacte variant blijft ook hier één kolom — anders krijgen de
	   video's in een rij twee kolommen in een vak van 220 px en valt de tekst
	   buiten beeld. Bewust een gewone klasse en géén :not() op de regel
	   hierboven: dit blok is `max-width: 1023px` en geldt dus óók op een
	   telefoon, en met :not() zou het zwaarder wegen dan het mobiele blok
	   verderop. */
	.videocitaat--compact {
		grid-template-columns: 1fr;
		gap: var(--s-3);
	}

	.videocitaat__citaat { font-size: 21px; }
	.videocitaat--band { padding: var(--s-6); }
	.videoblok { margin: var(--s-6) 0; }
	.videorij { row-gap: var(--s-6); }
}

/* -------------------------------------------------------------------------
   15. Mobiel — tot 767 (ontwerp 390)
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--zijmarge: 20px;
		--header-hoogte: 64px;
	}

	body {
		font-size: 18px;
	}

	.kop-display { font-size: 36px; line-height: 1.1; }
	.kop-h1      { font-size: 34px; line-height: 1.1; }
	.kop-h2      { font-size: 28px; }
	.kop-h3      { font-size: 24px; }
	.kop-artikel { font-size: 30px; line-height: 1.15; }

	.kicker { font-size: 14px; letter-spacing: 1.5px; }
	.intro  { font-size: 18px; }

	/* Op desktop houdt nowrap de pijl bij de tekst; op een smal scherm is een
	   link als "Bekijk al onze standpunten →" breder dan de kolom. */
	.tekstlink {
		white-space: normal;
		align-items: flex-start;
	}

	.sectie          { padding: var(--s-4) 0 var(--s-6); }
	.sectie--kort,
	.sectie--top     { padding: 28px 0 var(--s-3); }
	.sectie--vervolg { padding: 0 0 var(--s-6); }
	.sectie--blauw   { padding: var(--s-4) 0; }

	.sectiekop {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-2);
		margin-bottom: var(--s-3);
	}

	/* Op mobiel staat de "alle …"-link ónder de kaarten (zie Mobiel.dc.html),
	   dus verbergen we de kopregel-variant om dubbeling te voorkomen. */
	.sectiekop--link-alleen-desktop > .tekstlink {
		display: none;
	}

	.raster--2,
	.raster--3,
	.raster--4 {
		grid-template-columns: 1fr;
	}

	/* auto-fit in plaats van een harde 2: op 320px past twee kolommen van
	   132px niet meer (de rol onder de naam liep eruit), daar valt hij nu
	   vanzelf terug op één kolom. Vanaf ~360px zijn het er weer twee. */
	.raster--5,
	.raster--mensen {
		grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
		gap: var(--s-2);
	}

	.tweekolom,
	/* minmax(0, …) en niet 1fr: een kale 1fr-kolom heeft min-width:auto en
	   kan dus niet smaller worden dan zijn inhoud. Op /en/ duwde de chip
	   "Safety in the neighbourhood" het blok daardoor 5 px buiten beeld. */
	.persoon {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-4);
	}

	.hero__intro { margin-bottom: var(--s-3); }

	.hero-sectie--foto {
		padding: 56px 0 64px;
	}

	/* Op mobiel loopt de tekst over de volle breedte, dus een egale waas. */
	.hero-sectie--foto .hero-sectie__waas {
		background: linear-gradient(180deg,
			rgba(8, 60, 117, .82) 0%,
			rgba(8, 60, 117, .90) 100%);
	}

	.knoprij {
		flex-direction: column;
		align-items: stretch;
	}

	.knoprij .knop {
		width: 100%;
	}

	.knoprij--gelijk {
		display: grid;
		grid-auto-flow: row;
		width: 100%;
	}

	.vinklijst { grid-template-columns: 1fr; }

	/* Header — de balk is hier 64px, dus het logo mag hooguit 48px zijn.
	   min() zodat een lagere Customizer-waarde wél doorwerkt. */
	.merk__logo { height: min(var(--logo-hoogte, 72px), 48px); }

	.hamburger { display: inline-flex; }

	.siteheader .hoofdnav,
	.siteheader .taalkeuze {
		display: none;
	}

	/* De header is een grid van 1fr auto 1fr, met het menu in het midden.
	   Valt dat menu hier weg, dan blijft de derde kolom van 1fr wél bestaan
	   en duwt die de hamburger naar het midden van de balk. Terug naar twee
	   kolommen, zodat logo links en hamburger rechts staan. */
	.siteheader__binnen {
		grid-template-columns: 1fr auto;
	}

	.mobielmenu {
		position: fixed;
		inset: var(--header-hoogte) 0 0;
		z-index: 45;
		background: var(--wit);
		overflow-y: auto;
		padding: 12px var(--zijmarge) 28px;
	}

	.mobielmenu[data-open="true"] {
		display: block;
	}

	body.menu-open {
		overflow: hidden;
	}

	.mobielmenu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	/* De taalkeuze is óók een <ul>, en de regel hierboven wint met haar
	   hogere specificiteit van `.taalkeuze__lijst { display: none }`. Zonder
	   deze twee regels staat de taalkeuze in het paneel dus permanent open,
	   als een zwevende kaart over de servicelinks heen. Bewust geen :not()
	   hierboven: dat maakt die regel zwaarder dan `.mobielmenu ul ul` en
	   haalt de inspringing onder de submenu-items weg. */
	.mobielmenu .taalkeuze__lijst {
		display: none;
	}

	.mobielmenu .taalkeuze__lijst[data-open="true"] {
		display: block;
	}

	.mobielmenu .hoofdmenu > li {
		display: block;
		position: static;
	}

	.mobielmenu .hoofdmenu > li > a,
	.mobielmenu .hoofdmenu > li > .menuknop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 16px 0;
		border: none;
		border-bottom: 1px solid var(--rand);
		background: none;
		font-family: var(--f-tekst);
		font-size: 19px;
		font-weight: 700;
		color: var(--antraciet);
		text-decoration: none;
		cursor: pointer;
	}

	.mobielmenu .current-menu-item > a,
	.mobielmenu .current_page_item > a,
	.mobielmenu .is-actief > a {
		color: var(--donkerblauw);
	}

	.mobielmenu .submenu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	.mobielmenu .submenu[data-open="true"] {
		border-bottom: 1px solid var(--rand);
	}

	.mobielmenu .submenu a {
		padding: 13px 0;
		font-size: 17px;
		font-weight: 600;
	}

	/* Links uitlijnen met de menu-items. De ruimte eromheen is er bewust:
	   de knop stond eerst direct tegen het laatste menu-item aan geplakt. */
	.mobielmenu__taal {
		display: flex;
		justify-content: flex-start;
		margin-top: var(--s-3);
		padding: var(--s-3) 0 var(--s-4);
		border-top: 1px solid var(--rand);
	}

	/* De lijst hangt standaard rechts onder de knop — in de header klopt dat,
	   want daar zit de knop tegen de rechterrand. Hier staat de knop links,
	   dus moet de lijst mee naar links, anders valt hij buiten beeld. */
	.mobielmenu__taal .taalkeuze__lijst {
		right: auto;
		left: 0;
	}

	.mobielmenu__taal .taalkeuze {
		display: block;
	}


	/* Standpunten worden compacte rijkaarten */
	.standpuntenraster {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.standpuntenraster .kaart {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 20px;
	}

	.standpuntenraster .kaart__titel {
		flex: 1;
		font-size: 18px;
	}

	.standpuntenraster .kaart__tekst,
	.standpuntenraster .kaart__link {
		display: none;
	}

	.standpuntenraster .kaart__chevron {
		display: inline-flex;
		color: var(--donkerblauw);
	}

	.standpuntenraster .kaart.is-verborgen-mobiel {
		display: none;
	}

	.standpunten-meer {
		display: inline-block;
	}

	/* Filters horizontaal scrollen. min-width:0 is essentieel: anders groeit
	   de flexcontainer mee met de chips in plaats van te scrollen. */
	.chiprij,
	.filtergroep {
		flex-wrap: nowrap;
		overflow-x: auto;
		min-width: 0;
		padding-bottom: var(--s-1);
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.chiprij > .chip,
	.filtergroep > .chip {
		flex: 0 0 auto;
	}

	.filterblok {
		flex-direction: column;
		/* nowrap is nodig: in een wrappende kolom-flexcontainer bepaalt de
		   inhoud van de lijn de dwarsmaat, waardoor de filtergroep tot zijn
		   volle breedte uitrekt in plaats van horizontaal te scrollen. */
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--s-2);
		min-width: 0;
	}

	.formulierraster {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	/* Inhoudsopgave als inklapbaar blok bovenaan */
	.artikelraster {
		display: flex;
		flex-direction: column;
		padding-top: 28px;
		padding-bottom: var(--s-6);
	}

	/* Met align-items: start krijgt een flexitem zijn min-content-breedte; een
	   brede tabel of lange link zou de kolom dan breder maken dan het scherm.
	   Alle blokken (artikel, inhoudsopgave, hulploketkaart) vullen de kolom. */
	.artikelraster > *,
	.zijkolom > * {
		align-self: stretch;
		max-width: 100%;
	}

	/* De tabletregel flex: 1 1 300px zou in deze kolom 300px hoogte worden. */
	.zijkolom > * {
		flex: none;
	}

	.zijkolom {
		display: contents;
	}

	.inhoudsopgave {
		order: -1;
		padding: 20px;
		margin-bottom: var(--s-3);
	}

	.inhoudsopgave__samenvatting {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0;
	}

	.inhoudsopgave[open] .inhoudsopgave__samenvatting {
		margin-bottom: var(--s-2);
	}

	.inhoudsopgave__chevron {
		display: inline-flex;
	}

	.zijkaart {
		order: 5;
	}

	.artikel__inhoud h2 { font-size: 22px; }
	.artikel__inhoud blockquote,
	.wp-block-quote { padding: var(--s-3); }
	.artikel__inhoud blockquote p,
	.wp-block-quote p { font-size: 19px; }

	.callout { padding: var(--s-3); }
	.callout h2 { font-size: 22px; }
	.cta { padding: var(--s-3); }
	.cta__titel { font-size: 22px; }
	.cta__tekst { font-size: 17px; }

	.hulpverhaal { padding: var(--s-3); }
	.hulpverhaal__citaat { font-size: 20px; }

	/* Videocitaat: onder elkaar, en de staande video krijgt een plafond.
	   Op volle breedte zou 9:16 op een telefoon van 390 bijna 700 px hoog
	   worden en het citaat compleet buiten beeld duwen. */
	.videocitaat,
	.videocitaat--liggend {
		grid-template-columns: 1fr;
		gap: var(--s-3);
	}

	.videocitaat--staand .videocitaat__speler {
		max-width: 260px;
		margin: 0 auto;
	}

	.videocitaat__citaat { font-size: 20px; }
	.videocitaat--band { padding: var(--s-4); }
	.videoblok { margin: var(--s-6) 0; }
	.videorij { row-gap: var(--s-6); }
	.videorij .videocitaat--liggend { grid-column: auto; }

	.linkkaart { padding: 20px; gap: var(--s-2); }

	/* Agenda: datumtegel blijft links, tekst wrapt */
	.agenda-item {
		align-items: flex-start;
		gap: var(--s-2);
		padding: var(--s-2);
	}

	.datumtegel { width: 64px; }
	.datumtegel__dag { font-size: 24px; }

	/* Footer */
	.hulpbalk__binnen {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
		padding-top: var(--s-4);
		padding-bottom: var(--s-4);
	}

	.hulpbalk__titel { font-size: 28px; }
	.hulpbalk p { font-size: 18px; }
	.hulpbalk .knop { width: 100%; }

	.sitefooter__kolommen {
		grid-template-columns: 1fr;
		gap: var(--s-4);
		padding-top: var(--s-4);
		padding-bottom: var(--s-3);
	}

	.sitefooter__logo { height: 72px; }

	.sitefooter__onderregel .container {
		flex-direction: column;
		gap: var(--s-1);
	}

	/* Sticky balk */
	body:not(.is-hulploket) .mobielebalk {
		display: flex;
	}

	body:not(.is-hulploket) .sitefooter {
		padding-bottom: 72px;
	}

	/* Knop voor de cookievoorkeuren (CookieYes) boven de mobiele balk houden. */
	body:not(.is-hulploket) .cky-btn-revisit-wrapper {
		bottom: 84px !important;
	}

	.deelbalk { gap: 12px; }

	/* Tabellen worden label-waardeparen */
	.sab-tabel--mobielkaart thead { display: none; }

	.sab-tabel--mobielkaart tr {
		display: block;
		border: 1px solid var(--rand);
		border-radius: var(--r-kaart);
		margin-bottom: 12px;
		padding: 12px;
	}

	.sab-tabel--mobielkaart td {
		display: flex;
		justify-content: space-between;
		gap: var(--s-2);
		border: none;
		padding: 6px 0;
	}

	.sab-tabel--mobielkaart td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--grijs);
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
}

/* Alleen op desktop verbergen we de mobiele "alle x" link */
@media (min-width: 768px) {
	.standpunten-meer,
	.kaart__chevron {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   16. Printen
   ---------------------------------------------------------------------- */

@media print {
	.siteheader,
	.mobielebalk,
	.hulpbalk,
	.zijkolom,
	.deelbalk,
	.cta {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}

/* -------------------------------------------------------------------------
   Meldpunten
   ---------------------------------------------------------------------- */

/* De belofte onder de kop: één regel met een vinkje ervoor. */
.meldbelofte {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	max-width: 720px;
	margin: 24px 0 0;
	padding: 18px 22px;
	background: var(--blauw-50);
	border-radius: var(--r-kaart);
	font-size: 17px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--donkerblauw);
}

.meldbelofte svg {
	flex-shrink: 0;
	margin-top: 1px;
}

/* Het vaste "wat"-veld: geen invoer, wel duidelijk wat je meldt. */
.meldformulier__wat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 18px;
	border: 2px solid var(--blauw-100);
	border-radius: var(--r-knop);
	background: var(--blauw-50);
	font-size: 18px;
	font-weight: 700;
	color: var(--donkerblauw);
}

.meldformulier__locatie {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 4px;
}

.meldformulier__locatie .knop svg {
	margin-right: 6px;
}

.meldformulier__locatiestatus {
	font-size: 15px;
	color: var(--grijs);
}

.meldformulier__locatiestatus.is-ok {
	color: #1E6B3A;
	font-weight: 600;
}

/* Bestandsveld: de browserknop is niet te stylen, de rand eromheen wel. */
.meldformulier__bestand {
	width: 100%;
	padding: 14px 18px;
	border: 2px dashed var(--rand-input);
	border-radius: var(--r-knop);
	background: var(--wit);
	font-family: var(--f-tekst);
	font-size: 16px;
	color: var(--antraciet);
}

.meldformulier__bestand:focus {
	border-color: var(--donkerblauw);
	outline: none;
}

.veld--fout .meldformulier__bestand,
.veld--fout select {
	border-color: var(--fout);
}

.meldformulier__bestandslijst {
	margin: 0;
	font-size: 15px;
	color: var(--grijs);
}

/* Cijfers in de zijkolom. */
.meldcijfers__lijst {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.meldcijfers__lijst > div {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.meldcijfers__lijst dt {
	font-family: var(--f-kop);
	font-size: 40px;
	line-height: 1;
	color: var(--donkerblauw);
	min-width: 64px;
}

.meldcijfers__lijst dd {
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
}

.meldlinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.meldlinks .tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Gepubliceerde melding als kaart. */
.meldkaart {
	display: flex;
	flex-direction: column;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--r-kaart);
	overflow: hidden;
}

.meldkaart__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--grijs-50);
}

.meldkaart__foto--leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rand-input);
}

.meldkaart__inhoud {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 24px;
}

.meldkaart__titel {
	margin: 4px 0 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--antraciet);
}

.meldkaart__waar {
	margin: 0;
	font-size: 16px;
	color: var(--grijs);
}

.meldkaart__resultaat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: #1E6B3A;
}

@media (max-width: 767px) {
	.meldbelofte { font-size: 16px; padding: 16px 18px; }
	.meldcijfers__lijst dt { font-size: 32px; min-width: 52px; }
}