/*
 * Alleen voor wat theme.json niet kan: rasters, deellijnen en
 * componentvormen. Gebruik altijd de tokens, nooit losse waarden:
 *   var(--wp--preset--color--primary)
 *   var(--wp--preset--font-size--l)
 *   var(--wp--preset--spacing--m)
 *
 * De vorm volgt het "Modernist"-systeem uit het Claude Design-project
 * (docs/03-designsysteem.md § Modernist): geen afronding, geen pillen.
 *
 * Bijgesteld op 2026-08-27 (zie docs/03 § Modernist):
 *
 * 1. **Structuur komt uit ruimte, niet uit lijnen** (2026-08-27, tweede
 *    ronde). Het systeem liniëerde alles: elke sectie een onderrand, elke
 *    rastercel vier randen, elke kaart een kader met nog eens twee lijnen
 *    erbinnen. Dat stapelde ook echt dubbel — een `.dienst` met een
 *    onderrand bovenop de onderrand van zijn sectie gaf twee lijnen een
 *    paar pixels uit elkaar. Alle decoratieve lijnen zijn eruit; scheiding
 *    komt nu van witruimte, van een wisselende ondergrond en van
 *    typografische rangorde. Er blijven drie functionele lijnen over: de
 *    onderrand van de sticky sitekop (anders schuift inhoud er zonder
 *    grens onderdoor), de scheiding boven de juridische regel in de voet,
 *    en de rijen van de specificatietabel.
 * 2. Er is één schaduwtoken (`--wp--custom--shadow--zacht`) voor wat echt
 *    los van de pagina ligt. Randen blijven het primaire structuurmiddel.
 * 3. Beweging is georkestreerd, niet gestrooid: één binnenkomst in de
 *    hero, één rustige onthulling per sectie, en hover die de kaart als
 *    geheel behandelt. Alles achter `prefers-reduced-motion`.
 */

:root {
	/*
	 * De haarlijn. Dun en licht: structuur die je leest zonder dat je hem
	 * apart opmerkt. Sterk is voor randen die iets aanwijsbaars omsluiten.
	 */
	--redesign-lijn: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	--redesign-lijn-sterk: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent);

	/* Beweging: één curve en twee duren voor de hele site. */
	--redesign-soepel: cubic-bezier(0.22, 0.61, 0.2, 1);
	--redesign-duur: 460ms;
	--redesign-duur-kort: 200ms;
}

/*
 * Terugvalletter met dezelfde metriek als Archivo. Zonder dit springt de
 * tekst zichtbaar op zodra het webfont binnen is (`font-display: swap`) —
 * op een kop van 62px is dat een forse verschuiving, en het maakt elke
 * binnenkomstanimatie stuk. De waarden zijn afgeleid uit het font zelf:
 * Archivo heeft ascent 0,878 / descent 0,210 / gap 0 en een gemiddelde
 * tekenbreedte van 0,528 em, tegen 0,5562 em voor Arial.
 *   size-adjust     = 0,528 / 0,5562        = 94,93%
 *   ascent-override = 0,878 / 0,9493        = 92,49%
 *   descent-override= 0,210 / 0,9493        = 22,12%
 */
@font-face {
	font-family: "Archivo Terugval";
	src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
	size-adjust: 94.93%;
	ascent-override: 92.49%;
	descent-override: 22.12%;
	line-gap-override: 0%;
}

/* ── Fundament ─────────────────────────────────────────────────────────── */

