/* ------------------------------------------------------------------
   Sectiekoppen
   ------------------------------------------------------------------ */

.sz-kop {
	max-width: 46rem;
	margin-bottom: var(--sz-kop-onder);
}
.sz-kop--midden {
	margin-inline: auto;
	text-align: center;
}

.sz-kop__label {
	display: flex;
	align-items: center;
	gap: var(--sz-r-3);
	margin-bottom: var(--sz-r-3);
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-accent-diep);
}
.sz-kop--midden .sz-kop__label { justify-content: center; }

.sz-sectie--donker .sz-kop__label { color: var(--sz-accent); }

.sz-kop h2 { margin-bottom: var(--sz-r-4); }

.sz-kop__intro {
	font-size: var(--sz-t-l);
	line-height: 1.6;
	color: var(--sz-inkt-vaag);
	margin-bottom: 0;
}
.sz-sectie--donker .sz-kop__intro { color: var(--sz-op-donker-vaag); }

/* Klapregel in de logostijl: zwaar, schuin, in kapitalen. Voor de
   regel van een sectiekop die eruit moet springen. */
.sz-klap {
	display: block;
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--sz-accent-diep);
}
.sz-sectie--donker .sz-klap { color: var(--sz-accent); }

/* ------------------------------------------------------------------
   Definitieblok

   Het antwoord dat in featured snippets en AI-overzichten moet landen.
   Visueel apart, tekstueel gewoon een alinea.
   ------------------------------------------------------------------ */

.sz-definitie {
	position: relative;
	padding: var(--sz-r-6);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-definitie::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}

/* De accentstreep links: dit is het antwoord. */
.sz-definitie::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--sz-accent);
}

.sz-definitie__vraag {
	display: block;
	margin-bottom: var(--sz-r-3);
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sz-inkt);
}

.sz-definitie p {
	color: var(--sz-inkt-zacht);
	max-width: 62ch;
}
.sz-definitie p:first-of-type {
	font-size: var(--sz-t-l);
	font-weight: 500;
	line-height: 1.55;
	color: var(--sz-inkt);
}

/* ------------------------------------------------------------------
   Kaarten
   ------------------------------------------------------------------ */

.sz-kaart {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--sz-r-5);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	transition: box-shadow var(--sz-normaal) var(--sz-soepel);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-kaart::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}

.sz-kaart--link { text-decoration: none; color: inherit; }
.sz-kaart--link:hover {
	color: inherit;
	--sz-randkleur: var(--sz-accent);
	--sz-randdikte: 2px;
}

.sz-sectie--vlak .sz-kaart { --sz-vlakkleur: var(--sz-wit); }

.sz-sectie--donker .sz-kaart {
	--sz-randkleur: var(--sz-inkt-3);
	--sz-vlakkleur: var(--sz-inkt-2);
	color: var(--sz-op-donker);
}

/* Icoon in een vierkantje met de afgesneden hoek van het merk. */
.sz-kaart__icoon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	margin-bottom: var(--sz-r-4);
	background: var(--sz-inkt);
	color: var(--sz-accent);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek-s)) 0,
		100% var(--sz-hoek-s),
		100% 100%,
		0 100%
	);
}
.sz-sectie--donker .sz-kaart__icoon {
	background: rgba(255, 106, 19, 0.14);
}

.sz-kaart__titel {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-bottom: var(--sz-r-2);
	color: var(--sz-inkt);
}
.sz-sectie--donker .sz-kaart__titel { color: var(--sz-wit); }

.sz-kaart__tekst {
	color: var(--sz-inkt-vaag);
	font-size: var(--sz-t-s);
	line-height: 1.6;
	margin-bottom: 0;
}
.sz-sectie--donker .sz-kaart__tekst { color: var(--sz-op-donker-vaag); }

.sz-kaart__voet {
	margin-top: auto;
	padding-top: var(--sz-r-4);
}

/* ------------------------------------------------------------------
   Lijst met vinkjes
   ------------------------------------------------------------------ */

.sz-vinklijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sz-r-3);
}

.sz-vinklijst li {
	display: flex;
	align-items: flex-start;
	gap: var(--sz-r-3);
	margin: 0;
	min-width: 0;
	font-size: var(--sz-t-m);
	line-height: 1.55;
}

.sz-vinklijst svg {
	flex-shrink: 0;
	margin-top: 0.2em;
	color: var(--sz-accent);
}

.sz-vinklijst--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--sz-r-3) var(--sz-r-6);
}

/* ------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------ */

.sz-kruimels {
	padding-block: var(--sz-r-2);
	font-size: var(--sz-t-xxs);
	letter-spacing: 0.01em;
	color: var(--sz-inkt-vaag);
}

/* Het kruimelpad heeft een eigen omhulsel, maar staat in een hero al
   binnen een omhulsel. Dan telt de zijmarge dubbel en staat het pad
   ingesprongen ten opzichte van de kop eronder. */
.sz-omhulsel .sz-kruimels .sz-omhulsel {
	padding-inline: 0;
	max-width: none;
}

.sz-kruimels ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sz-r-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-kruimels li { margin: 0; display: flex; align-items: center; gap: var(--sz-r-2); }
.sz-kruimels li:not(:last-child)::after {
	content: '/';
	color: var(--sz-lijn);
}
.sz-kruimels a { color: var(--sz-inkt-vaag); text-decoration: none; }
.sz-kruimels a:hover { color: var(--sz-accent-diep); text-decoration: underline; }
.sz-kruimels [aria-current='page'] { color: var(--sz-inkt); font-weight: 500; }

/* In een donkere hero. Het kruimelpad is oriëntatie, geen inhoud: het
   hoort de kop niet te beconcurreren. Vandaar geen lijn eronder en een
   kleur die net leesbaar blijft. */
.sz-sectie--donker .sz-kruimels,
.sz-paginahero .sz-kruimels,
.sz-hero .sz-kruimels {
	color: rgba(255, 255, 255, 0.34);
	border-bottom: 0;
}

.sz-sectie--donker .sz-kruimels a,
.sz-paginahero .sz-kruimels a,
.sz-hero .sz-kruimels a { color: rgba(255, 255, 255, 0.34); }

.sz-sectie--donker .sz-kruimels a:hover,
.sz-paginahero .sz-kruimels a:hover,
.sz-hero .sz-kruimels a:hover { color: var(--sz-amber); }

.sz-sectie--donker .sz-kruimels li:not(:last-child)::after,
.sz-paginahero .sz-kruimels li:not(:last-child)::after,
.sz-hero .sz-kruimels li:not(:last-child)::after { color: rgba(255, 255, 255, 0.18); }

.sz-sectie--donker .sz-kruimels [aria-current='page'],
.sz-paginahero .sz-kruimels [aria-current='page'],
.sz-hero .sz-kruimels [aria-current='page'] {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 400;
}

/* ------------------------------------------------------------------
   Vrije tekst uit de editor
   ------------------------------------------------------------------ */

.sz-prose { max-width: 46rem; }
.sz-prose > h2 { margin-top: var(--sz-r-7); }
.sz-prose > h3 { margin-top: var(--sz-r-6); }
.sz-prose > h2:first-child,
.sz-prose > h3:first-child { margin-top: 0; }
.sz-prose ul, .sz-prose ol { padding-left: 1.35rem; }
.sz-prose table { width: 100%; border-collapse: collapse; }

/* ------------------------------------------------------------------
   Wat is een spoedzending: kop links, het definitieblok rechts.
   ------------------------------------------------------------------ */

.sz-specialisme {
	display: grid;
	gap: var(--sz-r-6);
}

@media (min-width: 62rem) {
	.sz-specialisme {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--sz-r-8);
		align-items: center;
	}
}

.sz-specialisme__kop { min-width: 0; }
.sz-specialisme__kop h2 { margin-bottom: var(--sz-r-4); }

/* ------------------------------------------------------------------
   Tijdlijn: vier stappen naast elkaar, met het merkteken als pijl
   ertussen. Op mobiel kantelt hij en wijzen de pijlen naar beneden.
   ------------------------------------------------------------------ */

.sz-tijdlijn {
	display: grid;
	gap: var(--sz-r-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: stap;
}

@media (min-width: 60rem) {
	.sz-tijdlijn {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sz-r-7);
	}
}

.sz-tijdlijn__stap {
	position: relative;
	min-width: 0;
	margin: 0;
	padding-top: var(--sz-r-5);
	border-top: 3px solid var(--sz-inkt);
}

/* Geen merkteken tussen de stappen: op een rij van vier werd dat te
   druk. De doorlopende lijn boven de stappen doet het werk al. */

@media (max-width: 59.9375rem) {
	.sz-tijdlijn { gap: var(--sz-r-6); }
}
.sz-tijdlijn__nr {
	display: block;
	margin-bottom: var(--sz-r-3);
	font-family: var(--sz-font-kop);
	font-style: italic;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--sz-accent);
	font-variant-numeric: tabular-nums;
}

.sz-tijdlijn__kop {
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-bottom: var(--sz-r-2);
}

.sz-tijdlijn__tekst {
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-inkt-vaag);
	margin-bottom: var(--sz-r-3);
}

.sz-tijdlijn__tijd {
	display: inline-flex;
	align-items: center;
	gap: var(--sz-r-2);
	font-size: var(--sz-t-xs);
	font-weight: 600;
	color: var(--sz-accent-diep);
}
.sz-tijdlijn__tijd svg { flex-shrink: 0; }

/* ------------------------------------------------------------------
   Wat we vervoeren: een pictogrammenwand. Geen kaders en geen
   achtergrond per item, alleen icoon en tekst in een raster. Zo scan je
   in één blik of jouw zending ertussen staat.
   ------------------------------------------------------------------ */

.sz-soorten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--sz-r-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sz-soorten li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--sz-r-3);
	align-items: center;
	margin: 0;
	min-width: 0;
}

.sz-soorten__icoon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	color: var(--sz-accent-diep);
	background: var(--sz-accent-vaag);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek-s)) 0,
		100% var(--sz-hoek-s),
		100% 100%,
		0 100%
	);
}

.sz-soorten__kop {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-m);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--sz-inkt);
	align-self: end;
}

.sz-soorten__tekst {
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
	line-height: 1.45;
	align-self: start;
}

/* De eerlijke regel over wat we niet doen. */
.sz-uitgesloten {
	display: flex;
	align-items: flex-start;
	gap: var(--sz-r-3);
	max-width: 62rem;
	margin: var(--sz-r-7) 0 0;
	padding: var(--sz-r-4) var(--sz-r-5);
	background: var(--sz-vlak);
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-inkt-zacht);
	border-left: 3px solid var(--sz-inkt);
}
.sz-uitgesloten svg { flex-shrink: 0; margin-top: 0.15em; color: var(--sz-inkt); }

/* ------------------------------------------------------------------
   Voor wie: kop links, sectoren rechts als grote typografische regels.
   Geen kaders, geen iconen; de tekst doet het werk.
   ------------------------------------------------------------------ */

.sz-voorwie {
	display: grid;
	gap: var(--sz-r-7);
}

@media (min-width: 62rem) {
	.sz-voorwie {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
		gap: var(--sz-r-8);
		align-items: start;
	}
	/* De kop loopt mee bij het scrollen langs de lijst. */
	.sz-voorwie__kop { position: sticky; top: 7rem; }
}

.sz-voorwie__kop { min-width: 0; }
.sz-voorwie__kop h2 { margin-bottom: var(--sz-r-4); }

.sz-sectoren {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sz-r-5);
}

@media (min-width: 45rem) {
	.sz-sectoren {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sz-r-6) var(--sz-r-5);
	}
}

