@charset "UTF-8";
/* ==========================================================================
   ZENTRO KOERIER, ONTWERPSYSTEEM VAN DE NIEUWE SITE
   Bestand : site/assets/zentro.css
   Datum   : 28 juli 2026

   Dit is het enige stijlbestand van de site. Geen thema, geen framework, geen
   bouwstap: wat hier staat is wat de browser krijgt.

   HERKOMST VAN DE KLEUREN
   Niet verzonnen. Ze zijn op 25 juli 2026 uitgelezen uit de oude live site,
   zodat het merk herkenbaar blijft:
     #4A2BCC  paars, merkkleur        #F7931E  oranje, accentkleur
     #341AA1  donkerpaars             #000038  donkerblauw, koppen
     #4C4C5B  bodytekst               #F6F4FC  lichte achtergrond

   DE CONTRASTREGEL
   Wit op oranje haalt 2,30:1 en dat is onleesbaar. Oranje blijft daarom een
   VLAKkleur en draagt nooit witte tekst: tekst op oranje is altijd #000038 en
   haalt 8,65:1. Wit op paars haalt 8,37:1. Elke combinatie hieronder staat er
   met zijn gemeten verhouding bij, berekend met de WCAG 2.x-formule.
   ========================================================================== */

:root {
	color-scheme: light;

	/* ---- Merkkleuren ------------------------------------------------------ */
	--paars:        #4A2BCC; /* wit hierop:  8,37:1 */
	--paars-donker: #341AA1; /* wit hierop: 11,61:1 */
	--paars-diep:   #25107A; /* wit hierop: 14,65:1 */
	--paars-licht:  #E7E6FD; /* alleen vlakkleur   */
	--accent:       #F7931E; /* #000038 hierop: 8,65:1 */
	--accent-hover: #E5850F; /* #000038 hierop: 7,28:1 */
	--accent-donker:#8A4B00; /* als TEKSTkleur op wit: 6,80:1 */

	/* ---- Neutraal --------------------------------------------------------- */
	--navy:        #000038; /* op wit: 19,87:1 */
	--tekst:       #4C4C5B; /* op wit:  8,43:1 */
	--tekst-zacht: #6A6A78; /* op wit:  5,32:1 */
	--wit:         #FFFFFF;
	--vlak:        #F6F4FC;
	--rand:        #D9D8E4; /* decoratief */
	--rand-sterk:  #767689; /* rond bedieningselementen: 4,45:1 op wit */

	/* ---- Typografie ------------------------------------------------------- */
	--kop:   "Outfit", "Saira Condensed", system-ui, sans-serif;
	--body:  "Plus Jakarta Sans", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Vloeiende schaal. Ondergrens geldt tot 320px, bovengrens vanaf 1440px. */
	--t-h1:    clamp(2rem,      1.5714rem + 2.1429vw, 3.5rem);
	--t-h2:    clamp(1.625rem,  1.3750rem + 1.2500vw, 2.5rem);
	--t-h3:    clamp(1.25rem,   1.1429rem + 0.5357vw, 1.625rem);
	--t-lead:  clamp(1.0625rem, 1.0089rem + 0.2679vw, 1.25rem);
	--t-tekst: clamp(1rem,      0.9821rem + 0.0893vw, 1.0625rem);
	--t-klein: 0.875rem;

	/* ---- Ruimte, ronding, schaduw ----------------------------------------- */
	--sectie:   clamp(3rem, 1.8rem + 5vw, 6rem);
	--zijmarge: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
	--breedte:  1200px;
	--r-1: 8px;
	--r-2: 14px;
	--r-3: 24px;
	--r-vol: 999px;
	--schaduw:   0 1px 2px rgba(0,0,56,.06), 0 8px 24px rgba(0,0,56,.07);
	--schaduw-2: 0 16px 44px rgba(0,0,56,.14);
	--overgang: 160ms cubic-bezier(.2,0,.2,1);
	/* 44px. Ruim boven de 24px die WCAG 2.5.8 als minimum vraagt. */
	--raakvlak: 2.75rem;
}


/* ==========================================================================
   BASIS
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--wit);
	color: var(--tekst);
	font-family: var(--body);
	font-size: var(--t-tekst);
	line-height: 1.65;
	/* Vangnet: geen enkele pagina mag horizontaal schuiven. */
	overflow-x: hidden;
}

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

h1, h2, h3, h4 {
	font-family: var(--kop);
	color: var(--navy);
	line-height: 1.12;
	letter-spacing: -.01em;
	margin: 0 0 .75rem;
	overflow-wrap: break-word;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 1rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--paars-donker); text-underline-offset: .18em; }
a:hover { color: var(--paars-diep); }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

/* Alleen voor schermlezers. Niet display:none, want dan leest hij het niet. */
.verborgen {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Overslaanlink, zichtbaar zodra hij focus krijgt. */
.overslaan {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: .75rem 1.25rem; border-radius: 0 0 var(--r-1) 0;
	background: var(--navy); color: var(--wit);
	font-weight: 700; text-decoration: none;
}
.overslaan:focus { left: 0; color: var(--wit); }

/* Focus in drie lagen: wit, donkerpaars, wit. Op een witte sectie zorgt de
   binnengrens voor 11,61:1; op een paars vlak zorgt de buitenste witte ring
   voor 8,37:1. Met twee lagen zou de buitenrand op paars 1,39:1 halen. */
:focus-visible {
	outline: 2px solid var(--paars-donker);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wit), 0 0 0 6px var(--paars-donker);
}
.op-donker :focus-visible {
	outline-color: var(--wit);
	box-shadow: 0 0 0 2px var(--paars-diep), 0 0 0 6px var(--wit);
}

.omhulsel {
	width: 100%;
	max-width: var(--breedte);
	margin-inline: auto;
	padding-inline: var(--zijmarge);
}

