/* ==========================================================================
   holzverstehen.de — v4
   Wit, donkerbruin en walnootbruin. Manrope draagt de koppen, Inter de tekst
   en de bediening. Blauw betekent bediening of huidige selectie; inhoudelijke
   statuskleuren behouden hun eigen betekenis. Alle bestaande componenten en
   koppelingen (klassen, data-attributen, id's) blijven bestaan; dit bestand
   verandert alleen de presentatie.
   ========================================================================== */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

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

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

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

body {
	margin: 0;
	background: var(--papier);
	color: var(--inkt);
	font-family: var(--tekst);
	font-size: var(--t-l);
	line-height: 1.61;
	-webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
	body { font-size: 1.0625rem; line-height: 1.65; }
}

h1, h2, h3, h4 {
	font-family: var(--kop);
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin: 0 0 var(--r-3);
	font-weight: 800;
	color: var(--navy);
	text-wrap: balance;
}

h1 { font-size: clamp(2.0625rem, 1.5rem + 2.2vw, var(--t-4xl)); }
h2 { font-size: clamp(1.6875rem, 1.35rem + 1.1vw, var(--t-3xl)); margin-top: var(--r-7); line-height: 1.26; }
h3 { font-size: var(--t-xl); margin-top: var(--r-5); font-weight: 700; line-height: 1.36; }
h4 { font-size: var(--t-l); margin-top: var(--r-4); font-weight: 700; }

p, ul, ol, table, figure { margin: 0 0 var(--r-4); }

a {
	color: var(--link);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
	transition: color var(--soepel);
}
a:hover { color: var(--primair-donker); text-decoration-line: underline; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

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

hr { border: 0; border-top: 1px solid var(--lijn); margin: var(--r-6) 0; }

strong { font-weight: 650; }

/* Alleen visueel verbergen; de toegankelijke naam blijft bestaan. */
.wh-visueel-verborgen {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skiplink: vast donkerblauw, in beide kleurmodi leesbaar met witte tekst. */
.wh-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #2b211b;
	color: #fff;
	padding: var(--r-3) var(--r-4);
	z-index: 200;
	border-radius: 0 0 var(--rond-s) 0;
}
.wh-skip:focus { left: 0; color: #fff; }

/* Layout ------------------------------------------------------------------ */

.wh-omhulsel {
	width: min(100% - 2.5rem, var(--breedte));
	margin-inline: auto;
}

@media (min-width: 768px) {
	.wh-omhulsel { width: min(100% - 3rem, var(--breedte)); }
}

@media (min-width: 1280px) {
	.wh-omhulsel { width: min(100% - 4rem, var(--breedte)); }
}

@media (max-width: 360px) {
	.wh-omhulsel { width: min(100% - 2rem, var(--breedte)); }
}

.wh-sectie { padding-block: var(--r-8); }
.wh-sectie--strak { padding-block: var(--r-7); }
.wh-sectie--gedempt { background: var(--papier-2); }

/* Een sprong naar een sectieanker mag de kop niet onder de vaste bediening
   verbergen. */
section[id] { scroll-margin-top: calc(var(--sticky-offset, 68px) + 12px); }

.wh-sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--r-4);
	margin-bottom: var(--r-6);
}
.wh-sectiekop h2 { margin: 0; }
.wh-sectiekop p {
	margin: var(--r-2) 0 0;
	color: var(--inkt-zacht);
	max-width: 56ch;
	font-size: var(--t-m);
}
.wh-sectiekop__meer {
	font-family: var(--tekst);
	font-weight: 650;
	font-size: var(--t-m);
	white-space: nowrap;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.wh-sectiekop__meer::after { content: " →"; margin-left: 0.3rem; }

/* Rustig raster onder de donkerblauwe hero. */
.wh-raster {
	position: relative;
	isolation: isolate;
}
.wh-raster::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
	background-size: 34px 34px;
	pointer-events: none;
}

/* Knoppen ----------------------------------------------------------------- */

.wh-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r-2);
	min-height: 48px;
	padding: 0.7rem 1.25rem;
	border-radius: var(--rond-m);
	border: 1px solid transparent;
	font-family: var(--tekst);
	font-weight: 600;
	font-size: var(--t-m);
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--soepel), border-color var(--soepel), color var(--soepel);
}
.wh-knop:active { transform: translateY(1px); }
.wh-knop:disabled { opacity: 0.55; cursor: not-allowed; }

.wh-knop--primair,
.wh-knop--primair:focus {
	background: var(--primair);
	color: var(--op-primair);
}
.wh-knop--primair:hover { background: var(--primair-donker); color: var(--op-primair); }

.wh-knop--rand {
	background: transparent;
	border-color: var(--lijn-sterk);
	color: var(--inkt);
}
.wh-knop--rand:hover { border-color: var(--primair); color: var(--inkt); }

.wh-knop--cluster,
.wh-knop--cluster:hover,
.wh-knop--cluster:focus {
	background: var(--primair);
	color: var(--op-primair);
}
.wh-knop--cluster:hover { background: var(--primair-donker); }

.wh-knop--zacht,
.wh-knop--zacht:hover,
.wh-knop--zacht:focus {
	background: var(--primair-zacht);
	color: var(--inkt);
}
.wh-knop--zacht:hover { background: var(--papier-3); }

/* Stickerlabels bij benodigdheden en leestijd. */
.wh-sticker {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	background: var(--papier-2);
	color: var(--inkt);
	font-family: var(--tekst);
	font-weight: 600;
	font-size: var(--t-s);
	line-height: 1.4;
	border: 1px solid var(--lijn);
}

/* Homepage-chips: witte omlijnde labels op het donkerblauwe herovlak. */
.wh-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 0.9rem;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 550;
	text-decoration: none;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: var(--rond-m);
	transition: background var(--soepel), border-color var(--soepel);
}
.wh-chip:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; color: #fff; }
.wh-chip:focus-visible { outline-color: #fff; }

/* Header ------------------------------------------------------------------ */

.wh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--papier);
	border-bottom: 1px solid var(--lijn);
}

/* Tijdens het lezen van een gids mag de hoofdheader wegscrollen; alleen de
   gidsbediening blijft staan, dus nooit twee vaste balken boven elkaar.
   position: relative in plaats van static, zodat de megapanelen onder de
   volledige header blijven openen. */
body.wh-type-gids .wh-header,
body.wh-type-tool .wh-header { position: relative; top: auto; }

.wh-header__balk {
	display: flex;
	align-items: center;
	gap: var(--r-4);
	min-height: 80px;
}

.wh-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.wh-logo__merk { width: 208px; height: auto; display: block; }
.wh-logo__merk--donker { display: none; }
@media (prefers-color-scheme: dark) {
	.wh-logo__merk--licht { display: none; }
	.wh-logo__merk--donker { display: block; }
}
.wh-logo:focus-visible { outline-offset: 6px; }

.wh-header__navrij {
	border-top: 1px solid var(--lijn);
}
.wh-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0 0.25rem;
	min-height: 52px;
}

.wh-nav__knop {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.7rem 0.85rem;
	border-radius: var(--rond-s);
	font-family: var(--tekst);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--navy);
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	position: relative;
	min-height: 44px;
	transition: background var(--soepel), color var(--soepel);
}
.wh-nav__knop::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: 0.6;
	transition: transform var(--soepel);
}
.wh-nav__knop:hover { background: var(--primair-zacht); color: var(--link); }
.wh-nav__knop[aria-expanded="true"] { background: var(--primair-zacht); color: var(--link); }
.wh-nav__knop[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Open of actief: blauwe streep als indicator, niet alleen kleur. */
.wh-nav__knop[aria-expanded="true"]::before,
.wh-nav__knop[data-actief="1"]::before {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--primair);
}

/* Mega-menu */
.wh-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--papier);
	border-bottom: 1px solid var(--lijn);
	box-shadow: var(--schaduw-l);
	display: none;
	animation: wh-open 160ms ease-out;
}
.wh-mega[data-open="1"] { display: block; }

@keyframes wh-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.wh-mega__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--r-4) var(--r-6);
	padding-block: var(--r-3) var(--r-7);
	align-items: start;
	/* Ook een lang paneel blijft tot de laatste link bereikbaar: eigen
	   scrollruimte binnen de zichtbare vensterhoogte onder de header. */
	max-height: calc(100dvh - var(--header-hoogte) - 8px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wh-mega__balk {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}
.wh-mega__sluit {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5rem 0.75rem;
	min-height: 44px;
	font: 600 var(--t-s) var(--tekst);
	color: var(--link);
	cursor: pointer;
	border-radius: var(--rond-s);
}
.wh-mega__sluit:hover { text-decoration: underline; }

.wh-mega__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--r-6) var(--r-6);
}