.sz-sectoren li {
	margin: 0;
	min-width: 0;
	padding-top: var(--sz-r-4);
	border-top: 2px solid var(--sz-inkt);
}

.sz-sectoren h3 {
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: var(--sz-r-2);
}

.sz-sectoren p {
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-inkt-vaag);
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Wagenpark: twee specificatiebladen. Geen kaartjes met een plaatje,
   maar een blad zoals je dat van een leverancier krijgt: silhouet,
   kerncijfers en de maten in millimeters.
   ------------------------------------------------------------------ */

.sz-wagenpark {
	display: grid;
	gap: var(--sz-r-6);
}

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

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

.sz-voertuig {
	display: flex;
	flex-direction: column;
	min-width: 0;
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-voertuig::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}

.sz-voertuig__beeld {
	display: grid;
	place-items: center;
	padding: var(--sz-r-5) var(--sz-r-5) 0;
	background: var(--sz-vlak);
	color: var(--sz-inkt-zacht);
}

/* Op een grijze sectie zou het beeldvlak wegvallen tegen het blad. */
.sz-sectie--vlak .sz-voertuig__beeld { background: #E4E8EE; }
.sz-voertuig__beeld svg,
.sz-voertuig__beeld img {
	width: 100%;
	height: auto;
	max-width: 26rem;
}
.sz-voertuig__beeld img { object-fit: cover; }

.sz-voertuig__lijf {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--sz-r-5);
}

.sz-voertuig__label {
	margin-bottom: var(--sz-r-1);
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-accent-diep);
}

.sz-voertuig__naam {
	font-size: var(--sz-t-h3);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: var(--sz-r-5);
}

/* De drie cijfers die je in één blik wilt zien. */
.sz-kerncijfers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sz-r-3);
	margin: 0 0 var(--sz-r-5);
	padding: var(--sz-r-4) 0;
	list-style: none;
	border-block: 1px solid var(--sz-lijn);
}

.sz-kerncijfers li { margin: 0; min-width: 0; }

.sz-kerncijfers__waarde {
	display: block;
	font-family: var(--sz-font-kop);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--sz-inkt);
	font-variant-numeric: tabular-nums;
}

.sz-kerncijfers__eenheid {
	font-size: 0.6em;
	font-weight: 700;
	color: var(--sz-accent-diep);
	margin-left: 0.15em;
}

.sz-kerncijfers__label {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
}

/* De maten. Cijfers rechts uitgelijnd zodat ze onder elkaar lezen. */
.sz-specs {
	margin: 0 0 var(--sz-r-5);
	display: grid;
	gap: 0;
}

.sz-specs > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sz-r-4);
	padding-block: 0.5rem;
	border-bottom: 1px dashed var(--sz-lijn);
	min-width: 0;
}
.sz-specs > div:last-child { border-bottom: 0; }

.sz-specs dt {
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
}

.sz-specs dd {
	margin: 0;
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-inkt);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

.sz-voertuig__geschikt {
	display: flex;
	align-items: flex-start;
	gap: var(--sz-r-3);
	margin: auto 0 0;
	padding-top: var(--sz-r-4);
	border-top: 1px solid var(--sz-lijn);
	font-size: var(--sz-t-s);
	line-height: 1.55;
	color: var(--sz-inkt-vaag);
}
.sz-voertuig__geschikt svg { flex-shrink: 0; margin-top: 0.2em; color: var(--sz-accent); }

/* ------------------------------------------------------------------
   Vergelijkingstabel
   ------------------------------------------------------------------ */

.sz-tabelwrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-tabelwrap::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}

.sz-tabel {
	width: 100%;
	min-width: 42rem;
	border-collapse: collapse;
	font-size: var(--sz-t-s);
	text-align: left;
}

.sz-tabel th,
.sz-tabel td {
	padding: var(--sz-r-4) var(--sz-r-5);
	vertical-align: top;
	border-bottom: 1px solid var(--sz-lijn);
}

.sz-tabel thead th {
	padding-block: var(--sz-r-4);
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sz-inkt);
	white-space: nowrap;
	border-bottom: 2px solid var(--sz-inkt);
}

/* De eigen kolom lichten we uit, maar zonder de andere weg te zetten. */
.sz-tabel .sz-tabel__wij { background: var(--sz-accent-vaag); }
.sz-tabel thead .sz-tabel__wij { color: var(--sz-accent-diep); }

.sz-tabel tbody tr:last-child th,
.sz-tabel tbody tr:last-child td { border-bottom: 0; }

.sz-tabel tbody th {
	font-weight: 600;
	color: var(--sz-inkt);
	width: 12rem;
}

.sz-tabel td { color: var(--sz-inkt-vaag); }

.sz-tabel td.sz-tabel__wij {
	color: var(--sz-inkt);
	font-weight: 500;
}

.sz-tabel td.sz-tabel__wij {
	display: table-cell;
}
.sz-tabel td.sz-tabel__wij svg {
	display: inline-block;
	vertical-align: -0.15em;
	margin-right: var(--sz-r-2);
	color: var(--sz-accent);
}

/* ------------------------------------------------------------------
   De ligging aan de grens. Een afstandenbord zoals langs de weg: plaats
   links, kilometers en minuten rechts, met een stippellijn ertussen.
   ------------------------------------------------------------------ */

.sz-locatie__raster {
	display: grid;
	gap: var(--sz-r-7);
}

@media (min-width: 62rem) {
	.sz-locatie__raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--sz-r-8);
		align-items: start;
	}
}

.sz-locatie__verhaal { min-width: 0; }
.sz-locatie__verhaal h2 { margin-bottom: var(--sz-r-4); }
.sz-locatie__verhaal p { color: var(--sz-op-donker-vaag); max-width: 46ch; }

.sz-locatie__voet {
	display: flex;
	align-items: flex-start;
	gap: var(--sz-r-3);
	margin-top: var(--sz-r-5);
	padding-top: var(--sz-r-4);
	border-top: 1px solid var(--sz-inkt-3);
	font-size: var(--sz-t-xs);
	line-height: 1.55;
}
.sz-locatie__voet svg { flex-shrink: 0; margin-top: 0.1em; color: var(--sz-accent); }

.sz-locatie__borden {
	display: grid;
	gap: var(--sz-r-6);
	min-width: 0;
}

.sz-bord { min-width: 0; }

.sz-bord__kop {
	display: flex;
	align-items: center;
	gap: var(--sz-r-3);
	margin-bottom: var(--sz-r-3);
	padding-bottom: var(--sz-r-3);
	font-size: var(--sz-t-s);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--sz-amber);
	border-bottom: 2px solid var(--sz-inkt-3);
}

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

.sz-bord__lijst li {
	display: flex;
	align-items: baseline;
	gap: var(--sz-r-3);
	margin: 0;
	padding-block: 0.5rem;
	min-width: 0;
}

.sz-bord__plaats {
	min-width: 0;
	font-size: var(--sz-t-m);
	font-weight: 500;
	color: var(--sz-wit);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* De stippellijn tussen plaats en cijfers, zoals op een wegwijzer. Een
   eigen element dat de ruimte opvult, want een lijn achter de tekst
   vraagt om een effen achtergrond en die valt op een verlopende
   sectieachtergrond op als een balk. */
.sz-bord__lijn {
	flex: 1;
	min-width: 1rem;
	align-self: center;
	border-bottom: 1px dotted var(--sz-inkt-zacht);
}

.sz-bord__waarden {
	display: flex;
	align-items: baseline;
	gap: var(--sz-r-4);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.sz-bord__km {
	font-size: var(--sz-t-s);
	color: var(--sz-op-donker-vaag);
	min-width: 4.25rem;
	text-align: right;
}

.sz-bord__tijd {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sz-accent);
	min-width: 3.75rem;
	text-align: right;
}

/* ------------------------------------------------------------------
   Prijzen: drie rekenvoorbeelden als brede regels, met daarnaast waar
   de prijs vanaf hangt.
   ------------------------------------------------------------------ */

.sz-prijzen {
	display: grid;
	gap: var(--sz-r-7);
}

@media (min-width: 62rem) {
	.sz-prijzen {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: var(--sz-r-8);
		align-items: start;
	}
}

.sz-voorbeelden {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--sz-inkt);
}

.sz-voorbeelden li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-rows: auto auto;
	column-gap: var(--sz-r-5);
	align-items: center;
	margin: 0;
	padding-block: var(--sz-r-4);
	border-bottom: 1px solid var(--sz-lijn);
}

.sz-voorbeelden__route {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--sz-inkt);
	min-width: 0;
}

.sz-voorbeelden__toelicht {
	grid-column: 1;
	grid-row: 2;
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
	min-width: 0;
}

.sz-voorbeelden__km {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sz-voorbeelden__prijs {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sz-accent-diep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

@media (max-width: 40rem) {
	.sz-voorbeelden li {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: var(--sz-r-1);
	}
	.sz-voorbeelden__km    { grid-column: 1; grid-row: 3; }
	.sz-voorbeelden__prijs { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

.sz-voorbeelden__voet {
	margin: var(--sz-r-4) 0 0;
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
	line-height: 1.55;
}

.sz-prijzen__voorbeelden { min-width: 0; }

.sz-prijsfactoren {
	min-width: 0;
	padding: var(--sz-r-5);
	background: var(--sz-vlak);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-prijsfactoren h3 {
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: var(--sz-r-4);
}

.sz-prijsfactoren dl { margin: 0 0 var(--sz-r-5); display: grid; gap: var(--sz-r-4); }
.sz-prijsfactoren dt {
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-inkt);
	margin-bottom: 0.15rem;
}
.sz-prijsfactoren dd {
	margin: 0;
	font-size: var(--sz-t-s);
	line-height: 1.55;
	color: var(--sz-inkt-vaag);
}

/* ------------------------------------------------------------------
   Varianten op een donkere achtergrond
   ------------------------------------------------------------------ */

.sz-sectie--donker .sz-tijdlijn__stap { border-top-color: var(--sz-op-donker); }
.sz-sectie--donker .sz-tijdlijn__kop { color: var(--sz-wit); }
.sz-sectie--donker .sz-tijdlijn__tekst { color: var(--sz-op-donker-vaag); }
.sz-sectie--donker .sz-tijdlijn__tijd { color: var(--sz-amber); }

.sz-sectie--donker .sz-kop__intro { color: var(--sz-op-donker-vaag); }

.sz-cta { position: relative; }

/* ------------------------------------------------------------------
   Slot-CTA
   ------------------------------------------------------------------ */

.sz-cta__inhoud {
	display: grid;
	gap: var(--sz-r-6);
	align-items: center;
}

@media (min-width: 52rem) {
	.sz-cta__inhoud {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--sz-r-8);
	}
}

.sz-cta__tekst { min-width: 0; }
.sz-cta h2 { margin-bottom: var(--sz-r-3); }
.sz-cta p {
	color: var(--sz-op-donker-vaag);
	margin-bottom: 0;
	max-width: 50ch;
	font-size: var(--sz-t-l);
}

.sz-cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sz-r-3);
}

/* ------------------------------------------------------------------
   Werkgebied: plaatsnamen als doorlopende tekst per gebied. Compact,
   scanbaar, en klaar om plaatsen met een eigen pagina later te linken.
   ------------------------------------------------------------------ */

.sz-gebieden {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--sz-r-6);
}

.sz-gebied { min-width: 0; }

.sz-gebied__kop {
	margin-bottom: var(--sz-r-3);
	padding-bottom: var(--sz-r-3);
	font-size: var(--sz-t-m);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--sz-inkt);
	border-bottom: 2px solid var(--sz-inkt);
}