.sectie { padding-block: var(--sectie); }
.sectie--vlak { background: var(--vlak); }

.sectiekop { max-width: 62ch; margin-bottom: 2rem; }
.sectiekop p { color: var(--tekst-zacht); margin-bottom: 0; }

.label {
	display: inline-block;
	margin-bottom: .6rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* Donkere oranjetint: zuiver #F7931E haalt als tekst op wit maar 2,30:1,
	   deze haalt 6,80:1. */
	color: var(--accent-donker);
}
.op-donker .label { color: #FFD9A6; } /* 6,27:1 op paars */


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

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--raakvlak);
	padding: .7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--r-vol);
	font-family: var(--body);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--overgang), border-color var(--overgang),
	            color var(--overgang), transform var(--overgang);
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop svg { width: 1.15em; height: 1.15em; flex: none; }

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

/* Paars vlak, witte tekst: 8,37:1. */
.knop--primair { background: var(--paars); border-color: var(--paars); color: var(--wit); }
.knop--primair:hover { background: var(--paars-donker); border-color: var(--paars-donker); color: var(--wit); }

/* Wit vlak op een paarse sectie, paarse tekst: 8,37:1. */
.knop--licht { background: var(--wit); border-color: var(--wit); color: var(--paars-donker); }
.knop--licht:hover { background: var(--paars-licht); border-color: var(--paars-licht); color: var(--paars-diep); }

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

/* Omtrekknop op een donkere sectie. */
.op-donker .knop--omtrek { background: transparent; border-color: rgba(255,255,255,.6); color: var(--wit); }
.op-donker .knop--omtrek:hover { background: rgba(255,255,255,.12); border-color: var(--wit); color: var(--wit); }

.knoprij { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Een link die alleen op een regel staat is geen link IN een zin, en valt dus
   niet onder de uitzondering voor inline doelen van WCAG 2.5.8. Zonder deze
   regel werden ze 21px hoog; nu halen ze de 44px die de rest van de site ook
   aanhoudt. */
.tekstlink {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: var(--raakvlak);
	font-weight: 700;
}
.tekstlink svg { width: 1.1em; height: 1.1em; }


/* ==========================================================================
   KOPBALK
   ========================================================================== */

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

.kopbalk__binnen {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.5rem;
}

.kopbalk__logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.kopbalk__logo img { height: 2.75rem; width: auto; }
.kopbalk__naam { font-family: var(--kop); font-size: 1.125rem; font-weight: 700; color: var(--navy); line-height: 1.1; }

.hoofdmenu { margin-left: auto; }
.hoofdmenu ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
/* Het telefoonnummer staat bewust in dezelfde opsomming als de menu-items en
   niet in een eigen regel eronder. Zo kan het er ook later niet vanaf drijven:
   wie de kleur of de grootte van het menu wijzigt, wijzigt het nummer mee.
   Eerder stond het los, en dan sluipt er verschil in (het had gewicht 700 waar
   het menu 600 heeft, wat als een andere, donkerdere kleur oogt). */
.hoofdmenu a,
.kopbalk__tel {
	display: block;
	padding: .6rem .9rem;
	border-radius: var(--r-1);
	color: var(--navy);
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
}
.hoofdmenu a:hover,
.kopbalk__tel:hover { background: var(--vlak); color: var(--paars-donker); }
.hoofdmenu a[aria-current="page"] { color: var(--paars-donker); background: var(--paars-licht); }

.kopbalk__acties { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Het knoppenblok binnen het menu is er alleen voor het ingeklapte menu op
   smalle schermen. Op desktop staan telefoon en offerteknop al rechts in de
   kopbalk, dus hier moet het weg. */
.hoofdmenu__extra { display: none; }
/* Uiterlijk komt van de gegroepeerde regel bij .hoofdmenu a hierboven. Hier
   alleen wat het nummer eigen is: een telefoonnummer mag nooit over twee
   regels afbreken, want dan lees je het verkeerd. */
.kopbalk__tel { white-space: nowrap; }

.menuknop {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--raakvlak);
	height: var(--raakvlak);
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--rand-sterk);
	border-radius: var(--r-1);
	background: var(--wit);
	color: var(--navy);
	cursor: pointer;
}
/* De drie streepjes hebben een eigen maat nodig. Deze regel ontbrak, en dat is
   het enige icoon op de site waar dat zo was: .knop svg, .wa-kop, .kaart__icoon
   svg en de rest hebben allemaal wel een maat. Zonder maat valt het icoon terug
   op de algemene regel bovenin (img, svg, video { max-width: 100%; height: auto })
   en dan gaat het op twee manieren mis. Een svg met alleen een viewBox heeft
   geen eigen afmeting: Chrome rekt hem dan tot de volle breedte van de knop, dus
   drie dikke streepjes van rand tot rand, en Safari op de iPhone leidt uit die
   viewBox helemaal geen hoogte af en maakt hem nul pixels hoog. Op de telefoon
   zag je daardoor een leeg wit vakje met een randje eromheen en geen streepjes.
   24px in een raakvlak van 44px laat aan alle kanten 10px lucht. De streepjes
   zelf lopen in de viewBox van 4 tot 20, dus wat je ziet is 16px breed: smal
   genoeg om binnen het randje te blijven en breed genoeg om een menu te zijn. */
.menuknop svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* Onder 1150px klapt het menu in. Geen JavaScript nodig voor de weergave zelf:
   het paneel staat er, het script zet alleen aria-expanded en de klasse.

   Die 1150 is gemeten, niet gekozen. Logo (175) plus menu (518) plus telefoon
   en offerteknop (323) is 1016px, met 74px binnenmarge erbij 1090px. Daar
   moet nog ruimte tussen de drie groepen bij, anders plakken ze aan elkaar.
   Hij stond eerst op 900px en dat was gewoon fout: op een scherm van 1024,
   een maat die veel laptops hebben, liep de offerteknop buiten beeld en kon
   je de pagina horizontaal wegschuiven. Telefoon en offerteknop zitten in het
   uitgeklapte menu, dus er gaat niets verloren. */
