/*
Theme Name: Ravelon
Theme URI: https://ravelon.be/
Author: Studio Ravelon
Author URI: https://ravelon.be/
Description: Thema voor de landingspagina van Ravelon, een openwereld-racefestival voor pc, PlayStation 5 en Xbox Series X|S. Bevat vier eigen widgets, rondeverslagen met moderatie, boxenpost, cookiebanner en volledige Yoast-velden.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ravelon
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. Lettertypen, in het thema zelf, zonder verzoek naar buiten
   ============================================================ */

@font-face {
	font-family: 'Saira Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/saira-condensed-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Saira Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/saira-condensed-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Saira Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/saira-condensed-800-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Saira Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/saira-condensed-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/barlow-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/barlow-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/barlow-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/barlow-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   2. Grondslagen
   ============================================================ */

:root {
	--asfalt: #16181c;
	--asfalt-diep: #0e1013;
	--asfalt-licht: #1e2127;
	--asfalt-hoog: #262a31;
	--rand: #333841;
	--rand-scherp: #454c57;

	--krijt: #f4f3f0;
	--krijt-zacht: #c3c7ce;
	--krijt-stil: #9aa0a9;

	--signaal: #ff6a1f;
	--signaal-diep: #c94d0d;
	--signaal-zacht: #ffb083;

	--groen: #3d8a5b;
	--groen-licht: #6fc794;
	--geel: #f4c95d;
	--rood: #e2563d;

	--breedte: 1180px;
	--smal: 760px;
	--sprong: 1.25rem;

	--display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
	--tekst: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html {
	scroll-behavior: smooth;
	/* De kop blijft bovenaan staan; zonder deze marge landt een ankerlink
	   precies eronder en lijkt de kop van het blok verdwenen. */
	scroll-padding-top: 5.8rem;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--asfalt);
	color: var(--krijt);
	font-family: var(--tekst);
	font-size: 1.0625rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.005em;
	margin: 0 0 0.6em;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(2.5rem, 6vw, 4.1rem);
}

h2 {
	font-size: clamp(1.9rem, 4vw, 2.9rem);
}

h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.65rem);
}

h4 {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

p {
	margin: 0 0 1.15em;
}

a {
	color: var(--signaal-zacht);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--krijt);
}

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

ul,
ol {
	padding-left: 1.15rem;
}

li {
	margin-bottom: 0.45em;
}

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

table {
	border-collapse: collapse;
	width: 100%;
}

/* ============================================================
   3. Bouwstenen die overal terugkomen
   ============================================================ */

.rechte {
	width: min(100% - 2.4rem, var(--breedte));
	margin-inline: auto;
}

.rechte--smal {
	width: min(100% - 2.4rem, var(--smal));
}

.sector {
	padding: clamp(3.2rem, 7vw, 5.6rem) 0;
	position: relative;
}

.sector--diep {
	background-color: var(--asfalt-diep);
}

.sector--licht {
	background-color: var(--asfalt-licht);
}

.sector__kop {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sector__kop--midden {
	margin-inline: auto;
	text-align: center;
}

.sector__kop p {
	color: var(--krijt-zacht);
	font-size: 1.12rem;
	margin-bottom: 0;
}

/* Sectornummer boven een kop, zoals de sectorborden langs een circuit. */
.bordje {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--signaal);
	margin-bottom: 0.9rem;
}

.bordje::before {
	content: '';
	width: 2.2rem;
	height: 3px;
	background: linear-gradient(90deg, var(--signaal), transparent);
}

.bordje--stil {
	color: var(--krijt-stil);
}

.bordje--stil::before {
	background: linear-gradient(90deg, var(--rand-scherp), transparent);
}

/* De kerbsteen: de vaste scheiding tussen twee sectoren. */
.kerb {
	height: 14px;
	background-image: repeating-linear-gradient(
		135deg,
		var(--signaal) 0 22px,
		var(--krijt) 22px 44px
	);
	opacity: 0.92;
}

.kerb--dun {
	height: 8px;
	background-image: repeating-linear-gradient(
		135deg,
		var(--signaal-diep) 0 14px,
		var(--asfalt-hoog) 14px 28px
	);
}

.kerb--groen {
	background-image: repeating-linear-gradient(
		135deg,
		var(--groen) 0 22px,
		var(--krijt) 22px 44px
	);
}

/* ============================================================
   4. Knoppen
   ============================================================ */

.pedaal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.02rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.95rem 1.7rem;
	border: 2px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.14s ease, background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
	min-height: 3rem;
}