.sz-gebied__plaatsen {
	font-size: var(--sz-t-s);
	line-height: 1.7;
	color: var(--sz-inkt-vaag);
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */

.sz-faqblok {
	display: grid;
	gap: var(--sz-r-7);
}

@media (min-width: 62rem) {
	.sz-faqblok {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: var(--sz-r-8);
		align-items: start;
	}
	.sz-faqblok__kop { position: sticky; top: 7rem; }
}

.sz-faqblok__kop { min-width: 0; }
.sz-faqblok__kop h2 { margin-bottom: var(--sz-r-4); }
.sz-faqblok__kop .sz-kop__intro { margin-bottom: var(--sz-r-5); }

.sz-faq { border-top: 2px solid var(--sz-inkt); }

.sz-faq__item { border-bottom: 1px solid var(--sz-lijn); }

.sz-faq__vraag {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sz-r-4);
	width: 100%;
	padding: var(--sz-r-4) 0;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	text-align: left;
	color: var(--sz-inkt);
	cursor: pointer;
	list-style: none;
}
.sz-faq__vraag::-webkit-details-marker { display: none; }
.sz-faq__vraag:hover { color: var(--sz-accent-diep); }

/* Een plus die een min wordt: rustiger dan een draaiende pijl. */
.sz-faq__vraag::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.35em;
	background:
		linear-gradient(var(--sz-accent), var(--sz-accent)) center / 16px 2.5px no-repeat,
		linear-gradient(var(--sz-accent), var(--sz-accent)) center / 2.5px 16px no-repeat;
	transition: transform var(--sz-normaal) var(--sz-soepel);
}

.sz-faq__item[open] .sz-faq__vraag::after {
	background:
		linear-gradient(var(--sz-accent), var(--sz-accent)) center / 16px 2.5px no-repeat;
	transform: rotate(180deg);
}

.sz-faq__antwoord {
	padding-bottom: var(--sz-r-5);
	max-width: 64ch;
}
.sz-faq__antwoord p {
	color: var(--sz-inkt-vaag);
	line-height: 1.65;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Wie wij zijn: verhaal links, de twee oprichters rechts. Zolang er
   geen foto's zijn staan er initialen in het merkvierkant.
   ------------------------------------------------------------------ */

.sz-overons {
	display: grid;
	gap: var(--sz-r-7);
}

@media (min-width: 62rem) {
	.sz-overons {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: var(--sz-r-8);
		align-items: start;
	}
}

.sz-overons__verhaal { min-width: 0; }
.sz-overons__verhaal h2 { margin-bottom: var(--sz-r-4); }
.sz-overons__verhaal p {
	color: var(--sz-inkt-vaag);
	max-width: 52ch;
	line-height: 1.65;
}

.sz-oprichters {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sz-r-5);
}

.sz-oprichters li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sz-r-4);
	align-items: start;
	margin: 0;
	padding-top: var(--sz-r-5);
	border-top: 2px solid var(--sz-inkt);
}
.sz-oprichters li:first-child { padding-top: 0; border-top: 0; }

.sz-oprichters__beeld {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--sz-inkt);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}
.sz-oprichters__beeld img { width: 100%; height: 100%; object-fit: cover; }

.sz-oprichters__initialen {
	font-family: var(--sz-font-kop);
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--sz-accent);
}

.sz-oprichters__tekst { min-width: 0; }

.sz-oprichters__naam {
	display: block;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--sz-inkt);
}

.sz-oprichters__rol {
	display: block;
	margin-bottom: var(--sz-r-2);
	font-size: var(--sz-t-xs);
	font-weight: 600;
	color: var(--sz-accent-diep);
}

.sz-oprichters__over {
	display: block;
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-inkt-vaag);
}

/* ------------------------------------------------------------------
   Waarom bij ons: zes punten in een raster met scheidingslijnen. Geen
   kaartjes met een eigen achtergrond, maar één doorlopend raster, zodat
   deze sectie verschilt van de pictogrammenwand verderop.
   ------------------------------------------------------------------ */

.sz-waarom {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 1px;
	background: var(--sz-lijn);
	box-shadow: 0 0 0 1px var(--sz-lijn);
}

.sz-waarom li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--sz-r-4);
	margin: 0;
	padding: var(--sz-r-5);
	background: var(--sz-wit);
	min-width: 0;
}

.sz-waarom__icoon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: start center;
	padding-top: 0.15rem;
	color: var(--sz-accent);
}

.sz-waarom__kop {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-bottom: var(--sz-r-2);
	color: var(--sz-inkt);
}

.sz-waarom__tekst {
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-inkt-vaag);
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Zwevende WhatsApp-knop rechtsonder.

   Subtiel kloppend: één ring die uitdijt en vervaagt, niet de knop
   zelf. Een bewegende knop is vervelend om aan te tikken en trekt de
   aandacht weg van de pagina.
   ------------------------------------------------------------------ */

.sz-contactknop {
	position: fixed;
	right: var(--sz-r-5);
	bottom: var(--sz-r-5);
	z-index: 98;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sz-r-3);
}

/* De knop zelf. */
.sz-contactknop__knop {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	padding: 0;
	border: 0;
	background: var(--sz-accent);
	color: var(--sz-inkt);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(10, 12, 16, 0.22);
	transition: background var(--sz-normaal) var(--sz-soepel),
	            transform var(--sz-normaal) var(--sz-soepel);
}

.sz-contactknop__knop:hover { transform: translateY(-2px); }

.sz-contactknop.is-open .sz-contactknop__knop {
	background: var(--sz-inkt);
	color: var(--sz-wit);
}

.sz-contactknop__icoon {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	position: relative;
	z-index: 1;
	transition: opacity 0.15s, transform 0.15s;
}

/* Het kruisje verschijnt pas als hij openstaat. */
.sz-contactknop__icoon--open { opacity: 0; transform: rotate(-45deg); }
.sz-contactknop.is-open .sz-contactknop__icoon--dicht { opacity: 0; transform: rotate(45deg); }
.sz-contactknop.is-open .sz-contactknop__icoon--open { opacity: 1; transform: rotate(0); }

/* Het label alleen voor schermlezers: de knop spreekt voor zich. */
.sz-contactknop__tekst {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* De ring die uitdijt. Zit achter de knop en vangt geen kliks. */
.sz-contactknop__puls {
	position: absolute;
	inset: 0;
	background: var(--sz-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: sz-puls 3.2s var(--sz-soepel) infinite;
}

.sz-contactknop.is-open .sz-contactknop__puls { animation: none; }

@keyframes sz-puls {
	0%   { transform: scale(1);   opacity: 0.5; }
	55%  { transform: scale(1.5);  opacity: 0; }
	100% { transform: scale(1.5);  opacity: 0; }
}

/* ---------------- De twee keuzes ---------------- */

.sz-contactknop__keuzes {
	display: grid;
	gap: var(--sz-r-2);
	animation: sz-contact-in 0.18s ease both;
}

.sz-contactknop__keuzes[hidden] { display: none; }

@keyframes sz-contact-in {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}

.sz-contactknop__keuze {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: var(--sz-r-3);
	padding: var(--sz-r-3) var(--sz-r-4);
	min-width: 14rem;
	background: var(--sz-inkt-3);
	color: var(--sz-op-donker);
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(10, 12, 16, 0.22);
	clip-path: polygon(
		0 0,
		calc(100% - 0.75rem) 0,
		100% 0.75rem,
		100% 100%,
		0 100%
	);
}

.sz-contactknop__keuze::after {
	content: '';
	position: absolute;
	inset: 1px;
	z-index: -1;
	background: var(--sz-inkt-2);
	clip-path: inherit;
	transition: background-color var(--sz-snel) var(--sz-soepel);
}

.sz-contactknop__keuze:hover::after { background: var(--sz-inkt); }

.sz-contactknop__keuze strong {
	display: block;
	font-size: var(--sz-t-s);
	color: var(--sz-wit);
	line-height: 1.3;
}

.sz-contactknop__keuze small {
	display: block;
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
	font-variant-numeric: tabular-nums;
}

.sz-contactknop__keuze-icoon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 50%;
}

.sz-contactknop__keuze--app .sz-contactknop__keuze-icoon {
	background: #25D366;
	color: #07290F;
}

.sz-contactknop__keuze--bel .sz-contactknop__keuze-icoon {
	background: var(--sz-accent);
	color: var(--sz-inkt);
}

@media (prefers-reduced-motion: reduce) {
	.sz-contactknop__puls { animation: none; }
	.sz-contactknop__keuzes { animation-duration: 0.01ms; }
}

/* Op mobiel staat er al een vaste balk met bellen en appen. */
@media (max-width: 47.9375rem) {
	.sz-contactknop { display: none; }
}

/* ------------------------------------------------------------------
   Standaard hero voor gewone pagina's. Zelfde achtergrond als de
   homepage, rustiger kop, met het kruimelpad erin.
   ------------------------------------------------------------------ */

.sz-paginahero {
	position: relative;
	padding-bottom: var(--sz-sectie-kort);
}

.sz-paginahero__inhoud {
	max-width: 46rem;
	padding-top: var(--sz-r-5);
}

/* Kleiner dan de homepagekop: hier is de kop een titel, geen belofte. */
.sz-paginahero h1 {
	font-size: clamp(1.875rem, 1.4rem + 2.1vw, 2.875rem);
	color: var(--sz-wit);
	margin-bottom: var(--sz-r-4);
}

.sz-paginahero .sz-klap { color: var(--sz-accent); }

.sz-paginahero__intro {
	font-size: var(--sz-t-l);
	line-height: 1.6;
	color: var(--sz-op-donker-vaag);
	max-width: 44ch;
	margin-bottom: 0;
}

/* Het kruimelpad op de donkere hero. */
.sz-paginahero .sz-kruimels {
	padding-block: var(--sz-r-4) 0;
	border-bottom: 0;
	font-size: var(--sz-t-xxs);
	color: var(--sz-inkt-vaag);
}
.sz-paginahero .sz-kruimels .sz-omhulsel { padding-inline: 0; max-width: none; }
.sz-paginahero .sz-kruimels a { color: var(--sz-inkt-vaag); }
.sz-paginahero .sz-kruimels a:hover { color: var(--sz-amber); }
.sz-paginahero .sz-kruimels [aria-current='page'] { color: var(--sz-op-donker-vaag); font-weight: 400; }
.sz-paginahero .sz-kruimels li:not(:last-child)::after { color: var(--sz-inkt-zacht); }
/* ------------------------------------------------------------------
   Het aanvraagformulier.

   Vier genummerde blokken op één pagina in plaats van een wizard. Bij
   een zakelijke aanvraag wil je overzicht: zien wat er gevraagd wordt
   voordat je begint. Bovendien werkt het zo ook zonder JavaScript.
   ------------------------------------------------------------------ */

.sz-aanvraagpagina__kop {
	max-width: 46rem;
	margin-bottom: var(--sz-kop-onder);
}
.sz-aanvraagpagina__kop h1 { margin-bottom: var(--sz-r-4); }

.sz-aanvraag {
	max-width: 56rem;
}

/* ------------------------------------------------------------------
   Blokken
   ------------------------------------------------------------------ */

.sz-blok {
	margin-bottom: var(--sz-r-5);
	padding: var(--sz-r-6);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-blok::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}

@media (max-width: 40rem) {
	.sz-blok { padding: var(--sz-r-5) var(--sz-r-4); }
}

.sz-blok__kop {
	display: flex;
	align-items: center;
	gap: var(--sz-r-3);
	margin-bottom: var(--sz-r-5);
	font-size: var(--sz-t-h3);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.sz-blok__nr {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	background: var(--sz-inkt);
	color: var(--sz-accent);
	font-family: var(--sz-font-kop);
	font-style: italic;
	font-size: 1.125rem;
	font-weight: 900;
	clip-path: polygon(
		0 0,
		calc(100% - 7px) 0,
		100% 7px,
		100% 100%,
		0 100%
	);
}

.sz-blok__subkop {
	margin: var(--sz-r-6) 0 var(--sz-r-2);
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sz-blok__uitleg {
	margin-bottom: var(--sz-r-4);
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
}

/* ------------------------------------------------------------------
   Velden
   ------------------------------------------------------------------ */

.sz-velden {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--sz-r-4) var(--sz-r-5);
}

.sz-veld {
	position: relative;
	min-width: 0;
	border: 0;
	padding: 0;
	margin: 0;
}
.sz-veld--breed { grid-column: 1 / -1; }

.sz-veld label,
.sz-veld legend,
.sz-veld__label {
	display: block;
	margin-bottom: var(--sz-r-2);
	padding: 0;
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-inkt);
}

.sz-veld__bij {
	display: inline;
	font-weight: 400;
	color: var(--sz-inkt-vaag);
}

.sz-verplicht { color: var(--sz-accent-diep); }

.sz-veld input[type='text'],
.sz-veld input[type='tel'],
.sz-veld input[type='email'],
.sz-veld input[type='number'],
.sz-veld input[type='date'],
.sz-veld input[type='time'],
.sz-veld select,
.sz-veld textarea {
	width: 100%;
	padding: 0.8125rem var(--sz-r-4);
	font-family: var(--sz-font-body);
	/* 16px voorkomt dat iOS inzoomt bij focus. */
	font-size: var(--sz-t-m);
	color: var(--sz-inkt);
	background: var(--sz-vlak);
	border: 1px solid var(--sz-lijn);
	border-radius: 0;
	transition: border-color var(--sz-snel) var(--sz-soepel),
	            background var(--sz-snel) var(--sz-soepel);
}

.sz-veld textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }

.sz-veld input::placeholder,
.sz-veld textarea::placeholder { color: #8A929E; }

.sz-veld input:focus,
.sz-veld select:focus,
.sz-veld textarea:focus {
	outline: 0;
	background: var(--sz-wit);
	border-color: var(--sz-accent);
	box-shadow: 0 0 0 1px var(--sz-accent);
}

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

.sz-veld__fout {
	margin: var(--sz-r-2) 0 0;
	font-size: var(--sz-t-xs);
	font-weight: 500;
	color: var(--sz-rood);
	line-height: 1.45;
}

.sz-veld__hint {
	margin: var(--sz-r-2) 0 0;
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
	line-height: 1.45;
}
.sz-veld__hint[hidden] { display: none; }

/* Invoer met een eenheid erachter. */
.sz-veld__eenheid {
	position: relative;
	display: flex;
	align-items: center;
}
.sz-veld__eenheid input { padding-right: 3rem; }
.sz-veld__eenheid span {
	position: absolute;
	right: var(--sz-r-4);
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
	pointer-events: none;
}

.sz-maten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sz-r-3);
}

/* ------------------------------------------------------------------
   Keuzes
   ------------------------------------------------------------------ */

.sz-buskeuze {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--sz-r-3);
}

.sz-keuze2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sz-r-3);
}

.sz-bus { position: relative; min-width: 0; }

.sz-bus input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sz-bus label {
	display: block;
	margin: 0;
	padding: var(--sz-r-4);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
	cursor: pointer;
	font-weight: 400;
	transition: background-color var(--sz-snel) var(--sz-soepel);
}

.sz-bus label::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color var(--sz-snel) var(--sz-soepel);
}
.sz-bus label:hover { --sz-randkleur: var(--sz-inkt-vaag); }

.sz-bus input:checked + label {
	--sz-randkleur: var(--sz-accent);
	--sz-randdikte: 2px;
	--sz-vlakkleur: var(--sz-accent-vaag);
}
.sz-bus input:focus-visible + label {
	outline: 2px solid var(--sz-accent);
	outline-offset: 2px;
}

.sz-bus__naam {
	display: block;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-m);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--sz-inkt);
}

.sz-bus__model {
	display: block;
	margin-top: 0.1rem;
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
}

.sz-bus__specs {
	display: block;
	margin-top: var(--sz-r-2);
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-zacht);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Vinkjes
   ------------------------------------------------------------------ */

.sz-vinkjes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--sz-r-3);
}

.sz-vinkje {
	display: flex;
	align-items: flex-start;
	gap: var(--sz-r-3);
	margin: 0;
	font-size: var(--sz-t-s);
	font-weight: 400;
	color: var(--sz-inkt-zacht);
	cursor: pointer;
	line-height: 1.5;
}

.sz-vinkje input[type='checkbox'] {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--sz-accent);
	cursor: pointer;
}

.sz-momentvelden[hidden] { display: none; }
.sz-momentvelden { grid-column: 1 / -1; }

/* ------------------------------------------------------------------
   Afsluiting
   ------------------------------------------------------------------ */

.sz-afsluiting {
	padding: var(--sz-r-6);
	background: var(--sz-inkt);
	color: var(--sz-op-donker);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

@media (max-width: 40rem) {
	.sz-afsluiting { padding: var(--sz-r-5) var(--sz-r-4); }
}

.sz-samenvatting {
	padding-bottom: var(--sz-r-5);
	margin-bottom: var(--sz-r-5);
	border-bottom: 1px solid var(--sz-inkt-3);
}

.sz-samenvatting__leeg,
.sz-samenvatting__voet {
	margin: 0;
	font-size: var(--sz-t-s);
	color: var(--sz-op-donker-vaag);
	line-height: 1.55;
}

.sz-samenvatting__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sz-r-4) var(--sz-r-6);
	align-items: flex-end;
	justify-content: space-between;
}

.sz-samenvatting__voet { margin-top: var(--sz-r-3); font-size: var(--sz-t-xs); }

/* Op donker moeten de cijfers licht zijn, ook al staat er
   --op-licht op vanwege het hergebruik van de component. */
.sz-afsluiting .sz-meting--op-licht .sz-meting__label { color: var(--sz-op-donker-vaag); }
.sz-afsluiting .sz-meting--op-licht .sz-meting__waarde { color: var(--sz-wit); }
.sz-afsluiting .sz-meting--groot .sz-meting__waarde { color: var(--sz-accent); }

.sz-akkoord {
	margin-bottom: var(--sz-r-5);
	font-size: var(--sz-t-s);
}
.sz-akkoord .sz-vinkje { color: var(--sz-op-donker); }
.sz-akkoord a { color: var(--sz-amber); }
.sz-akkoord.is-fout .sz-vinkje { color: #FFB4A8; }

.sz-verzend {
	display: grid;
	gap: var(--sz-r-4);
	align-items: center;
}

@media (min-width: 48rem) {
	.sz-verzend { grid-template-columns: auto minmax(0, 1fr); }
}

.sz-verzend__uitleg {
	margin: 0;
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
	line-height: 1.55;
}
.sz-verzend__uitleg a { color: var(--sz-amber); }

/* ------------------------------------------------------------------
   Het prijsvak.

   De belofte van de site is dat je meteen weet wat het kost, dus het
   bedrag is het grootste op het scherm. De opbouw laten we bewust weg:
   die staat in onze eigen mail, niet hier.
   ------------------------------------------------------------------ */

.sz-bon { display: grid; gap: var(--sz-r-4); }

/* Zakelijk of particulier. Twee knoppen, geen dropdown: het is een
   keuze van twee en die moet je in een oogopslag kunnen omzetten. */
.sz-bon__wie {
	display: inline-flex;
	align-self: start;
	position: relative;
	isolation: isolate;
	background: var(--sz-inkt-3);
	clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0.5rem 100%, 0 calc(100% - 0.5rem));
}

.sz-bon__wie::after {
	content: '';
	position: absolute;
	inset: 1px;
	z-index: -1;
	background: var(--sz-inkt-2);
	clip-path: inherit;
}

.sz-bon__wieknop { position: relative; }

.sz-bon__wieknop input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.sz-bon__wieknop span {
	display: block;
	padding: 0.4rem 0.9rem;
	font-size: var(--sz-t-xs);
	letter-spacing: 0.02em;
	color: var(--sz-op-donker-vaag);
	transition: color 0.15s, background-color 0.15s;
}

.sz-bon__wieknop input:checked + span {
	background: var(--sz-accent);
	color: var(--sz-inkt);
	font-weight: 600;
}

.sz-bon__wieknop input:focus-visible + span {
	outline: 2px solid var(--sz-accent);
	outline-offset: 2px;
}

/* Het bedrag. */
.sz-bon__totaal {
	display: grid;
	gap: 0.15rem;
	padding-bottom: var(--sz-r-4);
	border-bottom: 1px solid var(--sz-inkt-3);
}

.sz-bon__totaallabel {
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
}

.sz-bon__bedrag {
	font-family: var(--sz-font-kop);
	font-size: clamp(2.4rem, 8vw, 3.4rem);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sz-accent);
	font-variant-numeric: tabular-nums;
}

.sz-bon__btwnoot {
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
}

.sz-bon__toeslagen {
	margin: 0;
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
}

/* Rijtijd en kilometers, naast elkaar. */
.sz-bon__rit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sz-r-6);
}

.sz-bon__rit > div {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.sz-bon__ritlabel {
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
}

.sz-bon__ritwaarde {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sz-wit);
	font-variant-numeric: tabular-nums;
}

.sz-bon__voet {
	margin: 0;
	padding-top: var(--sz-r-3);
	border-top: 1px solid var(--sz-inkt-3);
	font-size: var(--sz-t-xs);
	line-height: 1.55;
	color: var(--sz-op-donker-vaag);
}

/* Het vangnet als de routeservice eruit ligt. */
.sz-samenvatting__noodapp { margin-top: var(--sz-r-3); }

/* De melding bij een dag waarop we niet rijden. */
.sz-datumhint {
	display: grid;
	gap: var(--sz-r-2);
	justify-items: start;
	margin-top: var(--sz-r-2);
	padding: var(--sz-r-3);
	border-left: 2px solid var(--sz-accent);
	background: var(--sz-vlak);
}

