/*
Theme Name: Nexovita
Theme URI: https://nexovita.org/
Author: Nexovita
Author URI: https://nexovita.org/
Description: Donker thema voor een fietswerkplaats die eerst de oorzaak noemt en pas daarna de prijs. Met een eigen klachtwijzer over symptoom en fietssoort en een spoor van vijf reparatie-etappes, alle lettertypen in het thema zelf, geen verzoeken naar buiten.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nexovita
Tags: fiets, reparatie, werkplaats, donker, nederlands
*/

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

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

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

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

/* =========================================================================
   2. Kleuren en maten
   -------------------------------------------------------------------------
   De verhoudingen zijn uitgerekend voordat er iets verf kreeg. Op de
   werkplaatskleur haalt kalk 13,4, limoen 10,0, staal 6,5 en rood 5,3. Op de
   bank van de panelen respectievelijk 11,7, 8,8, 5,7 en 4,6. Rand en bank zijn
   vlakken en dragen nooit tekst.
   ========================================================================= */

:root {
	--werkplaats: #1d2124;
	--put: #15181a;
	--bank: #262c30;
	--rand: #383f45;
	--kalk: #e6eaec;
	--limoen: #b8d92a;
	--limoen-diep: #a2c114;
	--staal: #9aa6ad;
	--rood: #e8705a;

	--kop: 'Chivo', 'Segoe UI', Tahoma, sans-serif;
	--tekst: 'Asap', 'Segoe UI', system-ui, sans-serif;

	--breed: 1200px;
	--rekhoogte: 74px;
}

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

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

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

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

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

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

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

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

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

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

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

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

h3 {
	font-size: 1.24rem;
}

h4 {
	font-size: 1.05rem;
}

p {
	margin: 0 0 1.1em;
}

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

li {
	margin-bottom: 0.4em;
}

strong,
b {
	font-weight: 600;
}

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

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

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

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

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

.doorsteek:focus {
	top: 0;
}

/* =========================================================================
   4. Werkbrug en stellingen
   ========================================================================= */

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

.werkbrug--nauw {
	max-width: 820px;
}

.stelling {
	padding: 74px 0;
	position: relative;
}

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

.stelling--paneel {
	background: var(--bank);
}

.stelling--diep {
	background: var(--put);
}

.stelling__kop {
	max-width: 740px;
	margin-bottom: 38px;
}

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

.stelling__kop p {
	color: var(--staal);
	font-size: 1.05rem;
	margin-bottom: 0;
}

/* Het bovenschrift: kort, wijd uit elkaar, in limoen. */
.opdruk {
	display: block;
	font-family: var(--tekst);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--limoen);
	margin-bottom: 13px;
}

/* =========================================================================
   5. Tandkrans: het scheidingsteken van deze site
   -------------------------------------------------------------------------
   Driehoekige tanden van ongelijke hoogte, als de rand van een cassettester,
   met een limoenlijn over de toppen. Het is een span, dus display: block is
   nodig; zonder die regel doet de hoogte niets.
   ========================================================================= */