.pedaal--gas {
	background-color: var(--signaal);
	color: #1a0d04;
	border-color: var(--signaal);
}

.pedaal--gas:hover,
.pedaal--gas:focus-visible {
	background-color: var(--signaal-zacht);
	border-color: var(--signaal-zacht);
	color: #1a0d04;
	transform: translateY(-2px);
}

.pedaal--rem {
	background-color: transparent;
	color: var(--krijt);
	border-color: var(--rand-scherp);
}

.pedaal--rem:hover,
.pedaal--rem:focus-visible {
	border-color: var(--signaal);
	color: var(--signaal-zacht);
	transform: translateY(-2px);
}

.pedaal--vol {
	width: 100%;
}

.pedaal--kort {
	font-size: 0.86rem;
	padding: 0.62rem 1.05rem;
	min-height: 2.5rem;
	letter-spacing: 0.06em;
}

.pedaal[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.pedaalrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

/* Tekstlink met pijl, voor in kaarten. */
.wijzer {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--signaal);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.wijzer::after {
	content: '\203A';
	font-size: 1.3em;
	line-height: 1;
	transition: transform 0.14s ease;
}

.wijzer:hover,
.wijzer:focus-visible {
	color: var(--krijt);
	border-bottom-color: var(--signaal);
}

.wijzer:hover::after,
.wijzer:focus-visible::after {
	transform: translateX(4px);
}

/* ============================================================
   5. Kop van de pagina
   ============================================================ */

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--signaal);
	color: #1a0d04;
	padding: 0.8rem 1.4rem;
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}

.overslaan:focus {
	left: 1rem;
	top: 1rem;
}

.boxenmuur {
	position: sticky;
	top: 0;
	z-index: 90;
	background-color: rgba(14, 16, 19, 0.94);
	border-bottom: 1px solid var(--rand);
	backdrop-filter: blur(8px);
}

.boxenmuur__binnen {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-height: 4.6rem;
}

.merk {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--krijt);
	flex-shrink: 0;
}

.merk__teken {
	width: 2.35rem;
	height: 2.35rem;
	flex-shrink: 0;
}

.merk__naam {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.55rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.merk__naam span {
	color: var(--signaal);
}

.baanlijst {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	flex-wrap: wrap;
}

.baanlijst li {
	margin: 0;
}

.baanlijst a {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.97rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--krijt-zacht);
	text-decoration: none;
	padding: 0.55rem 0.62rem;
	border-bottom: 2px solid transparent;
}

.baanlijst a:hover,
.baanlijst a:focus-visible,
.baanlijst .current-menu-item > a,
.baanlijst .current_page_item > a {
	color: var(--krijt);
	border-bottom-color: var(--signaal);
}

.boxenmuur .pedaal--kort {
	flex-shrink: 0;
}

.klepknop {
	display: none;
	margin-left: auto;
	background: transparent;
	border: 2px solid var(--rand-scherp);
	border-radius: 2px;
	color: var(--krijt);
	width: 3rem;
	height: 3rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.klepknop span,
.klepknop span::before,
.klepknop span::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.klepknop span::before,
.klepknop span::after {
	content: '';
	position: absolute;
}

.klepknop span::before {
	transform: translateY(-6px);
}

.klepknop span::after {
	transform: translateY(6px);
}

.klepknop[aria-expanded='true'] span {
	background-color: transparent;
}

.klepknop[aria-expanded='true'] span::before {
	transform: rotate(45deg);
}

.klepknop[aria-expanded='true'] span::after {
	transform: rotate(-45deg);
}

/* ============================================================
   6. Startgrid: het beeld bovenaan de voorpagina
   ============================================================ */

.startgrid {
	position: relative;
	overflow: hidden;
	background-color: var(--asfalt-diep);
}

.startgrid__beeld {
	position: absolute;
	inset: 0;
	background-image: url('images/baan-kaaplus.jpg');
	background-size: cover;
	background-position: center 58%;
}

.startgrid__waas {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(14, 16, 19, 0.95) 0%,
		rgba(14, 16, 19, 0.86) 42%,
		rgba(14, 16, 19, 0.38) 72%,
		rgba(14, 16, 19, 0.62) 100%
	);
}

.startgrid__binnen {
	position: relative;
	padding: clamp(3.4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
}

.startgrid__tekst {
	max-width: 39rem;
}

.startgrid h1 {
	margin-bottom: 0.45em;
}

.startgrid h1 em {
	font-style: normal;
	color: var(--signaal);
	display: block;
}

.startgrid__inleiding {
	font-size: 1.2rem;
	color: var(--krijt-zacht);
	max-width: 34rem;
}

.platformrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.8rem;
	padding: 0;
}

