/*
Theme Name: Dobbelhor
Theme URI: https://dobbelhor.org/
Author: Dobbelhor Gids
Author URI: https://dobbelhor.org/
Description: Onofficiele Nederlandstalige gids voor het spel Elden Ring, opgebouwd rond drempels: niveaus, wapeneisen, geheugenplaatsen en draaglast. Donker olijf-grafiet, een enkel chromatisch accent, vier eigen gereedschappen en alle getallen met de gemeten versie erbij. Geen band met de uitgever of de ontwikkelaar van dat spel.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dobbelhor
Tags: onofficiele-gids, spel, donker, nederlands, custom-widgets
*/

/* =========================================================================
   1. Lettertypen — allemaal uit de map fonts, nooit van een externe server
   ========================================================================= */

@font-face {
	font-family: 'Eczar';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/eczar-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: 'Eczar';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/eczar-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/hanken-grotesk-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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/hanken-grotesk-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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/hanken-grotesk-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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. Palet
   -------------------------------------------------------------------------
   Alle verhoudingen zijn vooraf uitgerekend, op de achtergrond en op het
   paneel. --haarlijn haalt met opzet geen 3:1 en is daarom uitsluitend een
   rand of een vulling; hij mag nergens in een color-opgave staan.
   ========================================================================= */

:root {
	--as: #191b18;        /* achtergrond van de bladzijde                       */
	--nis: #212420;       /* panelen en kaarten                                 */
	--haarlijn: #333a31;  /* haarlijn — alleen rand en vulling, nooit tekst     */
	--gespijl: #6e7c68;   /* zichtbare rand: focus, actieve chip — 3.92:1       */
	--kalk: #e9ece6;      /* hoofdtekst                        14.53 / 13.16:1  */
	--stof: #a9b1a6;      /* bijtekst                           7.86 /  7.12:1  */
	--salie: #a3c49a;     /* accent: knoppen, verwijzingen      9.02 /  8.16:1  */
	--been: #cfd6cc;      /* grote cijfers en koppen           11.68 / 10.57:1  */
	--roest: #e58a78;     /* waarschuwing: doe dit niet         6.80 /  6.16:1  */

	--gang: 1180px;
	--kop: 4.6rem;
	--rond: 4px;
	--schets: 0 1px 0 rgba(51, 58, 49, 0.9);
}

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

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

/* Een klasse die display zet is sterker dan de regel van de browser voor
   [hidden]. Deze regel staat daarom een keer op het hele thema. */
[hidden] {
	display: none !important;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	/* Zonder deze regel komt een ankerverwijzing onder de vaste kop terecht. */
	scroll-padding-top: calc(var(--kop) + 1rem);
}

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

body {
	margin: 0;
	background-color: var(--as);
	color: var(--kalk);
	font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

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

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

h1,
h2,
h3 {
	font-family: 'Eczar', Georgia, serif;
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 0.6em;
	color: var(--been);
	letter-spacing: 0.005em;
}

h1 {
	font-size: clamp(2.05rem, 1.3rem + 3.1vw, 3.5rem);
}

h2 {
	font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem);
}

h3 {
	font-size: 1.19rem;
	color: var(--kalk);
}

p {
	margin: 0 0 1.05rem;
}

code {
	font-family: 'Consolas', 'SFMono-Regular', monospace;
	font-size: 0.92em;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 0.1em 0.4em;
	color: var(--been);
}

s {
	color: var(--stof);
	text-decoration-thickness: 1px;
}

.wortelgang {
	width: min(100% - 2.5rem, var(--gang));
	margin-inline: auto;
}

.verzwegen {
	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;
	left: -9999px;
	top: 0;
	z-index: 100;
	background-color: var(--salie);
	color: var(--as);
	padding: 0.85rem 1.4rem;
	font-weight: 600;
	border-radius: 0 0 var(--rond) 0;
	text-decoration: none;
}

.overslaan:focus {
	left: 0;
	color: var(--as);
}

/* =========================================================================
   4. De wortelband — de scheidingslijn
   -------------------------------------------------------------------------
   Wortels langs een haarlijn, met op onregelmatige afstanden een aftakking
   omhoog of omlaag; elke vierde aftakking eindigt in een verdikking. Het beeld
   staat als data-adres in de stijl, dus er gaat geen verzoek de deur uit.
   ========================================================================= */

.wortelband {
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='24' viewBox='0 0 1200 24' fill='none'%3E%3Cpath d='M0 12H1200' stroke='%23333a31' stroke-width='1.4'/%3E%3Cpath d='M34 12l6-5 4-4M91 12l-6 5-4 4M138 12l6-5 4-4M203 12l6-5 4-4M259 12l-6 5-4 4M316 12l6-5 4-4M374 12l-6 5-4 4M428 12l-6 5-4 4M492 12l6-5 4-4M547 12l-6 5-4 4M609 12l6-5 4-4M666 12l6-5 4-4M723 12l-6 5-4 4M784 12l6-5 4-4M839 12l-6 5-4 4M901 12l-6 5-4 4M957 12l6-5 4-4M1014 12l-6 5-4 4M1072 12l6-5 4-4M1129 12l-6 5-4 4' stroke='%23333a31' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='213' cy='3' r='2.6' fill='%236e7c68'/%3E%3Ccircle cx='418' cy='21' r='2.6' fill='%236e7c68'/%3E%3Ccircle cx='676' cy='3' r='2.6' fill='%236e7c68'/%3E%3Ccircle cx='891' cy='21' r='2.6' fill='%236e7c68'/%3E%3Ccircle cx='1119' cy='21' r='2.6' fill='%236e7c68'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
}

/* =========================================================================
   5. De luifelpoort
   ========================================================================= */

.luifelpoort {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--as);
	border-bottom: 1px solid var(--haarlijn);
}