/* Zichtbare toetsenbordfocus, zie docs/03-designsysteem.md § Beweging. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Overslaan-naar-content link. */
.skip-link:focus {
	position: fixed;
	inset-block-start: var(--wp--preset--spacing--s);
	inset-inline-start: var(--wp--preset--spacing--s);
	z-index: 999;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * De kicker: klein, vet, uppercase, ruim gespatieerd. Vervangt de
 * IBM Plex Mono-kicker uit het vorige systeem — Modernist heeft geen
 * tweede lettertype, het onderscheid komt uit gewicht en spatiëring.
 */
.kicker {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin: 0;
}

/* Zachtere tekst binnen een sectie, zonder een eigen kleurtoken. */
.is-secondary-text {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

/* 65%, niet lager: daaronder zakt kleine tekst op de basiskleur onder 4.5:1. */
.is-tertiary-text {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

/*
 * De container. Het ontwerp zet alles op één breedte (wideSize) met een
 * meeschalende paginamarge, ook binnen volle-breedte-vlakken die zelf
 * doorlopen tot de schermrand. De WordPress-layoutmodi doen dit niet in
 * één stap, vandaar deze ene helper.
 */
.container {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

/*
 * WordPress geeft elke "flow"-groep een verticale marge tussen de kinderen
 * (`:where(.is-layout-flow) > * { margin-block-start: … }`). In de
 * containers hieronder doet `gap` dat werk al; die marge zou het raster
 * scheeftrekken. Eén keer uitzetten, op de plek waar het raster wordt
 * bepaald, in plaats van per component.
 */
.sitekop__inhoud > *,
.split > *,
.feiten > *,
.sectiekop > *,
.voertuigen > *,
.diensten > *,
.uitspraak__raster > *,
.sitevoet__raster > *,
.sitevoet__slot > * {
	margin-block: 0;
}

/* ── Sectieraster ──────────────────────────────────────────────────────── */

/*
 * Elke sectie sluit af met een deellijn over de volle breedte. Dat is de
 * dragende maat van het systeem: de pagina leest als een opgedeeld vel,
 * niet als een stapel losse kaarten.
 */
/*
 * Secties worden gescheiden door lucht en door een wisselende ondergrond,
 * niet door een lijn. Wie twee blokken naast elkaar wil zetten, geeft er
 * één de `muted`-achtergrond.
 */
.sectie {
	padding-block: clamp(3rem, 5.5vw, 5.5rem);
}

/* De hero en de splitsecties dragen hun eigen ruimte in de tekstkolom. */
.sectie:has(> .container > .split) {
	padding-block: 0;
}

/*
 * De eerste sectie onder de kop droeg twee dingen tegelijk: de blokafstand
 * die WordPress boven `main` zet (24px) én zijn volle bovenpadding (79px).
 * Samen 103px tussen de navigatiebalk en het eerste dat er staat, terwijl
 * de kop daar al ruimte genoeg maakt. Eén rustige stap volstaat.
 */
main > .sectie:first-child {
	padding-block-start: var(--wp--preset--spacing--m);
}

/*
 * Twee secties zonder wisseling van ondergrond horen als één doorlopend
 * blok te lezen, niet als twee met dubbele marge ertussen.
 *
 * De onderrand van de eerste weghalen was niet genoeg: de sectie erna zette
 * er nog zijn eigen bovenmarge (de blokafstand van 24px) én zijn volle
 * bovenpadding (79px) bovenop — samen 103px tussen een intro en de lijst die
 * erbij hoort. Nu één rustige stap.
 */
.sectie--aansluitend {
	padding-block-end: 0;
}

.sectie--aansluitend + .sectie {
	margin-block-start: 0;
	padding-block-start: var(--wp--preset--spacing--xl);
}

/*
 * Splitsectie: twee kolommen met een verticale deellijn ertussen, waarbij
 * de rechterkolom tot de rand van de container doorloopt. Onder 48rem
 * klapt hij naar één kolom en wordt de verticale lijn een horizontale.
 */
.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
}

/*
 * Vloeiend, niet in stappen. Deze twee stonden eerder op een vaste maat die
 * op precies 48rem omsprong — de mediakolom maakte daar een sprong van ruim
 * 200px. Met clamp() groeit alles mee met het scherm en is er nergens een
 * knik.
 */
.split__intro {
	padding-block: clamp(3rem, 5.5vw, 5.5rem);
}

.split__media {
	position: relative;
	min-height: clamp(18rem, 38vw, 34rem);
}

@media (min-width: 48rem) {
	.split {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	}

	/*
	 * Bij de werkplaats en de locatie staat er rechts een raster of een
	 * kaart die bovenaan begint; een kop die dan halverwege zweeft leest
	 * als een uitlijnfout. Alles lijnt dus bovenaan uit.
	 */
	.split__intro {
		display: flex;
		flex-direction: column;
	}
}

/*
 * Bij deze twee varianten staat de verticale ruimte op de rij, niet op de
 * tekstkolom. Anders begint de rechterkolom — het dienstenraster, de kaart —
 * bovenaan terwijl de kop eronder inspringt, en dat leest als scheef.
 * De hero doet het juist andersom: daar loopt de foto van rand tot rand en
 * draagt de tekstkolom de ruimte.
 */
.split--smal,
.split--gelijk {
	padding-block: clamp(3rem, 5.5vw, 5.5rem);
}

.split--smal .split__intro,
.split--gelijk .split__intro {
	padding-block: 0;
}

/* Variant met een smallere tekstkolom, voor werkplaats en locatie. */
@media (min-width: 48rem) {
	.split--smal {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	}

	.split--gelijk {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

/*
 * De openingsstatus. Dit is het eerste dat er staat, boven de kop, omdat
 * "kan ik nu langs?" bij een garage in een dorp de eerste vraag is. De
 * tekst wordt per bezoek berekend uit de echte openingstijden — het is
 * geen label maar een stand van zaken.
 *
 * De stip is versterking, geen drager: de tekst zegt het al. Het groen is
 * daarom gedempt met de tekstkleur tot het als vlakje 3,65:1 haalt op de
 * achtergrond; het merkgroen zelf blijft daar met 2,4:1 onder.
 */
.status {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

.status__stip {
	position: relative;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}

.status--open .status__stip {
	background: color-mix(in srgb, var(--wp--preset--color--status-available) 75%, var(--wp--preset--color--contrast));
}

/*
 * Eén ademende stip, alleen als er ook echt iemand is. Beweging die aan
 * een werkelijke stand gekoppeld is, niet aan het laden van de pagina.
 */
.status--open .status__stip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	animation: redesign-ademen 2.6s var(--redesign-soepel) infinite;
}

@keyframes redesign-ademen {
	0%   { opacity: 0.55; transform: scale(1); }
	70%  { opacity: 0; transform: scale(2.6); }
	100% { opacity: 0; transform: scale(2.6); }
}

.hero__titel {
	text-wrap: balance;
	margin-block: var(--wp--preset--spacing--m) 0;
}

.hero__lead {
	max-width: 42ch;
	text-wrap: pretty;
	margin-block: var(--wp--preset--spacing--m) 0;
}

.hero__acties {
	margin-block-start: var(--wp--preset--spacing--l);
}

/* ── Hero als scroll-verhaal ───────────────────────────────────────────── */

/*
 * De hero is één beeldvlak van rand tot rand met de tekst erin. Zonder
 * JavaScript is dit een stilstaand sfeerbeeld op schermhoogte; met
 * `hero-verhaal.js` (en zonder `prefers-reduced-motion`) wordt de sectie zo
 * hoog als het aantal foto's, blijft het scherm plakken en loopt het
 * scrollen door de foto's heen. De hoogte per laag staat in
 * `--redesign-herolagen`, gezet door het script — niet hier, want de CSS
 * mag nooit ruimte reserveren voor een verhaal dat niet gaat lopen.
 */
.hero--verhaal {
	padding-block: 0;
	background: var(--wp--preset--color--contrast);
}

/*
 * De hero sluit naadloos aan op de navigatie: de foto begint precies waar
 * de balk ophoudt. Dat vraagt twee dingen weg — de deellijn onder de kop
 * (die op een foto een streep is die nergens naartoe leidt) en de
 * blokafstand die WordPress tussen de kop en `main` zet.
 */
body:has(.hero--verhaal) .sitekop {
	border-bottom: 0;
}

body:has(.hero--verhaal) main {
	margin-block-start: 0;
}

.hero--verhaal.is-scrollverhaal {
	height: calc(var(--redesign-herolagen, 3) * 100svh);
}

/*
 * `--redesign-kop` is de hoogte van de plakkende sitekop, gemeten door het
 * script. Het scherm past daaronder en pint eronder: zo vallen de knoppen
 * bij het laden niet onder de vouw en schuift het beeld tijdens het
 * verhaal niet onder de kop door.
 */
.hero__scherm {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: max(36rem, calc(100svh - var(--redesign-kop, 6rem)));
}

.is-scrollverhaal .hero__scherm {
	position: sticky;
	inset-block-start: var(--redesign-kop, 0px);
	height: calc(100svh - var(--redesign-kop, 0px));
	min-height: 0;
	padding-block-end: var(--redesign-kop-speling, 0px);
}

.hero__lagen,
.hero__laag {
	position: absolute;
	inset: 0;
}

/*
 * Zonder script staat alleen de eerste foto; het script stuurt de rest via
 * `opacity` aan. De overschaling geeft de foto ruimte om een fractie mee te
 * schuiven zonder dat er een rand in beeld komt.
 */
.hero__laag {
	opacity: 0;
}

.hero__laag:first-child {
	opacity: 1;
}

.hero__laag .sfeerbeeld__img {
	transform: scale(1.08);
}

/*
 * Het waas onder de tekst. Van onderen stevig — daar staat de kop — en naar
 * boven toe licht, zodat de foto blijft ademen. In de tint van `contrast`,
 * niet in los zwart: het moet dezelfde familie zijn als de voet.
 */
.hero__scherm::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent),
		color-mix(in srgb, var(--wp--preset--color--contrast) 36%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent)
	);
}

.hero__inhoud {
	position: relative;
	z-index: 1;
	width: 100%;
	/*
	 * Onderaan ligt 2,75rem extra vast voor de wenk, die daar los overheen
	 * staat. De ruimte krimpt mee op een laag scherm: bij een hero die de
	 * hele schermhoogte vult, is een vaste marge het eerste dat de knoppen
	 * onder de vouw duwt.
	 */
	padding-block: clamp(2rem, 5vh, 4rem) calc(clamp(1.5rem, 4vh, 4rem) + 2.75rem);
}

/*
 * Bij elke foto hoort een eigen tekst. De lagen liggen op elkaar in
 * hetzelfde rastervak, zodat de hoogte van de langste geldt en er niets
 * verspringt als de tekst wisselt. Alleen de actieve laag is zichtbaar en
 * bereikbaar; `hero-verhaal.js` verplaatst `is-actief` en zet `aria-hidden`
 * mee. Zonder JavaScript blijft het bij de eerste — die staat al in de
 * opmaak als actief.
 */
.hero__teksten {
	display: grid;
}

.hero__tekst {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
	/*
	 * De schaal komt van het script en volgt de scrollpositie: de tekst
	 * begint klein en staat op volle grootte als je zijn stuk uit hebt.
	 * Groeien vanaf de linkeronderhoek, want daar staat de tekst vast —
	 * vanuit het midden zou hij bij elke scrolstap zijwaarts schuiven.
	 */
	/*
	 * Alleen de maat volgt het scrollen, de helderheid niet: een tekst die
	 * doorschijnend binnenkomt leest slecht op het moment dat de bezoeker
	 * hem voor het eerst ziet. Het invagen bij een tekstwissel zit al in de
	 * overgang van de kop en de regel eronder.
	 */
	transform: scale(var(--redesign-tekstschaal, 1));
	transform-origin: left bottom;
	will-change: transform;
}

.hero__tekst.is-actief {
	visibility: visible;
	pointer-events: auto;
}

/*
 * Het inspringen: kop en tekstregel komen van onderen op, met een klein
 * verschil ertussen zodat het één beweging is en geen blok dat schuift.
 */
.hero__tekst > * {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity var(--redesign-duur) var(--redesign-soepel),
		transform var(--redesign-duur) var(--redesign-soepel);
}

.hero__tekst > *:nth-child(2) {
	transition-delay: 90ms;
}

.hero__tekst.is-actief > * {
	opacity: 1;
	transform: none;
}

.hero--verhaal .hero__titel {
	color: var(--wp--preset--color--base);
}

.hero--verhaal .hero__lead {
	max-width: 46ch;
	color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
}

/*
 * De koppen van laag twee en drie zijn `<p>`, niet `<h1>`: één pagina heeft
 * één hoofdkop, en die hoort bij de tekst die er zonder JavaScript staat.
 * Visueel zijn ze gelijk, dus nemen ze de koptypografie over.
 */
p.hero__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin-block: var(--wp--preset--spacing--m) 0;
}

.hero--verhaal .status {
	color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}

.hero--verhaal .status__stip {
	background: color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
}

.hero--verhaal .status--open .status__stip {
	background: color-mix(in srgb, var(--wp--preset--color--status-available) 85%, var(--wp--preset--color--base));
}

/*
 * De omlijnde knop krijgt op de foto een lichte rand in plaats van een
 * donkere. De extra `.wp-block-button` is nodig om te winnen van de
 * basisstijl verderop in dit bestand.
 */
.hero--verhaal .wp-block-button.is-style-omlijnd > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
}