.platformrij li {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--krijt-zacht);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	padding: 0.34rem 0.7rem;
	background-color: rgba(30, 33, 39, 0.7);
}

/* Aftelklok naar de seizoensstart. */
.klok {
	display: flex;
	gap: 0.7rem;
	margin-top: 2.4rem;
	flex-wrap: wrap;
}

.klok__vak {
	background-color: rgba(14, 16, 19, 0.82);
	border: 1px solid var(--rand);
	border-top: 3px solid var(--signaal);
	padding: 0.7rem 1.05rem;
	min-width: 5.1rem;
	text-align: center;
}

.klok__cijfer {
	display: block;
	font-family: var(--display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	color: var(--krijt);
	font-variant-numeric: tabular-nums;
}

.klok__naam {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-top: 0.3rem;
}

/* ============================================================
   7. Kaarten en roosters
   ============================================================ */

.rooster {
	display: grid;
	gap: 1.5rem;
}

.rooster--twee {
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.rooster--drie {
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}

.rooster--vier {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.bord {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	border-left: 3px solid var(--signaal);
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.bord--groen {
	border-left-color: var(--groen-licht);
}

.bord--stil {
	border-left-color: var(--rand-scherp);
}

.bord h3 {
	margin-bottom: 0.4em;
}

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

.bord__nummer {
	font-family: var(--display);
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--signaal);
	margin-bottom: 0.35rem;
}

/* Kaart met beeld erboven. */
.wagenkaart {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.wagenkaart__beeld {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--asfalt-diep);
}

.wagenkaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wagenkaart:hover .wagenkaart__beeld img {
	transform: scale(1.04);
}

.wagenkaart__stempel {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: var(--signaal);
	color: #1a0d04;
	font-family: var(--display);
	font-weight: 800;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.32rem 0.8rem;
}

.wagenkaart__stempel--groen {
	background-color: var(--groen-licht);
	color: #06180e;
}

.wagenkaart__lijf {
	padding: 1.35rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.15rem;
}

.wagenkaart__lijf h3 {
	margin-bottom: 0.3em;
}

.wagenkaart__lijf p {
	color: var(--krijt-zacht);
	font-size: 1rem;
}

.wagenkaart__lijf .wijzer {
	margin-top: auto;
	align-self: flex-start;
}

/* Kerngetallen op een rij. */
.cijferrij {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cijferrij li {
	margin: 0;
	border-top: 3px solid var(--rand-scherp);
	padding-top: 0.9rem;
}

.cijferrij b {
	display: block;
	font-family: var(--display);
	font-weight: 800;
	font-size: 2.35rem;
	line-height: 1;
	color: var(--signaal);
	font-variant-numeric: tabular-nums;
}

.cijferrij span {
	display: block;
	color: var(--krijt-zacht);
	font-size: 0.94rem;
	margin-top: 0.35rem;
}

/* Genummerde stappen. */
.stappen {
	counter-reset: stap;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.stappen li {
	counter-increment: stap;
	margin: 0;
	padding-top: 3.1rem;
	position: relative;
	border-top: 1px solid var(--rand);
}

.stappen li::before {
	content: counter(stap, decimal-leading-zero);
	position: absolute;
	top: 0.8rem;
	left: 0;
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--signaal);
	letter-spacing: 0.06em;
}

.stappen h3 {
	font-size: 1.22rem;
	margin-bottom: 0.35em;
}

.stappen p {
	color: var(--krijt-zacht);
	margin-bottom: 0;
	font-size: 1rem;
}

/* Beeld naast tekst. */
.duo {
	display: grid;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.duo__beeld img {
	width: 100%;
	border: 1px solid var(--rand);
}

.duo--gedraaid .duo__beeld {
	order: 2;
}

@media (max-width: 47.9em) {
	.duo--gedraaid .duo__beeld {
		order: 0;
	}
}

/* Paddock: de ploeg. */
.paddock {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.paddockkaart {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	overflow: hidden;
}

.paddockkaart img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: grayscale(0.35) contrast(1.05);
}

.paddockkaart__lijf {
	padding: 1.2rem 1.3rem 1.4rem;
}

.paddockkaart__lijf h3 {
	font-size: 1.2rem;
	margin-bottom: 0.2em;
}

.paddockkaart__rol {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signaal);
	margin-bottom: 0.7rem;
}

.paddockkaart p {
	color: var(--krijt-zacht);
	font-size: 0.98rem;
	margin-bottom: 0;
}

/* ============================================================
   8. Rondeverslagen: opgemaakt als een tijdenblad
   ============================================================ */

.tijdenblad {
	border: 1px solid var(--rand);
	background-color: var(--asfalt-licht);
}

.tijdenblad__kop {
	display: grid;
	grid-template-columns: 3.4rem 1fr 7rem 6rem;
	gap: 0.8rem;
	padding: 0.7rem 1.2rem;
	background-color: var(--asfalt-hoog);
	border-bottom: 1px solid var(--rand);
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--krijt-stil);
}

.ronde {
	border-bottom: 1px solid var(--rand);
}

.ronde:last-child {
	border-bottom: 0;
}

.ronde__rij {
	display: grid;
	grid-template-columns: 3.4rem 1fr 7rem 6rem;
	gap: 0.8rem;
	align-items: baseline;
	padding: 1.05rem 1.2rem 0.4rem;
}

.ronde__plaats {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--signaal);
	font-variant-numeric: tabular-nums;
}

.ronde__naam {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.18rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--krijt);
}

.ronde__klasse {
	display: block;
	font-family: var(--tekst);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-top: 0.1rem;
}

.ronde__tijd {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.12rem;
	color: var(--geel);
	font-variant-numeric: tabular-nums;
}

.ronde__sterren {
	color: var(--signaal);
	font-size: 0.98rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.ronde__woord {
	padding: 0 1.2rem 1.15rem;
	color: var(--krijt-zacht);
	margin: 0;
	max-width: 58rem;
}

.ronde__sectoren {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding: 0 1.2rem 1.15rem;
	list-style: none;
	margin: 0;
}

.ronde__sectoren li {
	margin: 0;
	font-size: 0.78rem;
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	border: 1px solid var(--rand);
	padding: 0.16rem 0.5rem;
	font-variant-numeric: tabular-nums;
}

.zeef {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 1.6rem;
}

.zeef__knop {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background-color: transparent;
	color: var(--krijt-zacht);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	padding: 0.5rem 0.95rem;
	cursor: pointer;
	min-height: 2.4rem;
}

.zeef__knop:hover {
	border-color: var(--signaal);
	color: var(--krijt);
}

.zeef__knop[aria-pressed='true'] {
	background-color: var(--signaal);
	border-color: var(--signaal);
	color: #1a0d04;
}

/* ============================================================
   9. Journaal: patchnotities met versiebadge
   ============================================================ */

.notitie {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 1.6rem;
	padding: 1.7rem 0;
	border-bottom: 1px solid var(--rand);
}

.notitie:first-of-type {
	border-top: 1px solid var(--rand);
}

.versie {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1a0d04;
	background-color: var(--signaal);
	padding: 0.28rem 0.6rem;
	display: inline-block;
	align-self: start;
}

.versie--groen {
	background-color: var(--groen-licht);
	color: #06180e;
}

.notitie__datum {
	display: block;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-top: 0.55rem;
}

.notitie__lijf h3 {
	margin-bottom: 0.35em;
}

.notitie__lijf h3 a {
	color: var(--krijt);
	text-decoration: none;
}

.notitie__lijf h3 a:hover,
.notitie__lijf h3 a:focus-visible {
	color: var(--signaal);
}

.notitie__lijf p {
	color: var(--krijt-zacht);
	margin-bottom: 0.8rem;
}

/* ============================================================
   10. Formulieren
   ============================================================ */

.formulier {
	display: grid;
	gap: 1.15rem;
}

.formulier label {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-zacht);
	margin-bottom: 0.42rem;
}

.formulier input[type='text'],
.formulier input[type='email'],
.formulier input[type='tel'],
.formulier select,
.formulier textarea {
	width: 100%;
	background-color: var(--asfalt-diep);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	color: var(--krijt);
	font-family: var(--tekst);
	font-size: 1rem;
	padding: 0.78rem 0.9rem;
}

.formulier textarea {
	min-height: 9.5rem;
	resize: vertical;
}

.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
	border-color: var(--signaal);
	outline: 2px solid rgba(255, 106, 31, 0.35);
	outline-offset: 1px;
}

