/*
Theme Name: Klarvexa
Theme URI: https://klarvexa.org/
Author: Klarvexa
Author URI: https://klarvexa.org/
Description: Thema voor een fietsverhuur aan de kust. Met een eigen huurplanner die de weekdrukte en de staffelkorting doorrekent en een routekaart met aanklikbare punten. Alle lettertypen staan in het thema zelf, er gaat geen verzoek naar buiten.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klarvexa
Tags: fietsen, verhuur, kust, duinen, nederlands
*/

/* =========================================================================
   1. Lettertypen uit het thema zelf
   ========================================================================= */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/outfit-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/outfit-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: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/source-sans-3-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/source-sans-3-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: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/source-sans-3-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/source-sans-3-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;
}

/* =========================================================================
   2. Kleuren en maten
   ========================================================================= */

:root {
	--zeediep: #0e3540;
	--zeepaneel: #16454f;
	--zeediepst: #0a2830;
	--rand: #23606b;
	--zandroom: #f1e7d5;
	--zandzacht: #cbd6d4;
	--baken: #f2a33c;
	--kwelder: #6fbfb5;
	/* Twee tinten voor het waarschuwingssignaal: de donkere voor randen en
	   vlakken, de lichte voor letters. Op het paneel haalt de donkere maar
	   4.05 en dat is te weinig voor tekst. */
	--boei: #ea8571;
	--boei-licht: #f4a897;

	--kop: 'Outfit', 'Segoe UI', system-ui, sans-serif;
	--tekst: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

	--breed: 1180px;
	--stuurhoogte: 72px;
}

/* =========================================================================
   3. Grondslag
   ========================================================================= */

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

/* Een klasse die display zet is sterker dan de browserregel voor [hidden];
   zonder deze regel blijft een verborgen knop zichtbaar. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Anders komt een anker onder de vaste kop terecht. */
	scroll-padding-top: calc(var(--stuurhoogte) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--zeediep);
	color: var(--zandroom);
	font-family: var(--tekst);
	font-size: 17px;
	line-height: 1.66;
	font-weight: 400;
}

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

a {
	color: var(--baken);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--kop);
	font-weight: 600;
	line-height: 1.14;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2rem, 4.6vw, 3.2rem);
}

h2 {
	font-size: clamp(1.55rem, 3.2vw, 2.3rem);
}

h3 {
	font-size: 1.26rem;
}

h4 {
	font-size: 1.06rem;
}

p {
	margin: 0 0 1.1em;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

li {
	margin-bottom: 0.4em;
}

strong,
b {
	font-weight: 600;
}

blockquote {
	margin: 0 0 1.2em;
	padding-left: 1.1em;
	border-left: 3px solid var(--rand);
	font-size: 1.1rem;
}

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

.zwijgend {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.overslaan {
	position: absolute;
	top: -60px;
	left: 12px;
	z-index: 60;
	background: var(--baken);
	color: var(--zeediep);
	padding: 10px 18px;
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s;
}

.overslaan:focus {
	top: 0;
}

/* =========================================================================
   4. Bak en etappes
   ========================================================================= */

.wielbaan {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 22px;
}

.wielbaan--nauw {
	max-width: 800px;
}

.etappe {
	padding: 74px 0;
}

.etappe--kort {
	padding: 46px 0;
}

.etappe--paneel {
	background: var(--zeepaneel);
}

.etappe--diep {
	background: var(--zeediepst);
}

.etappe__kop {
	max-width: 720px;
	margin-bottom: 38px;
}

.etappe__kop--midden {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.etappe__kop p {
	color: var(--zandzacht);
	font-size: 1.06rem;
	margin-bottom: 0;
}

.opschrift {
	display: block;
	font-family: var(--tekst);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kwelder);
	margin-bottom: 14px;
}

/* =========================================================================
   5. De spaakstreep: het scheidingsteken van deze site
   -------------------------------------------------------------------------
   Korte schuine streepjes van ongelijke lengte, als het spoor van spaken in
   het zand. Het is een span, dus die moet display: block krijgen, anders doet
   de hoogte niets.
   ========================================================================= */

.spaakstreep {
	display: block;
	height: 22px;
	width: 100%;
	border: 0;
	margin: 0;
	background-repeat: repeat-x;
	background-position: center;
	background-size: 84px 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='22' viewBox='0 0 84 22'%3E%3Cg stroke='%236fbfb5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 16 L9 6'/%3E%3Cpath d='M18 18 L22 9'/%3E%3Cpath d='M32 14 L38 4'/%3E%3Cpath d='M48 17 L52 8'/%3E%3Cpath d='M62 13 L68 5'/%3E%3Cpath d='M76 18 L80 10'/%3E%3C/g%3E%3C/svg%3E");
}

.spaakstreep--breed {
	height: 30px;
	background-size: 112px 30px;
}

/* =========================================================================
   6. Knoppen: de trapper
   ========================================================================= */

.trapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--tekst);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.trapper--vooruit {
	background: var(--baken);
	color: var(--zeediep);
}

.trapper--vooruit:hover {
	background: #f6b662;
	color: var(--zeediep);
}

.trapper--vrij {
	background: transparent;
	color: var(--baken);
	border-color: var(--baken);
}

.trapper--vrij:hover {
	background: var(--baken);
	color: var(--zeediep);
}

.trapper--kort {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 0.92rem;
}

.trapperrij {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.trapperrij--na {
	margin-top: 22px;
}

.trapperrij--ver {
	margin-top: 34px;
}

.naschrift {
	margin: 26px 0 0;
}

/* De pijlverwijzing in een kaart: hoog genoeg voor een vinger. */
.pijl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-weight: 600;
	font-size: 0.96rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
}

.pijl:hover {
	gap: 13px;
}

.pijl::after {
	content: '\2192';
}

/* =========================================================================
   7. Stuurstang: de kop van de site
   ========================================================================= */

.stuurstang {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(14, 53, 64, 0.96);
	backdrop-filter: blur(7px);
	border-bottom: 1px solid var(--rand);
}

.stuurstang__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 22px;
	min-height: var(--stuurhoogte);
	display: flex;
	align-items: center;
	gap: 20px;
}

