/* ikg.css: samengevoegd uit basis.css, onderdelen/, blokken/ en sjablonen/. Bewerk de losse bestanden. Bron: 10cc8cd5a9cf04de9d16f437f986d501 */

/* === basis.css === */
/* Basis: lettertypen, standaardopmaak van elementen en de breedte van de inhoud. Geen opmaak van onderdelen. */

/* Mozilla Text en Mozilla Headline (SIL Open Font License): alleen latin, dikte 400 tot 700. */
@font-face {
	font-family: "Mozilla Text";
	src: url("../fonts/mozilla-text.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Mozilla Headline";
	src: url("../fonts/mozilla-headline.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

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

/* scrollbar-gutter houdt de ruimte van de scrollbalk vrij, ook als het uitklapmenu het scrollen stilzet:
   de pagina verspringt dan niet. */
html {
	background: var(--kleur-paars);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--ruimte-6);
	scrollbar-gutter: stable;
}

/* De pagina is minstens zo hoog als het scherm, met de footer onderaan. Onder een kortere pagina zou anders de
   achtergrond van het document te zien zijn; die wordt donker als het uitklapmenu opent. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--kleur-paars);
	color: var(--tekst);
	font-family: var(--letter-tekst);
	font-size: var(--tekst-m);
	font-weight: var(--dikte-normaal);
	line-height: var(--regel-tekst);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--kop);
	font-family: var(--letter-kop);
	font-weight: var(--dikte-vet);
	line-height: var(--regel-kop);
	text-wrap: balance;
}

h1 {
	font-size: var(--kop-1);
}

h2 {
	font-size: var(--kop-2);
}

h3 {
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

h4,
h5,
h6 {
	font-size: var(--kop-4);
	line-height: var(--regel-kop-klein);
}

p,
ul,
ol,
dl,
figure,
blockquote {
	margin: 0;
}

/* Een lijst met een class is opmaak van een onderdeel: geen bolletjes en geen inspringing.
   :where() houdt deze regel zwak, zodat één class van een onderdeel hem overschrijft. */
:where(ul[class], ol[class]) {
	padding: 0;
	list-style: none;
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 0.0625em;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 0.125em;
}

b,
strong {
	font-weight: var(--dikte-vet);
}

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

::selection {
	background: var(--kleur-geel);
	color: var(--kleur-paars-donker);
}

[hidden] {
	display: none !important;
}

/* Verschijnen (assets/js/ikg.js): het script in de kop zet .beweging op <html>, zodat deze onderdelen niet eerst
   te zien zijn en dan pas in beeld komen. Het script van het thema neemt het over en haalt de class weg; lukt dat
   niet binnen drie seconden, dan haalt de kop hem zelf weg en staat alles er gewoon. */
.beweging [data-verschijn] {
	opacity: 0;
}

main {
	flex: 1 0 auto;
}

/* Alleen voor schermlezers. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Eerste link op de pagina: springt naar de inhoud en is pas zichtbaar met de Tab-toets. */
.skip-link {
	position: absolute;
	top: var(--ruimte-3);
	left: var(--goot);
	z-index: 100;
	padding: var(--ruimte-3) var(--ruimte-5);
	transform: translateY(-200%);
	border-radius: var(--hoek-rond);
	background: var(--kleur-geel);
	color: var(--kleur-paars);
	font-weight: var(--dikte-vet);
	text-decoration: none;
}

.skip-link:focus {
	transform: none;
}

/* Breedte van de inhoud: gewoon, breed (kop en footer) en smal (artikel). */
.container {
	width: min(var(--breedte-inhoud), 100% - 2 * var(--goot));
	margin-inline: auto;
}

.container--breed {
	width: min(var(--breedte-breed), 100% - 2 * var(--goot));
}

/* Rij van vier kaarten: 1260 px. */
.container--ruim {
	width: min(var(--breedte-ruim), 100% - 2 * var(--goot));
}

.container--tekst {
	width: min(var(--breedte-tekst), 100% - 2 * var(--goot));
}

/* Onder elkaar met vaste ruimte ertussen; --stapel past de ruimte aan. */
.stapel > * + * {
	margin-top: var(--stapel, var(--ruimte-5));
}

/* Tekstsoorten. */
.inleiding {
	font-size: var(--tekst-xl);
	line-height: 1.36;
}

.tekst-klein {
	font-size: var(--tekst-s);
}

.tekst-ruim {
	line-height: var(--regel-ruim);
}

.tekst-zacht {
	color: var(--tekst-zacht);
}

/* Een link naar een plek op de pagina (de pijl in de hero, terug naar boven) scrolt erheen. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* Hoog contrast van Windows (forced colors) met een lichte achtergrond: de witte logo's krijgen een donker vlak,
   anders vallen ze weg. */
@media (forced-colors: active) and (prefers-color-scheme: light) {
	.logo img,
	.voet__logo img,
	.voet__logos img,
	.blok-hero__logo img {
		border-radius: var(--hoek-1);
		background: var(--kleur-paars-donker);
		forced-color-adjust: none;
	}
}

/* Afdrukken: donkere tekst op wit papier (een browser drukt achtergronden niet af), alles wat nog niet in beeld
   was gekomen staat erop, en de bediening van het scherm blijft weg. */
@media print {
	*,
	*::before,
	*::after {
		background: none !important;
		box-shadow: none !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	[data-verschijn] {
		transform: none !important;
		opacity: 1 !important;
	}

	.skip-link,
	.kop__rechts,
	.uitklapmenu,
	.blokjes,
	.voet__boven,
	.paginakop__beeld,
	.hulpmiddel__achtergrond,
	.blok-hero__omlaag,
	.blok-zoekkop__omlaag,
	.zoekveld {
		display: none !important;
	}

	/* De witte logo's hebben een donker vlak nodig. */
	.logo img,
	.voet__logo img,
	.voet__logos img,
	.blok-hero__logo img {
		background: var(--kleur-paars-donker) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Achter een link naar een andere site staat het adres. */
	.inhoud a[href^="http"]:not([href*="iedereenkangamen"])::after,
	.lijst__items a[href^="http"]:not([href*="iedereenkangamen"])::after {
		content: " (" attr(href) ")";
		font-weight: var(--dikte-normaal);
		overflow-wrap: anywhere;
	}
}

/* === onderdelen/beeld.css === */
/* Beeld: een foto in een vorm met ronde hoeken. Sjabloon: template-parts/onderdelen/beeld.php.
   De foto vult de vorm. Een onderdeel of blok dat een vaste verhouding wil, zet aspect-ratio op de img;
   zonder houdt de foto zijn eigen verhouding.
   De hoeken zijn een deel van de breedte van het beeld (cqw), zodat de vorm op elke maat gelijk blijft. */
.beeld {
	display: block;
	position: relative;
	container-type: inline-size;
}

/* Past een foto niet in de vorm, dan valt er onderaan meer weg dan bovenaan: gezichten staan meestal boven het
   midden. */
.beeld img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Bijna ovaal, zoals de foto in de hero: 198 op 650 px. */
.beeld--bol img,
.beeld--bol::after {
	border-radius: 30.5cqw;
}

.beeld--pil img,
.beeld--pil::after {
	border-radius: var(--hoek-rond);
}

/* Vierkante foto: 80 op 320 px. */
.beeld--zacht img,
.beeld--zacht::after {
	border-radius: 25cqw;
}

/* === onderdelen/blokjes.css === */
/* Blokjes: vier pixelblokjes in de hoek van een vlak. Sjabloon: template-parts/onderdelen/blokjes.php.
   De lettergrootte is de zijde van één blokje. De kleur komt van het vlak (--blokjes-kleur, of per hoek
   --blokjes-links en --blokjes-rechts); zonder is het de donkere kleur. */
.blokjes {
	position: absolute;
	bottom: 0;
	width: 3em;
	height: 3em;
	font-size: var(--blokje);
	pointer-events: none;
}

.blokjes--links {
	left: 0;
	color: var(--blokjes-links, var(--blokjes-kleur, var(--kleur-paars-donker)));
}

.blokjes--rechts {
	right: 0;
	color: var(--blokjes-rechts, var(--blokjes-kleur, var(--kleur-paars-donker)));
}

.blokjes i {
	position: absolute;
	width: 1em;
	height: 1em;
	background: currentColor;
}

.blokjes i:nth-child(1) {
	top: 0;
	left: 1em;
}

.blokjes i:nth-child(2) {
	top: 1em;
	left: 0;
}

.blokjes i:nth-child(3) {
	top: 1em;
	left: 2em;
}

.blokjes i:nth-child(4) {
	top: 2em;
	left: 1em;
}

/* De inhoud van het vlak ligt over de blokjes. */
.blokjes ~ .container {
	position: relative;
}

/* === onderdelen/bovenkop.css === */
/* Bovenkop: kleine regel in hoofdletters boven een titel, of als kop van een sectie zonder titel.
   Sjabloon: template-parts/onderdelen/bovenkop.php. */
.bovenkop {
	color: var(--accent);
	font-family: var(--letter-tekst);
	font-size: var(--tekst-l);
	font-weight: var(--dikte-normaal);
	line-height: 1.3;
	letter-spacing: var(--spatie-bovenkop);
	text-transform: uppercase;
}

/* === onderdelen/inhoud.css === */
/* Inhoud: de opmaak van tekst uit de editor (the_content), zoals het artikel van een verhaal.
   Zet de class inhoud op het element om de tekst. De eerste alinea is de inleiding (18 px); een tussenkop is
   18 px vet in de letter van de tekst. */
.inhoud > * {
	margin: var(--ruimte-5) 0 0;
}

.inhoud > :first-child {
	margin-top: 0;
}

.inhoud > p:first-child {
	font-size: var(--tekst-l);
	line-height: 1.5556; /* 28 op 18 */
}

.inhoud h2,
.inhoud h3 {
	margin-top: 1.3125rem;
	font-family: var(--letter-tekst);
	font-size: var(--tekst-l);
	line-height: 1.5556;
}

.inhoud > p:first-child + h2 {
	margin-top: var(--ruimte-5);
}

.inhoud h2 + *,
.inhoud h3 + * {
	margin-top: 0.4375rem;
}

.inhoud ul,
.inhoud ol {
	padding-left: 1.25rem;
}

.inhoud li + li {
	margin-top: var(--ruimte-2);
}

.inhoud li::marker {
	color: var(--kleur-paars-licht);
}

.inhoud img,
.inhoud video,
.inhoud iframe {
	border-radius: 1.25rem;
}

.inhoud blockquote {
	padding-left: var(--ruimte-5);
	border-left: 2px solid var(--accent);
	font-size: var(--tekst-l);
	line-height: 1.5556;
}

.inhoud figcaption {
	margin-top: var(--ruimte-2);
	color: var(--tekst-zacht);
	font-size: var(--tekst-s);
}

/* === onderdelen/kaart.css === */
/* Kaart: foto, titel en link naar een pagina; de hele kaart is klikbaar. Sjabloon: template-parts/onderdelen/kaart.php.
   Kaartenrij is de rij waarin kaarten naast elkaar staan; --kolommen is het aantal kaarten. */
.kaartenrij {
	display: grid;
	gap: var(--ruimte-8) var(--kolom-ruimte);
}

.kaartenrij > li {
	min-width: 0;
}

@media (min-width: 48em) {
	.kaartenrij {
		grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr));
	}
}

.kaart {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
}

.kaart__beeld {
	width: 100%;
	transition: transform 0.4s var(--ease-uit);
}

.kaart__titel {
	font-size: var(--kop-2);
	line-height: var(--regel-kop);
}

/* De link vult de hele kaart. */
.kaart__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Hover alleen met een muis: de foto komt iets omhoog en de streep groeit, zoals bij een losse streepregel. */
@media (hover: hover) and (pointer: fine) {
	.kaart:hover .kaart__beeld {
		transform: translateY(-0.375rem);
	}

	.kaart:hover .streep--link::before {
		width: 1.75rem;
		margin-right: -1rem;
	}
}

/* Doelgroep: liggende foto in een pil, met de eerste regel van de titel over de onderkant van de foto.
   Onder de titel ligt een donker verloop over de foto, zodat de titel op elke foto leesbaar is. */
.kaart--doelgroep .kaart__beeld img {
	aspect-ratio: 8 / 5;
}

.kaart--doelgroep .kaart__beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(38 30 72 / 0.7), rgb(38 30 72 / 0) 45%);
}

/* Twee korte regels, zoals in het ontwerp: zo begint de tekst in elke kaart op dezelfde hoogte. */
.kaart--doelgroep .kaart__titel {
	position: relative;
	max-width: 16rem;
	min-height: 2em;
	margin-top: -0.745em; /* de basislijn van de eerste regel staat 4 px onder de foto */
}

.kaart--doelgroep .kaart__tekst {
	margin: 2.25rem 0 0.625rem;
	padding-left: 2.5rem; /* gelijk met de tekst van de streepregel */
	font-size: var(--tekst-m); /* 16 in plaats van de 14 uit het ontwerp: die was op een gewoon beeldscherm te klein */
	line-height: var(--regel-ruim);
	text-wrap: pretty; /* geen los woord op de laatste regel */
}

.kaart--doelgroep .kaart__link {
	margin-top: auto;
}

/* Verhaal: vierkante foto, naam en leeftijd, en het citaat als titel. */
.kaart--verhaal .kaart__beeld img {
	aspect-ratio: 1;
}

.kaart--verhaal .streep,
.kaart--nieuws .streep {
	margin-top: 1.75rem;
}

.kaart--verhaal .kaart__titel,
.kaart--nieuws .kaart__titel {
	margin-top: 0.6875rem;
}

.kaart--verhaal .kaart__link,
.kaart--nieuws .kaart__link {
	text-decoration: none;
}

.kaart--verhaal .kaart__link:hover,
.kaart--nieuws .kaart__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
}

/* Nieuws: zoals een verhaal, met een liggende foto, de datum in de streepregel en een kleinere titel: de titel van
   een bericht is langer dan een citaat. */