.formulier__hulp {
	font-size: 0.9rem;
	color: var(--krijt-stil);
	margin: 0.35rem 0 0;
}

.formulier__paar {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Het lokvakje voor robots: onzichtbaar en niet aanklikbaar. */
.lokvak {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	pointer-events: none;
}

.lokvak input[type='text'],
.lokvak label {
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	font-size: 1px !important;
	line-height: 1px !important;
	pointer-events: none;
}

/* Sterbeoordeling. */
.sterkeuze {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.25rem;
}

.sterkeuze input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	pointer-events: none;
}

.sterkeuze label {
	font-size: 1.85rem;
	line-height: 1;
	color: var(--rand-scherp);
	cursor: pointer;
	margin: 0;
	padding: 0.1rem 0.12rem;
	letter-spacing: 0;
	transition: color 0.12s ease;
}

.sterkeuze label:hover,
.sterkeuze label:hover ~ label,
.sterkeuze input:checked ~ label {
	color: var(--signaal);
}

.sterkeuze input:focus-visible + label {
	outline: 3px solid var(--signaal);
	outline-offset: 2px;
}

/* Meldingen na het versturen. */
.melding {
	border: 1px solid var(--rand);
	border-left: 3px solid var(--groen-licht);
	background-color: var(--asfalt-licht);
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.8rem;
}

