/*
Theme Name: BRAUER
Theme URI: https://brauerkranen.nl/
Author: SiteJob
Author URI: https://sitejob.nl/
Description: Maatwerkthema voor BRAUER. Geen paginabouwer, zelf-gehoste fonts, één vaste huisstijl via tokens, SEO/GEO-first. Homepage, blog- en kennisbanksjabloon met een gedeelde blokkenbibliotheek.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brauer
Tags: custom-logo, custom-menu, featured-images, block-patterns, editor-style, wide-blocks, accessibility-ready, translation-ready
*/

/* ==========================================================================
   1. Tokens — HIER BEGIN JE PER KLANT

   Alles in dit blok is merk: kleur, letter, typeschaal, vorm, ritme en
   beweging. Elke waarde hieronder is een plaatshouder die je per klant
   opnieuw bepaalt, vanuit brief/01-merk.md en brief/02-ontwerprichting.md —
   niet alleen de merkkleuren. Houd je een kitwaarde bewust aan, leg dan in
   brief/02 vast waarom.

   Twee lagen. Eerst de ruwe waarden: merkkleuren, neutralen, status. Daarna
   de betekenis-tokens (--bg, --surface, --text, --accent): componenten
   gebruiken alleen die, nooit een hex. Een donkere sectie (.tone-dark, onder
   :root) draait alleen de betekenis-tokens om; geen enkele component hoeft
   mee te veranderen.
   ========================================================================== */

:root {
	/*
	 * Merk — BRAUER, richting "Helemaal jij" (keuze Bryan en Herman, 28-10-2026,
	 * brief/15). Warm papier en zand, mosgroen voor de bediening, koper als
	 * eigen accent uit de conceptkleuren. Geen officieel huisstijlhandboek
	 * ontvangen; dit is het palet van de gekozen richting (brief/01).
	 */
	--brand:       #444A3F; /* mos: knoppen */
	--brand-deep:  #2B2E27; /* mos-diep: hover, donkere vlakken */
	--brand-light: #E3A57C; /* koper licht: accent op donker */
	--koper:       #B8693F; /* conceptkleur koper: punten, focus, kleine accenten (geen lopende tekst) */
	--night:       #2B2E27;
	--night-deep:  #232520;

	/* Neutralen — geef ze een zweem van de merkkleur, geen pure grijzen */
	--ink:       #272922;
	--ink-soft:  #5F6158;
	--paper:     #F5F2EC;
	--white:     #FFFDF9;
	--mist:      #E7E2D9; /* zand */
	--line-soft: #DDD5C8;
	--line-hard: #C9C2B6;

	/* Status */
	--ok:     #14855C;
	--warn:   #B4531A;
	--danger: #B23A2A;

	/* Betekenis-tokens — licht thema */
	--bg:           var(--paper);
	--surface:      var(--white);
	--surface-alt:  var(--mist);
	--surface-sink: #EFEAE2;
	--text:         var(--ink);
	--text-soft:    var(--ink-soft);
	--text-faint:   #66685F;
	--line:         var(--line-soft);
	--line-strong:  var(--line-hard);
	--accent:       var(--brand);
	--accent-deep:  var(--brand-deep);
	--accent-wash:  rgba(68, 74, 63, 0.08);
	--on-accent:    var(--white);
	/*
	 * Optioneel: een eigen vlakkleur voor de primaire knop. Nodig als de
	 * accentkleur als tekst donkerder moet dan als knopvlak (contrast), of als
	 * een donkere sectie een lichte knop vraagt. Zonder deze tokens valt de
	 * knop terug op --accent / --accent-deep / --on-accent.
	 *   --fill:      var(--brand);
	 *   --fill-deep: var(--brand-deep);
	 *   --on-fill:   #FFFFFF;
	 */
	--star:         #E0A32E;

	/*
	 * Op donker — voor de vaste donkere banden die de tokens niet omdraaien:
	 * topbalk en sitevoet (op --night-deep), het bannerlabel en de lichte
	 * omlijnde knop. Een sectie met .tone-dark gebruikt deze niet; die draait
	 * de betekenis-tokens hierboven om.
	 */
	--on-night:             var(--white);
	--on-night-muted:       #EFEBE3; /* net onder wit: de topbalk */
	--on-night-soft:        #CFD0C6;
	--on-night-faint:       #A9AB9F;
	--on-night-line:        rgba(255, 255, 255, 0.12);
	--on-night-line-strong: rgba(255, 255, 255, 0.35);
	--on-night-wash:        rgba(255, 255, 255, 0.10);

	/* Vorm */
	--radius-xl:   28px;
	--radius-lg:   22px; /* de afgeronde beelden van Helemaal jij */
	--radius:      16px;
	--radius-sm:   10px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px -2px rgba(20, 20, 32, 0.10);
	--shadow:    0 18px 40px -24px rgba(20, 20, 32, 0.32);
	--shadow-lg: 0 40px 80px -40px rgba(20, 20, 32, 0.45);
	--shadow-up: 0 -12px 30px -22px rgba(0, 0, 0, 0.5); /* balk die onderaan vastzit */

	/* Ritme */
	--shell-max: 1224px;
	--gutter:    clamp(20px, 4vw, 48px);
	--section-y: clamp(72px, 9vw, 136px);
	--stack:     clamp(20px, 3vw, 32px);

	/* Type — zet hier je eigen families zodra assets/fonts/ gevuld is */
	--f-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* De tweede regel van een kop: schuin, zoals "ons totaalconcept." */
	--f-serif:   "Instrument Serif", Georgia, serif;
	--f-mono:    ui-monospace, "SFMono-Regular", monospace;

	--t-hero:  clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem);
	--t-h1:    clamp(2.4rem, 1.5rem + 3vw, 4rem);
	--t-h2:    clamp(2.125rem, 1.35rem + 2.4vw, 3.625rem);
	--t-h3:    clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--t-lead:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--t-body:  1.0625rem;
	--t-small: 0.875rem;
	--t-micro: 0.78rem;

	/*
	 * Koppen. Stem af op de gekozen displayletter: bij een smalle (condensed)
	 * letter nooit onder nul, anders lopen letters en woorden op een telefoon
	 * in elkaar. Zie docs/frontend-lessen.md §13.
	 */
	--kop-spatie: -0.025em;
	--kop-woord:  normal;

	/*
	 * Beweging — VERVANG PER KLANT (brief/02, beslissing 4; merkbeweging §3).
	 * Eén reeks voor CSS én JavaScript: modulecode leest hem via
	 * window.brauerBeweging (ms, curve, functie) en zet nooit eigen waarden.
	 * Afleiden mag, ook met calc(): calc(var(--dur-bediening) * 1.5).
	 *
	 * De kit levert alleen de rollen die de kit zelf gebruikt:
	 * --ease           bediening en onthulling: snel op gang, rustig uit.
	 * --ease-zet       onthulling "zet" (blok 14): eerder in rust, een stuk dat
	 *                  op zijn plaats valt in plaats van aan komt zweven.
	 * --dur-bediening  hover, press, focus, menu; blijft onder ~300ms.
	 * --dur-onthul     de onthulling bij binnenkomst (blok 14).
	 * --dur-reduce     geen rol: de duur van een kleur- of opacity-overgang bij
	 *                  prefers-reduced-motion. Blok 14 begrenst hem op 150ms;
	 *                  korter of 0s mag, ook per element.
	 *
	 * Heeft de site een scène of een eigen merkgebaar, dan voeg je hier
	 * --ease-scene, --ease-merk en --dur-scene toe, elk met een herleidbare bron
	 * in brief/02. Daar is bewust geen kitwaarde voor: een standaard zou elke
	 * site dezelfde scène geven. Hooguit vier curves en drie duren.
	 */
	--ease:          cubic-bezier(0.22, 0.68, 0.35, 1);
	--ease-zet:      cubic-bezier(0.18, 0.8, 0.3, 1);
	--dur-bediening: 160ms;
	--dur-onthul:    600ms;
	--dur-reduce:    150ms;
	/*
	 * Merkgebaar "slide-in" (Kas, 28-10-2026: "scroll in animations bij elke
	 * sectie", duidelijk zichtbaar): koppen en beelden schuiven van links,
	 * rechts of onder in beeld. Groter en trager dan de kitonthulling.
	 */
	--ease-merk:     cubic-bezier(0.16, 0.84, 0.3, 1);
	--dur-slide:     850ms;
	--afstand-slide: 56px;

	/*
	 * Eén vaste huisstijl, geen systeem- of toggle-gestuurde donkere modus.
	 * `.tone-dark` / `.section-dark` hieronder blijft bestaan als vormgevings-
	 * keuze — een donkere sectie binnen dit ene thema, geen tweede thema.
	 */
	color-scheme: light;
}

/*
 * Een donkere sectie binnen het (enige) thema draait dezelfde tokens om. Zo
 * hoeft geen enkele component te weten of hij op een lichte of donkere
 * ondergrond staat — hij vraagt gewoon --surface en --text.
 */
.tone-dark,
.section-dark {
	/*
	 * Let op de `color` hieronder. Zonder die regel draaien de tokens wel om,
	 * maar blijft de tekst de kleur erven die hij van body meekreeg — donkere
	 * inkt op een bijna zwarte ondergrond. De koppen zijn dan onleesbaar terwijl
	 * alles wat wél een token gebruikt (--text-soft, --text-faint) klopt, en dat
	 * maakt het lastig te herkennen.
	 */
	color:         var(--text);

	--bg:          var(--night);
	--surface:     rgba(255, 253, 249, 0.06);
	--surface-alt: rgba(255, 253, 249, 0.12);
	--text:        #FFFDF9;
	--text-soft:   #CFD0C6;
	--text-faint:  #A9AB9F;
	--line:        rgba(255, 253, 249, 0.14);
	--line-strong: rgba(255, 253, 249, 0.26);
	--accent:      var(--brand-light);
	--accent-deep: #F0C3A4;
	--on-accent:   var(--night);
}

/*
 * Het omgekeerde: een licht vlak binnen een omgedraaide sectie, zoals een wit
 * formulierpaneel op een donkere of gekleurde band. Zonder deze klasse erft
 * het paneel de lichte tekst van de sectie en staat er wit op wit.
 *
 * Dit zijn dezelfde betekenis-tokens als in :root. Verander je daar per klant
 * een toewijzing, verander hem hier mee; de ruwe merkwaarden volgen vanzelf.
 * Geeft de site een sectie een eigen kleur (zoals .tone-dark), dan zet je die
 * in blok 16 op dezelfde manier en gebruik je .tone-light voor het vlak erin.
 */
.tone-light {
	color:          var(--text);

	--bg:           var(--paper);
	--surface:      var(--white);
	--surface-alt:  var(--mist);
	--surface-sink: #EFEAE2;
	--text:         var(--ink);
	--text-soft:    var(--ink-soft);
	--text-faint:   #66685F;
	--line:         var(--line-soft);
	--line-strong:  var(--line-hard);
	--accent:       var(--brand);
	--accent-deep:  var(--brand-deep);
	--accent-wash:  rgba(68, 74, 63, 0.08);
	--on-accent:    var(--white);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px; /* Ankerlinks niet onder het sitehoofd laten landen. */
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/*
	 * Vangnet: horizontaal scrollen is altijd een fout.
	 *
	 * Maar let op wélke van de twee hier staat. `overflow-x: hidden` maakt de
	 * body een scrollcontainer, en daarmee werkt `position: sticky` nergens op
	 * de pagina meer — de meelopende zijkolom blijft dan gewoon staan en er is
	 * niets aan de zijkolom zelf te zien dat verklaart waarom. `clip` knipt
	 * hetzelfde weg zonder scrollcontainer te worden. De @supports houdt het
	 * oude gedrag voor browsers die clip nog niet kennen.
	 */
	overflow-x: hidden;
}

@supports (overflow-x: clip) {
	body { overflow-x: clip; }
}

img,
picture,
video,
svg { max-width: 100%; height: auto; display: block; }

/* `hidden` wint altijd, ook van een component met display: grid of flex. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	letter-spacing: var(--kop-spatie);
	word-spacing: var(--kop-woord);
	/* Lange Nederlandse samenstellingen passen op 320px niet altijd;
	   liever afbreken dan de pagina breder maken (§14). */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: var(--kop-spatie); line-height: 1.08; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: 0.35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--stack) 0; }

code, pre, kbd { font-family: var(--f-mono); font-size: 0.9em; }

pre {
	background: var(--surface-sink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1em 1.1em;
	overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--line); }

input, select, textarea, button { font: inherit; color: inherit; }

/* ==========================================================================
   3. Toegankelijkheid
   ========================================================================== */

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0; left: var(--gutter);
	z-index: 999;
	background: var(--accent);
	color: var(--on-accent);
	padding: 0.7em 1.2em;
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 600;
	text-decoration: none;
	/* transform in plaats van top: dezelfde beweging, zonder layout. Een paar
	   pixels extra, anders blijft door afronding een streepje zichtbaar. */
	transform: translateY(calc(-100% - 4px));
	transition: transform var(--dur-bediening) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/*
 * Toetsenbordfocus moet altijd te zien zijn — ook op een donkere sectie.
 * Twee ringen: de accentkleur, met een lichte rand eromheen zodat hij op elke
 * ondergrond loskomt.
 */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg) 80%, transparent);
}
:focus:not(:focus-visible) { outline: none; }

