/* =========================================================================
   zakenmaat-docs
   Structuur uit de steal sheet (ux-onderzoek/inspect-claude-docs), huid uit
   het merk van oktober 2026: de tokens van zakenmaat.nl in tokens.css, de
   herkomst per keuze in _bouwtrein/03-huid-2026-10.md. Plain CSS, geen
   framework. Licht en donker volgen het systeem, net als de app en de site.
   ========================================================================= */

/* Fraunces alleen voor het woordmerk, Hanken Grotesk voor koppen en tekst.
   Besluit 21 oktober 2026, stijlgids 1.5: het merk volgt de app. */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-var.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-display: swap;
}

:root {
	/* De kleuren, letters, radii, schaduwen en motion komen uit tokens.css. Hier
	   alleen wat de docs zelf hebben. */

	/* De lat van de inhoudsopgave en de keten. --kleur-rand verdwijnt op de
	   zandgrond met vlekken, en de meetlat is het handelsmerk van deze site, dus
	   hij krijgt een lijn die in beide standen uit de tekstkleur komt. */
	--docs-lijn: color-mix(in srgb, var(--kleur-tekst) 18%, transparent);

	/* Het glazen vlak van een kaart, gelijk aan de kaarten op zakenmaat.nl. */
	--docs-glas: var(--kleur-glas-vlak);

	/* Maten, gemeten op de referentie. */
	--zijbalk: 288px;
	/* 600px is bij 17px body ongeveer 77 tekens per regel. De referentie is
	   breder (832px), maar die draait op een kleinere basisgrootte; overgenomen
	   in pixels kwam onze regel op 88 tekens uit, gemeten op de gerenderde
	   pagina. Boven de 80 gaat het oog de volgende regel zoeken. Vergelijk dus
	   tekens en geen pixels als je dit ooit aanpast. */
	--leeskolom: 600px;
	--rail: 208px;
	--gap: 48px;
	--topbar-h: 72px;

	/* Phosphor regular, dezelfde set als de app. Als masker, zodat het icoon de
	   tekstkleur van zijn element volgt en de templates een lege span houden. */
	--ph-zoek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E");
	--ph-pijl-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	--ph-pijl-links: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E");
	--ph-vouw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	--ph-maan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z'/%3E%3C/svg%3E");
	--ph-zon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
	--ph-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
	--ph-let-op: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E");
}

/* Een icoon als masker: de vorm uit --icoon, de kleur uit currentColor. */
.zoek-icoon,
.start-pijl,
.kaart-pijl,
.verder-pijl,
.verder-terug-pijl {
	display: block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--icoon) center / contain no-repeat;
	mask: var(--icoon) center / contain no-repeat;
}

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

html {
	scroll-behavior: smooth;
	/* De sticky bovenbalk mag een anker-doel niet afdekken. */
	scroll-padding-top: calc(var(--topbar-h) + 24px);
}

body {
	margin: 0;
	/* De drie warme vlekken van zakenmaat.nl, hetzelfde recept als body.zh in
	   herbouw.css. Vast aan het venster, zodat het glas erboven iets heeft om
	   doorheen te kleuren terwijl je leest. */
	background-color: var(--kleur-grond);
	background-image:
		radial-gradient(42vw 34vw at 6% -4%, var(--kleur-vlek-een), transparent 70%),
		radial-gradient(38vw 30vw at 96% 4%, var(--kleur-vlek-drie), transparent 70%),
		radial-gradient(46vw 36vw at 70% 104%, var(--kleur-vlek-twee), transparent 70%);
	background-attachment: fixed;
	color: var(--kleur-tekst);
	font-family: var(--type-familie-tekst);
	font-size: 17px;
	line-height: var(--type-regel-tekst);
	-webkit-font-smoothing: antialiased;

	/* De voet blijft onderaan. Op een korte pagina (de 404, een lege
	   zoekuitkomst) hing hij anders halverwege het scherm met zand eronder. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: inherit;
}

.scherm-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100;
	background: var(--kleur-tekst);
	color: var(--kleur-grond);
	padding: 10px 16px;
	border-radius: var(--radius-pil);
	text-decoration: none;
	transition: top var(--motion-duur-hover) var(--motion-curve-uit);
}

.skip:focus {
	top: 12px;
}

:focus-visible {
	outline: var(--ruimte-focus-breedte) solid var(--kleur-focus);
	outline-offset: var(--ruimte-focus-afstand);
}

/* ---------- bovenbalk ---------- */

.topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--topbar-h);
	/* Glas zoals de kop van zakenmaat.nl (.zk in herbouw.css). */
	background: color-mix(in srgb, var(--kleur-grond) 82%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid var(--kleur-glas-paneel-rand);
}

.topbar-in {
	height: 100%;
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.merk {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}

/* De duimstok-Z, inline uit inc/merk.php. Vaste breedte en hoogte in de
   SVG, zodat de balk niet verspringt. */
.merk-mark {
	width: 30px;
	height: 30px;
	align-self: center;
	display: block;
	flex-shrink: 0;
}

/* De SVG draagt de kleuren van de lichte stand; deze twee regels laten het
   logo meekleuren met licht en donker. */
.merk-mark .zm-lat {
	stroke: var(--kleur-tekst);
}

.merk-mark .zm-goud {
	stroke: var(--kleur-actie);
}

/* Het woordmerk is de enige plek waar Fraunces nog staat. */
.merk-naam {
	font-family: var(--type-familie-woordmerk);
	font-size: 1.22rem;
	font-weight: var(--type-gewicht-woordmerk);
	letter-spacing: -0.01em;
}

.merk-sub {
	font-size: 0.86rem;
	color: var(--kleur-tekst-2);
}

.zoek {
	flex: 1;
	max-width: 440px;
	position: relative;
}

.zoek input {
	width: 100%;
	font: inherit;
	font-size: var(--type-maat-veld);
	min-height: var(--ruimte-veld);
	padding: 0 16px 0 42px;
	border: 1px solid var(--kleur-veld-rand);
	border-radius: var(--radius-veld);
	background: var(--kleur-glas-vol);
	color: var(--kleur-tekst);
	transition: border-color var(--motion-duur-hover) var(--motion-curve-uit), background-color var(--motion-duur-hover) var(--motion-curve-uit);
}

.zoek input::placeholder {
	color: var(--kleur-tekst-3);
}

.zoek input:focus {
	background: var(--kleur-vlak);
	border-color: var(--kleur-tekst-2);
}

.zoek-icoon {
	--icoon: var(--ph-zoek);
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--kleur-tekst-2);
	pointer-events: none;
}

.topbar-acties {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

/* Beide knoppen zijn glazen pillen van 44px, het recept van .knop in
   herbouw.css van zakenmaat.nl, zoals "Inloggen" daar. Ook "Open de app" is
   glas: de site houdt één goudknop per scherm aan, en in de handleiding is de
   gouden startkaart de hoofdroute (besluit Sepp, 26 oktober 2026). */
.knop-terug,
.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ruimte-knop);
	padding: 0 1.35em;
	border-radius: var(--radius-pil);
	border: 1px solid var(--kleur-glas-rand);
	background: var(--kleur-glas-vol);
	color: var(--kleur-tekst);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring);
	font: var(--type-gewicht-label) var(--type-maat-knop) / var(--type-regel-ui) var(--type-familie-tekst);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--motion-duur-hover) var(--motion-curve-uit), box-shadow var(--motion-duur-hover) var(--motion-curve-uit), transform var(--motion-duur-druk) var(--motion-curve-uit);
}

.knop-terug:active,
.knop:active {
	transform: scale(var(--motion-schaal-druk));
}

.knop-terug:hover,
.knop:hover {
	background: var(--kleur-vlak);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring-hover);
}

/* Licht of donker: een glazen rondje van 44px zoals de zijbalkknop. Het icoon
   wijst naar de stand waar je heen gaat: een maan in licht, een zon in donker.
   [hidden] wint, zodat hij zonder JS niet als dode knop in de balk staat. */