.hero--verhaal .wp-block-button.is-style-omlijnd > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	color: var(--wp--preset--color--base);
}

/*
 * De scroll-aanwijzing: echte tekst, één regel, onderaan in het midden. Een
 * anker naar de eerste sectie eronder, dus hij wérkt ook als knop; het
 * script laat hem vervagen zodra het verhaal loopt.
 */
.hero__wenk {
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(var(--wp--preset--spacing--s) + var(--redesign-kop-speling, 0px));
	z-index: 1;
	margin: 0;
	text-align: center;
}

.hero__wenk a {
	display: inline-block;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
}

.hero__wenk a:hover,
.hero__wenk a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* ── Feitenstrook ──────────────────────────────────────────────────────── */

/*
 * Vier feiten naast elkaar, gescheiden door dezelfde 2px-lijn. Geen
 * iconen: het zijn feiten, geen beloftes.
 */
.feiten {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--l);
}

.feit__kop {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}

.feit__uitleg {
	font-size: var(--wp--preset--font-size--xs);
	margin-block: var(--wp--preset--spacing--xxxs) 0;
}

@media (min-width: 48rem) {
	.feiten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(1.5rem, 3vw, 3.5rem);
	}
}

/* ── Sectiekop met actie ───────────────────────────────────────────────── */

.sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--s);
}

.sectiekop__titel {
	margin-block: var(--wp--preset--spacing--xxs) 0;
}

.sectiekop__actie {
	margin-inline-start: auto;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s);
}

/* ── Voertuigkaarten ───────────────────────────────────────────────────── */

/*
 * De lijstreset hoort hier, niet bij het gebruik. Als Query Loop-sjabloon
 * ruimt WordPress de inspringing en de bolletjes zelf op; als handgemaakte
 * <ul> — zoals het wagenpark — niet, en dan staat het raster 40px
 * ingesprongen ten opzichte van de tekst eromheen.
 */
.voertuigen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--l);
	margin-block: var(--wp--preset--spacing--l) 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 34rem) {
	.voertuigen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.voertuigen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * De kaart is geen doos meer. Een omkaderde foto met nog twee lijnen
 * erbinnen las als een compartiment; nu staat de foto tot de rand en
 * hangt de tekst er los onder, op de ondergrond van de pagina. Dat is wat
 * autofotografie op een dure site doet: het beeld is het object, niet de
 * inhoud van een vakje.
 */
.voertuigen > li {
	position: relative;
	display: flex;
	flex-direction: column;
}

.voertuigen > li a {
	text-decoration: none;
	color: inherit;
}

.voertuigen > li:has(a:hover),
.voertuigen > li:has(a:focus-visible) {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--zacht);
}

.voertuigen .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--muted);
}

/*
 * Het aangeleverde ontwerp zet alle foto's op grijstinten. Voor de
 * autofoto's is dat hier bewust níét overgenomen: de kleur van een auto is
 * productinformatie, geen sfeer. Wil de opdrachtgever het toch grijs, dan is
 * het één regel: `filter: grayscale(1) contrast(1.08);`.
 */
/*
 * 3:2 in plaats van een vaste bandhoogte. Bij 13,375rem werd een 4:3-foto
 * boven en onder fors aangesneden; bij de M2 sneuvelde daardoor de helft van
 * de "nieuw binnen"-banner die in die foto gebrand zit, wat als een storing
 * las. Met 3:2 blijft de auto heel en scheelt de uitsnede aanzienlijk.
 */
.voertuigen .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	transition: transform 640ms var(--redesign-soepel);
}

.voertuigen > li:has(a:hover) .wp-block-post-featured-image img,
.voertuigen > li:has(a:focus-visible) .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.voertuig__body {
	padding-block-start: var(--wp--preset--spacing--s);
}

.voertuig__body > * {
	margin-block: 0;
}

.voertuig__body > * + * {
	margin-block-start: var(--wp--preset--spacing--xxs);
}

.voertuigen .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.02em;
	line-height: 1.18;
}

.voertuigen .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--xs);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

/*
 * Voettekst van de kaart. Waar in het ontwerp de prijs staat, staat hier
 * bewust géén prijs: er is nog geen voorraadkoppeling en prijzen worden
 * niet verzonnen (docs/04, beslissing 13).
 */
.voertuig__voet .wp-block-read-more::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--xxs);
	transition: transform var(--redesign-duur-kort) var(--redesign-soepel);
}

.voertuigen > li:has(a:hover) .wp-block-read-more::after,
.voertuigen > li:has(a:focus-visible) .wp-block-read-more::after {
	transform: translateX(0.25rem);
}

.voertuig__voet {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--xxs);
	margin-block-start: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}

/* Zonder kader draagt de link zelf de hover: een streep die aangroeit. */
.voertuigen .wp-block-read-more {
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--redesign-duur-kort) var(--redesign-soepel);
	padding-block-end: 0.15em;
}

.voertuigen > li:has(a:hover) .wp-block-read-more,
.voertuigen > li:has(a:focus-visible) .wp-block-read-more {
	background-size: 100% 1px;
	color: var(--wp--preset--color--primary);
}

/* ── Statuslabel ───────────────────────────────────────────────────────── */