/* Nog aan te leveren materiaal — zichtbaar, maar niet schreeuwerig. */
.is-placeholder {
	background: color-mix(in srgb, var(--warn) 14%, transparent);
	border-bottom: 1px dashed var(--warn);
	border-radius: 3px;
	padding: 0 0.25em;
	color: var(--text); /* Niet erven: op de gekleurde markering haalt zachte tekst geen 4,5:1. */
}

/*
 * Een review die nog ingevuld moet worden, staat er zonder sterren (zie
 * template-parts/blocks/review.php) en met een stippellijn eromheen. Zo leest
 * hij als een lege plek en niet als een halve beoordeling.
 */
.review.is-onbevestigd {
	border-style: dashed;
	border-color: var(--warn);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.shell {
	width: min(100% - (var(--gutter) * 2), var(--shell-max));
	margin-inline: auto;
}

.section { padding-block: var(--section-y); }

/*
 * Twee secties op dezelfde ondergrond delen hun tussenruimte: de onderruimte
 * van de eerste is genoeg. Bij een toonwissel (licht naar donker of terug)
 * houdt de tweede zijn bovenruimte, anders plakt de tekst tegen de rand van
 * het donkere vlak. Krijgt een sectie een eigen toon, zet die klasse dan in
 * beide :where()-lijsten van de eerste regel en geef hem een eigen regel zoals
 * de tweede.
 *
 * De toonklassen staan in :where(), zodat de regel net als het oude
 * .section + .section specificiteit (0,2,0) houdt. Hij wint zo van .section en
 * .section-dark, en een eigen padding-top in blok 16 (zoals
 * .section.section-hero) wint nog steeds van hem.
 */
.section:not(:where(.tone-dark, .section-dark)) + .section:not(:where(.tone-dark, .section-dark)),
.section:where(.tone-dark, .section-dark) + .section:where(.tone-dark, .section-dark) { padding-top: 0; }

.section-dark {
	background: var(--night-deep);
	color: var(--text);
	padding-block: var(--section-y);
}

.section-heading { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-heading.is-center { margin-inline: auto; text-align: center; }
.section-title { margin: 0 0 0.4em; }
.section-text { color: var(--text-soft); font-size: var(--t-lead); margin: 0; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 0.9em;
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.eyebrow-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}
.eyebrow-term {
	color: var(--accent);
	border-left: 1px solid var(--line-strong);
	padding-left: 0.6em;
}

.mini-label {
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0 0 0.5em;
}

/* ==========================================================================
   5. Knoppen en links
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: var(--t-small);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--dur-bediening) var(--ease), background-color var(--dur-bediening) var(--ease), border-color var(--dur-bediening) var(--ease);
}

/*
 * Verplaatsing bij hover staat achter een aanwijzer-check.
 *
 * Op een touchscreen blijft :hover na een tik hangen tot je ergens anders tikt.
 * Een kaart die dan 2px omhoog blijft staan leest als een fout in de pagina.
 * Kleur- en schaduwwissels laten we ongated: die vallen niet op als ze blijven
 * plakken.
 */
@media (hover: hover) and (pointer: fine) {
	.button:hover { transform: translateY(-1px); }
	.button:active { transform: translateY(0); }
	.arrow-link:hover .icon { transform: translateX(3px); }
	.service-card:hover,
	.case-card:hover,
	.product-card:hover,
	.card:hover { transform: translateY(-2px); }
}

.button-primary { background: var(--fill, var(--accent)); color: var(--on-fill, var(--on-accent)); }
.button-primary:hover { background: var(--fill-deep, var(--accent-deep)); color: var(--on-fill, var(--on-accent)); }

.button-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button-ghost:hover { background: var(--surface-alt); color: var(--text); }

.button-white { background: var(--white); color: var(--night-deep); }
.button-white:hover { background: var(--mist); color: var(--night-deep); }

.button-outline-light { background: transparent; color: var(--on-night); border-color: var(--on-night-line-strong); }
.button-outline-light:hover { background: var(--on-night-wash); color: var(--on-night); }

.button-small { padding: 0.65em 1.15em; font-size: var(--t-micro); }

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	font-size: var(--t-small);
	text-decoration: none;
}
.arrow-link .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-bediening) var(--ease); }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ==========================================================================
   6. Sitehoofd
   ========================================================================== */

.topbar {
	background: var(--night-deep);
	color: var(--on-night-muted);
	/* Donker vlak: teksttokens om, net als .site-footer. Maak je de balk licht, zet ze dan terug. */
	--text:       var(--on-night);
	--text-soft:  var(--on-night-soft);
	--text-faint: var(--on-night-faint);
	font-size: var(--t-micro);
}
.topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1.5em;
	padding-block: 0.65em;
}
.topbar p { margin: 0; }
.topbar-contact { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; }
.topbar a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	text-decoration: none;
}
.topbar a:hover { color: var(--brand-light); }

@media (max-width: 700px) {
	.topbar-claim { display: none; } /* Op smal telt alleen het contact. */
	.topbar-inner { justify-content: center; }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-bediening) var(--ease), box-shadow var(--dur-bediening) var(--ease);
}
.site-header.scrolled {
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--stack);
	padding-block: 0.9em;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo { width: auto; max-height: 46px; }
.site-logo.is-wordmark {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
	color: var(--text);
}
.brand-footer .site-logo.is-wordmark { color: var(--on-night); }
/*
 * Tussenoplossing zolang er geen wit-op-transparant logo is: hetzelfde bestand
 * wit maken. Zodra de klant een lichte variant levert, vervang je dit door dat
 * bestand in plaats van door een filter.
 */
.site-logo.is-light { filter: brightness(0) invert(1); }

.header-panel {
	display: flex;
	align-items: center;
	gap: var(--stack);
	flex: 1;
	justify-content: flex-end;
}

/* Native bediening vanaf de eerste paint, ook als site.js ontbreekt.
 * Op desktop opent JavaScript de disclosure zonder de kop hoger te maken.
 */
.site-navigation { margin-left: auto; min-height: 44px; }
.site-navigation > .menu-button { display: flex; list-style: none; }
.site-navigation > .menu-button::-webkit-details-marker { display: none; }
.site-navigation:not([open]) > .header-panel { display: none; }
html:not(.navigation-ready) .site-navigation > .header-panel {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: var(--surface);
	padding: 1.4em var(--gutter) 1.8em;
}
@media (min-width: 1025px) {
	.navigation-ready .site-navigation { flex: 1; }
	.navigation-ready .site-navigation > .menu-button { display: none; }
	.navigation-ready .site-navigation > .header-panel { min-height: 44px; }
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav .menu li { margin: 0; position: relative; }
.main-nav a {
	color: var(--text);
	text-decoration: none;
	font-size: var(--t-small);
	font-weight: 500;
	padding-block: 0.4em;
	display: inline-block;
}
.main-nav a:hover,
.main-nav .current-menu-item > a { color: var(--accent); }

/* Tweede niveau: verschijnt bij hover én bij toetsenbordfocus. */
.main-nav .sub-menu {
	position: absolute;
	top: 100%; left: -14px;
	min-width: 230px;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0.5em;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur-bediening) var(--ease), transform var(--dur-bediening) var(--ease), visibility var(--dur-bediening);
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-nav .sub-menu a { display: block; padding: 0.5em 0.8em; border-radius: var(--radius-sm); }
.main-nav .sub-menu a:hover { background: var(--surface-alt); }

.header-actions { display: flex; align-items: center; gap: 0.75em; }

.menu-button {
	display: none;
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.menu-bars { display: grid; gap: 4px; width: 20px; }
.menu-bars span {
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transition: transform var(--dur-bediening) var(--ease), opacity var(--dur-bediening) var(--ease);
}
[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-navigation[open] > .menu-button .menu-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-navigation[open] > .menu-button .menu-bars span:nth-child(2) { opacity: 0; }
.site-navigation[open] > .menu-button .menu-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-button:focus-visible .menu-bars span { transition: none; }

/*
 * Breekpunt op 1024: de navigatie en de knoppen passen daaronder niet meer
 * naast elkaar. Let op dat de burger verschijnt op exact dezelfde breedte
 * waarop de balk verdwijnt — anders is het menu op een tussenmaat onbereikbaar.
 */
@media (max-width: 1024px) {
	.navigation-ready .menu-button { display: flex; }

	/*
	 * Een lang menu (met submenu's) scrolt in het paneel zelf. body.menu-open
	 * zet de pagina erachter vast, dus zonder eigen hoogte en overflow vielen
	 * de onderste links en de hoofd-CTA onbereikbaar buiten het scherm. En
	 * bovenaan beginnen: met flex-end (van .header-panel op desktop) loopt een
	 * te hoog menu aan de bovenkant weg, en dat stuk is niet terug te scrollen.
	 *
	 * --menu-boven is waar het paneel begint. site.js meet het bij openen: de
	 * kop plus de topbalk zolang die nog in beeld is. De terugval geldt zonder
	 * JavaScript; dan zit de pagina niet vast en scrolt ze gewoon mee.
	 */
	.header-panel {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 1.2em;
		max-height: calc(100vh - var(--menu-boven, 5rem));
		max-height: calc(100dvh - var(--menu-boven, 5rem));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		padding: 1.4em var(--gutter) 1.8em;
		display: none;
	}
	.header-panel.open, .site-navigation[open] > .header-panel { display: flex; }

	/* Bij scriptuitval blijft de gewone navigatie leesbaar en bedienbaar. */
	html:not(.navigation-ready) .header-inner { flex-wrap: wrap; }
	html:not(.navigation-ready) .header-inner > .header-panel {
		display: flex;
		position: static;
		flex-basis: 100%;
		box-shadow: none;
		padding-inline: 0;
	}

	.main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav .menu > li + li { border-top: 1px solid var(--line); }
	.main-nav a { padding-block: 0.8em; font-size: 1rem; }

	.main-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0.6em 0.9em;
		background: transparent;
	}

	.header-actions { justify-content: space-between; }
	.header-actions .button { flex: 1; }

	body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   7. Hero en homepagesecties
   ========================================================================== */

.hero { padding-block: clamp(40px, 6vw, 88px) var(--section-y); }
.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}
.hero-title { font-size: var(--t-hero); margin-bottom: 0.35em; }
.hero-lead {
	font-size: var(--t-lead);
	color: var(--text-soft);
	max-width: 54ch;
	margin-bottom: 1.6em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75em; }
.hero-rating { margin-top: 1.6em; }

.usp-list {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.usp-list li { display: flex; align-items: center; gap: 0.45em; margin: 0; }
.usp-list .icon { color: var(--ok); width: 1em; height: 1em; }

/*
 * PER KLANT: het herobeeld. Zolang er niets is, blijft dit vlak leeg in plaats
 * van gevuld met een stockfoto — een lege plek is eerlijker dan geleend beeld.
 */
.hero-media {
	min-height: clamp(220px, 34vw, 420px);
	border-radius: var(--radius-xl);
	background: var(--surface-alt);
	border: 1px dashed var(--line-strong);
}

@media (max-width: 900px) {
	.hero-inner { grid-template-columns: minmax(0, 1fr); }
	.hero-media { display: none; }
}

.service-grid,
.case-grid,
.card-grid,
.review-grid {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.service-card,
.case-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.6vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	transition: border-color var(--dur-bediening) var(--ease), transform var(--dur-bediening) var(--ease);
}
.service-card:hover,
.case-card:hover { border-color: var(--line-strong); }
.service-title { margin: 0; }
.service-text { color: var(--text-soft); margin: 0; }
.service-card .arrow-link { margin-top: auto; padding-top: 0.6em; }
/* Dienstenoverzicht: de titel is de link, onderdelen staan eronder. */
.service-title a { color: inherit; text-decoration: none; }
.service-title a:hover { color: var(--accent); text-decoration: underline; }
.service-onderdelen { margin: 0.2em 0 0; padding-left: 1.1em; font-size: var(--t-small); }

.case-sector {
	font-size: var(--t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}
.case-metric { display: flex; flex-direction: column; gap: 0.1em; margin: 0.2em 0 0.4em; }
.case-metric-value {
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
}
.case-metric-label { font-size: var(--t-small); color: var(--text-soft); }
.case-title { margin: 0; }
.case-text { color: var(--text-soft); margin: 0; }

.step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	counter-reset: step;
}
.step {
	margin: 0;
	padding-top: 1.1em;
	border-top: 2px solid var(--line-strong);
	position: relative;
}
.step-number {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	font-weight: 700;
	color: var(--accent);
	display: block;
	margin-bottom: 0.5em;
}
.step-title { margin: 0 0 0.3em; font-size: var(--t-h3); }
.step-text { color: var(--text-soft); margin: 0; font-size: var(--t-small); }

/*
 * Sectie met tekst naast beeld — het verhaal/missie-blok op een over-ons-
 * pagina, of vergelijkbare secties elders. `.tone-dark` (zie blok 12) mag
 * erop, net als op elke andere sectie.
 *
 * PER KLANT: zolang er geen foto is, blijft .split-media een leeg vlak — zie
 * de toelichting bij .hero-media hierboven, dezelfde regel geldt hier.
 */
.split-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}
.split-copy p { color: var(--text-soft); max-width: 52ch; margin-bottom: 1.4em; }
.split-media {
	min-height: clamp(220px, 30vw, 380px);
	border-radius: var(--radius-xl);
	background: var(--surface-alt);
	border: 1px dashed var(--line-strong);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 900px) {
	.split-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   8. Cijfers, sterren, reviews, woordmerken
   ========================================================================== */

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: clamp(16px, 2.4vw, 32px);
	margin: 0;
}
.stat { margin: 0; }
.stat-value {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0 0 0.25em;
}
.stat-label {
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.stat-note { font-size: var(--t-micro); color: var(--text-faint); }
.stat-row.is-compact .stat-value { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	text-decoration: none;
	color: inherit;
}
.rating-stars { display: inline-flex; gap: 2px; color: var(--star); }
.star { display: inline-flex; width: 1.05em; height: 1.05em; position: relative; }
.star .icon { width: 100%; height: 100%; stroke-width: 1.2; }
.star.is-full .icon { fill: currentColor; }
.star.is-half .star-fill {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
}
.star.is-half .star-fill .icon { fill: currentColor; width: 1.05em; }
.rating-meta { display: flex; flex-direction: column; line-height: 1.25; }
.rating-score { font-family: var(--f-display); font-size: 1rem; }
.rating-detail { font-size: var(--t-micro); color: var(--text-faint); }
.rating-badge.size-small .star { width: 0.9em; height: 0.9em; }
.rating-badge.size-large .star { width: 1.3em; height: 1.3em; }
.rating-badge.size-large .rating-score { font-size: 1.3rem; }

.review {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.6vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	position: relative;
}
.review.size-feature { grid-column: span 2; }
@media (max-width: 760px) { .review.size-feature { grid-column: auto; } }

/* De sterren in een review hebben een eigen kleurregel nodig; zonder deze
   erven ze de tekstkleur en staan er witte sterren op een donkere kaart. */
.review-stars { display: inline-flex; gap: 2px; color: var(--star); }
.review-stars .icon { width: 1em; height: 1em; }

.review-mark {
	position: absolute;
	top: clamp(14px, 2vw, 22px);
	right: clamp(14px, 2vw, 22px);
	color: var(--accent-wash);
}
.review-mark .icon { width: 46px; height: 46px; fill: currentColor; stroke: none; }
.review-quote { margin: 0; border: 0; padding: 0; font-size: var(--t-lead); }
.review.size-feature .review-quote { font-family: var(--f-display); font-weight: 600; }
.review-source { display: flex; align-items: center; gap: 0.7em; margin-top: auto; }
.review-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--accent-wash);
	color: var(--accent);
	font-family: var(--f-display);
	font-weight: 700;
	flex: none;
}
.review-who { display: flex; flex-direction: column; font-size: var(--t-small); line-height: 1.35; }
.review-who span { color: var(--text-faint); font-size: var(--t-micro); }

.logo-row { display: flex; flex-direction: column; gap: 1em; align-items: center; }
.logo-row-label {
	font-size: var(--t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}
.logo-row-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em 0.9em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.logo-chip {
	margin: 0;
	padding: 0.5em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--t-small);
	font-weight: 500;
	color: var(--text-soft);
}
/* Erkenning als woordmerk: de link wijst naar de plek waar je hem controleert. */
.logo-chip a { color: inherit; text-decoration: none; }
.logo-chip a:hover { color: var(--text); text-decoration: underline; }
.logo-chip-detail { font-weight: 400; color: var(--text-faint); }
.section-erkenningen { padding-block: calc(var(--section-y) / 2); }

/* Herkomst van een review: platform en maand, met een link als die er is. */
.review-bron a { color: inherit; }

/* ==========================================================================
   9. Persoon
   ========================================================================== */

.person { display: flex; align-items: center; gap: 0.9em; }
.person-photo { flex: none; }
.person-photo img,
.person-photo-empty {
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.person-photo-empty { background: var(--surface-alt); border: 1px dashed var(--line-strong); }
.person-body { display: flex; flex-direction: column; font-size: var(--t-small); line-height: 1.4; }
.person-role,
.person-note { color: var(--text-faint); font-size: var(--t-micro); }
.person-phone { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; margin-top: 0.2em; }

/* Team-overzicht: dezelfde .person-kaart, nu als kaart in een grid — voor een
   over-ons-pagina met meerdere gezichten in plaats van het ene aanspreekpunt. */
.team-grid {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.team-grid .person {
	align-items: flex-start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(18px, 2.2vw, 26px);
}
.team-grid .person-photo img,
.team-grid .person-photo-empty { width: 64px; height: 64px; }

/* Contactgegevens als rij met icoon — telefoon, e-mail, adres. */
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9em; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.7em; }
.contact-list .icon { flex: none; width: 1.3em; height: 1.3em; color: var(--accent); margin-top: 0.15em; }
.contact-list a { color: inherit; text-decoration: none; }
.contact-list a:hover { color: var(--accent); }
.contact-plek-extra { display: block; margin-top: 0.2em; color: var(--text-soft); font-size: var(--t-small); }

/* Teamlidpagina: foto naast naam en functie; op een smal scherm eronder. */
.profiel-kop { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); flex-wrap: wrap; }
.profiel-foto { flex: none; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: var(--surface-alt); }
.profiel-foto img { width: 100%; height: 100%; object-fit: cover; }
.profiel-foto .person-photo-empty { display: block; width: 100%; height: 100%; }
.profiel-tekst { flex: 1 1 280px; min-width: 0; }
.contact-person { margin-top: 1.6em; padding-top: 1.6em; border-top: 1px solid var(--line); }

/* ==========================================================================
   10. Kaarten en overzichten
   ========================================================================== */

.archive-header { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px); }
.archive-header-inner { max-width: var(--shell-max); }
.archive-title { margin-bottom: 0.3em; }
.archive-intro { max-width: 68ch; font-size: var(--t-lead); color: var(--text-soft); }
.archive-body { padding-bottom: var(--section-y); }