.thema-knop {
	flex-shrink: 0;
	width: var(--ruimte-tikdoel);
	height: var(--ruimte-tikdoel);
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-pil);
	background: var(--kleur-glas-vol);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring);
	color: var(--kleur-tekst);
	cursor: pointer;
	position: relative;
	transition: background var(--motion-duur-hover) var(--motion-curve-uit), box-shadow var(--motion-duur-hover) var(--motion-curve-uit), transform var(--motion-duur-druk) var(--motion-curve-uit);
	--icoon: var(--ph-maan);
}

.thema-knop[hidden] {
	display: none;
}

.thema-knop:hover {
	background: var(--kleur-vlak);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring-hover);
}

.thema-knop:active {
	transform: scale(var(--motion-schaal-druk));
}

.thema-knop[aria-pressed="true"] {
	--icoon: var(--ph-zon);
}

.thema-icoon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--icoon) center / contain no-repeat;
	mask: var(--icoon) center / contain no-repeat;
}

.zijbalk-knop {
	display: none;
	width: var(--ruimte-tikdoel);
	height: var(--ruimte-tikdoel);
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-pil);
	background: var(--kleur-glas-vol);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring);
	color: var(--kleur-tekst);
	cursor: pointer;
	position: relative;
}

.zijbalk-knop-streep {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--ph-menu) center / contain no-repeat;
	mask: var(--ph-menu) center / contain no-repeat;
}

/* ---------- schil ---------- */

.shell {
	flex: 1 0 auto;
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: var(--zijbalk) minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}

.zijbalk {
	position: sticky;
	top: var(--topbar-h);
	max-height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
	padding: 32px 0 48px;
	scrollbar-width: thin;
	scrollbar-color: var(--docs-lijn) transparent;
}

.zijbalk-in {
	padding-right: 8px;
}

.zb-groep + .zb-groep {
	margin-top: 26px;
}

.zb-kop {
	display: block;
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-tekst-2);
	text-decoration: none;
	padding: 4px 12px;
	transition: color var(--motion-duur-hover) var(--motion-curve-uit);
}

.zb-kop:hover,
.zb-kop.is-hier {
	color: var(--kleur-tekst);
}

.zb-lijst {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	/* De boom krijgt een dunne lat als linkerrand, zodat de hiërarchie
	   zichtbaar is zonder inspringing te hoeven raden. */
	border-left: 1px solid var(--kleur-rand);

	/* Alleen het hoofdstuk waar je in zit staat open. De zijbalk telt 36 links;
	   allemaal tegelijk tonen maakt de boom onleesbaar en dat is precies wat de
	   referentie ook niet doet. De PHP zette deze klasse al, alleen ontbrak de
	   CSS erbij, dus stond alles altijd open. */
	display: none;
}

.zb-groep.is-open .zb-lijst {
	display: block;
}

.zb-item {
	display: block;
	padding: 6px 12px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	border-radius: 0 var(--radius-tip) var(--radius-tip) 0;
	font-size: 0.95rem;
	color: var(--kleur-tekst-2);
	text-decoration: none;
	transition: color var(--motion-duur-hover) var(--motion-curve-uit), border-color var(--motion-duur-hover) var(--motion-curve-uit), background var(--motion-duur-hover) var(--motion-curve-uit);
}

.zb-item:hover {
	color: var(--kleur-tekst);
	background: var(--kleur-glas-vol);
}

/* Waar je bent: de goudwas met de gouden lat, zoals het actieve item in de
   zijbalk van de app. */
.zb-item.is-hier {
	color: var(--kleur-tekst);
	font-weight: var(--type-gewicht-label);
	border-left-color: var(--kleur-actie);
	background: var(--kleur-accent-goud-was);
}

/* ---------- inhoud ---------- */

.inhoud {
	min-width: 0;
	padding: 48px 0 96px;
}

.artikel-grid {
	display: grid;
	grid-template-columns: minmax(0, var(--leeskolom)) var(--rail);
	gap: var(--gap);
	align-items: start;
}

.leeskolom {
	min-width: 0;
	position: relative;
}

.eyebrow {
	display: inline-block;
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-link);
	text-decoration: none;
	margin-bottom: 10px;
	transition: color var(--motion-duur-hover) var(--motion-curve-uit);
}

.eyebrow:hover {
	color: var(--kleur-tekst);
}

/* tekst-2 en niet tekst-3: op zand haalt tekst-3 maar 4,38:1 (stijlgids 08). */
.eyebrow-stil {
	color: var(--kleur-tekst-2);
}

.artikel-titel,
.hoofdstuk-titel {
	font-family: var(--type-familie-tekst);
	font-weight: var(--type-gewicht-kop);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem);
	line-height: var(--type-regel-kop);
	letter-spacing: var(--type-spatie-kop);
	text-wrap: balance;
	margin: 0 0 14px;
}

/* De artikel-h1 is vlakker dan de hoofdstuk-h1, en dat is de correctie van
   28 juli 2026 op de tweede steal sheet. Gemeten op de referentie: hun
   artikel-h1 is twee keer de body (28 op 14), niet drie keer. De hiërarchie komt
   daar uit familie en gewicht, en het scheelt dat een pagina niet opent met een
   kop die harder schreeuwt dan de zin eronder.

   De drie niveaus staan als een trap: de wortel 3,25rem, een hoofdstuk als
   landingspagina 2,6rem, een artikel 2,15rem. Tot 0.78.0 droeg Fraunces ook
   een verschil in gewicht (de wortel op w300); sinds het merk van oktober 2026
   staan alle koppen in Hanken op het kopgewicht en zit de trap alleen in de
   maat. */
.artikel-titel {
	font-size: clamp(1.8rem, 1.5rem + 1vw, 2.15rem);
}

.artikel-lead,
.hoofdstuk-lead {
	font-size: 1.14rem;
	line-height: 1.6;
	color: var(--kleur-tekst-2);
	margin: 0 0 34px;
}

/* ---------- de meetlat ---------- */

/* Breuk 2 uit de steal sheet: de inhoudsopgave is geen kale lijst maar een
   liniaal. De streepjes staan op gelijke afstand (niet op de echte pixelhoogte
   van de kop), want proportioneel plaatsen duwt een lange sectie zijn buur uit
   beeld en dan is de lat onbruikbaar zodra een pagina groeit. Wat wel echt
   meebeweegt is de vulling: die volgt de leesvoortgang.

   Eerste opzet stond in de linkermarge zonder labels. Dat sneuvelde bij de
   eigen inspectie: zonder labels weet je wel waar je bent maar niet wat er nog
   komt, en dat is nou juist waar een inhoudsopgave voor is. */
.lat {
	position: relative;
	padding-left: 22px;
}

.lat-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-tekst-2);
	margin-bottom: 10px;
	list-style: none;
}

/* Het chevron staat op elke breedte, niet alleen op smal. De summary is overal
   bedienbaar, dus overal moet zichtbaar zijn dat je hem kunt dichtklappen en
   hoe je hem terugkrijgt. */
.lat-kop::after {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--ph-vouw) center / contain no-repeat;
	mask: var(--ph-vouw) center / contain no-repeat;
	transition: transform var(--motion-duur-menu) var(--motion-curve-uit);
}

.lat-vouw[open] > .lat-kop::after {
	transform: rotate(180deg);
}

/* Het driehoekje van de browser weg, in beide notaties, want deze summary
   heeft zijn eigen chevron hieronder. Die staat op elke breedte, ook op breed,
   omdat de lat daar wel standaard open staat maar net zo goed bedienbaar is. */
.lat-kop::-webkit-details-marker {
	display: none;
}

.lat-kop::marker {
	content: "";
}

.lat-baan {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 6px;
	width: 1px;
	background: var(--docs-lijn);
}