.wh-mega__segment > a.wh-mega__kop {
	display: block;
	font-family: var(--kop);
	font-size: 1.25rem;
	line-height: 1.35;
	font-weight: 800;
	color: var(--navy);
	text-decoration: none;
	margin-bottom: var(--r-3);
	padding-bottom: var(--r-2);
	border-bottom: 2px solid var(--lijn);
}
.wh-mega__segment > a.wh-mega__kop:hover { color: var(--link); border-bottom-color: var(--primair); }

.wh-mega__lijst { list-style: none; margin: 0; padding: 0; }
.wh-mega__lijst li + li { margin-top: 1px; }
.wh-mega__lijst > li > a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--r-2);
	padding: 0.42rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--rond-s);
	color: var(--link);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 600;
	transition: background var(--soepel), color var(--soepel);
}
.wh-mega__lijst > li > a:hover {
	background: var(--primair-zacht);
	color: var(--primair-donker);
}
.wh-mega__aantal {
	font-size: var(--t-s);
	color: var(--inkt-zacht);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
/* De gidsen onder een onderwerp: ingesprongen snelkoppelingen. */
.wh-mega__gidsen {
	list-style: none;
	margin: 0.15rem 0 0.6rem;
	padding: 0 0 0 0.75rem;
	border-left: 1px solid var(--lijn);
}
.wh-mega__gidsen li + li { margin-top: 0; }
.wh-mega__gidsen a {
	display: block;
	padding: 0.3rem 0.4rem;
	margin-inline: -0.4rem;
	border-radius: var(--rond-s);
	font-size: 0.875rem;
	color: var(--inkt-zacht);
	text-decoration: none;
	line-height: 1.5;
}
.wh-mega__gidsen a:hover {
	background: var(--primair-zacht);
	color: var(--inkt);
}
.wh-mega__lijst--diep > li { margin-bottom: 0.4rem; }

.wh-mega__alles {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--r-2);
	font-size: var(--t-s);
	font-weight: 650;
	text-decoration: none;
}
.wh-mega__alles::after { content: " →"; margin-left: 0.3rem; }

.wh-mega__kaart {
	background: var(--papier-2);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-l);
	padding: var(--r-5);
	position: relative;
	overflow: hidden;
}
.wh-mega__kaart h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-xl);
}
.wh-mega__kaart p {
	margin: 0 0 var(--r-4);
	color: var(--inkt-zacht);
	font-size: var(--t-m);
	line-height: 1.55;
}
.wh-mega__kaart__icoon {
	position: absolute;
	right: -18px;
	bottom: -18px;
	color: var(--primair);
	opacity: 0.14;
	transform: rotate(-12deg);
	pointer-events: none;
}

/* Zoek in de header */
.wh-zoek {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 648px;
	margin-inline: auto;
}
.wh-zoek input {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 1rem 0.6rem 2.6rem;
	border-radius: var(--rond-m);
	border: 1px solid var(--lijn-sterk);
	background: var(--papier);
	color: var(--inkt);
	font: inherit;
	font-size: var(--t-m);
}
.wh-zoek input::placeholder { color: var(--inkt-zacht); opacity: 1; }
.wh-zoek input:focus { border-color: var(--primair); outline: 3px solid var(--focus); outline-offset: 3px; }
.wh-zoek__icoon {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--inkt-zacht);
	pointer-events: none;
}
.wh-zoek__resultaten {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	box-shadow: var(--schaduw-l);
	list-style: none;
	margin: 0;
	padding: var(--r-2);
	max-height: 60vh;
	overflow-y: auto;
	display: none;
	z-index: 120;
}
.wh-zoek__resultaten[data-open="1"] { display: block; }
.wh-zoek__resultaten a {
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: var(--rond-s);
	text-decoration: none;
	color: var(--inkt);
	font-size: var(--t-m);
	line-height: 1.4;
}
.wh-zoek__resultaten a:hover,
.wh-zoek__resultaten li[aria-selected="true"] a { background: var(--primair-zacht); }
.wh-zoek__resultaten small { display: block; color: var(--inkt-zacht); font-size: var(--t-s); }

.wh-header__cta { flex-shrink: 0; }

.wh-header__zoekknop {
	display: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--rond-s);
	width: 44px;
	height: 44px;
	cursor: pointer;
	color: var(--navy);
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.wh-hamburger {
	display: none;
	appearance: none;
	background: none;
	border: 1px solid var(--lijn-sterk);
	border-radius: var(--rond-m);
	min-width: 44px;
	min-height: 44px;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
	color: var(--navy);
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font: 600 var(--t-m) var(--tekst);
}
.wh-hamburger__label { line-height: 1; }

@media (max-width: 1023px) {
	.wh-header__navrij, .wh-header__cta, .wh-zoek { display: none; }
	.wh-hamburger, .wh-header__zoekknop { display: inline-flex; }
	.wh-header__balk { min-height: 68px; gap: var(--r-2); }
	.wh-logo__merk { width: 167px; }
	/* Zodra het mobiele paneel open is, staat het zoekveld daarbinnen. */
	.wh-mobiel[data-open="1"] .wh-zoek { display: block; max-width: none; margin: 0 0 var(--r-5); }
	.wh-mega { display: none !important; }
}

@media (max-width: 359px) {
	.wh-logo__merk { width: 140px; }
}

/* Noscript-terugval: gewone links naar de rubrieken. */
.wh-noscript {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-2) var(--r-4);
	padding-block: var(--r-3);
	border-top: 1px solid var(--lijn);
}

/* Mobiel menu */
.wh-mobiel {
	position: fixed;
	inset: 68px 0 0;
	background: var(--papier);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--r-5) 0 var(--r-8);
	z-index: 90;
	display: none;
}
.wh-mobiel[data-open="1"] { display: block; }
.wh-mobiel__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--r-4);
	margin-bottom: var(--r-5);
}
.wh-mobiel__titel {
	margin: 0;
	font-size: 1.75rem;
}
.wh-mobiel__sluit {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5rem 0.25rem;
	min-height: 44px;
	font: 600 var(--t-m) var(--tekst);
	color: var(--link);
	cursor: pointer;
}
.wh-mobiel details {
	border-bottom: 1px solid var(--lijn);
}
.wh-mobiel summary {
	padding: var(--r-4) 0;
	font-family: var(--tekst);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 48px;
}
.wh-mobiel summary::-webkit-details-marker { display: none; }
.wh-mobiel summary::after {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid var(--link);
	border-bottom: 2px solid var(--link);
	transform: rotate(45deg);
	transition: transform var(--soepel);
	flex-shrink: 0;
	margin-left: var(--r-3);
}
.wh-mobiel details[open] summary::after { transform: rotate(-135deg); }
.wh-mobiel__segment { padding: 0 0 var(--r-4); }
.wh-mobiel__segment h3 {
	font-family: var(--tekst);
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-zacht);
	margin: var(--r-3) 0 var(--r-2);
}
.wh-mobiel__segment ul { list-style: none; margin: 0; padding: 0; }
.wh-mobiel__segment a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.35rem 0;
	color: var(--link);
	text-decoration: none;
	line-height: 1.45;
}
.wh-mobiel__segment a strong { color: var(--navy); }
.wh-mobiel__voet { margin-top: var(--r-6); }
.wh-mobiel__voet .wh-knop { width: 100%; }
.wh-mobiel__zoekdoel:empty { display: none; }

/* Kruimelpad -------------------------------------------------------------- */

.wh-kruimels { padding-block: var(--r-4) 0; }
.wh-kruimels ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	font-size: var(--t-s);
	color: var(--inkt-zacht);
}
.wh-kruimels li { display: flex; align-items: center; gap: 0.35rem; }
.wh-kruimels li + li::before {
	content: "";
	width: 5px; height: 5px;
	border-right: 1.5px solid var(--lijn-sterk);
	border-top: 1.5px solid var(--lijn-sterk);
	transform: rotate(45deg);
}
.wh-kruimels a { color: var(--inkt-zacht); text-decoration: none; }
.wh-kruimels a:hover { color: var(--link); text-decoration: underline; }
.wh-kruimels [aria-current] { color: var(--inkt); font-weight: 550; }

/* Homepage ---------------------------------------------------------------- */

