/*
Theme Name: Lumeroa
Theme URI: https://lumeroa.org/
Author: Schoenmakerij Lumeroa
Author URI: https://lumeroa.org/
Description: Thema voor Schoenmakerij Lumeroa in Leiden. Donker leerbruin, twee eigen onderdelen: een levensduurmeter die uitrekent of herstellen nog loont, en een voor-en-na met een gordijn over hetzelfde kader. Nederlandstalig, zonder externe bestanden.
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: lumeroa
Tags: schoenmaker, reparatie, donker, eigen-blokken, toegankelijk
*/

/* =========================================================================
   1. Lettertypen
   -------------------------------------------------------------------------
   Alles staat in de map fonts van het thema; er gaat geen aanvraag naar een
   andere server. De licenties liggen ernaast.
   ========================================================================= */

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

@font-face {
	font-family: 'Zilla Slab';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/zilla-slab-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/lora-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/lora-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Kleuren en maten
   -------------------------------------------------------------------------
   De verhoudingen zijn vooraf uitgerekend en staan erbij. Ossenbloed haalt op
   geen enkele achtergrond de 4,5 en is daarom nergens een tekstkleur: het is
   uitsluitend een vulling en een randkleur.
   ========================================================================= */

:root {
	--espresso: #231d1a;    /* achtergrond van de bladzijde */
	--espresso-diep: #1a1512;
	--leerpaneel: #2e2622;  /* panelen en kaarten */
	--rand: #3d332c;
	--wasroom: #efe6d6;     /* hoofdtekst   13,4:1 en 12,0:1 */
	--stof: #9c8f84;        /* bijtekst      5,3:1 en 4,7:1 */
	--diepstof: #7d6c60;    /* 3,3:1: uitsluitend voor zeer grote koppen */
	--klei: #d98f78;        /* accent        6,5:1 en 5,8:1 */
	--klei-diep: #c47a63;
	--messing: #c9a24e;     /* tweede accent 6,9:1 en 6,2:1 */
	--ossenbloed: #8a2f34;  /* alleen vulling en rand */

	--kop: 'Zilla Slab', Georgia, 'Times New Roman', serif;
	--lijf: 'Lora', Georgia, 'Times New Roman', serif;

	--leest-breed: 1180px;
	--leest-nauw: 820px;
	--kier: 22px;
	--ronding: 4px;
}

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

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

/* Een klasse met display wint het van het attribuut hidden. Zonder deze regel
   blijft een dichtgeklapt menu zichtbaar. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* De snijtafel blijft plakken; zonder deze marge komt een anker eronder. */
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

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

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

body {
	margin: 0;
	background: var(--espresso);
	color: var(--wasroom);
	font-family: var(--lijf);
	font-size: 17px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}

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

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

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

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

h1,
h2,
h3,
h4 {
	font-family: var(--kop);
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 16px;
	color: var(--wasroom);
	letter-spacing: -0.005em;
}

h1 {
	font-size: clamp(2.1rem, 5vw, 3.15rem);
}

h2 {
	font-size: clamp(1.62rem, 3.4vw, 2.32rem);
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1.06rem;
}

p {
	margin: 0 0 18px;
}

ul,
ol {
	margin: 0 0 18px;
	padding-left: 21px;
}

li {
	margin-bottom: 8px;
}

blockquote {
	margin: 0;
}

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

code {
	font-family: 'Consolas', 'SFMono-Regular', monospace;
	font-size: 0.92em;
	color: var(--messing);
}

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

.doorstap {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--messing);
	color: var(--espresso);
	padding: 12px 20px;
	font-weight: 600;
	border-radius: 0 0 var(--ronding) 0;
}

.doorstap:focus {
	left: 0;
	color: var(--espresso);
}

/* =========================================================================
   4. Bak en secties
   ========================================================================= */

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

.leest--nauw {
	max-width: var(--leest-nauw);
}

.zool {
	padding: 78px 0;
	position: relative;
}

.zool--paneel {
	background: var(--leerpaneel);
}

.zool--diep {
	background: var(--espresso-diep);
}

.zool--kort {
	padding: 52px 0;
}

.zool__kop {
	max-width: 760px;
	margin-bottom: 40px;
}

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