.melding--fout {
	border-left-color: var(--rood);
}

.melding p {
	margin: 0;
}

.melding strong {
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.25rem;
	color: var(--krijt);
}

/* ============================================================
   11. Widget: afsteltafel
   ============================================================ */

.werkbank {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (max-width: 55em) {
	.werkbank {
		grid-template-columns: 1fr;
	}
}

.werkbank__links {
	padding: 1.9rem 1.8rem;
	border-right: 1px solid var(--rand);
}

@media (max-width: 55em) {
	.werkbank__links {
		border-right: 0;
		border-bottom: 1px solid var(--rand);
	}
}

.werkbank__rechts {
	padding: 1.9rem 1.8rem;
	background-color: var(--asfalt-diep);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.schuif {
	margin-bottom: 1.35rem;
}

.schuif:last-of-type {
	margin-bottom: 0;
}

.schuif__kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.35rem;
}

.schuif__naam {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.94rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--krijt);
}

.schuif__waarde {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--signaal);
	font-variant-numeric: tabular-nums;
}

.schuif input[type='range'] {
	width: 100%;
	margin: 0;
	accent-color: var(--signaal);
	height: 1.9rem;
}

.schuif__uitleg {
	font-size: 0.88rem;
	color: var(--krijt-stil);
	margin: 0.1rem 0 0;
}

.uitslag__label {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	display: block;
	margin-bottom: 0.3rem;
}

.uitslag__tijd {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(2.6rem, 7vw, 3.6rem);
	line-height: 1;
	color: var(--krijt);
	font-variant-numeric: tabular-nums;
	display: block;
}

.uitslag__delta {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	display: block;
	margin-top: 0.4rem;
	font-variant-numeric: tabular-nums;
}

.uitslag__delta[data-teken='sneller'] {
	color: var(--groen-licht);
}

.uitslag__delta[data-teken='trager'] {
	color: var(--rood);
}

.uitslag__delta[data-teken='gelijk'] {
	color: var(--krijt-stil);
}

/* Balans tussen onder- en overstuur. */
.balans__schaal {
	position: relative;
	height: 0.85rem;
	background: linear-gradient(90deg, var(--groen) 0%, var(--asfalt-hoog) 50%, var(--signaal-diep) 100%);
	border: 1px solid var(--rand);
}

.balans__naald {
	position: absolute;
	top: -0.3rem;
	bottom: -0.3rem;
	width: 3px;
	background-color: var(--krijt);
	transform: translateX(-50%);
	transition: left 0.25s ease;
}

.balans__uiteinden {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-top: 0.4rem;
}

.balans__oordeel {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--krijt);
	margin: 0.55rem 0 0;
}

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

.grepen li {
	margin: 0;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.92rem;
	color: var(--krijt-zacht);
	border-bottom: 1px dashed var(--rand);
	padding-bottom: 0.35rem;
}

.grepen b {
	font-family: var(--display);
	font-weight: 600;
	color: var(--krijt);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   12. Widget: sectorenblad
   ============================================================ */

.sectorblad {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	padding: 1.9rem 1.8rem;
}

.rijderkiezer {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-bottom: 1.7rem;
}

.rijderkiezer__kolom > span {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-bottom: 0.55rem;
}

.rijderknoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.rijderknop {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background-color: var(--asfalt-diep);
	color: var(--krijt-zacht);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	padding: 0.5rem 0.85rem;
	cursor: pointer;
	min-height: 2.5rem;
}

.rijderknop:hover {
	border-color: var(--signaal);
	color: var(--krijt);
}

.rijderknop[aria-pressed='true'] {
	background-color: var(--signaal);
	border-color: var(--signaal);
	color: #1a0d04;
}

.rijderkiezer__kolom--groen .rijderknop[aria-pressed='true'] {
	background-color: var(--groen-licht);
	border-color: var(--groen-licht);
	color: #06180e;
}

.deltarij {
	display: grid;
	grid-template-columns: 5.6rem 1fr 5.2rem;
	gap: 0.8rem;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px dashed var(--rand);
}

.deltarij:last-of-type {
	border-bottom: 0;
}

.deltarij__naam {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-zacht);
}