.kaart--nieuws .kaart__beeld img {
	aspect-ratio: 3 / 2;
}

.kaart--nieuws .kaart__titel {
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

/* Icoon: donker paneel met een pixelicoon half over de bovenrand, alles in het midden. De rij heeft daarom ruimte
   boven de kaarten. Het icoon is 138 px (23 pixels van 6 px); duim en medaille staan in het ontwerp iets hoger
   en lager dan de rest. */
.kaartenrij--iconen {
	gap: 5.5rem clamp(1rem, 3.7vw, 2.9167rem);
	margin-top: 5.5625rem;
}

@media (min-width: 37.5em) {
	.kaartenrij--iconen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Naast elkaar zodra een kaart ongeveer 250 px breed is; daaronder twee aan twee. */
@media (min-width: 75em) {
	.kaartenrij--iconen {
		grid-template-columns: repeat(var(--kolommen, 4), minmax(0, 1fr));
	}
}

.kaart--icoon {
	align-items: center;
	min-height: 26.25rem;
	padding: 7.25rem 1.25rem 1.625rem;
	border-radius: var(--hoek-2);
	background: var(--kleur-paars-diep);
	text-align: center;
	transition: box-shadow var(--overgang);
}

.kaart__icoon {
	position: absolute;
	top: -3.8125rem;
	left: 50%;
	width: 8.625rem;
	height: 8.625rem;
	margin-left: -4.3125rem;
}

.kaart__icoon--duim {
	top: -4.75rem;
}

.kaart__icoon--badge {
	top: -3.125rem;
}

.kaart--icoon .kaart__link {
	text-decoration: none;
}

.kaart--icoon .kaart__tekst {
	margin: 1.875rem 0 1.125rem;
	line-height: var(--regel-ruim);
	text-wrap: balance;
}

.kaart__pijl {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: auto;
	border-radius: 50%;
	color: var(--accent);
	transition: background-color var(--overgang);
}

/* Hover en focus: een lichte rand met gloed om de kaart en een donker rondje achter de pijl. */
.kaart--icoon:focus-within {
	box-shadow: 0 0 0 1px var(--kleur-paars-licht), var(--gloed);
}

.kaart--icoon:focus-within .kaart__pijl {
	background: var(--kleur-paars-donker);
}

@media (hover: hover) and (pointer: fine) {
	.kaart--icoon:hover {
		box-shadow: 0 0 0 1px var(--kleur-paars-licht), var(--gloed);
	}

	.kaart--icoon:hover .kaart__pijl {
		background: var(--kleur-paars-donker);
	}
}

/* Rij van vier: tegels en productkaarten. Vier naast elkaar vanaf 1200 px, daaronder twee, onder 600 px één. */
.kaartenrij--vier {
	gap: 3.125rem clamp(1rem, 3.7vw, 2.9167rem);
}

@media (min-width: 37.5em) {
	.kaartenrij--vier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75em) {
	.kaartenrij--vier {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Tegels staan ook op een smal scherm twee aan twee, kleiner; productkaarten vanaf 480 px. */
@media (max-width: 37.4375em) {
	.kaartenrij--tegels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ruimte-3);
	}

	.kaartenrij--tegels .kaart--tegel {
		min-height: 9.5rem;
		padding: var(--ruimte-4) var(--ruimte-2) var(--ruimte-2);
	}

	.kaartenrij--tegels .kaart__teken svg {
		width: 2.25rem;
		height: 2.25rem;
	}

	.kaartenrij--tegels .kaart__titel {
		font-size: var(--tekst-m);
	}
}

@media (min-width: 30em) and (max-width: 37.4375em) {
	.kaartenrij--vier:not(.kaartenrij--tegels) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ruimte-5) var(--ruimte-3);
	}
}

/* Tegel: donkere tegel van 200 px hoog met een icoon van 48 px en de titel in het midden eronder. */
.kaart--tegel {
	align-items: center;
	min-height: 12.5rem;
	padding: 1.875rem var(--ruimte-4) var(--ruimte-3);
	border-radius: var(--hoek-2);
	background: var(--kleur-paars-diep);
	color: var(--kleur-wit);
	text-align: center;
	transition: box-shadow var(--overgang);
}

.kaart__teken {
	flex: none;
	color: var(--kleur-paars-licht);
}

.kaart--tegel .kaart__inhoud {
	display: flex;
	flex: 1;
	align-items: center;
}

/* Regels vullen zich van links, zoals in het ontwerp: "Fijne motoriek is / lastig". */
.kaart--tegel .kaart__titel {
	color: inherit;
	text-wrap: wrap;
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

.kaart--tegel .kaart__link,
.kaart--product .kaart__link {
	text-decoration: none;
}

/* Product: witte kaart met een foto van 190 px hoog, een lijn eronder en de titel en tekst in het midden. */
.kaart--product {
	align-items: stretch;
	min-height: 20.625rem;
	overflow: hidden;
	border-radius: var(--hoek-2);
	background: var(--kleur-wit);
	text-align: center;
	transition: box-shadow var(--overgang);
}

/* Een productfoto staat in zijn geheel in het kader, in het midden: vierkante en staande foto's werden anders
   afgesneden. Een foto met de verhouding van het kader vult het helemaal. */
.kaart--product .kaart__beeld img {
	aspect-ratio: 280 / 190;
	object-fit: contain;
	object-position: center;
}

.kaart--product .kaart__inhoud {
	padding: 1.3125rem var(--ruimte-4) var(--ruimte-5);
	border-top: 1px solid var(--kleur-lila-licht);
}

.kaart--product .kaart__titel {
	font-size: var(--kop-4);
	line-height: var(--regel-kop-klein);
}

.kaart--product .kaart__tekst {
	margin-top: var(--ruimte-2);
}

/* Hover en focus: een rand om de kaart, zoals de eerste kaart in het ontwerp. */
.kaart--tegel:focus-within,
.kaart--product:focus-within {
	box-shadow: 0 0 0 2px var(--kleur-paars), 0 0.375rem 1.25rem rgb(71 56 107 / 0.3);
}

@media (hover: hover) and (pointer: fine) {
	.kaart--tegel:hover,
	.kaart--product:hover {
		box-shadow: 0 0 0 2px var(--kleur-paars), 0 0.375rem 1.25rem rgb(71 56 107 / 0.3);
	}

	.kaart--product:hover .kaart__beeld {
		transform: none;
	}
}

/* Video: liggende foto van 380 bij 240 px met ronde hoeken, de titel en een korte tekst eronder.
   De rij is 1260 px breed met 60 px tussen de kaarten. */
.kaartenrij--ruim {
	gap: 4.125rem 3.75rem;
}

.kaart--video .kaart__beeld img {
	aspect-ratio: 380 / 240;
	border-radius: var(--hoek-3);
}

.kaart--video .kaart__inhoud {
	margin-top: 1.25rem;
}

.kaart--video .kaart__titel {
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

.kaart--video .kaart__link {
	text-decoration: none;
}

.kaart--video .kaart__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
}

.kaart--video .kaart__tekst {
	margin-top: 0.625rem;
	line-height: var(--regel-ruim);
}

/* Hoog contrast van Windows: zonder achtergrond is de rand van een kaart niet meer te zien. */
@media (forced-colors: active) {
	.kaart--icoon,
	.kaart--tegel,
	.kaart--product {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}

/* === onderdelen/knop.css === */
/* Knop: geel is de hoofdactie, wit de tweede, omlijnd de derde. Sjabloon: template-parts/onderdelen/knop.php. */
.knop {
	--knop-rand: 2px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 10rem;
	min-height: var(--knop-hoogte);
	padding: var(--ruimte-2) calc(var(--knop-ruimte) - var(--knop-rand)); /* 25 px tot de tekst, met de rand erbij */
	border: var(--knop-rand) solid transparent;
	border-radius: var(--hoek-rond);
	background: var(--knop-vlak, var(--kleur-geel));
	color: var(--knop-tekst, var(--kleur-paars));
	font-size: var(--tekst-m);
	font-weight: var(--dikte-vet);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang), transform var(--druk);
}

/* De hoofdknop in de inhoud is in het ontwerp minstens 215 px breed; de knop in de kop en een tweede knop 160 px. */
.knop--breed {
	min-width: 13.4375rem;
}

/* Indrukken: de knop geeft meteen mee. */
.knop:active {
	transform: scale(0.97);
}

/* De kleuren staan in variabelen: een licht vlak (vlak.css) maakt de hoofdknop paars met witte tekst,
   omdat geel op licht wegvalt. Hover alleen met een muis: op een aanraakscherm blijft hij anders hangen.
   Met het script (.pixelknoppen op <html>) wisselt de kleur blokje voor blokje via de laag hieronder;
   zonder script met deze overgang. */
@media (hover: hover) and (pointer: fine) {
	html:not(.pixelknoppen) .knop:hover {
		background: var(--knop-vlak-over, var(--kleur-wit));
		color: var(--knop-tekst-over, var(--kleur-paars));
	}

	.knop--omlijnd:hover {
		border-color: var(--tekst);
	}
}

/* Pixellaag bij hover (assets/js/ikg.js): de knop in de hoverkleur, met dezelfde tekst op dezelfde plek.
   De laag ligt over de hele knop, ook over de rand, en het script laat hem blokje voor blokje zien. */
.knop__pixels {
	position: absolute;
	inset: calc(-1 * var(--knop-rand));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: inherit;
	border: var(--knop-rand) solid transparent;
	border-radius: inherit;
	background: var(--knop-vlak-over, var(--kleur-wit));
	color: var(--knop-tekst-over, var(--kleur-paars));
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.knop--wit {
	--knop-vlak: var(--kleur-wit);
	--knop-tekst: var(--kleur-paars);
	--knop-vlak-over: var(--kleur-geel);
	--knop-tekst-over: var(--kleur-paars);
}

/* De kleur volgt het vlak: wit op donker, paars op licht. Bij hover keert hij om. */
.knop--omlijnd {
	--knop-vlak: transparent;
	--knop-tekst: var(--tekst);
	--knop-vlak-over: var(--tekst);
	--knop-tekst-over: var(--tekst-omgekeerd);
	border-color: currentColor;
}

/* Rij knoppen. Sjabloon: template-parts/onderdelen/knoppen.php. */
.knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-4) 1.625rem; /* 26: in het ontwerp 25 of 27 */
}

/* === onderdelen/kop.css === */
/* Kop van de pagina: logo links, rechts het hoofdmenu, de knop en de menuknop. Sjabloon: header.php.
   De kop ligt over het eerste vlak heen, zoals in het ontwerp. */
:root {
	--kop-hoogte: 6.25rem; /* 100: ruimte die het eerste vlak vrijhoudt */
}

.kop {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	padding-top: var(--ruimte-5);
}

.kop__binnen {
	display: flex;
	gap: var(--ruimte-5);
	align-items: flex-start;
	justify-content: space-between;
}

.kop__rechts {
	display: flex;
	gap: var(--ruimte-4);
	align-items: center;
	min-height: var(--knop-hoogte);
}

/* Hoofdmenu en knop passen pas op een breder scherm; daaronder staan ze in het uitklapmenu. */
.kop__menu,
.kop__knop {
	display: none;
}

.kop__menu ul {
	display: flex;
	gap: 4.21875rem; /* 67,5 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.kop__menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--klikdoel);
	color: var(--kleur-wit);
	font-weight: var(--dikte-vet);
	text-decoration: none;
	transition: color var(--overgang);
}

.kop__menu a[aria-current="page"] {
	color: var(--kleur-geel);
}

@media (hover: hover) and (pointer: fine) {
	.kop__menu a:hover {
		color: var(--kleur-geel);
	}
}

/* Menuknop: drie gele lijnen in een klikvlak van 44 px. */
.menuknop {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: var(--klikdoel);
	height: var(--klikdoel);
	margin-right: -0.3125rem; /* de lijnen sluiten aan op de rand van de inhoud */
	padding: 0;
	border: 0;
	border-radius: var(--hoek-1);
	background: none;
	color: var(--kleur-geel);
	transition: transform var(--druk);
}

.menuknop:active {
	transform: scale(0.94);
}

.menuknop__lijnen {
	display: grid;
	gap: 0.40625rem;
	width: 2.125rem;
}

.menuknop__lijnen span {
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 0.3s var(--ease-in-uit), opacity 0.15s linear;
}

.menuknop__lijnen span:nth-child(2) {
	transform-origin: right center;
}

/* Kruisje: de bovenste en onderste lijn schuiven naar het midden en draaien, de middelste verdwijnt.
   0.53125rem is de afstand tussen twee lijnen (8,5 px). */
.menuknop.is-kruis .menuknop__lijnen span:nth-child(1) {
	transform: translateY(0.53125rem) rotate(45deg);
}

.menuknop.is-kruis .menuknop__lijnen span:nth-child(2) {
	transform: scaleX(0);
	opacity: 0;
}

.menuknop.is-kruis .menuknop__lijnen span:nth-child(3) {
	transform: translateY(-0.53125rem) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
	/* .is-zweef is dezelfde stand als hover. Het script zet hem op de knop die in beeld komt als de muis op de
	   knop staat die verdwijnt: de knop in het menu bij het openen, de knop in de kop bij het sluiten. Zonder
	   springt het middelste streepje eerst terug naar volle breedte. */
	.menuknop:not(.is-kruis):hover .menuknop__lijnen span:nth-child(2),
	.menuknop.is-zweef:not(.is-kruis) .menuknop__lijnen span:nth-child(2) {
		transform: scaleX(0.6);
	}
}

/* Menu open: de knop in het menu ligt er precies overheen en neemt het over. Onzichtbaar, maar nog wel
   bereikbaar: na het sluiten zet de browser de focus hierop terug. */
.menu-open .kop .menuknop {
	opacity: 0;
}

/* Zonder JavaScript: de knop wordt een link naar de menu's in de footer. */
.js .menuknop--link,
.geen-js button.menuknop {
	display: none;
}

/* Het eerste vlak maakt ruimte voor de kop, ook als er één element omheen staat. */
#inhoud > .vlak:first-child,
#inhoud > :first-child > .vlak:first-child {
	padding-top: calc(var(--kop-hoogte) + var(--ruimte-6));
}