.wh-hero {
	--cluster: #ffffff;
	background: #2b211b;
	color: #fff;
	padding-block: var(--r-8) var(--r-7);
	position: relative;
	overflow: hidden;
}
.wh-hero__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--r-7);
	align-items: center;
}
@media (min-width: 1024px) {
	.wh-hero__binnen { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 552px); }
}
.wh-hero h1 {
	color: #fff;
	font-size: clamp(2.625rem, 1.9rem + 2.8vw, 3.875rem);
	line-height: 1.1;
	margin-bottom: var(--r-4);
}
.wh-hero__intro {
	font-size: var(--t-l);
	color: #e5d8cd;
	max-width: 58ch;
	margin: 0 0 var(--r-6);
}
.wh-hero__zoek {
	max-width: 620px;
	margin: 0 0 var(--r-5);
	position: relative;
}
.wh-hero__zoek input {
	width: 100%;
	min-height: 56px;
	padding: 1rem 7.25rem 1rem 3.2rem;
	border-radius: var(--rond-m);
	border: 2px solid transparent;
	background: #fff;
	color: var(--navy);
	font: inherit;
	font-size: var(--t-l);
}
.wh-hero__zoek input::placeholder { color: #6b5b50; opacity: 1; }
.wh-hero__zoek input:focus { border-color: var(--primair); outline: 3px solid #fff; outline-offset: 3px; }
.wh-hero__zoek .wh-zoek__icoon { left: 1.15rem; color: #6b5b50; }
.wh-hero__zoek .wh-zoek__resultaten { color: var(--inkt); }
.wh-hero__zoekknop {
	position: absolute;
	right: 6px;
	top: 6px;
	bottom: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: var(--rond-s);
	background: #75472f;
	color: #fff;
	font: 600 var(--t-m) var(--tekst);
	cursor: pointer;
	transition: background var(--soepel);
}
.wh-hero__zoekknop:hover { background: #58331f; }
.wh-hero__zoekknop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wh-hero__zoekknop-pijl { display: none; }
@media (max-width: 479px) {
	.wh-hero__zoek input { padding-right: 4.4rem; }
	.wh-hero__zoekknop { padding: 0 1rem; }
	.wh-hero__zoekknop-label {
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.wh-hero__zoekknop-pijl { display: inline-flex; }
}

.wh-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--r-2) var(--r-3);
	max-width: 860px;
}

.wh-hero__foto { display: none; }
@media (min-width: 768px) {
	.wh-hero__foto { display: block; max-width: 552px; }
	.wh-hero__foto img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: var(--rond-m);
	}
}

/* Drie ingangen */
.wh-ingangen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--r-6);
}
.wh-ingang {
	display: block;
	position: relative;
	padding: var(--r-5) 0;
	border-top: 3px solid var(--primair);
	text-decoration: none;
	color: var(--inkt);
}
.wh-ingang:hover { color: var(--inkt); }
.wh-ingang:hover h3 { color: var(--link); }
.wh-ingang h3 {
	margin: var(--r-3) 0 var(--r-2);
	font-size: var(--t-xl);
	transition: color var(--soepel);
}
.wh-ingang p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-m); max-width: 44ch; }
.wh-ingang__icoon { display: inline-flex; color: var(--primair); }
.wh-ingang__pijl {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-top: var(--r-3);
	font-family: var(--tekst);
	font-weight: 650;
	font-size: var(--t-m);
	color: var(--link);
}

/* Spronglinks binnen de homepage. */
.wh-paginanav { margin-top: var(--r-7); }
.wh-paginanav__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--r-3);
}
.wh-paginanav__lijst a,
.wh-routes ul a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r-4);
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	background: var(--papier);
	color: var(--link);
	font-size: 0.9375rem;
	line-height: calc(22 / 15);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--soepel), background var(--soepel);
}
.wh-paginanav__lijst a:hover,
.wh-routes ul a:hover {
	border-color: var(--primair);
	background: var(--primair-zacht);
}
.wh-routes__pijl { flex-shrink: 0; color: var(--primair); display: inline-flex; }
.wh-paginanav__mobiel { display: none; }

@media (max-width: 767px) {
	.wh-paginanav__lijst { display: none; }
	.wh-paginanav__mobiel {
		display: block;
		border: 1px solid var(--lijn);
		border-radius: var(--rond-m);
		background: var(--papier);
	}
	/* Na het passeren blijft de navigatie onder de header bereikbaar. */
	.wh-paginanav__mobiel[data-vast] {
		position: fixed;
		top: calc(var(--sticky-offset, 68px) + 8px);
		left: 1.25rem;
		right: 1.25rem;
		z-index: 55;
		box-shadow: var(--schaduw-l);
	}
	.wh-paginanav__mobiel summary {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--r-3);
		min-height: 48px;
		padding: 12px 16px;
		font-weight: 600;
		font-size: 0.9375rem;
		line-height: 1.45;
		color: var(--link);
		cursor: pointer;
	}
	.wh-paginanav__mobiel summary::-webkit-details-marker { display: none; }
	.wh-paginanav__mobiel summary::after {
		content: "";
		width: 8px; height: 8px;
		border-right: 2px solid var(--link);
		border-bottom: 2px solid var(--link);
		transform: rotate(45deg);
		flex-shrink: 0;
	}
	.wh-paginanav__mobiel[open] summary::after { transform: rotate(-135deg); }
	.wh-paginanav__mobiel ul {
		list-style: none;
		margin: 0;
		padding: 0 var(--r-4) var(--r-3);
	}
	.wh-paginanav__mobiel ul a {
		display: flex;
		align-items: center;
		min-height: 48px;
		color: var(--link);
		font-weight: 600;
		font-size: 0.9375rem;
		line-height: 1.45;
		text-decoration: none;
		border-top: 1px solid var(--lijn);
	}
}

/* Werkwijze: drie genummerde kolommen. */
.wh-werkwijze {
	list-style: none;
	counter-reset: werkwijze;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--r-6);
}
.wh-werkwijze li {
	counter-increment: werkwijze;
	border-top: 2px solid var(--navy);
	padding-top: var(--r-4);
}
.wh-werkwijze li::before {
	content: counter(werkwijze, decimal-leading-zero);
	display: block;
	font-size: var(--t-s);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	color: var(--primair);
	margin-bottom: var(--r-3);
}
.wh-werkwijze h3 { margin: 0 0 var(--r-2); font-size: var(--t-xl); }
.wh-werkwijze p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-m); }

/* Clustertegels ------------------------------------------------------------ */

.wh-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: var(--r-4);
}
.wh-tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--r-5) var(--r-4);
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	transition: border-color var(--soepel);
}
.wh-tegel:hover { border-color: var(--primair); }
.wh-tegel:hover .wh-tegel__titel a { color: var(--link); }
.wh-tegel__kop {
	display: flex;
	align-items: center;
	gap: var(--r-3);
	margin-bottom: var(--r-3);
}
.wh-tegel__icoon {
	flex-shrink: 0;
	color: var(--primair);
	margin-top: 2px;
	display: inline-flex;
}
.wh-tegel__titel { margin: 0; font-size: var(--t-xl); line-height: 1.3; }
.wh-tegel__titel a { color: inherit; text-decoration: none; }
.wh-tegel__meta {
	font-size: var(--t-s);
	color: var(--inkt-zacht);
	font-variant-numeric: tabular-nums;
}
.wh-tegel__tekst { margin: 0; font-size: var(--t-m); color: var(--inkt-zacht); }
.wh-tegel__links {
	list-style: none;
	margin: var(--r-3) 0 0;
	padding: 0;
	position: relative;
	z-index: 1;
}
.wh-tegel__links li + li { margin-top: 2px; }
.wh-tegel__links a {
	color: var(--link);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.45;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}
.wh-tegel__links a::before { content: "›"; color: var(--primair); font-weight: 700; }
.wh-tegel__links a:hover { color: var(--primair-donker); text-decoration: underline; }

/* Fotokaarten van de klusgebieden. */
.wh-tegel--foto { padding: 0 0 var(--r-4); overflow: hidden; }
.wh-tegel--foto .wh-tegel__titel a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.wh-tegel__beeld {
	display: block;
	background: var(--papier-2);
}
.wh-tegel__beeld img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.wh-tegel__naam {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: var(--r-4) var(--r-4) 0;
	font-size: var(--t-xl);
	font-weight: 800;
	font-family: var(--kop);
	color: var(--navy);
	line-height: 1.3;
}
.wh-tegel--foto .wh-tegel__naam::after { content: "→"; color: var(--primair); font-weight: 700; }
.wh-tegel--foto:hover .wh-tegel__naam { color: var(--link); }
.wh-tegel--foto .wh-tegel__meta { padding: 0.2rem var(--r-4) 0; }
.wh-tegel--foto .wh-tegel__links { padding: 0 var(--r-4); }

@media (max-width: 767px) {
	.wh-tegels--foto { grid-template-columns: minmax(0, 1fr); }
	.wh-tegel--foto { padding-top: var(--r-4); }
	.wh-tegel--foto .wh-tegel__titel a {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		gap: var(--r-4);
		align-items: center;
		padding-inline: var(--r-4);
	}
	.wh-tegel--foto .wh-tegel__beeld img {
		width: 88px;
		height: 88px;
		aspect-ratio: 1 / 1;
		border-radius: var(--rond-s);
	}
	.wh-tegel--foto .wh-tegel__naam { padding: 0; }
	.wh-tegel--foto .wh-tegel__meta { padding: 0.2rem var(--r-4) 0 calc(88px + var(--r-4) + var(--r-4)); }
}