.stuurstang__merk {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 46px;
	text-decoration: none;
	color: var(--zandroom);
	flex-shrink: 0;
}

.stuurstang__naam {
	display: block;
	font-family: var(--kop);
	font-size: 1.38rem;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.stuurstang__naam span {
	color: var(--baken);
}

.stuurstang__onder {
	display: block;
	font-family: var(--tekst);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--zandzacht);
	margin-top: 3px;
}

.stuurstang__navigatie {
	margin-left: auto;
}

.wegwijzer {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wegwijzer li {
	margin: 0;
}

.wegwijzer a {
	display: block;
	padding: 9px 12px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--zandroom);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.wegwijzer a:hover {
	color: var(--baken);
	border-bottom-color: var(--baken);
}

.wegwijzer .current-menu-item > a,
.wegwijzer .current_page_item > a {
	color: var(--baken);
	border-bottom-color: var(--baken);
}

.belknop {
	display: none;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--rand);
	border-radius: 4px;
	min-height: 44px;
	padding: 8px 14px;
	font-family: var(--tekst);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--zandroom);
	cursor: pointer;
}

.belknop__balken {
	display: block;
	width: 17px;
}

.belknop__balken i {
	display: block;
	height: 2px;
	background: var(--baken);
	margin: 3px 0;
}

/* =========================================================================
   8. Bagagerek: de voet van de site
   ========================================================================= */

/* De onderste ruimte is er voor de vaste balk over de browseropslag: zonder
   javascript is die balk niet weg te klikken, en dan mag hij ook niets
   bedekken. */
.bagagerek {
	background: var(--zeediepst);
	border-top: 1px solid var(--rand);
	padding: 62px 0 110px;
}

.bagagerek__raster {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 38px;
	margin-bottom: 40px;
}

.bagagerek__merk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	text-decoration: none;
	color: var(--zandroom);
	margin-bottom: 14px;
}

.bagagerek__over {
	color: var(--zandzacht);
	font-size: 0.95rem;
	max-width: 34ch;
	margin-bottom: 0;
}

.bagagerek h2 {
	font-family: var(--tekst);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--kwelder);
	margin-bottom: 14px;
}

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

.bagagerek ul li {
	margin-bottom: 2px;
}