.lat-vul {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 0;
	background: var(--kleur-link);
	transition: height 0.15s linear;
}

.lat-item {
	display: block;
	position: relative;
	padding: 5px 0;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--kleur-tekst-2);
	text-decoration: none;
	transition: color var(--motion-duur-hover) var(--motion-curve-uit);
}

.lat-item::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 0.85em;
	width: 9px;
	height: 1px;
	background: var(--docs-lijn);
	transition: width var(--motion-duur-hover) var(--motion-curve-uit), background var(--motion-duur-hover) var(--motion-curve-uit), height var(--motion-duur-hover) var(--motion-curve-uit);
}

.lat-item:hover {
	color: var(--kleur-tekst);
}

.lat-item:hover::before {
	width: 15px;
	background: var(--kleur-link);
}

.lat-item.is-hier {
	color: var(--kleur-tekst);
	font-weight: var(--type-gewicht-label);
}

.lat-item.is-hier::before {
	width: 15px;
	height: 2px;
	background: var(--kleur-link);
}

/* ---------- lopende tekst ---------- */

.prose {
	max-width: 100%;
}

/*
 * Eerst de marges van de browser eruit, daarna één regel die de ruimte tussen
 * twee blokken zet. Tot 27 juli 2026 ontbrak die eerste stap en won
 * `.prose p { margin: 0 }` van de ruimte-regel, waardoor twee alinea's onder
 * dezelfde kop tegen elkaar aan liepen.
 *
 * Beide selectors staan in :where(), zodat de reset echt nul specificiteit
 * heeft. Alleen de argumenten in :where() zetten wegen niet: `.prose` telt dan
 * nog steeds mee en dan zijn reset en ruimte-regel allebei (0,1,0), waarna
 * puur de vololgorde in dit bestand beslist. Dat werkt tot iemand de regels
 * verschuift. Zo niet: de ruimte-regel wint altijd.
 *
 * Let op bij een nieuwe wrapper-component (een callout, een stappenblok): de
 * reset raakt alle nakomelingen, de ruimte-regel alleen directe kinderen van
 * .prose. Twee alinea's binnen zo'n wrapper krijgen dus geen ruimte, en die
 * moet de component zelf regelen.
 */
:where(.prose) :where(p, ul, ol, blockquote) {
	margin: 0;
}

.prose > * + * {
	margin-top: 1.1em;
}

/* h2 en h3 volgen het kennisbankartikel van zakenmaat.nl (kbartikel.css): de
   h2 op de inleidingsmaat, de h3 op de tekstmaat, allebei op het kopgewicht. */
.prose h2 {
	font-family: var(--type-familie-tekst);
	font-weight: var(--type-gewicht-kop);
	font-size: var(--type-maat-inleiding);
	line-height: var(--type-regel-kop);
	letter-spacing: var(--type-spatie-kop);
	text-wrap: balance;
	margin: 2.4em 0 0.6em;
	scroll-margin-top: calc(var(--topbar-h) + 24px);
}

/* Bijgewerkt in 0.78.0: het merk van oktober 2026 zet alle koppen in Hanken,
   dus het onderscheid tussen serif en sans hieronder bestaat niet meer. De h3
   staat nu op de tekstmaat en het kopgewicht, zoals op de kennisbank van
   zakenmaat.nl. De geschiedenis blijft staan omdat het probleem (een h3 die op
   een vette aanhef lijkt) nog steeds het ontwerpprobleem is.

   Oorspronkelijk: sans, en juist lichter dan een vetgedrukte aanhef.

   Dit stond sinds 0.14.0 in serif, met als reden dat een h3 niet te onderscheiden
   was van een `strong` aan het begin van een bullet en dat "de lange pagina's er
   tientallen hebben". Dat laatste klopte niet: er heeft nooit één losse h3 in
   `docs/inhoud/` gestaan, gecontroleerd over de hele git-geschiedenis. Wat er
   stond waren vetgedrukte aanhefs die op koppen leken. Die zijn sinds deze versie
   echte rijen met een echte h3, dus pas nu bestaat het probleem werkelijk.

   De referentie lost het scherper op dan met een serif, en die oplossing is
   overgenomen. Daar zijn h1 en h2 serif en keert h3 terug naar de body-familie,
   maar dan groter en lichter dan de lopende tekst eromheen. Het onderscheid komt
   uit grootte en uit een gewicht dat naar beneden gaat in plaats van omhoog: 500
   tegenover de 650 van `strong`. Dat leest als een kop en niet als nadruk, en het
   houdt de serif voorbehouden aan de twee niveaus die de pagina echt opdelen.

   Vandaag raakt deze regel alleen een h3 die iemand in de lopende tekst schrijft.
   De rij-titels hebben hun eigen maat, want in een rij is de naam een label. */
.prose h3 {
	font-family: var(--type-familie-tekst);
	font-size: var(--type-maat-tekst);
	font-weight: var(--type-gewicht-kop);
	line-height: var(--type-regel-ui);
	letter-spacing: var(--type-spatie-kop);
	margin: 1.9em 0 0.4em;
	scroll-margin-top: calc(var(--topbar-h) + 24px);
}

.prose :where(ul, ol) {
	padding-left: 1.3em;
}

.prose li + li {
	margin-top: 0.4em;
}

/* ---------- de twee dragende blokken ----------
   De steal sheet noemt een stapblok en een let-op-blok de dragende elementen
   van dit thema, maar ze waren nooit gebouwd: elke pagina was kop, alinea,
   opsomming, zeven keer achter elkaar, zonder één visuele onderbreking.
   Gevonden in de review van 28 juli 2026.

   Het stapblok hangt aan .stappen en niet aan elke <ol>. Dat was eerst wel zo,
   met het argument dat een handleiding-stap per definitie een geordende lijst
   is. Dat klopt niet andersom: van de dertien geordende lijsten in de
   handleiding zijn er vier een opsomming van oorzaken, voorwaarden of velden,
   en die lazen met een verbindingslijn ertussen als "doe eerst 1, dan 2".
   Op facturen-versturen stond boven zo'n lijst letterlijk "meestal is het een
   van deze drie", dus beeld en tekst spraken elkaar tegen. */

.prose ol.stappen {
	list-style: none;
	counter-reset: stap;
	padding: 20px 22px 20px 20px;
	margin: 1.7em 0;
	background: var(--docs-glas);
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-tegel);
	box-shadow: var(--schaduw-glas);
}

.prose ol.stappen > li {
	position: relative;
	padding-left: 40px;
	counter-increment: stap;
}

.prose ol.stappen > li + li {
	margin-top: 0.85em;
}

.prose ol.stappen > li::before {
	content: counter(stap);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--kleur-accent-goud-was);
	color: var(--kleur-tekst);
	font-family: var(--type-familie-tekst);
	font-size: 0.86rem;
	font-weight: var(--type-gewicht-kop);
	font-variant-numeric: tabular-nums;
}

/* De verticale lat tussen de bolletjes, zodat een stappenblok leest als een
   route en niet als losse rondjes. Dezelfde meetlat-gedachte als in de rail. */
.prose ol.stappen > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 12.5px;
	top: calc(0.1em + 30px);
	bottom: -0.85em;
	width: 1px;
	background: var(--kleur-rand);
}

/* Het let-op-blok. Klei is hier bewust wél toegestaan: het is geen
   call-to-action maar een waarschuwing, en juist daar moet de kleur afwijken
   van het goud dat overal "ga hierheen" betekent. Beide tokens stonden al in
   :root en werden nergens gebruikt. */
.prose .letop {
	position: relative;
	margin: 1.7em 0;
	padding: 16px 20px 16px 50px;
	background: var(--kleur-accent-klei-was);
	border-radius: var(--radius-tegel);
	color: var(--kleur-tekst);
}