/* Gidskaarten -------------------------------------------------------------- */

.wh-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: var(--r-4);
}
.wh-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	transition: border-color var(--soepel);
}
.wh-kaart:hover { border-color: var(--primair); }
.wh-kaart:hover .wh-kaart__titel a { color: var(--link); }
.wh-kaart__beeld { background: var(--papier-2); }
.wh-kaart__beeld img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.wh-kaart__beeld svg { width: 100%; height: 100%; }
.wh-kaart__body { padding: var(--r-4); display: flex; flex-direction: column; gap: var(--r-2); flex: 1; }
.wh-kaart__hub {
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--inkt-zacht);
}
.wh-kaart__titel { margin: 0; font-size: var(--t-l); line-height: 1.35; }
.wh-kaart__titel a { color: inherit; text-decoration: none; }
.wh-kaart__titel a::after { content: ""; position: absolute; inset: 0; }
.wh-kaart__meta {
	margin-top: auto;
	font-size: var(--t-s);
	color: var(--inkt-zacht);
	display: flex;
	gap: var(--r-3);
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.wh-kaarten { grid-template-columns: minmax(0, 1fr); }
	.wh-kaart { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
	.wh-kaart__beeld { align-self: stretch; }
	.wh-kaart__beeld img { width: 104px; height: 100%; min-height: 104px; aspect-ratio: auto; object-fit: cover; }
	.wh-kaart--tekst { grid-template-columns: minmax(0, 1fr); }
}

/* Ruimtekaarten op de homepage: twee kolommen, drie vanaf 1200px. */
.wh-ruimtekaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) {
	.wh-ruimtekaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wh-ruimtekaart {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	border-top: 1px solid var(--lijn);
	overflow: hidden;
	padding: 0 0 var(--r-4);
	background: var(--papier);
	transition: border-color var(--soepel);
}
.wh-ruimtekaart:hover { border-color: var(--primair); }
.wh-ruimtekaart__beeld { display: block; margin-bottom: var(--r-3); background: var(--papier-2); }
.wh-ruimtekaart__beeld img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.wh-ruimtekaart h3 { margin: 0 var(--r-4) var(--r-1); font-size: var(--t-xl); }
.wh-ruimtekaart p { margin: 0; padding: 0 var(--r-4); }
.wh-ruimtekaart .wh-ingang__icoon { margin: var(--r-4) var(--r-4) 0; }

@media (max-width: 380px) {
	.wh-ruimtekaarten { grid-template-columns: minmax(0, 1fr); }
}

/* Categorie- en gidskaarten: twee kolommen op tablet, vier vanaf 1200px. */
@media (min-width: 768px) and (max-width: 1199px) {
	.wh-tegels--foto,
	#populair .wh-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.wh-tegels--foto,
	#populair .wh-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Artikel ----------------------------------------------------------------- */

.wh-artikel {
	display: grid;
	grid-template-columns: minmax(0, var(--breedte-tekst)) minmax(280px, var(--zijbalk-breedte));
	gap: clamp(32px, 6.6vw, 96px);
	align-items: start;
	padding-block: var(--r-5) var(--r-8);
}

@media (max-width: 1199px) {
	.wh-artikel { grid-template-columns: minmax(0, 1fr); gap: var(--r-7); }
}

.wh-artikel__kop { margin-bottom: var(--r-4); }
.wh-artikel__kop h1 { margin-bottom: var(--r-3); }

.wh-artikel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-3);
	color: var(--inkt-zacht);
	font-size: var(--t-s);
	margin-bottom: var(--r-4);
}
.wh-artikel__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.wh-artikel__meta a { color: var(--link); }

.wh-lead {
	font-size: var(--t-l);
	color: var(--inkt-zacht);
	line-height: 1.6;
	padding-left: var(--r-4);
	border-left: 4px solid var(--primair);
	margin-bottom: var(--r-5);
}

.wh-inhoud { max-width: var(--breedte-tekst); }
.wh-inhoud > * { max-width: 100%; }
.wh-inhoud h2,
.wh-inhoud h3,
.wh-inhoud [id] {
	scroll-margin-top: calc(var(--sticky-offset, 68px) + 16px);
}
.wh-inhoud h2 { padding-top: var(--r-2); }
.wh-inhoud h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 4px;
	border-radius: 2px;
	background: var(--primair);
	margin-bottom: var(--r-3);
}
.wh-inhoud ul, .wh-inhoud ol { padding-left: 1.35rem; }
.wh-inhoud li { margin-bottom: 0.45rem; }
.wh-inhoud li::marker { color: var(--primair); font-weight: 700; }
.wh-inhoud a { text-decoration: underline; }

/* Tijdelijke markering van een gevonden passage. */
.wh-passage-doel {
	background: var(--primair-zacht);
	transition: background 600ms ease-out;
	outline: none;
}

/* Voortgangsbalk */
.wh-voortgang {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--primair);
	z-index: 150;
	transition: width 80ms linear;
}

/* Nieuwe registerfiguren. */
.wh-figuur {
	margin: var(--r-5) 0 var(--r-6);
}
.wh-figuur img {
	width: 100%;
	height: auto;
	border-radius: var(--rond-l);
	background: var(--papier-2);
}
.wh-figuur figcaption {
	margin-top: 10px;
	color: var(--inkt-zacht);
	font-size: var(--t-s);
	line-height: 1.5;
}
.wh-beeld-groot { display: block; text-decoration: none; }
.wh-beeld-responsief { display: block; }
.wh-beeld-groot > span { display: inline-block; margin-top: 8px; font-size: var(--t-s); text-decoration: underline; text-underline-offset: 3px; }
.wh-beeld-groot:focus-visible { outline: 3px solid var(--primair); outline-offset: 5px; border-radius: var(--rond-l); }

/* Snelroutes: duidelijkheid gaat voor kortheid. */
.wh-routes { margin: var(--r-5) 0; }
.wh-routes__label {
	font-family: var(--tekst);
	font-weight: 600;
	font-size: var(--t-m);
	color: var(--inkt);
	margin: 0 0 var(--r-3);
}
.wh-routes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--r-3);
}
@media (max-width: 700px) {
	.wh-routes ul { grid-template-columns: minmax(0, 1fr); }
}
.wh-routes--hub ul { max-width: 640px; }

/* Gidsbediening: één bereikbare balk tijdens het lezen. */
.wh-gidsbalk {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	gap: var(--r-2);
	align-items: stretch;
	min-height: 56px;
	padding: var(--r-2) 0;
	background: var(--papier);
	border-block: 1px solid var(--lijn);
	margin: var(--r-4) 0 var(--r-2);
}
.wh-gidsbalk__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--lijn-sterk);
	border-radius: var(--rond-m);
	color: var(--navy);
	font-weight: 600;
	font-size: var(--t-m);
	text-decoration: none;
	background: var(--papier);
	transition: border-color var(--soepel), background var(--soepel);
}
.wh-gidsbalk__knop:hover { border-color: var(--primair); background: var(--primair-zacht); color: var(--navy); }
.wh-gidsbalk__knop--zoek { color: var(--link); }
.wh-gidsbalk__caret {
	width: 8px; height: 8px;
	border-right: 2px solid var(--link);
	border-bottom: 2px solid var(--link);
	transform: rotate(45deg) translateY(-2px);
}
@media (max-width: 480px) {
	.wh-gidsbalk__knop { flex: 1 1 auto; justify-content: center; padding-inline: 0.6rem; }
}

.wh-zijbalklink { margin: 0 0 var(--r-4); font-size: var(--t-s); }
.wh-ankerdoel {
	display: block;
	height: 0;
	scroll-margin-top: calc(var(--sticky-offset, 68px) + 16px);
}
.wh-zijbalkanker {
	display: block;
	height: 0;
	scroll-margin-top: calc(var(--sticky-offset, 68px) + 16px);
}
@media (min-width: 1200px) {
	.wh-zijbalklink { display: none; }
	.wh-zijbalkanker { display: none; }
}