.zool__kop p {
	color: var(--stof);
	margin-bottom: 0;
}

.inslag {
	display: block;
	font-family: var(--kop);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 12px;
}

.naregel {
	margin: 30px 0 0;
}

/* =========================================================================
   5. De zoomsteek
   -------------------------------------------------------------------------
   Een zadelsteek als scheiding tussen twee secties: paren korte schuine
   streepjes in messing, met een haarlijn erdoorheen. De svg krijgt
   preserveAspectRatio none, anders houdt hij zijn verhouding binnen het vak
   en ontstaan er gaten tussen de herhalingen.
   ========================================================================= */

.zoomsteek {
	display: block;
	width: 100%;
	height: 15px;
	background-color: var(--espresso);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 15' preserveAspectRatio='none'%3E%3Cpath d='M0 7.5h26' stroke='%233d332c' stroke-width='1'/%3E%3Cpath d='M3 11.6L8 3.4M13.5 11.6L18.5 3.4' stroke='%23c9a24e' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 26px 15px;
	background-position: center;
}

.zoomsteek--paneel {
	background-color: var(--leerpaneel);
}

/* =========================================================================
   6. Knoppen en verwijzingen
   ========================================================================= */

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

.priem--steek {
	background: var(--klei);
	color: var(--espresso);
}

.priem--steek:hover,
.priem--steek:focus {
	background: var(--klei-diep);
	color: var(--espresso);
}

.priem--rust {
	background: transparent;
	color: var(--messing);
	border-color: var(--rand);
}

.priem--rust:hover,
.priem--rust:focus {
	border-color: var(--messing);
	color: var(--messing);
	background: rgba(201, 162, 78, 0.08);
}

.priem--kort {
	min-height: 42px;
	padding: 9px 18px;
	font-size: 0.94rem;
}

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

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

.priemrij--na {
	margin-top: 26px;
}

/* Een verwijzing met een pen erachter: het pijltje hoort bij de tekst en niet
   los ernaast, anders is het trefvlak op een telefoon te klein. */
.pen {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	font-family: var(--kop);
	font-weight: 600;
	color: var(--messing);
	text-decoration: none;
	border-bottom: 1px solid var(--rand);
}

.pen::after {
	content: '\2192';
	transition: transform 0.15s ease;
}

.pen:hover,
.pen:focus {
	color: var(--klei);
	border-bottom-color: var(--klei);
}

.pen:hover::after {
	transform: translateX(4px);
}

/* =========================================================================
   7. De snijtafel: de kop van elke bladzijde
   ========================================================================= */

.snijtafel {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(26, 21, 18, 0.96);
	border-bottom: 1px solid var(--rand);
	backdrop-filter: blur(6px);
}

.snijtafel__binnen {
	width: 100%;
	max-width: var(--leest-breed);
	margin: 0 auto;
	padding: 11px 24px;
	display: flex;
	align-items: center;
	gap: 18px;
}

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

.snijtafel__naam {
	display: block;
	font-family: var(--kop);
	font-size: 1.32rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.005em;
}

.snijtafel__naam span {
	color: var(--klei);
}

.snijtafel__onder {
	display: block;
	font-family: var(--lijf);
	font-size: 0.66rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stof);
	margin-top: 2px;
}

.snijtafel__onder span {
	color: var(--stof);
}

.snijtafel__gang {
	margin-left: auto;
}

.veterlijst {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.veterlijst li {
	margin: 0;
}

.veterlijst a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 13px;
	border-radius: var(--ronding);
	font-family: var(--kop);
	font-size: 0.97rem;
	font-weight: 600;
	color: var(--wasroom);
	text-decoration: none;
}

.veterlijst a:hover,
.veterlijst a:focus {
	color: var(--messing);
	background: rgba(201, 162, 78, 0.09);
}

.gespknop {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	color: var(--wasroom);
	font-family: var(--kop);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.gespknop__balken {
	display: block;
	width: 19px;
}

.gespknop__balken i {
	display: block;
	height: 2px;
	background: var(--messing);
	margin: 4px 0;
}

/* De hoofdknop houdt de rechterkant vast. Zou marge-links op de gespknop
   staan, dan valt de kop op 390px in twee regels uiteen. */
.snijtafel .priem {
	margin-left: auto;
	flex-shrink: 0;
}

/* =========================================================================
   8. Het aanslagbeeld boven aan de startpagina
   ========================================================================= */

.aanslag {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--espresso-diep);
}