.tandkrans {
	display: block;
	height: 28px;
	width: 100%;
	border: 0;
	margin: 0;
	background-color: var(--werkplaats);
	background-repeat: repeat-x;
	background-position: center;
	/* Breder dan de tekening zelf: op 96px werden het tachtig tandjes over een
	   scherm en las de rand als een zaagblad in plaats van als een cassette.
	   preserveAspectRatio moet daarbij op none: anders schaalt de svg zichzelf
	   gelijkmatig binnen het vak, blijft hij 96px breed en staan er gaten
	   tussen de tandenrijen. */
	background-size: 168px 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28' viewBox='0 0 96 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V19l8-13 8 13 8-8 8 8 8-17 8 17 8-5 8 5 8-15 8 15 8-10 8 10v9z' fill='%23383f45'/%3E%3Cpath d='M0 19l8-13 8 13 8-8 8 8 8-17 8 17 8-5 8 5 8-15 8 15 8-10 8 10' fill='none' stroke='%23b8d92a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tandkrans--paneel {
	background-color: var(--bank);
}

.tandkrans--hoog {
	height: 38px;
	background-size: 224px 38px;
}

/* =========================================================================
   6. Sleutels: de knoppen
   ========================================================================= */

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

.sleutel--vast {
	background: var(--limoen);
	color: var(--werkplaats);
}

.sleutel--vast:hover {
	background: var(--limoen-diep);
	color: var(--werkplaats);
}

.sleutel--los {
	background: transparent;
	color: var(--limoen);
	border-color: var(--rand);
}

.sleutel--los:hover {
	background: var(--limoen);
	color: var(--werkplaats);
	border-color: var(--limoen);
}

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

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

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

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

.naregel {
	margin: 26px 0 0;
}

/* De spaak: een verwijzing met een pijl, hoog genoeg voor een vinger. */
.spaak {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--limoen);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
}

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

.spaak:hover {
	gap: 13px;
}

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

.gereedschapsrek {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(21, 24, 26, 0.97);
	backdrop-filter: blur(7px);
	border-bottom: 1px solid var(--rand);
}

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

/* Het merk is een verwijzing, dus het hoort onder een vinger te passen ook als
   de ondertitel op smalle schermen wegvalt. */
.gereedschapsrek__merk {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 46px;
	text-decoration: none;
	color: var(--kalk);
	flex-shrink: 0;
}

.gereedschapsrek__naam {
	display: block;
	font-family: var(--kop);
	font-size: 1.36rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.gereedschapsrek__naam span {
	color: var(--limoen);
}

.gereedschapsrek__onder {
	display: block;
	font-family: var(--tekst);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--staal);
	margin-top: 3px;
}

.gereedschapsrek__gang {
	margin-left: auto;
}

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

.rijlijst li {
	margin: 0;
}

.rijlijst a {
	display: block;
	padding: 9px 11px;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--kalk);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.rijlijst a:hover {
	color: var(--limoen);
	border-bottom-color: var(--limoen);
}

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

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

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

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

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

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

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

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

.oliebak__over {
	color: var(--staal);
	font-size: 0.95rem;
	max-width: 36ch;
	margin-bottom: 0;
}

.oliebak h2 {
	font-family: var(--tekst);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--limoen);
	margin-bottom: 14px;
}

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

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

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

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

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

.oliebak__gegevens li {
	margin: 0;
}

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

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

.oliebak__slot p {
	margin: 0;
}

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

/* De onderdeelkaart: een soort werk dat wij doen. */
.onderdeelkaart {
	display: flex;
	flex-direction: column;
	background: var(--bank);
	border: 1px solid var(--rand);
	border-radius: 4px;
	overflow: hidden;
	height: 100%;
}

.stelling--paneel .onderdeelkaart {
	background: var(--werkplaats);
}

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

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

.onderdeelkaart h3 {
	margin-bottom: 8px;
}

.onderdeelkaart p {
	color: var(--staal);
	font-size: 0.96rem;
}

/* De prijs staat hier onder de tekst en niet erboven, vlak voor de pijl. */
.onderdeelkaart__vanaf {
	display: block;
	font-family: var(--kop);
	font-size: 1.02rem;
	color: var(--limoen);
	margin: 4px 0 14px;
}

.onderdeelkaart .spaak {
	margin-top: auto;
}

/* De raadkaart: een korte tip of waarschuwing naast een tekst. */
.raadkaart {
	background: var(--bank);
	border: 1px solid var(--rand);
	border-left: 4px solid var(--limoen);
	border-radius: 4px;
	padding: 20px 22px;
	font-size: 0.95rem;
}

.raadkaart--let {
	border-left-color: var(--rood);
}

.raadkaart h4 {
	margin-bottom: 6px;
	color: var(--limoen);
}

.raadkaart--let h4 {
	color: var(--rood);
}

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