/* Paneel: hoofdstukken en zoeken in deze gids. */
.wh-gidspaneel {
	width: min(600px, calc(100vw - 2rem));
	max-height: min(85dvh, calc(100dvh - var(--sticky-offset, 68px) - 2rem));
	border: 1px solid var(--lijn);
	border-radius: var(--rond-l);
	padding: var(--r-5);
	background: var(--papier);
	color: var(--inkt);
	box-shadow: var(--schaduw-l);
}
.wh-gidspaneel::backdrop { background: rgb(43 33 27 / 0.45); }
.wh-gidspaneel__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--r-4);
	margin-bottom: var(--r-4);
}
.wh-gidspaneel__titel { margin: 0; font-size: var(--t-xl); }
.wh-gidspaneel__sluit {
	appearance: none;
	background: none;
	border: 0;
	min-height: 44px;
	padding: 0.4rem 0.5rem;
	font: 600 var(--t-m) var(--tekst);
	color: var(--link);
	cursor: pointer;
	border-radius: var(--rond-s);
}
.wh-gidspaneel__zoekveld { position: relative; margin: 0 0 var(--r-3); }
.wh-gidspaneel__zoekveld .wh-zoek__icoon { left: 0.9rem; }
.wh-gidspaneel__zoekveld input {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 1rem 0.6rem 2.6rem;
	border-radius: var(--rond-m);
	border: 1px solid var(--lijn-sterk);
	background: var(--papier);
	color: var(--inkt);
	font: inherit;
}
.wh-gidspaneel__zoekveld input:focus { border-color: var(--primair); }
.wh-gidspaneel__status { margin: 0 0 var(--r-2); font-size: var(--t-s); color: var(--inkt-zacht); min-height: 1.2em; }
.wh-gidspaneel__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: io;
}
.wh-gidspaneel__lijst li { counter-increment: io; }
.wh-gidspaneel__lijst a {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	min-height: 44px;
	padding: 0.55rem 0.6rem;
	margin-inline: -0.6rem;
	border-radius: var(--rond-s);
	border-inline-start: 3px solid transparent;
	color: var(--inkt);
	text-decoration: none;
	font-size: var(--t-m);
	line-height: 1.45;
}
.wh-gidspaneel__lijst a::before {
	content: counter(io);
	font-variant-numeric: tabular-nums;
	color: var(--primair);
	font-weight: 700;
	flex-shrink: 0;
	min-width: 1.2em;
}
.wh-gidspaneel__lijst a:hover { background: var(--primair-zacht); }
.wh-gidspaneel__lijst a[aria-current="location"] {
	border-inline-start-color: var(--primair);
	background: var(--primair-zacht);
	font-weight: 600;
	color: var(--link);
}
.wh-gidspaneel__resultaten { margin-top: var(--r-2); }
.wh-treffer {
	padding: var(--r-3) 0;
	border-top: 1px solid var(--lijn);
}
.wh-treffer h3 { margin: 0 0 0.2rem; font-size: var(--t-m); font-family: var(--tekst); font-weight: 700; }
.wh-treffer p { margin: 0 0 0.4rem; font-size: var(--t-s); color: var(--inkt-zacht); }
.wh-treffer mark { background: var(--primair-zacht); color: inherit; padding: 0 0.1em; }
.wh-treffer a { font-weight: 600; font-size: var(--t-s); }
.wh-gidspaneel__meer {
	appearance: none;
	background: none;
	border: 1px solid var(--lijn-sterk);
	border-radius: var(--rond-m);
	min-height: 44px;
	padding: 0.5rem 1rem;
	margin-top: var(--r-3);
	font: 600 var(--t-s) var(--tekst);
	color: var(--link);
	cursor: pointer;
}

@media (max-width: 640px) {
	.wh-gidspaneel {
		width: 100vw;
		max-width: none;
		height: 100dvh;
		max-height: none;
		margin: 0;
		border: 0;
		border-radius: 0;
	}
}

/* Op brede schermen opent het paneel bij de leeskolom, nooit over de zijbalk. */
@media (min-width: 1200px) {
	.wh-gidspaneel {
		position: fixed;
		margin: 0;
		left: max(1.25rem, calc((100vw - var(--breedte)) / 2));
		top: 88px;
		max-height: calc(100dvh - 112px);
	}
}

/* Leeshulp: luisteren en leestijd */
.wh-leeshulp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-3);
	margin-bottom: var(--r-5);
}
.wh-luister {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border-radius: var(--rond-m);
	border: 1px solid var(--lijn-sterk);
	background: var(--papier);
	color: var(--navy);
	font-family: var(--tekst);
	font-weight: 600;
	font-size: var(--t-s);
	cursor: pointer;
	transition: border-color var(--soepel), background var(--soepel);
}
.wh-luister:hover { border-color: var(--primair); background: var(--primair-zacht); }
.wh-luister[hidden] { display: none; }
.wh-luister__balkjes { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.wh-luister__balkjes i {
	width: 3px;
	background: var(--primair);
	border-radius: 2px;
	height: 5px;
	display: block;
}
.wh-luister[data-status="speelt"] .wh-luister__balkjes i {
	animation: wh-golf 900ms ease-in-out infinite;
}
.wh-luister[data-status="speelt"] .wh-luister__balkjes i:nth-child(2) { animation-delay: 140ms; }
.wh-luister[data-status="speelt"] .wh-luister__balkjes i:nth-child(3) { animation-delay: 280ms; }
@keyframes wh-golf {
	0%, 100% { height: 5px; }
	50% { height: 14px; }
}
.wh-luister__voortgang {
	font-variant-numeric: tabular-nums;
	font-size: var(--t-s);
	color: var(--inkt-zacht);
}

/* Inhoudsopgave (inline; ook zonder JavaScript beschikbaar) */
.wh-inhoudsopgave {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	background: var(--papier);
	padding: var(--r-4);
	margin-bottom: var(--r-6);
	scroll-margin-top: calc(var(--sticky-offset, 68px) + 16px);
}
.wh-inhoudsopgave > p {
	font-family: var(--tekst);
	font-weight: 700;
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-zacht);
	margin: 0 0 var(--r-3);
}
.wh-inhoudsopgave ol { list-style: none; margin: 0; padding: 0; counter-reset: io; }
.wh-inhoudsopgave li { counter-increment: io; margin-bottom: 0.15rem; }
.wh-inhoudsopgave a {
	display: flex;
	gap: 0.6rem;
	padding: 0.45rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--rond-s);
	border-inline-start: 3px solid transparent;
	color: var(--inkt-zacht);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.wh-inhoudsopgave a::before {
	content: counter(io);
	font-variant-numeric: tabular-nums;
	color: var(--primair);
	font-weight: 700;
	flex-shrink: 0;
}
.wh-inhoudsopgave a:hover { background: var(--primair-zacht); color: var(--inkt); }
.wh-inhoudsopgave a[data-actief="1"] {
	background: var(--primair-zacht);
	border-inline-start-color: var(--primair);
	color: var(--inkt);
	font-weight: 600;
}

/* H3-subkoppen binnen de inhoudsopgave: ingesprongen, zonder eigen nummer. */
.wh-io-sub { list-style: none; margin: 0; padding: 0 0 0 1.6rem; }
.wh-io-sub__item { counter-increment: none; }
.wh-inhoudsopgave .wh-io-sub__link::before,
.wh-gidspaneel__lijst .wh-io-sub__link::before { content: "–"; color: var(--inkt-zacht); font-weight: 400; }
.wh-gidspaneel__lijst .wh-io-sub__item { margin-left: 1.6rem; }

/* Benodigdheden */
.wh-benodigd {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--r-4);
	padding: var(--r-5);
	border-radius: var(--rond-l);
	background: var(--papier-2);
	border: 1px solid var(--lijn);
	margin-bottom: var(--r-6);
}
.wh-benodigd h2 {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--t-xl);
}
.wh-benodigd h2::before { display: none; }
.wh-benodigd__stickers { grid-column: 1 / -1; display: flex; gap: var(--r-2); flex-wrap: wrap; }
.wh-benodigd__stickers .wh-sticker { background: var(--papier); }
.wh-benodigd h3 {
	margin: 0 0 var(--r-2);
	font-family: var(--tekst);
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--inkt-zacht);
}
.wh-benodigd ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-m); }
.wh-benodigd li {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}
.wh-benodigd li::before {
	content: "";
	width: 6px; height: 6px;
	margin-top: 0.6rem;
	border-radius: 2px;
	background: var(--primair);
	flex-shrink: 0;
	transform: rotate(45deg);
}
.wh-benodigd .wh-figuur { grid-column: 1 / -1; margin: var(--r-2) 0 0; }

/* Stappenplan */
.wh-stappenintro { margin: 0 0 var(--r-4); }
.wh-stappenintro > p:last-child { margin-bottom: 0; }
.wh-stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0 0 var(--r-6); }
.wh-stap {
	counter-increment: stap;
	position: relative;
	padding-left: 3.4rem;
	padding-bottom: var(--r-5);
}
.wh-stap__nummer {
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--rond-m);
	background: var(--primair);
	color: var(--op-primair);
	display: grid;
	place-items: center;
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-m);
}
.wh-stap::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 44px;
	bottom: 6px;
	border-left: 2.5px dotted var(--lijn-sterk);
}
.wh-stap:last-child::after { display: none; }
.wh-stap h3 { margin: 0.3rem 0 var(--r-2); font-size: var(--t-xl); }
.wh-stap p:last-child { margin-bottom: 0; }