.aanslag__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.aanslag::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 21, 18, 0.72) 0%, rgba(26, 21, 18, 0.5) 42%, rgba(35, 29, 26, 0.97) 100%);
}

.aanslag__binnen {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--leest-breed);
	margin: 0 auto;
	padding: 96px 24px 58px;
}

.aanslag h1 {
	max-width: 15ch;
}

.aanslag__onder {
	max-width: 60ch;
	font-size: 1.12rem;
	color: var(--wasroom);
	margin-bottom: 30px;
}

.aanslag__punten {
	list-style: none;
	margin: 34px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--rand);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
}

.aanslag__punten li {
	margin: 0;
	color: var(--wasroom);
}

.aanslag__punten b {
	color: var(--messing);
	font-weight: 600;
}

/* De kop van een gewone bladzijde: de leertextuur eronder, gedempt. */
.bladkop {
	position: relative;
	padding: 74px 0 58px;
	background-color: var(--espresso-diep);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.bladkop::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 21, 18, 0.9) 0%, rgba(26, 21, 18, 0.94) 100%);
}

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

.bladkop p {
	max-width: 66ch;
	color: var(--wasroom);
	margin-bottom: 0;
}

/* =========================================================================
   9. Roosters en kaarten
   ========================================================================= */

.rij {
	display: grid;
	gap: var(--kier);
}

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

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

.leerkaart {
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	padding: 26px;
}

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

.leerkaart p {
	color: var(--stof);
}

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

.leerkaart--let {
	border-left: 3px solid var(--ossenbloed);
}

/* De hakkaart: een soort werk, met het beeld erboven. */
.hakkaart {
	display: flex;
	flex-direction: column;
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	overflow: hidden;
}

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

.hakkaart__binnen {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

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

.hakkaart p {
	color: var(--stof);
	margin-bottom: 16px;
}

.hakkaart__vanaf {
	display: block;
	font-family: var(--kop);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--messing);
	margin-bottom: 16px;
}

.hakkaart .pen {
	margin-top: auto;
	align-self: flex-start;
}

/* =========================================================================
   10. De weegschaal: loont het wel of niet
   ========================================================================= */

.weegschaal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kier);
}

.weegschaal__kolom {
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	padding: 30px;
	background: var(--leerpaneel);
}

.weegschaal__kolom--wel {
	border-top: 3px solid var(--messing);
}

.weegschaal__kolom--niet {
	border-top: 3px solid var(--ossenbloed);
}

.weegschaal__kolom h3 {
	font-size: 1.44rem;
	margin-bottom: 8px;
}

.weegschaal__onder {
	color: var(--stof);
	margin-bottom: 24px;
}

.weegschaal__regel {
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid var(--rand);
}

.weegschaal__regel:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.weegschaal__regel h4 {
	margin-bottom: 6px;
	color: var(--wasroom);
}

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

/* =========================================================================
   11. De levensduurmeter
   ========================================================================= */

.levensmeter {
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	overflow: hidden;
}

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