.bagagerek ul a {
	display: block;
	min-height: 38px;
	padding: 8px 0;
	font-size: 0.95rem;
	color: var(--zandroom);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.bagagerek ul a:hover {
	color: var(--baken);
	border-bottom-color: var(--rand);
}

.bagagerek__gegevens {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 22px;
	padding: 22px 0 0;
	border-top: 1px solid var(--rand);
	font-size: 0.92rem;
	color: var(--zandzacht);
}

.bagagerek__gegevens li {
	margin: 0;
}

.bagagerek__gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--zandroom);
}

.bagagerek__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 26px;
	padding-top: 18px;
	border-top: 1px solid var(--rand);
	font-size: 0.86rem;
	color: var(--zandzacht);
}

.bagagerek__slot p {
	margin: 0;
}

/* =========================================================================
   9. Kaarten
   ========================================================================= */

.fietskaart {
	display: flex;
	flex-direction: column;
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-radius: 5px;
	overflow: hidden;
	height: 100%;
}

.fietskaart__beeld {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--zeediepst);
}

.fietskaart__binnen {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 4px;
}

/* De prijs staat hier onder de kop en boven de tekst. */
.fietskaart__prijs {
	font-family: var(--kop);
	font-size: 1.16rem;
	color: var(--baken);
	margin-bottom: 8px;
}

.fietskaart h3 {
	margin-bottom: 6px;
}

.fietskaart p {
	color: var(--zandzacht);
	font-size: 0.97rem;
}

.fietskaart .pijl {
	margin-top: auto;
	color: var(--baken);
}

/* De puntkaart: een ophaalpunt of een route in de zijkolom van de kaart. */
.puntkaart {
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-left: 4px solid var(--kwelder);
	border-radius: 4px;
	padding: 20px 22px;
}

.puntkaart--baken {
	border-left-color: var(--baken);
}

.puntkaart--boei {
	border-left-color: var(--boei);
}

.puntkaart__soort {
	display: block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kwelder);
	margin-bottom: 8px;
}

.puntkaart h3 {
	margin-bottom: 8px;
	font-size: 1.14rem;
}

.puntkaart p {
	font-size: 0.95rem;
	color: var(--zandzacht);
	margin-bottom: 0;
}

.puntkaart__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: 0.88rem;
	color: var(--zandroom);
}

.puntkaart__feiten li {
	margin: 0;
}

/* De tariefkaart: een blok met een waarschuwing of een losse mededeling. */
.tariefkaart {
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-radius: 4px;
	padding: 20px 22px;
	font-size: 0.96rem;
}

.tariefkaart--let {
	border-color: var(--boei);
	background: rgba(234, 133, 113, 0.1);
}

.tariefkaart h4 {
	margin-bottom: 6px;
	color: var(--kwelder);
}

.tariefkaart--let h4 {
	color: var(--boei-licht);
}

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

/* =========================================================================
   10. Rasters
   ========================================================================= */

.raster {
	display: grid;
	gap: 26px;
}

.raster--twee {
	grid-template-columns: repeat(2, 1fr);
}

.raster--drie {
	grid-template-columns: repeat(3, 1fr);
}

.raster--vier {
	grid-template-columns: repeat(4, 1fr);
}

.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

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

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

/* =========================================================================
   11. Hoofdbeeld op de startpagina
   ========================================================================= */

.hoofdbeeld {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	background: var(--zeepaneel);
	overflow: hidden;
}

.hoofdbeeld__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 52%;
}

/* De duinfoto is aan de onderkant donker en aan de bovenkant licht; de sluier
   volgt dat en is onderaan bijna dicht. Een pixelproef in de browsertest meet
   na of de tekst het haalt. */
.hoofdbeeld__sluier {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 40, 48, 0.94) 0%,
		rgba(10, 40, 48, 0.86) 34%,
		rgba(10, 40, 48, 0.5) 64%,
		rgba(10, 40, 48, 0.1) 100%);
}

.hoofdbeeld__binnen {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 22px 64px;
}

.hoofdbeeld h1 {
	max-width: 18ch;
	margin-bottom: 18px;
}

.hoofdbeeld__onder {
	max-width: 56ch;
	font-size: 1.1rem;
	color: var(--zandroom);
	margin-bottom: 28px;
}

.hoofdbeeld__wijzers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(241, 231, 213, 0.28);
	list-style: none;
	font-size: 0.94rem;
	color: var(--zandroom);
}

.hoofdbeeld__wijzers li {
	margin: 0;
}

.hoofdbeeld__wijzers b {
	color: var(--kwelder);
}