.breadcrumbs { margin-bottom: 1.2em; font-size: var(--t-micro); }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.55em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.55em; }
.breadcrumbs li + li::before {
	content: "/";
	color: var(--text-faint);
	opacity: 0.7;
}
.breadcrumbs a { color: var(--text-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-soft); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur-bediening) var(--ease), transform var(--dur-bediening) var(--ease), box-shadow var(--dur-bediening) var(--ease);
}
.card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
}

/* Eén klikvlak over de hele kaart, maar met de titel als toegankelijke naam. */
.card-link { position: absolute; inset: 0; z-index: 2; }
.card-link:focus-visible { outline-offset: -3px; }

.card-media { aspect-ratio: 16 / 10; background: var(--surface-alt); }
.card-image { width: 100%; height: 100%; object-fit: cover; }
.card-image.is-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.45;
}
.card-body { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 0.5em; flex: 1; }
.card-type {
	font-size: var(--t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}
.card-title { margin: 0; font-size: 1.1rem; }
.card-text { color: var(--text-soft); font-size: var(--t-small); margin: 0; }
.card-meta {
	margin: auto 0 0;
	padding-top: 0.6em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	font-size: var(--t-micro);
	color: var(--text-faint);
}

.empty-state {
	text-align: center;
	padding: clamp(40px, 6vw, 80px) var(--gutter);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	color: var(--text-soft);
}

.pagination { margin-top: clamp(28px, 4vw, 48px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4em; justify-content: center; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0.55em 0.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: var(--t-small);
	color: var(--text);
}
.pagination .page-numbers:hover { border-color: var(--line-strong); }
.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.error-search { margin-top: 1.4em; max-width: 420px; }
.search-form { display: flex; gap: 0.5em; }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
}
.search-submit {
	padding: 0.75em 1.3em;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	cursor: pointer;
}

.product-grid {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin-bottom: var(--section-y);
}
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur-bediening) var(--ease), transform var(--dur-bediening) var(--ease);
}
.product-card:hover { border-color: var(--line-strong); }
.product-link { position: absolute; inset: 0; z-index: 2; }
.product-link:focus-visible { outline-offset: -3px; }
.product-media { aspect-ratio: 4 / 3; background: var(--surface-alt); }
.product-image { width: 100%; height: 100%; object-fit: cover; }
.product-image.is-fallback { display: flex; align-items: center; justify-content: center; opacity: 0.4; }
.product-body { padding: clamp(14px, 1.8vw, 20px); display: flex; flex-direction: column; gap: 0.4em; }
.product-title { margin: 0; font-size: 1.05rem; }
.product-text { margin: 0; font-size: var(--t-small); color: var(--text-soft); }
.product-cat-text { max-width: 68ch; margin-top: clamp(24px, 3vw, 44px); padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--line); }

/* ==========================================================================
   11. Artikel
   ========================================================================== */

.resource-header { padding-block: clamp(28px, 4vw, 56px) clamp(18px, 2.4vw, 30px); }
/*
 * Eén linkermarge voor de hele pagina.
 *
 * Zet hier geen max-width op: dit element heeft óók .shell, en die centreert.
 * De kop komt dan op een andere marge te staan dan de tekst eronder en dan het
 * CTA-blok — drie linkerkanten op één pagina, en dat valt pas op als je het
 * ziet. De leesbreedte hoort de regellengte te begrenzen, niet de kolom te
 * verschuiven, dus hij staat op de kinderen.
 */
.resource-header-inner { max-width: var(--shell-max); }
.resource-title { margin-bottom: 0.35em; max-width: 26ch; }
.resource-intro { font-size: var(--t-lead); color: var(--text-soft); max-width: 62ch; }
.service-actions { margin-top: 1.25em; }
/* Wat er na de aanvraag gebeurt, direct onder de knop: ook op mobiel zichtbaar. */
.service-vervolg { margin: 0.6em 0 0; font-size: var(--t-small); color: var(--text-soft); }
/* "Verder kijken" op een dienstpagina: andere diensten en artikelen. */
.dienst-verder .mini-label { margin: 1.6em 0 0.8em; }
/* Eén of twee kaarten houden hun gewone breedte (auto-fill), in plaats van
   uit te rekken over de hele rij met een beeld van paginabreed. */
.dienst-verder .service-grid,
.dienst-verder .card-grid,
.diensten-hub .service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

/* Korte feiten bij een dienst (prijs, werkgebied). Wat leeg is, staat er niet. */
.dienst-feiten { display: flex; flex-wrap: wrap; gap: 0.5em 1.75em; margin: 1em 0 0; }
.dienst-feit { display: flex; flex-direction: column; gap: 0.1em; }
.dienst-feit dt {
	font-size: var(--t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.dienst-feit dd { margin: 0; font-weight: 600; }

/* Erkenningen in de kop staan links uitgelijnd onder de knop, niet gecentreerd. */
.resource-header .logo-row { align-items: flex-start; margin-top: 1.25em; }
.resource-header .logo-row-list { justify-content: flex-start; }

/* Het posttype geeft het artikel een eigen accentnuance zonder eigen sjabloon. */
.resource[data-variant="kennisbank"] { --accent: var(--accent-deep); }

.banner {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	background: var(--surface-alt);
}
.banner-image { width: 100%; aspect-ratio: 1360 / 420; object-fit: cover; }
.banner.is-fallback {
	aspect-ratio: 1360 / 420;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
}
.banner-mark { opacity: 0.35; }
.banner-label {
	position: absolute;
	left: 14px; bottom: 14px;
	background: color-mix(in srgb, var(--night-deep) 78%, transparent);
	color: var(--on-night);
	font-size: var(--t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.8em;
	border-radius: var(--radius-pill);
}

.resource-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 64px);
	padding-block: clamp(28px, 4vw, 56px);
	align-items: start;
}
/* Zelfde reden: de leeskolom wordt 800px breed, maar blijft links staan in
   plaats van dat de hele shell naar het midden krimpt. */
.resource-body.is-single-column { grid-template-columns: minmax(0, 800px); }

@media (max-width: 1024px) {
	.resource-body { grid-template-columns: minmax(0, 1fr); }
	.resource-aside { display: none; } /* Op smal doet de sticky balk dit werk. */
}

/* ---- Inhoudsopgave ------------------------------------------------------ */

.toc {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-sink);
	padding: 0.9em 1.1em;
	margin-bottom: 2em;
}
.toc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--t-small);
}
.toc summary::-webkit-details-marker { display: none; }
.toc-count { font-size: var(--t-micro); color: var(--text-faint); font-weight: 400; }
.toc-list {
	margin: 0.9em 0 0;
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	font-size: var(--t-small);
}
.toc-list li { margin: 0; }
.toc-list a { color: var(--text-soft); text-decoration: none; }
.toc-list a:hover { color: var(--accent); }
.toc-list a.is-current { color: var(--accent); font-weight: 600; }

/* ---- Lopende tekst ------------------------------------------------------ */

.entry-content { font-size: 1.0625rem; }
.entry-content > * { max-width: 68ch; }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-table { max-width: none; }