.levensmeter__groep {
	padding: 24px;
	border-right: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

.levensmeter__groep:last-child {
	border-right: 0;
}

.levensmeter__vraag {
	display: block;
	font-family: var(--kop);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 14px;
}

.levensmeter__knop {
	display: block;
	width: 100%;
	min-height: 46px;
	text-align: left;
	padding: 9px 14px;
	margin-bottom: 8px;
	background: transparent;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	color: var(--wasroom);
	font-family: var(--lijf);
	font-size: 0.97rem;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

.levensmeter__knop b {
	display: block;
	font-family: var(--kop);
	font-weight: 600;
}

.levensmeter__knop small {
	display: block;
	font-size: 0.83rem;
	color: var(--stof);
}

.levensmeter__knop:hover {
	border-color: var(--messing);
}

.levensmeter__knop[aria-pressed="true"] {
	background: rgba(217, 143, 120, 0.13);
	border-color: var(--klei);
}

.levensmeter__knop[aria-pressed="true"] b {
	color: var(--klei);
}

.levensmeter__uitslag {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.levensmeter__vak {
	padding: 26px;
	border-right: 1px solid var(--rand);
}

/* De rechterkolom is bijna twee keer zo hoog als de linker. Zonder deze regel
   plakt het aantal maanden bovenin en staat er een halve kolom leeg onder. */
.levensmeter__vak--tijd {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.levensmeter__vak:last-child {
	border-right: 0;
}

.levensmeter__label {
	display: block;
	font-family: var(--kop);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stof);
	margin-bottom: 10px;
}

.levensmeter__maanden {
	display: block;
	font-family: var(--kop);
	font-size: clamp(2.6rem, 6vw, 3.6rem);
	font-weight: 600;
	line-height: 1;
	color: var(--messing);
}

.levensmeter__eenheid {
	display: block;
	color: var(--stof);
	margin-bottom: 18px;
}

/* Een span met alleen een hoogte tekent niets: de goot en de vulling staan
   daarom allebei op display block met een vaste hoogte. */
.levensmeter__goot {
	display: block;
	width: 100%;
	height: 12px;
	background: var(--espresso-diep);
	border: 1px solid var(--rand);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}

.levensmeter__balk {
	display: block;
	height: 100%;
	background: var(--klei);
	transition: width 0.3s ease;
}

.levensmeter__schaal {
	display: flex;
	justify-content: space-between;
	font-size: 0.82rem;
	color: var(--stof);
	margin-bottom: 0;
}

.levensmeter__werk {
	font-family: var(--kop);
	font-size: 1.16rem;
	font-weight: 600;
	color: var(--wasroom);
	margin-bottom: 16px;
}

.levensmeter__som {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border-top: 1px solid var(--rand);
}

.levensmeter__som li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--rand);
	font-size: 0.97rem;
}

.levensmeter__som span:first-child {
	color: var(--stof);
}

.levensmeter__som span:last-child {
	font-family: var(--kop);
	font-weight: 600;
	color: var(--wasroom);
	text-align: right;
}

.levensmeter__oordeel {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 14px;
	border-radius: var(--ronding);
	font-family: var(--kop);
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 12px;
}

.levensmeter__oordeel--loont {
	background: rgba(201, 162, 78, 0.16);
	border: 1px solid var(--messing);
	color: var(--messing);
}

.levensmeter__oordeel--twijfel {
	background: rgba(217, 143, 120, 0.14);
	border: 1px solid var(--klei);
	color: var(--klei);
}

/* Ossenbloed als vulling met wasroom erop haalt 6,7:1; als tekstkleur zou het
   2,0:1 zijn en dat staat hier daarom nergens. */
.levensmeter__oordeel--niet {
	background: var(--ossenbloed);
	border: 1px solid var(--ossenbloed);
	color: var(--wasroom);
}

.levensmeter__advies {
	color: var(--wasroom);
	margin-bottom: 12px;
}

.levensmeter__let {
	color: var(--stof);
	font-size: 0.95rem;
	margin-bottom: 0;
}

.levensmeter__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 26px;
	border-top: 1px solid var(--rand);
}

.levensmeter__voet p {
	margin: 0;
	color: var(--stof);
	font-size: 0.93rem;
	max-width: 46ch;
}

/* =========================================================================
   12. Het gordijn van de voor-en-na
   ========================================================================= */

.gordijn {
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	overflow: hidden;
}

.gordijn__raam {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--espresso-diep);
}

.gordijn__laag {
	position: absolute;
	inset: 0;
}

.gordijn__laag img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zonder javascript ligt de bovenste laag er gewoon overheen; dan staan de
   twee kaders eronder los naast elkaar. */
.js .gordijn__laag--na {
	clip-path: inset(0 0 0 50%);
}

.gordijn__merk {
	position: absolute;
	bottom: 14px;
	padding: 5px 12px;
	background: rgba(26, 21, 18, 0.88);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	font-family: var(--kop);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wasroom);
}

.gordijn__merk--voor {
	left: 14px;
}

.gordijn__merk--na {
	right: 14px;
}

.gordijn__naad {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: var(--messing);
	pointer-events: none;
}