.deltarij__baan {
	position: relative;
	height: 1.5rem;
	background-color: var(--asfalt-diep);
	border: 1px solid var(--rand);
}

.deltarij__baan::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: var(--rand-scherp);
}

.deltarij__staaf {
	position: absolute;
	top: 3px;
	bottom: 3px;
	background-color: var(--signaal);
	transition: left 0.3s ease, width 0.3s ease, background-color 0.3s ease;
}

.deltarij__staaf[data-kant='groen'] {
	background-color: var(--groen-licht);
}

.deltarij__cijfer {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.98rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--krijt);
}

.deltatotaal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rand);
}

.deltatotaal__woord {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--krijt-zacht);
	font-size: 0.92rem;
}

.deltatotaal__cijfer {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--geel);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   13. Widget: remwijzer
   ============================================================ */

.remwijzer {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	padding: 1.9rem 1.8rem;
}

.bochtrij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 1.4rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px dashed var(--rand);
}

@media (max-width: 40em) {
	.bochtrij {
		grid-template-columns: 1fr;
	}
}

.bochtrij__naam {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.08rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--krijt);
	display: block;
}

.bochtrij__soort {
	display: block;
	font-size: 0.88rem;
	color: var(--krijt-stil);
}

.bordkeuze {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.bordknop {
	font-family: var(--display);
	font-weight: 800;
	font-size: 0.95rem;
	background-color: var(--asfalt-diep);
	color: var(--krijt-zacht);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	width: 3.3rem;
	height: 2.7rem;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	padding: 0;
}

.bordknop:hover {
	border-color: var(--signaal);
	color: var(--krijt);
}

.bordknop[aria-pressed='true'] {
	background-color: var(--signaal);
	border-color: var(--signaal);
	color: #1a0d04;
}

.bochtrij__oordeel {
	grid-column: 1 / -1;
	font-size: 0.92rem;
	margin: 0;
	color: var(--krijt-stil);
	min-height: 1.4rem;
}

.bochtrij__oordeel[data-staat='scherp'] {
	color: var(--groen-licht);
}

.bochtrij__oordeel[data-staat='wijd'] {
	color: var(--rood);
}

.bochtrij__oordeel[data-staat='traag'] {
	color: var(--geel);
}

.remtotaal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 1.4rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--rand);
}

.remtotaal__tijd {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(2.1rem, 6vw, 2.9rem);
	line-height: 1;
	color: var(--krijt);
	font-variant-numeric: tabular-nums;
}

.remtotaal__woord {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	display: block;
	margin-bottom: 0.25rem;
}

/* ============================================================
   14. Widget: kleurstelling
   ============================================================ */