/* Praktijkcase */
.wh-praktijk {
	position: relative;
	background: var(--papier-2);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	padding: var(--r-4) var(--r-5);
	margin: var(--r-5) 0;
}
.wh-praktijk::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--primair);
}
.wh-praktijk h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-xl);
}
.wh-praktijk p:last-child { margin-bottom: 0; }
.wh-praktijk__label {
	display: inline-block;
	font-size: var(--t-s);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--inkt-zacht);
	margin-bottom: var(--r-2);
}

/* Let-op-blok: afzetlint langs de linkerrand; de waarschuwingsbetekenis en
   -kleur blijven behouden. */
.wh-attentie {
	display: flex;
	gap: var(--r-4);
	padding: var(--r-4) var(--r-4) var(--r-4) var(--r-5);
	background: var(--let-op-zacht);
	border-radius: var(--rond-s);
	margin: var(--r-5) 0;
	position: relative;
	overflow: hidden;
}
.wh-attentie::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--let-op) 0 7px,
		transparent 7px 14px
	);
	background-color: var(--let-op-zacht);
}
.wh-attentie svg { flex-shrink: 0; color: var(--let-op); margin-top: 2px; }
.wh-attentie p:last-child { margin-bottom: 0; }
.wh-attentie strong { color: var(--let-op); }

.wh-tip {
	display: flex;
	gap: var(--r-4);
	padding: var(--r-4);
	background: var(--goed-zacht);
	border-left: 3px solid var(--goed);
	border-radius: var(--rond-s);
	margin: var(--r-5) 0;
}
.wh-tip svg { flex-shrink: 0; color: var(--goed); margin-top: 2px; }
.wh-tip p:last-child { margin-bottom: 0; }

/* Checklist */
.wh-checklist { list-style: none; padding: 0; margin: 0 0 var(--r-5); }
.wh-checklist li {
	display: flex;
	gap: var(--r-3);
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--lijn);
}
.wh-checklist li:last-child { border-bottom: 0; }
.wh-checklist input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 4px;
	accent-color: var(--primair);
	flex-shrink: 0;
	cursor: pointer;
}
.wh-checklist label { cursor: pointer; }
.wh-checklist input:checked + label { color: var(--inkt-zacht); text-decoration: line-through; }

/* Tabellen */
.wh-tabelhouder { overflow-x: auto; margin-bottom: var(--r-5); border-radius: var(--rond-m); border: 1px solid var(--lijn); }
.wh-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
	background: var(--papier);
}
.wh-tabel th, .wh-tabel td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--lijn);
	vertical-align: top;
}
.wh-tabel th {
	background: var(--papier-2);
	color: var(--navy);
	font-family: var(--tekst);
	font-weight: 700;
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* De kolomkop blijft alleen staan binnen een tabel die zelf schuift. */
.wh-tool--compact .wh-tabel th {
	position: sticky;
	top: 0;
	z-index: 1;
}
.wh-tabel tbody tr:nth-child(even) { background: var(--papier-2); }
.wh-tabel tbody tr:hover { background: var(--primair-zacht); }
.wh-tabel tr:last-child td { border-bottom: 0; }

/* Vragen */
.wh-vragen { margin-bottom: var(--r-6); }
.wh-vraag {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	margin-bottom: var(--r-2);
	background: var(--papier);
	overflow: hidden;
}
.wh-vraag summary {
	padding: var(--r-4);
	cursor: pointer;
	font-family: var(--tekst);
	font-weight: 600;
	font-size: var(--t-m);
	line-height: 1.45;
	color: var(--navy);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--r-3);
	align-items: center;
	min-height: 48px;
}
.wh-vraag summary::-webkit-details-marker { display: none; }
.wh-vraag summary:hover { color: var(--link); }
.wh-vraag summary::after {
	content: "+";
	font-size: 1.4rem;
	color: var(--primair);
	flex-shrink: 0;
	line-height: 1;
}
.wh-vraag[open] summary::after { content: "−"; }
.wh-vraag[open] summary { border-bottom: 1px solid var(--lijn); }
.wh-vraag__antwoord { padding: var(--r-4); }
.wh-vraag__antwoord p:last-child { margin-bottom: 0; }

/* Sidebar ----------------------------------------------------------------- */

/* De volledige zijbalk beweegt gewoon mee met de pagina: geen vaste hoogte,
   geen tweede scrollbak en geen permanent vastgezette kolom. */
.wh-zijbalk {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: var(--t-s);
	min-width: 0;
	scroll-margin-top: calc(var(--sticky-offset, 68px) + 16px);
}