.gordijn__naad::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: var(--messing);
	box-shadow: 0 0 0 4px rgba(26, 21, 18, 0.55);
}

/* De schuif is een echte invoer, zodat hij het met het toetsenbord ook doet.
   De duim is met opzet groot: alles onder 36 px is op een telefoon te klein. */
.gordijn__schuif {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
}

.gordijn__schuif::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
}

.gordijn__schuif::-moz-range-track {
	height: 100%;
	background: transparent;
}

.gordijn__schuif::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

.gordijn__schuif::-moz-range-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

.gordijn__schuif:focus-visible {
	outline: 3px solid var(--messing);
	outline-offset: -3px;
}

.gordijn__uitleg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gordijn__helft {
	padding: 24px 26px;
	border-right: 1px solid var(--rand);
	border-top: 1px solid var(--rand);
}

.gordijn__helft:last-child {
	border-right: 0;
}

.gordijn__helft h3 {
	font-size: 1.08rem;
	margin-bottom: 8px;
}

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

.gordijn__bon {
	list-style: none;
	margin: 0;
	padding: 20px 26px;
	border-top: 1px solid var(--rand);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.gordijn__bon li {
	margin: 0;
}

.gordijn__bon span {
	display: block;
}

.gordijn__bon span:first-child {
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stof);
	margin-bottom: 3px;
}

.gordijn__bon span:last-child {
	font-family: var(--kop);
	font-weight: 600;
	color: var(--wasroom);
}

/* =========================================================================
   13. Het hangbriefje: de vorm waarin een ervaring hier staat
   -------------------------------------------------------------------------
   Een kartonnen label met een punt aan de bovenkant, een gaatje en een lus
   touw eroverheen. De rand komt van een tweede vlak eronder, want een border
   wordt door clip-path gewoon meegesneden.
   ========================================================================= */

.briefrij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 26px;
	margin-top: 34px;
}

.hangbriefje {
	position: relative;
	margin: 26px 0 0;
	padding: 1px;
	background: var(--rand);
	clip-path: polygon(50% 0, 100% 20px, 100% 100%, 0 100%, 0 20px);
}

.hangbriefje__blad {
	position: relative;
	background: var(--leerpaneel);
	clip-path: polygon(50% 0, 100% 20px, 100% 100%, 0 100%, 0 20px);
	padding: 58px 24px 24px;
	height: 100%;
}

.hangbriefje::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -20px;
	width: 52px;
	height: 62px;
	margin-left: -26px;
	z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 62'%3E%3Cpath d='M26 46C8 32 12 6 26 6c14 0 18 26 0 40z' fill='none' stroke='%239c8f84' stroke-width='2.6'/%3E%3Ccircle cx='26' cy='48' r='7' fill='%231a1512'/%3E%3Ccircle cx='26' cy='48' r='7' fill='none' stroke='%233d332c' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hangbriefje__werk {
	display: block;
	font-family: var(--kop);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--messing);
	text-align: center;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px dashed var(--rand);
}

.hangbriefje__tekst {
	color: var(--wasroom);
	font-size: 0.98rem;
	margin: 0 0 18px;
}

.hangbriefje__onder {
	padding-top: 14px;
	border-top: 1px dashed var(--rand);
}

.hangbriefje__naam {
	display: block;
	font-family: var(--kop);
	font-weight: 600;
	color: var(--klei);
}

.hangbriefje__draagt {
	display: block;
	font-size: 0.88rem;
	color: var(--stof);
}

/* =========================================================================
   14. Tabellen
   ========================================================================= */

.rolbak {
	overflow-x: auto;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	background: var(--leerpaneel);
}

.garantietafel {
	min-width: 640px;
	font-size: 0.97rem;
}

.garantietafel caption {
	caption-side: bottom;
	padding: 14px 20px;
	text-align: left;
	color: var(--stof);
	font-size: 0.9rem;
	border-top: 1px solid var(--rand);
}

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

.garantietafel thead th {
	font-family: var(--kop);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--messing);
	background: var(--espresso-diep);
	white-space: nowrap;
}

.garantierij th {
	font-family: var(--kop);
	font-weight: 600;
	color: var(--wasroom);
}