.luifelpoort__binnen {
	width: min(100% - 2.5rem, var(--gang));
	margin-inline: auto;
	min-height: var(--kop);
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 0.55rem 0;
	flex-wrap: wrap;
}

.luifelpoort__merk {
	display: flex;
	align-items: center;
	gap: 0.68rem;
	text-decoration: none;
	color: var(--kalk);
	min-height: 46px;
	padding: 2px 0;
}

.luifelpoort__merk:hover,
.luifelpoort__merk:focus {
	color: var(--kalk);
}

.luifelpoort__naam {
	display: block;
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.36rem;
	line-height: 1.1;
	color: var(--been);
}

.luifelpoort__deel + .luifelpoort__deel {
	color: var(--salie);
}

.luifelpoort__onder {
	display: block;
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stof);
	margin-top: 3px;
}

.klopper {
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	background-color: var(--nis);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	color: var(--kalk);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.klopper__streepjes {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 17px;
}

.klopper__streepjes i {
	display: block;
	height: 2px;
	background-color: var(--salie);
}

.dwaalpad {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.1rem;
}

.dwaalpad a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0.2rem 0.1rem;
	color: var(--kalk);
	text-decoration: none;
	font-size: 0.97rem;
	border-bottom: 2px solid transparent;
}

.dwaalpad a:hover,
.dwaalpad a:focus {
	color: var(--salie);
	border-bottom-color: var(--salie);
}

.dwaalpad .current-menu-item > a {
	color: var(--salie);
	border-bottom-color: var(--gespijl);
}

/* De knop draagt de automatische marge, niet de menuknop. Anders valt de kop
   op 390 px in twee regels uiteen. */
.luifelpoort__gesp {
	margin-left: auto;
}

@media (max-width: 61.99em) {
	.klopper {
		display: inline-flex;
		order: 3;
	}

	.luifelpoort__gesp {
		order: 2;
	}

	.luifelpoort__navigatie {
		order: 4;
		display: none;
		width: 100%;
	}

	.luifelpoort--open .luifelpoort__navigatie {
		display: block;
	}

	.dwaalpad {
		flex-direction: column;
		gap: 0;
		padding: 0.4rem 0 0.8rem;
	}

	.dwaalpad li {
		border-top: 1px solid var(--haarlijn);
	}

	.dwaalpad a {
		width: 100%;
		min-height: 46px;
	}
}

/* =========================================================================
   6. Knoppen
   ========================================================================= */

.gesp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.72rem 1.5rem;
	border-radius: var(--rond);
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.gesp--voort {
	background-color: var(--salie);
	color: var(--as);
	border-color: var(--salie);
}

.gesp--voort:hover,
.gesp--voort:focus {
	background-color: var(--been);
	border-color: var(--been);
	color: var(--as);
}

.gesp--stil {
	background-color: transparent;
	color: var(--kalk);
	border-color: var(--gespijl);
}

.gesp--stil:hover,
.gesp--stil:focus {
	background-color: var(--nis);
	color: var(--been);
	border-color: var(--been);
}

.gesp--kort {
	min-height: 40px;
	padding: 0.44rem 1rem;
	font-size: 0.95rem;
}

/* =========================================================================
   7. Secties
   ========================================================================= */

.nis {
	padding: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem) 0;
}

.nis--paneel {
	background-color: var(--nis);
	border-top: 1px solid var(--haarlijn);
	border-bottom: 1px solid var(--haarlijn);
}

.nis--diep {
	background-color: var(--nis);
	background-image: linear-gradient(rgba(33, 36, 32, 0.955), rgba(33, 36, 32, 0.955)), url('images/steenvlak.jpg');
	background-size: auto, 640px auto;
	background-position: center, center;
	border-top: 1px solid var(--haarlijn);
	border-bottom: 1px solid var(--haarlijn);
}

.nis--kort {
	padding: clamp(1.9rem, 1.2rem + 2.2vw, 3rem) 0;
}

.nis__boven {
	font-size: 0.74rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--salie);
	margin: 0 0 0.7rem;
}

.nis__boven--onder {
	margin: -0.35rem 0 1rem;
}

.nis__kop {
	max-width: 27ch;
}

.nis__inleiding {
	max-width: 68ch;
	color: var(--stof);
	font-size: 1.09rem;
}

.nis__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0 0;
}

/* Opkomen bij het scrollen. De doorzichtigheid staat alleen onder .js, die
   klasse wordt in de kop door een klein script gezet. Zonder javascript is de
   bladzijde dus gewoon zichtbaar. De klasse die het opheft heet ontluikt--op
   en staat onder dezelfde naam in js/main.js. */