/* Kop van de binnenbladzijden, met de bandensporen erachter. */
.baankop {
	position: relative;
	padding: 66px 0 56px;
	background-color: var(--zeepaneel);
	background-image: linear-gradient(rgba(22, 69, 79, 0.86), rgba(22, 69, 79, 0.94)), url('images/bandensporen.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.baankop h1 {
	max-width: 24ch;
	margin-bottom: 14px;
}

.baankop__onder {
	max-width: 60ch;
	font-size: 1.08rem;
	color: var(--zandzacht);
	margin-bottom: 0;
}

/* Een foto over de volle breedte, los tussen twee etappes. */
.volleband {
	margin: 0;
}

/* =========================================================================
   12. Huurplanner
   ========================================================================= */

.planner {
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-radius: 5px;
	overflow: hidden;
}

.planner__binnen {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
}

.planner__keuzes {
	padding: 30px 30px 32px;
}

.planner__uitslag {
	padding: 30px 30px 32px;
	background: var(--zeediepst);
	border-left: 1px solid var(--rand);
}

.planner__veld {
	margin-bottom: 20px;
}

.planner__veld label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kwelder);
	margin-bottom: 7px;
}

.planner__veld select,
.planner__veld input[type='date'] {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	font-family: var(--tekst);
	font-size: 1rem;
	color: var(--zandroom);
	background: var(--zeediep);
	border: 1px solid var(--rand);
	border-radius: 4px;
}

.planner__veld select:focus-visible,
.planner__veld input[type='date']:focus-visible {
	outline: 3px solid var(--baken);
	outline-offset: 1px;
}

/* De dagenschuif: 20px hoog is op een telefoon niet te pakken, 40px wel. */
.planner__schuifrij {
	display: flex;
	align-items: center;
	gap: 16px;
}

.planner__schuif {
	flex: 1 1 auto;
	height: 40px;
	margin: 0;
	accent-color: var(--baken);
	cursor: pointer;
}

.planner__dagen {
	font-family: var(--kop);
	font-size: 1.3rem;
	color: var(--baken);
	min-width: 4.2em;
}