.garantierij td {
	color: var(--stof);
}

.garantietafel__termijn {
	white-space: nowrap;
	color: var(--wasroom);
}

.garantietafel__bedrag {
	white-space: nowrap;
	font-family: var(--kop);
	font-weight: 600;
	color: var(--messing);
	text-align: right;
}

.garantiegroep {
	margin-bottom: 40px;
}

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

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

.garantiegroep__uitleg {
	color: var(--stof);
	margin-bottom: 18px;
	max-width: 74ch;
}

/* =========================================================================
   15. Tellers, makers, vouwlijst
   ========================================================================= */

.tellerij {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kier);
}

.tellerij__vak {
	padding: 24px;
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-left: 3px solid var(--messing);
	border-radius: var(--ronding);
}

.tellerij__getal {
	display: block;
	font-family: var(--kop);
	font-size: 2.9rem;
	font-weight: 600;
	line-height: 1;
	color: var(--klei);
}

.tellerij__naam {
	display: block;
	font-family: var(--kop);
	font-weight: 600;
	color: var(--wasroom);
	margin: 8px 0 8px;
}

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

.makerrij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kier);
}

.maker {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	gap: 22px;
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	padding: 22px;
}

.maker__beeld {
	width: 172px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ronding);
}

.maker__rol {
	display: block;
	font-size: 0.79rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 5px;
}

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

.maker p {
	color: var(--stof);
	font-size: 0.96rem;
}

.maker__zin {
	color: var(--wasroom);
	border-left: 2px solid var(--klei);
	padding-left: 14px;
	margin-bottom: 0;
}

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

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

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

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

.vouwpunt summary::after {
	content: '+';
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rand);
	border-radius: 50%;
	color: var(--messing);
	font-size: 1.2rem;
	line-height: 1;
}

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

.vouwpunt summary:hover {
	color: var(--messing);
}

.vouwpunt__antwoord {
	padding-bottom: 18px;
	max-width: 76ch;
}

.vouwpunt__antwoord p {
	color: var(--stof);
	margin-bottom: 0;
}

/* =========================================================================
   16. Journaal: paren voor en na
   ========================================================================= */

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

.parkaart {
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	overflow: hidden;
}

.parkaart--kop {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.parkaart__beeld {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

.parkaart__binnen {
	padding: 30px;
}

.parkaart h2,
.parkaart h3 {
	margin-bottom: 10px;
}

.parkaart h2 a,
.parkaart h3 a {
	color: var(--wasroom);
	text-decoration: none;
}

.parkaart h2 a:hover,
.parkaart h3 a:hover,
.parkaart h2 a:focus,
.parkaart h3 a:focus {
	color: var(--messing);
}

.parkaart p {
	color: var(--stof);
}

.parkaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 0.86rem;
	color: var(--stof);
	padding-top: 14px;
	border-top: 1px solid var(--rand);
}

.parkaart__nummer {
	display: inline-block;
	font-family: var(--kop);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 10px;
}

/* De twee kaders boven een stuk: zoals het binnenkwam en zoals het wegging. */
.parpaneel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kier);
	margin-bottom: 34px;
}

.parpaneel__helft {
	padding: 24px;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	background: var(--leerpaneel);
}

.parpaneel__helft--voor {
	border-top: 3px solid var(--ossenbloed);
}

.parpaneel__helft--na {
	border-top: 3px solid var(--messing);
}

.parpaneel__label {
	display: block;
	font-family: var(--kop);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 10px;
}

.parpaneel__helft p {
	color: var(--wasroom);
	margin-bottom: 0;
	font-size: 0.98rem;
}

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

.stukmeta li {
	margin: 0;
}

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

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

.stukinhoud p:first-of-type {
	font-size: 1.15rem;
}

/* De doorbladering staat er voor als er ooit meer dan een bladzijde met
   paren komt; met vier stukken tekent WordPress hem niet. */
.pagination {
	margin-top: 36px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	color: var(--wasroom);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--klei);
	color: var(--espresso);
	border-color: var(--klei);
}

/* =========================================================================
   17. Tekstbladzijden en losse blokken
   ========================================================================= */

.tekstblok {
	max-width: 76ch;
}