.js .ontluikt {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.js .ontluikt {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   8. Het uitzicht (hero)
   -------------------------------------------------------------------------
   De sluier is een eigen element voor de tekst en geen ::before op de houder:
   een absoluut geplaatste ::before tekent boven de eigen inhoud en dekte op
   een eerdere site de hele koptekst af.
   ========================================================================= */

.uitzicht {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(80vh, 620px);
	overflow: hidden;
	border-bottom: 1px solid var(--haarlijn);
}

.uitzicht__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.uitzicht__sluier {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(100deg, rgba(25, 27, 24, 0.975) 0%, rgba(25, 27, 24, 0.955) 42%, rgba(25, 27, 24, 0.6) 68%, rgba(25, 27, 24, 0.25) 100%),
		linear-gradient(to top, rgba(25, 27, 24, 0.95) 0%, rgba(25, 27, 24, 0.35) 55%, rgba(25, 27, 24, 0.5) 100%);
}

.uitzicht__binnen {
	position: relative;
	z-index: 2;
	padding: clamp(2.8rem, 1.8rem + 4vw, 5.4rem) 0;
}

.uitzicht__boven {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--salie);
	margin: 0 0 1rem;
}

.uitzicht__kop {
	max-width: 19ch;
	margin-bottom: 1rem;
	color: var(--kalk);
}

.uitzicht__inleiding {
	max-width: 52ch;
	font-size: clamp(1.03rem, 0.98rem + 0.3vw, 1.17rem);
	color: var(--kalk);
}

.uitzicht__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1.7rem 0 1.2rem;
}

.uitzicht__meting {
	max-width: 52ch;
	font-size: 0.9rem;
	color: var(--stof);
	margin: 0;
}

/* =========================================================================
   9. De zerk — kop van een binnenbladzijde
   ========================================================================= */

.zerk {
	background-color: var(--nis);
	border-bottom: 1px solid var(--haarlijn);
	padding: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem) 0;
}

.zerk__boven {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--salie);
	margin: 0 0 0.85rem;
}

.zerk__kop {
	max-width: 22ch;
}

.zerk__inleiding {
	max-width: 66ch;
	color: var(--stof);
	font-size: 1.09rem;
	margin: 0;
}

.zerk--stuk .zerk__kop {
	max-width: 26ch;
}

/* =========================================================================
   10. Duo, breedbeeld, tweeluik, portretten
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(1.6rem, 1rem + 2.4vw, 3.2rem);
	align-items: center;
}

.duo--omgekeerd {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

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

.duo__tekst > :last-child {
	margin-bottom: 0;
}

.breedbeeld {
	margin: 0 0 2rem;
}

.breedbeeld img {
	width: 100%;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
}

.breedbeeld figcaption {
	margin-top: 0.75rem;
	font-size: 0.93rem;
	color: var(--stof);
	max-width: 70ch;
}

.tweeluik {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
}

.tweeluik__helft {
	background-color: var(--nis);
	border: 1px solid var(--haarlijn);
	border-left: 3px solid var(--gespijl);
	border-radius: var(--rond);
	padding: 1.4rem 1.5rem;
}

.tweeluik__helft > :last-child {
	margin-bottom: 0;
}

.tweeluik__kop {
	color: var(--salie);
	margin-bottom: 0.5rem;
}

.portretrij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6rem;
	max-width: 46rem;
}

.portret img {
	width: 100%;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
}

.portret__bijschrift {
	margin: 0.8rem 0 0;
	font-size: 0.93rem;
	color: var(--stof);
}

/* =========================================================================
   11. Vraagnissen, stapkaarten, baaskaarten
   ========================================================================= */

.vraagnis__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
	gap: 1.4rem;
}

.vraagnis {
	background-color: var(--nis);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.5rem 1.5rem 1.6rem;
}

.vraagnis__nr {
	font-family: 'Eczar', Georgia, serif;
	font-size: 2rem;
	line-height: 1;
	color: var(--been);
	margin: 0 0 0.55rem;
}

.vraagnis__kop {
	margin-bottom: 0.6rem;
	color: var(--salie);
}

.vraagnis__tekst {
	margin: 0;
	color: var(--stof);
	font-size: 0.99rem;
}

.stapkaart__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.3rem;
	counter-reset: stap;
}

.stapkaart {
	position: relative;
	background-color: var(--nis);
	border: 1px solid var(--haarlijn);
	border-top: 3px solid var(--roest);
	border-radius: var(--rond);
	padding: 1.4rem 1.4rem 1.5rem;
}

.stapkaart__nr {
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--been);
	margin: 0 0 0.5rem;
	letter-spacing: 0.04em;
}

.stapkaart__kop {
	margin-bottom: 0.55rem;
}

.stapkaart__tekst {
	margin: 0;
	color: var(--stof);
	font-size: 0.97rem;
}

.baaskaart__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1.4rem;
}

.baaskaart {
	display: grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto auto;
	gap: 0.2rem 1rem;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.4rem 1.5rem;
}

.baaskaart__nr {
	grid-row: span 2;
	font-family: 'Eczar', Georgia, serif;
	font-size: 2.35rem;
	line-height: 1;
	color: var(--been);
	margin: 0;
}

.baaskaart__kop {
	margin: 0 0 0.4rem;
	color: var(--salie);
}

.baaskaart p:last-child {
	margin: 0;
	color: var(--stof);
	font-size: 0.98rem;
}

/* =========================================================================
   12. Merkstenen — de zes getallen
   ========================================================================= */

/* Zes stenen horen in twee rijen van drie. Met auto-fit werden het er vijf en
   dan een, en dat leest als een vergeten kaart. */