.wh-blok {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	background: var(--papier);
	padding: 20px;
	overflow: hidden;
}
.wh-blok--cluster {
	background: var(--papier);
	border-color: var(--lijn);
}
.wh-blok__kop {
	display: flex;
	align-items: center;
	gap: var(--r-2);
	font-family: var(--kop);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--navy);
	margin: 0 0 var(--r-3);
}
.wh-blok__kop svg { color: var(--primair); flex-shrink: 0; }
.wh-blok ul { list-style: none; margin: 0; padding: 0; }
.wh-blok li + li { margin-top: 1px; }
.wh-blok li a {
	display: flex;
	justify-content: space-between;
	gap: var(--r-2);
	align-items: baseline;
	min-height: 44px;
	padding: 0.55rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--rond-s);
	color: var(--link);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
	text-overflow: clip;
}
.wh-blok li a:hover { background: var(--primair-zacht); color: var(--primair-donker); }
.wh-blok li a[aria-current] {
	background: var(--primair-zacht);
	border-inline-start: 3px solid var(--primair);
	color: var(--navy);
	font-weight: 600;
}
.wh-blok__aantal { font-size: var(--t-s); color: var(--inkt-zacht); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wh-blok li a[aria-current] .wh-blok__aantal { color: var(--inkt-zacht); }
.wh-blok__voet { margin-top: var(--r-3); padding-top: var(--r-3); border-top: 1px dashed var(--lijn); }
.wh-blok__voet a { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.wh-blok__voet a::after { content: " →"; margin-left: 0.3rem; }

/* Clusterkaart bovenin de zijbalk. */
.wh-clusterkaart__hub {
	display: flex;
	align-items: center;
	gap: var(--r-3);
	padding: var(--r-3) 20px;
	margin: -20px -20px var(--r-3);
	/* Vast donkerblauw merkvlak, in beide kleurmodi leesbaar met witte tekst. */
	background: #2b211b;
	color: #fff;
}
.wh-clusterkaart__hub svg { flex-shrink: 0; }
.wh-clusterkaart__hub a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; font-family: var(--kop); font-weight: 800; }
.wh-clusterkaart__hub a:hover { color: #fff; text-decoration: underline; }
.wh-clusterkaart__hub small { display: block; opacity: 0.85; font-weight: 400; font-size: var(--t-s); }

.wh-zijtool {
	border-radius: var(--rond-m);
	background: var(--papier-2);
	border: 1px solid var(--lijn);
	padding: var(--r-3);
}
.wh-zijtool a {
	display: flex;
	align-items: center;
	gap: var(--r-2);
	min-height: 44px;
	text-decoration: none;
	color: var(--link);
	font-weight: 600;
}
.wh-zijtool a svg { color: var(--primair); flex-shrink: 0; }
.wh-zijtool + .wh-zijtool { margin-top: var(--r-2); }

/* Voorwaardelijk controleblok (alleen met echte artikeldata). */
.wh-controle .wh-controle__datum { margin: 0 0 var(--r-2); font-weight: 600; color: var(--inkt); }
.wh-controle .wh-controle__bron { margin: 0 0 var(--r-2); color: var(--inkt-zacht); }

/* Verwante gidsen onderaan */
.wh-verwant { margin-top: var(--r-7); padding-top: var(--r-6); border-top: 2px solid var(--lijn); }

/* Vaste pagina's */
.wh-vast {
	max-width: var(--breedte-tekst);
	padding-block: var(--r-5) var(--r-8);
}

/* Tools ------------------------------------------------------------------- */

.wh-tool {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-l);
	background: var(--papier);
	overflow: hidden;
	margin-bottom: var(--r-6);
}
.wh-tool__kop {
	display: flex;
	gap: var(--r-3);
	padding: var(--r-4) var(--r-5);
	background: var(--papier-2);
	border-bottom: 1px solid var(--lijn);
}
.wh-tool__icoon { color: var(--primair); flex-shrink: 0; }
.wh-tool__label {
	margin: 0 0 0.15rem;
	font-family: var(--tekst);
	font-weight: 700;
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--link);
}
.wh-tool__titel { margin: 0 0 0.2rem; font-size: var(--t-xl); }
.wh-tool__intro { margin: 0; color: var(--inkt-zacht); font-size: var(--t-m); }
.wh-tool__body {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--r-5);
	padding: var(--r-5);
}
@media (max-width: 720px) {
	.wh-tool__body { grid-template-columns: minmax(0, 1fr); }
}
.wh-tool__velden { display: grid; gap: var(--r-3); align-content: start; }
.wh-tool__zoek {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--r-3);
	padding: var(--r-4) var(--r-5);
}
@media (max-width: 560px) { .wh-tool__zoek { grid-template-columns: minmax(0, 1fr); } }
.wh-tool__tabelhouder {
	overflow-x: auto;
	margin: 0 var(--r-4) var(--r-4);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	-webkit-overflow-scrolling: touch;
}
.wh-tool--compact .wh-tool__tabelhouder {
	max-height: 460px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.wh-tool__leeg { padding: var(--r-4); color: var(--inkt-zacht); text-align: center; }
.wh-tool__voet {
	padding: var(--r-3) var(--r-5);
	border-top: 1px dashed var(--lijn);
	background: var(--papier-2);
}
.wh-tool__aannames { margin: 0; font-size: var(--t-s); color: var(--inkt-zacht); }
.wh-tool--compact { margin-block: var(--r-6); }

.wh-veld { display: grid; gap: 0.35rem; }
.wh-veld__label { font-size: var(--t-s); font-weight: 600; color: var(--inkt); }
.wh-veld input, .wh-veld select {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	border-radius: var(--rond-m);
	border: 1px solid var(--lijn-sterk);
	background: var(--papier);
	color: var(--inkt);
	font: inherit;
	font-size: var(--t-m);
}
.wh-veld input:focus, .wh-veld select:focus { border-color: var(--primair); }
.wh-veld__rij { display: flex; gap: var(--r-2); align-items: center; }
.wh-veld__eenheid { font-size: var(--t-s); color: var(--inkt-zacht); white-space: nowrap; }

/* Uitkomst: donkerbruin resultaatvlak met groot getal. */
.wh-tool__uitkomst {
	background: var(--navy);
	color: #f5ede5;
	border-radius: var(--rond-l);
	padding: var(--r-5);
	align-self: start;
}
.wh-uitkomst__hoofd {
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-3xl);
	line-height: 1.15;
	color: #fff;
	margin: 0 0 var(--r-1);
}
.wh-uitkomst__onder { margin: 0 0 var(--r-3); color: #d1bead; font-size: var(--t-s); }
.wh-uitkomst__lijst { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.wh-uitkomst__lijst li {
	display: flex;
	justify-content: space-between;
	gap: var(--r-3);
	padding: 0.4rem 0;
	border-bottom: 1px dashed rgb(255 255 255 / 0.25);
}
.wh-uitkomst__lijst li:last-child { border-bottom: 0; }
.wh-uitkomst__lijst b { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }

@media (prefers-color-scheme: dark) {
	.wh-tool__uitkomst { background: var(--papier-3); }
}

/* Apparaten- en lagenlijst in de tools */
.wh-rijen { display: grid; gap: var(--r-2); }
.wh-rij {
	display: grid;
	grid-template-columns: 1fr 90px 36px;
	gap: var(--r-2);
	align-items: center;
}
.wh-rij select, .wh-rij input { padding: 0.45rem 0.6rem; font-size: var(--t-s); min-height: 40px; }
.wh-rij__weg {
	appearance: none;
	border: 1px solid var(--lijn-sterk);
	background: var(--papier);
	border-radius: var(--rond-s);
	width: 36px; height: 36px;
	cursor: pointer;
	color: var(--inkt-zacht);
	font-size: 1.1rem;
	line-height: 1;
}
.wh-rij__weg:hover { border-color: var(--let-op); color: var(--let-op); }
.wh-toevoegen {
	appearance: none;
	border: 1px dashed var(--lijn-sterk);
	background: transparent;
	border-radius: var(--rond-m);
	padding: 0.55rem;
	min-height: 44px;
	cursor: pointer;
	font: inherit;
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--link);
}
.wh-toevoegen:hover { border-color: var(--primair); background: var(--primair-zacht); }

/* Footer ------------------------------------------------------------------ */

.wh-footer {
	background: #2b211b;
	color: #e5d8cd;
	padding-block: var(--r-7) var(--r-5);
	margin-top: var(--r-8);
}
.wh-footer__merk { margin: 0 0 var(--r-6); }
.wh-footer__logo { width: 184px; height: auto; }
.wh-footer__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--r-6);
	margin-bottom: var(--r-6);
}
.wh-footer h2 {
	font-family: var(--tekst);
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #c5a88f;
	margin: 0 0 var(--r-3);
}
.wh-footer ul { list-style: none; margin: 0; padding: 0; }
.wh-footer li { margin-bottom: 0.15rem; }
.wh-footer a {
	color: #e5d8cd;
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.6;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}
.wh-footer a:hover { color: #fff; text-decoration: underline; }
.wh-footer__onder {
	border-top: 1px solid rgb(255 255 255 / 0.18);
	padding-top: var(--r-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3);
	justify-content: space-between;
	align-items: center;
	font-size: var(--t-s);
	color: #d1bead;
}
.wh-footer__disclaimer { max-width: 68ch; margin: 0 0 var(--r-3); font-size: var(--t-s); color: #d1bead; }
.wh-footer__disclaimer a { color: #e5d8cd; text-decoration: underline; min-height: 0; }

/* Overzichtslijsten op hub en subhub -------------------------------------- */

.wh-hubkop {
	padding-block: var(--r-6) var(--r-5);
	position: relative;
}
.wh-hubkop.wh-raster::before {
	background-image:
		linear-gradient(to right, rgb(117 71 47 / 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(117 71 47 / 0.06) 1px, transparent 1px);
}
.wh-hubkop__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--r-6);
	align-items: start;
}
.wh-hubkop__binnen--met-beeld { grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); }
@media (max-width: 860px) {
	.wh-hubkop__binnen, .wh-hubkop__binnen--met-beeld { grid-template-columns: minmax(0, 1fr); }
	.wh-hubkop__zij { order: 2; }
}
.wh-hubkop h1 { margin-bottom: var(--r-3); }
.wh-hubkop p { color: var(--inkt-zacht); max-width: 62ch; font-size: var(--t-l); }
.wh-hubkop__zij { display: grid; gap: var(--r-4); align-content: start; }
.wh-hubkop__zij .wh-figuur { margin: 0; }
.wh-hubkop__cijfers { display: flex; gap: var(--r-4); }
.wh-cijfer {
	padding-left: var(--r-4);
	border-left: 1px solid var(--lijn);
	min-width: 92px;
}
.wh-cijfer:first-child { padding-left: 0; border-left: 0; }
.wh-cijfer b {
	display: block;
	font-family: var(--kop);
	font-size: var(--t-2xl);
	font-weight: 800;
	line-height: 1.1;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}
.wh-cijfer span { font-size: var(--t-s); color: var(--inkt-zacht); }

.wh-lijst { display: grid; border-top: 2px solid var(--navy); }
.wh-lijstitem {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: var(--r-4);
	align-items: baseline;
	padding: var(--r-4) var(--r-4) var(--r-4) var(--r-3);
	border-bottom: 1px solid var(--lijn);
	border-left: 3px solid transparent;
	background: var(--papier);
	transition: border-color var(--soepel);
}
.wh-lijstitem:hover { border-left-color: var(--primair); }
.wh-lijstitem:hover h3 a { color: var(--link); }
.wh-lijstitem__nummer {
	color: var(--inkt-zacht);
	font-weight: 700;
	font-size: var(--t-s);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}
.wh-lijstitem h3 { margin: 0 0 0.2rem; font-size: var(--t-xl); }
.wh-lijstitem h3 a { color: inherit; text-decoration: none; }
.wh-lijstitem h3 a::after { content: ""; position: absolute; inset: 0; }
.wh-lijstitem p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-m); }
.wh-lijstitem__meta {
	font-size: var(--t-s);
	color: var(--inkt-zacht);
	text-align: right;
	white-space: nowrap;
}

/* Zoekpagina */
.wh-zoekresultaat {
	padding: var(--r-4) 0;
	border-bottom: 1px solid var(--lijn);
}
.wh-zoekresultaat h2 { margin: 0 0 0.2rem; font-size: var(--t-xl); }
.wh-zoekresultaat h2::before { display: none; }
.wh-zoekresultaat__pad { font-size: var(--t-s); color: var(--inkt-zacht); }

/* Print ------------------------------------------------------------------- */