/* =========================================================================
   10. Rekken en koppelstukken
   ========================================================================= */

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

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

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

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

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

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

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

/* =========================================================================
   11. Kopstuk op de startpagina
   -------------------------------------------------------------------------
   De tekst staat naast de foto en niet erover: een sluier die zwaar genoeg is
   om leesbaar te blijven, dooft ook de werkplaats op de foto.
   ========================================================================= */

.kopstuk {
	position: relative;
	min-height: 600px;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	background: var(--put);
	overflow: hidden;
	border-bottom: 1px solid var(--rand);
}

.kopstuk__foto {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.kopstuk__binnen {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Links uitlijnen met de werkbrug, ook op een breed venster. */
	padding: 74px 54px 74px max(22px, calc((100vw - var(--breed)) / 2));
	background: var(--werkplaats);
	color: var(--kalk);
}

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

.kopstuk__onder {
	max-width: 52ch;
	font-size: 1.1rem;
	color: var(--kalk);
	margin-bottom: 28px;
}

.kopstuk .opdruk {
	display: inline-block;
	/* In een flexkolom rekt een inline-block anders tot de volle breedte uit. */
	align-self: flex-start;
	background: var(--limoen);
	color: var(--werkplaats);
	padding: 6px 13px;
	border-radius: 3px;
	margin-bottom: 18px;
}

.kopstuk__punten {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--rand);
	list-style: none;
	font-size: 0.94rem;
	color: var(--kalk);
}

.kopstuk__punten li {
	margin: 0;
}

.kopstuk__punten b {
	color: var(--limoen);
}

/* Kop van de binnenbladzijden, met de staaltextuur erachter. */
.blikvanger {
	position: relative;
	padding: 66px 0 56px;
	background-color: var(--put);
	background-image: linear-gradient(rgba(21, 24, 26, 0.88), rgba(21, 24, 26, 0.94)), url('images/staaltextuur.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.blikvanger h1 {
	max-width: 25ch;
	margin-bottom: 14px;
}

.blikvanger__onder {
	max-width: 60ch;
	font-size: 1.07rem;
	color: var(--staal);
	margin-bottom: 0;
}

/* =========================================================================
   12. Klachtwijzer: de matrix symptoom bij fietssoort
   ========================================================================= */

.klachtwijzer {
	background: var(--bank);
	border: 1px solid var(--rand);
	border-radius: 4px;
	overflow: hidden;
}

.klachtwijzer__rooster {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--rand);
	background: var(--put);
}

.klachtwijzer__tafel {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
}

.klachtwijzer__tafel th,
.klachtwijzer__tafel td {
	padding: 0;
	border: 1px solid var(--rand);
	vertical-align: middle;
}

.klachtwijzer__hoek {
	width: 210px;
	padding: 12px 14px !important;
	font-family: var(--tekst);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--staal);
	text-align: left;
}

.klachtwijzer__soort {
	padding: 12px 10px !important;
	font-family: var(--tekst);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--kalk);
	text-align: center;
	background: var(--bank);
}

.klachtwijzer__symptoom {
	padding: 12px 14px !important;
	font-family: var(--tekst);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--kalk);
	text-align: left;
	background: var(--bank);
}

/* Elke cel is een knop over de hele cel, anders is de trefkans op een telefoon
   een paar pixels in het midden. */
.klachtwijzer__cel {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 8px;
	background: transparent;
	border: 0;
	font-family: var(--tekst);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--staal);
	cursor: pointer;
	transition: background 0.14s, color 0.14s;
}

.klachtwijzer__cel:hover {
	background: rgba(184, 217, 42, 0.14);
	color: var(--kalk);
}

.klachtwijzer__cel[aria-pressed='true'] {
	background: var(--limoen);
	color: var(--werkplaats);
}

.klachtwijzer__uitslag {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 0;
}

.klachtwijzer__vak {
	padding: 26px 24px 28px;
}

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