.merksteen__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
}

@media (max-width: 62em) {
	.merksteen__rij {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34em) {
	.merksteen__rij {
		grid-template-columns: minmax(0, 1fr);
	}
}

.merksteen {
	background-color: var(--nis);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.3rem 1.3rem 1.35rem;
}

.merksteen__getal {
	font-family: 'Eczar', Georgia, serif;
	font-size: 2.7rem;
	line-height: 1;
	color: var(--been);
	margin: 0 0 0.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.merksteen__eenheid {
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--salie);
}

.merksteen__wat {
	margin: 0 0 0.5rem;
	font-size: 0.97rem;
}

.merksteen__versie {
	margin: 0;
	font-size: 0.83rem;
	color: var(--stof);
}

/* =========================================================================
   13. De trapgang — het journaal
   ========================================================================= */

.trapgang {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: trede;
}

.trede {
	display: grid;
	grid-template-columns: 3.1rem minmax(0, 1fr);
	gap: 1.2rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--haarlijn);
}

.trede:first-child {
	border-top: 0;
	padding-top: 0.4rem;
}

.trede--2 {
	margin-left: clamp(0rem, -1rem + 4vw, 2.6rem);
}

.trede--3 {
	margin-left: clamp(0rem, -2rem + 8vw, 5.2rem);
}

.trede--4 {
	margin-left: clamp(0rem, -3rem + 12vw, 7.8rem);
}

.trede__datum {
	margin: 0;
	display: flex;
	justify-content: center;
}

.trede__datum span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--stof);
	font-variant-numeric: tabular-nums;
}

.trede__blok {
	border-left: 1px solid var(--haarlijn);
	padding-left: 1.3rem;
}

.trede__kop {
	font-family: 'Eczar', Georgia, serif;
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
	margin: 0 0 0.5rem;
	color: var(--been);
}

.trede__kop a {
	display: inline-block;
	min-height: 38px;
	padding: 0.15rem 0;
	color: var(--been);
	text-decoration: none;
	border-bottom: 1px solid var(--haarlijn);
}

.trede__kop a:hover,
.trede__kop a:focus {
	color: var(--salie);
	border-bottom-color: var(--salie);
}

.trede__kort {
	margin: 0 0 0.5rem;
	color: var(--stof);
}

.trede__meta {
	margin: 0;
	font-size: 0.86rem;
	color: var(--stof);
}

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.pagination a,
.pagination .current,
.nav-links a,
.nav-links .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 0.7rem;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	text-decoration: none;
	color: var(--kalk);
}

.pagination .current,
.nav-links .current {
	background-color: var(--salie);
	color: var(--as);
	border-color: var(--salie);
}

/* =========================================================================
   14. Kantlijn — de correcties
   ========================================================================= */

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

.kantlijn {
	max-width: 40rem;
	margin-left: auto;
	border-left: 3px solid var(--gespijl);
	background-color: var(--as);
	border-radius: 0 var(--rond) var(--rond) 0;
	padding: 1.2rem 1.4rem 1.3rem;
}

.kantlijn--aangenomen {
	border-left-color: var(--salie);
}

.kantlijn__hoofdstuk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: baseline;
	margin: 0 0 0.7rem;
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--salie);
}

.kantlijn__stand {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: var(--stof);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 0.1rem 0.5rem;
}

.kantlijn__tekst {
	margin: 0 0 0.8rem;
	padding: 0;
	border: 0;
}

.kantlijn__tekst p {
	margin: 0;
	font-size: 1.01rem;
}

.kantlijn__oud {
	margin: 0 0 0.2rem;
	font-size: 0.93rem;
}

.kantlijn__nieuw {
	margin: 0 0 0.8rem;
	font-size: 0.93rem;
	color: var(--salie);
}

.kantlijn__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--stof);
}

.kantlijn__naam {
	color: var(--been);
	font-weight: 600;
	margin-right: 0.45rem;
}

/* =========================================================================
   15. Geschrift — lange tekst
   ========================================================================= */

.geschrift {
	max-width: 72ch;
}

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

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

.geschrift h3 {
	margin-top: 1.9rem;
	color: var(--salie);
}

.geschrift p {
	color: var(--kalk);
}

.geschrift__datum {
	margin-top: 2rem;
	font-size: 0.88rem;
	color: var(--stof);
	border-top: 1px solid var(--haarlijn);
	padding-top: 0.9rem;
}

.waarschuwing {
	margin: 1.4rem 0 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--haarlijn);
	border-left: 3px solid var(--roest);
	border-radius: var(--rond);
	background-color: var(--as);
	color: var(--kalk);
	font-size: 0.99rem;
	max-width: 74ch;
}

.waarschuwing b {
	color: var(--roest);
}

/* =========================================================================
   16. Tabellen
   -------------------------------------------------------------------------
   Een brede tabel duwt een telefoon uit elkaar. Daarom een houder die mag
   schuiven, en onder 660 px een stapel met het kopje uit data-kop erboven.
   ========================================================================= */

.tabelrand {
	overflow-x: auto;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background-color: var(--as);
}

.drempeltabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.drempeltabel caption {
	caption-side: bottom;
	text-align: left;
	padding: 0.85rem 1.1rem;
	font-size: 0.86rem;
	color: var(--stof);
	border-top: 1px solid var(--haarlijn);
}