@media (max-width: 1150px) {
	.menuknop { display: inline-flex; }
	.kopbalk__acties { display: none; }
	.hoofdmenu {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		margin: 0;
		padding: .75rem var(--zijmarge) 1.25rem;
		background: var(--wit);
		border-bottom: 1px solid var(--rand);
		box-shadow: var(--schaduw-2);
	}
	.kopbalk { position: sticky; }
	.kopbalk__binnen { position: relative; }
	.hoofdmenu.is-open { display: block; }
	.hoofdmenu ul { flex-direction: column; gap: .15rem; }
	.hoofdmenu a { padding: .75rem .9rem; font-size: 1rem; }
	.hoofdmenu__extra { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
}


/* ==========================================================================
   HERO
   ========================================================================== */

/* Het verloop liep van #25107A naar #4A2BCC. Dat was aan de fotokant zo donker
   dat de overgang naar het beeld een harde naad werd: in één stap van bijna
   zwartpaars naar een lichte straatfoto. Het loopt nu van #351C9F naar
   #7A59E9, dus overal lichter en aan de rechterkant duidelijk. Die kant zit
   tegen de foto aan, waar geen tekst staat.

   De grens is doorgerekend en niet op gevoel gekozen: over de hele linkerhelft
   van de hero, inclusief het oranje schijnsel, haalt de zwakste tekst (wit met
   82 procent dekking onder de feitenrij) nog 5,14:1. De eis is 4,5:1. Nog
   lichter kan dus niet zonder de leesbaarheid op te geven; variant #8A6EF0
   kwam uit op 4,47:1 en is daarom afgevallen. */
.hero {
	position: relative;
	overflow: hidden;
	color: var(--wit);
	background:
		radial-gradient(120% 140% at 92% 8%, rgba(247,147,30,.28) 0%, rgba(247,147,30,0) 46%),
		linear-gradient(135deg, #351C9F 0%, #472AC6 42%, #7A59E9 100%);
	isolation: isolate;
}

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

.hero__binnen { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero h1 { color: var(--wit); max-width: 18ch; margin-bottom: .75rem; }
.hero__lead { font-size: var(--t-lead); color: rgba(255,255,255,.92); max-width: 54ch; margin-bottom: 1.75rem; }

.hero__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2.25rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 1.35rem 0 0;
	border-top: 1px solid rgba(255,255,255,.22);
}
.hero__feiten li { display: flex; flex-direction: column; min-width: 0; }
.hero__feiten strong { font-family: var(--kop); font-size: 1.375rem; line-height: 1.1; color: var(--wit); }
.hero__feiten span { font-size: var(--t-klein); color: rgba(255,255,255,.82); }

/* Compacte paginakop voor de binnenpagina's. */
.paginakop { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.paginakop h1 { margin-bottom: .5rem; }
.paginakop p { color: rgba(255,255,255,.9); font-size: var(--t-lead); max-width: 56ch; margin-bottom: 0; }

.kruimels { font-size: var(--t-klein); margin-bottom: .9rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.kruimels a { color: rgba(255,255,255,.85); }
.kruimels a:hover { color: var(--wit); }
.kruimels li + li::before { content: "›"; margin-right: .4rem; color: rgba(255,255,255,.6); }
.kruimels [aria-current] { color: var(--wit); font-weight: 600; }


/* ==========================================================================
   KAARTEN EN RASTERS
   ========================================================================== */

/* min() zodat de kolom onder de minimumbreedte kan krimpen. Zonder die min
   loopt de pagina op een scherm van 320px horizontaal uit beeld, wat ook een
   fout is op WCAG 1.4.10 Reflow. */
.raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1rem;
}
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.kaart {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.4rem;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--r-3);
	box-shadow: var(--schaduw);
	transition: border-color var(--overgang), box-shadow var(--overgang), transform var(--overgang);
}
.kaart:hover { border-color: var(--paars-licht); box-shadow: var(--schaduw-2); transform: translateY(-2px); }
.kaart h3 { margin-bottom: .5rem; }
.kaart p { font-size: .9375rem; margin-bottom: 0; }
.kaart__icoon {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: .9rem;
	border-radius: var(--r-2);
	background: var(--paars-licht);
	color: var(--paars-donker);
}
.kaart__icoon svg { width: 1.4rem; height: 1.4rem; }
.kaart__meer { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .9375rem; }

.sectie--vlak .kaart { border-color: transparent; }

/* Kaarten onder elkaar in één kolom, naast een tekstkolom. */
.kaartkolom { display: grid; gap: 1rem; align-content: start; }

/* Verhaal naast feitenkaarten (Over ons). Bovenaan uitlijnen, niet uitrekken:
   anders wordt de tekstkolom net zo hoog als de kaarten en staat de tekst
   zwevend in het midden van een leeg vlak. */
.verhaal { align-items: start; }
.verhaal .label { margin-bottom: .35rem; }
.verhaal h2 { margin-bottom: 1rem; }

@media (min-width: 720px) {
	/* De tekstkolom smaller dan de kaartenkolom, en het verhaal zelf iets
	   groter gezet. Beide zorgen dat de tekst meer regels beslaat, zodat de
	   twee kolommen ongeveer even lang worden. Zonder dit hield de rechterkant
	   136px over en dat viel op als een gat linksonder. */
	.verhaal { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
	/* Op .verhaal p gezet raakte dit ook de tekst in de kaarten ernaast, want
	   die staan binnen hetzelfde blok. Die werden er 8px hoger van. Vandaar de
	   eigen klasse op de tekstkolom. */
	.verhaal__tekst p:not(.label) { font-size: 1.0625rem; line-height: 1.7; }
}


/* ==========================================================================
   DIENSTENLIJST
   ========================================================================== */

.diensten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: .15rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.diensten li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .5rem 0;
	font-size: .9375rem;
	border-bottom: 1px solid var(--rand);
}
.diensten li::before {
	content: "";
	flex: none;
	width: .5rem;
	height: .5rem;
	margin-top: .55rem;
	border-radius: var(--r-vol);
	background: var(--accent);
}


/* ==========================================================================
   OPROEP TOT ACTIE
   ========================================================================== */

.cta {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	align-items: center;
	gap: 1.25rem 2rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--r-3);
	background: linear-gradient(135deg, var(--paars-diep) 0%, var(--paars-donker) 100%);
	color: var(--wit);
}
.cta h2 { color: var(--wit); margin-bottom: .35rem; }
.cta p { color: rgba(255,255,255,.9); margin-bottom: 0; }
.cta__klein {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255,255,255,.22);
	font-size: .8125rem;
	color: rgba(255,255,255,.82);
	max-width: 80ch;
}
/* De knoppenrij in de BREDE variant stond klem. Gemeten op /diensten/: nul
   pixels tussen de zin erboven en de knoppen, en nul tussen de knoppen en de
   streep eronder. Dat komt doordat .cta p geen ondermarge heeft en .knoprij
   geen marge; in de fotovariant valt dat niet op, want daar is .cta__inhoud
   een flexkolom met 20px gap (regel bij .cta--foto .cta__inhoud).

   Hier dus dezelfde ademruimte, maar als marge op de rij zelf en niet als gap
   op de hele kolom. Reden: een gap zou ook tussen de kop en de zin eronder
   gaan zitten, en die twee horen juist als een blok bij elkaar te staan. De
   fotovariant blijft buiten schot, anders komt daar de marge bovenop de gap. */