.tekstblok h2 {
	margin-top: 40px;
}

.tekstblok h3 {
	margin-top: 28px;
}

.tekstblok p,
.tekstblok li {
	color: var(--wasroom);
}

.tekstblok dl {
	margin: 0 0 22px;
	padding: 20px 22px;
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
}

.tekstblok dt {
	font-family: var(--kop);
	font-weight: 600;
	color: var(--messing);
	margin-top: 12px;
}

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

.tekstblok dd {
	margin: 2px 0 0;
	color: var(--wasroom);
}

/* Een mail- of telefoonverwijzing in een lopende tekst is anders 18 px hoog
   en dat is op een telefoon geen trefvlak. */
.tekstblok a[href^="mailto:"],
.tekstblok a[href^="tel:"],
.tekstblok dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

.koppelstuk {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px;
	align-items: center;
}

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

.koppelstuk h3 {
	margin-top: 24px;
}

.koppelstuk h3:first-of-type {
	margin-top: 0;
}

.koppelstuk p {
	color: var(--stof);
}

.slotkolom {
	max-width: 620px;
}

.slotkolom p {
	color: var(--wasroom);
}

/* =========================================================================
   18. Formulieren
   ========================================================================= */

.werkbriefje {
	background: var(--leerpaneel);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	padding: 28px;
	max-width: 720px;
}

.veldrij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.veld {
	margin-bottom: 18px;
}

.veld__naam {
	display: block;
	font-family: var(--kop);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wasroom);
	margin-bottom: 7px;
}

.veld input[type="text"],
.veld input[type="email"],
.veld select,
.veld textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	background: var(--espresso);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	color: var(--wasroom);
	font-family: var(--lijf);
	font-size: 1rem;
	line-height: 1.5;
}

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

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
	border-color: var(--messing);
	outline: 2px solid var(--messing);
	outline-offset: 0;
}

.veld__hulp {
	display: block;
	font-size: 0.87rem;
	color: var(--stof);
	margin-top: 6px;
}

/* Het veld dat mensen niet zien en robots wel invullen. */
.kruimel {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mededeling {
	padding: 16px 20px;
	margin-bottom: 26px;
	background: rgba(201, 162, 78, 0.12);
	border: 1px solid var(--messing);
	border-radius: var(--ronding);
}

.mededeling p {
	margin: 0;
	color: var(--wasroom);
}

.mededeling--fout {
	background: rgba(138, 47, 52, 0.28);
	border-color: var(--ossenbloed);
}

/* =========================================================================
   19. De pekdraad: de voet van elke bladzijde
   ========================================================================= */

.pekdraad {
	background: var(--espresso-diep);
	border-top: 1px solid var(--rand);
	padding: 56px 0 28px;
}

.pekdraad__raster {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: 34px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--rand);
}

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

.pekdraad__over {
	color: var(--stof);
	font-size: 0.94rem;
	margin: 0;
	max-width: 42ch;
}

.pekdraad h2 {
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 14px;
}

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

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

.pekdraad ul a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--wasroom);
	text-decoration: none;
	font-size: 0.95rem;
}

.pekdraad ul a:hover,
.pekdraad ul a:focus {
	color: var(--messing);
	text-decoration: underline;
}

.pekdraad__gegevens {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 30px;
	margin: 26px 0 0;
	padding: 0;
	font-size: 0.92rem;
	color: var(--stof);
}

.pekdraad__gegevens li {
	margin: 0;
}

.pekdraad__gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--klei);
}

.pekdraad__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 30px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--rand);
	font-size: 0.87rem;
	color: var(--stof);
}

.pekdraad__slot p {
	margin: 0;
}

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

.koekstrook {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	background: rgba(26, 21, 18, 0.98);
	border-top: 1px solid var(--messing);
	padding: 16px 0;
}

.koekstrook__binnen {
	width: 100%;
	max-width: var(--leest-breed);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	justify-content: space-between;
}

.koekstrook p {
	margin: 0;
	max-width: 70ch;
	font-size: 0.93rem;
	color: var(--wasroom);
}

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

/* =========================================================================
   21. Bladzijde niet gevonden
   ========================================================================= */

.zoekgeraakt {
	padding: 104px 0;
	text-align: center;
}