.drempeltabel th,
.drempeltabel td {
	text-align: left;
	padding: 0.8rem 1.1rem;
	border-bottom: 1px solid var(--haarlijn);
	vertical-align: top;
}

.drempeltabel thead th {
	background-color: var(--nis);
	color: var(--been);
	font-family: 'Eczar', Georgia, serif;
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
}

.drempeltabel tbody tr:last-child td {
	border-bottom: 0;
}

.drempeltabel tbody td:first-child {
	color: var(--been);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 41.24em) {
	/* De koprij verdwijnt uit beeld maar blijft voor een schermlezer bestaan.
	   Het wegstoppen moet ook op de cellen zelf: een thead van 1 px met cellen
	   op ware grootte legt onzichtbare vakken over de eerste rij heen. */
	.drempeltabel thead,
	.drempeltabel thead th {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.drempeltabel tbody tr {
		display: block;
		border-bottom: 1px solid var(--haarlijn);
		padding: 0.5rem 0;
	}

	.drempeltabel tbody tr:last-child {
		border-bottom: 0;
	}

	.drempeltabel tbody td,
	.drempeltabel tbody td:first-child {
		display: block;
		border-bottom: 0;
		padding: 0.35rem 1.1rem;
		white-space: normal;
	}

	.drempeltabel tbody td::before {
		content: attr(data-kop);
		display: block;
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--salie);
		margin-bottom: 0.15rem;
	}
}

/* =========================================================================
   17. Vraaglijst
   ========================================================================= */

.vraaglijst {
	display: grid;
	gap: 0.7rem;
	max-width: 76ch;
}

.vraaglijst__vak {
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
}

.vraaglijst__vraag {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0.7rem 1.2rem;
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.08rem;
	color: var(--been);
	cursor: pointer;
	list-style: none;
}

.vraaglijst__vraag::-webkit-details-marker {
	display: none;
}

.vraaglijst__vraag::after {
	content: '';
	margin-left: auto;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid var(--salie);
	flex: none;
}

.vraaglijst__vak[open] .vraaglijst__vraag::after {
	border-top: 0;
	border-bottom: 7px solid var(--salie);
}

.vraaglijst__antwoord {
	margin: 0;
	padding: 0 1.2rem 1.2rem;
	color: var(--stof);
}

/* =========================================================================
   18. Aanroep
   ========================================================================= */

.aanroep {
	position: relative;
	padding: clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem) 0;
	background-color: var(--nis);
	border-top: 1px solid var(--haarlijn);
	border-bottom: 1px solid var(--haarlijn);
	overflow: hidden;
}

.aanroep__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.aanroep__sluier {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(95deg, rgba(25, 27, 24, 0.975) 0%, rgba(25, 27, 24, 0.955) 46%, rgba(25, 27, 24, 0.62) 74%, rgba(25, 27, 24, 0.3) 100%),
		linear-gradient(to top, rgba(25, 27, 24, 0.9) 0%, rgba(25, 27, 24, 0.42) 60%, rgba(25, 27, 24, 0.55) 100%);
}

.aanroep__binnen {
	position: relative;
	z-index: 2;
}

.aanroep__kop {
	max-width: 22ch;
}

.aanroep__tekst {
	max-width: 58ch;
	color: var(--kalk);
	font-size: 1.06rem;
}

.aanroep__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1.5rem 0 0;
}

.aanroep--band .aanroep__binnen {
	padding: 0.4rem 0;
}

/* =========================================================================
   19. Het stilblok met de verklaring
   ========================================================================= */

.stilblok {
	border-top: 1px solid var(--haarlijn);
}

.stilblok__kop {
	font-size: 1.06rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--stof);
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 600;
	margin-bottom: 0.9rem;
}

.stilblok__tekst {
	max-width: 82ch;
	font-size: 0.95rem;
	color: var(--stof);
}

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

.smeekblad__opzet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
	align-items: start;
}

.smeekblad__opzet--omgekeerd {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.smeekblad {
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.6rem 1.6rem 1.7rem;
}

.smeekblad__hulp > :last-child {
	margin-bottom: 0;
}

.smeekblad__hulp h3 {
	color: var(--salie);
	margin-top: 1.6rem;
}

.smeekblad__hulp h3:first-child {
	margin-top: 0;
}

.smeekblad__hulp p {
	color: var(--stof);
	font-size: 0.99rem;
}

.veldrand {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 1.15rem;
}

.veldrand label {
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--kalk);
}

.veldrand input[type='text'],
.veldrand input[type='email'],
.veldrand select,
.veldrand textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.8rem;
	background-color: var(--nis);
	border: 1px solid var(--gespijl);
	border-radius: var(--rond);
	color: var(--kalk);
	font: inherit;
}

.veldrand textarea {
	min-height: 8rem;
	resize: vertical;
}

.veldrand input::placeholder {
	color: var(--stof);
	opacity: 1;
}

.veldrand input:focus,
.veldrand select:focus,
.veldrand textarea:focus {
	border-color: var(--salie);
}

.smeekblad__slot {
	margin: 1.5rem 0 0;
}

.smeekblad__gegevens {
	margin: 0 0 1.2rem;
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 0.35rem 1rem;
	font-size: 0.97rem;
}

.smeekblad__gegevens dt {
	color: var(--stof);
	font-size: 0.83rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-top: 0.55rem;
}

.smeekblad__gegevens dd {
	margin: 0;
	padding: 0.15rem 0;
}