/* De weekbalk: zeven vakjes die laten zien hoe vol elke dag is. */
.planner__week {
	display: flex;
	gap: 4px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.planner__dag {
	flex: 1 1 0;
	text-align: center;
	padding: 8px 2px 7px;
	border: 1px solid var(--rand);
	border-radius: 4px;
	font-size: 0.76rem;
	color: var(--zandzacht);
	background: var(--zeediep);
}

.planner__dag--vol {
	border-color: var(--boei);
	color: var(--boei-licht);
}

.planner__dag--nu {
	background: var(--baken);
	border-color: var(--baken);
	color: var(--zeediep);
	font-weight: 600;
}

.planner__dagnaam {
	display: block;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.planner__dagvrij {
	display: block;
	margin-top: 3px;
}

.planner__bedrag {
	font-family: var(--kop);
	font-size: 2.4rem;
	line-height: 1.05;
	color: var(--baken);
	margin-bottom: 4px;
}

.planner__onder {
	font-size: 0.94rem;
	color: var(--zandzacht);
	margin-bottom: 18px;
}

.planner__regels {
	margin: 0 0 18px;
}

.planner__regel {
	display: flex;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--rand);
	font-size: 0.95rem;
}

.planner__regel dt {
	flex: 0 0 116px;
	font-weight: 600;
	color: var(--kwelder);
}

.planner__regel dd {
	margin: 0;
	color: var(--zandroom);
}

.planner__winst {
	color: var(--kwelder);
	font-weight: 600;
}

/* =========================================================================
   13. Routekaart
   ========================================================================= */

.routekaart {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 30px;
	align-items: start;
}

.routekaart__vlak {
	position: relative;
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-radius: 5px;
	overflow: hidden;
}

.routekaart__foto {
	width: 100%;
	display: block;
	opacity: 0.32;
}

.routekaart__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.routelijn {
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 6 5;
	opacity: 0.85;
}

.routelijn--baken {
	stroke: #f2a33c;
}

.routelijn--kwelder {
	stroke: #6fbfb5;
}

.routelijn--boei {
	stroke: #ea8571;
}

/* Een groep in svg vangt alleen kliks op de gekleurde pixels; het doorzichtige
   vlak eronder maakt het hele merkje aanklikbaar. */
.merkje {
	cursor: pointer;
}

.merkje__raak {
	fill: transparent;
	pointer-events: all;
}

/* De rand blijft dun: op een stip met een straal van drie eenheden vreet een
   dikke rand het gekleurde vlak op en lijken alle merkjes donker. */
.merkje__stip {
	stroke: #0a2830;
	stroke-width: 0.8;
}

.merkje--route .merkje__stip {
	fill: #f2a33c;
}

.merkje--punt .merkje__stip {
	fill: #6fbfb5;
}

.merkje--water .merkje__stip {
	fill: #f1e7d5;
}

.merkje__letter {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 3.6px;
	font-weight: 600;
	fill: #0a2830;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}

.merkje--nu .merkje__stip {
	stroke: #f1e7d5;
	stroke-width: 2;
}

/* Een groep in svg krijgt van de browser een rechthoekige focusrand om zijn
   hele omhullende vak, en dat leest als een witte doos naast het merkje. De
   focus wordt daarom op de stip zelf getoond. */
.merkje:focus {
	outline: none;
}

.merkje:focus-visible .merkje__stip {
	stroke: #f1e7d5;
	stroke-width: 2.6;
}

.routekaart__lijst {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.routekaart__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	font-size: 0.86rem;
	color: var(--zandzacht);
}

.routekaart__legenda li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.routekaart__bol {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.routekaart__bol--route {
	background: var(--baken);
}

.routekaart__bol--punt {
	background: var(--kwelder);
}

.routekaart__bol--water {
	background: var(--zandroom);
}

/* =========================================================================
   14. Cijfers
   ========================================================================= */

.cijferrij {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--rand);
	border-radius: 5px;
	background: var(--zeepaneel);
	overflow: hidden;
}

.cijferrij__vak {
	padding: 30px 26px 32px;
}

.cijferrij__vak + .cijferrij__vak {
	border-left: 1px solid var(--rand);
}

.cijferrij__getal {
	display: block;
	font-family: var(--kop);
	font-size: 2.9rem;
	line-height: 1;
	color: var(--baken);
}

.cijferrij__naam {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	margin-top: 6px;
}

/* Op de startpagina staat de uitleg onder het getal; op Over ons erboven. */
.cijferrij__uitleg {
	font-size: 0.93rem;
	color: var(--zandzacht);
	margin: 12px 0 0;
}

.cijferrij__uitleg--boven {
	margin: 0 0 14px;
	min-height: 4.2em;
}

/* =========================================================================
   15. Kaarten van rijders
   ========================================================================= */

.kaartenrij {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* De ansichtkaart: liggend, met een postzegelhoek rechtsboven. */
.rijkaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--zandroom);
	color: var(--zeediepst);
	border-radius: 3px;
	padding: 22px 24px 20px;
	box-shadow: 0 3px 0 rgba(10, 40, 48, 0.35);
}

.rijkaart::after {
	content: '';
	position: absolute;
	top: 14px;
	right: 16px;
	width: 30px;
	height: 34px;
	border: 2px dashed rgba(14, 53, 64, 0.4);
	border-radius: 2px;
	background: repeating-linear-gradient(45deg, rgba(242, 163, 60, 0.35) 0 4px, transparent 4px 8px);
}

.rijkaart__route {
	display: block;
	font-family: var(--kop);
	font-size: 1.05rem;
	color: var(--zeediepst);
	margin-bottom: 10px;
	padding-right: 52px;
}

.rijkaart__tekst {
	font-size: 0.98rem;
	line-height: 1.55;
	margin-bottom: 16px;
	border-left: 0;
	padding-left: 0;
}

.rijkaart__onder {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(14, 53, 64, 0.22);
	font-size: 0.9rem;
	color: rgba(10, 40, 48, 0.78);
}

.rijkaart__naam {
	font-weight: 600;
	color: var(--zeediepst);
}

/* =========================================================================
   16. Mensen
   ========================================================================= */

.mensenrij {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 44px;
}

.mens {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 26px;
	align-items: start;
}

.mens__beeld {
	width: 168px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid var(--rand);
}

.mens__rol {
	display: block;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kwelder);
	margin-bottom: 6px;
}

.mens h3 {
	margin-bottom: 10px;
}

.mens p {
	font-size: 0.97rem;
	color: var(--zandzacht);
}

