/*
 * Designtokens FABRIEK59.
 *
 * Eén bron voor kleur, letter, maat, ruimte en beweging. Elke waarde hier komt
 * uit _kennis/merk/fabriek59-brandbook.md, dat op 17 augustus 2026 regel voor
 * regel is afgelezen uit het vorige thema en geverifieerd. Wijkt een waarde af
 * van het brandbook, dan staat de reden erbij.
 *
 * Geen enkele component mag een kleur, maat of duur hardcoderen. Wat hier niet
 * staat, hoort hier eerst bij te komen.
 */

:root {

	/* ===================================================================
	 * Kleur
	 *
	 * Het palet komt van de materialen van de fabriek: verweerd hout,
	 * roestig staal, gebakken baksteen, beton. Geen enkele kleur is puur,
	 * alles heeft warmte.
	 * =================================================================== */

	--color-black: #12100e;        /* donkere achtergrond, en tekst op licht */
	--color-white: #f5f2ed;        /* lichte secties, en tekst op donker */
	--color-shadow: #1a1614;       /* kaarten en de tweede donkere laag */
	--color-deep: #0a0908;         /* footer, de donkerste laag */
	--color-cream: #e5e1da;        /* subtitels op donker */

	/*
	 * Het luik. Eén tint boven --color-shadow, want het paneel moet als een
	 * dichte deur lezen en niet als een leeg vlak. Op --color-shadow zelf is het
	 * verschil met --color-black te klein om te zien dat er iets opengaat.
	 */
	--color-luik: #241f1a;
	--color-gray: #a3a3a3;         /* secundaire tekst en bijschriften */

	/*
	 * De warme gloed. Zit achter een kaart en een Instagram-tegel bij hover en
	 * focus, en in de warme baksteengrond, in components.css en layout.css samen.
	 * Hij stond op elk van die plekken als losse rgba() op een eigen
	 * doorzichtigheid, zes verschillende, dus er was geen enkele plek waar je de
	 * tint kon bijstellen. De alfa's gaan nu via color-mix().
	 *
	 * De naam komt van de lantaarn in de hero, waar deze tint vandaan kwam. Die
	 * lamp is op 17 september 2026 vervallen; de tint blijft, want de kaarten en
	 * tegels dragen hem nog en hernoemen is een vork op zes plekken voor niets.
	 */
	--color-lamp: #ffc478;

	/*
	 * De hover-grond onder een stap in de doorloop op Bedrijfsruimte huren. Een
	 * tint onder --color-white, want de kaart moet oplichten zonder dat de rand
	 * met de sectie eromheen wegvalt.
	 */
	--color-stap-hover: #efeae1;

	--color-red: #b22222;          /* accent: knoppen, badges, actieve staat */
	--color-red-hover: #8b0000;    /* hover op de primaire knop */

	/*
	 * Statuskleuren, uitsluitend voor formulierterugkoppeling. #dc2626 stond
	 * in het vorige thema dertien keer als merk-accent in de templates. Dat is
	 * de fout-rood, en die is hier gereserveerd. Het merk-accent is --color-red.
	 */
	--color-error: #dc2626;
	--color-success: #16a34a;

	/*
	 * De foutkleur op een donkere grond. #dc2626 haalt op #12100e geen 4,5:1, dus
	 * een foutmelding in een formulier op donker zou onleesbaar zijn. Dit is de
	 * lichtere variant, en hij bestaat alleen daarvoor.
	 */
	--color-error-on-dark: #ff8a80;

	/*
	 * --color-rust bestaat bewust niet. In het vorige thema werd hij elf keer
	 * gebruikt en nergens gedefinieerd, waardoor onder meer de focus-rand van
	 * elk formulierveld wegviel. De bedoelde terracotta #c46c49 kwam uit een
	 * oudere paletgeneratie en past niet bij dit rood. Gebruik --color-red.
	 */

	/* --- Tekst op een achtergrond ---------------------------------------
	 *
	 * Eén muted-waarde per grond, niet drie. Het vorige thema gebruikte
	 * 0.70, 0.75 en 0.80 door elkaar, visueel niet te onderscheiden.
	 *
	 * De footer staat op 0.55 en niet op 0.40. Op 0.40 haalde de footertekst
	 * circa 3,9:1 en zakte daarmee door WCAG AA.
	 */
	--text-on-dark: var(--color-white);
	--text-on-dark-muted: rgba(245, 242, 237, 0.75);
	--text-on-dark-faint: rgba(245, 242, 237, 0.55);
	--text-on-light: var(--color-black);
	--text-on-light-muted: rgba(18, 16, 14, 0.75);

	/* --- Overlays en scheidingen ---------------------------------------- */

	--overlay-hero: rgba(0, 0, 0, 0.50);
	--overlay-cta: rgba(0, 0, 0, 0.70);
	/*
	 * Het onderverloop dat tekst over een foto leesbaar houdt. Zelfde waarde als
	 * .frame::after in components.css, waar hij als letterlijke rgba staat; die
	 * regel is ouder en is hier niet aangeraakt, maar hoort dit token over te
	 * nemen zodra iemand hem toch bewerkt. Twee plekken met dezelfde literal is
	 * hoe ze uit elkaar gaan lopen.
	 */
	--scrim-onder: rgba(10, 9, 8, 0.55);
	--overlay-header: rgba(18, 16, 14, 0.90);
	--overlay-header-blur: 12px;

	--border-light: rgba(255, 255, 255, 0.05);   /* scheiding op donker */
	--border-dark: rgba(18, 16, 14, 0.05);       /* scheiding op licht */

	/* --- Waas, voor eyebrows en gloeden -------------------------------- */

	--wash-red: rgba(178, 34, 34, 0.10);
	--wash-red-soft: rgba(178, 34, 34, 0.08);

	/* ===================================================================
	 * Letter
	 *
	 * Twee dragende families, en het contrast tussen die twee is het merk: de
	 * warme verhalende serif tegenover de koele functionele uppercase sans.
	 *
	 * Daarnaast staat er sinds 7 september 2026 een derde, en die draagt niets:
	 * Videopac zet alleen de grote 59 in de hero en kent alleen de cijfers 0 tot
	 * en met 9. Vandaar --font-stencil en niet --font-display, want die naam
	 * botst met de CSS-descriptor font-display en maakt elke grep dubbelzinnig.
	 * De terugval loopt naar de serif, zodat een mislukte lading de tekening van
	 * voor 7 september oplevert en geen Times.
	 * =================================================================== */

	--font-serif: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
	--font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-stencil: 'Videopac', var(--font-serif);

	/* --- De schaal ------------------------------------------------------ */

	/*
	 * De ondergrens staat op 3rem en niet op 3.75rem. Op een venster van 320 bij
	 * 568 liep de hero-tekst op 60px uit tot vijf regels, en daarmee viel de
	 * primaire knop onder de vouw. Op 48px scheelt dat een regel. De sticky
	 * bezoek-pil op mobiel houdt de primaire actie daar altijd bereikbaar.
	 *
	 * Elke middenterm draagt een rem-deel. Met alleen vw staat een kop stil
	 * zodra de bezoeker zijn browser op 150 of 200 procent zet: vw is een
	 * deel van het venster en weet niets van de tekstinstelling. De hero
	 * groeide daardoor nul procent mee, wat de zwaarste van de vier was.
	 * Op 390 en 1280 geeft elke formule exact hetzelfde als de oude kale vw;
	 * de grootste afwijking in de band ertussen is 6,4px, op de hero op 768.
	 */
	--text-hero: clamp(3rem, 1rem + 6.75vw, 8rem);          /* 48 naar 128px */
	--text-h1: clamp(2.25rem, 1rem + 3.4375vw, 3.75rem);    /* 36 naar 60px */
	--text-h2-large: clamp(2.25rem, 1rem + 3.4375vw, 3.75rem); /* 36 naar 60px */
	--text-h2: clamp(1.875rem, 0.8rem + 2.75vw, 3rem);      /* 30 naar 48px */

	/*
	 * Deze drie stonden vast van 320 tot 2560, dus een h3 was op een telefoon
	 * even groot als op een 27-inch scherm. Ze groeien nu van hun huidige maat
	 * op 768px naar een kwart meer op 1920px, met de huidige waarde als
	 * ondergrens. Onder 768 verandert er dus niets, en dat is met opzet: de
	 * pijn zat aan de bovenkant, waar de koppen niet meegroeiden met de rest.
	 */
	--text-h2-label: clamp(1.875rem, 1.5625rem + 0.651vw, 2.34375rem);  /* 30 naar 37.5px */
	--text-h3: clamp(1.5rem, 1.25rem + 0.5208vw, 1.875rem);             /* 24 naar 30px */
	--text-body-lg: 1.125rem;                      /* 18px, intro-alinea */
	--text-body: 1rem;                             /* 16px, lopende tekst */
	--text-body-sm: 0.875rem;                      /* 14px, bijschrift en microcopy */
	--text-quote: clamp(1.25rem, 1.0417rem + 0.434vw, 1.5625rem);       /* 20 naar 25px */
	--text-button: 0.75rem;                        /* 12px */
	--text-label: 0.875rem;                        /* 14px, een label dat gelezen moet worden */
	--text-badge: 0.625rem;                        /* 10px */

	/*
	 * Het mobiele menu is alleen zichtbaar onder 900px, dus hier zit de pijn
	 * juist aan de onderkant en niet aan de bovenkant: 36px per menu-item is
	 * op een venster van 320 breed veel, en op een liggende telefoon van 390
	 * hoog past de lijst er niet meer in. Deze clamp loopt daarom omlaag in
	 * plaats van omhoog, en raakt zijn oude waarde weer rond 630px.
	 */
	--text-mobile-menu: clamp(2rem, 1.6rem + 1.65vw, 2.25rem);          /* 32 naar 36px */

	/*
	 * Afwijking van het brandbook, met opzet. Daar staat de body op 14px,
	 * bewust klein omdat de vorige site beeld-geleid was en nauwelijks tekst
	 * had. De aangeleverde teksten van 14 augustus zijn 2295 woorden over zes
	 * pagina's, met alinea's van vier tot zes regels. Op die lengte is 14px te
	 * klein om comfortabel te lezen. De 14px blijft beschikbaar als
	 * --text-body-sm voor bijschriften en microcopy, waar hij hoort.
	 * Het brandbook noemt dit zelf als open afweging bij de herbouw.
	 */

	/* --- Letterafstand -------------------------------------------------- */

	--tracking-tighter: -0.04em;   /* alle koppen en de wordmark */
	--tracking-normal: 0;          /* h3, kaarttitels */
	--tracking-wide: 0.08em;       /* kaartlabels op 14px, die gelezen moeten worden */
	--tracking-widest: 0.1em;      /* knoppen, badges, navigatie, footer-koppen */

	/*
	 * Twee label-maten, met een reden. Het brandbook zet labels op 12px met
	 * 0.1em. Moooi, een van de referenties die de klant zelf aanleverde, meet
	 * zijn labels op 14px met 0.06em (gemeten, niet geschat). Voor een doelgroep
	 * van 60 tot 90 jaar is 12px te klein voor een label dat informatie draagt.
	 * Dus: 12px voor een badge of knoptekst van een of twee woorden, 14px voor
	 * een categorielabel op een kaart. Zie ux-onderzoek/steal-sheet-home.md.
	 */

	/* --- Regelafstand --------------------------------------------------- */

	--leading-none: 1;             /* hero-titel, knoptekst */
	--leading-tight: 1.1;          /* h1, h2 groot */
	--leading-snug: 1.15;          /* h2 */
	--leading-normal: 1.3;         /* h3 */
	--leading-relaxed: 1.5;        /* pull quote */
	--leading-loose: 1.7;          /* korte lopende tekst */
	--leading-loosest: 1.8;        /* langere lopende tekst, leest merkbaar beter */

	/* --- Gewicht -------------------------------------------------------- */

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-black: 900;

	/* ===================================================================
	 * Ruimte
	 *
	 * Kernprincipe: halveren op mobiel. Onder 768px gaat elke sectie-spacing
	 * door twee, in één stap. Zie base.css, waar dat één keer centraal
	 * gebeurt in plaats van per sectie. In het vorige thema hadden drie
	 * secties hun padding hardgecodeerd en halveerden ze dus niet, waardoor
	 * de wandelroute-CTA op een telefoon 12rem lucht kreeg waar de rest 4rem
	 * had.
	 * =================================================================== */

	/* Het plafond van de sectieschaal staat apart, want een kort scherm zet
	   alleen dat plafond lager (zie het max-height-blok onderaan). Zou dat
	   blok het token zelf zetten, dan zou het straks een clamp() overschrijven
	   in plaats van hem af te toppen, en dan is de vloeiende schaal daar weg. */
	--section-xl-max: 12rem;
	--section-lg-max: 8rem;
	--section-md-max: 6rem;
	--section-sm-max: 5rem;

	/* De schaal loopt vloeiend van de mobiele waarde naar de desktopwaarde,
	   met de lijn door (390px, mobiel) en (1280px, desktop). Op 320, 390, 1280,
	   1440, 1920 en 2560 komt er exact hetzelfde uit als voor deze ronde; het
	   verschil zit uitsluitend in de band van 391 tot 1279, waar tot 8
	   september 2026 een sprong van 96px op een enkele pixel vensterbreedte
	   stond.

	   De middenterm draagt met opzet een rem-deel. Kale vw reageert niet op de
	   tekstinstelling van de bezoeker, dus met alleen vw zou de ruimte om een
	   sectie stil blijven staan zodra iemand zijn browser op 150 of 200 procent
	   zet, terwijl de tekst erbinnen wel groeit. */
	--section-xl: clamp(6rem, 3rem + 11.25vw, var(--section-xl-max));
	--section-lg: clamp(4rem, 2rem + 7.5vw, var(--section-lg-max));
	--section-md: clamp(3rem, 1.5rem + 5.625vw, var(--section-md-max));
	--section-sm: clamp(2.5rem, 1.25rem + 4.688vw, var(--section-sm-max));

	--gap-xl: clamp(3rem, 1.5rem + 5.625vw, 6rem);
	--gap-lg: clamp(2rem, 1.5rem + 1.875vw, 3rem);
	--gap-md: clamp(1.5rem, 1rem + 1.875vw, 2.5rem);
	--gap-sm: 2rem;
	--gap-xs: 0.5rem;

	--card-padding: 2rem;
	/* Het beeld van een tijdlijnhalte: tot 11 september 2026 de volle kolom
	   (ruim 1100px op 1440), sindsdien begrensd op ongeveer twee derde daarvan,
	   op verzoek van Sepp ("de foto's in de tijdlijn wat kleiner"). Onder
	   900px vult het beeld weer de volle breedte, zie components.css. */
	--halte-beeld-max: 50rem;
	/* De plattegrond in de rondgang op Bezoekers, met de bedrijvenlijst ernaast.
	   De bron is 1400 breed en Gregs kaart heeft een legenda met dertien namen;
	   rond de 900px is die leesbaar en past de kaart nog met kop en filter op een
	   scherm. */
	--rondgang-kaart-max: 56rem;
	--button-py: 1rem;
	/* De zijpadding van een knop groeit mee met het venster in plaats van overal
	   40px te zijn. Gemeten op 320px met de vaste waarde: 80 van de 278 pixels
	   van de knop gingen op aan lucht, en daardoor brak "Kom de geschiedenis
	   beleven" over twee regels op home en "Vraag een rondleiding aan" over twee
	   op Bedrijfsruimte huren. Hij loopt nu van 24px op 320 naar 40px vanaf
	   ongeveer 1700, dus op desktop verandert er niets zichtbaars.

	   De ondergrens staat op 1.5rem en niet lager omdat een knop met minder dan
	   24px lucht naast zijn tekst als een tekstlabel begint te lezen in plaats
	   van als een knop. */
	--button-px: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);

	/* --- Containers ----------------------------------------------------- */

	--container: 1280px;
	--container-narrow: 48rem;     /* tekstsecties */
	--container-text: 40rem;       /* leesregel */
	/* De zijmarge groeide tot 8 september 2026 bewust niet mee, en dat kostte
	   aan twee kanten. Op 320 nam hij 48 van de 320 pixels, bijna een zesde van
	   het scherm, op de enige breedte waar de tabel op Bedrijfsruimte huren al
	   overliep. Op 2560 las dezelfde 24px als een naad tegen de schermrand in
	   plaats van als marge. Hij loopt nu van 20px op 320 naar 48px op 2560.
	   De twee plekken die met dit token rekenen, --zwevend-vrij hieronder en
	   de full-bleed margin-inline in layout.css, lezen allebei hetzelfde token
	   en blijven dus per definitie sluitend. */
	--container-px: clamp(1.25rem, 1rem + 1.5vw, 3rem);

	/* --- Het storytelling-grid ------------------------------------------
	 *
	 * De verspringing van de rechterkolom is de compositorische vondst van
	 * het ontwerp: beeld en tekst staan nooit op één lijn, wat het museale,
	 * gedrukte gevoel geeft. Zonder deze waarde is het een gewone
	 * tweekolomslayout.
	 */
	--storytelling-offset: clamp(0rem, -5.3rem + 21.625vw, 12rem);

	/* ===================================================================
	 * Breekpunten
	 *
	 * Custom properties werken niet in een media-query. Deze staan hier als
	 * de vastgelegde waarden; in een media-query typ je het getal, en je
	 * gebruikt géén ander getal. Het vorige thema had 48 kale breekpunten
	 * door elkaar.
	 *
	 *   --bp-md   768px   het enige breekpunt dat de layout kantelt
	 *   --bp-lg  1024px   alleen voor fijnafstemming
	 * =================================================================== */

	--bp-md: 768px;
	--bp-lg: 1024px;

	/* ===================================================================
	 * Hoeken
	 *
	 * Expliciet besluit, want het vorige thema mengde 0, 2, 4, 8 en volledig
	 * rond zonder regel. De doctrine is scherp, want industrieel. Radius is
	 * dus de uitzondering en staat alleen waar het brandbook hem documenteert.
	 * =================================================================== */

	--radius-none: 0;              /* standaard: knoppen, kaarten, secties, beeld */
	--radius-sm: 4px;              /* uitsluitend ingelijst beeld */
	--radius-md: 8px;              /* uitsluitend de FAQ-accordeon */
	--radius-pill: 999px;          /* de ronde eyebrow-variant en de band-pijlen */

	/* ===================================================================
	 * Schaduw
	 * =================================================================== */

	--shadow-card: 0 4px 20px rgba(18, 16, 14, 0.08);
	--shadow-card-hover: 0 12px 40px rgba(18, 16, 14, 0.12);
	--shadow-button: 0 4px 20px rgba(178, 34, 34, 0.25);
	--shadow-button-hover: 0 8px 30px rgba(178, 34, 34, 0.35);
	--shadow-frame-dark: 0 20px 60px rgba(0, 0, 0, 0.50);
	--shadow-frame-light: 0 20px 60px rgba(0, 0, 0, 0.15);

	/* ===================================================================
	 * Beweging
	 *
	 * Het vocabulaire is traag en zwaar, en dat is bewust. De beeldeffecten
	 * op 1 seconde zijn ongeveer drie keer trager dan gebruikelijk. Dat is
	 * wat de site duur laat aanvoelen.
	 * =================================================================== */

	/*
	 * Hier stond --duration-label: 0.2s met de comment "formulierlabels", en die
	 * is op 8 september 2026 weggehaald. Geen enkele regel riep hem aan, en het
	 * zwevende label draait terecht op --duration-base: 0,2s zou tegen de eigen
	 * regel hierboven ingaan dat de beweging op deze site traag en zwaar is.
	 * Een token dat niemand gebruikt is geen reserve maar een uitnodiging.
	 */
	--duration-base: 0.3s;         /* kleur, hover, transform: de standaard */
	--duration-chrome: 0.4s;       /* header, mobiel menu, accordeon */
	--duration-button: 0.5s;       /* knoppen */
	--duration-reveal: 0.8s;       /* scroll-onthulling */
	--duration-image: 1s;          /* alles wat met beeld te maken heeft */

	/*
	 * Gemeten curve, geen zelf gekozen curve. Dit is de transition die Moooi op
	 * zijn primaire klikbare tegels heeft staan: opacity 0.5s
	 * cubic-bezier(0.19, 1, 0.22, 1). Een expo-out met een lange staart. Hier
	 * stond eerder cubic-bezier(0.16, 1, 0.3, 1), uit dezelfde familie maar
	 * zonder bron.
	 */
	--ease-out: cubic-bezier(0.19, 1, 0.22, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Beeldbehandeling ----------------------------------------------- */

	--hero-overscan: 1.05;         /* zodat de randen van een hero nooit zichtbaar worden */
	--image-zoom: 1.1;             /* hover op kaart- en Instagram-beeld */
	--knop-zoom: 1.08;             /* hover op een ronde knop, kleiner dan de beeldzoom */

	/* ===================================================================
	 * Patroon
	 *
	 * Diagonale hatch op 3 procent over donkere secties. Nauwelijks
	 * zichtbaar, maar het geeft een zwart vlak textuur in plaats van
	 * vlakheid, en het verwijst naar weefsel. Bij een textielfabriek klopt
	 * dat precies.
	 * =================================================================== */

	--pattern-weave: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 35px,
		rgba(255, 255, 255, 0.1) 35px,
		rgba(255, 255, 255, 0.1) 70px
	);
	--pattern-weave-opacity: 0.03;

	/*
	 * Materiaal, de tweede laag textuur.
	 *
	 * Het weefpatroon hierboven staat op 3 procent en is met opzet bijna
	 * onzichtbaar. Dat is te weinig om een vlak als materiaal te laten lezen, en
	 * daarom bleef de site "te zwart" voelen. Deze drie zijn fotografisch en
	 * dragen wel. Ze vervangen het weefpatroon niet, ze komen erbovenop.
	 *
	 * De paden zijn relatief aan dit bestand, dus vanuit assets/css naar
	 * assets/img. Herkomst en licentie van elk beeld staan in assets/img/HERKOMST.md;
	 * alle drie zijn Pexels en mogen zonder naamsvermelding.
	 */
	--texture-brick-warm: url('../img/textuur-baksteen-warm.webp');
	--texture-brick-light: url('../img/textuur-baksteen-licht.webp');
	--texture-steel: url('../img/textuur-metaal.webp');

	/*
	 * De korrel. Een SVG-ruis als data-URI, dus geen extra verzoek en geen
	 * externe host.
	 *
	 * Wordt gebruikt als ACHTERGRONDBEELD op de sectie-gronden, en dus niet als
	 * losse laag over de pagina. Dat is een gemeten keuze: als vaste laag met
	 * z-index boven de inhoud kostte hij 0,8 contrast op elk hero-label, en op
	 * Contact zakte dat van 4,74 naar 3,95 bij een eis van 4,5. Als
	 * achtergrondbeeld ligt hij onder de letters en kost hij niets.
	 *
	 * De sterkte komt uit background-blend-mode: soft-light en niet uit een lage
	 * opacity. Ook dat is gemeten. Witte ruis er gewoon overheen tilt de grond op:
	 * de diepste sectie ging van 9 naar 18 bij opacity 0,10 en naar 22 bij 0,15.
	 * De vier-traps donkerschaal is volgens base.css het eigenlijke ontwerp, en
	 * die schaal comprimeert dan. Met soft-light op volle sterkte krijg je twaalf
	 * tinten textuur voor vijf punten optillen, tegen veertien tinten voor negen
	 * punten bij de gewone variant. Meer textuur per punt verlies.
	 */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

	--gradient-dark: linear-gradient(135deg, #12100e 0%, #1a1614 100%);

	/* ===================================================================
	 * Stapeling
	 *
	 * Eén schaal, zodat een z-index nooit meer op gevoel wordt gekozen.
	 * =================================================================== */

	/*
	 * De hoogte van de vaste header, gemeten en niet geschat: 104px onder 1024
	 * en 112px daarboven. Staat als token omdat de hero eronderdoor moet blijven;
	 * verandert de header van hoogte, dan verandert dit getal mee en niets anders.
	 */
	--header-hoogte: 104px;

	--z-base: 1;
	--z-overlay: 10;
	--z-header: 100;
	--z-menu-toggle: 110;
	/*
	 * De toestemmingsstrook ligt boven de zwevende besturing en onder het menu.
	 *
	 * Boven de menuknop en de bezoek-pil, want die staan op mobiel in dezelfde
	 * onderhoek en zouden anders over de weigerknop heen liggen. Dat is precies het
	 * defect dat op 26 augustus de laatste footerlink onbereikbaar maakte, en op een
	 * weigerknop weegt het zwaarder: die moet even makkelijk te raken zijn als
	 * accepteren, anders is de toestemming juridisch niet geldig.
	 *
	 * En onder het menu, want een schermvullend menu hoort alles te bedekken. De
	 * strook is geen cookiemuur en mag dus best even uit beeld.
	 */
	--z-consent: 115;
	--z-menu: 120;

	/*
	 * En de menuknop zelf gaat er weer overheen zodra het menu open staat.
	 *
	 * Anders is de knop die het menu moet sluiten juist de enige die eronder ligt.
	 * Dat was hier het geval: het menu is `inset: 0` op --z-menu en de knop stond op
	 * --z-menu-toggle, dus zodra hij open ging verdween de knop achter het menu. Hij
	 * was daarmee niet alleen onzichtbaar maar ook dood, en sluiten kon alleen nog
	 * met Escape of door een link te kiezen. Een telefoon heeft geen Escape.
	 *
	 * Gemeten op 8 september 2026 op staging, op 834 en op 390: elementFromPoint
	 * midden op de knop gaf `nav.nav-mobile.is-open` terug.
	 */
	--z-menu-sluit: 130;

	--z-skiplink: 200;

	/* ===================================================================
	 * Raakvlak en focus
	 * =================================================================== */

	--touch-min: 48px;             /* minimale raakhoogte op alles wat interactief is */
	--touch-lg: 5rem;              /* de afspeelknop van de videosectie vanaf 768px */
	--focus-width: 3px;
	--focus-offset: 3px;

	/*
	 * De zwevende besturing op mobiel: de menuknop rechtsonder en de
	 * bezoek-pil linksonder. Allebei position: fixed, allebei weg vanaf
	 * 900px.
	 *
	 * Deze maat staat hier en niet in de component omdat de footer hem moet
	 * kennen. Zonder die kennis legt de knop zich op maximale scrollpositie
	 * over de laatste footerlink, en daar is niet omheen te scrollen: op
	 * 26 augustus 2026 was "Facebook" 100 procent bedekt en gaf
	 * elementFromPoint op het midden van die link de knop terug in plaats
	 * van de link. Gemeten op Contact, Nieuws, Bedankt, Home en Bezoekers,
	 * dus op de hele site.
	 *
	 * --zwevend-vrij is de ruimte die de footer onderaan moet vrijhouden:
	 * de knop zelf, plus de afstand tot de onderrand, plus diezelfde afstand
	 * nog een keer als lucht eronder.
	 *
	 * IN PIXELS EN NIET IN REM, sinds 8 september 2026. Dit is een aanraakvlak
	 * en geen tekstmaat: er staat geen zichtbare tekst in de knop, alleen een
	 * icoon en een label voor de schermlezer. Op 4rem verdubbelde hij mee met de
	 * lettergrootte van de bezoeker, en dan at hij de pil ernaast op. Gemeten op
	 * 390px met de standaardlettergrootte van Chrome op 32px: de knop werd 128px,
	 * de bezoek-pil hield 142px over waarvan 96px padding, en "Plan je route" werd
	 * afgekapt. 64px blijft ruim boven de 44px die WCAG 2.5.5 vraagt.
	 */
	--zwevend-knop: 64px;
	--zwevend-vrij: calc( var( --zwevend-knop ) + var( --container-px ) * 2 );

	/*
	 * De focus-rand is rood op licht en licht op donker, en dat is een
	 * correctie op het brandbook. Daar staat de rand overal op --color-red,
	 * maar rood op de donkere grond haalt 2,9:1 en WCAG 1.4.11 vraagt 3:1
	 * voor een focus-indicator. Op de donkere sectieklassen kantelt deze
	 * token daarom mee, zie base.css. Op licht haalt rood 5,8:1.
	 */
	--focus-color: var(--color-red);
}