#inhoud:focus {
	outline: none;
}

@media (min-width: 37.5em) {
	.kop__knop {
		display: inline-flex;
	}
}

@media (min-width: 64em) {
	:root {
		--kop-hoogte: 8.125rem; /* 130 */
	}

	.kop {
		padding-top: var(--ruimte-7);
	}

	/* Maten uit het ontwerp: de lijnen van de menuknop tot 33 px van rechts, 33 px tussen knop en lijnen en
	   61 px tussen menu en knop. */

	.kop__rechts {
		gap: 1.75rem;
		margin-right: 2.0625rem;
	}

	.kop__menu {
		display: block;
		margin-right: 2.0625rem;
	}
}

/* Hoog contrast van Windows: de browser haalt achtergrondkleuren weg, en de lijnen van de menuknop zijn
   achtergronden. Een systeemkleur blijft wel staan. */
@media (forced-colors: active) {
	.menuknop__lijnen span {
		background: ButtonText;
	}
}

/* === onderdelen/kruimelpad.css === */
/* Kruimelpad: "Controllers / Adaptive Controllers / XBOX". Sjabloon: template-parts/onderdelen/kruimelpad.php. */
.kruimelpad ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--tekst-s);
	line-height: 1.7;
}

/* Elk item is een rij: zo staat er voor en na de schuine streep evenveel ruimte. */
.kruimelpad li {
	display: flex;
	gap: 0.375rem;
}

.kruimelpad li + li::before {
	content: "/";
	content: "/" / ""; /* voor schermlezers leeg: de lijst zegt al dat het stappen zijn */
}

.kruimelpad a {
	text-decoration: none;
}

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

/* === onderdelen/lightbox.css === */
/* Lightbox: een venster over het hele scherm met één foto in zijn geheel, de knop Sluiten rechtsboven en onderaan
   de teller met de knoppen naar de vorige en de volgende foto. Sjabloon: template-parts/onderdelen/lightbox.php;
   het openen, sluiten en bladeren staat in lightbox() in ikg.js. */
.lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	/* clip in plaats van hidden: Safari scrolt een verborgen vlak anders opzij naar wat de focus krijgt. */
	overflow: clip;
	border: 0;
	background: rgb(38 30 72 / 0.96); /* paars donker, bijna dekkend */
	color: var(--kleur-wit);
}

/* Het venster heeft zijn eigen achtergrond; die van de browser kan niet mee vervagen. */
.lightbox::backdrop {
	background: transparent;
}

/* De pagina erachter staat stil. De strook van de scrollbalk blijft vrij (scrollbar-gutter in basis.css) en krijgt
   de kleur van het venster. */
.lightbox-open {
	overflow: hidden;
	background: var(--kleur-paars-donker);
}

.lightbox__venster {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: var(--ruimte-4);
	height: 100%;
	padding: 5rem var(--ruimte-4) var(--ruimte-5);
}

/* Het podium is de ruimte voor de foto. Het script past de foto erin: nooit groter dan het podium en nooit
   afgesneden. Zolang het script de maat nog niet heeft gezet, houden max-width en max-height hem binnen beeld. */
.lightbox__podium {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 0;
	cursor: zoom-out;
	/* Opzij vegen is bladeren en gaat naar het script; omhoog en omlaag schuiven en met twee vingers vergroten
	   blijven van de browser. */
	touch-action: pan-y pinch-zoom;
}

.lightbox__foto {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--hoek-2);
	background: var(--kleur-wit);
	cursor: default;
}

.lightbox__balk {
	display: flex;
	gap: var(--ruimte-5);
	align-items: center;
	justify-content: center;
	min-height: 3rem;
}

.lightbox__teller {
	min-width: 7.5rem;
	margin: 0;
	font-weight: 500;
	text-align: center;
}

/* Ronde witte knoppen van 48 px: ruim boven het kleinste klikdoel, ook voor oogbesturing. */
.lightbox__knop {
	display: grid;
	flex: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid transparent; /* zichtbaar in het hoge contrast van Windows */
	border-radius: var(--hoek-rond);
	background: var(--kleur-wit);
	color: var(--kleur-paars-donker);
	cursor: pointer;
	transition: transform var(--druk), background-color var(--overgang);
}

.lightbox__knop:active {
	transform: scale(0.97);
}

.lightbox__sluit {
	position: absolute;
	top: var(--ruimte-4);
	right: var(--ruimte-4);
}

.lightbox__vorige .icoon {
	transform: rotate(180deg);
}

/* Geopend met de muis: geen focusrand om de knop Sluiten tot iemand de Tab-toets gebruikt. */
.lightbox--muis .lightbox__sluit:focus-visible {
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.lightbox__knop:hover {
		background: var(--kleur-geel);
	}
}

/* Breed scherm: de knoppen naar de vorige en de volgende foto staan links en rechts naast de foto. */
@media (min-width: 48em) {
	.lightbox__venster {
		padding-inline: 6.5rem;
	}

	.lightbox__vorige,
	.lightbox__volgende {
		position: absolute;
		top: 50%;
		margin-top: -1.5rem;
	}

	.lightbox__vorige {
		left: var(--ruimte-5);
	}

	.lightbox__volgende {
		right: var(--ruimte-5);
	}

	.lightbox__sluit {
		top: var(--ruimte-5);
		right: var(--ruimte-5);
	}
}

/* === onderdelen/lijst.css === */
/* Lijst: een donkere balk met een kop (alleen boven ronde hoeken) en daaronder regels met een vierkant
   opsommingsteken. Sjabloon: template-parts/onderdelen/lijst.php. */
.lijst__kop {
	display: flex;
	align-items: center;
	min-height: 4.625rem;
	padding: 0.3125rem var(--ruimte-7) 0;
	border-radius: var(--hoek-2) var(--hoek-2) 0 0;
	background: var(--kleur-paars-donker);
	color: var(--kleur-wit);
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

.lijst__items {
	margin-top: 1.875rem;
	padding-left: var(--ruimte-7);
}

/* Het teken is een blokje van 4 px, 18 px voor de tekst. */
.lijst__items li {
	position: relative;
	padding-left: 1.125rem;
}

.lijst__items li::before {
	content: "";
	position: absolute;
	top: 1.1875rem;
	left: 0.0625rem;
	width: 0.25rem;
	height: 0.25rem;
	background: var(--kleur-paars-licht);
	transition: background-color var(--overgang);
}

/* Een regel is 40 px hoog; breekt hij af, dan blijft het teken bij de eerste regel staan. */
.lijst__items a,
.lijst__items span {
	display: inline-block;
	padding-block: var(--ruimte-2);
	text-decoration: none;
}

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

/* De huidige pagina: vet, met een geel teken. Met de muis op een regel wordt het teken ook geel. */
.lijst__items [aria-current] {
	font-weight: var(--dikte-vet);
}

.lijst__items li:has([aria-current])::before {
	background: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
	.lijst__items li:has(a:hover)::before {
		background: var(--accent);
	}
}

/* Plat: een gewone kop in plaats van de balk, en regels van 36 px. Zoals op de productpagina. */
.lijst--plat .lijst__kop {
	display: block;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--kop);
}

.lijst--plat .lijst__items {
	margin-top: 0.9375rem;
	padding-left: 0;
}

.lijst--plat .lijst__items a,
.lijst--plat .lijst__items span {
	padding-block: 0.375rem;
}

.lijst--plat .lijst__items li::before {
	top: 1.0625rem;
}

/* === onderdelen/logo.css === */
/* Logo linksboven in de kop en in het uitklapmenu. Sjabloon: template-parts/onderdelen/logo.php.
   De maten komen uit het ontwerp: de smiley op de homepage is 60 px en staat 60 px van links en 35 px van boven;
   het hele logo is 296 px breed en staat 40 px van links en van boven. */
.logo {
	display: block;
	flex: none;
	border-radius: var(--hoek-1);
}

.logo img {
	width: 100%;
}

.logo--smiley {
	width: 3rem;
}

.logo--woord {
	width: clamp(10.5rem, 7.44rem + 13.6vw, 18.5rem); /* 168 tot 296 */
}

@media (min-width: 64em) {
	.logo--smiley {
		width: 3.75rem;
		margin: -0.3125rem 0 0 1.25rem;
	}
}

/* === onderdelen/paginakop.css === */
/* Paginakop: de kop van een pagina zonder hero, met de titel in het midden en eventueel een foto gedimd op de
   achtergrond. Sjabloon: template-parts/onderdelen/paginakop.php.
   De foto ligt onder een paarse waas; onderaan loopt hij weg in de paginakleur.
   De foto is hoogstens 1600 px breed en staat in het midden: op een breder scherm zou hij anders zo ver inzoomen
   dat gezichten buiten beeld vallen. Daar loopt hij links en rechts weg in de achtergrond. */
.paginakop {
	position: relative;
	padding: 8rem 0 var(--ruimte-8);
	overflow: clip;
	background: var(--verloop-schuin);
	text-align: center;
}

.paginakop__beeld {
	position: absolute;
	inset: 0;
	width: min(100%, 100rem);
	margin-inline: auto;
}

/* De bovenkant van de foto blijft in beeld: daar staan meestal de gezichten. */
.paginakop__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
	opacity: 0.2;
}

@media (min-width: 100.0625rem) {
	.paginakop__beeld {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	}
}

.paginakop__beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(71 56 107 / 0) 55%, var(--kleur-paars));
}

.paginakop__binnen {
	position: relative;
}

.paginakop__titel {
	text-wrap: balance;
}

/* Regel in hoofdletters onder de titel: 18 px, 30 px regelafstand. */
.paginakop__ondertitel {
	max-width: 61rem;
	margin: 1.78125rem auto 0;
	padding-left: var(--spatie-bovenkop);
	font-size: var(--tekst-l);
	line-height: 1.6667;
	letter-spacing: var(--spatie-bovenkop);
	text-transform: uppercase;
}

/* De titel begint 244 px van boven, zoals in de hero van een gewone pagina. */
@media (min-width: 64em) {
	.paginakop {
		padding-top: 15.25rem;
	}
}

/* Gewone tekst onder de titel (de inleiding) en een vrij deel eronder, zoals het zoekveld. */
.paginakop__tekst {
	max-width: 69.5rem;
	margin: 1.6875rem auto 0;
}

.paginakop__inhoud {
	margin-top: clamp(2.5rem, 7.4vw, 6.625rem);
}

/* === onderdelen/pijllink.css === */
/* Pijllink: kleine vette link met een pijl erachter. Sjabloon: template-parts/onderdelen/pijllink.php. */
.pijllink {
	display: inline-flex;
	align-items: center;
	gap: var(--ruimte-4);
	min-height: var(--klikdoel);
	color: var(--accent);
	font-size: var(--tekst-m);
	font-weight: var(--dikte-vet);
	line-height: 1.4;
	text-decoration: none;
}

.pijllink .icoon {
	flex: none;
	margin-right: -0.4375rem; /* de pijl zelf eindigt op de rand van de inhoud */
	transition: transform var(--overgang);
}

.pijllink:hover span {
	text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
	.pijllink:hover .icoon {
		transform: translateX(0.375rem);
	}
}

/* === onderdelen/sectiekop.css === */
/* Sectiekop: de titel boven een sectie, met eventueel een bovenkop en rechts een pijllink.
   Sjabloon: template-parts/onderdelen/sectiekop.php. */
.sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte-2) var(--ruimte-6);
	margin-bottom: clamp(2rem, 1.3rem + 3.125vw, 3.4375rem); /* 32 tot 55 */
}

.sectiekop .bovenkop {
	margin-bottom: var(--ruimte-2);
}

/* De link staat iets onder het midden van de titel: zijn regel ligt 9 px boven de basislijn van de titel. */
.sectiekop .pijllink {
	margin-top: 0.375rem;
}

.sectiekop--groot .sectiekop__titel {
	font-size: var(--kop-1);
}

/* === onderdelen/socials.css === */
/* Socials: iconen van de social-kanalen. Sjabloon: template-parts/onderdelen/socials.php. */
.socials {
	display: flex;
	gap: var(--ruimte-1);
	margin: 0 0 0 -0.59375rem; /* het eerste icoon sluit links aan; het klikvlak steekt uit */
	padding: 0;
	list-style: none;
}

.socials a {
	display: grid;
	place-items: center;
	width: var(--klikdoel);
	height: var(--klikdoel);
	border-radius: var(--hoek-1);
	color: var(--kleur-paars-licht);
	transition: color var(--overgang), transform var(--druk);
}

.socials a:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.socials a:hover {
		color: var(--kleur-geel);
	}
}

/* === onderdelen/streep.css === */
/* Streepregel: kleine vette regel met een streepje ervoor, als tekst (naam en leeftijd) of als link (Lees meer).
   Sjabloon: template-parts/onderdelen/streep.php. */
.streep {
	display: inline-flex;
	align-items: center;
	gap: 1.75rem;
	color: var(--accent);
	font-size: var(--tekst-m);
	font-weight: var(--dikte-vet);
	line-height: 1.4;
}

.streep::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 2px;
	background: currentColor;
	transition: width var(--overgang), margin var(--overgang);
}

.streep--link {
	min-height: var(--klikdoel);
	text-decoration: none;
}

.streep--link:hover {
	text-decoration: underline;
}

/* De streep groeit naar de tekst toe; de tekst blijft staan. */
.streep--link:hover::before {
	width: 1.75rem;
	margin-right: -1rem;
}

/* === onderdelen/uitklap.css === */
/* Uitklap: een regel die openklapt (<details>). Sjabloon: template-parts/onderdelen/uitklap.php.
   Het open- en dichtklappen beweegt via assets/js/ikg.js (GSAP); zonder JavaScript klapt hij direct. */
.uitklap {
	border-bottom: 1px solid rgb(143 127 181 / 0.5);
}

.uitklap__kop {
	display: flex;
	gap: var(--ruimte-4);
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
	padding-block: var(--ruimte-3);
	list-style: none;
	cursor: pointer;
}

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