.mens__zin {
	font-size: 1.02rem;
	color: var(--zandroom);
	padding-left: 14px;
	border-left: 2px solid var(--baken);
	margin-bottom: 0;
}

/* =========================================================================
   17. Tarieven en tabellen
   ========================================================================= */

.tafelrol {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.baantafel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.96rem;
}

.baantafel caption {
	text-align: left;
	color: var(--zandzacht);
	font-size: 0.94rem;
	padding-bottom: 12px;
}

.baantafel th,
.baantafel td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--rand);
	vertical-align: top;
}

.baantafel thead th {
	font-family: var(--tekst);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kwelder);
	border-bottom: 2px solid var(--rand);
	white-space: nowrap;
}

.baantafel tbody th {
	font-family: var(--kop);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--zandroom);
	white-space: nowrap;
}

.baantafel tr:nth-child(even) td,
.baantafel tr:nth-child(even) th {
	background: var(--zeepaneel);
}

.baantafel__prijs {
	white-space: nowrap;
	font-weight: 600;
	color: var(--baken);
}

/* =========================================================================
   18. Vragen
   ========================================================================= */

.vraaglijst {
	border-top: 1px solid var(--rand);
}

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

.vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 56px;
	padding: 14px 0;
	font-family: var(--kop);
	font-size: 1.12rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.vraag summary::-webkit-details-marker {
	display: none;
}

.vraag summary::after {
	content: '+';
	flex: 0 0 auto;
	font-family: var(--tekst);
	font-size: 1.5rem;
	color: var(--baken);
	line-height: 1;
}

.vraag[open] summary::after {
	content: '\2212';
}

.vraag__antwoord {
	padding-bottom: 18px;
	color: var(--zandzacht);
	max-width: 76ch;
}

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

/* =========================================================================
   19. Ritverslagen: etappes met een kilometerkolom
   ========================================================================= */

.verslagraster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.verslagkaart {
	display: flex;
	flex-direction: column;
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-radius: 5px;
	overflow: hidden;
	height: 100%;
}

.verslagkaart__beeld {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.verslagkaart__binnen {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.verslagkaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.82rem;
	color: var(--zandzacht);
	margin-bottom: 12px;
}

.verslagkaart__kop {
	font-family: var(--kop);
	font-size: 1.26rem;
	font-weight: 600;
	line-height: 1.16;
	margin: 0 0 10px;
}

.verslagkaart__kop a {
	display: inline-block;
	min-height: 38px;
	color: var(--zandroom);
	text-decoration: none;
	border-bottom: 1px solid var(--rand);
}

.verslagkaart__kop a:hover {
	color: var(--baken);
	border-bottom-color: var(--baken);
}

.verslagkaart p {
	font-size: 0.97rem;
	color: var(--zandzacht);
	margin-bottom: 0;
}

/* De etappelijst op een los verslag. */
.etappelijst {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 76ch;
}

.etappestap {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 26px;
	padding: 24px 0;
	border-top: 1px solid var(--rand);
	margin: 0;
}

.etappestap:last-child {
	border-bottom: 1px solid var(--rand);
}

.etappestap__km {
	font-family: var(--kop);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--baken);
	line-height: 1.1;
}

.etappestap__eenheid {
	display: block;
	font-family: var(--tekst);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zandzacht);
	margin-top: 2px;
}