.entry-content h2 {
	margin-top: 1.9em;
	scroll-margin-top: 100px; /* Ankerlink vanuit de inhoudsopgave. */
}
.entry-content h3 { margin-top: 1.6em; }
.entry-content p,
.entry-content ul,
.entry-content ol { margin-bottom: 1.15em; }
.entry-content img { border-radius: var(--radius); }
.entry-content figcaption { font-size: var(--t-micro); color: var(--text-faint); margin-top: 0.5em; }
/*
 * Tweede afbeelding van een artikel (NOVA: optional_second_image_id): een
 * staand beeld wordt anders bijna een schermhoogte en meer. Verhouding
 * blijft, alleen de hoogte is begrensd.
 */
.entry-content .sitejob-nova--optional-second-image-id { margin-block: 1.6em; }
.entry-content .sitejob-nova--optional-second-image-id img { width: auto; max-width: 100%; height: auto; max-height: min(72vh, 640px); }
.entry-content blockquote {
	margin: 1.6em 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--accent);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--t-lead);
}
.entry-content a { font-weight: 500; }

.resource-sources { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.resource-sources h2 { font-size: var(--t-h3); margin-top: 0; }
.resource-sources ol { font-size: var(--t-small); color: var(--text-soft); }
/* Offerteformulier onder een artikel (display_intake_form_boolean): dezelfde scheiding als Bronnen. */
.resource-aanvraag { margin-top: 2.4em; padding-top: 0.4em; border-top: 1px solid var(--line); }

/* ---- Meelopende CTA in de zijkolom -------------------------------------- */

/*
 * De zijkolom loopt mee met de tekst. Twee dingen moeten daarvoor kloppen:
 * `sticky` op de binnenkant én een buitenkant die de volle rijhoogte krijgt.
 * `.resource-body` staat op `align-items: start`, en daardoor is de zijkolom
 * precies zo hoog als zijn inhoud — sticky heeft dan geen ruimte om in te
 * bewegen en scrollt gewoon mee de pagina uit.
 */
.resource-aside { align-self: stretch; }
.aside-inner { position: sticky; top: 104px; }

/* ---- Sticky balk op smallere schermen ----------------------------------- */

.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: var(--shadow-up);
	transform: translateY(110%);
	transition: transform calc(var(--dur-bediening) * 1.5) var(--ease); /* grotere afstand dan een hover */
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-inner {
	display: flex;
	align-items: center;
	gap: 1em;
	padding-block: 0.75em;
}
.sticky-cta-text { display: flex; flex-direction: column; margin: 0; font-size: var(--t-small); line-height: 1.3; }
.sticky-cta-text span { color: var(--text-faint); font-size: var(--t-micro); }
/* Op een telefoon één regel: een ingevulde vervolgstap (conversion.next_step)
   maakte de balk bij Protegos vijf regels hoog. */
@media (max-width: 600px) { .sticky-cta-text span { display: none; } }
.sticky-cta .button { margin-left: auto; white-space: nowrap; }
.sticky-cta-close {
	background: transparent;
	border: 0;
	color: var(--text-faint);
	cursor: pointer;
	padding: 0.4em;
	display: inline-flex;
}
@media (min-width: 1025px) { .sticky-cta { display: none; } }

/* ---- FAQ ---------------------------------------------------------------- */

.resource-faq,
.faq-section { padding-block: clamp(24px, 3vw, 44px); }
.faq-accordion { display: flex; flex-direction: column; gap: 0.6em; max-width: 68ch; }
.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 1.2em;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	font-family: var(--f-mono);
	color: var(--accent);
	font-size: 1.2em;
	line-height: 1;
	flex: none;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 1.2em 1.2em; color: var(--text-soft); }
.faq-answer > *:last-child { margin-bottom: 0; }

/* Op de FAQ-pagina is elke H2 een groep met een eigen accordeon (inc/content.php). */
.faq-groep { margin-block: 2.4em; }
.entry-content .faq-groep > h2 { margin-top: 0; }
.faq-groep > .faq-accordion { margin-top: 1em; }

/* ---- Dienstpagina: intro, hoofdstukken, aanvraagband, ook nodig ---------- *
 * De opbouw uit template-parts/page/dienst.php en inc/hoofdstukken.php. Dit is
 * de neutrale basis: alleen betekenis-tokens en geen merkvorm, zodat hij op
 * elke site klopt. Beeldverhouding, de toon van de band, de typografie van de
 * koppen en eventuele beweging bepaal je per klant in blok 16.
 */

.dienst-intro { padding-block: clamp(28px, 4vw, 56px) clamp(8px, 2vw, 24px); }
.dienst-intro-inner { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.dienst-intro-inner.heeft-kort { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.dienst-intro-tekst > .entry-content > p:first-child { font-size: var(--t-lead); }
.dienst-acties { margin-top: 1.4em; }
.dienst-bewijs { padding-block: clamp(20px, 3vw, 36px); }

/* "Zo werken we": de werkwijze uit service_process_steps, genummerd. */
.dienst-werkwijze { padding-block: clamp(28px, 4vw, 56px); }
.werkwijze-stappen {
	list-style: none;
	margin: 1.4em 0 0;
	padding: 0;
	counter-reset: stap;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}
.werkwijze-stap {
	counter-increment: stap;
	margin: 0;
	background: var(--surface-alt);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.6vw, 28px);
}
.werkwijze-stap::before {
	content: counter(stap);
	display: block;
	margin-bottom: 0.6em;
	font-family: var(--f-mono);
	color: var(--accent);
}
.werkwijze-stap h3 { margin: 0 0 0.4em; font-size: var(--t-h3); }
.werkwijze-tekst > :last-child { margin-bottom: 0; }

/* "In het kort": naast het intro, of los in de tekst van een gewone pagina. */
.dienst-in-het-kort,
.entry-content .kort {
	background: var(--surface-alt);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.6vw, 32px);
}
.entry-content .kort { margin-block: 1.6em; }
.kort-kop {
	margin: 0 0 0.5em;
	font-family: var(--f-display);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.25;
}
.dienst-in-het-kort ul,
.entry-content .kort ul { margin: 0; }

/* Hoofdstukken: beeld rechts, kop links of beeld links. Zonder beeld kop links. */
.hoofdstuk { padding-block: clamp(36px, 5vw, 72px); }
.hoofdstuk-inner { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hoofdstuk.is-beeld-rechts .hoofdstuk-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hoofdstuk.is-beeld-links .hoofdstuk-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hoofdstuk.is-beeld-links .hoofdstuk-beeld { order: -1; }
.hoofdstuk.is-kop-links .hoofdstuk-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
/* De kop loopt mee naast een lange tekst: oriëntatie, geen effect. */
.hoofdstuk.is-kop-links .hoofdstuk-kop { position: sticky; top: 104px; }
.hoofdstuk .entry-content > :first-child { margin-top: 0; }
.hoofdstuk .entry-content > :last-child { margin-bottom: 0; }
.hoofdstuk-beeld { margin: 0; }
.hoofdstuk-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }

/* De primaire actie halverwege, over de volle breedte. */
.aanvraagband { padding-block: clamp(36px, 5vw, 64px); }
.aanvraagband.is-soft { background: var(--surface-alt); }
.aanvraagband.tone-dark { background: var(--bg); }
.aanvraagband-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px clamp(24px, 4vw, 48px);
}
.aanvraagband-titel {
	margin: 0;
	max-width: 24ch;
	font-family: var(--f-display);
	font-size: var(--t-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--kop-spatie);
	color: var(--text);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
}
.aanvraagband-uitleg { margin: 0.6em 0 0; max-width: 56ch; color: var(--text-soft); }

/* Ook nodig? De andere diensten als lijst. */
.ook-nodig-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em 1.6em;
	margin-bottom: clamp(20px, 3vw, 32px);
}
.ook-nodig-kop h2 { margin: 0; }

.dienstlijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.dienstlijst li { margin: 0; border-bottom: 1px solid var(--line); }
.dienstlijst a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
	align-items: center;
	gap: 0.4em clamp(16px, 3vw, 40px);
	padding-block: clamp(14px, 1.8vw, 22px);
	color: var(--text);
	text-decoration: none;
}
.dienstlijst-naam {
	font-family: var(--f-display);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
	transition: color var(--dur-bediening) var(--ease);
}
.dienstlijst-uitleg { color: var(--text-soft); font-size: var(--t-small); }
.dienstlijst-pijl { grid-column: 3; display: inline-flex; color: var(--accent); }
.dienstlijst a:hover .dienstlijst-naam { color: var(--accent); }

@media (max-width: 900px) {
	.dienst-intro-inner.heeft-kort,
	.hoofdstuk.is-beeld-rechts .hoofdstuk-inner,
	.hoofdstuk.is-beeld-links .hoofdstuk-inner,
	.hoofdstuk.is-kop-links .hoofdstuk-inner,
	.aanvraagband-inner { grid-template-columns: minmax(0, 1fr); }
	.hoofdstuk.is-beeld-links .hoofdstuk-beeld { order: 0; }
	.hoofdstuk.is-kop-links .hoofdstuk-kop { position: static; }
}
@media (max-width: 700px) {
	.dienstlijst a { grid-template-columns: minmax(0, 1fr) auto; }
	.dienstlijst-uitleg { grid-column: 1; grid-row: 2; }
	.dienstlijst-pijl { grid-column: 2; grid-row: 1 / 3; }
}

/* ---- Auteur ------------------------------------------------------------- */

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em 1.6em;
	margin-top: 1.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
	font-size: var(--t-small);
}
.byline-author { display: flex; align-items: center; gap: 0.7em; text-decoration: none; color: inherit; }
.byline-photo { flex: none; }
.byline-name,
.byline-detail { display: flex; flex-direction: column; line-height: 1.3; }
.byline small { font-size: var(--t-micro); color: var(--text-faint); }

.author-avatar-image {
	width: var(--avatar-size, 48px);
	height: var(--avatar-size, 48px);
	border-radius: 50%;
	object-fit: cover;
}
/* Zelf getekende auteursfoto — geen verzoek naar Gravatar. */
.author-avatar-image.is-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-wash);
	color: var(--accent);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: calc(var(--avatar-size, 48px) * 0.36);
}

.author-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 28px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.6vw, 32px);
	margin-block: clamp(24px, 3vw, 44px);
}
.author-card-name { font-size: var(--t-h3); margin: 0 0 0.15em; }
.author-card-role { color: var(--accent); font-size: var(--t-small); margin: 0 0 0.6em; }
.author-card-bio { color: var(--text-soft); font-size: var(--t-small); }
.author-card-kwalificaties { margin: 0 0 0.8em; padding-left: 1.1em; color: var(--text-soft); font-size: var(--t-small); }
.author-card-links { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: 0.8em; }
.author-card-socials {
	list-style: none;
	margin: 0.9em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.author-card-socials li { margin: 0; }
.author-card-socials a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--t-micro);
	font-weight: 500;
	text-decoration: none;
	color: var(--text-soft);
}
.author-card-socials a:hover { border-color: var(--accent); color: var(--accent); }
.author-card-socials .icon { width: 1em; height: 1em; }
.author-card-recent { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.author-card-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.author-card-recent li { margin: 0; display: flex; flex-direction: column; font-size: var(--t-small); }
.author-card-recent span { font-size: var(--t-micro); color: var(--text-faint); }

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

/* Aanbod (plugin brauer-aanbod): overzicht en detailpagina. Dit is de gedeelde
   opbouw; het eigen gezicht per klant (compositie, beeldverhouding, labels)
   komt in blok 16. Geen prijzen: die horen bij het boekingssysteem. */
.aanbod-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.aanbod-kaart .card-media { position: relative; }
.aanbod-status {
	display: inline-block;
	margin: 0;
	padding: 0.35em 0.85em;
	border-radius: var(--radius-pill);
	background: var(--surface-alt);
	color: var(--text);
	font-size: var(--t-micro);
	font-weight: 600;
}
.aanbod-kaart .aanbod-status { position: absolute; left: 12px; top: 12px; background: var(--surface); }
.aanbod-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.aanbod-labels li {
	margin: 0;
	padding: 0.25em 0.75em;
	border-radius: var(--radius-pill);
	background: var(--accent-wash);
	color: var(--text);
	font-size: var(--t-micro);
	font-weight: 600;
}
.aanbod-kop .aanbod-labels { margin-top: 1em; }
.aanbod-feiten { display: flex; flex-wrap: wrap; gap: 0.6em 1.75em; margin: 1.1em 0 0; }
.aanbod-feiten > div { display: flex; flex-direction: column; gap: 0.1em; }
.aanbod-feiten dt { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.aanbod-feiten dd { margin: 0; font-weight: 600; }
.aanbod-feiten.is-compact { margin: auto 0 0; padding-top: 0.6em; gap: 0.4em 1.2em; }
.aanbod-feiten.is-compact dd { font-size: var(--t-small); }
.aanbod-hoofdfoto { margin-block: 0 clamp(8px, 2vw, 20px); }
.aanbod-hoofdfoto img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-lg); }
.aanbod-lijst { margin-top: clamp(28px, 4vw, 48px); }
.aanbod-lijst ul { margin: 0.8em 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0.55em 1.5em; }
.aanbod-lijst li { margin: 0; padding-left: 1.1em; position: relative; }
.aanbod-lijst li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--accent); }
.aanbod-lijst[data-veld="goed_te_weten"] ul { grid-template-columns: minmax(0, 1fr); max-width: 68ch; }
.aanbod-galerij { padding-block: clamp(12px, 2vw, 24px) var(--section-y); }
.aanbod-galerij-raster { margin-top: 1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.aanbod-galerij figure { margin: 0; }
.aanbod-galerij img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.aanbod-galerij figcaption { margin-top: 0.45em; font-size: var(--t-small); color: var(--text-soft); }
.aanbod-boekwidget { padding-block: clamp(12px, 2vw, 24px); scroll-margin-top: 96px; }
.aanbod-boekwidget > h2 { margin-bottom: 0.6em; }
.aanbod-leeg { margin: 1em 0 0; padding: 0.9em 1.1em; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-soft); }