.klachtwijzer__label {
	display: block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--limoen);
	margin-bottom: 10px;
}

.klachtwijzer__oorzaak {
	font-family: var(--kop);
	font-size: 1.5rem;
	line-height: 1.18;
	color: var(--kalk);
	margin-bottom: 14px;
}

.klachtwijzer__uitleg {
	color: var(--staal);
	font-size: 0.98rem;
	margin-bottom: 0;
}

.klachtwijzer__vork {
	font-family: var(--kop);
	font-size: 1.7rem;
	color: var(--limoen);
	margin-bottom: 4px;
}

.klachtwijzer__tijd {
	font-size: 0.98rem;
	color: var(--kalk);
	margin-bottom: 16px;
}

.klachtwijzer__let {
	font-size: 0.94rem;
	color: var(--rood);
	margin-bottom: 0;
}

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

.klachtwijzer__voet p {
	margin: 0;
	font-size: 0.91rem;
	color: var(--staal);
	max-width: 60ch;
}

/* =========================================================================
   13. Reparatiespoor: de vijf etappes
   ========================================================================= */

.spoor {
	background: var(--bank);
	border: 1px solid var(--rand);
	border-radius: 4px;
	overflow: hidden;
}

.spoor__baan {
	position: relative;
	/* Een vaste goot: een vulling van honderd procent is dan precies deze
	   hoogte. Een verhouding binnen een flexrij zou met de labels om de ruimte
	   vechten en niet meer kloppen met de etappe eronder. */
	height: 10px;
	margin: 0;
	background: var(--rand);
}

.spoor__vulling {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--limoen);
	transition: width 0.25s ease;
}

.spoor__etappes {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-bottom: 1px solid var(--rand);
	background: var(--put);
}

.spoor__knop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	min-height: 92px;
	padding: 16px 14px 18px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--rand);
	font-family: var(--tekst);
	text-align: left;
	cursor: pointer;
	transition: background 0.14s;
}

.spoor__knop:first-child {
	border-left: 0;
}

.spoor__knop:hover {
	background: rgba(184, 217, 42, 0.1);
}

.spoor__stip {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--werkplaats);
	border: 2px solid var(--rand);
}

.spoor__knop[aria-pressed='true'] .spoor__stip,
.spoor__knop--gehaald .spoor__stip {
	background: var(--limoen);
	border-color: var(--limoen);
}

.spoor__nummer {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--staal);
}

.spoor__naam {
	display: block;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--kalk);
	line-height: 1.25;
}

.spoor__knop[aria-pressed='true'] .spoor__naam {
	color: var(--limoen);
}

.spoor__uitslag {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 0;
}

.spoor__vak {
	padding: 26px 24px 28px;
}

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

.spoor__label {
	display: block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--limoen);
	margin-bottom: 10px;
}

.spoor__kop {
	font-family: var(--kop);
	font-size: 1.42rem;
	color: var(--kalk);
	margin-bottom: 12px;
}

.spoor__uitleg {
	color: var(--staal);
	font-size: 0.98rem;
	margin-bottom: 0;
}

.spoor__duur {
	font-family: var(--kop);
	font-size: 1.45rem;
	color: var(--limoen);
	margin-bottom: 14px;
}

.spoor__jij {
	font-size: 0.96rem;
	color: var(--kalk);
	margin-bottom: 0;
}

/* =========================================================================
   14. Meters: de getallen
   ========================================================================= */

.meterrij {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--rand);
	border-radius: 4px;
	background: var(--bank);
	overflow: hidden;
}

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

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

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

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

/* De uitleg staat hier onder het getal; op Over ons staat hij erboven. */
.meterrij__uitleg {
	font-size: 0.92rem;
	color: var(--staal);
	margin: 12px 0 0;
}

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

/* =========================================================================
   15. Bonkaart: het werkbonnetje van een klant
   -------------------------------------------------------------------------
   Een strookje met een geperforeerde linkerrand en twee gaten, alsof het van
   een blok is gescheurd.
   ========================================================================= */

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