.smeekblad__gegevens dd a {
	display: inline-block;
	min-height: 38px;
	padding: 0.35rem 0;
}

/* De val: buiten beeld maar wel getekend, en met opzet niet display:none.
   De proef kijkt naar de plek op het scherm en niet naar zichtbaarheid. */
.lokaas {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.naklank {
	margin: 0 0 1.6rem;
	padding: 0.95rem 1.2rem;
	border: 1px solid var(--gespijl);
	border-left: 3px solid var(--salie);
	border-radius: var(--rond);
	background-color: var(--as);
}

.naklank p {
	margin: 0;
	color: var(--kalk);
}

.naklank--fout {
	border-left-color: var(--roest);
}

/* =========================================================================
   21. Gereedschap 1 — Nivelband
   ========================================================================= */

.nivelband {
	margin-top: 2rem;
}

.nivelband__bediening {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.1rem 1.6rem;
	align-items: end;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.3rem 1.4rem;
}

.veldrand--schuif {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 3.4rem;
	grid-template-rows: auto auto;
	gap: 0.35rem 0.8rem;
	margin: 0;
	align-items: center;
}

.veldrand--schuif label {
	grid-column: span 2;
}

.nivelband__stand {
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--been);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.nivelband__bediening .gesp {
	justify-self: start;
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 38px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
	background-color: var(--haarlijn);
	border: 1px solid var(--gespijl);
}

input[type='range']::-moz-range-track {
	height: 8px;
	border-radius: 4px;
	background-color: var(--haarlijn);
	border: 1px solid var(--gespijl);
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border-radius: 50%;
	background-color: var(--salie);
	border: 2px solid var(--as);
}

input[type='range']::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--salie);
	border: 2px solid var(--as);
}

.nivelband__meting {
	margin: 1rem 0 1.4rem;
	font-size: 0.88rem;
	color: var(--stof);
	max-width: 74ch;
}

.nivelband__as {
	position: relative;
	background-color: var(--as);
	background-image: linear-gradient(rgba(25, 27, 24, 0.94), rgba(25, 27, 24, 0.94)), url('images/wortelvlak.jpg');
	background-size: auto, 520px auto;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.2rem;
}

/* De naald hangt in een eigen spoor zonder zijpadding. Een absoluut geplaatst
   element rekent zijn linkerkant af tegen het opvulvak van zijn houder, dus
   met padding op de houder zou de naald een halve centimeter naast de goten
   staan zonder dat een proef daar iets van merkt. */
.nivelband__spoor {
	position: relative;
}

.nivelband__naald {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background-color: var(--salie);
	z-index: 2;
	pointer-events: none;
}

/* Geen eigen stapelcontext op de lijst: anders ligt de naald boven alles wat
   erin staat en helpt de z-index op de knop niets. */
.nivelband__banden {
	list-style: none;
	margin: 0;
	padding: 0;
}

.baanrij {
	padding: 0 0 0.7rem;
	margin: 0 0 0.7rem;
	border-bottom: 1px solid var(--haarlijn);
}

.baanrij:last-child {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

/* De knop krijgt de kleur van de as en ligt boven de naald: zo loopt de lijn
   wel over de goten en niet dwars door de cijfers van het venster. */
.baanrij__knop {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	width: 100%;
	min-height: 42px;
	padding: 0.3rem 0;
	margin: 0 0 0.45rem;
	background-color: var(--as);
	border: 0;
	border-left: 3px solid transparent;
	color: var(--kalk);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.baanrij--open .baanrij__knop {
	border-left-color: var(--salie);
	padding-left: 0.6rem;
}

.baanrij__naam {
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.03rem;
	color: var(--been);
}

.baanrij__venster {
	font-size: 0.81rem;
	color: var(--stof);
	font-variant-numeric: tabular-nums;
}

.oordeel {
	display: inline-block;
	margin-left: auto;
	padding: 0.18rem 0.65rem;
	border: 1px solid var(--gespijl);
	border-radius: var(--rond);
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oordeel--vroeg {
	color: var(--roest);
	border-color: var(--roest);
}

.oordeel--goed {
	color: var(--salie);
	border-color: var(--salie);
}

.oordeel--over {
	color: var(--stof);
	border-color: var(--gespijl);
}

/* De goot is een blok met een vaste hoogte, geen span: een span met alleen een
   hoogte tekent niets. De strook ligt erin en niet ernaast. */
.baangoot {
	position: relative;
	display: block;
	width: 100%;
	height: 14px;
	background-color: var(--haarlijn);
	border-radius: 7px;
	overflow: hidden;
}

.baanstrook {
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	min-width: 6px;
	background-color: var(--gespijl);
	border-radius: 7px;
}

.baanrij--open .baanstrook {
	background-color: var(--salie);
}

.nivelband__blad {
	margin-top: 1.3rem;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-left: 3px solid var(--salie);
	border-radius: var(--rond);
	padding: 1.1rem 1.3rem;
}

.nivelband__bandnaam {
	margin: 0 0 0.35rem;
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.12rem;
	color: var(--been);
}

.nivelband__tekst {
	margin: 0;
	color: var(--kalk);
}

/* =========================================================================
   22. Gereedschap 2 — Bazenketen
   ========================================================================= */

.bazenketen {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.4rem 2rem;
	align-items: start;
}

.bazenketen > .veldrand {
	grid-column: span 2;
	max-width: 30rem;
}

.bazenketen__telling {
	grid-column: span 2;
	margin: -0.5rem 0 0;
	font-size: 0.93rem;
	color: var(--stof);
}

.bazenketen__keten {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: keten;
}

.bazenketen__stap {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.5rem 0;
	border-left: 1px solid var(--haarlijn);
	padding-left: 0.9rem;
	margin-left: 0.9rem;
}

.bazenketen__stap:first-child {
	border-left-color: transparent;
}

.bazenketen__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	margin-left: -2.35rem;
	border-radius: 50%;
	/* --gespijl gaf hier 3.92:1 en dat is te weinig voor een cijfer van
	   0,8 rem; --stof haalt 7.86:1 met dezelfde rol in de opmaak. */
	background-color: var(--stof);
	color: var(--as);
	font-size: 0.8rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bazenketen__wat {
	display: block;
	padding-top: 0.05rem;
}

.bazenketen__stap--doel .bazenketen__nr {
	background-color: var(--salie);
}

.bazenketen__stap--doel .bazenketen__wat {
	color: var(--been);
	font-weight: 600;
}

.bazenketen__kant {
	display: grid;
	gap: 1.2rem;
	align-content: start;
}

.bazenketen__zij,
.bazenketen__over {
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.1rem 1.3rem;
}

.bazenketen__zij:empty {
	display: none;
}

.bazenketen__zij h3,
.bazenketen__over h3 {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--salie);
	font-family: 'Hanken Grotesk', sans-serif;
}

.bazenketen__zij ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--stof);
	font-size: 0.95rem;
}