/* Vacatures (soort met schema JobPosting): rijen in het overzicht, "Vacature in
   het kort", de contactpersoon en solliciteren. Het formulier zelf komt uit de
   conversieplugin (formulier.css); de huisstijl per klant in blok 16. */
.vacature-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.vacature-rij { margin: 0; border-bottom: 1px solid var(--line); }
.vacature-rij > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5em 2em; padding: clamp(18px, 2.4vw, 28px) 0; color: inherit; text-decoration: none; }
.vacature-rij-main { display: grid; gap: 0.3em; min-width: 0; }
.vacature-rij-meta { font-size: var(--t-small); color: var(--text-soft); }
.vacature-rij-titel { margin: 0; font-size: var(--t-h3); }
.vacature-rij-tekst { color: var(--text-soft); max-width: 68ch; }
.vacature-rij-link { font-weight: 600; color: var(--accent); white-space: nowrap; }
.vacature-rij > a:hover .vacature-rij-titel, .vacature-rij > a:focus-visible .vacature-rij-titel { text-decoration: underline; text-underline-offset: 0.15em; }
.vacature-kort { padding-block: clamp(8px, 1.5vw, 16px) clamp(20px, 3vw, 36px); }
.vacature-kort > h2 { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 0.9em; }
/* Flex in plaats van een raster: de laatste rij vult de breedte, zonder lege vakken. De cellen
   overlappen hun rand met -1px, zodat elke lijn één pixel blijft. */
.vacature-feiten { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.vacature-feiten > div { flex: 1 1 200px; display: flex; flex-direction: column; gap: 0.2em; padding: 0.9em 1.1em; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.vacature-feiten dt { font-size: var(--t-small); color: var(--text-soft); }
.vacature-feiten dd { margin: 0; font-weight: 600; }
.vacature-gesloten { margin: 1.1em 0 0; padding: 0.8em 1em; border-left: 3px solid var(--accent); background: var(--mist); color: var(--ink); }
.vacature-contact h2 { font-size: var(--t-h3); margin: 0 0 0.6em; }
.vacature-contact p { margin: 0 0 0.5em; display: grid; }
.vacature-contact p span { color: var(--text-soft); font-size: var(--t-small); }
.vacature-contact ul { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.3em; }
.vacature-solliciteren { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding-block: var(--section-y); scroll-margin-top: 96px; }
.vacature-solliciteren-intro > h2 { margin: 0.2em 0 0.5em; }
.vacature-solliciteren-intro > p { color: var(--text-soft); max-width: 46ch; }
.vacature-contactlijst { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 0.6em; }
.vacature-contactlijst span { display: block; font-size: var(--t-small); color: var(--text-soft); }
.vacature-solliciteren .aanvraag { margin-block: 0; max-width: none; }
.vacature-andere { padding-block: 0 var(--section-y); }
.vacature-andere > h2 { margin-bottom: 0.6em; }
@media (max-width: 900px) {
	.vacature-solliciteren { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.vacature-rij > a { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   12. CTA-blok
   ========================================================================== */

.cta { display: flex; gap: clamp(20px, 3vw, 48px); }
.cta-body { flex: 1; min-width: 0; }
.cta-title { margin: 0 0 0.4em; }
.cta-text { color: var(--text-soft); margin: 0; max-width: 56ch; }
.cta-actions { display: flex; flex-direction: column; gap: 0.7em; align-items: flex-start; flex: none; }
.cta-phone {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--t-micro);
	color: var(--text-faint);
	margin: 0.2em 0 0;
}
.cta-rating,
.cta-person { margin-top: 1.2em; }

.cta-section {
	align-items: center;
	background: var(--night-deep);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: clamp(28px, 4vw, 56px);
}
.cta-section.tone-light { background: var(--surface); }
.cta-section.tone-soft { background: var(--surface-alt); }

.cta-section.tone-dark { background: var(--night); }

.cta-inline {
	flex-direction: column;
	gap: 1em;
	border-left: 3px solid var(--accent);
	background: var(--surface-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: clamp(18px, 2.2vw, 26px);
	margin-block: 2em;
	max-width: 68ch;
}
.cta-inline .cta-title { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 700; }
.cta-inline .cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }

.cta-aside {
	flex-direction: column;
	gap: 1.2em;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.4vw, 28px);
}
.cta-aside .cta-title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; }
.cta-aside .cta-actions { align-items: stretch; width: 100%; }
.cta-aside .button { width: 100%; }

@media (max-width: 860px) {
	.cta-section { flex-direction: column; align-items: stretch; }
	.cta-section .cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ==========================================================================
   13. Sitevoet
   ========================================================================== */

.site-footer {
	background: var(--night-deep);
	color: var(--on-night-soft);
	/*
	 * De voet is een donker vlak: draai de teksttokens om, zoals .tone-dark.
	 * Anders wordt alles wat --text of --text-faint vraagt (plaatshouder,
	 * reviewbadge) donker op donker (axe color-contrast 1,04:1).
	 */
	--text:       var(--on-night);
	--text-soft:  var(--on-night-soft);
	--text-faint: var(--on-night-faint);
	margin-top: var(--section-y);
	padding-top: clamp(32px, 4vw, 56px);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--on-night); }
.site-footer h2 { color: var(--on-night); }

.footer-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	padding-bottom: clamp(28px, 3.5vw, 44px);
	border-bottom: 1px solid var(--on-night-line);
}
.footer-proof .stat-row { flex: 1; min-width: 260px; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px);
	padding-block: clamp(32px, 4vw, 56px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-pitch { font-size: var(--t-small); margin: 1em 0 1.4em; max-width: 40ch; }
.footer-heading {
	font-size: var(--t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1em;
}
.footer-column .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55em; }
.footer-column li { margin: 0; font-size: var(--t-small); }

.footer-contact address { font-style: normal; display: flex; flex-direction: column; gap: 0.65em; font-size: var(--t-small); }
.footer-contact a,
.footer-address { display: flex; align-items: flex-start; gap: 0.5em; }
.footer-contact .icon { margin-top: 0.15em; }
.footer-legal-numbers { font-size: var(--t-micro); color: var(--on-night-faint); margin-top: 1.1em; }

/* Kleine vermelding van de websitebouwer. */
.footer-sitejob {
	font-size: 0.75rem;
	line-height: 1.5;
}
.footer-sitejob a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em 1.5em;
	padding-block: 1.2em;
	border-top: 1px solid var(--on-night-line);
	font-size: var(--t-micro);
	color: var(--on-night-faint);
}
.footer-legal .menu { display: flex; flex-wrap: wrap; gap: 0.6em 1.2em; list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }
.footer-toestemming { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/*
 * Cookie-pop-up (inc/toestemming.php), alleen als privacy.popup aan staat.
 * Weigeren en accepteren zijn even sterk: allebei een vol vlak, gelijk
 * formaat. Kleur alleen via de betekenis-tokens.
 */
.toestemming { width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.toestemming::backdrop { background: color-mix(in srgb, var(--night-deep) 55%, transparent); }
.toestemming-binnen { display: grid; gap: 18px; padding: clamp(22px, 4vw, 32px); }
.toestemming-titel { font-size: 1.5rem; margin: 0; }
/* De titel krijgt focus bij openen zodat een schermlezer begint bij het begin; geen ring. */
.toestemming-titel:focus { outline: none; box-shadow: none; }
.toestemming-tekst { margin: 0; color: var(--text-soft); }
.toestemming-tekst a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.toestemming-voorkeuren { display: grid; gap: 10px; }
.toestemming-categorie { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; background: var(--surface-alt); border-radius: var(--radius); }
.toestemming-naam { display: block; margin: 0; font-weight: 600; }
.toestemming-uitleg { margin: 2px 0 0; font-size: var(--t-small); color: var(--text-soft); }
.toestemming-vast { font-size: var(--t-small); color: var(--text-soft); white-space: nowrap; }
.toestemming-knoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.toestemming-knop { width: 100%; padding: 0.9em 0.6em; white-space: nowrap; }
.toestemming-knop.is-weigeren { background: var(--text); color: var(--bg); }
.toestemming-knop.is-accepteren { background: var(--fill, var(--accent)); color: var(--on-fill, var(--on-accent)); }
.schakelaar { appearance: none; flex: none; width: 46px; height: 26px; border-radius: var(--radius-pill); background: var(--line-strong); position: relative; cursor: pointer; transition: background-color var(--dur-bediening) var(--ease); }
.schakelaar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform var(--dur-bediening) var(--ease); }
.schakelaar:checked { background: var(--accent); }
.schakelaar:checked::after { transform: translateX(20px); }
.schakelaar:focus-visible, .toestemming-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 580px) { .toestemming-knoppen { grid-template-columns: minmax(0, 1fr); } }
/* Reduced motion: blok 14 laat alleen de kleurwissel staan, het bolletje springt. */

/* ==========================================================================
   14. Beweging

   Beweging is ontwerp: wat er beweegt, in welke richting en in welk tempo
   leid je per merk af (brief/02-ontwerprichting.md); curves en duren staan in
   blok 1. Hier staat de gedeelde techniek: de onthulling bij binnenkomst
   (data-anim, gezet door assets/js/site.js), het vangnet voor modules met
   data-motion-owner en de leesvoortgang.

   Een beginstand die iets verbergt, bestaat alleen zolang het bewegingsregister
   in site.js zegt dat de module loopt. Dan staat haar naam in data-beweging:
   op <html> voor de onthulling, op de wrapper voor een module. En alleen op
   het scherm, met beweging aan. Zonder JavaScript, als site.js niet laadt,
   bij een fout, bij afdrukken en bij reduced motion staat dus alles in de
   eindstand, zonder timer. Het eerste scherm krijgt nooit een beginstand.
   ========================================================================== */

@media screen and (prefers-reduced-motion: no-preference) {
	[data-beweging~="onthulling"] [data-anim]:not(.is-in) { opacity: 0; }
	/* "schuif" is voor koppen: de tekst blijft leesbaar, alleen de plek schuift. */
	[data-beweging~="onthulling"] [data-anim="schuif"]:not(.is-in) { opacity: 1; transform: translateY(14px); }
}

[data-anim].is-in {
	animation-delay: var(--anim-delay, 0ms);
	animation-duration: var(--dur-onthul);
	animation-timing-function: var(--ease);
	/*
	 * backwards, niet both: een gevulde animatie houdt na afloop haar laatste
	 * transform vast, en dan doet de hover-lift van een onthulde kaart niets.
	 */
	animation-fill-mode: backwards;
}
[data-anim="up"].is-in     { animation-name: anim-up; }
[data-anim="rise"].is-in   { animation-name: anim-rise; }
[data-anim="schuif"].is-in { animation-name: anim-schuif; }
[data-anim="mask"].is-in   { animation-name: anim-mask; }
[data-anim="zet"].is-in    { animation-name: anim-zet; animation-timing-function: var(--ease-zet, var(--ease)); }

@keyframes anim-up     { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes anim-rise   { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes anim-schuif { from { transform: translateY(14px); } to { transform: none; } }

/*
 * "zet" is de enige die een eigen richting per element kent: het element komt
 * van --dx/--dy vandaan en valt op zijn plaats. Bedoeld voor een groep die
 * zich sluit — losse stukken die samen één vlak worden. Zonder --dx/--dy
 * blijft er een simpele schaal over, dus het is veilig als terugval.
 */
@keyframes anim-zet {
	from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.86); }
	to   { opacity: 1; transform: none; }
}
/* Alleen voor beeld (data-anim-op="mask"); tekst die je wegknipt, lees je niet. */
@keyframes anim-mask {
	from { opacity: 0; clip-path: inset(0 0 100% 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/*
 * Vangnet voor modules (data-motion-owner, zie docs/animatie-skills.md in de
 * centrale werkmap). Zonder token in data-beweging is elke laag zichtbaar,
 * ook als de module zelf inline opacity, visibility of clip-path zette
 * (gsap.from() met autoAlpha, WAAPI met fill) of na een te late start nog
 * iets verbergt: !important wint van gewone inline stijl en van een lopende
 * animatie. Een module die start terwijl je hem al ziet, krijgt geen token en
 * beweegt dus alleen met transform. Is de module statisch, dan gaat ook een
 * achtergebleven transform weg: een laag eindigt zonder.
 */
[data-motion-owner]:not([data-beweging]) [data-motion-laag] {
	opacity: 1 !important;
	visibility: visible !important;
	clip-path: none !important;
}
[data-motion-staat="statisch"] [data-motion-laag] {
	transform: none !important;
}

/*
 * Zacht scrollen (assets/js/zacht-scrollen.js). Lenis schrijft de positie
 * zelf. Een native sprong (anker, focus, zoeken op de pagina) moet daarom
 * direct zijn: een zachte sprong breekt Lenis af met zijn eigen schrijfactie,
 * nog voordat de bewaker in de adapter de afwijking ziet. Blok 2 zet smooth.
 */
html.lenis { scroll-behavior: auto; }

.reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 200;
	pointer-events: none;
}
.reading-progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--accent);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
}

/*
 * Beweging uit (docs/harde-eisen.md in de centrale werkmap). Alleen een
 * kleur- of opacity-overgang van hooguit 150ms mag blijven; al het andere
 * staat direct op zijn eindstand, ook als de voorkeur tijdens het bezoek
 * aangaat. Waarom zo, en niet meer alle duren op 0.01ms:
 *
 * - Animaties krijgen duur en vertraging 0s, één herhaling en de gewone
 *   tijdlijn in plaats van een scroll-timeline. Elke animatie staat zo
 *   meteen op haar eindstand en lussen en scroll-timelines stoppen echt; een
 *   duur van 0.01ms laat een scroll-timeline gewoon meelopen. Liever dan
 *   animation: none, omdat animationend dan nog komt en een element dat met
 *   fill-mode forwards uit opacity 0 binnenkomt, zichtbaar blijft.
 * - transition-property bevat alleen opacity en kleur. Transform, translate,
 *   scale, rotate, clip-path, positie en afmeting staan er niet in en
 *   springen dus naar hun eindstand, terwijl een crossfade of kleurwissel
 *   kan blijven. Voor die sprong komt geen transitionend: wacht in
 *   JavaScript op WAAPI .finished of handel reduced motion direct af. De
 *   focusring (outline-color) staat er bewust niet in: die verschijnt direct.
 * - De duur is --dur-reduce uit blok 1, begrensd op 150ms. min(eigen duur,
 *   150ms) bestaat niet in CSS: de eigen duur is niet te lezen, en na het
 *   vervangen van de eigenschappenlijst vallen eigen duren en vertragingen
 *   per positie op een andere eigenschap. Ook een element zonder eigen
 *   transitie wisselt kleur en opacity daarom in 150ms; dat valt binnen de
 *   eis. Moet iets direct wisselen, zet dan --dur-reduce: 0s op dat element.
 *   Kent een browser min() hier niet, dan wordt de duur 0s: alles direct.
 * - Vertragingen gaan naar 0s: een getrapte reeks fades is geen korte
 *   overgang meer.
 * - Een overgang die al liep toen de voorkeur aanging, houdt in CSS haar
 *   eigen duur, en een lopende smooth scroll loopt door. site.js maakt die
 *   bij de wissel direct af, nadat het bewegingsregister elke module, de
 *   leesvoortgang en zacht scrollen in hun eindstand heeft gezet. De lagen
 *   van een module staan hieronder ook zonder JavaScript in hun eindstand.
 *
 * Verplaatsing als eindstand (een hover-lift, een schuivende pijl) zet je
 * hieronder ook terug; doe dat in blok 16 voor elk eigen effect.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0s !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		animation-timeline: auto !important;
		transition-property: opacity, color, background-color, border-color, fill, stroke, text-decoration-color !important;
		transition-duration: min(var(--dur-reduce, 150ms), 150ms) !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	[data-motion-owner] [data-motion-laag] {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		clip-path: none !important;
	}
	.reading-progress { display: none; }
	.button:hover,
	.card:hover,
	.service-card:hover,
	.case-card:hover,
	.product-card:hover,
	.arrow-link:hover .icon { transform: none; }
}

/* ==========================================================================
   15. Print
   ========================================================================== */

@media print {
	.topbar,
	.site-header,
	.site-footer,
	.sticky-cta,
	.resource-aside,
	.cta,
	.reading-progress,
	.section-related { display: none !important; }

	body { background: #FFFFFF; color: #000000; }
	.entry-content > * { max-width: none; }

	/*
	 * Een beginstand geldt alleen op het scherm, dus ook zonder beforeprint
	 * (dat event is op mobiel onbetrouwbaar) komt de pagina vol uit de printer.
	 * Hier staat alleen wat op het moment van afdrukken nog liep: een onthulling
	 * halverwege en de lagen van een module. Geen deken over de hele module: een
	 * poster naast het canvas blijft één keer. Een module met een poster
	 * (data-motion-poster) drukt de poster af in plaats van het canvas; zonder
	 * poster blijft het canvas staan, want dan is het zelf de inhoud.
	 */
	[data-anim] { opacity: 1 !important; animation: none !important; }
	[data-motion-owner] [data-motion-laag] {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		clip-path: none !important;
	}
	[data-motion-owner]:has([data-motion-poster]) canvas { display: none !important; }
	[data-motion-owner] [data-motion-poster] { display: block !important; }
	a::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* ==========================================================================
   16. Vormgeving per klant

   Hier landt het idee van deze site: het herobeeld, de compositie, de
   sectieovergangen en de beweging die bij dit merk horen. Dit blok schrijf je
   per opdracht opnieuw. De merkwaarden in blok 1 bepaal je ook per klant;
   blok 2-15 is de gedeelde opbouw, en een verbetering daarvan gaat terug naar
   de kit. Geen ornament: elk element doorstaat de functietoets uit
   docs/uniek-per-klant.md §4 in de centrale werkmap.

   Twee regels die ook hier gelden:
   - kleur komt uit de tokens in blok 1, nooit hardcoded;
   - geen effect zonder terugval bij prefers-reduced-motion.
   ========================================================================== */

/* Kwaliteit: knoptekst behoudt zijn contrast binnen footer en artikelinhoud. */
.site-footer a.button-primary, .entry-content a.button-primary { color: var(--on-fill, var(--on-accent)); }
.site-footer a.button-primary:hover, .entry-content a.button-primary:hover { color: var(--on-fill, var(--on-accent)); }

/* ==========================================================================
   BRAUER — richting Helemaal jij (brief/15)
   Warm papier, afgeronde beelden, koppen in Figtree met een schuine tweede
   regel in Instrument Serif, het logo midden in het menu, de film en de
   showroomkaart. Componenten gebruiken alleen tokens uit blok 1; de hex in
   --k is de staalkleur van een conceptkleur (inhoud, geen vormgeving).
   ========================================================================== */

/* clip op main en voet, niet alleen op body: body geeft overflow door aan het
   venster, en daar wordt clip hidden en telt een inschuivend blok toch mee
   (docs/frontend-lessen.md; gemeten op voorstel.sitejob.nl, PR #45). */
.site-main,
.site-footer { overflow-x: clip; }

/* ---- Typografie ------------------------------------------------------- */
h1,
h2,
.kop-twee { font-weight: 400; line-height: 1.04; }
h1 em,
h2 em,
.kop-twee em,
.film-regels em {
	font-family: var(--f-serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	display: block;
}
.hero-title { font-size: var(--t-hero); line-height: 1; margin-bottom: 0; }
.boven { font-size: var(--t-small); color: var(--text-soft); margin: 0 0 1.1em; }
.zacht { color: var(--text-soft); }
.jij-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: color var(--dur-bediening) var(--ease);
}
.jij-link:hover { color: var(--accent); }
.jij-link.klein { font-size: var(--t-small); }
.jij-acties { display: flex; align-items: center; gap: 1.6em; flex-wrap: wrap; }
.button { font-size: 0.9375rem; padding: 0.95em 1.6em; }
.button-small { font-size: 0.875rem; padding: 0.8em 1.4em; }
:focus-visible { outline-color: var(--koper); }

/* ---- Sitehoofd: menu links, logo in het midden ------------------------ */
.kop-midden .header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	min-height: 84px;
	padding-block: 0;
}
.kop-midden .brand { grid-column: 2; grid-row: 1; justify-self: center; }
/* vaste breedte: in een auto-kolom zakt een img met max-width: 100% naar 0 */
.kop-midden .site-logo { width: 154px; max-width: none; height: auto; max-height: none; }
.kop-midden .site-navigation { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; }
.kop-midden .header-actions { grid-column: 3; grid-row: 1; justify-self: end; gap: 22px; }
.kop-midden .header-panel { justify-content: flex-start; flex: none; }
.kop-midden .main-nav .menu { gap: clamp(18px, 2.2vw, 30px); }
.kop-midden .main-nav a { font-size: 0.9375rem; font-weight: 400; }
.kop-midden .main-nav a:hover { color: var(--accent); }
.kop-tekstlink { color: var(--text); text-decoration: none; font-size: 0.9375rem; }
.kop-tekstlink:hover { color: var(--accent); }
.kop-midden .button .kort { display: none; }
.menu-extra { display: none; }
.menu-button { gap: 10px; width: auto; padding-inline: 0; border: 0; }
.menu-label { font-weight: 600; font-size: 0.9375rem; }
@media (min-width: 1025px) {
	.kop-midden .menu-label { display: none; }
}
@media (max-width: 1024px) {
	.kop-midden .header-inner { min-height: 70px; gap: 12px; }
	.kop-midden .site-logo { width: 118px; }
	.kop-tekstlink { display: none; }
	.kop-midden .button .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.kop-midden .button .kort { display: inline; }
	.kop-midden .button { padding: 0.75em 1.1em; font-size: 0.8125rem; }
}
@media (max-width: 380px) {
	/* op de smalste telefoons alleen het icoon; "Menu" blijft de naam van de knop */
	.menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.kop-midden .site-logo { width: 104px; }
	.navigation-ready .kop-midden .header-panel,
	.kop-midden .site-navigation[open] > .header-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: grid;
		gap: 1.2em;
		background: var(--bg);
		padding: 1.4em var(--gutter) 2em;
		border-bottom: 1px solid var(--line);
	}
	.kop-midden .site-navigation:not([open]) > .header-panel { display: none; }
	.kop-midden .main-nav .menu { flex-direction: column; align-items: flex-start; gap: 0.2em; }
	.kop-midden .main-nav a { font-size: 1.375rem; }
	.kop-midden .main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0.4em 1em; }
	.kop-midden .main-nav .sub-menu a { font-size: 1rem; padding: 0.2em 0; }
	.menu-extra { display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; margin: 0; padding-top: 1em; border-top: 1px solid var(--line); }
	.menu-extra a { color: var(--text-soft); text-decoration: none; }
}