.sz-datumhint p {
	margin: 0;
	font-size: var(--sz-t-s);
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Meldingen
   ------------------------------------------------------------------ */

.sz-melding {
	max-width: 56rem;
	margin-bottom: var(--sz-r-5);
	padding: var(--sz-r-4) var(--sz-r-5);
	background: var(--sz-wit);
	border-left: 4px solid var(--sz-rood);
	font-size: var(--sz-t-s);
}
.sz-melding ul { margin: var(--sz-r-2) 0 0; padding-left: 1.25rem; }
.sz-melding li { color: var(--sz-inkt-zacht); }

/* Het honeypotveld mag niemand zien, ook geen schermlezer. */
.sz-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   Bevestigingspagina na het versturen.
   ------------------------------------------------------------------ */

.sz-bedankt__kop { max-width: 46rem; }

.sz-bedankt__vink {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--sz-r-5);
	background: var(--sz-groen);
	color: var(--sz-wit);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-bedankt h1 {
	font-size: clamp(1.875rem, 1.4rem + 2.1vw, 2.875rem);
	color: var(--sz-wit);
	margin-bottom: var(--sz-r-4);
}
.sz-bedankt .sz-klap { color: var(--sz-accent); }

.sz-bedankt__intro {
	font-size: var(--sz-t-l);
	line-height: 1.6;
	color: var(--sz-op-donker-vaag);
	margin-bottom: var(--sz-r-5);
	max-width: 46ch;
}

.sz-bedankt__ref {
	display: inline-block;
	margin: 0;
	padding: var(--sz-r-3) var(--sz-r-5);
	background: var(--sz-inkt-3);
	font-size: var(--sz-t-s);
	font-variant-numeric: tabular-nums;
	color: var(--sz-op-donker-vaag);
}
.sz-bedankt__ref strong { color: var(--sz-wit); }

/* Het overzicht van wat er is ingevuld. */
.sz-overzicht {
	display: grid;
	gap: var(--sz-r-6);
	align-items: start;
}

@media (min-width: 62rem) {
	.sz-overzicht {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: var(--sz-r-8);
	}
}

.sz-overzicht__gegevens { min-width: 0; }

.sz-overzicht__gegevens h2 {
	font-size: var(--sz-t-h3);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: var(--sz-r-2);
}

.sz-overzicht__uitleg {
	margin-bottom: var(--sz-r-5);
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
}

.sz-overzicht__gegevens h3 {
	margin: var(--sz-r-6) 0 var(--sz-r-2);
	padding-bottom: var(--sz-r-2);
	font-size: var(--sz-t-m);
	font-weight: 700;
	border-bottom: 2px solid var(--sz-inkt);
}
.sz-overzicht__gegevens h3:first-of-type { margin-top: 0; }

.sz-overzicht__lijst { margin: 0; display: grid; gap: 0; }
.sz-overzicht__lijst > div {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--sz-r-3);
	padding-block: 0.5rem;
	border-bottom: 1px dashed var(--sz-lijn);
	font-size: var(--sz-t-s);
}
.sz-overzicht__lijst > div:last-child { border-bottom: 0; }
.sz-overzicht__lijst dt { color: var(--sz-inkt-vaag); }
.sz-overzicht__lijst dd { margin: 0; color: var(--sz-inkt); }

@media (max-width: 40rem) {
	.sz-overzicht__lijst > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

.sz-overzicht__zij { display: grid; gap: var(--sz-r-4); min-width: 0; }

.sz-overzicht__klein {
	margin: 0;
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
	line-height: 1.55;
}

/* De prijs, nog een keer, met btw uitgesplitst. */
.sz-prijskaart {
	padding: var(--sz-r-5);
	background: var(--sz-inkt);
	color: var(--sz-op-donker);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-prijskaart h2 {
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sz-wit);
	margin-bottom: var(--sz-r-4);
}

.sz-prijskaart dl { margin: 0 0 var(--sz-r-4); display: grid; gap: 0; }
.sz-prijskaart dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sz-r-3);
	padding-block: 0.4rem;
	font-size: var(--sz-t-s);
	font-variant-numeric: tabular-nums;
}
.sz-prijskaart dt { color: var(--sz-op-donker-vaag); }
.sz-prijskaart dt span { font-size: var(--sz-t-xs); }
.sz-prijskaart dd { margin: 0; color: var(--sz-op-donker); }

.sz-prijskaart__totaal {
	margin-top: var(--sz-r-2);
	padding-top: var(--sz-r-3) !important;
	border-top: 1px solid var(--sz-inkt-3);
}
.sz-prijskaart__totaal dt {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-m);
	font-weight: 700;
	color: var(--sz-wit);
}
.sz-prijskaart__totaal dt span {
	display: block;
	font-family: var(--sz-font-body);
	font-weight: 400;
	color: var(--sz-op-donker-vaag);
}
.sz-prijskaart__totaal dd {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sz-accent);
}

.sz-prijskaart__voet {
	margin: 0;
	font-size: var(--sz-t-xs);
	line-height: 1.55;
	color: var(--sz-op-donker-vaag);
}

/* Nog vragen? */
.sz-vragenkaart {
	padding: var(--sz-r-5);
	background: var(--sz-vlak);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-vragenkaart--los { max-width: 34rem; }

.sz-vragenkaart h2 {
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: var(--sz-r-2);
}

.sz-vragenkaart p {
	margin-bottom: var(--sz-r-4);
	font-size: var(--sz-t-s);
	color: var(--sz-inkt-vaag);
}

.sz-vragenkaart__knoppen { display: grid; gap: var(--sz-r-2); }

@media (min-width: 30rem) {
	.sz-vragenkaart--los .sz-vragenkaart__knoppen {
		display: flex;
		flex-wrap: wrap;
	}
}
/* ------------------------------------------------------------------
   Knopvarianten die alleen in het formulier voorkomen.
   ------------------------------------------------------------------ */

.sz-knop--app {
	background: #25d366;
	color: #07290f;
	border-color: #25d366;
}

.sz-knop--app:hover,
.sz-knop--app:focus-visible {
	background: #1eb757;
	border-color: #1eb757;
	color: #07290f;
}

.sz-knop--app svg { width: 1.1em; height: 1.1em; }

.sz-knop--klein {
	padding: 0.45rem 0.9rem;
	font-size: var(--sz-t-xs);
}
/* ------------------------------------------------------------------
   Contactpagina
   ------------------------------------------------------------------ */

.sz-contact {
	display: grid;
	gap: var(--sz-r-6);
	align-items: start;
}

@media (min-width: 62rem) {
	.sz-contact {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--sz-r-8);
	}
}

.sz-contact__manieren { display: grid; gap: var(--sz-r-3); min-width: 0; }

/* Een manier om contact op te nemen. */
.sz-manier {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sz-r-4);
	padding: var(--sz-r-5);
	text-decoration: none;
	color: inherit;
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	transition: background-color var(--sz-normaal) var(--sz-soepel);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-manier::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}
.sz-manier:hover { color: inherit; --sz-randkleur: var(--sz-accent); --sz-randdikte: 2px; }

/* De eerste manier is de snelste; die lichten we uit. */
.sz-manier--uit { --sz-randkleur: var(--sz-inkt); --sz-randdikte: 2px; }

.sz-manier__icoon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	background: var(--sz-inkt);
	color: var(--sz-accent);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek-s)) 0,
		100% var(--sz-hoek-s),
		100% 100%,
		0 100%
	);
}

.sz-manier__tekst { min-width: 0; }

.sz-manier__kop {
	display: block;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: var(--sz-r-2);
	color: var(--sz-inkt);
}

.sz-manier__uitleg {
	display: block;
	margin-bottom: var(--sz-r-3);
	font-size: var(--sz-t-s);
	line-height: 1.55;
	color: var(--sz-inkt-vaag);
}

.sz-manier__actie {
	display: inline-flex;
	align-items: center;
	gap: var(--sz-r-2);
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-accent-diep);
}
.sz-manier__actie svg { transition: transform var(--sz-normaal) var(--sz-soepel); }
.sz-manier:hover .sz-manier__actie svg { transform: translateX(3px); }

/* De zakelijke gegevens. */
.sz-gegevens {
	padding: var(--sz-r-5);
	background: var(--sz-vlak);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-gegevens__kop {
	margin-bottom: var(--sz-r-3);
	font-size: var(--sz-t-m);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sz-gegevens dl { margin: 0; display: grid; gap: 0; }
.sz-gegevens dl > div {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	gap: var(--sz-r-3);
	padding-block: 0.4rem;
	border-bottom: 1px dashed var(--sz-lijn);
	font-size: var(--sz-t-s);
}
.sz-gegevens dl > div:last-child { border-bottom: 0; }
.sz-gegevens dt { color: var(--sz-inkt-vaag); }
.sz-gegevens dd { margin: 0; color: var(--sz-inkt); }

/* ------------------------------------------------------------------
   Het formulierblok
   ------------------------------------------------------------------ */

.sz-contact__formulier { display: grid; gap: var(--sz-r-4); min-width: 0; }

.sz-formulierblok {
	padding: var(--sz-r-6);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
	position: relative;
	isolation: isolate;
	--sz-randkleur: var(--sz-lijn);
	--sz-vlakkleur: var(--sz-wit);
	background: var(--sz-randkleur);
}

.sz-formulierblok::after {
	content: '';
	position: absolute;
	inset: var(--sz-randdikte, 1px);
	z-index: -1;
	background: var(--sz-vlakkleur);
	clip-path: inherit;
	transition: background-color 0.15s;
}

@media (max-width: 40rem) {
	.sz-formulierblok { padding: var(--sz-r-5) var(--sz-r-4); }
}

.sz-formulierblok h2 {
	font-size: var(--sz-t-h3);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: var(--sz-r-2);
}

.sz-formulierblok__uitleg {
	margin-bottom: var(--sz-r-5);
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-inkt-vaag);
}

.sz-spoedkaart {
	padding: var(--sz-r-5);
	background: var(--sz-inkt);
	color: var(--sz-op-donker);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-spoedkaart h2 {
	font-size: var(--sz-t-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sz-wit);
	margin-bottom: var(--sz-r-2);
}

.sz-spoedkaart p {
	margin-bottom: var(--sz-r-4);
	font-size: var(--sz-t-s);
	color: var(--sz-op-donker-vaag);
}

/* ------------------------------------------------------------------
   FluentForms in onze vormtaal.

   De plugin brengt eigen opmaak mee met afgeronde hoeken en blauwe
   knoppen. Die overschrijven we, anders staat er middenin de site een
   formulier uit een andere wereld.
   ------------------------------------------------------------------ */

.sz-formulierblok .frm-fluent-form .ff-el-group { margin-bottom: var(--sz-r-4); }

.sz-formulierblok .frm-fluent-form .ff-el-input--label label {
	display: block;
	margin-bottom: var(--sz-r-2);
	font-family: var(--sz-font-body);
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-inkt);
}

.sz-formulierblok .frm-fluent-form .ff-el-input--label label span.ff-el-is-required {
	color: var(--sz-accent-diep);
}

.sz-formulierblok .frm-fluent-form input[type='text'],
.sz-formulierblok .frm-fluent-form input[type='email'],
.sz-formulierblok .frm-fluent-form input[type='tel'],
.sz-formulierblok .frm-fluent-form input[type='url'],
.sz-formulierblok .frm-fluent-form input[type='number'],
.sz-formulierblok .frm-fluent-form select,
.sz-formulierblok .frm-fluent-form textarea {
	width: 100%;
	height: auto;
	padding: 0.8125rem var(--sz-r-4);
	font-family: var(--sz-font-body);
	/* 16px voorkomt dat iOS inzoomt bij focus. */
	font-size: var(--sz-t-m);
	line-height: 1.5;
	color: var(--sz-inkt);
	background: var(--sz-vlak);
	border: 1px solid var(--sz-lijn);
	border-radius: 0;
	box-shadow: none;
	transition: border-color var(--sz-snel) var(--sz-soepel),
	            background var(--sz-snel) var(--sz-soepel);
}

.sz-formulierblok .frm-fluent-form textarea { min-height: 7rem; resize: vertical; }

.sz-formulierblok .frm-fluent-form input:focus,
.sz-formulierblok .frm-fluent-form select:focus,
.sz-formulierblok .frm-fluent-form textarea:focus {
	outline: 0;
	background: var(--sz-wit);
	border-color: var(--sz-accent);
	box-shadow: 0 0 0 1px var(--sz-accent);
}

.sz-formulierblok .frm-fluent-form ::placeholder { color: #8A929E; }

.sz-formulierblok .frm-fluent-form .ff-el-form-check-label { font-size: var(--sz-t-s); }

/* De hulptekst onder een veld. */
.sz-formulierblok .frm-fluent-form .ff-el-help-message {
	margin-top: var(--sz-r-2);
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
}

/* Foutmeldingen. */
.sz-formulierblok .frm-fluent-form .error-text,
.sz-formulierblok .frm-fluent-form .text-danger {
	margin-top: var(--sz-r-2);
	font-size: var(--sz-t-xs);
	font-weight: 500;
	color: var(--sz-rood);
}
.sz-formulierblok .frm-fluent-form .ff-el-is-error input,
.sz-formulierblok .frm-fluent-form .ff-el-is-error textarea,
.sz-formulierblok .frm-fluent-form .ff-el-is-error select { border-color: var(--sz-rood); }

/* De verzendknop krijgt onze vorm. */
.sz-formulierblok .frm-fluent-form .ff-btn-submit,
.sz-formulierblok .frm-fluent-form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sz-r-2);
	padding: 1.125rem 1.75rem;
	min-height: 58px;
	font-family: var(--sz-font-body);
	font-size: var(--sz-t-m);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--sz-wit);
	background: var(--sz-accent);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek-s)) 0,
		100% var(--sz-hoek-s),
		100% 100%,
		0 100%
	);
	transition: background var(--sz-snel) var(--sz-soepel);
}
.sz-formulierblok .frm-fluent-form .ff-btn-submit:hover { background: var(--sz-accent-diep); }