/* Phosphor warning-circle, hetzelfde teken als de waarschuwingen in de app. */
.prose .letop::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 17px;
	width: 20px;
	height: 20px;
	background-color: var(--kleur-attentie);
	-webkit-mask: var(--ph-let-op) center / contain no-repeat;
	mask: var(--ph-let-op) center / contain no-repeat;
}

/* ---------- de inklapbare rij ----------
   Overgenomen van de Claude Platform Docs, gemeten op 28 juli 2026: daar is een
   pagina van 10.000 pixels met 58 h3's toch scanbaar, doordat elke lange
   opsomming een rij met een chevron is. De diepte is er wel, hij ligt alleen
   opgevouwen.

   Wanneer wel: vijf of meer items die elk beginnen met een naam en daarna een
   blok uitleg dragen, met een mediaan boven de honderd tekens per item. Dan zie
   je met dit blok de hele set namen tegelijk en klap je open wat je nodig hebt.

   De mediaan en niet het gemiddelde, en dat is met schade geleerd. De
   metric-lijst op `doelen` haalde een gemiddelde van 120 en leek dus een
   kandidaat, maar dat kwam door één item van 345 tekens tussen vier van rond de
   veertig; de mediaan is daar 54. Omgezet werd het een rij knoppen die je moet
   openklappen om "dus je omzet min je kosten" te lezen.

   Wanneer niet: een kort lijstje. De zeven tabbladen op `klanten` zijn samen
   246 tekens, en die inklappen maakt scannen juist moeilijker. Niet op een `ol`
   die een berekening of een route is, want daar is de volgorde de inhoud. En
   niet als de naam grammaticaal in de zin loopt ("Brutowinst, dus je omzet min
   je kosten"): dan is het geen definitielijst maar een opsomming, en een
   mechanische omzetting laat de uitleg met een komma beginnen.

   Semantisch blijft het een echte kop: de summary draagt een h3, dus een
   schermlezer navigeert er gewoon langs en de browser doet het openklappen
   zonder een regel JS. */

.prose .rijen {
	margin: 1.7em 0;
	border-top: 1px solid var(--kleur-rand);
}

.prose .rij {
	border-bottom: 1px solid var(--kleur-rand);
}

.prose .rij > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 2px;
	cursor: pointer;
	list-style: none;
}

.prose .rij > summary::-webkit-details-marker {
	display: none;
}

.prose .rij > summary::marker {
	content: "";
}

/* De kop in de summary erft de h3-stijl maar dan op body-grootte: in een rij
   telt de naam als label en niet als sectiekop, en zes labels op 1,35rem onder
   elkaar leest als zes koppen in plaats van als één lijst. */
.prose .rij > summary .rij-titel {
	margin: 0;
	font-family: var(--type-familie-tekst);
	font-size: 1.02rem;
	font-weight: var(--type-gewicht-kop);
	line-height: var(--type-regel-ui);
	letter-spacing: 0;
}

.prose .rij > summary::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.2em;
	background-color: var(--kleur-tekst-2);
	-webkit-mask: var(--ph-vouw) center / contain no-repeat;
	mask: var(--ph-vouw) center / contain no-repeat;
	transition: transform var(--motion-duur-menu) var(--motion-curve-uit), background-color var(--motion-duur-hover) var(--motion-curve-uit);
}

.prose .rij[open] > summary::after {
	transform: rotate(180deg);
}

.prose .rij > summary:hover::after {
	background-color: var(--kleur-link);
}

.prose .rij > summary:hover .rij-titel {
	color: var(--kleur-link);
}

.prose .rij > :not(summary) {
	padding: 0 2px 16px;
	color: var(--kleur-tekst-2);
}

/* ---------- wat je nodig hebt ----------
   Prerequisites als eerste blok, ook uit de referentie. Daar staat bovenaan een
   gids wat je moet hebben voor je begint, en dat scheelt de lezer een halve
   pagina lezen om erachter te komen dat hij er nog niet aan toe is. Bij ons
   alleen op de pagina's waar echt iets vooraf moet, niet als vast kopje. */
.prose .vooraf {
	margin: 0 0 1.8em;
	padding: 14px 20px;
	background: var(--kleur-accent-goud-was);
	border-left: 2px solid var(--kleur-actie);
	border-radius: 0 var(--radius-tegel) var(--radius-tegel) 0;
}

.prose .vooraf-kop {
	display: block;
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-link);
	margin-bottom: 6px;
}

.prose .vooraf ul {
	padding-left: 1.2em;
}

/* Eigen ruimte-regel, want .prose > * + * raakt alleen directe kinderen van
   .prose en een wrapper valt daarbuiten. Precies de val die in de comment bij
   het prose-blok hierboven staat beschreven. */
.prose .letop > * + *,
.prose .vooraf > * + *,
.prose .rij > :not(summary) + :not(summary),
.prose ol.stappen > li > * + * {
	margin-top: 0.9em;
}

.prose .letop > :first-child {
	margin-top: 0;
}

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

/* Links in goud-diep met een lijn van 1px die bij hover 2px wordt, zoals de
   kennisbank van zakenmaat.nl. Het oude goud onder ink-tekst haalde als lijn
   geen 3:1 op de zandgrond. */
.prose a {
	color: var(--kleur-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--motion-duur-hover) var(--motion-curve-uit);
}

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

.prose strong {
	font-weight: var(--type-gewicht-nadruk);
}

.prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.88em;
	background: var(--kleur-rij);
	border: 1px solid var(--kleur-rand);
	border-radius: var(--radius-tip);
	padding: 1px 6px;
}

/* Code op de balk, het donkerste vlak van het merk. In donker blijft de balk
   donkerder dan de grond, dus het blok blijft herkenbaar. */
.prose pre {
	background: var(--kleur-balk);
	color: var(--kleur-op-balk);
	border-radius: var(--radius-tegel);
	padding: 18px 20px;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.6;
}

/* De kopieerknop die docs.js bij elk codeblok zet. Goud, want het is een
   actie; tekst op goud is ink. Het blok krijgt bovenin ruimte zodat de knop
   de eerste regel niet afdekt. */
.prose .code-wrap {
	position: relative;
}

.prose .code-wrap pre {
	padding-top: 48px;
}

.prose .kopieer {
	position: absolute;
	top: 10px;
	right: 10px;
	font: var(--type-gewicht-label) 0.8rem/1 var(--type-familie-tekst);
	color: var(--kleur-op-actie);
	background: var(--kleur-actie);
	border: 0;
	border-radius: var(--radius-pil);
	padding: 8px 14px;
	cursor: pointer;
	transition: background var(--motion-duur-hover) var(--motion-curve-uit);
}

.prose .kopieer:hover {
	background: var(--kleur-actie-hover);
}

.prose .kopieer:focus-visible {
	outline-color: var(--kleur-focus-op-balk);
}

.prose pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.prose :where(blockquote) {
	padding: 2px 0 2px 20px;
	border-left: 2px solid var(--kleur-actie);
	color: var(--kleur-tekst-2);
	font-style: normal;
}

.prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-kaart);
	border: 1px solid var(--kleur-rand);
}

/* Een schermafbeelding met bijschrift. Het bijschrift is geen versiering: een
   uitsnede van een scherm laat zien wáár iets staat, en de regel eronder zegt
   wat je moet zien. Zonder die regel moet de lezer zelf raden waar hij naar
   kijkt, en dan is het beeld decoratie. */
.prose figure {
	margin: 1.7em 0;
}

.prose figure img {
	display: block;
}

.prose figcaption {
	margin-top: 10px;
	font-size: var(--type-maat-bijschrift);
	font-weight: var(--type-gewicht-label);
	color: var(--kleur-tekst-2);
}

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

.prose th,
.prose td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--kleur-rand);
	vertical-align: top;
}

.prose th {
	font-weight: var(--type-gewicht-kop);
	color: var(--kleur-tekst);
	border-bottom-color: var(--kleur-tekst-3);
}

/* Tabellen mogen de leeskolom niet oprekken op smalle schermen. */
.tabel-wrap {
	overflow-x: auto;
}