.cta--breed .knoprij { margin-block: clamp(1.25rem, 1rem + .8vw, 1.75rem); }

@media (max-width: 720px) {
	.cta { grid-template-columns: minmax(0,1fr); }
	.cta .knoprij .knop { flex: 1 1 14rem; }
}


/* ==========================================================================
   OFFERTEFORMULIER
   Het enige formulier op de site. Verwerking loopt via /verstuur.php.
   ========================================================================== */

.formulier {
	padding: clamp(1.25rem, .9rem + 1.6vw, 2rem);
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--r-3);
	box-shadow: var(--schaduw);
}

/* Twee kolommen zodra er ruimte is. Onder 620px zakt het naar een kolom, want
   twee velden naast elkaar worden dan smaller dan hun eigen inhoud. */
.formulier__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1.1rem 1.25rem;
}
.veld--breed { grid-column: 1 / -1; }

.veld { display: flex; flex-direction: column; gap: .35rem; }

.veld label {
	font-family: var(--body);
	font-size: var(--t-klein);
	font-weight: 700;
	color: var(--navy);
}

/* "verplicht" voluit en niet als sterretje. Een sterretje moet je uitleggen in
   een legenda die niemand leest, en een schermlezer spreekt hem uit als "ster". */
.veld__eis {
	margin-left: .35rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--tekst-zacht);
	text-transform: lowercase;
}

.veld__hulp { font-size: .8125rem; color: var(--tekst-zacht); }

.veld input,
.veld textarea {
	width: 100%;
	min-height: var(--raakvlak);
	padding: .6rem .75rem;
	font-family: var(--body);
	font-size: var(--t-tekst);
	color: var(--navy);
	background: var(--wit);
	/* --rand is decoratief en haalt de 3:1 van WCAG 1.4.11 niet. De rand rond
	   een invoerveld is geen versiering maar de begrenzing van het veld zelf,
	   dus hier de sterke variant: #767689 geeft 4,45:1 op wit. */
	border: 1px solid var(--rand-sterk);
	border-radius: var(--r-1);
	transition: border-color var(--overgang), box-shadow var(--overgang);
}
.veld textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }

.veld input::placeholder,
.veld textarea::placeholder { color: var(--tekst-zacht); opacity: 1; }

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

.veld input:focus,
.veld textarea:focus {
	border-color: var(--paars);
	box-shadow: 0 0 0 3px rgba(74, 43, 204, .18);
	outline: none;   /* de gekleurde ring hierboven neemt de rol van de outline over */
}

/* :user-invalid en niet :invalid. Met :invalid staat elk verplicht veld al rood
   voordat iemand iets heeft ingetypt. De truc met :not(:placeholder-shown) werkt
   hier ook niet, want die pseudoklasse bestaat alleen bij velden die daadwerkelijk
   een placeholder hebben, en de helft van deze velden heeft er geen.
   Kent de browser :user-invalid niet, dan blijft de rand gewoon neutraal en doet
   de ingebouwde melding van de browser het werk. */
.veld input:user-invalid,
.veld textarea:user-invalid { border-color: #B3261E; }

.formulier__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rand);
}
.formulier__klein {
	flex: 1 1 18rem;
	margin: 0;
	font-size: .8125rem;
	color: var(--tekst-zacht);
}

/* Botvalstrik. Stond hier tot 06-08-2026 op left:-9999px, met als gedachte dat
   sommige bots display:none overslaan. Die winst woog niet op tegen de prijs:
   een veld dat buiten beeld staat, staat technisch gewoon op de pagina, dus
   wachtwoordmanagers en de invulhulp van de browser vulden het in. Echte
   aanvragen werden zo als bot aangemerkt en verdwenen. Gemeten, niet vermoed.
   display:none is het enige signaal dat die invulhulp betrouwbaar overslaat. */
.valstrik {
	display: none !important;
}

@media (max-width: 620px) {
	.formulier__voet .knop { width: 100%; }
}


/* ==========================================================================
   VOETTEKST
   ========================================================================== */