@media print {
	.wh-header, .wh-zijbalk, .wh-footer, .wh-leeshulp, .wh-voortgang, .wh-verwant,
	.wh-gidsbalk, .wh-gidspaneel, .wh-zijbalklink, .wh-routes, .wh-paginanav { display: none !important; }
	.wh-artikel { grid-template-columns: minmax(0, 1fr); }
	body { background: #fff; color: #000; }
}

/* --- Mobiel vangnet -------------------------------------------------------
   Op een telefoon mag niets breder zijn dan het scherm. */

html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

.wh-artikel,
.wh-artikel__hoofd,
.wh-inhoud,
.wh-zijbalk,
.wh-omhulsel {
	min-width: 0;
}

.wh-inhoud p,
.wh-inhoud li,
.wh-inhoud h2,
.wh-inhoud h3,
.wh-lijstitem h3,
.wh-kaart__titel,
.wh-tegel__titel,
.wh-routes ul a,
.wh-paginanav__lijst a,
.wh-gidspaneel__lijst a,
.wh-blok li a {
	overflow-wrap: anywhere;
}

.wh-tabelhouder,
.wh-tool__tabelhouder {
	max-width: 100%;
}

@media (max-width: 640px) {
	/* Tabellen krijgen een vaste minimumbreedte mee, zodat de kolommen leesbaar
	   blijven en de tabel zelf zijwaarts schuift in plaats van de pagina. */
	.wh-tabel {
		min-width: 560px;
	}
}

/* --- Mega-menu: sluiten ---------------------------------------------------
   Een open paneel dekt een flink deel van de pagina. Twee toevoegingen maken
   dichtdoen vanzelfsprekend: een grijs vlak over de pagina dat zelf een
   sluitknop is, en een sluitbalk die bovenaan het paneel blijft staan terwijl
   je er doorheen scrolt. De panelen en hun inhoud blijven ongewijzigd. */

.wh-mega-scrim {
	display: none;
}

@media (min-width: 1024px) {
	.wh-mega-scrim[data-open="1"] {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 95;
		background: rgb(43 33 27 / 0.22);
		border: 0;
		padding: 0;
		margin: 0;
		width: 100%;
		cursor: pointer;
		animation: wh-scrim 140ms ease-out;
	}
}

@keyframes wh-scrim {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-color-scheme: dark) {
	.wh-mega-scrim[data-open="1"] { background: rgb(0 0 0 / 0.45); }
}

/* De sluitbalk schuift niet mee weg: ook onderaan een lang paneel is de
   sluitknop nog in beeld. */
.wh-mega__balk {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--papier);
	padding-block: var(--r-2);
	gap: var(--r-2);
	align-items: center;
}

.wh-mega__sluit {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 1px solid var(--lijn);
	background: var(--papier);
}
.wh-mega__sluit::before {
	content: "✕";
	font-size: 0.8em;
	line-height: 1;
	opacity: 0.75;
}
.wh-mega__sluit:hover {
	text-decoration: none;
	border-color: var(--primair);
	background: var(--primair-zacht);
}
.wh-mega__sluit .wh-mega__toets {
	font: 600 0.75rem var(--tekst);
	color: var(--inkt-zacht);
	border: 1px solid var(--lijn);
	border-radius: 4px;
	padding: 0.1rem 0.3rem;
}

/* --- Blog -----------------------------------------------------------------
   De berichten uit WordPress zelf: /blog/ als overzicht, /blog/<slug>/ als
   bericht. Zelfde typografie en ritme als de gidsen, maar met de datum als
   meta in plaats van een leestijd en gidsenteller. */

.wh-blog {
	max-width: var(--breedte-tekst);
	padding-block: var(--r-5) var(--r-8);
}
.wh-blog__kop { margin-bottom: var(--r-5); }
.wh-blog__kop h1 { margin-bottom: var(--r-3); }

.wh-blog__lijst {
	display: grid;
	border-top: 2px solid var(--navy);
}
.wh-blogitem {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--r-4);
	align-items: start;
	padding: var(--r-4) var(--r-3);
	border-bottom: 1px solid var(--lijn);
	border-left: 3px solid transparent;
	background: var(--papier);
	transition: border-color var(--soepel);
}
.wh-blogitem--zonderbeeld { grid-template-columns: minmax(0, 1fr); }
.wh-blogitem:hover { border-left-color: var(--primair); }
.wh-blogitem:hover h2 a { color: var(--link); }
.wh-blogitem__beeld {
	margin: 0;
	border-radius: var(--rond-m);
	overflow: hidden;
	background: var(--papier-2);
}
.wh-blogitem__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.wh-blogitem h2 { margin: 0 0 0.25rem; font-size: var(--t-xl); }
.wh-blogitem h2::before { display: none; }
.wh-blogitem h2 a { color: inherit; text-decoration: none; }
.wh-blogitem h2 a::after { content: ""; position: absolute; inset: 0; }
.wh-blogitem p { margin: 0.3rem 0 0; color: var(--inkt-zacht); font-size: var(--t-m); }

.wh-blog__meta,
.wh-bericht__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3);
	font-size: var(--t-s);
	color: var(--inkt-zacht);
}
.wh-blog__meta time,
.wh-bericht__meta time { font-variant-numeric: tabular-nums; }

.wh-blog__leeg {
	padding: var(--r-6) 0;
	color: var(--inkt-zacht);
}

.wh-paginering {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-2);
	align-items: center;
	margin-top: var(--r-6);
}
.wh-paginering a,
.wh-paginering span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--lijn);
	border-radius: var(--rond-s);
	font: 600 var(--t-s) var(--tekst);
	text-decoration: none;
	color: var(--link);
}
.wh-paginering a:hover { border-color: var(--primair); background: var(--primair-zacht); }
.wh-paginering .page-numbers.current,
.wh-paginering .wh-paginering__huidig {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--papier);
}

.wh-bericht {
	max-width: var(--breedte-tekst);
	padding-block: var(--r-5) var(--r-8);
}
.wh-bericht__kop { margin-bottom: var(--r-4); }
.wh-bericht__kop h1 { margin-bottom: var(--r-3); }
.wh-bericht__beeld {
	margin: 0 0 var(--r-5);
	border-radius: var(--rond-l);
	overflow: hidden;
}
.wh-bericht__beeld img { display: block; width: 100%; height: auto; }
.wh-bericht__voet {
	margin-top: var(--r-7);
	padding-top: var(--r-4);
	border-top: 1px solid var(--lijn);
}

@media (max-width: 640px) {
	.wh-blogitem { grid-template-columns: 88px minmax(0, 1fr); }
}

/* Blog in de navigatiebalk: geen paneelknop, maar een gewone link. Zelfde
   maat en gedrag als de rubrieken, zonder het pijltje dat openklappen belooft. */
.wh-nav__link {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 0.7rem 0.85rem;
	min-height: 44px;
	border-radius: var(--rond-s);
	font-family: var(--tekst);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--soepel), color var(--soepel);
}
.wh-nav__link:hover { background: var(--primair-zacht); color: var(--link); }
.wh-nav__link[data-actief="1"]::before {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--primair);
}

/* Houtplatform: originele fotografie en technische uitleg binnen de leeskolom. */
.wh-inhoudsbeeld img{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--hoek,8px)}
.wh-inhoudsbeeld figcaption{font-size:.875rem;line-height:1.6;color:var(--inkt-zacht);padding:.7rem 0}
.wh-bronnen{border-top:1px solid var(--lijn);padding-top:1.5rem;margin-top:2.5rem;font-size:.95rem}
.wh-bronnen p{font-size:.875rem;color:var(--inkt-zacht);margin:.25rem 0 1rem}
.wh-bronnen-omhulsel{padding-bottom:2rem}
.wh-praktijk__bron{font-size:.875rem!important;margin-top:1rem!important}
.wh-uitkomst__rij{display:grid;gap:.3rem;border-bottom:1px solid rgba(255,255,255,.2);padding:1rem 0}
.wh-uitkomst__rij:first-of-type strong{font-size:2rem}
.wh-tool__uitkomst--fout{background:#7c2d12!important;color:white}
.wh-tool__velden .wh-veld{display:grid;gap:.45rem;margin-bottom:1rem}
.wh-tool__velden label{font-weight:600;line-height:1.4}
.wh-tool__velden input,.wh-tool__velden select{width:100%;padding:.7rem .8rem;border:1px solid var(--lijn-sterk,#927d6c);border-radius:6px;background:var(--oppervlak,#fff);color:var(--inkt);font:inherit}
.wh-tool__velden button{margin-top:.5rem}
.wh-veld__eenheid{font-weight:400;color:var(--inkt-zacht)}

/* Het resultaatvlak is altijd donker, ook in de lichte weergave. */
.wh-tool__uitkomst .wh-tool__label { color: #e3b58d; }