/* ---------- rail rechts ---------- */

.rail {
	position: sticky;
	top: calc(var(--topbar-h) + 48px);
	font-size: 0.9rem;
}

.stempel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background: var(--docs-glas);
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-tegel);
	margin-bottom: 24px;
}

.stempel-kop {
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-tekst-2);
}

.stempel-regel {
	color: var(--kleur-tekst-2);
}

/* ---------- hoofdstukpagina ---------- */

.hoofdstuk {
	max-width: calc(var(--leeskolom) + var(--rail) + var(--gap));
}

.hoofdstuk-kop {
	max-width: var(--leeskolom);
}

.hoofdstuk-intro {
	margin-bottom: 32px;
}

/* De startroute: één duidelijke weg naar binnen, in plaats van twaalf
   gelijkwaardige links. */
/* De wortel krijgt twee ingangen naast elkaar, een hoofdstuk maar één. Reden:
   een handleiding heeft twee soorten bezoekers, iemand die nieuw is en iemand
   die vastloopt met de app al open, en die hebben een ander eerste scherm nodig.
   Binnen een hoofdstuk is er wel één juiste volgorde, dus daar blijft het een
   enkele route. Zo verschilt de wortel ook echt van een hoofdstukpagina in
   plaats van alleen in het label erboven. */
.ingangen {
	display: grid;
	gap: 14px;
}

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

@media (max-width: 760px) {
	.ingangen-twee {
		grid-template-columns: minmax(0, 1fr);
	}
}

.start {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 16px;
	padding: 18px 22px;
	background: var(--kleur-actie);
	color: var(--kleur-op-actie);
	border-radius: var(--radius-kaart);
	text-decoration: none;
	transition: transform var(--motion-duur-kaart) var(--motion-curve-uit), box-shadow var(--motion-duur-kaart) var(--motion-curve-uit), background var(--motion-duur-hover) var(--motion-curve-uit);
}

/* De tweede ingang is nevengeschikt maar niet gelijkwaardig: van voren af aan
   beginnen is het hoofdpad. Zand in plaats van goud, zodat de knijp-ogen-test
   nog steeds één winnaar oplevert. Sinds 0.78.0 glas in plaats van zand, met
   de tekstkleur erop: de inktkleur van het goud is in donker ook donker. */
.start-stil {
	background: var(--docs-glas);
	color: var(--kleur-tekst);
	border: 1px solid var(--kleur-glas-rand);
	box-shadow: var(--schaduw-glas);
}

.start.start-stil:hover {
	background: var(--kleur-glas-vol);
	box-shadow: var(--schaduw-op);
}

.start:hover {
	background: var(--kleur-actie-hover);
	transform: translateY(calc(var(--motion-verplaatsing-kaart) * -1));
	box-shadow: 0 var(--ruimte-focus-gloed) calc(var(--ruimte-focus-gloed) * 4) color-mix(in srgb, var(--kleur-actie) 45%, transparent);
}

.start-label {
	grid-column: 1;
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	opacity: 0.86;
}

.start-titel {
	grid-column: 1;
	font-family: var(--type-familie-tekst);
	font-size: 1.3rem;
	font-weight: var(--type-gewicht-kop);
	line-height: var(--type-regel-ui);
	letter-spacing: var(--type-spatie-kop);
}

.start-pijl {
	--icoon: var(--ph-pijl-rechts);
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	transition: transform var(--motion-duur-hover) var(--motion-curve-uit);
}

.start:hover .start-pijl {
	transform: translateX(var(--motion-verplaatsing-pijl));
}

.kaarten {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.kaart-link {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto auto;
	gap: 2px 14px;
	height: 100%;
	padding: 20px 22px;
	background: var(--docs-glas);
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-kaart);
	box-shadow: var(--schaduw-glas);
	text-decoration: none;
	transition: transform var(--motion-duur-kaart) var(--motion-curve-uit), box-shadow var(--motion-duur-kaart) var(--motion-curve-uit), background var(--motion-duur-kaart) var(--motion-curve-uit);
}

.kaart-link:hover {
	transform: translateY(calc(var(--motion-verplaatsing-kaart) * -1));
	background: var(--kleur-glas-vol);
	box-shadow: var(--schaduw-op);
}

.kaart-nr {
	grid-row: 1 / span 3;
	font-family: var(--type-familie-tekst);
	font-size: 1.02rem;
	font-weight: var(--type-gewicht-kop);
	font-variant-numeric: tabular-nums;
	/* ocher-deep haalt hier 3,25:1 op papier-wit en dat is te weinig. Het cijfer
	   is wel aria-hidden, dus een schermlezer slaat het over, maar dat maakt het
	   niet leesbaarder voor iemand met minder contrastgevoeligheid. */
	color: var(--kleur-link);
	padding-top: 2px;
}

.kaart-titel {
	/* margin nul, want dit is sinds ronde 3 een h2 en die staat buiten .prose,
	   waar de marge-reset zit. Zonder deze regel zet de browser er 0.83em boven
	   en onder, gemeten 31px extra per kaart, en dan doet de gap in de kaart
	   niets meer. */
	margin: 0;
	font-family: var(--type-familie-tekst);
	font-size: var(--type-maat-kaartkop);
	font-weight: var(--type-gewicht-kop);
	line-height: var(--type-regel-ui);
	letter-spacing: var(--type-spatie-kop);
}

.kaart-sam {
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--kleur-tekst-2);
	margin-top: 4px;
}

.kaart-pijl {
	--icoon: var(--ph-pijl-rechts);
	width: 18px;
	height: 18px;
	margin-top: 10px;
	color: var(--kleur-tekst-2);
	transition: transform var(--motion-duur-hover) var(--motion-curve-uit), color var(--motion-duur-hover) var(--motion-curve-uit);
}

.kaart-link:hover .kaart-pijl {
	transform: translateX(var(--motion-verplaatsing-pijl));
	color: var(--kleur-link);
}

/* ---------- de wortel als routekaart ---------- */

/* Structuur uit `_bouwtrein/02-steal-sheet-claude-platform.md`, live gemeten op
   28 juli 2026 op platform.claude.com/docs/en/home. Wat we overnemen: de wortel
   zonder zijbalk, de levenscyclus als navigatie, en één sectieritme onder vier
   verschillende kaartsoorten. Wat we niet overnemen: hun 14px body en hun
   codevoorbeeld in de hero. Zie de kop van template-parts/wortel.php.

   Bewust geen entrance-reveal op deze secties. De referentie heeft nul motion en
   dat is voor documentatie het juiste antwoord: je leest het met een probleem,
   en dan is beweging ruis. De bestaande reveal op de hoofdstukkaarten blijft
   staan, er komt niets bij. */

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

.wortel {
	/* Zonder zijbalk is er meer canvas. Niet de volle 1560px gebruiken: dan
	   waaieren de fase-rasters zo breed uit dat je ze niet meer als één groep
	   leest. De referentie houdt zijn inhoud op 1120px binnen een breder scherm. */
	max-width: 1120px;
	margin: 0 auto;
	padding-bottom: 24px;
}

.whero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: 24px 64px;
	align-items: start;
	padding: 44px 0 12px;
}

@media (max-width: 900px) {
	.whero {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 32px;
	}
}

/* Groot, waar de artikel-h1 klein is. De referentie zet zijn homepage-h1 op
   52px w300 en zijn artikel-h1 op 28px w500; tot 0.78.0 volgden we dat met een
   lichte Fraunces. Het merk van oktober 2026 kent één kopgewicht, dus het
   verschil zit nu alleen in de maat. */
.whero-titel {
	font-family: var(--type-familie-tekst);
	font-weight: var(--type-gewicht-kop);
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.25rem);
	line-height: var(--type-regel-kop);
	letter-spacing: var(--type-spatie-kop);
	text-wrap: balance;
	margin: 0 0 14px;
}