.etappestap h2 {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.etappestap p {
	margin-bottom: 0;
	color: var(--zandroom);
}

/* =========================================================================
   20. Formulieren
   ========================================================================= */

.formulier {
	background: var(--zeepaneel);
	border: 1px solid var(--rand);
	border-radius: 5px;
	padding: 30px 30px 34px;
}

.formulier__veld {
	margin-bottom: 18px;
}

.formulier__veld label {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.formulier__veld input,
.formulier__veld select,
.formulier__veld textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	font-family: var(--tekst);
	font-size: 1rem;
	color: var(--zandroom);
	background: var(--zeediep);
	border: 1px solid var(--rand);
	border-radius: 4px;
}

.formulier__veld textarea {
	min-height: 150px;
	resize: vertical;
}

.formulier__veld input:focus-visible,
.formulier__veld select:focus-visible,
.formulier__veld textarea:focus-visible {
	outline: 3px solid var(--baken);
	outline-offset: 1px;
	border-color: var(--baken);
}

.formulier__hulp {
	font-size: 0.86rem;
	color: var(--zandzacht);
	margin: 5px 0 0;
}

.formulier__paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.valkuil {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.omroep {
	border: 1px solid var(--kwelder);
	border-left: 4px solid var(--kwelder);
	background: rgba(111, 191, 181, 0.12);
	padding: 16px 20px;
	border-radius: 4px;
	margin-bottom: 26px;
}

.omroep p {
	margin: 0;
}

.omroep--fout {
	border-color: var(--boei);
	border-left-color: var(--boei);
	background: rgba(234, 133, 113, 0.12);
}

/* =========================================================================
   21. Losse tekstbladzijden
   ========================================================================= */

.tekstblok {
	max-width: 74ch;
}

.tekstblok h2 {
	margin-top: 1.9em;
}

.tekstblok h2:first-child {
	margin-top: 0;
}

.tekstblok h3 {
	margin-top: 1.6em;
}

.tekstblok dl {
	margin: 0 0 1.4em;
}

.tekstblok dt {
	font-weight: 600;
	margin-top: 1em;
}

.tekstblok dd {
	margin: 0 0 0.5em;
	color: var(--zandzacht);
}

/* Mail- en telefoonverwijzingen in een definitielijst zijn anders 19px hoog. */
.tekstblok dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

.stukkop {
	max-width: 74ch;
}

.stukmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--rand);
	font-size: 0.9rem;
	color: var(--zandzacht);
}

.stukmeta li {
	margin: 0;
}

.stukbeeld {
	width: 100%;
	border-radius: 5px;
	border: 1px solid var(--rand);
	margin-bottom: 32px;
}

.stukinhoud {
	max-width: 70ch;
	font-size: 1.05rem;
}

/* De tekstkolom van het slotblok over een foto. */
.slotblok {
	max-width: 52ch;
}

/* De grote 404: p in een blok is (0,1,1) en verslaat een klasse van (0,1,0),
   dus die regel moet het eigen element overslaan. */
.verdwaald {
	text-align: center;
	padding: 96px 0 104px;
}

/* Het getal is decoratief, maar het is ook het grootste op de bladzijde. In de
   randkleur haalde het 1.85:1 en was het praktisch onzichtbaar; deze tint haalt
   3.5:1 en blijft ingetogen. */
.verdwaald__getal {
	display: block;
	font-family: var(--kop);
	font-size: clamp(5rem, 16vw, 9rem);
	line-height: 0.9;
	color: #3a8f97;
	margin-bottom: 10px;
}

.verdwaald p:not(.verdwaald__uitleg) {
	margin-left: auto;
	margin-right: auto;
}

.verdwaald__uitleg {
	max-width: 52ch;
	margin: 0 auto 30px;
	color: var(--zandzacht);
}

.verdwaald .trapperrij {
	justify-content: center;
}

/* =========================================================================
   22. Balk over de browseropslag
   ========================================================================= */

/* Over de volle breedte onderaan, geen zwevende kaart. */
.opslagbalk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--baken);
	color: var(--zeediep);
	border-top: 3px solid #d98c26;
}

.opslagbalk[hidden] {
	display: none !important;
}

.opslagbalk__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 16px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}

.opslagbalk p {
	margin: 0;
	flex: 1 1 460px;
	font-size: 0.94rem;
	color: #24170a;
}

.opslagbalk__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.opslagbalk .trapper--vrij {
	color: var(--zeediep);
	border-color: var(--zeediep);
}

.opslagbalk .trapper--vrij:hover {
	background: var(--zeediep);
	color: var(--baken);
}

.opslagbalk .trapper--vooruit {
	background: var(--zeediep);
	color: var(--zandroom);
}

.opslagbalk .trapper--vooruit:hover {
	background: var(--zeediepst);
	color: var(--zandroom);
}

/* =========================================================================
   23. Opdoemen bij het scrollen
   -------------------------------------------------------------------------
   Alleen doorzichtig als javascript de klasse js heeft gezet, anders is de
   bladzijde zonder script leeg.
   ========================================================================= */

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

.js .rolt.rolt--op {
	opacity: 1;
	transform: none;
}

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

	.js .rolt {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.trapper,
	.pijl {
		transition: none;
	}
}

/* =========================================================================
   24. Kleinere schermen
   ========================================================================= */