.bonkaart {
	position: relative;
	background: var(--bank);
	border: 1px solid var(--rand);
	border-left: 0;
	border-radius: 0 4px 4px 0;
	padding: 24px 26px 26px 40px;
}

/* De perforatie: een strook met twee geringde gaten en een streepjeslijn waar
   het bonnetje van het blok is gescheurd. De streepjeslijn staat een paar
   pixels van de rand af; tegen de rand aan viel hij samen met de kaderlijn en
   was er niets van te zien. */
.bonkaart::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	background-color: var(--put);
	background-image:
		radial-gradient(circle at 11px 34px, var(--werkplaats) 0 5px, var(--rand) 5px 6.5px, rgba(0, 0, 0, 0) 6.5px),
		radial-gradient(circle at 11px calc(100% - 34px), var(--werkplaats) 0 5px, var(--rand) 5px 6.5px, rgba(0, 0, 0, 0) 6.5px),
		repeating-linear-gradient(to bottom, var(--rand) 0 7px, rgba(0, 0, 0, 0) 7px 14px);
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-position: 0 0, 0 0, 20px 0;
	background-size: 100% 100%, 100% 100%, 2px 14px;
	border-radius: 4px 0 0 4px;
}

.bonkaart__nummer {
	display: block;
	font-family: var(--kop);
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	color: var(--limoen);
	margin-bottom: 12px;
}

/* Het is een blockquote, dus de citaatbalk en de inspringing van de grondslag
   moeten hier weg: op een bonnetje staat geen streep. */
.bonkaart__tekst {
	font-size: 1.02rem;
	line-height: 1.55;
	border-left: 0;
	padding-left: 0;
	margin: 0 0 16px;
	color: var(--kalk);
}

.bonkaart__onder {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding-top: 12px;
	border-top: 1px dashed var(--rand);
	font-size: 0.89rem;
}

.bonkaart__naam {
	font-weight: 600;
}

.bonkaart__werk {
	color: var(--staal);
}

/* =========================================================================
   16. Monteurs
   ========================================================================= */

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

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

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

.monteur__rol {
	display: block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--limoen);
	margin-bottom: 6px;
}

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

.monteur p {
	font-size: 0.96rem;
	color: var(--staal);
}

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

/* =========================================================================
   17. Blog: de vragen als lijst
   -------------------------------------------------------------------------
   Elk stuk begint met de vraag van een klant in groot korps. Het is dus een
   lijst en geen raster met kaarten.
   ========================================================================= */

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

.vraagstuk {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 26px;
	padding: 34px 0;
	border-bottom: 1px solid var(--rand);
}

/* Het stuk met een foto krijgt een derde kolom; de andere blijven tweekoloms.
   Zo staat niet elk item er hetzelfde bij. */
.vraagstuk--metbeeld {
	grid-template-columns: 84px 1fr 300px;
}

/* Het volgnummer is versiering, maar het is ook het grootste op de regel. In de
   randkleur haalde het 1,52:1 en was het praktisch onzichtbaar; dit gedempte
   staal haalt 3,57:1 en blijft rustig. */
.vraagstuk__merk {
	font-family: var(--kop);
	font-size: 2.4rem;
	line-height: 1;
	color: #6b787f;
}

.vraagstuk__vraag {
	font-family: var(--kop);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	line-height: 1.2;
	margin: 0 0 12px;
}

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

.vraagstuk__vraag a:hover {
	color: var(--limoen);
	border-bottom-color: var(--limoen);
}

.vraagstuk__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 0.82rem;
	color: var(--staal);
	margin-bottom: 12px;
}

.vraagstuk p {
	color: var(--staal);
	font-size: 0.99rem;
	margin-bottom: 0;
}

.vraagstuk__beeld {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--rand);
}

/* Op de startpagina staan drie stukken in een kolommenrek in plaats van in
   deze lijst; daar is de vraag een h3. */