.uitklap__titel {
	margin: 0;
	color: inherit;
	font-family: var(--letter-tekst);
	font-size: var(--kop-4);
	font-weight: var(--dikte-midden);
	line-height: 1.3;
}

.uitklap__pijl {
	flex: none;
	color: var(--accent);
	transition: transform var(--overgang);
}

/* .is-sluitend staat erop zolang hij dichtklapt: de pijl draait dan al terug. */
.uitklap[open]:not(.is-sluitend) > .uitklap__kop .uitklap__pijl {
	transform: rotate(180deg);
}

.uitklap__binnen {
	padding-bottom: var(--ruimte-5);
}

/* Meer contrast (instelling van het systeem): een volle lijn. */
@media (prefers-contrast: more) {
	.uitklap {
		border-bottom-color: var(--kleur-wit);
	}

	.op-licht .uitklap,
	.vlak--licht .uitklap {
		border-bottom-color: var(--kleur-paars-donker);
	}
}

/* === onderdelen/uitklapmenu.css === */
/* Uitklapmenu: vult het hele scherm en komt in beeld met pixelblokjes die van rechts naar links aangaan.
   Sjabloon: template-parts/onderdelen/uitklapmenu.php. De beweging staat in assets/js/ikg.js (GSAP);
   deze opmaak is de eindstand, zodat het menu ook zonder beweging klopt. */
.uitklapmenu {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	/* clip in plaats van hidden: een vlak met hidden kan nog scrollen. Safari scrolt het venster dan opzij naar
	   het element dat de focus krijgt als dat buiten beeld staat, en alles springt bij elk beeldje heen en weer.
	   hidden blijft staan voor oude browsers. */
	overflow: hidden;
	overflow: clip;
	border: 0;
	background: transparent;
	color: var(--kleur-wit);
}

.uitklapmenu::backdrop {
	background: transparent;
}

/* Pixelvlak: een klein canvas met één beeldpunt per blokje, uitgerekt over het scherm. Het script zet de blokjes
   van rechts naar links aan; daarna neemt de achtergrond van het paneel het over. Een blokje is even groot als
   de pixelblokjes linksonder in het paneel en ligt in hetzelfde raster. */
.uitklapmenu__pixels {
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.uitklapmenu--pixels .uitklapmenu__pixels {
	display: block;
}

.uitklapmenu--pixels .uitklapmenu__paneel {
	background: transparent;
}

.uitklapmenu--pixels .uitklapmenu__paneel::after {
	visibility: hidden;
}

/* De menuknop in het menu: ligt precies over de knop in de kop (het script zet top en left) en scrolt niet mee.
   De waarden hier zijn de plek zonder script. */
.uitklapmenu__knop {
	position: absolute;
	top: calc(var(--ruimte-5) + 0.1875rem);
	right: calc(var(--goot) - 0.3125rem);
	z-index: 2;
	margin: 0;
}

/* Geopend met de muis: geen focusrand om de knop tot iemand de Tab-toets gebruikt. */
.uitklapmenu--muis .uitklapmenu__knop:focus-visible {
	outline: none;
}

.uitklapmenu__paneel {
	position: absolute;
	inset: 0;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	background: var(--kleur-paars-donker);
}

/* De inhoud scrolt als hij niet op het scherm past; de pagina erachter staat stil. */
.uitklapmenu__scroll {
	height: 100%;
	overflow: hidden auto;
	overscroll-behavior: contain;
}

/* Pixelblokjes linksonder, zoals op de hoeken van de secties in het ontwerp: één blokje met drie schaduwen.
   Ze scrollen niet mee. De lettergrootte is de maat van een blokje. */
.uitklapmenu__paneel::after {
	content: "";
	position: absolute;
	bottom: 2em;
	left: 1em;
	z-index: -1;
	width: 1em;
	height: 1em;
	background: var(--kleur-paars-diep);
	box-shadow: -1em 1em 0 var(--kleur-paars-diep), 1em 1em 0 var(--kleur-paars-diep), 0 2em 0 var(--kleur-paars-diep);
	font-size: var(--blokje);
}

/* Bovenrand: hetzelfde logo als in de kop, op dezelfde plek. De opbouw is die van .kop en .kop__binnen. */
.uitklapmenu__kop {
	display: flex;
	align-items: flex-start;
	padding-top: var(--ruimte-5);
}

.uitklapmenu__inhoud {
	display: grid;
	gap: var(--ruimte-7);
	padding-block: var(--ruimte-7) var(--ruimte-9);
}

.uitklapmenu__links {
	display: grid;
	gap: var(--ruimte-6);
	align-content: start;
}

/* Hoofdmenu in grote letters. */
.uitklapmenu__hoofd ul {
	display: grid;
	gap: var(--ruimte-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uitklapmenu__hoofd a {
	display: inline-flex;
	align-items: center;
	min-height: var(--klikdoel);
	font-family: var(--letter-kop);
	font-size: var(--kop-1);
	font-weight: var(--dikte-vet);
	line-height: var(--regel-kop);
	text-decoration: none;
	transition: color var(--overgang);
}

.uitklapmenu__voet {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-4) var(--ruimte-5);
	align-items: center;
}

/* De links van het menu staan in twee vaste kolommen. Op een smal scherm staan de kolommen onder elkaar,
   als één lijst met lijnen ertussen. Er is één niveau: links onder een link toont het menu niet. */
.uitklapmenu__kolommen {
	display: grid;
}

.uitklapmenu__kolom {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De lijn boven de lijst hoort bij de eerste kolom, zodat hij samen met die kolom in beeld komt. */
.uitklapmenu__kolom:first-child {
	border-top: 1px solid rgb(143 127 181 / 0.5);
}

.uitklapmenu__kolom li {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	border-bottom: 1px solid rgb(143 127 181 / 0.5);
}

/* Wit, net als het hoofdmenu ernaast; geel bij hover. De pagina waar je bent is onderstreept. */
.uitklapmenu__link {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: var(--klikdoel);
	font-family: var(--letter-kop);
	font-size: var(--kop-3);
	font-weight: var(--dikte-vet);
	line-height: var(--regel-kop-klein);
	text-decoration: none;
	transition: color var(--overgang);
}

.uitklapmenu a[aria-current="page"] {
	color: var(--kleur-wit);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

@media (hover: hover) and (pointer: fine) {
	.uitklapmenu__hoofd a:hover,
	.uitklapmenu__link:hover {
		color: var(--kleur-geel);
	}
}

/* De pagina erachter scrolt niet mee zolang het menu open is. De ruimte van de scrollbalk blijft vrij
   (scrollbar-gutter in basis.css) en krijgt de kleur van het menu. */
.menu-open {
	overflow: hidden;
	background: var(--kleur-paars-donker);
}

/* Breed scherm: hoofdmenu links, de andere links ernaast, groot en zonder lijnen. */
@media (min-width: 64em) {
	.uitklapmenu__kop {
		padding-top: var(--ruimte-7);
	}

	.uitklapmenu__knop {
		top: calc(var(--ruimte-7) + 0.1875rem);
		right: calc(var(--goot) + 1.75rem);
	}

	.uitklapmenu__inhoud {
		grid-template-columns: minmax(0, 16.25rem) minmax(0, 1fr);
		gap: var(--ruimte-9);
		padding-top: var(--ruimte-8);
	}

	.uitklapmenu__links {
		gap: var(--ruimte-7);
	}

	.uitklapmenu__hoofd a {
		font-size: var(--kop-2);
	}

	.uitklapmenu__kolom:first-child {
		border-top: 0;
	}

	.uitklapmenu__kolom li {
		min-height: 3.25rem;
		border-bottom: 0;
	}

	/* 32 px: de langste titel past dan op één regel in een kolom. */
	.uitklapmenu__link {
		flex: 0 1 auto;
		font-size: 2rem;
		line-height: var(--regel-kop);
	}
}

/* Extra breed: de twee kolommen naast elkaar. Smaller staan ze onder elkaar. */
@media (min-width: 90em) {
	.uitklapmenu__kolommen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--ruimte-8);
		align-items: start;
	}
}

/* === onderdelen/velden.css === */
/* Velden: label, invoerveld, uitleg en melding van een formulier. De HTML van een formulier staat in het beheer
   onder Contact (Contact Form 7); zie inc/formulier.php. Het thema laadt de opmaak van de plugin niet: wat de
   plugin zelf nodig heeft om te werken staat onderaan dit bestand.

   Een veld in het formulier:
   <div class="veld">
     <label class="veld__label" for="ikg-naam">Naam</label>
     [text* your-name id:ikg-naam autocomplete:name class:veld__invoer]
   </div>

   Een veld is even hoog als een knop (50 px) en heeft een rand van 2 px. De kleuren volgen het vlak: donker met een
   lila rand op paars, wit met een paarse rand op een licht vlak. De rand haalt op beide minstens 3:1 tegen het
   vlak eromheen: daaraan herken je het veld. */
.formulier {
	display: grid;
	gap: var(--ruimte-5);
}

.formulier .knop {
	justify-self: start;
	margin-top: var(--ruimte-2);
}

.veld {
	display: grid;
	gap: var(--ruimte-2);
}

.veld__label {
	font-weight: var(--dikte-midden);
}

/* Achter het label van een veld dat leeg mag blijven. */
.veld__vrij {
	color: var(--tekst-zacht);
	font-weight: var(--dikte-normaal);
}

.veld__invoer {
	display: block;
	width: 100%;
	min-height: var(--knop-hoogte);
	padding: 0 var(--ruimte-5);
	border: 2px solid var(--veld-rand, var(--kleur-lila));
	border-radius: var(--hoek-rond);
	background: var(--veld-vlak, var(--kleur-paars-diep));
	color: var(--tekst);
	font-size: var(--tekst-l);
	line-height: 1.2;
	caret-color: var(--accent);
	appearance: none;
}

textarea.veld__invoer {
	min-height: 10rem;
	padding-block: var(--ruimte-3);
	border-radius: var(--hoek-3);
	line-height: var(--regel-tekst);
	resize: vertical;
}

.op-licht .veld__invoer,
.vlak--licht .veld__invoer {
	--veld-rand: var(--kleur-paars);
	--veld-vlak: var(--kleur-wit);
}

/* Een veld met een fout: de rand krijgt de kleur van de melding en wordt 1 px dikker. De melding eronder zegt in
   tekst wat er mis is, met een uitroepteken ervoor. */
.veld__invoer[aria-invalid="true"] {
	border-color: var(--fout);
	box-shadow: 0 0 0 1px var(--fout);
}

/* Focus: de eigen rand verkleurt en wordt dikker, zonder tweede rand eromheen. Op licht is het verschil in kleur
   klein (paars naar donkerpaars), dus daar wordt de rand 2 px dikker. De doorzichtige outline is er voor
   Windows met hoog contrast: daar wordt hij zichtbaar. */
.veld__invoer:focus,
.veld__invoer:focus-visible {
	border-color: var(--focus);
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 1px var(--focus);
}

.op-licht .veld__invoer:focus,
.vlak--licht .veld__invoer:focus {
	box-shadow: 0 0 0 2px var(--focus);
}

/* Een veld dat de browser zelf invult houdt de kleuren van de site. */
.veld__invoer:-webkit-autofill {
	box-shadow: 0 0 0 4rem var(--veld-vlak, var(--kleur-paars-diep)) inset;
	-webkit-text-fill-color: var(--tekst);
}

.veld__invoer:-webkit-autofill:focus {
	box-shadow: 0 0 0 4rem var(--veld-vlak, var(--kleur-paars-diep)) inset, 0 0 0 2px var(--focus);
}

.veld__uitleg {
	color: var(--tekst-zacht);
}

/* Veld tegen spam: een bezoeker ziet het niet en een schermlezer slaat het over (aria-hidden in het formulier). */
.veld--val {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* De melding onder een veld. */
.wpcf7-not-valid-tip {
	display: flex;
	gap: var(--ruimte-2);
	align-items: flex-start;
	margin-top: var(--ruimte-2);
	color: var(--fout);
	font-weight: var(--dikte-midden);
}

.wpcf7-not-valid-tip::before {
	content: "!";
	content: "!" / "";
	display: grid;
	flex: none;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border-radius: 50%;
	background: var(--fout);
	color: var(--tekst-omgekeerd);
	font-size: var(--tekst-s);
	font-weight: var(--dikte-vet);
	line-height: 1;
}

/* De melding onder het formulier: verstuurd, of wat er mis ging. */
.wpcf7-response-output {
	padding: var(--ruimte-4) var(--ruimte-5);
	border: 2px solid var(--accent);
	border-radius: var(--hoek-2);
	font-weight: var(--dikte-midden);
}

.wpcf7-response-output:empty,
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--fout);
	color: var(--fout);
}

/* Tijdens het versturen. */
.wpcf7 form.submitting .knop {
	opacity: 0.6;
	cursor: progress;
}

/* Wat Contact Form 7 zelf nodig heeft. De meldingen voor schermlezers staan in een eigen element dat niet te
   zien is; de verborgen velden van de plugin nemen geen ruimte in. */
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* === onderdelen/vlak.css === */
/* Vlak: de achtergrond van een sectie. Op een licht vlak wisselen --tekst, --kop, --accent en --focus,
   zodat onderdelen op elk vlak vanzelf de goede kleur krijgen. .op-licht doet hetzelfde voor een licht paneel. */
.vlak {
	position: relative;
	padding-block: var(--sectie-ruimte);
	background: var(--kleur-paars);
	color: var(--tekst);
}

.vlak--donker {
	--blokjes-kleur: var(--kleur-paars);
	background: var(--kleur-paars-donker);
}

.vlak--verloop {
	background: var(--verloop-schuin);
}

.vlak--verloop-rechts {
	--blokjes-rechts: var(--kleur-paars);
	background: var(--verloop-rechts);
}

.vlak--licht,
.op-licht {
	--tekst: var(--kleur-paars-donker);
	--tekst-omgekeerd: var(--kleur-wit);
	--tekst-zacht: var(--kleur-paars);
	--kop: var(--kleur-paars-diep);
	--accent: var(--kleur-paars);
	--focus: var(--kleur-paars-donker);
	--fout: var(--kleur-rood);
	--knop-vlak: var(--kleur-paars);
	--knop-tekst: var(--kleur-wit);
	--knop-vlak-over: var(--kleur-paars-donker);
	--knop-tekst-over: var(--kleur-wit);
	color: var(--tekst);
}

.vlak--licht {
	--blokjes-kleur: var(--kleur-wit);
	background: var(--kleur-lila-licht);
}

/* === onderdelen/voet.css === */
/* Footer: donker paneel met het logo half over de bovenrand, daaronder de regel met copyright. Sjabloon: footer.php.
   De letter is 12 px, zoals in het ontwerp: de footer mag kleiner blijven dan de lopende tekst. */
.voet {
	padding: var(--ruimte-10) 0 var(--ruimte-4);
	color: var(--kleur-lila);
	font-size: var(--tekst-xs);
}

.voet a {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.voet a:hover {
		color: var(--kleur-wit);
		text-decoration: underline;
	}
}

.voet__paneel {
	position: relative;
	padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
	border-radius: var(--hoek-3);
	background: var(--kleur-paars-donker);
}

/* Het logo steekt 40 procent boven het paneel uit, in het midden. */
.voet__logo {
	display: block;
	width: min(26.25rem, 70%);
	margin: 0 auto;
	transform: translateY(-40%);
	border-radius: var(--hoek-1);
}

.voet__logo img {
	width: 100%;
}

.voet__boven {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--klikdoel);
}