/* ---- Hero ------------------------------------------------------------- */
.jij-hero { padding-block: clamp(28px, 4vw, 56px) var(--section-y); }
.jij-hero-raster {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.jij-hero .hero-lead { font-size: var(--t-lead); color: var(--text-soft); max-width: 34ch; margin: 1.4em 0 1.8em; }
.jij-hero-beeld { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 5.4; background: var(--surface-alt); }
.jij-hero-beeld img { width: 100%; height: 100%; object-fit: cover; }
.jij-label {
	position: absolute;
	right: 18px;
	bottom: 18px;
	margin: 0;
	background: var(--surface);
	border-radius: var(--radius);
	padding: 14px 18px;
	font-size: var(--t-small);
	line-height: 1.35;
}
.jij-label span { display: block; color: var(--text-soft); font-size: 0.8125rem; }
@media (max-width: 900px) {
	.jij-hero-raster { grid-template-columns: minmax(0, 1fr); }
	.jij-hero-beeld { aspect-ratio: 4 / 3.6; }
}
/* Entree bij laden: alleen transform, zodat H1, knop en herobeeld vanaf de
   eerste paint zichtbaar zijn (kritiek pad, docs/animatie-skills.md). */
@media screen and (prefers-reduced-motion: no-preference) {
	.jij-hero-tekst { animation: jij-entree-links var(--dur-slide) var(--ease-merk) both; }
	.jij-hero-beeld { animation: jij-entree-rechts var(--dur-slide) var(--ease-merk) 80ms both; }
}
@keyframes jij-entree-links { from { transform: translateX(calc(var(--afstand-slide) * -1)); } to { transform: none; } }
@keyframes jij-entree-rechts { from { transform: translateX(var(--afstand-slide)); } to { transform: none; } }

/* ---- De film ---------------------------------------------------------- */
.film { position: relative; background: var(--surface-alt); }
.film-podium {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	min-height: min(100vh, 900px);
	padding-block: var(--section-y);
}
.film-zijde {
	padding-left: max(var(--gutter), calc((100vw - var(--shell-max)) / 2));
	position: relative;
	z-index: 3;
}
.film-regels { position: relative; font-size: clamp(2.375rem, 1.5rem + 3vw, 4.125rem); line-height: 1.04; letter-spacing: var(--kop-spatie); }
.film-regels > span { display: none; }
.film-regels > span.aan { display: block; }
.film-tekst { color: var(--text-soft); max-width: 30ch; margin: 1.2em 0 0; }
.film-kleuren { display: flex; gap: 6px; margin: 1.4em 0 0 -4px; padding: 0; list-style: none; }
/* knop van 36px om een bol van 26px: groot genoeg om te tikken */
.film-kleuren button,
.jij-stalen button {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: none;
	padding: 0;
	display: grid;
	place-items: center;
	/* de ring is een schaduw, geen outline: de kit haalt de outline weg bij
	   focus met de muis, en dan viel de gekozen kleur niet meer op */
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow var(--dur-bediening) var(--ease);
}
.film-kleuren button::before,
.jij-stalen button::before,
.jij-conceptkleuren i {
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--k);
	box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.35);
}
.film-kleuren button[aria-pressed="true"],
.jij-stalen button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); }
.film-kleuren button:not([aria-pressed="true"]):hover,
.jij-stalen button:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 2px var(--line-strong); }
.film-stappen { display: flex; gap: 8px; margin-top: 2em; }
.film-stappen i { width: 28px; height: 3px; border-radius: 2px; background: var(--line); transition: background-color 0.3s; }
.film-stappen i.aan { background: var(--koper); }
.film-doek { position: relative; aspect-ratio: 4 / 4.2; }
.film-doek canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: none; }
.film-eind { position: absolute; inset: 6% 18% 6% 12%; border-radius: var(--radius-lg); overflow: hidden; z-index: 1; }
.film-eind img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-reduce) var(--ease); }
.film-eind img.wissel { opacity: 0; }
.film-merk { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
.film-merk.aan { opacity: 1; }
/* Loopt de film (token van het register), dan wordt de sectie een vastgezet
   podium van vijf schermen; de tekst wisselt met de scroll. */
[data-beweging~="brauer-film"].film { height: 500vh; }
[data-beweging~="brauer-film"] .film-podium { position: sticky; top: 0; height: 100vh; min-height: 0; padding-block: 0; overflow: hidden; }
[data-beweging~="brauer-film"] .film-doek { height: 100%; aspect-ratio: auto; }
[data-beweging~="brauer-film"] .film-doek canvas { display: block; }
[data-beweging~="brauer-film"] .film-regels { height: 3.2em; }
[data-beweging~="brauer-film"] .film-regels > span { display: block; position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(16px); transition: opacity 0.5s, transform 0.5s; }
[data-beweging~="brauer-film"] .film-regels > span.aan { opacity: 1; transform: none; }
[data-beweging~="brauer-film"] .film-eind { inset: 12% 22% 8% 16%; opacity: 0; transition: opacity 0.8s; }
[data-beweging~="brauer-film"].af .film-eind { opacity: 1; }
[data-beweging~="brauer-film"].af canvas { opacity: 0; transition: opacity 0.8s; }
[data-beweging~="brauer-film"] .film-kleuren { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
[data-beweging~="brauer-film"].product .film-kleuren { opacity: 1; visibility: visible; }
@media (max-width: 900px) {
	.film-podium { grid-template-columns: minmax(0, 1fr); padding-block: var(--section-y) 0; }
	.film-zijde { padding-inline: var(--gutter); }
	.film-doek { aspect-ratio: 4 / 4.4; margin-top: 2em; }
	.film-eind { inset: 0 var(--gutter); }
	[data-beweging~="brauer-film"] .film-podium { grid-template-rows: auto 1fr; padding-top: 88px; }
	[data-beweging~="brauer-film"] .film-doek { aspect-ratio: auto; margin: 0; }
	[data-beweging~="brauer-film"] .film-regels { height: 2.3em; }
	[data-beweging~="brauer-film"] .film-eind { inset: 4% 64px 12%; }
}

/* ---- Programma's en conceptkleuren ------------------------------------ */
.jij-kopregel {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 32px;
	margin-bottom: clamp(36px, 5vw, 64px);
}
.jij-kopregel > p { max-width: 36ch; color: var(--text-soft); margin: 0; }
.jij-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: start; }
.jij-kaart { display: grid; gap: 14px; color: var(--text); text-decoration: none; }
.jij-kaart:nth-child(2) { margin-top: 56px; }
.jij-kaart-beeld { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--surface-alt); }
.jij-kaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.jij-kaart:hover img { transform: scale(1.04); }
.jij-kaart-titel { display: flex; justify-content: space-between; font-size: 1.5rem; font-weight: 500; margin-top: 4px; }
.jij-kaart-tekst { margin-top: -8px; color: var(--text-soft); font-size: 0.9375rem; }
.jij-conceptkleuren {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--line);
}
.jij-conceptkleuren ul { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 26px); list-style: none; margin: 0; padding: 0; }
.jij-conceptkleuren li { display: grid; justify-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-soft); margin: 0; }
.jij-conceptkleuren i { display: block; width: 38px; height: 38px; }
.jij-conceptkleuren p { margin: 0; color: var(--text-soft); max-width: 52ch; }
.jij-conceptkleuren strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) {
	.jij-kopregel { flex-direction: column; align-items: flex-start; }
	.jij-drie { grid-template-columns: minmax(0, 1fr); }
	.jij-kaart:nth-child(2) { margin-top: 0; }
	.jij-conceptkleuren { grid-template-columns: minmax(0, 1fr); }
	.jij-conceptkleuren ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
	.jij-conceptkleuren li { font-size: 0.6875rem; }
	.jij-conceptkleuren i { width: 32px; height: 32px; }
}