/* =======================================================================
 * Hier stond tot 8 september 2026 een @media (max-width: 767px) dat de hele
 * spacingschaal in één stap halveerde.
 *
 * Wat het deed klopte, wat het kostte niet: op 767px was --section-xl 6rem en
 * op 768px 9,5rem, en de processectie op Historie ging daardoor van 2024 naar
 * 1557px hoog en de pagina van 9390 naar 8774px. 616px verschil tussen twee
 * vensters die één pixel schelen, en daartussen was niets afgeregeld.
 *
 * De clamp()-schaal hierboven neemt de taak over en houdt exact dezelfde
 * waarden aan de twee uiteinden: de oude mobiele waarde is nu de ondergrens
 * en de oude desktopwaarde de bovengrens. Wat verdwijnt is de sprong.
 *
 * Twee regels uit dat blok zijn niet meeverhuisd omdat ze niets deden.
 * --block-padding had nul gebruikers in het hele thema en is helemaal weg.
 * --storytelling-offset: 0 was dode code: dat token wordt alleen gelezen
 * binnen @media (min-width: 768px) in layout.css, dus de mobiele waarde
 * kwam nooit aan bod. Zijn clamp begint nu vanzelf op nul.
 * ======================================================================= */

/* =======================================================================
 * Kort scherm: het sectie-ritme zakt een stap
 *
 * De spacing hierboven halveert op BREEDTE. Dat dekt de telefoon, maar niet de
 * laptop: 1512x765 is een breed scherm en krijgt dus de volle 8rem boven en
 * onder, 256px, op een venster van 765px. Dat is een derde van het scherm aan
 * lucht, en het is de reden dat de meetlat op 1 september 2026 dertien secties
 * te hoog noemde terwijl de inhoud van die secties gewoon paste.
 *
 * De cijfers waarop dit is gezet, gemeten op 1 september op de homepage, inhoud
 * zonder padding: doors 531px, quote 648px, bedrijven 685px, praktisch 677px.
 * Alle vier passen in 765. Het was de padding en niet de inhoud.
 *
 * De schaal zakt in verhouding mee, zodat xl nog steeds ruimer is dan lg. Boven
 * 950px hoogte verandert er niets, dus op een 1920x1080-scherm houdt de site de
 * ruimte die het merk vraagt.
 *
 * `min-width: 768px` is geen sierregel: zonder die grens wint dit blok van de
 * mobiele halvering hierboven, want het staat erna en beide zijn even sterk. Een
 * telefoon van 390x844 zou dan MEER sectiepadding krijgen dan nu.
 * ======================================================================= */