/*
 * Echte tekst over de foto, geen banner die in het beeld gebrand zit. Zo kan
 * hij aan en uit zonder nieuwe foto, leest een schermlezer hem voor, en
 * overleeft hij elke uitsnede.
 *
 * "Nieuw binnen" staat in de accentkleur, op verzoek van de opdrachtgever
 * (2026-08-27). Dat wijkt af van de regel dat rood voorbehouden blijft aan
 * wat je kunt aanklikken; het sluit wel aan op de banner die zij zelf op hun
 * foto's zetten. "Verkocht" blijft donker: definitief, en het concurreert zo
 * niet met het label dat juist aandacht moet trekken.
 */
.voertuigstatus {
	margin: 0;
	align-self: flex-start;
	/*
	 * Een schaduw, want het label ligt op een foto en moet daar los van
	 * blijven. Zonder deze lift verdwijnt juist het rode label in de rode
	 * garagedeur die achter elke auto staat: gemeten 1,37:1 tussen label en
	 * deur. De witte tekst blijft daar leesbaar, maar het label leest dan
	 * niet meer als een label. Een schaduw werkt op zowel een lichte muur
	 * als een donkere auto; een rand in één kleur zou dat niet doen.
	 */
	box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Op een kaart ligt het label linksboven op de foto. */
.voertuigen > li .voertuigstatus {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
}

.voertuigstatus--nieuw {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.voertuigstatus--gereserveerd {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * Verkocht is definitief, dus donker: het haalt de auto visueel uit de rij
 * beschikbare wagens zonder hem te verbergen.
 */
.voertuigstatus--verkocht {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Op de detailpagina staat hij boven de titel, in de tekststroom. */
.voertuigdetail__aside .voertuigstatus {
	margin-block-end: var(--wp--preset--spacing--xxs);
}

/* ── Voorraadoverzicht ─────────────────────────────────────────────────── */

/*
 * Geen eigen padding meer: `.sectie` draagt de verticale ruimte. Anders
 * stapelen ze en staat er een gat van ruim 200px tussen de intro en het
 * raster.
 */
.voorraadkop {
	padding-block: 0;
}

.voorraadkop > * {
	margin-block: 0;
}

.voorraadkop > * + * {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.voorraadkop .wp-block-post-content {
	max-width: 60ch;
}

/*
 * Leesbare regellengte in een brede inhoudskolom.
 *
 * De container is breed omdat er rasters in staan (voorraad, wagenpark),
 * maar lopende tekst mag daar niet in meegroeien: op 1360px worden dat
 * regels van rond de 150 tekens, en dan verlies je bij het terugspringen de
 * volgende regel. Uitgezonderd is wat juist breed bedoeld is — de rasters,
 * de telrij, de specificaties en de uitrustingslijsten.
 *
 * De klasse `breedinhoud` stond al in `dienst.html` en `page-verhuur.html`,
 * maar de bijbehorende regel ontbrak in dit bestand; de dienstpagina's
 * liepen daardoor over de volle breedte.
 */
/*
 * De uitzondering is geen lijstje maar een regel: alles wat een eigen
 * componentklasse draagt is een raster of een strook en bepaalt zijn eigen
 * breedte. Lopende tekst heeft geen klasse en wordt dus wél begrensd. Dat
 * scheelt het najagen van elke nieuwe component — precies wat hier al twee
 * keer misging (het autorooster op 2026-08-27, het teamraster vandaag).
 */
.breedinhoud :where(p, h2, h3, h4, blockquote) {
	max-width: 62ch;
}

.breedinhoud :where(ul, ol, dl):not([class]),
.breedinhoud :where(ul, ol):is(.wp-block-list):not(.uitrusting) {
	max-width: 62ch;
}

/*
 * De telrij boven het raster. In het ontwerp staat hier ook een
 * sorteerkeuze; die is weggelaten omdat er niets is om op te sorteren
 * zolang de voorraadkoppeling niet bepaald is (docs/04, beslissing 13).
 */
.telrij {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}

.telrij > * {
	margin-block: 0;
}

/* De prijs-op-aanvraag-toelichting: één keer hier, niet herhaald per kaart. */
.telrij__notitie {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

@media (min-width: 48rem) {
	.telrij__notitie {
		margin-inline-start: auto;
	}
}

/* Paginering in dezelfde vormtaal: randen, geen pillen. */
.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--l);
	gap: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	text-decoration: none;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--contrast);
}

.wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ── Voertuigdetail ────────────────────────────────────────────────────── */

.kruimel {
	padding-block: var(--wp--preset--spacing--s) 0;
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}

.kruimel a {
	text-decoration: none;
}

.kruimel a::before {
	content: "\2190";
	display: inline-block;
	margin-inline-end: var(--wp--preset--spacing--xxs);
	transition: transform var(--redesign-duur-kort) var(--redesign-soepel);
}

.kruimel a:hover::before {
	transform: translateX(-0.25rem);
}

.voertuigdetail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--l);
	padding-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xxl);
}

.voertuigdetail > * {
	margin-block: 0;
}

@media (min-width: 62rem) {
	.voertuigdetail {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xl);
	}
}

/* ── Fotocarrousel ─────────────────────────────────────────────────────── */

/*
 * Het scrollen doet de browser: een horizontaal scrollbare lijst met
 * scroll-snap. Zonder JavaScript is dat al een werkende fotostrook — je
 * veegt hem met de hand. `carrousel.js` zet `is-actief` en toont dan pas de
 * knoppen, zodat er nooit een knop staat die niets doet.
 */
.carrousel {
	position: relative;
	background: var(--wp--preset--color--muted);
}

.carrousel__spoor {
	/* Positioneringscontext, zodat `offsetLeft` van een dia precies de
	   scrollpositie is die het script nodig heeft. */
	position: relative;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.carrousel__spoor::-webkit-scrollbar {
	display: none;
}

.carrousel__dia {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
}

.carrousel__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* De bediening staat op een balk onder de foto, niet eroverheen: geen
 * knoppen die de auto afdekken. */
.carrousel__bediening {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--xs);
}

.carrousel.is-actief .carrousel__bediening {
	display: flex;
}

.carrousel__knop {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--s);
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--muted);
	border: 0;
	border-radius: 0;
	transition: background-color var(--redesign-duur-kort) var(--redesign-soepel),
		color var(--redesign-duur-kort) var(--redesign-soepel);
}

.carrousel__knop:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.carrousel__knop:disabled {
	opacity: 0.35;
	cursor: default;
}