@media (max-width: 1040px) {
	.bagagerek__raster {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.raster--vier {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.cijferrij__vak:nth-child(3) {
		border-left: 0;
	}

	.cijferrij__vak:nth-child(n + 3) {
		border-top: 1px solid var(--rand);
	}

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

	.routekaart {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.stuurstang__navigatie {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--zeediep);
		border-bottom: 1px solid var(--rand);
		box-shadow: 0 12px 24px rgba(10, 40, 48, 0.45);
		margin-left: 0;
	}

	.stuurstang__navigatie[hidden] {
		display: none !important;
	}

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

	/* Merk links, reserveertoets rechts ervan, streepjes helemaal rechts. Het
	   automatische marge hoort op de toets en niet op de streepjes, anders
	   duwt die alles naar een tweede regel. */
	.belknop {
		display: inline-flex;
		margin-left: 0;
		order: 3;
	}

	.stuurstang .trapper--vooruit {
		margin-left: auto;
		order: 2;
		min-height: 42px;
		padding: 9px 15px;
		font-size: 0.9rem;
	}

	.wegwijzer {
		flex-direction: column;
		gap: 0;
		padding: 10px 22px 18px;
	}

	.wegwijzer a {
		padding: 12px 0;
		border-bottom: 1px solid var(--rand);
	}

	.duo,
	.planner__binnen {
		grid-template-columns: 1fr;
	}

	.duo {
		gap: 32px;
	}

	.duo--omgekeerd .duo__beeld {
		order: 0;
	}

	.planner__uitslag {
		border-left: 0;
		border-top: 1px solid var(--rand);
	}

	.mensenrij {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.raster--drie {
		grid-template-columns: repeat(2, 1fr);
	}

	.verslagraster {
		grid-template-columns: 1fr;
	}

	.hoofdbeeld {
		min-height: 540px;
	}
}

@media (max-width: 660px) {
	body {
		font-size: 16px;
	}

	.etappe {
		padding: 52px 0;
	}

	.etappe--kort {
		padding: 36px 0;
	}

	.wielbaan {
		padding: 0 18px;
	}

	.raster--twee,
	.raster--drie,
	.raster--vier,
	.kaartenrij,
	.formulier__paar {
		grid-template-columns: 1fr;
	}

	.cijferrij {
		grid-template-columns: 1fr;
	}

	.cijferrij__vak {
		border-left: 0 !important;
	}

	.cijferrij__vak + .cijferrij__vak {
		border-top: 1px solid var(--rand);
	}

	.cijferrij__uitleg--boven {
		min-height: 0;
	}

	.bagagerek__raster {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mens {
		grid-template-columns: 116px 1fr;
		gap: 18px;
	}

	.mens__beeld {
		width: 116px;
	}

	/* Op de smalste schermen alleen de streepjes; de naam blijft in aria-label. */
	.belknop__woord {
		display: none;
	}

	.belknop {
		padding: 8px 11px;
		min-width: 44px;
		justify-content: center;
	}

	.stuurstang__onder {
		display: none;
	}

	.stuurstang__binnen {
		gap: 10px;
		padding: 0 16px;
	}

	.stuurstang__naam {
		font-size: 1.2rem;
	}

	.stuurstang__merk {
		gap: 9px;
	}

	.stuurstang .trapper--vooruit {
		padding: 9px 12px;
		font-size: 0.86rem;
	}

	.planner__keuzes,
	.planner__uitslag {
		padding: 22px 18px 24px;
	}

	.planner__dag {
		font-size: 0.68rem;
		padding: 7px 1px 6px;
	}

	.formulier {
		padding: 22px 20px 26px;
	}

	.hoofdbeeld {
		min-height: 500px;
	}

	.hoofdbeeld__binnen {
		padding-bottom: 46px;
	}

	.etappestap {
		grid-template-columns: 62px 1fr;
		gap: 16px;
	}

	.etappestap__km {
		font-size: 1.25rem;
	}

	.opslagbalk__binnen {
		padding: 14px 18px;
	}

	.opslagbalk__knoppen {
		width: 100%;
	}

	.baantafel {
		font-size: 0.9rem;
	}

	.baantafel th,
	.baantafel td {
		padding: 11px 10px;
	}

	.baantafel thead th,
	.baantafel tbody th {
		white-space: normal;
	}
}