.bazenketen__over p {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}

.bazenketen__lijst {
	margin: 0;
	color: var(--stof);
	font-size: 0.9rem;
	line-height: 1.75;
}

/* =========================================================================
   23. Gereedschap 3 — Geheugenlade
   ========================================================================= */

.geheugenlade {
	margin-top: 2rem;
}

.geheugenlade > .veldrand {
	max-width: 18rem;
}

.geheugenlade__lijst {
	margin: 0 0 1.2rem;
	padding: 1rem 1.2rem 1.2rem;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background-color: var(--as);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 0.2rem 1.4rem;
}

.geheugenlade__lijst legend {
	font-size: 0.8rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--salie);
	padding: 0 0.4rem;
}

.geheugenlade__regel {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 42px;
	padding: 0.2rem 0;
	cursor: pointer;
	border-bottom: 1px solid var(--haarlijn);
}

.geheugenlade__regel input {
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: #a3c49a;
}

.geheugenlade__naam {
	font-size: 0.98rem;
}

.geheugenlade__kosten {
	margin-left: auto;
	font-size: 0.8rem;
	color: var(--stof);
	white-space: nowrap;
}

.geheugenlade__uitslag {
	margin: 1.2rem 0 0;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-left: 3px solid var(--gespijl);
	border-radius: var(--rond);
	padding: 1.1rem 1.3rem;
}

.geheugenlade__oordeel {
	margin: 0;
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.14rem;
	color: var(--been);
}

.geheugenlade__oordeel--past {
	color: var(--salie);
}

.geheugenlade__oordeel--vol {
	color: var(--roest);
}

.geheugenlade__weg {
	margin: 0.5rem 0 0;
	color: var(--kalk);
	font-size: 0.98rem;
}

.geheugenlade__meting {
	margin: 1rem 0 0;
	font-size: 0.86rem;
	color: var(--stof);
}

/* =========================================================================
   24. Gereedschap 4 — Wapenparen
   ========================================================================= */

.wapenparen {
	margin-top: 2rem;
}

.wapenparen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
	gap: 1.3rem;
}

.klingkaart {
	display: flex;
	flex-direction: column;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 1.3rem 1.4rem 1.4rem;
}

.klingkaart__kop {
	margin: 0 0 0.3rem;
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.2rem;
	color: var(--been);
}

.klingkaart__eisen {
	margin: 0 0 1rem;
	font-size: 0.88rem;
	color: var(--stof);
	font-variant-numeric: tabular-nums;
}

.klingkaart__versie {
	display: inline-block;
	margin-left: 0.35rem;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 0.05rem 0.4rem;
}

.klingkaart .veldrand {
	margin-bottom: 0.9rem;
}

.klingkaart__oordeel {
	display: block;
	margin: 0 0 0.6rem;
	margin-left: 0;
	padding: 0.6rem 0.85rem;
	font-size: 0.93rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	line-height: 1.55;
}

.klingkaart__hint {
	margin: 0;
	margin-top: auto;
	padding: 0.75rem 0.9rem;
	background-color: var(--nis);
	border: 1px solid var(--haarlijn);
	border-left: 3px solid var(--gespijl);
	border-radius: var(--rond);
	font-size: 0.92rem;
	color: var(--stof);
}

.wapenparen__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.4rem;
	margin-top: 1.4rem;
}

.wapenparen__slot {
	margin: 0;
	flex: 1 1 20rem;
	color: var(--stof);
	font-size: 0.97rem;
}

/* =========================================================================
   25. De 404
   ========================================================================= */

.verdwaald {
	text-align: center;
	padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
}

/* De grote cijfers dragen dezelfde kleur als de koppen en niet die van de
   haarlijn: een cijfer in randkleur haalt geen 3:1 en is dan versiering die
   niemand kan lezen. */