.carrousel__teller {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.carrousel__stippen {
	display: flex;
	gap: var(--wp--preset--spacing--xxs);
	margin-inline-start: auto;
}

/*
 * De stip is klein, maar het raakvlak niet: 2.5rem is de ondergrens voor
 * iets wat je met een duim moet raken. Het zichtbare blokje zit erbinnen.
 */
.carrousel__stip {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	border: 0;
}

.carrousel__stip::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

.carrousel__stip:hover::before {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

.carrousel__stip.is-actief::before {
	background: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.carrousel__spoor {
		scroll-behavior: auto;
	}
}

/* ── Vergroting ────────────────────────────────────────────────────────── */

/*
 * De knop om te vergroten wordt door `carrousel.js` om de foto heen gezet.
 * Zonder JavaScript bestaat hij niet, dus `cursor: zoom-in` staat nooit op
 * iets dat niet werkt.
 */
.carrousel__vergroot {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.carrousel__vergroot:focus-visible {
	outline-offset: -2px;
}

/*
 * Het venster is het native <dialog>: dat regelt Escape, focus vasthouden en
 * de pagina erachter inert maken. De donkere grond zit op het dialoogvenster
 * zelf en niet op ::backdrop, want daar erven de kleurtokens niet overal in.
 */
.vergroting {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	/*
	 * Volledig dekkend. Op 94% bleef 6% van de pagina zichtbaar, en dat is
	 * bij een lichte pagina genoeg om de rode knop en het actieblok te laten
	 * doorschemeren — gemeten: de grond kwam uit op #2C2A29 in plaats van de
	 * tekstkleur. Bij een foto wil je nul afleiding.
	 */
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
 * De indeling hangt aan [open], niet aan de klasse. Een `display`-waarde op
 * `.vergroting` zelf overschrijft de browserregel `dialog:not([open]) {
 * display: none }` — auteursstijlen winnen altijd van de UA-stylesheet — en
 * dan staat het venster permanent open over de pagina heen.
 */
.vergroting:not([open]) {
	display: none;
}

.vergroting[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	animation: redesign-vergroting-open var(--redesign-duur-kort) var(--redesign-soepel);
}

.vergroting::backdrop {
	background: none;
}

@keyframes redesign-vergroting-open {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.vergroting__balk {
	display: flex;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--gutter);
}

.vergroting__teller {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
}

/*
 * De teller staat tussen de pijlen, niet in een eigen hoek. Eerder stond er
 * een teller linksboven, een sluitknop rechtsboven en twee pijlen onderaan —
 * drie losse clusters in een groot leeg vlak. Nu één groep die je in één
 * blik leest.
 */
.vergroting__teller {
	min-width: 4rem;
	text-align: center;
}

/* Klikken naast de foto sluit; de aanwijzer zegt dat ook. */
.vergroting__vlak {
	position: relative;
	min-height: 0;
	cursor: zoom-out;
}

/*
 * `contain`, niet `cover`: in de vergroting hoort de hele foto te passen.
 * Geen grijstinten hier — dit is de auto zelf, en kleur is dan informatie.
 */
/*
 * Absoluut binnen het vak in plaats van een gecentreerd rasteritem. Met
 * `height: 100%` op een rasteritem loste het percentage niet op — de foto
 * hield zijn natuurlijke hoogte en liep onderaan over de knoppen heen. Met
 * vier insets staat de doos vast en doet `object-fit: contain` de rest.
 */
.vergroting__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--gutter);
	object-fit: contain;
	cursor: default;
}

.vergroting__bediening {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--m);
}

.vergroting__knop {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--s);
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	border: 0;
	border-radius: 0;
	transition:
		background-color var(--redesign-duur-kort) var(--redesign-soepel),
		border-color var(--redesign-duur-kort) var(--redesign-soepel);
}

.vergroting__knop:hover:not(:disabled) {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.vergroting__knop:disabled {
	opacity: 0.35;
	cursor: default;
}

.vergroting__knop:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Beeldvak zonder absoluut geplaatste ouder, voor een auto zonder foto's. */
.beeldvak--vast {
	position: static;
	min-height: 18rem;
}

/*
 * De inhoudskolom: specificatietabel en beschrijving. De koppen krijgen
 * ruimte bóven zich, zodat de tabel en de tekst als aparte blokken lezen.
 */
.voertuigdetail__inhoud > * {
	margin-block: 0;
}

.voertuigdetail__inhoud > * + * {
	margin-block-start: var(--wp--preset--spacing--m);
}

.voertuigdetail__inhoud h2 {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/*
 * Het tabelblok van WordPress zet standaard een rand om elke cel. Hier is
 * alleen de horizontale scheiding zinvol — dat is een van de drie lijnen
 * die de site nog heeft, want zonder scheiding lopen de rijen in elkaar.
 */
.voertuigdetail__inhoud .wp-block-table td {
	padding: var(--wp--preset--spacing--xs) 0;
	border: 0;
	border-bottom: var(--redesign-lijn);
	font-size: var(--wp--preset--font-size--s);
}

.voertuigdetail__inhoud .wp-block-table tr:last-child td {
	border-bottom: 0;
}

.voertuigdetail__inhoud .wp-block-table td:first-child {
	width: 40%;
	font-weight: 700;
}

.voertuigdetail__inhoud .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

/* Fotostrook onder de hoofdfoto. */
.voertuigdetail__inhoud .wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* De actiekolom. Blijft meelopen bij het scrollen, onder de sticky sitekop. */
/*
 * Het actieblok wordt niet meer omkaderd maar opgetild met een eigen
 * ondergrond. Een zwart kader van 2px was het zwaarste element op een
 * pagina waar verder geen enkele lijn meer staat; een rustvlak met ruime
 * marge zet het even duidelijk apart zonder te schreeuwen.
 */
.voertuigdetail__aside {
	background: var(--wp--preset--color--muted);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	align-self: start;
}

@media (min-width: 62rem) {
	/*
	 * top mag hier niet op de gebruikelijke sectieafstand staan: de sitekop
	 * is zelf sticky (zie § Sitekop) en blijft na het scrollen
	 * zichtbaar op zijn eigen hoogte. Met een kleinere afstand hier zou de
	 * kop de bovenkant van dit blok (titel, belknop) overlappen zodra het
	 * gaat kleven. xxxl is ruim boven de gemeten kophoogte (~5,5rem).
	 */
	.voertuigdetail__aside {
		position: sticky;
		top: var(--wp--preset--spacing--xxxl);
	}
}

.voertuigdetail__aside > * {
	margin-block: 0;
}

.voertuigdetail__aside > * + * {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.voertuigdetail__aside .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.voertuigdetail__aside .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--m);
}

.voertuigdetail__aside .wp-block-button {
	width: 100%;
}

.voertuigdetail__aside .wp-block-button__link {
	width: 100%;
	justify-content: center;
}

/*
 * De openingsstatus staat hier direct onder de belknop. "Bel over deze auto"
 * is een andere beslissing als je weet dat er nu iemand is; op de homepage
 * beantwoordt de status "kan ik langs?", hier "heeft bellen nu zin?".
 */
.voertuigdetail__aside .status {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/*
 * De zekerheden onder de knoppen. Alleen feiten die op de werkplaatspagina
 * van de live site staan (BOVAG, APK, NAP) — geen beloftes die we niet
 * kunnen nakijken.
 */
.zekerheden {
	list-style: none;
	padding: 0;
	margin-block-start: var(--wp--preset--spacing--m);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--xs);
}

.zekerheden li {
	display: flex;
	gap: var(--wp--preset--spacing--xxs);
	align-items: baseline;
}

.zekerheden li::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--wp--preset--color--primary);
}

/* ── Dienstenraster ────────────────────────────────────────────────────── */

/*
 * De zes diensten als raster.
 *
 * De nummers 01–06 zijn eruit. Ze suggereerden een volgorde die er niet
 * is: je doet "auto invoeren" niet ná "gebruikte auto kopen", het zijn
 * zes losse diensten. Een genummerd markering hoort bij een proces of een
 * tijdlijn, en dit is geen van beide. Zonder de nummers is het rood ook
 * weer voorbehouden aan wat je kunt aanklikken.
 */
/*
 * Hier zat de dubbele rand die opviel: elke cel had een onderrand én de
 * sectie eronder ook, dus twee lijnen een paar pixels uit elkaar. Alle
 * cellijnen zijn eruit; het raster leest nu uit de tussenruimte.
 */
.diensten {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3vw, 3rem);
}