/* De ruimte onderaan is geen smaakkwestie. De zwevende WhatsApp-knop staat
   vast onderin beeld en dekte precies de regel met KvK- en btw-nummer af zodra
   je helemaal naar beneden scrolde. Die knop is ongeveer 54px hoog en staat
   16px van de rand, dus hier moet minstens zoveel onder. */
.voet { background: var(--navy); color: rgba(255,255,255,.82); padding-block: var(--sectie) 5.5rem; }
.voet h2, .voet h3 { color: var(--wit); font-size: 1rem; margin-bottom: .75rem; }
.voet a { color: rgba(255,255,255,.82); text-decoration: none; }
.voet a:hover { color: var(--wit); text-decoration: underline; }
/* De regel hierboven gold ook voor de offerteknop in de voettekst, en die is
   oranje. Bijna witte tekst op #F7931E haalt 1,98:1; de eis is 4,5:1. Dat is
   de fout waar bovenaan dit bestand voor gewaarschuwd wordt en die er hier
   toch in was geslopen, omdat ".voet a" zwaarder weegt dan ".knop--accent".
   Donkerblauw op datzelfde oranje haalt 8,65:1. */
.voet .knop--accent { color: var(--navy); }
.voet .knop--accent:hover { color: var(--navy); text-decoration: none; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: .4rem; }
/* De eerste kolom is breder dan de drie linkkolommen: daar staat een zin, in
   de rest staan losse woorden. Even brede kolommen gaven een brede kolom met
   veel lucht naast drie smalle kolommen waarin de tekst omsloeg. */
.voet__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2.25rem 2rem;
}
/* Logo en naam naast elkaar als een merkblok. Het beeldmerk alleen liet een
   brede lege strook achter naast een klein rondje; met de naam ernaast vult
   de kolom net zo breed als de zin eronder. */
.voet__merk {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.35rem;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--wit);
}
.voet__logo img { height: 3rem; width: auto; margin-bottom: 0; }
/* Let op de uitsluiting. Met een kale .voet__logo p won die regel het van
   .voet__merk hierboven (een klasse plus een element weegt zwaarder dan een
   klasse alleen), en dan werd margin:0 doorgezet op de merkregel. Naam en zin
   plakten daardoor aan elkaar, terwijl er hierboven netjes ruimte stond
   opgeschreven die nooit werd toegepast. */
.voet__logo p:not(.voet__merk) { font-size: var(--t-klein); line-height: 1.55; margin: 0; max-width: 34ch; }

/* Kopjes klein, vet en in hoofdletters met wat letterruimte. Dat onderscheidt
   ze van de links eronder zonder dat er een streep of kader bij hoeft. */
.voet__kolom h2 {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #FFD9A6;
	margin-bottom: .55rem;
}
/* Ruimte boven en onder elke link in plaats van marge eronder. De maat is een
   afweging: strak genoeg om als lijst te lezen, maar het aanraakvlak moet wel
   de 24px halen die WCAG 2.5.8 als ondergrens stelt. Met 14px tekst op regel-
   hoogte 1,5 is dat 21px, dus er kan maar 3px omheen. Dit komt uit op 25px per
   regel. Ter vergelijking: het stond eerst op 35px en dat oogde uitgerekt. */
.voet__kolom li { margin: 0; }
.voet__kolom li a { display: block; padding: .13rem 0; font-size: var(--t-klein); line-height: 1.5; }
.voet__tijden { margin: .7rem 0 0; font-size: var(--t-klein); line-height: 1.5; }
/* De knop staat onder de zin bij het logo en niet meer onderaan de contact-
   kolom. Daar hing hij los onder de openingstijden, ver van de rest. */
.voet__knop { margin-top: 1.15rem; }

.voet__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.18);
	font-size: var(--t-klein);
}
.voet__onder p { margin: 0; }

@media (max-width: 900px) {
	.voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voet__logo { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.voet__raster { grid-template-columns: minmax(0, 1fr); }
	.voet__onder { justify-content: flex-start; }
}
/* Deze regels stonden verderop in het bestand nog een keer, met een ruimere
   gap. Omdat ze later kwamen wonnen ze, en bleef de contactkolom losser staan
   dan de twee linkkolommen ernaast. Alles staat nu op een plek bij elkaar. */
.voet__contact { display: flex; flex-direction: column; gap: .25rem; }
.voet__contact a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .13rem 0;
	/* Exact dezelfde tekstinstelling als de navigatielinks ernaast. Ze stonden
	   hier op vet en op fel wit, en hoewel de lettergrootte al gelijk was (14px
	   allebei) las dat als een groter lettertype: zwaarder en helderder oogt
	   groter. Daarmee viel de contactkolom uit de toon met de rest.
	   Het onderscheid zit nu in de iconen ernaast, niet in de tekst zelf. */
	font-size: var(--t-klein);
	line-height: 1.5;
	font-weight: 400;
}
.voet__contact svg { width: 1.1rem; height: 1.1rem; flex: none; }


/* ==========================================================================
   WHATSAPP
   Het groen van WhatsApp is uitsluitend het icoon en een dun accent. De knop
   zelf blijft in de huisstijl, want een groene knop midden op een paars-blauwe
   site oogt als een ingeplakt element van iemand anders.
   ========================================================================== */