.whero-lead {
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--kleur-tekst-2);
	max-width: 34em;
	margin: 0 0 28px;
}

/* De keten: de meetlat als de belofte van de site. Op een artikelpagina draagt
   hij de inhoudsopgave, hier de rode draad uit `wat-zakenmaat-is`. Waar de
   referentie een werkend codevoorbeeld zet, zetten wij waar het heen gaat. */
.keten {
	list-style: none;
	margin: 6px 0 0;
	padding: 4px 0 4px 30px;
	position: relative;
	border-left: 1.5px solid var(--docs-lijn);
}

.keten-stap {
	position: relative;
	padding-bottom: 20px;
	font-size: 0.98rem;
	line-height: 1.45;
	color: var(--kleur-tekst-2);
}

.keten-stap:last-child {
	padding-bottom: 0;
	color: var(--kleur-tekst);
	font-weight: var(--type-gewicht-label);
}

.keten-merk {
	position: absolute;
	left: -30px;
	top: 0.62em;
	width: 13px;
	height: 1.5px;
	background: var(--docs-lijn);
}

/* Het laatste streepje is langer en dikker en goud, precies zoals de actieve
   sectie in de rail. Betaald worden is waar de keten heen gaat, dus dat is de
   markering die je ziet als je knijpt met je ogen. */
.keten-stap:last-child .keten-merk {
	left: -31px;
	width: 22px;
	height: 3px;
	top: 0.5em;
	background: var(--kleur-link);
}

@media (max-width: 900px) {
	.keten {
		margin-top: 4px;
	}
}

/* Het sectieritme. Elke sectie opent identiek, en dat is wat de pagina
   samenhang geeft terwijl elke sectie er anders uitziet. */
.wsectie {
	padding-top: 52px;
}

.wsectie-kop {
	max-width: 46em;
	margin-bottom: 24px;
}

.wsectie-titel {
	font-family: var(--type-familie-tekst);
	font-weight: var(--type-gewicht-kop);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8rem);
	line-height: var(--type-regel-kop);
	letter-spacing: var(--type-spatie-kop);
	text-wrap: balance;
	margin: 0 0 8px;
}

.wsectie-lead {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--kleur-tekst-2);
	margin: 0;
}

/* De vier fases. Dit is de sterkste vondst van de referentie: de levenscyclus
   als navigatie, zodat je kunt instappen waar je bent in plaats van bij
   hoofdstuk 1 te moeten beginnen. */
.fases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 30px;
}

.fase {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 4px 14px;
	align-items: baseline;
}

.fase-nr {
	font-family: var(--type-familie-tekst);
	font-size: 1.05rem;
	font-weight: var(--type-gewicht-kop);
	font-variant-numeric: tabular-nums;
	color: var(--kleur-link);
	text-align: right;
}

.fase-titel {
	margin: 0;
	font-family: var(--type-familie-tekst);
	font-size: 1.05rem;
	font-weight: var(--type-gewicht-kop);
	line-height: var(--type-regel-ui);
}

.minis {
	grid-column: 2;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
	gap: 8px;
}

.mini {
	display: block;
	padding: 11px 14px;
	background: var(--docs-glas);
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-veld);
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--kleur-tekst);
	text-decoration: none;
	transition: border-color var(--motion-duur-druk) var(--motion-curve-uit), background var(--motion-duur-druk) var(--motion-curve-uit);
}

.mini:hover {
	border-color: var(--kleur-actie);
	background: var(--kleur-glas-vol);
}

@media (max-width: 620px) {
	.fase {
		grid-template-columns: 22px minmax(0, 1fr);
	}

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

/* De AI-pagina's als pillen: het is één samenhangend onderwerp met zeven korte
   ingangen, geen reis en geen storingenlijst, dus het krijgt een eigen vorm. */
.pillen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pil {
	display: inline-flex;
	align-items: center;
	min-height: var(--ruimte-tikdoel);
	padding: 0 18px;
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-pil);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring);
	background: var(--kleur-glas-vol);
	font-size: 0.94rem;
	color: var(--kleur-tekst);
	text-decoration: none;
	transition: background var(--motion-duur-hover) var(--motion-curve-uit), box-shadow var(--motion-duur-hover) var(--motion-curve-uit);
}

.pil:hover {
	background: var(--kleur-vlak);
	box-shadow: inset 0 0 0 1px var(--kleur-glas-ring-hover);
}

/* De storingen: hier telt de samenvatting zwaarder dan de titel, want je zoekt
   op je symptoom en niet op de naam van de pagina. */
.storingen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 8px;
}

.storing {
	display: block;
	height: 100%;
	padding: 14px 18px;
	border-left: 2px solid var(--docs-lijn);
	background: var(--docs-glas);
	border-radius: 0 var(--radius-tegel) var(--radius-tegel) 0;
	text-decoration: none;
	transition: border-color var(--motion-duur-druk) var(--motion-curve-uit), background var(--motion-duur-druk) var(--motion-curve-uit);
}

.storing:hover {
	border-left-color: var(--kleur-attentie);
	background: var(--kleur-glas-vol);
}

.storing-titel {
	display: block;
	font-weight: var(--type-gewicht-kop);
	font-size: 0.98rem;
	line-height: 1.3;
	color: var(--kleur-tekst);
}

.storing-sam {
	display: block;
	margin-top: 3px;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--kleur-tekst-2);
}

/* De hoofdstukkaarten stonden hier al en blijven, alleen niet meer als de hele
   pagina maar als de laatste sectie: wie niet weet waar hij heen wil, bladert
   alsnog per onderwerp. De marge komt van .wsectie, dus die van .kaarten eraf. */
.wortel .kaarten {
	margin-top: 0;
}

/* ---------- waar je hierna heen kunt ----------
   Stond hier tot 28 juli 2026 als een vorige-volgende-paar. De referentie zet
   twee kaarten die allebei vooruit wijzen, en dat past beter bij hoe een
   docs-pagina gelezen wordt: je komt binnen op je probleem, niet op bladzijde
   een. Vorige blijft als kleine link erboven staan. */

.verder {
	max-width: calc(var(--leeskolom) + var(--rail) + var(--gap));
	margin-top: 72px;
	padding-top: 28px;
	border-top: 1px solid var(--kleur-rand);
}

.verder-terug {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 0.92rem;
	color: var(--kleur-tekst-2);
	text-decoration: none;
	transition: color var(--motion-duur-hover) var(--motion-curve-uit);
}

.verder-terug:hover {
	color: var(--kleur-tekst);
}

.verder-terug-pijl {
	--icoon: var(--ph-pijl-links);
	width: 16px;
	height: 16px;
	transition: transform var(--motion-duur-hover) var(--motion-curve-uit);
}

.verder-terug:hover .verder-terug-pijl {
	transform: translateX(calc(var(--motion-verplaatsing-pijl) * -1));
}

.verder-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

/* De uitgang voor wie zijn antwoord niet vond. Bewust klein en zonder kader:
   het is een vangnet en geen vierde bestemming, dus het mag de twee kaarten
   erboven niet beconcurreren. Zie de toelichting in template-parts/buren.php. */
.verder-hulp {
	margin: 18px 0 0;
	font-size: 0.92rem;
	color: var(--kleur-tekst-2);
}

.verder-kaart {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 20px;
	border: 1px solid var(--kleur-glas-rand);
	border-radius: var(--radius-kaart);
	background: var(--docs-glas);
	box-shadow: var(--schaduw-glas);
	text-decoration: none;
	transition: transform var(--motion-duur-kaart) var(--motion-curve-uit), background var(--motion-duur-kaart) var(--motion-curve-uit), box-shadow var(--motion-duur-kaart) var(--motion-curve-uit);
}

.verder-kaart:hover {
	transform: translateY(calc(var(--motion-verplaatsing-kaart) * -1));
	background: var(--kleur-glas-vol);
	box-shadow: var(--schaduw-op);
}