@media (min-width: 34rem) {
	.diensten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.diensten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dienst__titel {
	margin-block: 0;
}

.dienst {
	margin-block: 0;
}

.dienst__tekst {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	margin-block: var(--wp--preset--spacing--xxs) 0;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

/* ── Uitspraakband ─────────────────────────────────────────────────────── */

/*
 * Het enige grote gevulde vlak op de pagina, in de merkkleur. Eén keer
 * gebruiken, anders verliest het zijn functie.
 */
.uitspraak {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.uitspraak :where(h1, h2, h3, p, a) {
	color: var(--wp--preset--color--base);
}

.uitspraak__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--m);
	align-items: end;
	padding-block: var(--wp--preset--spacing--xxl);
}

@media (min-width: 48rem) {
	.uitspraak__raster {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xl);
		padding-block: var(--wp--preset--spacing--xxxl);
	}
}

/* Omgekeerde knop op het rode vlak: wit met donkere tekst. */
.uitspraak .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.uitspraak .wp-block-button__link:hover {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}

.uitspraak .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* ── Contactgegevens ───────────────────────────────────────────────────── */

.gegevens {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--m);
	margin-block-start: var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--s);
}

.gegevens dt {
	font-weight: 700;
	margin: 0;
}

.gegevens dd {
	margin: 0;
}

/* ── Team ──────────────────────────────────────────────────────────────── */

/*
 * Zelfde ritme als de voertuig- en huurkaarten: portret boven, tekst los
 * eronder, geen kader. Vier op een rij, want een team van zestien leest
 * anders als een eindeloze kolom.
 */
.team {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
	margin-block: var(--wp--preset--spacing--m) 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.team {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Afbreken toestaan in de hele kaart. Niet alleen e-mailadressen zijn te
 * lang voor een kolom van 152px op een telefoon; functies als
 * "Gastvrouw/Interieurverzorgster" zijn één onbreekbaar woord van zo'n
 * 180px en duwden de pagina 18px breder dan het scherm.
 */
.teamlid {
	min-width: 0;
	overflow-wrap: anywhere;
}

.teamlid > * {
	margin: 0;
}

/*
 * De verhouding staat op het vak, niet op de foto. Op de <img> verliest
 * `aspect-ratio` van het `height`-attribuut dat WordPress meestuurt: de
 * portretten kwamen dan op 322x300 uit terwijl de initialenvakken 322x322
 * waren, en daardoor liepen de rijen niet gelijk.
 */
.teamlid__beeld {
	background: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--xs);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.teamlid__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Portretten zijn op verschillende momenten en met verschillende
	 * uitsneden gemaakt. Grijstinten maken er één serie van; bij de
	 * autofoto's is kleur informatie, bij portretten niet.
	 */
	filter: grayscale(1) contrast(1.05);
}

/*
 * Acht van de zestien mensen hebben geen portret op de bronsite. Een lege
 * plek zou het raster rafelig maken en een foto verzinnen kan niet — de
 * initialen komen uit de echte naam en houden de rij heel.
 */
.teamlid__beeld--leeg {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

.teamlid__naam {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.02em;
	line-height: 1.18;
}

.teamlid__rol {
	font-size: var(--wp--preset--font-size--xs);
	margin-block-start: var(--wp--preset--spacing--xxxs);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

.teamlid__contact {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	margin-block-start: var(--wp--preset--spacing--xxs);
}

/* ── Huurvloot ─────────────────────────────────────────────────────────── */

/*
 * Het wagenpark hergebruikt het raster van het voorraadoverzicht
 * (`.voertuigen`), zodat beide pagina's hetzelfde ritme hebben. Alleen de
 * beeldbehandeling verschilt: voorraadfoto's zijn opnames op locatie en
 * vullen hun vak, huurfoto's zijn uitgesneden studioplaten die je heel moet
 * laten zien.
 */
/*
 * Zuiver wit, niet `base` (#f3f2f2): de huurfoto's zijn uitgesneden op een
 * witte studio-achtergrond. Op een grijzige plaat wordt de snijrand van de
 * uitsnede zichtbaar als een lichte halo rond de auto.
 */
.huurauto__beeld {
	background: var(--wp--custom--kleur--fotoplaat);
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--s);
}

/*
 * Vaste hoogte, geen `aspect-ratio`: WordPress zet `width`- en
 * `height`-attributen op de <img>, en die hoogte won het van de
 * beeldverhouding — de vakken werden dan zo hoog als de bronfoto toevallig
 * was (gemeten: 454px in een vak van 312 breed).
 */
.huurauto__foto {
	display: block;
	width: 100%;
	height: 8.5rem;
	object-fit: contain;
}

.huurauto__naam {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.02em;
	line-height: 1.18;
	margin: 0;
}

/* De prijs is waar een huurder op scant, dus die krijgt de kleur — maar niet
 * ook nog een eigen maat: hetzelfde formaat als de naam houdt de kaart rustig. */
.huurauto__prijs {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.huurauto__regel {
	font-size: var(--wp--preset--font-size--xs);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

/* ── Contactpersoon ────────────────────────────────────────────────────── */

/*
 * Eén gezicht bij een dienst. Op de bronsite staat Sjaak onder de
 * verhuurpagina; dat is nuttiger dan een algemeen telefoonnummer, want je
 * weet wie je aan de lijn krijgt.
 */
.contactpersoon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--muted);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	margin-block-start: var(--wp--preset--spacing--l);
}

.contactpersoon__foto {
	flex: none;
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	object-position: top center;
}

.contactpersoon__tekst > * {
	margin: 0;
}

.contactpersoon__naam {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.02em;
	margin-block-start: var(--wp--preset--spacing--xxxs);
}

.contactpersoon__gegevens {
	font-size: var(--wp--preset--font-size--s);
	margin-block-start: var(--wp--preset--spacing--xxs);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--m);
	font-weight: 700;
}

/* ── Uitgelicht blok ───────────────────────────────────────────────────── */

/*
 * Het omkaderde blok op de dienstpagina's ("Vragen? Bel ons"). Vervangt
 * het vorige `dienstblok` met gevuld vlak en afgeronde hoeken: in dit
 * systeem is een kader een rand van 2px, verder niets.
 */
.callout {
	background: var(--wp--preset--color--muted);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.callout > * {
	margin-block: 0;
}

.callout > * + * {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* Rustige verticale marge op de sjablonen zonder eigen sectieritme. */
.paginainhoud {
	padding-block: var(--wp--preset--spacing--xl);
}

/* ── Beeldvak ──────────────────────────────────────────────────────────── */

/*
 * Waar het ontwerp een foto toont hebben wij er nog geen: er is geen
 * eigen beeldmateriaal aangeleverd en dat verzinnen we niet. Het vak is
 * daarom zichtbaar een placeholder — een gearceerd vlak met een label —
 * zodat niemand het aanziet voor een afgewerkte pagina.
 */
.beeldvak {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--m);
	background-color: var(--wp--preset--color--muted);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 0.75rem,
		color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 0.75rem 1.5rem
	);
}

/*
 * Het echte sfeerbeeld, zodra er een foto in het slot zit. Grijstinten zijn
 * hier wél overgenomen uit het ontwerp: dit zijn sfeerbeelden, geen
 * productfoto's — bij de autofoto's is kleur juist informatie.
 */
.sfeerbeeld {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sfeerbeeld__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08);
}

/*
 * De kaart krijgt geen grijstinten. Bij een sfeerfoto is kleur stemming, bij
 * een kaart is het informatie: het water, het groen en de markering in de
 * merkkleur zijn precies waar je op leest. Wel gedempt, zodat hij naast de
 * grijze herofoto niet gaat schreeuwen.
 */
.sfeerbeeld--locatie .sfeerbeeld__img {
	filter: saturate(0.55);
}