.vraagvak {
	display: flex;
	flex-direction: column;
	background: var(--bank);
	border: 1px solid var(--rand);
	border-top: 3px solid var(--limoen);
	border-radius: 0 0 4px 4px;
	padding: 24px 24px 26px;
	height: 100%;
}

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

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

.vraagvak h3 a:hover {
	color: var(--limoen);
	border-bottom-color: var(--limoen);
}

.vraagvak p {
	color: var(--staal);
	font-size: 0.96rem;
	margin-bottom: 0;
}

.vraagvak__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.8rem;
	color: var(--staal);
	margin-top: auto;
	padding-top: 16px;
}

/* =========================================================================
   18. Baliepunten: de veelgestelde vragen
   ========================================================================= */

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

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

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

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

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

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

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

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

/* =========================================================================
   19. Tarieven
   ========================================================================= */

/* De tafel schuift binnen zijn eigen doos in plaats van de hele bladzijde
   breder te maken. */
.schuifbak {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

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

.tarieftafel caption {
	text-align: left;
	color: var(--staal);
	font-size: 0.93rem;
	padding-bottom: 12px;
}

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

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

.tarieftafel tbody th {
	font-family: var(--tekst);
	font-size: 1rem;
	font-weight: 600;
	color: var(--kalk);
}

.tariefrij:nth-child(even) td,
.tariefrij:nth-child(even) th {
	background: var(--bank);
}

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

.tarieftafel__tijd {
	white-space: nowrap;
	color: var(--staal);
}

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

.invulblad {
	background: var(--bank);
	border: 1px solid var(--rand);
	border-radius: 4px;
	padding: 30px 30px 34px;
}

.stelling--paneel .invulblad {
	background: var(--werkplaats);
}

.invulblad__veld {
	margin-bottom: 18px;
}

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

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

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

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

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

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

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

.omroep {
	border: 1px solid var(--rand);
	border-left: 4px solid var(--limoen);
	background: var(--bank);
	padding: 16px 20px;
	border-radius: 4px;
	margin-bottom: 26px;
}

.omroep p {
	margin: 0;
}

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

/* =========================================================================
   21. Losse tekstbladzijden en het blogstuk
   ========================================================================= */

.tekstblok {
	max-width: 74ch;
}

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

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

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

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

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

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

/* Mail- en telefoonverwijzingen zijn anders 19px hoog en dus niet met een
   vinger te raken. Dat geldt in een definitielijst en net zo goed midden in een
   alinea, zoals in de privacyverklaring. */
.tekstblok dd a,
.tekstblok a[href^="mailto:"],
.tekstblok a[href^="tel:"] {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

.stukkop {
	max-width: 74ch;
}

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

.stukmeta li {
	margin: 0;
}

.stukbeeld {
	width: 100%;
	border-radius: 4px;
	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;
	color: var(--kalk);
}

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

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

/* Het getal is decoratief, maar het is ook het grootste op de bladzijde.
   .verdwaald p is (0,1,1) en verslaat een klasse van (0,1,0), dus die regel
   moet het eigen element overslaan. De kleur haalt 3,57:1; een graad donkerder
   bleef op 2,91 steken en dat is voor grote tekst nog te weinig. */
.verdwaald__getal {
	display: block;
	font-family: var(--kop);
	font-size: clamp(5rem, 16vw, 9rem);
	line-height: 0.9;
	color: #6b787f;
	margin-bottom: 10px;
}

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

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

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

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

/* Over de volle breedte onderaan, geen zwevende kaart in een hoek. */
.koekbalk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--bank);
	color: var(--kalk);
	border-top: 3px solid var(--limoen);
}

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

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