.verder-label {
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-link);
}

.verder-titel {
	font-family: var(--type-familie-tekst);
	font-size: var(--type-maat-kaartkop);
	font-weight: var(--type-gewicht-kop);
	line-height: var(--type-regel-ui);
	letter-spacing: var(--type-spatie-kop);
}

.verder-sam {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--kleur-tekst-2);
	margin-top: 2px;
}

.verder-pijl {
	--icoon: var(--ph-pijl-rechts);
	width: 18px;
	height: 18px;
	margin-top: 10px;
	color: var(--kleur-tekst-2);
	transition: transform var(--motion-duur-hover) var(--motion-curve-uit), color var(--motion-duur-hover) var(--motion-curve-uit);
}

.verder-kaart:hover .verder-pijl {
	transform: translateX(var(--motion-verplaatsing-pijl));
	color: var(--kleur-link);
}

/* ---------- zoekresultaten en 404 ---------- */

.smal {
	max-width: var(--leeskolom);
}

.res {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.res li + li {
	margin-top: 4px;
}

.res a {
	display: block;
	padding: 16px 20px;
	border: 1px solid transparent;
	border-radius: var(--radius-tegel);
	text-decoration: none;
	transition: background var(--motion-duur-hover) var(--motion-curve-uit), border-color var(--motion-duur-hover) var(--motion-curve-uit);
}

.res a:hover {
	background: var(--kleur-glas-vol);
	border-color: var(--kleur-glas-rand);
}

.res-kruimel {
	display: block;
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-tekst-2);
	margin-bottom: 2px;
}

.res-titel {
	display: block;
	font-family: var(--type-familie-tekst);
	font-size: 1.16rem;
	font-weight: var(--type-gewicht-kop);
	line-height: 1.3;
}

.res-sam {
	display: block;
	font-size: 0.95rem;
	color: var(--kleur-tekst-2);
	margin-top: 3px;
}

/* ---------- voet ---------- */

/* De voet zoals .zv op zakenmaat.nl: diep zand met een lijn erboven, zodat
   elke pagina eindigt zoals de site. Het logo volgt de regels van de kop. */
.voet {
	margin-top: 0;
	padding: 32px 24px;
	font-size: var(--type-maat-klein);
	background: var(--kleur-grond-diep);
	border-top: 1px solid var(--kleur-rand);
	color: var(--kleur-tekst-2);
}

.voet-merk {
	display: inline-flex;
	border-radius: var(--radius-tip);
}

.voet-in {
	max-width: 1560px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
}

.voet a:not(.voet-merk) {
	color: var(--kleur-tekst);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--kleur-tekst) 40%, transparent);
	text-underline-offset: 3px;
	transition: color var(--motion-duur-hover) var(--motion-curve-uit), text-decoration-color var(--motion-duur-hover) var(--motion-curve-uit);
}

.voet a:not(.voet-merk):hover {
	color: var(--kleur-link);
	text-decoration-color: currentColor;
}

/* ---------- reveal, render-safe ---------- */

/* Standaard zichtbaar. Alleen als JS draait mag er iets verborgen worden,
   anders blijft de halve pagina leeg in een platte render of bij een JS-fout.
   Alleen op kaarten, nooit op lopende tekst: een alinea die invliegt terwijl
   je leest is hinderlijk, en dat kostte de marketingsite een
   toegankelijkheidspunt. */
.reveal {
	opacity: 1;
	transform: none;
}

html.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s var(--motion-curve-uit), transform 0.5s var(--motion-curve-uit);
}

html.js .reveal.in {
	opacity: 1;
	transform: none;
}

/* ---------- responsief ---------- */

/* Let op: dit breekpunt staat ook in docs.js (matchMedia in meetlat).
   Verschuif je er een, verschuif dan allebei, anders klapt de lat op een
   andere breedte open dan waarop de layout omschakelt en merkt niemand het. */
@media (max-width: 1180px) {
	/* De rail staat in de bron ná de leeskolom, want dat is de goede vololgorde
	   voor een schermlezer: eerst het artikel, dan wat erbij hoort. Zonder de
	   order-regel hieronder rendert hij op tablet en telefoon ónder de volledige
	   tekst, en dan doet een inhoudsopgave niets: je leest hem pas als je klaar
	   bent. De meetlat is de signature van deze site en verdween daarmee stil op
	   ongeveer de helft van de viewports. Gevonden in de review van 28 juli 2026. */
	/* Blijft een grid. In flexbox zou align-items: start uit de basisregel de
	   kruis-as sturen en krimpt de rail naar fit-content, gemeten 136px in een
	   kolom van 489px. order werkt op een grid-item net zo goed. */
	.artikel-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* display: contents laat de twee kinderen los van elkaar ordenen. Anders
	   hijst order -1 de hele rail omhoog, inclusief het gecontroleerd-stempel,
	   en dat stond op een telefoon boven de titel: 52 procent van het scherm vol
	   voordat de lezer zag op welke pagina hij was. De meetlat hoort boven de
	   tekst, het stempel eronder. Gevonden in de derde reviewronde. */
	.rail {
		display: contents;
	}

	/* order op .lat-houder en niet op .lat-vouw. De vouw wordt door JS binnen
	   die houder gebouwd, dus alleen de houder is een grid-item en alleen
	   daarop doet order iets. */
	.lat-houder {
		order: -1;
		max-width: var(--leeskolom);
		padding-bottom: 4px;
		border-bottom: 1px solid var(--kleur-rand);
	}

	/* Zonder JS bouwt niemand de vouw, en op een pagina met minder dan drie
	   koppen stopt docs.js bewust voortijdig. Dan bleef er een lege doos van
	   5px met een randlijn dwars over de leeskolom staan, boven de titel. */
	.lat-houder:empty {
		display: none;
	}

	.stempel {
		order: 1;
		max-width: var(--leeskolom);
	}

	/* Ingeklapt, anders duwt de inhoudsopgave op een telefoon het artikel onder
	   de vouw. Details en summary in plaats van een eigen knop, want dat geeft
	   de toetsenbord- en schermlezer-semantiek gratis. Let op: dit is geen
	   terugval zonder JS. De hele vouw wordt door docs.js gebouwd, dus zonder
	   JS is er geen inhoudsopgave en valt er ook niets in te klappen. */
	/* Alleen de padding is hier breedte-afhankelijk: de lat is op smal een
	   aanraakdoel en heeft dus meer hoogte nodig. Al het andere komt uit
	   .lat-kop. Dit blok herhaalde daar zeven declaraties van en week er op
	   drie punten stilletjes van af, waardoor .lat-kop aanpassen op smal geen
	   effect had. Gevonden in de review van 28 juli 2026. */
	.rail-vouw > summary {
		padding: 10px 0;
	}

}

@media (max-width: 900px) {
	.shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.zijbalk {
		position: fixed;
		inset: var(--topbar-h) auto 0 0;
		width: min(320px, 86vw);
		z-index: 35;
		background: var(--kleur-grond);
		border-right: 1px solid var(--kleur-rand);
		padding: 24px 20px 48px;
		transform: translateX(-101%);
		/* Ook uit de tabvolgorde halen. Met alleen een transform blijven de 36
		   links focusbaar, en dan verdwijnt een toetsenbordgebruiker na het
		   zoekveld in een onzichtbaar menu zonder zichtbare focusring. De
		   vertraagde visibility laat de schuifanimatie wel afmaken. */
		visibility: hidden;
		transition: transform var(--motion-duur-menu) var(--motion-curve-uit), visibility 0s linear var(--motion-duur-menu);
		max-height: none;
	}

	.zijbalk.is-open {
		transform: none;
		visibility: visible;
		transition: transform var(--motion-duur-menu) var(--motion-curve-uit), visibility 0s linear 0s;
		box-shadow: var(--schaduw-op);
	}

	/* De knop staat in de bron na de acties, want daar hoort hij logisch. Op
	   mobiel moet hij vooraan staan, anders duwt de app-knop hem buiten beeld
	   en is de hele navigatie onbereikbaar. Dat gebeurde in de eerste versie:
	   zichtbaar op de mobiele screenshot van de eigen inspectie. */
	.zijbalk-knop {
		display: block;
		order: -1;
		flex-shrink: 0;
	}

	.knop-terug {
		display: none;
	}

	.zoek {
		max-width: none;
		min-width: 0;
	}

	.inhoud {
		padding-top: 32px;
	}

	.verder-kaarten {
		grid-template-columns: 1fr;
	}
}