/* De bevestiging na verzenden. */
.sz-formulierblok .ff-message-success {
	padding: var(--sz-r-5);
	background: var(--sz-groen-vaag);
	border: 0;
	border-left: 4px solid var(--sz-groen);
	border-radius: 0;
	color: var(--sz-inkt);
	font-size: var(--sz-t-m);
	line-height: 1.6;
}
.sz-formulierblok .ff-message-success p:last-child { margin-bottom: 0; }

/* De hulptekst als gewone regel onder het veld, niet als tooltip achter
   een icoontje: dan leest niemand hem. De plaatsing zelf regelt
   FluentForms met helpMessagePlacement op on_field; hier alleen de
   opmaak. Niet met flex op .ff-el-group werken, dat breekt hun eigen
   kolomindeling en maakt van een textarea een streepje.  */
.sz-formulierblok .frm-fluent-form .ff-el-tooltip { display: none; }
.sz-formulierblok .frm-fluent-form .ff-el-help-message {
	display: block;
	margin: var(--sz-r-2) 0 0;
	font-size: var(--sz-t-xs);
	color: var(--sz-inkt-vaag);
	line-height: 1.45;
}
/* ==================================================================
   Juridische pagina's: voorwaarden en privacyverklaring.

   Leesbaarheid boven alles. Eén kolom, ruime regelafstand, en de
   nummers hangen in de kantlijn zodat je op nummer kunt scannen
   zonder de tekst in te springen.
   ================================================================== */

.sz-juridisch {
	max-width: 46rem;
	margin-inline: auto;
}

/* Versie en datum. */
.sz-juridisch__versie {
	display: inline-block;
	margin: 0 0 var(--sz-r-6);
	padding: 0.35rem 0.8rem;
	position: relative;
	isolation: isolate;
	background: var(--sz-lijn);
	font-size: var(--sz-t-xs);
	letter-spacing: 0.02em;
	color: var(--sz-grijs);
	clip-path: polygon(0 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% 100%, 0.45rem 100%, 0 calc(100% - 0.45rem));
}

.sz-juridisch__versie::after {
	content: '';
	position: absolute;
	inset: 1px;
	z-index: -1;
	background: var(--sz-wit);
	clip-path: inherit;
}

.sz-juridisch__oud {
	margin: 0 0 var(--sz-r-6);
	padding: var(--sz-r-3) var(--sz-r-4);
	border-left: 3px solid var(--sz-accent);
	background: var(--sz-vlak);
	font-size: var(--sz-t-s);
}

/* ---------------- Inhoudsopgave ---------------- */

.sz-inhoud {
	margin-bottom: var(--sz-r-8);
	padding: var(--sz-r-5);
	background: var(--sz-vlak);
	clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.sz-inhoud__kop {
	margin: 0 0 var(--sz-r-3);
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sz-grijs);
}

.sz-inhoud__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 0.1rem var(--sz-r-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sz-inhoud__lijst a {
	display: flex;
	gap: 0.6rem;
	padding: 0.3rem 0;
	font-size: var(--sz-t-s);
	line-height: 1.4;
	color: var(--sz-inkt);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.sz-inhoud__lijst a:hover,
.sz-inhoud__lijst a:focus-visible {
	color: var(--sz-accent-diep);
	border-bottom-color: currentColor;
}

.sz-inhoud__nr {
	flex-shrink: 0;
	min-width: 1.3rem;
	font-variant-numeric: tabular-nums;
	color: var(--sz-accent-diep);
	font-weight: 600;
}

/* ---------------- Artikelen ---------------- */

.sz-artikel {
	margin-bottom: var(--sz-r-8);
	scroll-margin-top: 6rem;
}

.sz-artikel__kop {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0 0 var(--sz-r-3);
	font-size: var(--sz-t-l);
	line-height: 1.2;
}

.sz-artikel__nr {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var(--sz-accent);
}

.sz-artikel__leden {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sz-r-3);
}

.sz-artikel__leden > li {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: 0.3rem;
	scroll-margin-top: 6rem;
}

.sz-artikel__lidnr {
	font-size: var(--sz-t-xs);
	font-variant-numeric: tabular-nums;
	color: var(--sz-grijs);
	padding-top: 0.22em;
}

.sz-artikel__tekst {
	line-height: 1.65;
}

/* ---------------- Onze gegevens ---------------- */

.sz-gegevens {
	display: grid;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--sz-lijn);
}

.sz-gegevens > div {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	gap: var(--sz-r-3);
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--sz-lijn);
	font-size: var(--sz-t-s);
}

.sz-gegevens dt { color: var(--sz-grijs); }
.sz-gegevens dd { margin: 0; }

/* ---------------- Versielijst ---------------- */

.sz-versielijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.sz-versielijst li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	font-size: var(--sz-t-s);
}

.sz-versielijst span { color: var(--sz-grijs); font-size: var(--sz-t-xs); }

.sz-versielijst__nu {
	padding: 0.1rem 0.5rem;
	background: var(--sz-accent);
	color: var(--sz-inkt) !important;
	font-weight: 600;
}

@media (max-width: 34rem) {
	.sz-artikel__leden > li { grid-template-columns: 2.2rem minmax(0, 1fr); }
	.sz-gegevens > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}
/* ==================================================================
   De cookiebanner.

   Rechtsonder, niet over de hele breedte: een balk die de halve pagina
   afdekt maakt mensen alleen maar geneigd om blind te accepteren. Op
   mobiel wel volle breedte, want daar is niks anders mogelijk.
   ================================================================== */

.sz-consent {
	position: fixed;
	z-index: 200;
	right: var(--sz-r-5);
	bottom: var(--sz-r-5);
	width: min(26rem, calc(100vw - var(--sz-r-5) * 2));

	/* De animatie start vanzelf zodra het element zichtbaar wordt. Dat
	   is betrouwbaarder dan een class die met JS wordt omgezet: een
	   transitie heeft een frame nodig om te beginnen, en dat frame komt
	   er niet altijd. */
	animation: sz-consent-in 0.22s ease both;
}

.sz-consent.is-weg {
	animation: sz-consent-uit 0.2s ease both;
	pointer-events: none;
}

.sz-consent[hidden] { display: none; }

@keyframes sz-consent-in {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sz-consent-uit {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(0.5rem); }
}

.sz-consent__venster {
	position: relative;
	isolation: isolate;
	padding: var(--sz-r-5);
	background: var(--sz-accent);   /* de rand */
	color: var(--sz-op-donker);
	box-shadow: 0 18px 44px rgba(6, 8, 12, 0.4);

	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

/* Het vlak binnen de rand, zodat de lijn de schuine hoek volgt. */
.sz-consent__venster::after {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: -1;
	background: var(--sz-inkt);
	clip-path: inherit;
}

.sz-consent__kop {
	margin: 0 0 var(--sz-r-2);
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-m);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.01em;
	color: var(--sz-wit);
}

.sz-consent__tekst {
	margin: 0;
	font-size: var(--sz-t-s);
	line-height: 1.55;
	color: var(--sz-op-donker-vaag);
}

.sz-consent__tekst a {
	color: var(--sz-amber);
	text-underline-offset: 3px;
}

/* ---------------- De knoppen ----------------

   Accepteren is de hoofdknop en die mag opvallen. Weigeren staat er
   direct naast, is even groot en kost even veel klikken. Dat is waar
   het juridisch om draait: niet dat beide knoppen identiek zijn, maar
   dat weigeren niet moeilijker is gemaakt dan accepteren. */

.sz-consent__knoppen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: var(--sz-r-3);
	margin-top: var(--sz-r-5);
}

.sz-consent__knoppen .sz-knop {
	width: 100%;
	justify-content: center;
	padding-inline: var(--sz-r-3);
	font-size: var(--sz-t-s);
	text-align: center;
}

/* Weigeren gebruikt de knopvariant voor een donkere ondergrond: lichte
   rand, donkere vulling, witte tekst. Op een wit vlak zou de tekst
   wegvallen, en dat is precies wat er niet mag gebeuren bij de knop
   waarmee iemand nee zegt. */

/* ---------------- Zelf instellen ---------------- */

.sz-consent__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sz-r-3);
	margin-top: var(--sz-r-4);
	padding-top: var(--sz-r-3);
	border-top: 1px solid var(--sz-inkt-3);
}

.sz-consent__meer,
.sz-consent__bewaar {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sz-consent__meer:hover,
.sz-consent__bewaar:hover { color: var(--sz-amber); }

.sz-consent__bewaar {
	color: var(--sz-amber);
	font-weight: 600;
}

.sz-consent__keuzes {
	display: grid;
	gap: var(--sz-r-4);
	margin-top: var(--sz-r-5);
	padding-top: var(--sz-r-4);
	border-top: 1px solid var(--sz-inkt-3);
	max-height: 42vh;
	overflow-y: auto;
}

.sz-consent__keuzes[hidden] { display: none; }

/* ---------------- Een categorie ---------------- */

.sz-consent__schakelaar {
	display: flex;
	align-items: center;
	gap: var(--sz-r-3);
	cursor: pointer;
}

.sz-consent__schakelaar input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Een schuifje in de vormtaal: hoekig, niet rond. */
.sz-consent__vinkje {
	position: relative;
	flex-shrink: 0;
	width: 2.25rem;
	height: 1.15rem;
	background: var(--sz-inkt-3);
	transition: background-color 0.15s;
}

.sz-consent__vinkje::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(1.15rem - 4px);
	height: calc(1.15rem - 4px);
	background: var(--sz-op-donker-vaag);
	transition: transform 0.15s, background-color 0.15s;
}

.sz-consent__schakelaar input:checked + .sz-consent__vinkje {
	background: var(--sz-accent-diep);
}

.sz-consent__schakelaar input:checked + .sz-consent__vinkje::after {
	transform: translateX(calc(2.25rem - 1.15rem));
	background: var(--sz-accent);
}

.sz-consent__schakelaar input:disabled + .sz-consent__vinkje {
	opacity: 0.55;
	cursor: not-allowed;
}

.sz-consent__schakelaar input:focus-visible + .sz-consent__vinkje {
	outline: 2px solid var(--sz-accent);
	outline-offset: 2px;
}

.sz-consent__naam {
	font-size: var(--sz-t-s);
	font-weight: 600;
	color: var(--sz-wit);
}

.sz-consent__vast {
	margin-left: 0.4rem;
	font-size: var(--sz-t-xxs);
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--sz-op-donker-vaag);
}

.sz-consent__uitleg {
	margin: 0.35rem 0 0 calc(2.25rem + var(--sz-r-3));
	font-size: var(--sz-t-xs);
	line-height: 1.5;
	color: var(--sz-op-donker-vaag);
}

/* ---------------- Mobiel ---------------- */