.voet__omhoog {
	display: grid;
	place-items: center;
	width: var(--klikdoel);
	height: var(--klikdoel);
	margin-left: auto;
	border-radius: var(--hoek-1);
	background: var(--kleur-paars-licht);
	color: var(--kleur-wit);
	transition: background-color var(--overgang), color var(--overgang), transform var(--druk);
}

.voet__omhoog:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.voet .voet__omhoog:hover {
		background: var(--kleur-geel);
		color: var(--kleur-paars);
	}
}

/* De groepen met links en daaronder (vanaf 1024 px: ernaast) de contactkolom. */
.voet__kolommen {
	display: grid;
	gap: var(--ruimte-6);
	margin-top: var(--ruimte-6);
}

/* De acht groepen uit de sitemap: twee naast elkaar, vanaf 600 px vier, zodat ze twee rijen vormen. */
.voet__menus {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ruimte-6) var(--ruimte-5);
}

.voet__kop {
	margin-bottom: var(--ruimte-1);
	color: inherit;
	font-family: var(--letter-tekst);
	font-size: inherit;
	font-weight: var(--dikte-vet);
	line-height: 1.5;
}

.voet__kolom ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Een lang woord (Toegankelijkheidsopties) breekt af in een smalle kolom; een kort woord (ouders) niet. */
.voet__kolom {
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 5;
	-webkit-hyphenate-limit-after: 5;
	hyphenate-limit-chars: 12 5 5;
}

/* Elke link is minstens 24 px hoog; op een aanraakscherm 44 px (zie hieronder).
   Een link die in een smalle kolom over twee regels loopt, houdt zijn regels dicht bij elkaar en staat los
   van de link eronder; een link van één regel blijft op dezelfde plek. */
.voet__kolom li > a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	padding-block: 0.1875rem;
	line-height: 1.35;
}

.voet__kolom address {
	padding-block: 0.1875rem;
	font-style: normal;
}

.voet__kolom--contact {
	display: flex;
	flex-direction: column;
}

.voet__kolom .voet__logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-5) var(--ruimte-6);
	align-items: center;
	margin-top: var(--ruimte-6);
}

.voet__logos img {
	width: auto;
	max-width: 5.3125rem;
	height: auto;
	max-height: 2.1875rem;
}

/* Een logo met een eigen breedte (Site-instellingen) houdt die breedte. */
.voet__logos img[style] {
	max-width: none;
	max-height: none;
}

.voet__logos a {
	display: block;
	border-radius: var(--hoek-1);
}

.voet__onder {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2) var(--ruimte-5);
	justify-content: space-between;
	margin-top: var(--ruimte-3);
}

.voet__regel {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.28em; /* de breedte van een spatie */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Elke regel even hoog, zodat het copyright en de links op één lijn staan. */
.voet__regel li {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
}

/* Het puntje staat achter een onderdeel, zodat een nieuwe regel er nooit mee begint. */
.voet__regel li:not(:last-child)::after {
	content: "·";
	content: "·" / ""; /* voor schermlezers leeg */
	margin-left: 0.28em;
}

.voet__regel a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
}

/* Rechts onderaan: "Gemaakt met (hart) door QUEM". Even hoog als de regel links, zodat beide op één lijn staan. */
.voet__maker {
	display: inline-flex;
	gap: 0.3em;
	align-items: center;
	min-height: 1.5rem;
}

.voet__maker a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
}

/* Het hart van QUEM, geel en kloppend zoals op hun andere sites: twee slagen per seconde, dan rust. */
.voet__hart {
	flex: none;
	width: 1.5em;
	height: auto;
	margin-inline: 0.15em; /* lucht voor de slag: het hart wordt 15 procent groter */
	fill: var(--kleur-geel);
}