/* De bovenbalk breekt hieronder naar twee regels: het zoekveld gaat naar een
   eigen regel eronder.

   Waarom 820px en niet 620px, waar dit eerst stond. In de balk kunnen `.merk`
   en `.topbar-acties` allebei niet krimpen (`flex-shrink: 0`), dus alles wat
   er tekort is gaat van het zoekveld af, en dat mag onder 900px naar
   `min-width: 0`. Reken het na met de productienaam "Zakenmaat documentatie":
   hamburger 40 plus merkblok 355 plus app-knop 119 plus drie gaps 72 is 586px
   vast, en met de padding erbij houdt een venster van 700px nog 14px
   tekstruimte over in het zoekveld. Onder 640px liep de balk zelfs over zijn
   container heen, en er staat nergens een `overflow-x`-vangnet op de pagina.

   Lokaal zie je daar niets van, want de sitenaam is daar "docs.zakenmaat" en
   die is 80px korter. Meet dit dus op productie of met de echte naam, niet op
   je eigen machine. Gevonden in de tweede ux-reviewronde van 29 juli 2026. */
@media (max-width: 820px) {
	/* De sticky-offsets moeten mee met de hogere balk. Dit is de terugval;
	   docs.js meet de echte hoogte en overschrijft hem, zodat de waarde niet
	   stil verkeerd wordt zodra er iets aan de balk verandert. */
	:root {
		--topbar-h: 112px;
	}

	.topbar {
		height: auto;
	}

	.topbar-in {
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px 14px;
	}

	/* Het zoekveld en de schakelaar delen de tweede regel: het veld vult
	   alles behalve de knop en de gap. Zo komt er op de eerste regel niets
	   bij, want daar passen hamburger, merk en "Open de app" net. */
	.zoek {
		order: 3;
		flex: 1 1 calc(100% - var(--ruimte-tikdoel) - 10px);
		min-width: 0;
	}

	.thema-knop {
		order: 4;
	}

	.merk {
		margin-right: auto;
	}
}

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

	.merk-sub {
		display: none;
	}

	/* De staart van de sitenaam gaat mee weg, zodat "Open de app" naast het
	   merk past en de eerste regel niet alsnog omslaat. Zie de toelichting in
	   header.php. */
	.merk-naam-staart {
		display: none;
	}

	.shell {
		padding: 0 16px;
	}

	/* De hoogte blijft 44px, want het is een aanraakdoel; alleen de zijkanten
	   worden smaller zodat de knop naast het merk past. */
	.knop {
		padding: 0 16px;
	}
}

/* ---------- reduced motion ---------- */

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

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.reveal,
	html.js .reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- hover alleen waar een muis is ----------
   Op een aanraakscherm blijft een hover-staat na een tik gewoon hangen tot je
   ergens anders tikt. De kaarten liften 6px met een schaduw, de startkaart 3px
   en de pijlen schuiven 6px, dus een telefoon hield een half opgetilde kaart
   vast na elke aanraking. Deze regels zetten alleen de bewegende delen terug;
   de kleurwissels blijven staan, want die lezen als bevestiging van je tik.
   Gevonden in de review van 28 juli 2026. */

@media (hover: none) {
	/* .start.start-stil staat er apart bij. Die selector is (0,3,0) om de
	   goud-hover te verslaan, en een media-query telt niet mee in
	   specificiteit, dus zonder deze regel hield de tweede startkaart zijn
	   schaduw vast na een tik. Gevonden in de derde reviewronde. */
	.knop:hover,
	.knop-terug:hover,
	.thema-knop:hover,
	.start:hover,
	.start.start-stil:hover,
	.kaart-link:hover,
	.verder-kaart:hover {
		transform: none;
		box-shadow: none;
	}

	.start:hover .start-pijl,
	.kaart-link:hover .kaart-pijl,
	.verder-kaart:hover .verder-pijl,
	.verder-terug:hover .verder-terug-pijl {
		transform: none;
	}
}

/* ---------- de zoekuitkomst ----------
   Hangt onder het zoekveld in de bovenbalk. Alleen zichtbaar met JS: zonder JS
   post de form gewoon naar de native zoek, en dan is er niets om te tonen. */

.zoekuit {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 45;
	max-height: min(60vh, 460px);
	overflow-y: auto;
	background: var(--kleur-vlak);
	border: 1px solid var(--kleur-glas-paneel-rand);
	border-radius: var(--radius-paneel);
	box-shadow: var(--schaduw-op);
	padding: 6px;
}

.zoekuit-rij {
	display: grid;
	gap: 1px;
	padding: 9px 12px;
	border-radius: var(--radius-veld);
	text-decoration: none;
	color: var(--kleur-tekst);
}

/* is-hier en niet alleen :hover, want de pijltjestoetsen wijzen ook aan en die
   sturen geen hover. */
.zoekuit-rij:hover,
.zoekuit-rij.is-hier {
	background: var(--kleur-accent-goud-was);
}

.zoekuit-pad {
	font-size: var(--type-maat-groepslabel);
	font-weight: var(--type-gewicht-label);
	letter-spacing: var(--type-spatie-groepslabel);
	text-transform: uppercase;
	color: var(--kleur-link);
}

.zoekuit-titel {
	font-family: var(--type-familie-tekst);
	font-size: 1rem;
	font-weight: var(--type-gewicht-kop);
	line-height: 1.3;
}

/* Eén regel, met een ellips. De samenvatting van een pagina is soms lang en
   dan duwt hij de andere treffers uit beeld. */
.zoekuit-sub {
	font-size: 0.86rem;
	color: var(--kleur-tekst-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zoekuit-leeg {
	margin: 0;
	padding: 12px;
	font-size: 0.9rem;
	color: var(--kleur-tekst-2);
}

/* Onder 620px breekt de bovenbalk naar twee regels en wordt het zoekveld zo
   breed als het scherm. De lijst mag dan niet uit beeld lopen. */
@media (max-width: 620px) {
	.zoekuit {
		max-height: 56vh;
	}
}

/* ---------- aanraakdoelen ---------- */

/* Knoppen erven de letter, zodat ook een knop met alleen een icoon (de
   zijbalkknop) niet terugvalt op de systeemletter voor zijn verborgen label. */
button {
	font: inherit;
}

/* Stijlgids 08 (besluit 7 oktober 2026): alles wat je aantikt is onder een
   vinger minstens 44 bij 44, ook velden en de rail. Op desktop blijven de
   compacte maten staan. Gevonden in de review van 26 oktober 2026. */
@media (pointer: coarse) {
	.zoek input,
	.rail-vouw > summary {
		min-height: var(--ruimte-tikdoel);
	}

	/* De kopieerknop groeit naar 44px, dus het codeblok krijgt bovenin
	   evenveel meer ruimte: knop plus tweemaal de 10px eromheen. */
	.prose .kopieer {
		min-height: var(--ruimte-tikdoel);
	}

	.prose .code-wrap pre {
		padding-top: calc(var(--ruimte-tikdoel) + 20px);
	}

	.zb-item {
		display: flex;
		align-items: center;
		min-height: var(--ruimte-tikdoel);
	}

	.voet a:not(.voet-merk) {
		display: inline-flex;
		align-items: center;
		min-height: var(--ruimte-tikdoel);
	}
}