@media (max-width: 40rem) {
	.sz-consent {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.sz-consent__venster {
		clip-path: polygon(
			0 var(--sz-hoek),
			var(--sz-hoek) 0,
			100% 0,
			100% 100%,
			0 100%
		);
		padding-bottom: calc(var(--sz-r-5) + env(safe-area-inset-bottom, 0px));
	}

	/* De vaste actiebalk onderaan is 54px hoog plus de veilige zone.
	   Daar moet de banner bovenop, niet achter. */
	.sz-consent { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }

	.sz-consent__venster { padding-bottom: var(--sz-r-5); }

	/* Onder elkaar past beter op een smal scherm. Accepteren bovenaan,
	   want daar komt de duim het makkelijkst. */
	.sz-consent__knoppen { grid-template-columns: minmax(0, 1fr); }
	.sz-consent__knoppen .sz-knop--primair { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
	.sz-consent,
	.sz-consent.is-weg { animation-duration: 0.01ms; }
	.sz-consent__vinkje::after { transition: none; }
}

/* De accepteerknop krijgt donkere tekst op het oranje. Wit op #FF6A13
   haalt maar 2,87:1 en dat is te weinig voor knoptekst van deze grootte;
   met bijna-zwart wordt het 6,82:1 en blijft het oranje even fel. */
.sz-consent__knoppen .sz-knop--primair {
	color: var(--sz-inkt);
	font-weight: 700;
}

.sz-consent__knoppen .sz-knop--primair svg { color: inherit; }
/* ==================================================================
   Stadspagina's.

   Elke sectie een eigen vorm: een strook met cijfers, een genummerde
   lijst voor de terreinen, een vrachtbrief voor de voorbeeldrit en een
   platte linklijst voor de buurplaatsen. Acht van deze pagina's achter
   elkaar mogen niet lezen als acht keer hetzelfde.
   ================================================================== */

/* Het kruimelpad staat in de hero. Genoeg lucht eronder om los te staan
   van de aanhef, zonder dat het zelf aandacht vraagt. */
.sz-hero--stad .sz-hero__kop .sz-kruimels {
	margin-bottom: var(--sz-r-6);
	padding-top: 0;
}

/* ---------------- De cijferstrook ---------------- */

.sz-cijferstrook {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--sz-lijn);
	border-bottom: 1px solid var(--sz-lijn);
}

.sz-cijferstrook > div {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding: var(--sz-r-4) var(--sz-r-5);
	border-right: 1px solid var(--sz-lijn);
}

.sz-cijferstrook > div:last-child { border-right: 0; }

.sz-cijferstrook dt {
	font-size: var(--sz-t-xs);
	color: var(--sz-grijs);
}

.sz-cijferstrook dd {
	margin: 0;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-h3);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sz-inkt);
	font-variant-numeric: tabular-nums;
}

.sz-cijferstrook dd span {
	font-family: var(--sz-font-body);
	font-size: var(--sz-t-s);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--sz-grijs);
}

@media (max-width: 46rem) {
	.sz-cijferstrook > div {
		border-right: 0;
		border-bottom: 1px solid var(--sz-lijn);
	}
	.sz-cijferstrook > div:last-child { border-bottom: 0; }
}

/* ---------------- Verhaal naast de terreinen ---------------- */

.sz-stadsplit {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--sz-r-8);
	align-items: start;
}

.sz-stadsplit__tekst h2 { margin-top: 0; }

.sz-stadsplit__tekst p {
	line-height: 1.7;
	color: var(--sz-inkt-zacht);
}

.sz-stadsplit__terreinen .sz-kop__label { margin-bottom: var(--sz-r-4); }

@media (max-width: 54rem) {
	/* Linkerkolom eerst, dan de rechter: dezelfde volgorde als op
	   desktop, zodat de pagina leest zoals hij is bedoeld. */
	.sz-stadsplit { grid-template-columns: minmax(0, 1fr); gap: var(--sz-r-7); }
}

/* ---------------- De terreinen ---------------- */

.sz-terreinen {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sz-lijn);
}

.sz-terreinen li {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr);
	gap: 0.15rem var(--sz-r-3);
	padding: var(--sz-r-3) 0;
	border-bottom: 1px solid var(--sz-lijn);
}

.sz-terreinen__nr {
	grid-row: span 2;
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-s);
	font-weight: 800;
	font-style: italic;
	color: var(--sz-accent);
	font-variant-numeric: tabular-nums;
	padding-top: 0.1em;
}

.sz-terreinen__naam {
	font-weight: 600;
	color: var(--sz-inkt);
}

.sz-terreinen__tekst {
	font-size: var(--sz-t-s);
	color: var(--sz-grijs);
}

/* ---------------- De vrachtbrief ---------------- */

.sz-vrachtbrief {
	position: relative;
	isolation: isolate;
	max-width: 44rem;
	margin-inline: auto;
	padding: var(--sz-r-6);
	background: var(--sz-accent);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		var(--sz-hoek) 100%,
		0 calc(100% - var(--sz-hoek))
	);
}

.sz-vrachtbrief::after {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: -1;
	background: var(--sz-inkt-2);
	clip-path: inherit;
}

/* Van waar naar waar. */
.sz-vrachtbrief__route {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--sz-r-4);
	padding-bottom: var(--sz-r-5);
	border-bottom: 1px dashed var(--sz-inkt-3);
}

.sz-vrachtbrief__punt {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.sz-vrachtbrief__punt strong {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.02em;
	color: var(--sz-wit);
	overflow-wrap: anywhere;
}

.sz-vrachtbrief__label {
	font-size: var(--sz-t-xs);
	letter-spacing: 0.02em;
	color: var(--sz-op-donker-vaag);
}

.sz-vrachtbrief__pijl {
	display: flex;
	color: var(--sz-accent);
}

/* De regels. */
.sz-vrachtbrief__regels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--sz-r-4);
	margin: var(--sz-r-5) 0 0;
}

.sz-vrachtbrief__regels > div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.sz-vrachtbrief__regels dt {
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
}

.sz-vrachtbrief__regels dd {
	margin: 0;
	font-size: var(--sz-t-s);
	color: var(--sz-op-donker);
}

/* Het bedrag. */
.sz-vrachtbrief__prijs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sz-r-3);
	margin-top: var(--sz-r-5);
	padding-top: var(--sz-r-4);
	border-top: 1px solid var(--sz-inkt-3);
}

.sz-vrachtbrief__prijs .sz-vrachtbrief__label { width: 100%; }

.sz-vrachtbrief__prijs strong {
	font-family: var(--sz-font-kop);
	font-size: clamp(2.2rem, 7vw, 3rem);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sz-accent);
	font-variant-numeric: tabular-nums;
}

.sz-vrachtbrief__btw {
	font-size: var(--sz-t-s);
	color: var(--sz-op-donker-vaag);
}

.sz-vrachtbrief__voet {
	margin: var(--sz-r-4) 0 var(--sz-r-5);
	font-size: var(--sz-t-xs);
	line-height: 1.6;
	color: var(--sz-op-donker-vaag);
}

@media (max-width: 34rem) {
	/* Onder elkaar met de pijl een kwartslag gedraaid. */
	.sz-vrachtbrief__route { grid-template-columns: minmax(0, 1fr); }
	.sz-vrachtbrief__pijl { transform: rotate(90deg); justify-content: flex-start; }
}

/* ---------------- Waar wij nog meer komen ---------------- */

.sz-burenlijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0 var(--sz-r-6);
	margin: var(--sz-r-4) 0 0;
	padding: 0;
	list-style: none;
}

.sz-burenlijst a {
	display: flex;
	align-items: baseline;
	gap: var(--sz-r-2);
	padding: var(--sz-r-3) 0;
	border-bottom: 1px solid var(--sz-lijn);
	color: var(--sz-inkt);
	text-decoration: none;
	font-weight: 500;
}

.sz-burenlijst a:hover,
.sz-burenlijst a:focus-visible { color: var(--sz-accent-diep); }

.sz-burenlijst small {
	font-size: var(--sz-t-xs);
	color: var(--sz-grijs);
	font-variant-numeric: tabular-nums;
}

.sz-burenlijst svg {
	margin-left: auto;
	color: var(--sz-accent);
	flex-shrink: 0;
	transition: transform var(--sz-snel) var(--sz-soepel);
}

.sz-burenlijst a:hover svg { transform: translateX(3px); }

/* ---------------- Het werkgebied-overzicht ---------------- */

.sz-werkgebied th[scope="row"] { font-weight: 600; }

.sz-werkgebied th[scope="row"] a {
	color: var(--sz-inkt);
	text-decoration: none;
}

.sz-werkgebied th[scope="row"] a:hover,
.sz-werkgebied th[scope="row"] a:focus-visible { color: var(--sz-accent-diep); }

.sz-werkgebied th[scope="row"] small {
	display: block;
	font-weight: 400;
	font-size: var(--sz-t-xs);
	color: var(--sz-grijs);
}

.sz-werkgebied td { font-variant-numeric: tabular-nums; }

.sz-werkgebied__link { width: 3rem; text-align: right; }

.sz-werkgebied__link a {
	display: inline-flex;
	color: var(--sz-accent);
	transition: transform var(--sz-snel) var(--sz-soepel);
}

.sz-werkgebied__link a:hover { transform: translateX(3px); }

.sz-werkgebied__voet {
	margin-top: var(--sz-r-5);
	font-size: var(--sz-t-s);
	color: var(--sz-grijs);
}
/* ==================================================================
   Dienstpagina's.
   ================================================================== */

.sz-dienst__tekst p {
	line-height: 1.7;
	color: var(--sz-inkt-zacht);
}

.sz-sectie--donker .sz-dienst__tekst p { color: var(--sz-op-donker); }

.sz-dienst__tekst > *:first-child { margin-top: 0; }
.sz-dienst__tekst > *:last-child { margin-bottom: 0; }

/* ---------------- De kilometervergelijking ---------------- */

.sz-vergelijk td strong { color: var(--sz-inkt); }

.sz-vergelijk__verschil {
	font-weight: 700;
	color: var(--sz-accent-diep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sz-vergelijk td { font-variant-numeric: tabular-nums; }

.sz-vergelijk__voet,
.sz-afstanden__voet {
	max-width: 46rem;
	margin-top: var(--sz-r-5);
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-grijs);
}

/* ---------------- Afstandentabel ---------------- */

.sz-afstanden td { font-variant-numeric: tabular-nums; }
.sz-afstanden td strong { color: var(--sz-inkt); }
.sz-afstanden th[scope="row"] { font-weight: 600; }

/* ---------------- Genummerde stappen ---------------- */

.sz-stappen {
	display: grid;
	gap: var(--sz-r-5);
	margin: var(--sz-r-6) 0 0;
	padding: 0;
	list-style: none;
}

.sz-stappen > li {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--sz-r-4);
	align-items: start;
	padding-top: var(--sz-r-4);
	border-top: 1px solid var(--sz-lijn);
}

.sz-sectie--donker .sz-stappen > li { border-top-color: var(--sz-inkt-3); }

.sz-stappen__nr {
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-l);
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sz-accent);
	font-variant-numeric: tabular-nums;
}

.sz-stappen h3 {
	margin: 0 0 0.35rem;
	font-size: var(--sz-t-m);
	line-height: 1.25;
}

.sz-stappen p {
	margin: 0;
	line-height: 1.6;
	color: var(--sz-inkt-zacht);
}

.sz-sectie--donker .sz-stappen p { color: var(--sz-op-donker-vaag); }

@media (max-width: 34rem) {
	.sz-stappen > li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--sz-r-3); }
}

/* ---------------- Tarievenpagina ---------------- */

.sz-tarieftabel th[scope="row"] { font-weight: 600; }