.wa-groen { color: #25D366; }

/* Het WhatsApp-teken naast het telefoonnummer in de kopbalk. Klein gehouden,
   want het nummer moet net zo groot blijven als de menu-items ernaast. Het
   staat er wel bewust: dat nummer opent WhatsApp en niet de telefoon-app, en
   dat mag je niet raden. */
.wa-kop { width: 1.05em; height: 1.05em; flex: none; }
.kopbalk__tel { display: flex; align-items: center; gap: .4rem; }

/* Zwevende knop. Onderaan rechts, met ruimte voor de veilige zone van iPhones.
   Hij stond eerst in donkerblauw en viel daardoor weg tegen de voettekst en de
   donkere blokken. Nu in het groen van WhatsApp zelf: dat is het enige merk op
   deze pagina dat mensen op kleur herkennen, dus dan moet je het gebruiken.
   De tekst is donkerblauw en niet wit, want wit op dit groen haalt maar
   1,98:1 en donkerblauw 10,02:1. */
.wa-zweef {
	position: fixed;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: var(--raakvlak);
	padding: .85rem 1.4rem;
	border-radius: var(--r-vol);
	background: #25D366;
	color: var(--navy);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(11,120,55,.45), 0 2px 6px rgba(0,0,56,.2);
	transition: transform var(--overgang), box-shadow var(--overgang);
}
.wa-zweef:hover,
.wa-zweef:focus-visible {
	background: #1EBE5D;
	color: var(--navy);
	transform: translateY(-3px);
	box-shadow: 0 16px 38px rgba(11,120,55,.55), 0 2px 6px rgba(0,0,56,.2);
}
.wa-zweef svg { width: 1.5rem; height: 1.5rem; color: var(--navy); }

/* Een pulserende ring achter de knop. Puur om de aandacht te pakken, dus
   aria-verborgen en zonder eigen inhoud. Drie tellen rust tussen de pulsen:
   een ring die onophoudelijk knippert wordt binnen een minuut irritant en
   leidt af van de tekst. Bij "minder beweging" valt de animatie stil door de
   algemene regel verderop in dit bestand. */
.wa-zweef::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: #25D366;
	animation: wa-puls 3.2s ease-out infinite;
}
@keyframes wa-puls {
	0%   { transform: scale(1);    opacity: .55; }
	55%  { transform: scale(1.32); opacity: 0; }
	100% { transform: scale(1.32); opacity: 0; }
}

@media (max-width: 560px) {
	/* Op een telefoon alleen de ronde knop, zodat hij geen inhoud afdekt. */
	.wa-zweef { padding: .95rem; gap: 0; }
	.wa-zweef span { display: none; }
}


/* ==========================================================================
   DIENSTGROEPEN: UITKLAPKAARTEN
   Gebouwd op <details>/<summary>. Dat opent en sluit uit zichzelf, werkt met
   het toetsenbord en met een schermlezer, en blijft werken als het script niet
   laadt. De inhoud staat gewoon in de HTML, dus zoekmachines lezen alle
   diensten mee, ook die van een dichte kaart.
   ========================================================================== */

.dgroepen { display: grid; gap: .85rem; }

.dgroep {
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--r-3);
	box-shadow: var(--schaduw);
	overflow: hidden;
	transition: border-color var(--overgang), box-shadow var(--overgang);
}
.dgroep[open] { border-color: var(--paars-licht); box-shadow: var(--schaduw-2); }

.dgroep__kop {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	cursor: pointer;
	list-style: none;          /* Firefox */
	user-select: none;
}
.dgroep__kop::-webkit-details-marker { display: none; }  /* Safari en Chrome */
.dgroep__kop:hover { background: var(--vlak); }
/* De focusring hoort om de hele kopregel, want dat is wat je aanklikt. */
.dgroep__kop:focus-visible {
	outline: 2px solid var(--paars-donker);
	outline-offset: -3px;
}

.dgroep__icoon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--r-2);
	background: var(--paars-licht);
	color: var(--paars-donker);
}
.dgroep__icoon svg { width: 1.4rem; height: 1.4rem; }
.dgroep[open] .dgroep__icoon { background: var(--paars); color: var(--wit); }

.dgroep__titel { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dgroep__titel strong {
	font-family: var(--kop);
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--navy);
}
.dgroep__aantal { font-size: var(--t-klein); color: var(--tekst-zacht); }

.dgroep__pijl {
	margin-left: auto;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: var(--paars-donker);
	transition: transform var(--overgang);
}
.dgroep__pijl svg { width: 1.25rem; height: 1.25rem; }
.dgroep[open] .dgroep__pijl { transform: rotate(180deg); }

.dgroep__inhoud { padding: 0 1.3rem 1.3rem; }
.dgroep__uitleg {
	margin: 0 0 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rand);
	font-size: .9375rem;
	color: var(--tekst-zacht);
	max-width: 70ch;
}
.dgroep__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* De diensten als losse labels en niet als opsomming met bolletjes: het zijn
   losse termen, geen zinnen, en zo passen er meer naast elkaar. */
.dgroep__lijst li {
	padding: .5rem .9rem;
	border: 1px solid var(--rand-sterk);
	border-radius: var(--r-vol);
	background: var(--vlak);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--navy);
}

.dgroepen__knoppen { margin-top: 1.5rem; }

@media (max-width: 560px) {
	.dgroep__kop { gap: .75rem; padding: .9rem 1rem; }
	.dgroep__icoon { width: 2.25rem; height: 2.25rem; }
	.dgroep__icoon svg { width: 1.15rem; height: 1.15rem; }
	.dgroep__titel strong { font-size: 1rem; }
	.dgroep__inhoud { padding: 0 1rem 1.1rem; }
}


/* ==========================================================================
   CONTACTPAGINA
   ========================================================================== */

/* Drie gelijkwaardige kanalen, dus knoppen die op dezelfde hoogte eindigen.
   .kaart is al een kolom-flexbox; margin-top:auto duwt de knop naar onderen,
   ook als de ene kaart een regel meer tekst heeft dan de andere. */
.kanalen .kaart__meer { margin-top: auto; padding-top: 1.25rem; }
.kanalen .knop { width: 100%; }
/* Het WhatsApp-vak krijgt het merkgroen als achtergrond in plaats van lila,
   zodat het herkenbaar blijft zonder dat de kaart een andere vorm krijgt. */