@media (min-width: 768px) and (max-height: 950px) {

	:root {
		--section-xl-max: 9.5rem;
		--section-lg-max: 5.75rem;
		--section-md-max: 5rem;
		--section-sm-max: 4rem;
	}
}

/*
 * De header is 8px hoger zodra de navigatie erin staat, en dat gebeurt op 900px
 * en niet op 1024px. Deze grens stond tot 8 september 2026 op 1024, en daarmee
 * loog het token 8px op elk venster tussen 900 en 1023: gemeten op staging is
 * de balk daar 112px terwijl --header-hoogte 104px zei.
 *
 * Dat is niet alleen een getal. Dit token draagt de scroll-padding voor
 * ankerlinks (base.css), de bovenmarge van de eerste sectie (layout.css) en de
 * offset van de twee sticky zijkolommen. Alle drie stonden op precies die
 * breedtes 8px te hoog onder de balk.
 *
 * Dit token krijgt met opzet GEEN clamp, anders dan de spacing hierboven: het
 * is geen ontwerpmaat maar een meting van een echt element, en een waarde
 * ertussenin zou nergens overeenkomen met de balk die de bezoeker ziet.
 */
/* 56.25em is 900px bij de standaardlettergrootte. In em, omdat de balk daar ook
   in staat: bij 200 procent tekst blijft hij in mobiele stand en dan hoort deze
   hoogte er niet bij. De onderbouwing staat bij .nav-primary in components.css. */