/* Bronvermelding: klein, maar leesbaar en nooit weggesneden. */
.sfeerbeeld__bron {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--xxs);
	color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}

.beeldvak__label {
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	margin: 0;
}

/* ── Sitekop ───────────────────────────────────────────────────────────── */

/*
 * Eén balk: logo, navigatie en de twee acties. Hij blijft bij het scrollen
 * staan, op zijn volle hoogte.
 *
 * Hier stond eerder een donkere topbalk boven met adres, openingstijden en
 * de claim. Die is er op verzoek van de opdrachtgever af: hij kostte bij
 * elke pagina leeshoogte, en op de voorpagina moest je er eerst 36px
 * doorheen scrollen voordat het herobeeld begon te lopen. De gegevens
 * staan onveranderd in de voet, en de openingsstatus staat in de hero.
 */
.sitekop {
	z-index: 30;
	background: var(--wp--preset--color--base);
	border-bottom: var(--redesign-lijn);
}

/*
 * Meelopen bij het scrollen doet hij alleen vanaf 48rem. Op een smal
 * scherm is een vaste balk van zo'n 76px puur verlies aan leeshoogte;
 * daar scrolt de kop gewoon mee weg.
 */
@media (min-width: 48rem) {
	.sitekop {
		position: sticky;
		top: 0;
	}
}

.sitekop__inhoud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--xs);
}

.sitekop__merk .wp-block-image,
.sitekop__merk figure {
	margin: 0;
}

.sitekop .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}

.sitekop .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sitekop .wp-block-navigation a:hover,
.sitekop .wp-block-navigation .current-menu-item a,
.sitekop .wp-block-navigation a.is-huidig {
	color: var(--wp--preset--color--primary);
}

.sitekop__acties {
	margin-inline-start: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
}

/*
 * Secundaire knop: alleen een rand. Dit is een van de weinige plekken waar
 * een lijn blijft — bij een knop is de rand de vorm zelf, niet decoratie.
 */
.is-style-omlijnd > .wp-block-button__link,
.wp-block-button.is-style-omlijnd > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

.is-style-omlijnd > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* ── Menupaneel (mobiel) ───────────────────────────────────────────────── */

/*
 * Het mobiele menu is de kern-overlay van WordPress, opnieuw aangekleed —
 * niet nagebouwd. Dat gedrag (focus die in het paneel blijft, Esc sluit,
 * de juiste aria-attributen) is precies het soort werk dat je zelf zelden
 * foutloos krijgt; wat hier staat is uitsluitend vorm.
 *
 * Naar het voorbeeld dat de opdrachtgever aanwees: een paneel dat van
 * rechts komt en het scherm bijna dekt, items in kapitalen onder elkaar,
 * de huidige pagina in de merkkleur met een streep, en onder een deellijn
 * de contactgegevens. Van de referentie niet overgenomen: hun goudtint (wij
 * hebben het merkrood) en de rij social-iconen — Steketee heeft die
 * kanalen niet, dus dan staat er niets.
 */
.sitekop .wp-block-navigation__responsive-container.is-menu-open {
	/*
	 * De donkere sluier: het paneel dekt niet alles, links blijft de pagina
	 * staan. De `.sitekop` ervoor is nodig om van de kernstijl te winnen,
	 * die hier wit neerzet.
	 */
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	padding: 0;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	width: 100%;
	height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(22rem, 88%);
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--gutter);
	background: var(--wp--preset--color--base);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: redesign-paneel-in 280ms var(--redesign-soepel);
}

@keyframes redesign-paneel-in {
	from { transform: translateX(100%); }
	to   { transform: none; }
}

/* De sluitknop: gevuld vierkant rechtsboven, zoals in het voorbeeld. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-block-start: var(--wp--preset--spacing--l);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--m);
}

.sitekop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--l);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * De huidige pagina in de merkkleur, met een streep eronder. De streep is
 * belangrijker dan hij lijkt: kleur alleen zou het enige onderscheid zijn,
 * en dat is voor wie kleur slecht onderscheidt geen onderscheid.
 */
.sitekop .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content,
.sitekop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.is-huidig {
	color: var(--wp--preset--color--primary);
	border-bottom: 2px solid currentColor;
	padding-block-end: var(--wp--preset--spacing--xxs);
}

/* Contactgegevens onder een deellijn; opgebouwd in functions.php. */
.menupaneel__contact {
	/*
	 * De inhoudskolom van de kern-overlay laat zijn kinderen niet uitrekken,
	 * en dan loopt de deellijn tot waar de langste regel eindigt in plaats
	 * van tot de rand van het paneel.
	 */
	width: 100%;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--l);
	border-top: var(--redesign-lijn);
}

.menupaneel__regel + .menupaneel__regel {
	margin-block-start: var(--wp--preset--spacing--m);
}

.menupaneel__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}

.menupaneel__waarde {
	margin-block: var(--wp--preset--spacing--xxxs) 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.menupaneel__waarde a {
	color: inherit;
	text-decoration: none;
}

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

/*
 * Op breed scherm staat het contactblok wel in de HTML — het navigatieblok
 * rendert één keer voor beide maten — maar hoort het er niet te staan.
 */
@media (min-width: 48rem) {
	.menupaneel__contact {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		animation: none;
	}
}

/* ── Kenmerken (badges op een voertuig) ────────────────────────────────── */

/*
 * Bouwjaar, kilometerstand, brandstof en transmissie als losse vlakjes onder
 * de titel — de vier dingen waar een koper meteen op kijkt. Naar het
 * voorbeeld dat de opdrachtgever aanwees, maar in de eigen vormtaal:
 * rechthoekig (afronding is overal 0 in dit systeem) en op de `muted`-tint,
 * niet in een eigen grijs.
 *
 * Wat leeg is, staat er niet. Liever drie badges dan een vierde met
 * "onbekend" erin.
 */
.kenmerken {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs);
	margin-block: var(--wp--preset--spacing--xs) 0;
	padding: 0;
	list-style: none;
}

.kenmerk {
	padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * Het label ("Bouwjaar: ") staat er voor wie de pagina laat voorlezen: op
 * het scherm spreekt "2019" naast "84.500 km" voor zich, maar als losse
 * reeks voorgelezen doet het dat niet.
 */
.kenmerk__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * De prijs is geen kenmerk tussen de andere: hij krijgt een eigen regel,
 * groter en zwaarder. Staat er geen prijs, dan zegt de kaart dat ook —
 * zwijgen laat de bezoeker raden, "op aanvraag" is een antwoord.
 */
.voertuigprijs {
	margin-block: var(--wp--preset--spacing--xs) 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.voertuigprijs--aanvraag {
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent);
}

/*
 * Op de detailpagina staan ze in de actiekolom, met wat meer lucht erboven.
 * Die kolom heeft zelf de `muted`-tint, dus daar zou een badge in dezelfde
 * tint onzichtbaar zijn: op de detailpagina staan ze op de paginakleur.
 */
.voertuigdetail__aside .kenmerken {
	margin-block-start: var(--wp--preset--spacing--s);
}

.voertuigdetail__aside .kenmerk {
	background: var(--wp--preset--color--base);
}

/* Op de detailpagina is de prijs het antwoord op de hoofdvraag: groter. */
.voertuigdetail__aside .voertuigprijs {
	margin-block-start: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--xl);
}

.voertuigdetail__aside .voertuigprijs--aanvraag {
	font-size: var(--wp--preset--font-size--m);
}

/* ── Specificaties (detailpagina) ──────────────────────────────────────── */