.sz-tarieftabel th[scope="row"] small {
	display: block;
	font-weight: 400;
	font-size: var(--sz-t-xs);
	color: var(--sz-grijs);
}

.sz-tarieftabel td,
.sz-toeslagen td { font-variant-numeric: tabular-nums; }
.sz-tarieftabel td strong,
.sz-toeslagen td strong { color: var(--sz-inkt); }
.sz-toeslagen th[scope="row"] { font-weight: 600; }

/* Wat er wel en niet in zit, naast elkaar. */
.sz-tarieven__split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--sz-r-7);
}

.sz-tarieven__kop {
	margin: 0 0 var(--sz-r-4);
	font-size: var(--sz-t-l);
}

.sz-tarieven__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.sz-tarieven__lijst li {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: var(--sz-r-3);
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--sz-inkt-3);
	color: var(--sz-op-donker);
	line-height: 1.5;
}

/* Het teken ervoor: een streep die meebuigt met de vormtaal, geen vinkje
   of kruisje uit een iconenset. */
.sz-tarieven__lijst li::before {
	content: '';
	width: 0.9rem;
	height: 2px;
	margin-top: 0.72em;
	background: var(--sz-accent);
}

.sz-tarieven__lijst--nee li::before {
	background: var(--sz-op-donker-vaag);
	transform: rotate(-20deg);
}

.sz-tarieven__lijst--nee li { color: var(--sz-op-donker-vaag); }

/* Links naar de stadspagina's onder de afstandentabel. */
.sz-afstanden__steden,
.sz-tarieven__vast,
.sz-prijzen__meer,
.sz-gebieden__meer {
	margin-top: var(--sz-r-5);
	font-size: var(--sz-t-s);
	line-height: 1.6;
	color: var(--sz-grijs);
}

.sz-gebieden__meer a,
.sz-prijzen__meer a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--sz-accent-diep);
}

.sz-sectie--donker .sz-gebieden__meer { color: var(--sz-op-donker-vaag); }
.sz-sectie--donker .sz-gebieden__meer a { color: var(--sz-amber); }

.sz-gebieden__meer svg { transition: transform var(--sz-snel) var(--sz-soepel); }
.sz-gebieden__meer a:hover svg { transform: translateX(3px); }

.sz-tarieven__vast { max-width: 46rem; margin-inline: auto; }
/* ==================================================================
   Over ons.

   Vormen die nergens anders op de site terugkomen: een manifest in
   groot zetsel, twee portretten naast elkaar en een contrastlijst.
   ================================================================== */

/* ---------------- Het manifest ---------------- */

.sz-manifest {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.sz-manifest__tekst {
	margin: 0;
	font-family: var(--sz-font-kop);
	font-size: clamp(1.35rem, 3.4vw, 2rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--sz-inkt);
	text-wrap: balance;
}

.sz-manifest__tekst em {
	font-style: italic;
	font-weight: 800;
	color: var(--sz-accent-diep);
}

.sz-manifest__onder {
	margin: var(--sz-r-5) 0 0;
	font-size: var(--sz-t-m);
	line-height: 1.6;
	color: var(--sz-grijs);
	text-wrap: balance;
}

/* Op deze pagina staat het cijfer boven het label. */
.sz-sectie--vlak .sz-cijferstrook dd { order: -1; }

/* ---------------- De portretten ---------------- */

.sz-portretten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--sz-r-7);
}

.sz-portret {
	display: grid;
	/* Expliciete rijen. Zonder dit verdeelt de grid de overgebleven
	   ruimte over beide rijen, en dan zakt de tekst van het portret met
	   de kortste tekst naar beneden. De foto's staan dan wel gelijk maar
	   de namen niet. */
	grid-template-rows: max-content 1fr;
	align-content: start;
	gap: var(--sz-r-4);
	min-width: 0;
}

.sz-portret__beeld {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sz-vlak);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sz-hoek)) 0,
		100% var(--sz-hoek),
		100% 100%,
		0 100%
	);
}

.sz-portret__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Zolang de foto ontbreekt: het merkteken en een duidelijke melding,
   zodat niemand vergeet dat hier nog iets moet komen. */
.sz-portret__leeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sz-r-3);
	height: 100%;
	padding: var(--sz-r-5);
	text-align: center;
	color: var(--sz-inkt-vaag);
	font-size: var(--sz-t-xs);
}

.sz-portret__leeg svg { opacity: 0.4; }

.sz-portret__tekst h3 {
	margin: 0 0 0.15rem;
	font-size: var(--sz-t-l);
	line-height: 1.2;
}

.sz-portret__rol {
	margin: 0 0 var(--sz-r-3);
	font-size: var(--sz-t-xs);
	letter-spacing: 0.02em;
	color: var(--sz-accent-diep);
}

.sz-portret__tekst p {
	line-height: 1.65;
	color: var(--sz-inkt-zacht);
}

.sz-portret__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--sz-r-2);
	margin-top: var(--sz-r-2);
	font-weight: 600;
	color: var(--sz-inkt);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.sz-portret__tel:hover { color: var(--sz-accent-diep); }
.sz-portret__tel svg { color: var(--sz-accent); }

/* ---------------- De contrastlijst ---------------- */

.sz-contrast {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.sz-contrast li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr);
	align-items: center;
	gap: var(--sz-r-4);
	padding: var(--sz-r-4) 0;
	border-bottom: 1px solid var(--sz-inkt-3);
}

.sz-contrast li:first-child { border-top: 1px solid var(--sz-inkt-3); }

.sz-contrast__anders {
	color: var(--sz-op-donker-vaag);
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, 0.25);
	line-height: 1.45;
}

.sz-contrast__pijl {
	display: flex;
	justify-content: center;
	color: var(--sz-accent);
}

.sz-contrast__wij {
	font-weight: 600;
	color: var(--sz-wit);
	line-height: 1.45;
}

@media (max-width: 40rem) {
	/* Onder elkaar, met de pijl een kwartslag gedraaid. Het element
	   moet wel smal blijven: een geroteerd element draait om zijn eigen
	   middelpunt, dus een pijl in een blok van de volle kolombreedte
	   belandt na de rotatie precies in het midden. */
	.sz-contrast li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sz-r-1);
		padding-block: var(--sz-r-4);
	}

	.sz-contrast__pijl {
		width: 1.25rem;
		justify-content: flex-start;
		transform: rotate(90deg);
	}
}
/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.sz-footer {
	background: var(--sz-inkt);
	color: var(--sz-op-donker-vaag);
	font-size: var(--sz-t-s);
}

.sz-footer__boven {
	display: grid;
	gap: var(--sz-r-6);
	padding-block: var(--sz-sectie-kort) var(--sz-r-6);
}

@media (min-width: 48rem) {
	.sz-footer__boven {
		/* De kolommen nemen hun eigen breedte en worden uit elkaar
		   getrokken. Met fracties bleef er een gat staan zodra een
		   kolom wegviel, bijvoorbeeld als er nog geen footermenu is. */
		grid-auto-flow: column;
		grid-template-columns: minmax(0, 1.6fr);
		grid-auto-columns: max-content;
		justify-content: space-between;
		gap: var(--sz-r-8);
	}
}

.sz-footer__over { min-width: 0; max-width: 34rem; }

.sz-footer__over .sz-logo { margin-bottom: var(--sz-r-4); }

.sz-footer__tekst { margin-bottom: var(--sz-r-4); line-height: 1.6; }

.sz-footer__contact {
	display: grid;
	gap: var(--sz-r-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-footer__contact li { margin: 0; display: flex; align-items: flex-start; gap: var(--sz-r-2); }
.sz-footer__contact svg { flex-shrink: 0; margin-top: 0.2em; color: var(--sz-accent); }
.sz-footer__contact a { color: var(--sz-wit); text-decoration: none; }
.sz-footer__contact a:hover { color: var(--sz-accent); text-decoration: underline; }

.sz-footer__kolom { min-width: 0; }

.sz-footer__kop {
	margin-bottom: var(--sz-r-3);
	font-family: var(--sz-font-kop);
	font-size: var(--sz-t-s);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sz-wit);
}

.sz-footer__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sz-r-2);
}
.sz-footer__lijst li { margin: 0; }
.sz-footer__lijst a {
	color: var(--sz-op-donker-vaag);
	text-decoration: none;
}
.sz-footer__lijst a:hover { color: var(--sz-wit); text-decoration: underline; }

/* Openingstijden */
.sz-tijden { margin: 0; display: grid; gap: var(--sz-r-1); }
.sz-tijden > div {
	display: flex;
	justify-content: space-between;
	gap: var(--sz-r-3);
	min-width: 0;
}
.sz-tijden dt { color: var(--sz-op-donker-vaag); }
.sz-tijden dd { margin: 0; color: var(--sz-wit); font-variant-numeric: tabular-nums; }
.sz-tijden dd.is-dicht { color: var(--sz-inkt-vaag); }

.sz-footer__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sz-r-3) var(--sz-r-5);
	padding-block: var(--sz-r-4);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: var(--sz-t-xs);
}

.sz-footer__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sz-r-2) var(--sz-r-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-footer__juridisch li { margin: 0; }
.sz-footer__juridisch a { color: var(--sz-op-donker-vaag); text-decoration: none; }
.sz-footer__juridisch a:hover { color: var(--sz-wit); text-decoration: underline; }

.sz-footer__zakelijk {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sz-r-2) var(--sz-r-4);
	color: var(--sz-inkt-vaag);
}

/* ------------------------------------------------------------------
   404
   ------------------------------------------------------------------ */

.sz-404 {
	max-width: 40rem;
	padding-block: var(--sz-r-9);
	text-align: center;
	margin-inline: auto;
}
.sz-404__code {
	font-family: var(--sz-font-kop);
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--sz-accent);
	margin-bottom: var(--sz-r-4);
}
.sz-404 form {
	display: flex;
	gap: var(--sz-r-2);
	margin-block: var(--sz-r-5);
}
.sz-404 input[type='search'] {
	flex: 1;
	min-width: 0;
	padding: 0.75rem var(--sz-r-4);
	font: inherit;
	border: 1px solid var(--sz-lijn);
	border-radius: var(--sz-radius-knop);
}

/* De link waarmee je je cookiekeuze later kunt herzien. Verplicht:
   toestemming moet net zo makkelijk in te trekken zijn als te geven. */
.sz-footer__cookies {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--sz-t-xs);
	color: var(--sz-op-donker-vaag);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sz-footer__cookies:hover,
.sz-footer__cookies:focus-visible { color: var(--sz-amber); }

/* ------------------------------------------------------------------
   De plaatsen waar wij komen.

   Over de volle breedte onder de kolommen: acht links in een smalle
   kolom worden een onleesbare sliert. Dit is ook waar de interne links
   naar de stadspagina's vandaan komen, dus ze staan op elke pagina.
   ------------------------------------------------------------------ */

.sz-footer__steden {
	margin-top: var(--sz-r-7);
	padding-top: var(--sz-r-5);
	border-top: 1px solid var(--sz-inkt-3);
}

.sz-footer__steden ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sz-r-2) var(--sz-r-5);
	margin: var(--sz-r-3) 0 0;
	padding: 0;
	list-style: none;
}

.sz-footer__steden a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--sz-t-s);
	color: var(--sz-op-donker-vaag);
	text-decoration: none;
}

.sz-footer__steden a:hover,
.sz-footer__steden a:focus-visible {
	color: var(--sz-amber);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sz-footer__steden-meer {
	font-weight: 600;
	color: var(--sz-amber) !important;
}

.sz-footer__steden-meer svg { transition: transform var(--sz-snel) var(--sz-soepel); }
.sz-footer__steden-meer:hover svg { transform: translateX(3px); }