@media (min-width: 56.25em) {

	:root {
		--header-hoogte: 112px;
	}
}

/* =======================================================================
 * Liggende telefoon: de balk wordt dunner
 *
 * Een telefoon in landschap geeft 390px hoogte, en daarvan ging 104px op aan de
 * kopbalk. Dat is meer dan een kwart van het scherm voor een logo van 40px met
 * 32px lucht erboven en eronder. Met 16px lucht is de balk 72px, en met de
 * navigatie erin 80px. Die 32px extra ruimte is wat de hero-knop op home,
 * Bezoekers, Route en Wandelroute boven de vouw brengt.
 *
 * Dit blok MOET na het blok hierboven staan: een media-query telt niet mee in de
 * specificiteit, dus wie eerst staat verliest. Gemeten toen het token op 932x430
 * nog 112px zei terwijl de balk 80px was.
 *
 * Dit token en de padding in components.css horen bij elkaar: verandert er een,
 * dan liegt de ander. De meting die dat afdekt staat in ux-onderzoek als de
 * staat `liggend-844x390`.
 *
 * `orientation: landscape` erbij zodat een staande telefoon met een klein
 * venster (een browser-in-app bijvoorbeeld) zijn normale balk houdt.
 * ======================================================================= */

@media (max-height: 520px) and (orientation: landscape) {

	:root {
		--header-hoogte: 72px;
	}
}

@media (max-height: 520px) and (orientation: landscape) and (min-width: 56.25em) {

	:root {
		--header-hoogte: 80px;
	}
}

/*
 * Staand op een korte telefoon wordt de balk juist 8px HOGER, niet lager.
 *
 * Daar verhuist de bezoek-CTA namelijk de balk in (zie .visit-cta in
 * components.css), en die knop is 48px hoog waar het woordmerk 40px is. Gemeten
 * op 8 september 2026 op staging: 112px op zowel 320 als 360 breed.
 *
 * Dit blok MOET na de twee liggend-blokken staan, want een media-query telt niet
 * mee in de specificiteit. Botsen doen ze niet, die twee zijn liggend.
 */
@media (max-height: 700px) and (orientation: portrait) {

	:root {
		--header-hoogte: 112px;
	}
}