.kaart__icoon--wa { background: rgba(37,211,102,.16); color: #0B7837; }

/* De vier keuzekaarten. Alle vier de koppen horen op een regel te staan, ook
   de langste ("Een offerte ontvangen"), anders staat die kaart als enige met
   een omgeslagen kop tussen de buren. Gemeten op de opgemaakte pagina:

     - vier op een rij levert een kaart van 268px met 221px tekstruimte;
     - die kop had bij de oude maat (26px) 264px nodig, dus 43px te veel;
     - bij 1,3rem is dat 211px en past hij met marge.

   Daarom twee ingrepen tegelijk: de kop iets kleiner dan op de andere kaarten,
   en pas vier kolommen vanaf 1180px. Daaronder staan ze twee bij twee, dus
   allemaal even breed en nog steeds netjes naast elkaar. De ondergrens van
   2,6em (gereserveerde ruimte voor die tweede regel) is daarmee overbodig. */
.keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) {
	.keuzes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.keuzes { grid-template-columns: minmax(0, 1fr); }
}
.keuzes .kaart h3 { font-size: 1.3rem; line-height: 1.25; min-height: 0; }
/* De hele kaart is de link, dus de tekst erin hoeft niet onderstreept. Anders
   staan kop en uitleg allebei met een streep eronder en oogt het als een blok
   losse links. Bij zweven komt de streep terug op de kop alleen, zodat je nog
   ziet dat er iets aanklikbaars is. */
.keuzes .kaart { text-decoration: none; color: inherit; }
.keuzes .kaart h3 { color: var(--paars-donker); }
.keuzes .kaart:hover h3 { text-decoration: underline; }


/* ==========================================================================
   MINDER BEWEGING
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.knop:hover, .kaart:hover, .wa-zweef:hover { transform: none; }
}


/* ==========================================================================
   FOTO'S OP DE HOMEPAGE
   Vier vaste plekken: de hero, twee duo-blokken (foto naast tekst) en de
   afsluitende cta. De foto's zelf komen uit scripts/verklein_beelden.py.
   ========================================================================== */

/* De hero en de twee fotoblokken werken allemaal met dezelfde opzet: de
   SECTIE zelf is het raster, niet een .omhulsel daarbinnen. Daardoor kan de
   fotokolom doorlopen tot de rand van het scherm terwijl de tekstkolom nog
   netjes uitlijnt met de rest van de pagina.

   Waarom niet gewoon een negatieve marge op de foto binnen .omhulsel? Omdat
   een procentuele marge op een rasteritem rekent met de breedte van het
   rastervak en niet met die van het venster. Dat vak is hier de halve
   pagina, dus dan komt de foto op de helft van de bedoelde plek uit. Op de
   sectie zelf klopt de 100% wel, want die is precies zo breed als de pagina.

   De uitlijning zit in --randmarge: de halve overloop buiten de 1200px plus
   de gewone zijmarge. Onder 1200px is die overloop negatief en valt de max()
   terug op alleen de zijmarge, precies zoals .omhulsel zich daar gedraagt.

   LET OP, dit ging bij de eerste poging mis: --randmarge moet worden gebruikt
   op de SECTIE en niet op de tekstkolom erin. Een variabele met een procent
   erin rekent namelijk pas af op het element dat hem gebruikt, en voor de
   tekstkolom is 100% de halve pagina. De uitkomst werd dan negatief, de max()
   viel terug op de kale zijmarge en de tekst stond 120px te ver naar links. */
.heroblok,
.duobalk {
	--randmarge: max(var(--zijmarge), calc((100% - var(--breedte)) / 2 + var(--zijmarge)));
	display: grid;
}

.heroblok__foto,
.duobalk__foto { margin: 0; }
.heroblok__foto img,
.duobalk__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* De foto's zijn liggend aangeleverd maar staan hier in een hoge kolom.
	   Zonder sturing snijdt object-fit gelijk van links en rechts af, en dan
	   valt net de koerier weg. Iets naar rechts houdt hem in beeld. */
	object-position: 62% center;
}

/* De herofoto liep hard tegen het paars aan: een kaarsrechte naad tussen een
   donker vlak en een lichte straatfoto. Met een masker dooft de foto aan die
   kant uit en komt het paars van de sectie zelf tevoorschijn. Dat is beter dan
   er een paars verloopje overheen leggen, want het paars verloopt van boven
   naar beneden mee: een vaste kleur zou aan de bovenkant net naast de
   achtergrond zitten en aan de onderkant weer.

   De tussenstop op 45 procent dekking is er tegen bandvorming. Een masker dat
   in één rechte lijn van doorzichtig naar dekkend gaat, laat in een verloop
   zichtbare strepen achter. */
.heroblok__foto img {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 8%, #000 22%);
	        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 8%, #000 22%);
}

/* Zolang alles onder elkaar staat houdt de tekstkolom gewoon de zijmarge aan
   en loopt de foto van rand tot rand. */
.heroblok__tekst,
.duobalk__tekst { padding-inline: var(--zijmarge); }

/* --- Hero ---------------------------------------------------------------- */
.heroblok__tekst {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	align-self: center;
}