.verdwaald__getal {
	font-family: 'Eczar', Georgia, serif;
	font-size: clamp(4.5rem, 2rem + 13vw, 9rem);
	line-height: 1;
	color: var(--been);
	margin: 0 0 0.6rem;
	letter-spacing: 0.04em;
}

.verdwaald__kop {
	margin-bottom: 0.9rem;
}

.verdwaald__tekst {
	max-width: 56ch;
	margin-inline: auto;
	color: var(--stof);
}

.verdwaald__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
	margin-top: 1.6rem;
}

/* =========================================================================
   26. De asvloer
   ========================================================================= */

.asvloer {
	background-color: var(--nis);
	border-top: 1px solid var(--haarlijn);
	padding: clamp(2.6rem, 1.8rem + 2.6vw, 3.8rem) 0 2rem;
}

.asvloer__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.asvloer__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	text-decoration: none;
	color: var(--been);
}

.asvloer__naam {
	font-family: 'Eczar', Georgia, serif;
	font-size: 1.24rem;
}

.asvloer__deel + .asvloer__deel {
	color: var(--salie);
}

.asvloer__over {
	margin: 0.8rem 0 0;
	font-size: 0.93rem;
	color: var(--stof);
	max-width: 34ch;
}

.asvloer__blok h2 {
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--salie);
	margin: 0 0 0.6rem;
}

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

.asvloer__blok li a {
	display: inline-block;
	min-height: 38px;
	padding: 0.4rem 0;
	color: var(--kalk);
	text-decoration: none;
	font-size: 0.95rem;
}

.asvloer__blok li a:hover,
.asvloer__blok li a:focus {
	color: var(--salie);
	text-decoration: underline;
}

.asvloer__gegevens {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 0 1.2rem;
	margin: 2.4rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--haarlijn);
	font-size: 0.93rem;
}

.asvloer__gegevens dt {
	color: var(--stof);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-top: 0.75rem;
}

.asvloer__gegevens dd {
	margin: 0;
	padding: 0.15rem 0;
}

.asvloer__gegevens dd a {
	display: inline-block;
	min-height: 38px;
	padding: 0.4rem 0;
}

.losvanuitgever {
	margin: 1.8rem 0 0;
	padding: 1.1rem 1.3rem;
	background-color: var(--as);
	border: 1px solid var(--haarlijn);
	border-left: 3px solid var(--gespijl);
	border-radius: var(--rond);
	font-size: 0.9rem;
	color: var(--stof);
	max-width: 100%;
}

.losvanuitgever b {
	color: var(--been);
}

.asvloer__slot {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--haarlijn);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem 2rem;
}

.asvloer__slot p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--stof);
}

/* =========================================================================
   27. De koekrand
   ========================================================================= */

.koekrand {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background-color: var(--nis);
	border-top: 1px solid var(--gespijl);
	display: none;
}

.koekrand--aan {
	display: block;
}

.koekrand--weg {
	display: none;
}

.koekrand__binnen {
	width: min(100% - 2.5rem, var(--gang));
	margin-inline: auto;
	padding: 1rem 0 1.1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.6rem;
}

.koekrand__binnen p {
	margin: 0;
	flex: 1 1 22rem;
	font-size: 0.92rem;
	color: var(--stof);
}

.koekrand__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.koekwis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.2rem;
	margin: 1.4rem 0 2rem;
}

.koekwis__melding {
	color: var(--salie);
	font-size: 0.95rem;
}

/* =========================================================================
   28. Smalle schermen
   ========================================================================= */

@media (max-width: 62em) {
	.asvloer__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 52em) {
	.duo,
	.duo--omgekeerd,
	.smeekblad__opzet,
	.smeekblad__opzet--omgekeerd,
	.bazenketen {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.smeekblad__opzet--omgekeerd .smeekblad {
		order: 1;
	}

	.bazenketen > .veldrand,
	.bazenketen__telling {
		grid-column: span 1;
	}

	.trede--2,
	.trede--3,
	.trede--4 {
		margin-left: 0;
	}
}

@media (max-width: 40em) {
	:root {
		--kop: 4rem;
	}

	body {
		font-size: 1.0125rem;
	}

	.luifelpoort__onder {
		display: none;
	}

	.luifelpoort__gesp {
		font-size: 0.86rem;
		padding: 0.4rem 0.7rem;
	}

	.asvloer__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.6rem;
	}

	.asvloer__gegevens,
	.smeekblad__gegevens {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.asvloer__gegevens dt,
	.smeekblad__gegevens dt {
		padding-top: 0.9rem;
	}

	.trede {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.trede__datum {
		justify-content: flex-start;
	}

	.trede__datum span {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.trede__blok {
		border-left: 0;
		padding-left: 0;
	}

	.kantlijn {
		margin-left: 0;
	}

	.baanrij__knop {
		align-items: flex-start;
		flex-direction: column;
	}

	.oordeel {
		margin-left: 0;
	}

	.geheugenlade__kosten {
		margin-left: 0.4rem;
	}

	.nivelband__as {
		padding: 1rem 0.9rem;
	}

	.smeekblad {
		padding: 1.2rem 1.1rem 1.3rem;
	}

	.uitzicht {
		min-height: auto;
	}

	.uitzicht__binnen {
		padding: 3.2rem 0 2.6rem;
	}
}