/* ---- Kies je eigen kleur ---------------------------------------------- */
.jij-kleur { background: var(--surface-alt); }
.jij-kleur-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.jij-staalbeeld { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--line); }
.jij-staalbeeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
.jij-staalbeeld img.aan { opacity: 1; }
.jij-stalen { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 1.8em 0; }
.jij-stalen li { margin: 0; }
.jij-stalen button { width: 54px; height: 54px; }
.jij-stalen button::before { width: 44px; height: 44px; }
.jij-staalnaam { font-weight: 600; margin: 0 0 1.8em; }
@media (max-width: 900px) { .jij-kleur-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---- Brochure: hoog op de pagina, één klik ------------------------------ */
.jij-brochure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.jij-brochure-beeld { position: relative; min-height: 420px; background: var(--surface-alt); }
.jij-brochure-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jij-brochure-tekst { padding: clamp(32px, 5vw, 72px); display: grid; align-content: center; gap: 18px; }
.jij-brochure-tekst .boven { margin: 0; }
.jij-brochure h2 em { display: inline; }
.jij-brochure p { margin: 0; max-width: 40ch; }
@media (max-width: 900px) {
	.jij-brochure { grid-template-columns: minmax(0, 1fr); }
	.jij-brochure-beeld { min-height: 260px; }
}

/* ---- Thuis kijken bij ------------------------------------------------- */
.jij-thuis { padding-top: 0; }
.jij-strook { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.jij-strook::-webkit-scrollbar { display: none; }
.jij-verhaal {
	flex: 0 0 min(84vw, 880px);
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-alt);
	scroll-snap-align: start;
	color: var(--text);
	text-decoration: none;
}
.jij-verhaal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.jij-verhaal-tekst { padding: clamp(22px, 3vw, 40px); display: grid; align-content: center; gap: 12px; }
.jij-verhaal-tekst .boven { margin: 0; }
.jij-verhaal-naam { font-family: var(--f-serif); font-size: 2.125rem; line-height: 1.05; }
.jij-verhaal .jij-link { justify-self: start; }
.jij-pijlen { display: flex; gap: 10px; }
.jij-pijlen button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--text); background: none; color: var(--text); font-size: 1.125rem; cursor: pointer; transition: background-color var(--dur-bediening) var(--ease); }
.jij-pijlen button:hover { background: var(--surface-alt); }
@media (max-width: 900px) { .jij-verhaal { grid-template-columns: minmax(0, 1fr); } }

/* ---- De mensen achter BRAUER ------------------------------------------ */
.jij-mensen { padding-top: 0; }
.jij-mensen-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.jij-mensen-beeld { border-radius: var(--radius-lg); overflow: hidden; }
.jij-mensen-beeld img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; }
@media (max-width: 900px) { .jij-mensen-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---- Showroomkaart ---------------------------------------------------- */
.jij-showroom { padding-top: 0; }
.showroomkaart {
	--kaart-land: var(--mist);
	background: var(--bg);
	border-radius: var(--radius-lg);
	padding: clamp(14px, 1.6vw, 20px);
	display: grid;
	grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(14px, 1.6vw, 20px);
}
.showroomkaart-zoek { padding: clamp(22px, 3vw, 44px) clamp(10px, 2vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; min-width: 0; }
.showroomkaart-zoek p { margin: 0; color: var(--text-soft); }
.showroomkaart-boven { font-size: var(--t-small); color: var(--text-faint) !important; }
.kaartzoek { display: flex; background: var(--white); border-radius: var(--radius-pill); padding: 6px; max-width: 460px; }
.kaartzoek input { flex: 1; width: 100%; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.0625rem; padding: 10px 16px; color: var(--ink); }
.kaartzoek button { border: 0; border-radius: var(--radius-pill); padding: 0 22px; background: var(--koper); color: var(--white); font: inherit; font-weight: 600; cursor: pointer; }
.kaart-melding { font-size: 0.9375rem; min-height: 1.4em; color: var(--accent) !important; }
.kaart-resultaten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kaart-resultaten li { margin: 0; }
.kaart-resultaten button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); transition: background-color var(--dur-bediening) var(--ease); }
.kaart-resultaten button:hover,
.kaart-resultaten button:focus-visible { background: var(--surface-alt); }
.kaart-resultaten button:focus-visible { outline: 2px solid var(--accent); }
.kaart-resultaten .nr { width: 30px; height: 30px; border-radius: 50%; background: var(--koper); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; }
.kaart-resultaten .naam { display: block; font-weight: 600; line-height: 1.3; }
.kaart-resultaten .plaats,
.kaart-resultaten .km { font-size: 0.875rem; color: var(--text-soft); }
.kaart-resultaten .km { white-space: nowrap; }
.kaartvlak { position: relative; border-radius: calc(var(--radius-lg) - 6px); overflow: hidden; min-height: 560px; background: var(--paper); isolation: isolate; }
.kaart-canvas { position: absolute; inset: 0; }
.kaart-wacht { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-soft); font-size: 0.9375rem; z-index: 0; }
.kaartvlak .leaflet-tile-pane { filter: grayscale(1) sepia(0.18) brightness(1.04) contrast(0.92); }
.kaartvlak .leaflet-container { background: var(--paper); font: inherit; color: var(--ink); }
.kaartvlak .leaflet-control-attribution { font-size: 11px; }
.kaartvlak .leaflet-popup-content-wrapper { border-radius: var(--radius); font-size: 0.9375rem; }
.kaartvlak .leaflet-popup-content { margin: 14px 18px; }
.kaartvlak .leaflet-popup-content strong { display: block; font-size: 1rem; }
.kaartvlak .leaflet-popup-content a { color: var(--brand); }
.punt { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--koper); border: 2px solid var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.punt.dichtbij { width: 30px; height: 30px; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 0.8125rem; line-height: 1; background: var(--night); }
.punt.jij { width: 18px; height: 18px; background: var(--white); border: 5px solid var(--koper); }
.kaart-bron { font-size: 0.8125rem; color: var(--text-soft); margin: 12px 0 0; }
@media (max-width: 900px) {
	.showroomkaart { grid-template-columns: minmax(0, 1fr); }
	.kaartvlak { min-height: 440px; }
}