@keyframes voet-hartslag {
	0%,
	40%,
	100% {
		transform: scale(1);
	}

	20%,
	60%,
	80% {
		transform: scale(1.15);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.voet__hart {
		animation: voet-hartslag 1s ease infinite;
	}
}

@media (pointer: coarse) {
	.voet__kolom li > a,
	.voet__regel a,
	.voet__maker a {
		min-height: var(--klikdoel);
	}
}

@media (min-width: 37.5em) {
	.voet__menus {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.voet__paneel {
		padding-inline: var(--ruimte-7);
	}
}

/* Vanaf hier de maten uit het ontwerp: vier kolommen van 210 px en de contactkolom ernaast.
   Het ontwerp heeft één rij van vier groepen; de sitemap heeft er acht, dus hier staan twee rijen. */
@media (min-width: 64em) {
	.voet__paneel {
		padding: 0 1.875rem 2.8125rem 3.125rem;
		border-radius: var(--hoek-4);
	}

	/* De rij met socials staat naast het logo, niet eronder: het logo neemt hier geen hoogte in.
	   Het logo staat in het midden van de pagina (het paneel heeft links 20 px meer ruimte dan rechts)
	   en steekt 50 px boven het paneel uit. */
	.voet__logo {
		position: relative;
		left: -0.625rem;
		z-index: 1;
		transform: translateY(-33%);
		aspect-ratio: 420 / 151;
		margin-bottom: -9.4375rem;
	}

	.voet__boven {
		padding-top: 2.375rem;
	}

	.voet__kolommen {
		/* Links de groepen (vier kolommen van 210 px), rechts de contactkolom. Die houdt ruimte voor de logo's;
		   op een smaller scherm krimpen de groepen. */
		grid-template-columns: minmax(0, 52.5rem) minmax(17.5rem, 1fr);
		gap: 0;
		margin-top: 2.875rem;
	}

	.voet__menus {
		gap: var(--ruimte-6) 0;
	}

	/* Ruimte tussen de groepen, voor als ze op een smaller scherm krimpen. */
	.voet__kolom {
		padding-right: var(--ruimte-4);
	}

	/* De contactkolom blijft rechts staan, ook als er geen groepen zijn. */
	.voet__kolom--contact {
		grid-column: 2;
		padding-right: 0;
		padding-left: 3.125rem;
	}

	.voet__kolom .voet__logos {
		gap: var(--ruimte-5) 1.875rem;
		align-items: flex-end;
		margin-top: auto;
		padding-top: var(--ruimte-5);
	}

	.voet__onder {
		margin-top: var(--ruimte-2);
	}
}

/* === onderdelen/zoekresultaat.css === */
/* Zoekresultaat: één regel op de resultatenpagina, met de soort, de titel als link, het begin van de tekst en
   rechts een pijl. De hele regel is klikbaar via de link. Sjabloon: template-parts/onderdelen/zoekresultaat.php. */
.zoekresultaat {
	display: flex;
	position: relative;
	gap: var(--ruimte-5);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--ruimte-5);
	border-bottom: 1px solid rgb(143 127 181 / 0.5);
}

.zoekresultaat__inhoud {
	min-width: 0;
}

.zoekresultaat__soort {
	color: var(--tekst-zacht);
	font-size: var(--tekst-m);
	line-height: 1.3;
	letter-spacing: var(--spatie-bovenkop);
	text-transform: uppercase;
}

.zoekresultaat__titel {
	margin-top: var(--ruimte-2);
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

.zoekresultaat__link {
	text-decoration: none;
}

.zoekresultaat__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.zoekresultaat__tekst {
	margin-top: var(--ruimte-2);
}

.zoekresultaat__pijl {
	flex: none;
	color: var(--accent);
	transition: transform var(--overgang);
}

.zoekresultaat:focus-within .zoekresultaat__link {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
}

@media (hover: hover) and (pointer: fine) {
	.zoekresultaat:hover .zoekresultaat__link {
		text-decoration: underline;
		text-decoration-thickness: 0.06em;
	}

	.zoekresultaat:hover .zoekresultaat__pijl {
		transform: translateX(0.375rem);
	}
}

/* Smal scherm: zonder pijl, zodat de tekst de hele breedte heeft. */
@media (max-width: 37.4375em) {
	.zoekresultaat__pijl {
		display: none;
	}
}

/* Meer contrast (instelling van het systeem): een volle lijn. */
@media (prefers-contrast: more) {
	.zoekresultaat {
		border-bottom-color: var(--kleur-wit);
	}
}

/* === onderdelen/zoekveld.css === */
/* Zoekveld: een groot rond veld met rechts het vergrootglas. Sjabloon: template-parts/onderdelen/zoekveld.php.
   De tekst in het lege veld is een label dat over het veld ligt en verdwijnt zodra er iets getypt is.
   Smal scherm: het veld is donker met een lichte rand, omdat witte tekst van 18 px op paars licht te weinig
   contrast heeft (3,6:1). Vanaf 768 px is het paars licht met letter 25 px, 800 bij 80 px. Het ontwerp is 840 bij 90 px met de tekst
   96 px van links; op verzoek van Jesse is het veld iets kleiner en begint de tekst eerder (56 px). De letter
   blijft 25 px: wit op paars licht is 3,6:1 en haalt AA alleen als grote tekst (vanaf 24 px). */
.zoekveld {
	position: relative;
	max-width: 50rem;
	margin-inline: auto;
	text-align: left;
}

.zoekveld__invoer,
.zoekveld__label {
	padding: 0 4.5rem 0 var(--ruimte-5);
	font-size: var(--tekst-l);
	line-height: 4rem;
}

.zoekveld__invoer {
	width: 100%;
	height: 4rem;
	border: 2px solid var(--kleur-paars-licht);
	border-radius: var(--hoek-rond);
	background: var(--kleur-paars-diep);
	color: var(--kleur-wit);
	appearance: none;
}

/* Focus: één gele rand, zonder ruimte tussen veld en rand. Smal ligt hij over de eigen rand en is hij 1 px dikker;
   breed, waar het veld geen rand heeft, sluit hij aan op de buitenkant. */
.zoekveld__invoer:focus-visible {
	border-color: var(--focus);
	outline-offset: -2px;
}

.zoekveld__invoer::-webkit-search-cancel-button {
	display: none;
}

.zoekveld__label {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: opacity var(--overgang);
}

.zoekveld__invoer:not(:placeholder-shown) + .zoekveld__label {
	opacity: 0;
}

.zoekveld__knop {
	display: grid;
	position: absolute;
	top: 50%;
	right: var(--ruimte-3);
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--kleur-wit);
	transition: transform var(--druk);
}

.zoekveld__knop:active {
	transform: scale(0.94);
}

@media (min-width: 48em) {
	.zoekveld__invoer,
	.zoekveld__label {
		padding: 0 5rem 0 3.5rem;
		font-size: 1.5625rem;
		line-height: 5rem;
	}

	.zoekveld__invoer {
		height: 5rem;
		border: 0;
		background: var(--kleur-paars-licht);
	}

	.zoekveld__invoer:focus-visible {
		outline-offset: 0;
	}

	.zoekveld__knop {
		right: 1.375rem;
		color: var(--kleur-paars-diep);
	}
}

/* Lijst onder het veld met de eerste resultaten tijdens het typen (zoeken() in assets/js/ikg.js): een wit paneel
   met per regel de titel en de soort, en onderaan de link naar alle resultaten. Het script toont de lijst als
   popover, boven alles op de pagina en los van vlakken die hun inhoud afsnijden; het zet dan zelf de plek en de
   breedte. Zonder popover staat de lijst onder het veld. De lijst opent en sluit zonder beweging: hij volgt het
   typen. */
.zoekveld__lijst {
	position: absolute;
	top: calc(100% + var(--ruimte-2));
	right: 0;
	left: 0;
	z-index: 20;
	margin: 0;
	padding: var(--ruimte-3);
	overflow: visible;
	border: 0;
	border-radius: var(--hoek-3);
	background: var(--kleur-wit);
	box-shadow: 0 1rem 2.5rem rgb(38 30 72 / 0.35);
	font-size: var(--tekst-l);
	line-height: 1.3;
	text-align: left;
}

.zoekveld__lijst[popover] {
	right: auto;
	bottom: auto;
}

.zoekveld__resultaat,
.zoekveld__alles {
	display: flex;
	gap: var(--ruimte-1) var(--ruimte-4);
	align-items: center;
	justify-content: space-between;
	min-height: 3rem;
	padding: var(--ruimte-2) var(--ruimte-4);
	border-radius: var(--hoek-2);
	text-decoration: none;
	transition: background-color var(--overgang);
}

.zoekveld__titel {
	font-weight: var(--dikte-midden);
}

.zoekveld__soort {
	flex: none;
	color: var(--tekst-zacht);
	font-size: var(--tekst-m);
}

.zoekveld__alles {
	margin-top: var(--ruimte-2);
	color: var(--accent);
	font-size: var(--tekst-m);
	font-weight: var(--dikte-vet);
}

/* De lijn boven de link naar alle resultaten staat los van de link, zodat de ronde hoeken van de link blijven. */
.zoekveld__resultaten + .zoekveld__alles {
	position: relative;
	margin-top: 1.0625rem;
}

.zoekveld__resultaten + .zoekveld__alles::before {
	content: "";
	position: absolute;
	top: -0.5625rem;
	right: var(--ruimte-4);
	left: var(--ruimte-4);
	height: 1px;
	background: var(--kleur-lila);
}

.zoekveld__alles .icoon {
	flex: none;
	transition: transform var(--overgang);
}

.zoekveld__leeg {
	padding: var(--ruimte-3) var(--ruimte-4);
}

.zoekveld__resultaat:focus-visible,
.zoekveld__alles:focus-visible {
	background: var(--kleur-lila-licht);
	outline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
	.zoekveld__resultaat:hover,
	.zoekveld__alles:hover {
		background: var(--kleur-lila-licht);
	}

	.zoekveld__alles:hover .icoon {
		transform: translateX(0.25rem);
	}
}

/* Breed scherm: de tekst in de lijst begint recht onder de tekst in het veld (56 px van links). */
@media (min-width: 48em) {
	.zoekveld__resultaat,
	.zoekveld__alles,
	.zoekveld__leeg {
		padding-left: 2.75rem;
	}

	.zoekveld__resultaten + .zoekveld__alles::before {
		left: 2.75rem;
	}
}

/* Smal scherm: de soort staat onder de titel. */
@media (max-width: 37.4375em) {
	.zoekveld__resultaat {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
}

/* Hoog contrast van Windows: het brede veld heeft geen rand en zou wegvallen. */
@media (forced-colors: active) {
	.zoekveld__invoer {
		border: 2px solid FieldText;
	}

	.zoekveld__lijst {
		border: 2px solid CanvasText;
	}
}

/* Meer contrast (instelling van het systeem): ook breed het donkere veld met een lichte rand. */
@media (prefers-contrast: more) {
	.zoekveld__invoer {
		border: 2px solid var(--kleur-wit);
		background: var(--kleur-paars-donker);
	}

	.zoekveld__knop {
		color: var(--kleur-wit);
	}
}

/* === blokken/blok.css === */
/* Blok: een sectie van een pagina (inc/blokken.php). Een beeld mag boven en onder een blok uitsteken, maar niet
   opzij: dan zou de pagina zijwaarts scrollen. */
.blok {
	overflow-x: clip;
	/* Een link naar een blok (de pijl in de hero) zet het blok precies bovenaan het scherm; html houdt voor
	   andere ankers ruimte vrij (scroll-padding-top in basis.css). */
	scroll-margin-top: calc(-1 * var(--ruimte-6));
}

/* Schermhoog (veld Hoogte van een blok): in het ontwerp is elke sectie van een landingspagina één scherm hoog.
   Het blok is minstens zo hoog als het scherm, met de inhoud in het midden; de blokjes blijven onderaan.
   Hoger dan 960 px wordt het niet, anders staat er op een hoog scherm vooral lege ruimte. Is de inhoud hoger dan
   het scherm (smal scherm), dan verandert er niets. De hero regelt zijn eigen hoogte, zonder grens. */
.blok--schermhoog {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(100vh, 60rem);
	min-height: min(100svh - var(--wp-admin--admin-bar--height, 0px), 60rem);
}

/* Paneel: een blok op een licht paneel met ronde hoeken, zo breed als de kop en de footer (1360 px), met de inhoud
   1260 px breed. Twee blokken op een paneel onder elkaar vormen samen één paneel. */
.blok--paneel {
	position: relative;
}

.paneel {
	padding: 2.6875rem var(--ruimte-5) 3.1875rem;
	border-radius: var(--hoek-3);
	background: var(--kleur-lila-licht);
	color: var(--tekst);
}

.blok--paneel + .blok--paneel .paneel {
	padding-top: 1.375rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.blok--paneel:has(+ .blok--paneel) .paneel {
	padding-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* De titel van een paneel met rechts een knop of keuzeknoppen. */
.paneel__kop {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-4) var(--ruimte-6);
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.5625rem;
}

.paneel__kop .knop {
	margin-top: 0.125rem;
}

@media (min-width: 64em) {
	.paneel {
		padding-inline: 3.125rem;
		border-radius: var(--hoek-4);
	}
}

/* === blokken/faq.css === */
/* Blok Vragen per onderwerp (FAQ): onderwerpen onder elkaar, elk met een kop en vragen die openklappen.
   Sjabloon: template-parts/blokken/faq.php. De vraag zelf is het onderdeel uitklap.
   Als eerste blok staat er een paginakop boven: het eerste onderwerp staat 32 px onder de rand van de paginakop,
   zoals het kruimelpad op de pagina van een uitdaging. */
.blok-faq__vlak {
	padding-top: var(--ruimte-6);
}

.blok-faq__inleiding {
	margin-bottom: var(--ruimte-7);
	text-align: center;
}

.blok-faq__inleiding .inleiding {
	max-width: 46rem;
	margin: var(--ruimte-4) auto 0;
}

.blok-faq__onderwerp + .blok-faq__onderwerp {
	margin-top: var(--ruimte-8);
}

.blok-faq__kop {
	margin-bottom: var(--ruimte-2);
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

/* Een regel is 57 px hoog met een lijn eronder, zoals in het blok Veelgestelde vragen. */
.blok-faq .uitklap__kop {
	min-height: 3.5625rem;
}

.blok-faq .uitklap__titel {
	font-weight: var(--dikte-normaal);
}

/* Een antwoord is hoogstens 840 px breed: langere regels lezen moeilijk. */
.blok-faq .uitklap__binnen {
	max-width: var(--breedte-tekst);
}

.blok-faq__voet {
	margin-top: var(--ruimte-7);
	text-align: center;
}

/* === blokken/formulier.css === */
/* Blok Formulier: een formulier op een licht paneel, met eventueel de contactgegevens ernaast.
   Sjabloon: template-parts/blokken/formulier.php. De velden staan in onderdelen/velden.css, het paneel in blok.css.
   Als eerste blok staat er een paginakop boven; het paneel sluit daarop aan. */
.blok-formulier__vlak {
	padding-top: 0;
}

.blok-formulier__inleiding {
	margin-bottom: var(--ruimte-7);
}

.blok-formulier__inleiding .inleiding {
	max-width: 46rem;
	margin-top: var(--ruimte-4);
}

/* Zonder contactgegevens staat het paneel smal in het midden; de titel staat er dan midden boven. */
.blok-formulier--smal .blok-formulier__inleiding {
	text-align: center;
}

.blok-formulier--smal .blok-formulier__inleiding .inleiding {
	margin-inline: auto;
}

/* Smal: gegevens boven het formulier. Vanaf 1024 px naast elkaar, het formulier het breedst. */
.blok-formulier__paneel {
	display: grid;
	gap: var(--ruimte-7) var(--kolom-ruimte);
}

/* Zonder contactgegevens: een smal paneel in het midden. */
.blok-formulier__paneel--alleen {
	max-width: 45rem;
	margin-inline: auto;
}

.blok-formulier__kop {
	margin-bottom: var(--ruimte-5);
	font-size: var(--kop-3);
	line-height: var(--regel-kop-klein);
}

.blok-formulier__lijst {
	display: grid;
	gap: var(--ruimte-4);
	margin: 0;
}

.blok-formulier__lijst dt {
	font-weight: var(--dikte-vet);
}

.blok-formulier__lijst dd {
	margin: 0;
}

.blok-formulier__lijst address {
	font-style: normal;
}

/* Een link is 44 px hoog; een lang e-mailadres breekt af in plaats van buiten het paneel te steken. */
.blok-formulier__lijst a {
	display: inline-flex;
	align-items: center;
	min-height: var(--klikdoel);
	overflow-wrap: anywhere;
}

@media (min-width: 64em) {
	.blok-formulier__paneel {
		padding-block: 3.5rem;
	}

	.blok-formulier__paneel:not(.blok-formulier__paneel--alleen) {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}
}

/* === blokken/hero.css === */
/* Blok Hero: de opening van een pagina. Sjabloon: template-parts/blokken/hero.php.
   Twee soorten: pagina (titel, tekst en knoppen links, foto rechts) en home (het grote logo, een donker paneel
   met titel, tekst en knoppen, en een foto).

   De hero is minstens zo hoog als het scherm (zonder de beheerbalk van WordPress); is er hoogte over, dan staat de
   inhoud in het midden. De pijl en de blokjes blijven onderaan. De hero regelt zelf de ruimte onder de kop
   (kop.css geeft die anders aan het eerste vlak). */
.blok-hero,
#inhoud > .blok-hero:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding-block: 0;
}

.blok-hero__binnen {
	padding-block: 6.5rem var(--ruimte-10);
}

.blok-hero__beeld {
	position: relative;
	z-index: 2;
}

.blok-hero__paneel {
	position: relative;
}

.blok-hero__tekst {
	position: relative;
	z-index: 3;
}

/* Regels van de titel vullen zich van links, zoals in het ontwerp, in plaats van in gelijke lengtes. */
.blok-hero__titel {
	text-wrap: wrap;
}

.blok-hero__omlaag {
	display: grid;
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	place-items: center;
	width: var(--klikdoel);
	height: var(--klikdoel);
	margin-left: calc(var(--klikdoel) / -2);
	border-radius: var(--hoek-rond);
	color: var(--accent);
	transition: transform var(--overgang);
}

@media (hover: hover) and (pointer: fine) {
	.blok-hero__omlaag:hover {
		transform: translateY(0.25rem);
	}
}

/* Vanaf 1024 px staat de indeling van het ontwerp (1160 px breed) er, in delen van de breedte van de inhoud (cqw).
   Zo blijven tekst, paneel en foto op elk scherm in dezelfde verhouding tot elkaar staan. De foto is 650 px breed,
   steekt 50 px rechts buiten de inhoud en blijft op een smaller scherm 20 px van de rand van het scherm. */
@media (min-width: 64em) {
	.blok-hero__binnen {
		position: relative;
		padding-block: 0;
		container-type: inline-size;
	}

	.blok-hero__beeld {
		position: absolute;
		left: 48.28cqw;
		width: min(56.03cqw, 51.72cqw + (100vw - 100cqw) / 2 - 1.25rem);
	}
}

/* Pagina: titel, tekst en knoppen links en de foto rechts. Smal scherm: de foto staat onder de knoppen. */
.blok-hero--pagina .blok-hero__binnen {
	padding-top: 8rem;
}

.blok-hero--pagina .blok-hero__titel {
	margin-bottom: 1.34375rem;
}

.blok-hero--pagina .blok-hero__knoppen {
	margin-top: var(--ruimte-7);
}

.blok-hero--pagina .blok-hero__beeld {
	margin-top: var(--ruimte-7);
}

.blok-hero--pagina .blok-hero__beeld img {
	aspect-ratio: 650 / 500;
}

@media (min-width: 64em) {
	.blok-hero--pagina .blok-hero__binnen {
		padding-top: 0;
	}

	/* De titel begint 244 px van boven; het geheel is 760 px hoog, met 110 px onder de knoppen. */
	.blok-hero--pagina .blok-hero__paneel {
		width: 45cqw;
		min-height: 65.52cqw;
		padding: max(11.5rem, 21.14cqw) 0 9.48cqw;
	}

	.blok-hero--pagina .blok-hero__knoppen {
		margin-top: 4.65625rem;
	}

	/* 650 bij 500 px, 150 px van boven. */
	.blok-hero--pagina .blok-hero__beeld {
		top: max(7.5rem, 12.93cqw);
		margin-top: 0;
	}
}

/* Home. Smal scherm: logo, foto en paneel onder elkaar, licht over elkaar heen. */
.blok-hero__logo {
	position: relative;
	z-index: 3;
	width: min(100%, 26rem);
	margin-bottom: -1rem;
}

.blok-hero__logo img {
	width: 100%;
}

.blok-hero--home .blok-hero__beeld img {
	aspect-ratio: 650 / 454;
}

/* Het paneel zelf heeft geen achtergrond: het vlak ligt eronder, de tekst erboven en de foto ertussen. */
.blok-hero--home .blok-hero__paneel {
	margin-top: -3rem;
	padding: 5rem var(--ruimte-5) var(--ruimte-6);
}

.blok-hero__vlak {
	position: absolute;
	inset: 0;
	border-radius: var(--hoek-4);
	background: var(--kleur-paars-donker);
	box-shadow: var(--gloed);
}

/* De titel blijft links van de foto: 482 px in het ontwerp. */
.blok-hero--home .blok-hero__titel {
	max-width: 30rem;
	margin-bottom: 0.65625rem;
	font-size: var(--kop-2);
}

.blok-hero--home .blok-hero__knoppen {
	margin-top: 2rem;
}

@media (min-width: 64em) {
	/* 626 px breed, 117 px van boven, 27 px links buiten de inhoud en 72 px over het paneel. */
	.blok-hero__logo {
		width: 53.97cqw;
		margin: max(6.75rem, 10.09cqw) 0 -6.2cqw -2.33cqw;
	}

	/* 650 bij 454 px, 33 px onder de bovenkant van het logo. */
	.blok-hero--home .blok-hero__beeld {
		top: calc(max(6.75rem, 10.09cqw) + 2.84cqw);
	}

	/* De tekst loopt rechts een stukje over de foto: daar ligt een donkere waas over de foto. */
	.blok-hero--home .blok-hero__beeld .beeld::after {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 36% 46% at 0% 78%, rgb(38 30 72 / 0.85), rgb(38 30 72 / 0));
	}

	/* 790 bij 400 px. */
	.blok-hero--home .blok-hero__paneel {
		width: 68.1cqw;
		min-height: 34.48cqw;
		margin: 0 0 5.625rem;
		padding: 8.95cqw 5.69cqw 4.31cqw 6.72cqw;
	}

	.blok-hero__vlak {
		border-radius: var(--hoek-5);
	}
}

/* === blokken/kaarten.css === */
/* Blok Kaartenrij: kaarten naast elkaar. Sjabloon: template-parts/blokken/kaarten.php.
   De rij en de kaart zelf staan in onderdelen/kaart.css. */
.blok-kaarten {
	padding-bottom: calc(var(--sectie-ruimte) + 1.25rem);
}

/* === blokken/keuzes.css === */
/* Blok Keuzekaarten: een kleine regel in het midden met daaronder kaarten met een pixelicoon.
   Sjabloon: template-parts/blokken/keuzes.php. De rij en de kaart staan in onderdelen/kaart.css. */
.blok-keuzes {
	padding-top: calc(var(--sectie-ruimte) - 0.1875rem);
	padding-bottom: 8.75rem;
}

/* De ruimte achter de laatste letter telt mee in de breedte; links evenveel houdt de regel in het midden. */
.blok-keuzes .bovenkop {
	padding-left: var(--spatie-bovenkop);
	text-align: center;
}

/* === blokken/lijsten.css === */
/* Blok Lijsten: een titel met daaronder lijsten, twee aan twee. Sjabloon: template-parts/blokken/lijsten.php.
   De lijst zelf staat in onderdelen/lijst.css. Twee blokken Lijsten onder elkaar horen bij elkaar: ertussen staat
   minder ruimte. */
.blok-lijsten:has(+ .blok-lijsten) {
	padding-bottom: var(--ruimte-7);
}

.blok-lijsten:last-child {
	padding-bottom: 6.6875rem;
}

/* De ruimte achter de laatste letter telt mee in de breedte; links evenveel houdt de regel in het midden. */
.blok-lijsten .bovenkop {
	margin: -0.0625rem 0 3.1875rem;
	padding-left: var(--spatie-bovenkop);
	text-align: center;
}

.blok-lijsten__titel {
	margin-bottom: var(--ruimte-7);
}

.blok-lijsten__rij {
	display: grid;
	gap: var(--ruimte-8) var(--ruimte-7);
}

@media (min-width: 48em) {
	.blok-lijsten__rij {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 6.6875rem;
	}
}

/* === blokken/nieuws.css === */
/* Blok Nieuws: sectiekop met drie nieuwsberichten als kaart. Sjabloon: template-parts/blokken/nieuws.php.
   Dezelfde ruimte als het blok Verhalen. De rij en de kaart zelf staan in onderdelen/kaart.css. */
.blok-nieuws {
	padding-top: calc(var(--sectie-ruimte) + 0.25rem);
	padding-bottom: 4.625rem;
}

/* === blokken/oplossingen.css === */
/* Blok Kaarten met keuzeknoppen. Sjabloon: template-parts/blokken/oplossingen.php. De kaarten staan in
   onderdelen/kaart.css, het paneel in blok.css. Het script (tabbladen in ikg.js) zet is-tabs op het blok en toont
   één groep tegelijk; zonder script staan de groepen onder elkaar met hun naam erboven. */
.tabs__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-3) 1.25rem;
}