.kleurstelling {
	background-color: var(--asfalt-licht);
	border: 1px solid var(--rand);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

@media (max-width: 55em) {
	.kleurstelling {
		grid-template-columns: 1fr;
	}
}

.kleurstelling__keuzes {
	padding: 1.9rem 1.8rem;
	border-right: 1px solid var(--rand);
}

@media (max-width: 55em) {
	.kleurstelling__keuzes {
		border-right: 0;
		border-bottom: 1px solid var(--rand);
	}
}

.kleurstelling__proef {
	padding: 1.9rem 1.8rem;
	background-color: var(--asfalt-diep);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.keuzeblok {
	margin-bottom: 1.35rem;
}

.keuzeblok:last-of-type {
	margin-bottom: 0;
}

.keuzeblok > span {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-bottom: 0.55rem;
}

.verfrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.verfknop {
	width: 2.7rem;
	height: 2.7rem;
	border: 2px solid var(--rand-scherp);
	border-radius: 2px;
	cursor: pointer;
	padding: 0;
}

.verfknop[aria-pressed='true'] {
	border-color: var(--krijt);
	box-shadow: 0 0 0 2px var(--asfalt-licht), 0 0 0 4px var(--signaal);
}

.patroonrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.patroonknop {
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	background-color: var(--asfalt-diep);
	color: var(--krijt-zacht);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	padding: 0.5rem 0.8rem;
	cursor: pointer;
	min-height: 2.5rem;
}

.patroonknop:hover {
	border-color: var(--signaal);
	color: var(--krijt);
}

.patroonknop[aria-pressed='true'] {
	background-color: var(--signaal);
	border-color: var(--signaal);
	color: #1a0d04;
}

.nummerkiezer {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.nummerkiezer__knop {
	width: 2.7rem;
	height: 2.7rem;
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.3rem;
	background-color: var(--asfalt-diep);
	color: var(--krijt);
	border: 1px solid var(--rand-scherp);
	border-radius: 2px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.nummerkiezer__knop:hover {
	border-color: var(--signaal);
	color: var(--signaal);
}

.nummerkiezer__waarde {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.7rem;
	color: var(--krijt);
	min-width: 3rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.wagenproef {
	width: 100%;
	height: auto;
	background-color: var(--asfalt);
	border: 1px solid var(--rand);
}

.liverycode {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--geel);
	background-color: var(--asfalt);
	border: 1px dashed var(--rand-scherp);
	padding: 0.65rem 0.9rem;
	text-align: center;
	word-break: break-all;
}

.kleurstelling__melding {
	font-size: 0.9rem;
	color: var(--groen-licht);
	margin: 0;
	min-height: 1.3rem;
}

/* ============================================================
   15. Onderkant van de pagina
   ============================================================ */

.pitstraat {
	background-color: var(--asfalt-diep);
	border-top: 1px solid var(--rand);
	padding: clamp(2.8rem, 5vw, 4rem) 0 2rem;
}

.pitstraat__rooster {
	display: grid;
	gap: 2.2rem;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
	margin-bottom: 2.6rem;
}

.pitstraat__merk {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 1rem;
}

.pitstraat p {
	color: var(--krijt-stil);
	font-size: 0.98rem;
	max-width: 26rem;
}

.pitstraat h4 {
	color: var(--krijt);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

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

.pitlijst li {
	margin-bottom: 0.6rem;
}

.pitlijst a {
	color: var(--krijt-zacht);
	text-decoration: none;
	font-size: 0.98rem;
}

.pitlijst a:hover,
.pitlijst a:focus-visible {
	color: var(--signaal);
	text-decoration: underline;
}

.pitstraat__streep {
	border-top: 1px solid var(--rand);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.6rem;
	justify-content: space-between;
	align-items: center;
	color: var(--krijt-stil);
	font-size: 0.9rem;
}

.pitstraat__streep p {
	margin: 0;
	font-size: 0.9rem;
}

/* ============================================================
   16. Cookiebanner: een strook onderaan, geen zwevend kaartje
   ============================================================ */

.koekstrook {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	background-color: var(--asfalt-diep);
	border-top: 3px solid var(--signaal);
	padding: 1.15rem 0;
	display: none;
}

.koekstrook.is-open {
	display: block;
}

.koekstrook__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.6rem;
	justify-content: space-between;
}

.koekstrook p {
	margin: 0;
	color: var(--krijt-zacht);
	font-size: 0.96rem;
	max-width: 46rem;
}

.koekstrook__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

/* ============================================================
   17. Losse pagina's en artikelen
   ============================================================ */

.paginakop {
	background-color: var(--asfalt-diep);
	padding: clamp(2.8rem, 6vw, 4.4rem) 0 clamp(2.2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--rand);
	position: relative;
	overflow: hidden;
}

.paginakop::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('images/asfalt.jpg');
	background-size: cover;
	background-position: center;
	opacity: 0.14;
	pointer-events: none;
}

.paginakop__binnen {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}

.paginakop h1 {
	margin-bottom: 0.3em;
}

.paginakop p {
	color: var(--krijt-zacht);
	font-size: 1.14rem;
	margin-bottom: 0;
}

.leesbaar h2 {
	margin-top: 2.4rem;
}

.leesbaar h3 {
	margin-top: 1.9rem;
}

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

.leesbaar ul li,
.leesbaar ol li {
	color: var(--krijt-zacht);
}

.wetblok {
	border-left: 3px solid var(--rand-scherp);
	padding-left: 1.4rem;
	margin-bottom: 2.2rem;
}

.wetblok:last-child {
	margin-bottom: 0;
}

.wetblok h2 {
	margin-top: 0;
	font-size: clamp(1.35rem, 2.6vw, 1.7rem);
}

.wetblok p,
.wetblok li {
	color: var(--krijt-zacht);
}

.artikel__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.2rem;
	align-items: center;
	color: var(--krijt-stil);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.8rem;
}

.artikel__lijf p:first-of-type {
	font-size: 1.14rem;
	color: var(--krijt);
}

.bladeren {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--rand);
}

.vierhonderdvier {
	text-align: center;
	padding: clamp(3.5rem, 9vw, 7rem) 0;
}

.vierhonderdvier__cijfer {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(5rem, 18vw, 11rem);
	line-height: 0.85;
	color: var(--signaal);
	margin: 0 0 1rem;
	letter-spacing: 0.02em;
}

/* De uitsluiting is nodig omdat het cijfer zelf ook een alinea is; zonder deze
   regel wint dit blok van het cijfer en krimpt de 404 tot lopende tekst. */
.vierhonderdvier p:not(.vierhonderdvier__cijfer) {
	color: var(--krijt-zacht);
	max-width: 34rem;
	margin-inline: auto;
	font-size: 1.1rem;
}

.vierhonderdvier .pedaalrij {
	justify-content: center;
	margin-top: 1.8rem;
}

/* ============================================================
   18. Beweging bij het scrollen, alleen als de scripts draaien
   ============================================================ */

.js .onthul {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .onthul.is-zichtbaar {
	opacity: 1;
	transform: none;
}

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

/* ============================================================
   19. Smalle schermen
   ============================================================ */

@media (max-width: 62em) {
	.klepknop {
		display: inline-flex;
	}

	.baanlijst {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background-color: var(--asfalt-diep);
		border-top: 1px solid var(--rand);
		border-bottom: 3px solid var(--signaal);
		padding: 0.5rem 1.2rem 1rem;
		margin: 0;
	}

	.baanlijst.is-open {
		display: flex;
	}

	.baanlijst a {
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--rand);
		font-size: 1.05rem;
	}

	.baanlijst li:last-child a {
		border-bottom: 0;
	}

	.boxenmuur__binnen {
		position: relative;
		flex-wrap: wrap;
	}

	.boxenmuur .pedaal--kort {
		display: none;
	}
}

@media (max-width: 47.9em) {
	.tijdenblad__kop {
		display: none;
	}

	.ronde__rij {
		grid-template-columns: 2.8rem 1fr;
		row-gap: 0.3rem;
	}

	.ronde__tijd,
	.ronde__sterren {
		grid-column: 2;
	}

	.notitie {
		grid-template-columns: 1fr;
		gap: 0.8rem;
	}

	.notitie__datum {
		display: inline-block;
		margin-top: 0;
		margin-left: 0.7rem;
	}

	.deltarij {
		grid-template-columns: 4.6rem 1fr 4.4rem;
		gap: 0.5rem;
	}

	.pitstraat__rooster {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.koekstrook {
		padding: 0.9rem 0;
	}

	.koekstrook p {
		font-size: 0.9rem;
	}

	.koekstrook__knoppen .pedaal {
		font-size: 0.8rem;
		padding: 0.58rem 0.85rem;
		min-height: 2.5rem;
	}

	.werkbank__links,
	.werkbank__rechts,
	.sectorblad,
	.remwijzer,
	.kleurstelling__keuzes,
	.kleurstelling__proef {
		padding: 1.4rem 1.2rem;
	}

	.pedaal {
		font-size: 0.95rem;
		padding: 0.85rem 1.3rem;
	}

	.pedaal--kort {
		padding: 0.65rem 1rem;
		min-height: 2.6rem;
	}

	/* Op een aanraakscherm moet elke link groot genoeg zijn om met een duim te
	   raken. Deze drie stonden onder de 36 pixels hoog. */
	.wijzer {
		padding-top: 0.45rem;
		padding-bottom: 0.5rem;
	}

	.pitlijst a {
		display: flex;
		align-items: center;
		min-height: 2.4rem;
	}

	.pitlijst li {
		margin-bottom: 0.2rem;
	}

	.notitie__lijf h3 a {
		display: inline-block;
		padding: 0.5rem 0;
	}

	.schuif input[type='range'] {
		height: 2.4rem;
	}

	/* Vier vakken naast elkaar in plaats van drie plus een eenzame vierde. */
	.klok {
		gap: 0.4rem;
	}

	.klok__vak {
		min-width: 0;
		flex: 1 1 0;
		padding: 0.6rem 0.35rem;
	}

	.klok__cijfer {
		font-size: 1.7rem;
	}

	.klok__naam {
		font-size: 0.62rem;
		letter-spacing: 0.1em;
	}
}