.koekbalk p {
	margin: 0;
	flex: 1 1 460px;
	font-size: 0.93rem;
	color: var(--kalk);
}

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

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

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

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

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

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

	.sleutel,
	.spaak,
	.spoor__vulling,
	.klachtwijzer__cel {
		transition: none;
	}
}

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

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

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

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

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

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

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

	.vraagstuk--metbeeld {
		grid-template-columns: 84px 1fr 220px;
	}
}

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

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

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

	/* Merk links, besteltoets ernaast, streepjes helemaal rechts. De
	   automatische marge hoort op de besteltoets en niet op het klepje, anders
	   duwt die alles naar een tweede regel en is het rek twee keer zo hoog. */
	.klepje {
		display: inline-flex;
		margin-left: 0;
		order: 3;
	}

	.gereedschapsrek .sleutel--vast {
		margin-left: auto;
		order: 2;
		min-height: 42px;
		padding: 9px 15px;
		font-size: 0.9rem;
	}

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

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

	.koppelstuk,
	.klachtwijzer__uitslag,
	.spoor__uitslag {
		grid-template-columns: 1fr;
	}

	.koppelstuk {
		gap: 32px;
	}

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

	.klachtwijzer__vak + .klachtwijzer__vak,
	.spoor__vak + .spoor__vak {
		border-left: 0;
		border-top: 1px solid var(--rand);
	}

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

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

	/* Op een smal scherm de foto boven de tekst in plaats van ernaast. */
	.kopstuk {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.kopstuk__foto {
		grid-column: 1;
		grid-row: 1;
		height: 300px;
	}

	.kopstuk__binnen {
		grid-column: 1;
		grid-row: 2;
		padding: 44px 22px 48px;
	}

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

	.spoor__knop:nth-child(3n + 1) {
		border-left: 0;
	}

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

	.vraagstuk--metbeeld {
		grid-template-columns: 84px 1fr;
	}

	.vraagstuk__beeld {
		grid-column: 2;
		margin-top: 16px;
	}
}

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

	.stelling {
		padding: 52px 0;
	}

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

	.werkbrug {
		padding: 0 18px;
	}

	.rek--twee,
	.rek--drie,
	.rek--vier,
	.bonrij,
	.invulblad__paar {
		grid-template-columns: 1fr;
	}

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

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

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

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

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

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

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

	.gereedschapsrek__onder {
		display: none;
	}

	/* Drie dingen naast elkaar op 390px lukt alleen als de tussenruimte en het
	   merk krimpen; wordt het krapper, dan valt de toets naar een tweede regel. */
	.gereedschapsrek__binnen {
		gap: 10px;
		padding: 0 16px;
	}

	.gereedschapsrek__naam {
		font-size: 1.2rem;
	}

	.gereedschapsrek__merk {
		gap: 9px;
	}

	.gereedschapsrek .sleutel--vast {
		padding: 9px 12px;
		font-size: 0.85rem;
	}

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

	.monteur__beeld {
		width: 116px;
	}

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

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

	.spoor__knop:nth-child(odd) {
		border-left: 0;
	}

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

	.spoor__vak,
	.klachtwijzer__vak {
		padding: 22px 18px 24px;
	}

	.klachtwijzer__voet {
		padding: 16px 18px;
	}

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

	.kopstuk__foto {
		height: 230px;
	}

	.kopstuk__binnen {
		padding: 34px 18px 40px;
	}

	.vraagstuk {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 28px 0;
	}

	.vraagstuk--metbeeld {
		grid-template-columns: 1fr;
	}

	.vraagstuk__beeld {
		grid-column: 1;
	}

	.vraagstuk__merk {
		font-size: 1.9rem;
	}

	.koekbalk__binnen {
		padding: 14px 18px;
	}

	.koekbalk__knoppen {
		width: 100%;
	}

	.tarieftafel {
		font-size: 0.9rem;
	}

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

	/* Op een telefoon mogen de koppen afbreken; nowrap dwong hier de breedte. */
	.tarieftafel thead th,
	.tarieftafel__bedrag,
	.tarieftafel__tijd {
		white-space: normal;
	}

	.tarieftafel code {
		word-break: break-all;
	}
}