.tabs__paneel + .tabs__paneel {
	margin-top: var(--ruimte-8);
}

.tabs__naam {
	margin-bottom: var(--ruimte-5);
}

/* Met het script staat de naam van de groep al op de knop. De kop blijft er voor schermlezers: zo staat er
   een kop tussen de titel van het blok en de kaarten. Dezelfde opmaak als .screen-reader-text. */
.is-tabs .tabs__naam {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.is-tabs .tabs__paneel + .tabs__paneel {
	margin-top: 0;
}

/* Na een paneel met tegels: 73 px tot de titel. */
.blok--paneel + .blok-oplossingen .paneel {
	padding-top: 4.5625rem;
}

/* Hoog contrast van Windows: de gekozen knop is alleen aan zijn vlak te herkennen, en dat vlak valt weg. */
@media (forced-colors: active) {
	.tabs__knoppen [aria-pressed="true"] {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none; /* anders legt de browser een vlak in de paginakleur achter de tekst */
	}
}

/* === blokken/oproep.css === */
/* Blok Oproep: bovenkop, titel en knop, met rechts een beeld dat boven en onder het blok uitsteekt.
   Sjabloon: template-parts/blokken/oproep.php.
   Het beeld loopt door onder het volgende blok of het paneel van de footer; die liggen eroverheen. */
.blok-oproep__binnen {
	position: relative;
}

.blok-oproep__tekst {
	position: relative;
	z-index: 1;
}

.blok-oproep .bovenkop {
	margin-bottom: var(--ruimte-2);
}

/* Regels vullen zich van links, zoals in het ontwerp: "Word lid van onze Community en ontvang / een toffe hoodie". */
.blok-oproep__titel {
	text-wrap: wrap;
}

.blok-oproep__knop {
	margin-top: 2.25rem;
}

/* Smal scherm: het beeld staat rechts onder de knop. Alleen de bovenkant telt mee in de hoogte van het blok. */
.blok-oproep--beeld {
	padding-bottom: 0;
}

.blok-oproep__beeld {
	width: min(16rem, 64%);
	height: 8rem;
	margin: var(--ruimte-5) 0 0 auto;
}

@media (min-width: 64em) {
	.blok-oproep--beeld {
		padding-bottom: var(--sectie-ruimte);
	}

	/* Als laatste blok: de ruimte boven de footer is al de ruimte onder dit blok. */
	.blok-oproep:last-child {
		padding-bottom: var(--ruimte-3);
	}

	.blok-oproep--beeld .blok-oproep__tekst {
		max-width: 62%;
	}

	/* 499 px breed, 76 px rechts buiten de inhoud en 44 px boven het blok uit. */
	.blok-oproep__beeld {
		position: absolute;
		top: calc(-1 * var(--sectie-ruimte) - 2.75rem);
		left: 63.5%;
		width: 43%;
		height: auto;
		margin: 0;
	}
}

/* Klein beeld (de tekstballon): staat binnen het blok, rechts tegen de rand van de inhoud.
   Smal scherm: onder de knop, helemaal in beeld. */
.blok-oproep--klein {
	padding-bottom: var(--ruimte-5);
}

.blok-oproep--klein .blok-oproep__beeld {
	width: min(14rem, 60%);
	height: auto;
	margin: var(--ruimte-6) 0 0 auto;
}

@media (min-width: 64em) {
	/* 320 px breed; de bovenkant 31 px boven de bovenkop. */
	.blok-oproep--klein .blok-oproep__beeld {
		top: -1.9375rem;
		right: 0;
		left: auto;
		width: 27.59%;
		margin: 0;
	}
}

/* === blokken/tekst-beeld.css === */
/* Blok Tekst met afbeelding: een foto naast een bovenkop, titel, tekst en knop.
   Sjabloon: template-parts/blokken/tekst-beeld.php. Smal scherm: de foto staat boven de tekst. */
.blok-tekstbeeld__binnen {
	display: grid;
	gap: var(--ruimte-7);
}

.blok-tekstbeeld__beeld img {
	aspect-ratio: 650 / 500;
}

.blok-tekstbeeld__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.blok-tekstbeeld .bovenkop {
	margin-bottom: 1.3125rem;
}

/* Regels van de titel vullen zich van links, zoals in het ontwerp. */
.blok-tekstbeeld__titel {
	margin-bottom: 1.34375rem;
	font-size: var(--kop-1);
	text-wrap: wrap;
}

/* De tekst is in het ontwerp hoogstens 460 px breed. Onder de tekst blijft ruimte tot de knop, ook als de tekst
   hoger is dan de foto. */
.blok-tekstbeeld__tekst p {
	max-width: 28.75rem;
	margin-bottom: var(--ruimte-6);
}

.blok-tekstbeeld__knop {
	margin-top: var(--ruimte-2);
}

/* Breed scherm: de indeling van het ontwerp, in delen van de breedte van de inhoud (cqw). De foto is 650 px breed
   en steekt 50 px buiten de inhoud (op een smaller scherm minder: hij blijft 20 px van de rand van het scherm).
   De tekst begint 60 px naast de foto en is even hoog; de knop staat gelijk met de onderkant van de foto. */
@media (min-width: 64em) {
	.blok-tekstbeeld__binnen {
		display: flex;
		gap: 0;
		container-type: inline-size;
	}

	.blok-tekstbeeld__beeld {
		--uit: min(4.31cqw, (100vw - 100cqw) / 2 - 1.25rem);
		flex: none;
		width: calc(51.72cqw + var(--uit));
		margin-left: calc(-1 * var(--uit));
	}

	.blok-tekstbeeld__tekst {
		flex: 1;
		margin-left: 5.17cqw;
		padding-top: 1.28125rem;
	}

	.blok-tekstbeeld__knop {
		margin-top: auto;
	}

	.blok-tekstbeeld--rechts .blok-tekstbeeld__beeld {
		order: 2;
		margin-right: calc(-1 * var(--uit));
		margin-left: 5.17cqw;
	}

	.blok-tekstbeeld--rechts .blok-tekstbeeld__tekst {
		margin-left: 0;
	}
}

/* === blokken/uitgelicht.css === */
/* Blok Uitgelicht: gekozen hulpmiddelen of categorieën als witte kaart op een licht paneel.
   Sjabloon: template-parts/blokken/uitgelicht.php. De kaarten staan in onderdelen/kaart.css, het paneel in blok.css.
   Het paneel staat los tussen twee secties, met de ruimte van een sectie erboven en eronder. */
.blok-uitgelicht {
	padding-block: var(--sectie-ruimte);
}

/* Na een paars vlak (de kleur van de pagina) is de ruimte onder dat vlak al de ruimte boven het paneel. */
.vlak:not([class*="vlak--"]) + .blok-uitgelicht {
	padding-top: 0;
}

/* Direct onder of boven een ander blok op een paneel vormt het daarmee één paneel, zonder ruimte ertussen. */
.blok--paneel + .blok-uitgelicht {
	padding-top: 0;
}

.blok-uitgelicht:has(+ .blok--paneel) {
	padding-bottom: 0;
}

/* === blokken/verhalen.css === */
/* Blok Verhalen: sectiekop met drie verhalen als kaart. Sjabloon: template-parts/blokken/verhalen.php.
   De rij en de kaart zelf staan in onderdelen/kaart.css. */
.blok-verhalen {
	padding-top: calc(var(--sectie-ruimte) + 0.25rem);
	padding-bottom: 4.625rem;
}

/* === blokken/vragen.css === */
/* Blok Veelgestelde vragen: bovenkop en titel in het midden, vragen die openklappen en een knop eronder.
   Sjabloon: template-parts/blokken/vragen.php. De vraag zelf is het onderdeel uitklap. */
.blok-vragen {
	padding-top: 3.6875rem;
	text-align: center;
}

/* Als laatste blok: de ruimte boven de footer is al de ruimte onder de knop. */
.blok-vragen:last-child {
	margin-bottom: -0.375rem;
	padding-bottom: 0;
}

.blok-vragen .bovenkop {
	margin-bottom: 0.625rem;
	padding-left: var(--spatie-bovenkop);
}

.blok-vragen__lijst {
	margin-top: 0.9375rem;
	text-align: left;
}

/* Een regel is 57 px hoog met een lijn eronder, zoals in het ontwerp. */
.blok-vragen .uitklap__kop {
	min-height: 3.5625rem;
}

.blok-vragen .uitklap__titel {
	font-weight: var(--dikte-normaal);
}

.blok-vragen__knop {
	margin-top: 1.6875rem;
}

/* === blokken/zoekkop.css === */
/* Blok Kop met zoekveld. Sjabloon: template-parts/blokken/zoekkop.php. De kop zelf is het onderdeel paginakop,
   het veld het onderdeel zoekveld. Onder het veld staat de pijl naar het volgende blok. */
.blok-zoekkop .paginakop {
	padding-bottom: 2.375rem;
}

.blok-zoekkop__omlaag {
	display: grid;
	place-items: center;
	width: var(--klikdoel);
	height: var(--klikdoel);
	margin: 2.6875rem auto 0;
	border-radius: var(--hoek-rond);
	color: var(--accent);
	transition: transform var(--overgang);
}

@media (hover: hover) and (pointer: fine) {
	.blok-zoekkop__omlaag:hover {
		transform: translateY(0.25rem);
	}
}

/* === sjablonen/hulpmiddel.css === */
/* Sjabloon van een hulpmiddel (single-aid.php): een paneel van 1260 px met links de tekst op licht en rechts de
   foto's op wit, en daaronder de video's. Het paneel begint 240 px van boven, over de gedimde bovenkant van de
   pagina heen.

   Het paneel is een raster van twee kolommen en twee rijen: boven de beschrijving en de foto's, onder de twee
   lijsten, zodat die op dezelfde hoogte beginnen. */
.hulpmiddel__kop {
	padding-top: 7.5rem;
	background: var(--verloop-schuin);
}

/* Een foto gedimd op de achtergrond, zoals in de paginakop: bovenaan, 700 px hoog en hoogstens 1600 px breed. */
.hulpmiddel__kop {
	position: relative;
}

.hulpmiddel__achtergrond {
	position: absolute;
	inset: 0 0 auto;
	width: min(100%, 100rem);
	height: 43.75rem;
	margin-inline: auto;
}

.hulpmiddel__achtergrond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
}

.hulpmiddel__achtergrond::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(71 56 107 / 0) 55%, var(--kleur-paars));
}

.hulpmiddel__paneel {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--hoek-3);
	background: var(--kleur-lila-licht);
	color: var(--tekst);
}

.hulpmiddel__tekst,
.hulpmiddel__onder {
	padding-inline: var(--ruimte-5);
}

.hulpmiddel__tekst {
	padding-top: var(--ruimte-6);
	padding-bottom: 1.75rem;
}

/* Het kruimelpad boven de titel: Oplossingen / naam van het hulpmiddel. */
.hulpmiddel__bovenregel {
	margin-bottom: var(--ruimte-2);
}