/* ---- Sitevoet: licht ---------------------------------------------------- */
.voet-licht {
	background: var(--bg);
	color: var(--text-soft);
	--text:       var(--ink);
	--text-soft:  var(--ink-soft);
	--text-faint: var(--ink-soft);
	border-top: 1px solid var(--line);
	margin-top: 0;
	padding-top: clamp(40px, 5vw, 64px);
}
.voet-licht a:hover { color: var(--accent); }
.voet-licht h2 { color: var(--text); }
.voet-licht .footer-grid { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
.voet-licht .footer-heading { font-size: 0.9375rem; letter-spacing: 0; text-transform: none; font-family: var(--f-body); font-weight: 600; }
.voet-licht .site-logo { width: 150px; height: auto; max-height: none; }
.voet-licht .footer-pitch { margin: 0.9em 0 0; }
.voet-licht .footer-bottom { border-top: 0; color: var(--text-soft); font-size: 0.875rem; padding-block: 1.6em 2.2em; }
@media (max-width: 900px) { .voet-licht .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- Onthulling: het merkgebaar "slide-in" ------------------------------
   Aanvulling op blok 14: koppen en beelden schuiven van links of rechts, en
   rise komt verder van onder dan in de kit. Duur en curve uit blok 1. Zelfde
   regel als blok 14: alleen achter het token, alleen op het scherm. */
@media screen and (prefers-reduced-motion: no-preference) {
	[data-anim="links"].is-in { animation-name: jij-in-links; }
	[data-anim="rechts"].is-in { animation-name: jij-in-rechts; }
	[data-anim="rise"].is-in { animation-name: jij-in-rise; }
	[data-anim="links"].is-in,
	[data-anim="rechts"].is-in,
	[data-anim="rise"].is-in,
	[data-anim="mask"].is-in { animation-duration: var(--dur-slide); animation-timing-function: var(--ease-merk); }
}
@keyframes jij-in-links { from { opacity: 0; transform: translateX(calc(var(--afstand-slide) * -1)); } to { opacity: 1; transform: none; } }
@keyframes jij-in-rechts { from { opacity: 0; transform: translateX(var(--afstand-slide)); } to { opacity: 1; transform: none; } }
@keyframes jij-in-rise { from { opacity: 0; transform: translateY(var(--afstand-slide)) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- Paginakop en showroompagina ----------------------------------------- */
.jij-paginakop { padding-block: clamp(28px, 4vw, 56px) 0; }
.jij-paginakop .hero-title { margin-top: 0.4em; max-width: 16ch; }
.jij-paginakop-intro { max-width: 52ch; margin-top: 1.4em; font-size: var(--t-lead); color: var(--text-soft); }
.jij-showroom + .jij-verkooppunten { padding-top: 0; }
.jij-plaatsen { columns: 3 260px; column-gap: clamp(24px, 4vw, 56px); margin: clamp(28px, 4vw, 48px) 0 0; }
.jij-plaatsen div { break-inside: avoid; padding: 14px 0; border-top: 1px solid var(--line); }
.jij-plaatsen dt { font-weight: 600; }
.jij-plaatsen dd { margin: 2px 0 0; color: var(--text-soft); font-size: 0.9375rem; }

/* ---- Doorvertaling: pagina's, productgroepen en verhalen ----------------
   Zelfde taal als de homepage: lichte koppen met de schuine tweede letter,
   afgeronde beelden, rustige banden. De opbouw blijft die van de kit. */
.eyebrow { font-size: var(--t-small); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-soft); }
.eyebrow .eyebrow-dot { display: none; }
.resource-title { font-weight: 400; font-size: var(--t-h1); line-height: 1.04; max-width: 20ch; }
.resource-intro { color: var(--text-soft); font-size: var(--t-lead); max-width: 52ch; }
.entry-content h2 { font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; }
.entry-content h3 { font-weight: 500; }
.entry-content .wp-block-image img,
.entry-content figure img,
.resource-banner img { border-radius: var(--radius-lg); }
.entry-content .wp-block-image { margin-block: clamp(24px, 3vw, 40px); }

/* Galerijen van de collecties en de verhalen: een rustig raster van afgeronde beelden */
.entry-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin-block: clamp(20px, 3vw, 36px);
	padding: 0;
}
.entry-content .wp-block-gallery .wp-block-image { margin: 0; width: auto !important; }
.entry-content .wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-alt); }
@media (max-width: 700px) { .entry-content .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Handleidingen: één rij per pdf, direct te downloaden */
.entry-content .handleidingen { list-style: none; padding: 0; margin: 0 0 2em; border-top: 1px solid var(--line); }
.entry-content .handleidingen li { margin: 0; border-bottom: 1px solid var(--line); }
.entry-content .handleidingen a { display: inline-block; padding: 0.9em 0; color: var(--text); font-weight: 500; text-decoration: none; }
.entry-content .handleidingen a:hover { color: var(--accent); }
.entry-content .handleidingen .bestandssoort { color: var(--text-soft); font-size: var(--t-small); }

/* Hoofdstukken van een productgroep: het beeld afgerond en vullend */
.hoofdstuk-beeld { margin: 0; }
.hoofdstuk-beeld img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius-lg); }
.hoofdstuk-kop h2,
.hoofdstuk-tekst h2 { font-weight: 400; }

/* Onderpagina's als beeldkaarten */
.jij-onder-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px) clamp(14px, 2vw, 26px); margin-top: clamp(28px, 4vw, 48px); }
.jij-onder .jij-kaart-beeld { aspect-ratio: 4 / 3.4; }
@media (max-width: 900px) { .jij-onder-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .jij-onder-raster { grid-template-columns: minmax(0, 1fr); } }

/* Inspiratie */
.jij-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2em; }
.jij-filter a { padding: 0.55em 1.1em; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text); text-decoration: none; font-size: 0.9375rem; transition: background-color var(--dur-bediening) var(--ease); }
.jij-filter a:hover { background: var(--surface-alt); }
.jij-filter a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.jij-verhalen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(14px, 2vw, 26px); }
.jij-verhaalkaart { display: grid; align-content: start; gap: 8px; color: var(--text); text-decoration: none; }
.jij-verhaalkaart.is-groot { grid-column: span 2; }
.jij-verhaalkaart-beeld { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.3; background: var(--surface-alt); margin-bottom: 8px; }
.jij-verhaalkaart.is-groot .jij-verhaalkaart-beeld { aspect-ratio: 16 / 9.4; }
.jij-verhaalkaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.jij-verhaalkaart:hover img { transform: scale(1.03); }
.jij-verhaalkaart .boven { margin: 0; }
.jij-verhaalkaart-naam { font-family: var(--f-serif); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.05; }
.jij-verhaalkaart-quote { font-size: 0.9375rem; }
@media (max-width: 900px) {
	.jij-verhalen-raster { grid-template-columns: minmax(0, 1fr); }
	.jij-verhaalkaart.is-groot { grid-column: auto; }
	.jij-verhaalkaart.is-groot .jij-verhaalkaart-beeld { aspect-ratio: 4 / 3.3; }
}
.aanvraagband-titel { font-weight: 400; }
/* De banner blijft breed en dun, ook als de foto kleiner is dan het vlak (must-have blogbanner ≥ 2,4:1). */
.resource-banner img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }

/* ---- Kleurpagina's van de collecties (template-parts/page/kleur.php) ------
   Een etalage per kleur: de staalkleur (--staal) voorop, de andere kleuren en
   collecties één klik verder, per productgroep één groot sfeerbeeld met de
   producten op witte tegels eromheen. */
.kleur-boven { display: inline-flex; align-items: center; gap: 0.6em; }
.kleur-boven i,
.kleur-label i,
.kleur-stalen i,
.kleur-slot-stalen i {
	display: inline-block;
	flex: none;
	border-radius: 50%;
	background: var(--k, var(--staal));
	box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.35);
}
.kleur-boven i { width: 14px; height: 14px; }
.kleur-kop .hero-title { max-width: 13ch; }
.kleur-kop .breadcrumbs { margin-bottom: 1.6em; }
.kleur-kop .hero-actions { display: flex; align-items: center; gap: 1.6em; flex-wrap: wrap; }
.kleur-kop { padding-bottom: clamp(28px, 4vw, 56px); }
.kleur-label { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; font-size: 1rem; font-weight: 600; }
.kleur-label i { width: 30px; height: 30px; grid-row: span 2; }
.kleur-label span { grid-column: 2; font-weight: 400; }

/* Wissel van kleur of collectie */
.kleur-wissel { border-block: 1px solid var(--line); }
.kleur-wissel-raster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px clamp(32px, 6vw, 96px); padding-block: clamp(22px, 3vw, 34px); }
.kleur-wissel .boven { margin-bottom: 0.8em; }
.kleur-wissel .jij-filter { margin: 0; padding: 0; list-style: none; }
.kleur-wissel .jij-filter li { margin: 0; }
.kleur-stalen { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 0; padding: 0; list-style: none; }
.kleur-stalen li { margin: 0; }
.kleur-stalen a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 6px;
	border-radius: var(--radius-pill);
	color: var(--text);
	text-decoration: none;
	font-size: 0.9375rem;
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow var(--dur-bediening) var(--ease), background-color var(--dur-bediening) var(--ease);
}
.kleur-stalen a:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.kleur-stalen a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--text); }
.kleur-stalen i { width: 26px; height: 26px; }

/* Het verhaal van de collectie */
.kleur-verhaal-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.kleur-verhaal .kop-twee { font-size: var(--t-h2); max-width: 14ch; }
.kleur-verhaal .entry-content { font-size: var(--t-lead); color: var(--text-soft); }
.kleur-verhaal .entry-content p:first-child { margin-top: 0; }

/* Productgroepen */
.kleur-producten { padding-bottom: var(--section-y); }
.kleur-groepnav { position: relative; }
.kleur-groepnav .jij-filter { margin: 0; padding: 0; list-style: none; }
.kleur-groepnav .jij-filter li { margin: 0; }
/* .section.kleur-groep: wint van de regel die opeenvolgende secties hun bovenruimte afneemt */
.section.kleur-groep { padding-block: clamp(56px, 8vw, 120px) 0; scroll-margin-top: 90px; }
.kleur-groep-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 32px; margin-bottom: clamp(22px, 3vw, 36px); }
.kleur-groep-kop .kop-twee { margin: 0; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); }
.kleur-groep-kop .kleur-groep-tekst { grid-column: 1; max-width: 60ch; color: var(--text-soft); }
.kleur-groep-kop .jij-link { grid-column: 2; grid-row: 1; white-space: nowrap; }
.kleur-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(10px, 1.3vw, 18px);
}
.kleur-tegel { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; background: var(--surface-alt); }
.kleur-tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.kleur-tegel.is-groot { grid-column: span 2; grid-row: span 2; border-radius: var(--radius-lg); }
.is-gespiegeld .kleur-tegel.is-groot { grid-column: 3 / span 2; }
/* Vult de laatste rij: een sfeerbeeld over twee vakken */
/* twee vakken plus de tussenruimte: even hoog als de vierkanten ernaast */
.kleur-tegel.is-breed { grid-column: span 2; aspect-ratio: 2.06 / 1; }
/* Een product op wit: heel in beeld, het wit valt weg in de tegel */
.kleur-tegel.is-vrij { background: var(--surface); }
.kleur-tegel.is-vrij img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
@media (hover: hover) {
	.kleur-tegel:hover img { transform: scale(1.04); }
}

/* Slot: alle kleuren van deze collectie */
.kleur-slot { background: var(--surface-alt); }
.kleur-slot-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kleur-slot .kop-twee { max-width: 16ch; }
.kleur-slot .entry-content { color: var(--text-soft); margin-top: 1.2em; max-width: 52ch; }
.kleur-slot-stalen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.kleur-slot-stalen li { margin: 0; }
.kleur-slot-stalen a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px 14px 14px;
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	font-size: 1.125rem;
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow var(--dur-bediening) var(--ease);
}
.kleur-slot-stalen a:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.kleur-slot-stalen a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--text); }
.kleur-slot-stalen i { width: 44px; height: 44px; }
.kleur-slot-stalen .pijl { margin-left: auto; color: var(--text-soft); }

@media (max-width: 900px) {
	.kleur-verhaal-raster,
	.kleur-slot-raster { grid-template-columns: minmax(0, 1fr); }
	.kleur-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kleur-tegel.is-groot,
	.is-gespiegeld .kleur-tegel.is-groot { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3.2; }
	.kleur-tegel.is-breed { aspect-ratio: 2 / 1; }
	.kleur-groep-kop { grid-template-columns: minmax(0, 1fr); }
	.kleur-groep-kop .jij-link { grid-column: 1; grid-row: auto; justify-self: start; }
	.kleur-wissel-raster { flex-direction: column; }
}
@media (max-width: 420px) {
	.kleur-slot-stalen { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Over BRAUER (page-over-brauer.php) -----------------------------------
   Het merk als verhaal: groot beeld, de zes kleuren als ingang, de kenmerken
   en garanties als rustige typografische lijsten, de garantie in een donkere
   band. */
/* Kopteksten van brauerkranen.nl hebben lange samenstellingen
   ("badkamerkranen"): een maat kleiner dan de homepage, zodat het woord heel blijft. */
.over-kop .hero-title,
.kleur-kop .hero-title { font-size: clamp(2.75rem, 1.4rem + 4.1vw, 5.25rem); }
.over-kop .hero-title { max-width: 14ch; }
.over-kop .breadcrumbs { margin-bottom: 1.6em; }
.over-verhaal-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.over-verhaal-beeld { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.over-verhaal-beeld img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; }
.over-verhaal .kop-twee { margin-bottom: 0.6em; }

.over-kleuren-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.over-kleuren-kop .kop-twee { margin: 0; max-width: 14ch; }
.over-kleuren-kop .entry-content p,
.over-kleuren-kop > p { margin: 0; font-size: var(--t-lead); max-width: 46ch; }
.over-kleuren-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); list-style: none; margin: 0; padding: 0; }
.over-kleuren-raster li { margin: 0; }
.over-kleuren-raster a { display: grid; gap: 14px; color: var(--text); text-decoration: none; }
.over-kleur-beeld { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.3; background: var(--surface-alt); }
.over-kleur-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.over-kleur-naam { display: flex; align-items: center; gap: 12px; font-size: 1.375rem; }
.over-kleur-naam i {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--k);
	box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.35);
}
.over-kleur-naam .pijl { margin-left: auto; color: var(--text-soft); transition: transform var(--dur-bediening) var(--ease); }
@media (hover: hover) {
	.over-kleuren-raster a:hover img { transform: scale(1.04); }
	.over-kleuren-raster a:hover .pijl { transform: translate(3px, -3px); }
}

.over-herken-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.over-herken .kop-twee { max-width: 13ch; }
.over-herken-beeld { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.over-herken-beeld img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; }
.over-lijst { list-style: none; margin: clamp(24px, 3vw, 40px) 0; padding: 0; border-top: 1px solid var(--line); }
.over-lijst li { margin: 0; padding: 0.85em 0; border-bottom: 1px solid var(--line); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); line-height: 1.3; }

.over-garantie { background: var(--bg); }
.over-garantie-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.over-garantie .kop-twee { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem); max-width: 12ch; margin-bottom: 0.5em; }
.over-garantie .kop-twee em { color: var(--brand-light); }
.over-garantie .jij-link { color: var(--text); }
.over-garantie .over-lijst { margin: 0; }

@media (max-width: 900px) {
	.over-verhaal-raster,
	.over-kleuren-kop,
	.over-herken-raster,
	.over-garantie-raster { grid-template-columns: minmax(0, 1fr); }
	.over-kleuren-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.over-kleur-naam { font-size: 1.125rem; }
}