/*
 * De volledige specificaties onder de foto's, naar het raamwerk van de
 * referentie: kolommen met label-waardeparen, gescheiden door dezelfde
 * haarlijn als de rest van het systeem. Geen tabel met randen, geen zebra —
 * zakelijk is hier: alles op één lijn en niets dat afleidt.
 */
.specs {
	margin-block-start: var(--wp--preset--spacing--xl);
	padding-block-start: var(--wp--preset--spacing--l);
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.specs__titel {
	margin-block: 0 var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--l);
}

.specs__lijst {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}

@media (min-width: 34rem) {
	.specs__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--xl);
	}

	.specrij--breed {
		grid-column: 1 / -1;
	}
}

/*
 * Label en waarde op één regel, met de waarde rechts uitgelijnd: zo lopen de
 * waarden onder elkaar en is de lijst in één blik af te lezen.
 */
.specrij {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--xs);
	border-bottom: var(--redesign-lijn);
}

.specrij dt {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent);
	font-size: var(--wp--preset--font-size--xs);
}

.specrij dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* De uitvoering onder de modelnaam: de tweede regel van de kop, niet los. */
.voertuiguitvoering {
	margin-block: var(--wp--preset--spacing--xxs) 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	text-wrap: pretty;
}

/* ── Uitrusting (optielijsten op de detailpagina) ──────────────────────── */

/*
 * Tot negentig opties per auto. Onder elkaar wordt dat een kolom van meters;
 * in kolommen is het een lijst die je scant. `break-inside` voorkomt dat een
 * regel van twee regels over de kolomgrens breekt.
 */
.uitrusting {
	margin-block: 0 var(--wp--preset--spacing--l);
	padding-inline-start: var(--wp--preset--spacing--m);
	column-gap: var(--wp--preset--spacing--xl);
}

/*
 * Op een telefoon één kolom: bij twee kolommen blijft er per kolom zo weinig
 * over dat "Buitenspiegels elektrisch verstelbaar" op vier regels komt — dan
 * scan je niets meer. Pas vanaf 34rem loont een tweede kolom.
 */
@media (min-width: 34rem) {
	.uitrusting {
		columns: 2;
	}
}

@media (min-width: 62rem) {
	.uitrusting {
		columns: 3;
	}
}

.uitrusting li {
	break-inside: avoid;
	margin-block-end: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--xs);
}

/* De categoriekop hoort bij de lijst eronder, niet los erboven te zweven. */
.voertuigdetail__inhoud h3 {
	margin-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--m);
}

.voertuigdetail__inhoud h2 {
	margin-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--l);
}

/* ── Sitevoet ──────────────────────────────────────────────────────────── */

.sitevoet {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sitevoet :where(p, a, li, div) {
	color: var(--wp--preset--color--base);
}

.sitevoet a {
	text-decoration: none;
}

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

.sitevoet__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--l);
	padding-block: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--m);
}

@media (min-width: 34rem) {
	.sitevoet__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.sitevoet__raster {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

.sitevoet__kop {
	font-size: var(--wp--preset--font-size--xxxs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.sitevoet__zacht {
	color: color-mix(in srgb, var(--wp--preset--color--base) 68%, transparent);
}

.sitevoet__zacht a {
	color: color-mix(in srgb, var(--wp--preset--color--base) 68%, transparent);
}

.sitevoet__lijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--xs);
}

.sitevoet__slot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--s) var(--wp--preset--spacing--l);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
	font-size: var(--wp--preset--font-size--xxs);
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
}

.sitevoet__slot > :last-child {
	margin-inline-start: auto;
}

.sitevoet__slot p {
	margin: 0;
	color: inherit;
}

/* ── Knoppen ───────────────────────────────────────────────────────────── */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--redesign-duur-kort) var(--redesign-soepel),
		color var(--redesign-duur-kort) var(--redesign-soepel),
		border-color var(--redesign-duur-kort) var(--redesign-soepel);
}

/* De omlijnde knop vult zich bij hover in plaats van licht te grijzen —
 * dat leest als één beslissing in plaats van als een muisover. */
.is-style-omlijnd > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ── Beweging ──────────────────────────────────────────────────────────── */

/*
 * Twee bewegingen, meer niet: de hero komt bij het laden gefaseerd binnen,
 * en elke sectie daaronder verschijnt één keer als je hem bereikt. Beide
 * lopen alleen als `beweging.js` de klasse `js-beweging` heeft gezet, zodat
 * er zonder JavaScript nooit iets onzichtbaar blijft staan.
 */
.js-beweging .onthul {
	opacity: 0;
	transform: translateY(0.625rem);
}

.js-beweging .onthul.is-zichtbaar {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--redesign-duur) var(--redesign-soepel),
		transform var(--redesign-duur) var(--redesign-soepel);
}

/*
 * De hero wacht niet op scrollen — die komt direct binnen, van boven naar
 * beneden in de leesvolgorde. `--i` zet de trapsgewijze vertraging.
 */
.js-beweging .hero__inhoud > *:nth-child(1) { --i: 0; }
.js-beweging .hero__inhoud > *:nth-child(2) { --i: 1; }
.js-beweging .hero__inhoud > *:nth-child(3) { --i: 2; }
.js-beweging .hero__inhoud > *:nth-child(4) { --i: 3; }

.js-beweging .hero__inhoud > * {
	opacity: 0;
	transform: translateY(0.75rem);
	animation: redesign-binnenkomst var(--redesign-duur) var(--redesign-soepel) forwards;
	animation-delay: calc(var(--i, 0) * 80ms);
}

/*
 * De wenk doet bewust niet mee met de binnenkomst-animatie: een animatie
 * met `forwards` zou de opacity blijven vasthouden, en het scrollscript
 * moet hem via de inline stijl kunnen laten vervagen.
 */
.hero__wenk {
	transition: opacity var(--redesign-duur-kort) linear;
}

.js-beweging .detail-binnenkomst > * {
	--i: 0;
	opacity: 0;
	transform: translateY(0.75rem);
	animation: redesign-binnenkomst var(--redesign-duur) var(--redesign-soepel) forwards;
	animation-delay: calc(var(--i, 0) * 80ms);
}

.js-beweging .voertuigdetail__inhoud { --i: 0; }
.js-beweging .voertuigdetail__aside { --i: 1; }

.js-beweging .voertuigdetail > * {
	opacity: 0;
	transform: translateY(0.75rem);
	animation: redesign-binnenkomst var(--redesign-duur) var(--redesign-soepel) forwards;
	animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes redesign-binnenkomst {
	to { opacity: 1; transform: none; }
}

/*
 * Het beeld komt niet mee omhoog maar vervaagt rustig in: een foto die
 * verspringt trekt de aandacht van de kop weg.
 */
.js-beweging .hero__lagen {
	opacity: 0;
	animation: redesign-beeld-open var(--redesign-duur) var(--redesign-soepel) forwards;
}

@keyframes redesign-beeld-open {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	/* Geen meegroeiende tekst; het script zet de schaal dan sowieso niet. */
	.hero__tekst {
		transform: none;
	}

	/*
	 * Alles staat meteen goed. Niet alleen de duur op nul: de begintoestand
	 * moet ook weg, anders blijft er iets op opacity 0 hangen.
	 */
	.js-beweging .onthul,
	.js-beweging .hero__inhoud > *,
	.js-beweging .voertuigdetail > *,
	.js-beweging .hero__lagen {
		opacity: 1;
		transform: none;
		clip-path: none;
		animation: none;
	}
}

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