/* Het getal is minstens 64 px, dus de grens is 3:1 en niet 4,5:1. Met de
   randkleur erin bleef er 1,35:1 over en dat was gewoon onleesbaar. */
.zoekgeraakt__getal {
	display: block;
	font-family: var(--kop);
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 600;
	line-height: 1;
	color: var(--diepstof);
}

.zoekgeraakt p {
	max-width: 54ch;
	margin-left: auto;
	margin-right: auto;
	color: var(--stof);
}

.zoekgeraakt .priemrij {
	justify-content: center;
}

/* =========================================================================
   22. Opkomen bij het scrollen
   ========================================================================= */

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

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

/* =========================================================================
   23. Smallere schermen
   ========================================================================= */

@media (max-width: 1040px) {
	.pekdraad__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

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

@media (max-width: 900px) {
	.gespknop {
		display: inline-flex;
	}

	.snijtafel__binnen {
		flex-wrap: wrap;
	}

	.snijtafel__gang {
		order: 3;
		width: 100%;
		margin-left: 0;
		padding-top: 10px;
		border-top: 1px solid var(--rand);
	}

	.veterlijst {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.veterlijst a {
		min-height: 46px;
		padding: 10px 12px;
	}

	.rij--drie,
	.briefrij {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.levensmeter__groep {
		border-right: 0;
	}

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

	.levensmeter__vak {
		border-right: 0;
		border-bottom: 1px solid var(--rand);
	}

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

	.koppelstuk {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.koppelstuk--gedraaid .koppelstuk__beeld {
		order: 2;
	}

	.parkaart--kop {
		grid-template-columns: minmax(0, 1fr);
	}

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

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

	.zool {
		padding: 54px 0;
	}

	.zool--kort {
		padding: 40px 0;
	}

	.aanslag {
		min-height: 480px;
	}

	.aanslag__binnen {
		padding: 82px 20px 44px;
	}

	.leest {
		padding: 0 20px;
	}

	.rij--twee,
	.rij--drie,
	.briefrij,
	.tellerij,
	.veldrij,
	.parpaneel,
	.gordijn__uitleg {
		grid-template-columns: minmax(0, 1fr);
	}

	.gordijn__helft {
		border-right: 0;
	}

	.gordijn__bon {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

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

	.maker__beeld {
		width: 100%;
		max-width: 220px;
		aspect-ratio: 4 / 5;
	}

	.pekdraad__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.priemrij .priem {
		width: 100%;
	}

	.koekstrook__knoppen {
		width: 100%;
	}

	.koekstrook__knoppen .priem {
		flex: 1 1 auto;
	}

	/* Een brede tabel duwt de bladzijde anders uit elkaar; de kolommen mogen
	   hier wel afbreken. */
	.garantietafel {
		min-width: 520px;
	}

	.garantietafel thead th,
	.garantietafel__termijn,
	.garantietafel__bedrag {
		white-space: normal;
	}

	.garantietafel th,
	.garantietafel td {
		padding: 11px 14px;
	}

	.werkbriefje {
		padding: 22px;
	}

	.snijtafel__onder {
		display: none;
	}

	.zoekgeraakt {
		padding: 72px 0;
	}
}

/* Op 390px moeten merk, hoofdknop en gespknop samen op een regel passen.
   Passen ze niet, dan valt de kop in twee regels uiteen en wordt hij 114px
   hoog; alles hieronder is er om dat te voorkomen. */
@media (max-width: 430px) {
	.snijtafel__binnen {
		padding: 9px 16px;
		gap: 8px;
	}

	.snijtafel__merk {
		gap: 8px;
	}

	.snijtafel__merk svg {
		width: 28px;
		height: 28px;
	}

	.snijtafel__naam {
		font-size: 1.05rem;
	}

	.snijtafel .priem--kort {
		padding: 8px 11px;
		font-size: 0.84rem;
	}

	.gespknop__woord {
		display: none;
	}

	.gespknop {
		padding: 8px 11px;
	}
}

/* =========================================================================
   24. Afdrukken
   ========================================================================= */

@media print {
	.snijtafel,
	.koekstrook,
	.gespknop,
	.zoomsteek {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}