@media (max-width: 999px) {
	/* De foto heeft hier geen tekstkolom meer naast zich die de hoogte
	   bepaalt, dus een vaste verhouding in plaats van meerekken. En de naad
	   ligt nu boven de foto in plaats van ernaast, dus het masker draait mee.

	   HERZIENING 28 juli 2026. Gemeten op de live site: de foto begon op een
	   scherm van 390px pas op 774px terwijl dat scherm 844px hoog is, dus er
	   stak nog 70px foto in beeld. Op 360px was dat 29px en op 320px niets.
	   Wie de site opende zag dus vooral een paars vlak. De drie cijfers zaten
	   daar precies tussen de knoppen en de foto in en kostten samen ongeveer
	   170px.

	   Twee ingrepen, allebei alleen hier zodat de desktopindeling ongemoeid
	   blijft: de cijfers verhuizen naar onder de foto, en de foto wordt hoger
	   (4/3 in plaats van 16/10). Gemeten na afloop begint de foto op 390px op
	   585px met 259px in beeld, op 430px 323px en op 360px 218px. */

	/* display: contents laat het vak van de tekstkolom vervallen, waardoor
	   label, kop, lead, knoppen en cijfers zelf rasteritems van .heroblok
	   worden. Pas dan kan order ze verplaatsen; als geneste kinderen kon dat
	   niet. Het vak dat verdwijnt droeg de zijmarge en de verticale ruimte,
	   dus die worden hieronder op de kinderen teruggezet. */
	.heroblok__tekst { display: contents; }

	.heroblok__tekst > * { padding-inline: var(--zijmarge); }
	.heroblok__tekst > .label { padding-top: clamp(1.75rem, 1rem + 3vw, 2.75rem); }
	.heroblok__tekst > .knoprij { padding-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }

	/* Alleen dit blok schuift naar achteren; de rest houdt order 0 en blijft
	   dus gewoon in documentvolgorde staan. De voorleesvolgorde verandert
	   hierdoor niet, want de HTML blijft ongewijzigd. */
	.heroblok__tekst > .hero__feiten {
		order: 1;
		margin-top: 0;
		padding-block: clamp(1.25rem, 1rem + 1.5vw, 1.75rem) clamp(2rem, 1.25rem + 3vw, 3rem);
	}

	.heroblok__foto img {
		aspect-ratio: 4 / 3;
		/* Boven dooft de foto uit in het paars, en sinds de cijfers eronder
		   staan moet dat aan de onderkant ook: daar ligt nu weer paars tegen
		   de foto aan in plaats van de volgende sectie. Zonder die tweede
		   overgang ontstaat daar dezelfde kaarsrechte naad als eerder aan de
		   zijkant. */
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 7%, #000 20%, #000 86%, rgba(0,0,0,.5) 95%, transparent 100%);
		        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 7%, #000 20%, #000 86%, rgba(0,0,0,.5) 95%, transparent 100%);
	}
}

@media (min-width: 1000px) {
	.heroblok {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
		align-items: stretch;
		padding-left: var(--randmarge);
	}
	.heroblok__tekst {
		padding-inline: 0 clamp(2rem, 3.5vw, 3.5rem);
		padding-block: clamp(3rem, 1.5rem + 3.5vw, 4.5rem);
	}
	/* De ondergrens voorkomt een platte reep als de tekst ooit korter wordt. */
	.heroblok__foto { min-height: 28rem; }
}

/* --- Fotoblokken: foto tot de rand, tekst ernaast ------------------------- */
.duobalk__tekst {
	padding-block: var(--sectie);
	align-self: center;
}
.duobalk__tekst h2 { margin-bottom: .65rem; }
.duobalk__tekst > p:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
	.duobalk__foto img { aspect-ratio: 16 / 10; }
}

@media (min-width: 900px) {
	.duobalk {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: stretch;
		/* Foto links, dus de paginamarge hoort aan de rechterkant. */
		padding-right: var(--randmarge);
	}
	.duobalk__foto { min-height: 26rem; }
	.duobalk__tekst { padding-inline: clamp(2rem, 3.5vw, 3.5rem) 0; }

	/* Gespiegeld: foto rechts. order verzet alleen de tekening, niet de
	   voorleesvolgorde; die blijft foto-dan-tekst zoals in de HTML staat. */
	.duobalk--spiegel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		padding-right: 0;
		padding-left: var(--randmarge);
	}
	.duobalk--spiegel .duobalk__foto { order: 2; }
	.duobalk--spiegel .duobalk__tekst { padding-inline: 0 clamp(2rem, 3.5vw, 3.5rem); }
}

/* --- Werkgebied: zes kaarten ---------------------------------------------- */
/* Met het gewone raster--4 kwamen er vijf kolommen op een rij en bleef de
   zesde kaart alleen op de tweede rij achter. Bovendien waren de kolommen zo
   smal dat "Kennemerland" middenin het woord afbrak. Deze ondergrens levert
   drie kolommen op de desktop (dus tweemaal drie) en twee op een tablet. */
.raster--gebieden { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }

/* Opsomming met vinkjes in de duo-blokken. Het vinkje is een data-URI zodat
   er geen extra netwerkverzoek nodig is; oranje vierkantje, donker vinkje,
   zelfde vormtaal als .kaart__icoon. */
.vinkjes {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: grid;
	gap: .6rem;
}
.vinkjes li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; }
.vinkjes li::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .05rem;
	border-radius: var(--r-1);
	background-color: rgba(247,147,30,.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B25E00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E");
	background-size: .95rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- Cta met foto --------------------------------------------------------- */
/* De basisvorm van .cta blijft, maar de binnenmarge verhuist naar de
   inhoudkolom zodat de foto tot de rand van het blok kan doorlopen. */
.cta--foto {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	min-height: 24rem;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.cta--foto .cta__inhoud {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.25rem;
}
.cta--foto .cta__inhoud > * { margin: 0; }
.cta--foto .cta__klein { grid-column: auto; padding-top: 1.1rem; }
.cta__foto { margin: 0; }
.cta__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 860px) {
	.cta--foto { grid-template-columns: minmax(0, 1fr); }
	/* Foto boven de tekst, en met een vaste verhouding in plaats van
	   meerekken: anders bepaalt de tekstkolom de hoogte en wordt de foto
	   op een telefoon een dunne reep. */
	.cta__foto { order: -1; }
	.cta__foto img { height: auto; aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   AFDRUKKEN
   ========================================================================== */

@media print {
	.kopbalk, .wa-zweef, .overslaan, .kruimels { display: none !important; }
	.hero, .cta, .voet { background: none !important; color: #000 !important; border: 1px solid #000; }
	.hero h1, .cta h2, .voet h2, .voet h3, .voet a { color: #000 !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}