.hulpmiddel__bovenregel:empty {
	display: none;
}

.hulpmiddel__bovenregel ol {
	line-height: 1.4;
}

.hulpmiddel__titel {
	margin-bottom: 0.625rem;
	color: var(--kleur-paars-donker);
	font-size: var(--kop-2);
}

/* De beschrijving: 16 px met ruime regels, een witregel tussen alinea's, lijsten met een vierkant teken. */
.hulpmiddel__beschrijving {
	line-height: 1.6875; /* 27 op 16 */
}

.hulpmiddel__beschrijving > * {
	margin: 1.6875rem 0 0;
}

.hulpmiddel__beschrijving > :first-child,
.hulpmiddel__beschrijving > p + ul {
	margin-top: 0;
}

.hulpmiddel__beschrijving ul {
	padding: 0;
	list-style: none;
}

.hulpmiddel__beschrijving li {
	position: relative;
	padding-left: 1.125rem;
}

.hulpmiddel__beschrijving li::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 0.0625rem;
	width: 0.25rem;
	height: 0.25rem;
	background: var(--kleur-paars-licht);
}

/* Rechts: de grote foto vult de breedte, daaronder de kleine foto's, drie naast elkaar. */
.hulpmiddel__beelden {
	padding-bottom: var(--ruimte-6);
	background: var(--kleur-wit);
}

/* De foto staat in zijn geheel in het kader, op het wit van het paneel: een vierkante of staande productfoto werd
   anders afgesneden. Een foto met de verhouding van het kader (630 op 460, zoals in het ontwerp) vult het helemaal. */
.hulpmiddel__groot img {
	width: 100%;
	aspect-ratio: 630 / 460;
	object-fit: contain;
}

/* De grote foto is een link die de lightbox opent, met rechtsonder een teken dat hij groter kan. */
.hulpmiddel__vergroot {
	position: relative;
	display: block;
	cursor: zoom-in;
}

/* De focusrand valt binnen de foto: het paneel snijdt alles buiten zijn rand af. */
.hulpmiddel__vergroot:focus-visible {
	outline-offset: -3px;
}

.hulpmiddel__vergrootteken {
	position: absolute;
	right: var(--ruimte-4);
	bottom: var(--ruimte-4);
	display: grid;
	place-items: center;
	width: var(--klikdoel);
	height: var(--klikdoel);
	border-radius: var(--hoek-rond);
	background: var(--kleur-paars-donker);
	color: var(--kleur-wit);
	transition: transform var(--druk), background-color var(--overgang);
}

.hulpmiddel__vergroot:active .hulpmiddel__vergrootteken {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.hulpmiddel__vergroot:hover .hulpmiddel__vergrootteken {
		background: var(--kleur-paars);
	}
}

.hulpmiddel__fotos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.625rem;
	margin: 1.25rem var(--ruimte-5) 0;
}

/* Een dunne lichte rand houdt de rij gelijk als een foto het kader niet vult. */
.hulpmiddel__fotos a {
	display: block;
	border-radius: var(--hoek-1);
	box-shadow: 0 0 0 1px var(--kleur-lila-licht);
	transition: box-shadow var(--overgang);
}

/* Ook de kleine foto's staan er in hun geheel in, op wit. */
.hulpmiddel__fotos img {
	width: 100%;
	aspect-ratio: 17 / 10;
	border-radius: var(--hoek-1);
	object-fit: contain;
}

.hulpmiddel__fotos [aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--kleur-paars);
}

/* Hoog contrast van Windows: een schaduw valt weg. */
@media (forced-colors: active) {
	.hulpmiddel__fotos [aria-pressed="true"] {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.hulpmiddel__fotos a:hover {
		box-shadow: 0 0 0 2px var(--kleur-paars);
	}
}

/* Onder: de twee lijsten. Rechts een lijn erboven. */
.hulpmiddel__onder {
	padding-top: 2.1875rem;
	padding-bottom: var(--ruimte-8);
}

.hulpmiddel__onder--rechts {
	position: relative;
	background: var(--kleur-wit);
}

.hulpmiddel__onder--rechts::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--ruimte-5);
	left: var(--ruimte-5);
	height: 1px;
	background: var(--kleur-lila-licht);
}

/* Video's onder het paneel. */
.hulpmiddel__videos {
	padding-top: 6.4375rem;
}

.hulpmiddel__videotitel {
	margin-bottom: 4.4375rem;
	text-align: center;
}

/* Breed scherm: de indeling van het ontwerp. Het paneel begint 240 px van boven; links en rechts 630 px, met
   50 px ruimte naast de tekst. */
@media (min-width: 64em) {
	.hulpmiddel__kop {
		padding-top: 15rem;
	}

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

	.hulpmiddel__tekst,
	.hulpmiddel__onder {
		padding-inline: 3.125rem;
	}

	.hulpmiddel__tekst {
		padding-top: 3.09375rem;
	}

	.hulpmiddel__beelden {
		padding-bottom: 3.375rem;
	}

	.hulpmiddel__fotos {
		margin-inline: 3.125rem;
	}

	.hulpmiddel__onder {
		padding-bottom: 5.5rem;
	}

	.hulpmiddel__onder--rechts::before {
		right: 3.125rem;
		left: 3.125rem;
	}
}

/* === sjablonen/niet-gevonden.css === */
/* Pagina niet gevonden (404.php): minstens zo hoog als het scherm, met alles in het midden, net als de hero.
   Het vlak regelt zelf de ruimte onder de kop (kop.css geeft die anders aan het eerste vlak). */
.niet-gevonden,
#inhoud > .niet-gevonden:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding-block: 0;
	overflow-x: clip;
	text-align: center;
}

.niet-gevonden__binnen {
	padding-block: 8rem var(--ruimte-9);
}

/* Het cijfer 404, met de smiley uit het logo als nul. De lettergrootte is de maat van het geheel: 96 tot 220 px. */
.niet-gevonden__cijfer {
	display: flex;
	gap: 0.05em;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ruimte-6);
	color: var(--kleur-wit);
	font-family: var(--letter-kop);
	font-size: clamp(6rem, 3.1rem + 12.9vw, 13.75rem);
	font-weight: var(--dikte-vet);
	line-height: 0.8;
}

.niet-gevonden__cijfer img {
	width: 0.8em;
	height: 0.8em;
}

.niet-gevonden__tekst {
	max-width: 40rem;
	margin: var(--ruimte-5) auto 0;
}

.niet-gevonden__zoek {
	margin-top: var(--ruimte-7);
}

.niet-gevonden__knop {
	display: flex;
	justify-content: center;
	margin-top: var(--ruimte-6);
}

/* === sjablonen/oplossing.css === */
/* Sjabloon van een categorie (single-solution.php; op de site een oplossing): onder de paginakop het artikel
   (kruimelpad en tekst) op het paarse vlak, als de categorie een tekst heeft, en daaronder een licht paneel met de
   categorieën eronder en de hulpmiddelen. Het paneel staat in blok.css, de kaarten in onderdelen/kaart.css. */
/* Het kruimelpad staat 32 px onder de rand van de paginakop. */
.oplossing__artikel {
	padding-top: var(--ruimte-6);
}

.oplossing__tekst {
	margin-top: var(--ruimte-5);
}

.oplossing__terug {
	margin-top: var(--ruimte-7);
}

/* Het paneel sluit aan op het artikel erboven: de ruimte ertussen is de ruimte onder het artikel. */
.oplossing__paneel {
	padding-top: 0;
}

/* Nog geen tekst: alleen het kruimelpad staat in het artikel. Onder het kruimelpad is dan evenveel ruimte als
   erboven, zodat het niet in een lege strook hangt. Het staat op dezelfde plek als op een pagina met tekst. */
.oplossing__artikel--kaal {
	padding-bottom: var(--ruimte-6);
}

/* De hulpmiddelen onder de categorieën van een groep, in hetzelfde paneel. */
.oplossing__tweede {
	margin-top: var(--ruimte-8);
}

/* === sjablonen/uitdaging.css === */
/* Sjabloon van een uitdaging (single-challenge.php), in twee delen: het artikel (kruimelpad en tekst) op het
   paarse vlak onder de paginakop, en daaronder los een licht paneel met de oplossingen: de hulpmiddelen die bij de
   uitdaging helpen, per categorie. Het paneel staat in blok.css, de kaarten in onderdelen/kaart.css, de tekst in
   onderdelen/inhoud.css. */
/* Het kruimelpad staat 32 px onder de rand van de paginakop. */
.uitdaging__artikel {
	padding-top: var(--ruimte-6);
}

.uitdaging__tekst {
	margin-top: var(--ruimte-5);
}

.uitdaging__terug {
	margin-top: var(--ruimte-7);
}

/* Het paneel sluit aan op het artikel erboven: de ruimte ertussen is de ruimte onder het artikel. */
.uitdaging__oplossingen {
	padding-top: 0;
}

/* Nog geen tekst maar wel een paneel: alleen het kruimelpad staat in het artikel. Onder het kruimelpad is dan
   evenveel ruimte als erboven. Het staat op dezelfde plek als op een pagina met tekst. */
.uitdaging__artikel--kaal {
	padding-bottom: var(--ruimte-6);
}

/* De hulpmiddelen staan per categorie in het paneel: een kop met rechts de link naar de categorie, en de kaarten. */
.uitdaging__groep + .uitdaging__groep {
	margin-top: var(--ruimte-8);
}

.uitdaging__groepkop {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2) var(--ruimte-6);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--ruimte-5);
}

/* === sjablonen/verhaal.css === */
/* Sjabloon van een verhaal (single-story.php) en van een nieuwsbericht (single.php): de paginakop met de foto gedimd
   op de achtergrond, de foto half over de onderrand van de kop en het artikel op een licht paneel.

   --uitsteek is hoe ver de foto boven het lichte vlak uitkomt: 270 px bij een foto van 840 px breed. */
.verhaal {
	--uitsteek: min(16.875rem, 30vw);
}

/* Zonder foto (een nieuwsbericht zonder uitgelichte afbeelding) steekt er niets boven het lichte vlak uit. */
.verhaal--zonder-foto {
	--uitsteek: 0rem;
}

.verhaal .paginakop {
	padding-bottom: calc(3.09375rem + var(--uitsteek));
}

/* Het lichte vlak is boven schermbreed. Over de onderste 750 px loopt het naast het paneel weg in de paginakleur,
   zodat het paneel met zijn ronde hoeken overblijft. */
/* flow-root: de foto steekt boven het vlak uit zonder het vlak mee omhoog te trekken. */
.verhaal__licht {
	display: flow-root;
	background: linear-gradient(180deg, var(--kleur-lila-licht) calc(100% - 46.875rem), var(--kleur-paars));
}

.verhaal__paneel {
	display: flow-root;
	padding-bottom: clamp(3.5rem, 8.7vw, 7.4375rem);
	border-radius: 0 0 var(--hoek-4) var(--hoek-4);
	background: var(--kleur-lila-licht);
}

.verhaal__foto,
.verhaal__tekst {
	width: min(var(--breedte-tekst), 100% - 2 * var(--ruimte-5));
	margin-inline: auto;
}

.verhaal__foto {
	position: relative;
	margin-top: calc(-1 * var(--uitsteek));
}

.verhaal__foto img {
	width: 100%;
	aspect-ratio: 840 / 469;
	border-radius: 1.25rem;
	object-fit: cover;
	object-position: 50% 12%; /* een staande of vierkante foto houdt zijn bovenkant: daar staat het gezicht */
}

.verhaal__tekst {
	margin-top: 2.34375rem;
}

/* Op een smal scherm vult het paneel de breedte; de foto en de tekst houden de marge van de pagina. */
@media (max-width: 47.9375em) {
	.verhaal__paneel {
		width: 100%;
		border-radius: 0 0 var(--hoek-3) var(--hoek-3);
	}

	.verhaal__foto,
	.verhaal__tekst {
		width: calc(100% - 2 * var(--goot));
	}
}

/* Meer verhalen onder het artikel. */
.verhaal-meer {
	padding-top: var(--ruimte-9);
}

/* === sjablonen/verhalen-overzicht.css === */
/* Overzicht van alle verhalen (archive-verhaal.php): de paginakop met daaronder de verhalen als kaart.
   De kaart en de rij staan in onderdelen/kaart.css. */
.verhalen-overzicht .paginakop {
	padding-bottom: var(--ruimte-7);
}

.verhalen-overzicht__lijst {
	padding-top: var(--ruimte-8);
}

.verhalen-overzicht__lijst .kaartenrij {
	row-gap: var(--ruimte-9);
}

/* Paginering onder het overzicht: nummers als ronde knopjes. */
.paginering {
	margin-top: var(--ruimte-9);
}

.paginering .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2);
	justify-content: center;
}

.paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--klikdoel);
	min-height: var(--klikdoel);
	padding-inline: var(--ruimte-4);
	border-radius: var(--hoek-rond);
	background: var(--kleur-paars-donker);
	font-weight: var(--dikte-vet);
	text-decoration: none;
}

.paginering .page-numbers.current {
	background: var(--kleur-geel);
	color: var(--kleur-paars);
}

/* === sjablonen/zoekresultaten.css === */
/* Zoekresultaten (search.php): de paginakop met het zoekveld en daaronder de resultaten als regel.
   De regel staat in onderdelen/zoekresultaat.css, de paginering in sjablonen/verhalen-overzicht.css. */
.zoekresultaten .paginakop {
	padding-bottom: var(--ruimte-7);
}

/* Het zoekveld staat dicht onder de titel: wie zoekt, wil de resultaten zonder scrollen zien. */
.zoekresultaten .paginakop__inhoud {
	margin-top: var(--ruimte-7);
}

.zoekresultaten__lijst {
	padding-top: var(--ruimte-5);
}

/* De regels zijn even breed als het zoekveld erboven (800 px). */
.zoekresultaten__items {
	max-width: 50rem;
	margin-inline: auto;
}

.zoekresultaten__leeg {
	padding-top: var(--ruimte-5);
}

.zoekresultaten__leeg .knoppen {
	justify-content: center;
}