/* ==========================================================================
   High Five Balloons - hoofdstijlblad
   Vanilla CSS, geen framework, geen build-stap. Kleuren en afstanden staan als
   variabelen in :root hieronder.
   ========================================================================== */

/* -------------------------------------------------------------- variabelen */
:root {
	--kleur-primair: #ff4d6d;
	--kleur-primair-dark: #c81a44;
	--kleur-primair-zacht: #ffe3e8;
	/* Witte tekst op het felle koraal haalt 3,2 waar 4,5 vereist is. Dieper
	   rood dus onder élke witte tekst; het felle blijft voor decoratie. */
	--kleur-primair-diep: #d81d4a;
	--kleur-geel: #ffc93c;
	--kleur-geel-zacht: #fff3d1;
	--kleur-paars: #9a3bb5;
	--kleur-paars-zacht: #f2e4f7;
	--kleur-inkt: #241c2c;
	--kleur-inkt-zacht: #6a6273;
	--kleur-achtergrond: #fffcf7;
	--kleur-achtergrond-alt: #fff6ee;
	--kleur-wit: #ffffff;
	--kleur-rand: #e9dbcb;

	/* Kleur per dienst.
	   Elk onderdeel van het werk heeft een eigen kleur, die meeloopt van de
	   kaart op de homepage naar de pagina zelf. Zo betekent kleur iets: je ziet
	   aan het accent waar je bent, in plaats van dat het willekeurige versiering
	   is.

	   Elke kleur is op twee manieren gemeten, want hij wordt op twee manieren
	   gebruikt: als vlak met witte tekst erop, en als tekstkleur op zijn eigen
	   zachte tint. Beide moeten door de 4,5 van WCAG AA heen. De zachte tinten
	   zelf zijn alleen voor vlakken, nooit voor tekst. */
	--dienst-ballonnen: #0a736e;         /* wit erop 5,69:1 - als tekst 4,95:1 */
	--dienst-ballonnen-zacht: #e0f3f1;
	--dienst-boeketten: #c81a44;         /* wit erop 5,70:1 - als tekst 4,72:1 */
	--dienst-boeketten-zacht: #ffe3e8;
	--dienst-schmink: #9a3bb5;           /* wit erop 5,73:1 - als tekst 4,70:1 */
	--dienst-schmink-zacht: #f2e4f7;
	--dienst-zakelijk: #1c6f92;          /* wit erop 5,62:1 - als tekst 4,75:1 */
	--dienst-zakelijk-zacht: #e2eef4;

	/* Valt terug op het koraal zolang een pagina niet bij één dienst hoort.
	   Exact dezelfde tint als voorheen, zodat de homepage er onveranderd uitziet. */
	--dienst: var(--kleur-primair-dark);
	--dienst-zacht: var(--kleur-primair-zacht);

	/* Redactionele schreef voor koppen/logo: bewust géén externe
	   lettertype-download (snelheid, privacy, geen cookiemelding nodig).
	   Elk besturingssysteem heeft een verzorgde schreef met karakter. */
	--font-koppen: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Cambria, "Times New Roman", serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--lijn: 2.5px;
	--radius: 10px;
	--radius-klein: 7px;
	--radius-pil: 999px;

	/* "Sticker"-schaduw: een harde, verschoven blokschaduw in plaats van een
	   zachte gloed: voelt aan als een uitgeknipte sticker/kaartje, geen
	   generieke SaaS-kaart. */
	--schaduw: 5px 5px 0 var(--kleur-inkt);
	--schaduw-klein: 4px 4px 0 var(--kleur-inkt);
	--schaduw-groot: 9px 9px 0 var(--kleur-inkt);
	--schaduw-primair: 5px 5px 0 var(--kleur-primair-dark);

	--breedte-container: 1200px;
	--overgang: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* De licht gedraaide marquee-strook steekt bewust iets buiten het scherm;
	   clip voorkomt een horizontale scrollbalk zonder position:sticky te breken. */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--kleur-inkt);
	background: var(--kleur-achtergrond);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	-webkit-user-drag: none;
	user-select: none;
}

a {
	color: var(--kleur-primair-dark);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-koppen);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--kleur-inkt);
	margin: 0 0 0.45em;
}

/* Typografische schaal bewust bescheiden gehouden: grote maar geen
   schreeuwerige koppen (max ±60px voor de h1 op desktop). */
h1 { font-size: clamp(2.1rem, 3.4vw + 1rem, 3.7rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2vw + 0.9rem, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1vw + 1rem, 1.4rem); }
h1, h2, h3 { text-wrap: balance; }

/* Ankers nooit achter de plakkende header laten verdwijnen. */
[id] { scroll-margin-top: 96px; }

p { margin: 0 0 1.1em; }

ul, ol { padding-left: 1.3em; }

button {
	font-family: inherit;
}

/* Kleine, met de hand getekende accent-underline voor cursieve/kop-teksten. */
em { font-style: italic; }

/* Safari op iPhone legt bij elke tik een grijs blok over de aangeraakte knop
   heen, dat een fractie later weer verdwijnt. Op een site met eigen knopvormen
   en schaduwen ziet dat er rommelig uit. De knoppen hebben hun eigen reactie op
   een tik (:active), dus die terugkoppeling raken we niet kwijt. */
a,
button,
.knop,
summary,
[role="button"] {
	-webkit-tap-highlight-color: transparent;
}

/* Focus altijd zichtbaar houden: belangrijk voor toegankelijkheid. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--kleur-paars);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--kleur-geel);
	color: var(--kleur-inkt);
}

/* UI-elementen zijn geen leestekst: niet selecteerbaar. Dit voorkomt dat
   klik-slepen de halve pagina geel "highlight" (kaarttitels, knoppen,
   paginering enz.). Lopende tekst in .entry-content blijft gewoon
   selecteerbaar en kopieerbaar. */
.knop,
.menu-toggle,
.hoofdmenu,
.broodkruimels,
.filter-knop,
.paginering,
.portfolio-kaart,
.dienst-kaart,
.marquee,
.hero__badge,
.hero__statkaart,
.sticker-label,
.werkwijze__nummer,
.sectie-kop,
.kicker {
	user-select: none;
	-webkit-user-select: none;
}

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

.skip-link {
	z-index: 10000;
	top: -60px;
	left: 6px;
	position: fixed;
	background: var(--kleur-inkt);
	color: var(--kleur-wit) !important;
	padding: 12px 20px;
	border-radius: var(--radius-klein);
	transition: top var(--overgang);
}
.skip-link:focus {
	top: 6px;
	width: auto;
	height: auto;
	clip: auto;
	position: fixed;
}

/* ------------------------------------------------------------------ layout */
.container {
	width: 100%;
	max-width: var(--breedte-container);
	margin-inline: auto;
	padding-inline: 24px;
}

section { padding-block: clamp(44px, 6.5vw, 88px); }

.sectie-titel { margin-bottom: 0.3em; }
.sectie-intro {
	color: var(--kleur-inkt-zacht);
	font-size: 1.1rem;
	max-width: 60ch;
}
.sectie-kop {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 36px;
}

.icon { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }
.icon--klein { width: 1em; height: 1em; vertical-align: -0.15em; }
.icon--groot { width: 3em; height: 3em; }

/* De dienstkleur aanzetten.
   inc/helpers.php hangt een klasse op de body zodra een pagina bij een dienst
   hoort. Alles wat hieronder uit --dienst put kleurt dan mee. Staat er geen
   klasse, dan blijft het koraalrood van het merk staan. */
body.dienst--ballonnen { --dienst: var(--dienst-ballonnen); --dienst-zacht: var(--dienst-ballonnen-zacht); }
body.dienst--boeketten { --dienst: var(--dienst-boeketten); --dienst-zacht: var(--dienst-boeketten-zacht); }
body.dienst--schmink   { --dienst: var(--dienst-schmink);   --dienst-zacht: var(--dienst-schmink-zacht); }
body.dienst--zakelijk  { --dienst: var(--dienst-zakelijk);  --dienst-zacht: var(--dienst-zakelijk-zacht); }

/* Klein, redactioneel "kicker"-label: hoofdletters, brede letterspatiëring: het terugkerende accent-detail van deze site (ipv gekleurde pastel-vlakken). */
.kicker {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--dienst);
	margin-bottom: 10px;
}

/* Herbruikbaar geel "sticker"-label (bv. op de over-mij-foto). */
.sticker-label {
	display: inline-block;
	background: var(--kleur-geel);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius-klein);
	font-weight: 800;
	font-size: 0.8rem;
	padding: 8px 16px;
	box-shadow: 3px 3px 0 var(--kleur-inkt);
	color: var(--kleur-inkt);
}

/* ----------------------------------------------------------------- knoppen */
.knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	padding: 13px 24px;
	border-radius: var(--radius-klein);
	border: var(--lijn) solid var(--kleur-inkt);
	cursor: pointer;
	box-shadow: var(--schaduw-klein);
	transition: transform var(--overgang), box-shadow var(--overgang), background var(--overgang), color var(--overgang);
	white-space: nowrap;
}
.knop .icon { width: 1.1em; height: 1.1em; transition: transform var(--overgang); }
/* Schalen bij hover, niet verschuiven. Een element dat opschuift laat een
   strookje vrij onder de muis, verliest hover, springt terug, en gaat trillen.
   De meegroeiende schaduw geeft hetzelfde optil-effect. */
.knop:hover { transform: scale(1.04); box-shadow: 6px 6px 0 var(--kleur-inkt); }
.knop:hover .icon { transform: translateX(3px); }
.knop:active { transform: scale(0.98); box-shadow: 2px 2px 0 var(--kleur-inkt); }

.knop--primair {
	background: var(--kleur-primair-diep);
	border-color: var(--kleur-inkt);
	color: var(--kleur-wit) !important;
}
.knop--primair:hover { background: var(--kleur-primair-dark); }

.knop--outline {
	background: var(--kleur-wit);
	border-color: var(--kleur-inkt);
	color: var(--kleur-inkt) !important;
}
.knop--outline:hover { background: var(--kleur-geel-zacht); }

.knop--wit {
	background: var(--kleur-wit);
	border-color: var(--kleur-inkt);
	color: var(--kleur-primair-dark) !important;
	box-shadow: var(--schaduw-klein);
}
.knop--wit:hover { background: var(--kleur-geel); color: var(--kleur-inkt) !important; }

.knop--groot { padding: 16px 30px; font-size: 1.08rem; }
.knop--klein { padding: 9px 18px; font-size: 0.88rem; box-shadow: 3px 3px 0 var(--kleur-inkt); }
.knop--nav { display: none; }

/* ------------------------------------------------------------------ header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--kleur-achtergrond);
	border-bottom: var(--lijn) solid var(--kleur-inkt);
	transition: box-shadow var(--overgang);
}

/* Dun leesvoortgangs-balkje bovenaan het scherm, aangedreven door pure CSS
   (scroll-timeline). Browsers zonder ondersteuning tonen simpelweg niets. */
.scroll-voortgang {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--kleur-primair);
	transform-origin: 0 50%;
	transform: scaleX(0);
	z-index: 600;
	pointer-events: none;
	animation: scroll-voortgang linear;
	animation-timeline: scroll();
}
@keyframes scroll-voortgang {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
.site-header.is-gescrold { box-shadow: 0 8px 24px rgba(36, 28, 44, 0.10); }
.site-header__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 14px;
	transition: padding var(--overgang);
}
.site-header.is-gescrold .site-header__binnen { padding-block: 9px; }

.site-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--kleur-inkt) !important;
	flex-shrink: 0;
}
.site-branding img { max-height: 56px; width: auto; }
.site-branding__icoon {
	display: inline-flex;
	color: var(--kleur-primair);
	width: 2.1rem;
	height: 2.1rem;
}
/* Het logo-ballonnetje wiebelt vrolijk als je eroverheen zweeft. */
@keyframes ballon-wiebel {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(6deg) translateY(-2px); }
}
.site-branding:hover .site-branding__icoon { animation: ballon-wiebel 900ms ease-in-out infinite; }
.site-branding__icoon .icon { width: 100%; height: 100%; }
.site-branding__tekst { display: flex; flex-direction: column; line-height: 1.2; }
.site-branding__naam { font-family: var(--font-koppen); font-weight: 700; font-size: 1.5rem; }
.site-branding__tagline { font-family: var(--font-body); font-size: 0.78rem; color: var(--kleur-inkt-zacht); font-weight: 700; letter-spacing: 0.01em; }
.site-branding--footer .site-branding__naam { color: var(--kleur-wit); }
.site-branding--footer .site-branding__icoon { color: var(--kleur-geel); }

.menu-toggle {
	display: inline-flex;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: var(--kleur-inkt);
	/* Het menupaneel bedekt deze plek; zonder eigen stapelpositie ligt de knop
	   eronder. Sluiten gebeurt met .menu-sluiten in het paneel zelf. */
	position: relative;
	z-index: 600;
}
.menu-toggle .icon { width: 1.8rem; height: 1.8rem; }
.menu-toggle__icoon-sluit { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icoon-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icoon-sluit { display: inline-flex; }

/* Verduisterende laag achter het menu. Zie header.php voor het waarom. */
.menu-schaduw {
	position: fixed;
	inset: 0;
	background: rgba(36, 28, 44, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--overgang), visibility var(--overgang);
	z-index: 1;
	cursor: pointer;
}
body.menu-geopend .menu-schaduw { opacity: 1; visibility: visible; }

.hoofdnavigatie {
	position: fixed;
	inset: 0 0 0 30%;
	z-index: 2;
	background: var(--kleur-wit);
	border-left: var(--lijn) solid var(--kleur-inkt);
	transform: translateX(100%);
	transition: transform var(--overgang), visibility var(--overgang);
	overflow-y: auto;
	/* Ben je onderin het menu en blijf je vegen, dan pakt de pagina eronder de
	   beweging over. `contain` houdt die beweging binnen dit paneel. Dit is de
	   nette vervanger van het vergrendelen van de html-laag, die de meeplakkende
	   header sloopte. */
	overscroll-behavior: contain;
	/* De onderrand wijkt uit voor de streep onderaan een iPhone zonder thuisknop. */
	padding: 100px 28px calc(40px + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.hoofdnavigatie.is-open { transform: translateX(0); }

/* Alleen wegschuiven met transform houdt de links in de tab-volgorde: dan loop
   je met het toetsenbord door zes onzichtbare menu-items. visibility haalt ze
   er echt uit en de schuifanimatie blijft werken. Achter .js-menu, want zonder
   JavaScript gaat het paneel nooit open en moeten ze bereikbaar blijven. */
.js-menu .hoofdnavigatie { visibility: hidden; }
.js-menu .hoofdnavigatie.is-open { visibility: visible; }

/* Alleen op de body, niet op html: een html-laag die niet meer scrolt sloopt
   de sticky header, die dan terugvalt naar de bovenkant van het document.
   En binnen de breakpoint, anders blijft de vergrendeling hangen als je de
   telefoon draait met het menu open. */
@media (max-width: 860px) {
	body.menu-geopend { overflow: hidden; }
}

/*
 * Sluitknop ín het menupaneel. Het paneel staat vast op het scherm, dus deze
 * knop is altijd bereikbaar, ongeacht hoe ver de bezoeker had gescrold.
 */
.menu-sluiten {
	position: absolute;
	top: 16px;
	right: 18px;
	display: none;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: var(--kleur-inkt);
	z-index: 2;
}
.hoofdnavigatie.is-open .menu-sluiten { display: inline-flex; }
.menu-sluiten .icon { width: 1.8rem; height: 1.8rem; }
/* Zolang het menu openstaat neemt de knop in het paneel het over van de
   hamburgerknop; anders staan er twee kruisjes over elkaar heen op dezelfde
   plek. `visibility` en niet `opacity`, zodat de verborgen knop ook echt uit
   de toetsenbordvolgorde en uit schermlezers verdwijnt. */
body.menu-geopend .menu-toggle { visibility: hidden; }

.hoofdmenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hoofdmenu li { position: relative; }
.hoofdmenu > li > a {
	display: block;
	padding: 12px 4px;
	font-family: var(--font-koppen);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--kleur-inkt);
	text-decoration: none;
	border-bottom: 1px solid var(--kleur-rand);
}
.hoofdmenu .sub-menu {
	list-style: none;
	margin: 0 0 8px;
	padding: 0 0 0 16px;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--overgang);
}
.hoofdmenu .menu-item-has-children.submenu-open .sub-menu { max-height: 240px; }
.hoofdmenu .sub-menu a {
	display: block;
	padding: 10px 4px;
	color: var(--kleur-inkt-zacht);
	text-decoration: none;
	font-weight: 600;
	font-family: var(--font-body);
}
.hoofdmenu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 8px;
	transition: transform var(--overgang);
}
.hoofdmenu .menu-item-has-children.submenu-open > a::after { transform: rotate(-135deg); }

.hoofdnavigatie > .knop--nav {
	display: inline-flex;
	justify-content: center;
	margin-top: 8px;
}

/* Desktop-navigatie vanaf 860px */
@media (min-width: 861px) {
	.menu-toggle { display: none; }
	/* Op een breed scherm staat het menu gewoon uitgevouwen in de balk; daar valt
	   niets te sluiten. Expliciet uitzetten, zodat een losse .is-open die om wat
	   voor reden dan ook blijft hangen hier geen zwevend kruisje oplevert. */
	.menu-sluiten,
	.hoofdnavigatie.is-open .menu-sluiten,
	.menu-schaduw { display: none; }
	/* Op een breed scherm staat het menu altijd gewoon in de balk, dus de
	   verberging voor het dichtgeschoven paneel moet hier weer van tafel. */
	.js-menu .hoofdnavigatie { visibility: visible; }
	.hoofdnavigatie {
		position: static;
		inset: auto;
		transform: none;
		background: none;
		border-left: none;
		overflow: visible;
		padding: 0;
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}
	.hoofdmenu {
		flex-direction: row;
		align-items: center;
		gap: 2px;
		font-family: var(--font-body);
	}
	.hoofdmenu > li > a {
		font-family: var(--font-body);
		border-bottom: none;
		padding: 9px 14px;
		font-size: 0.97rem;
		border-radius: var(--radius-pil);
		transition: background var(--overgang), color var(--overgang);
	}
	.hoofdmenu > li > a:hover,
	.hoofdmenu > li.current-menu-item > a,
	.hoofdmenu > li.current-menu-ancestor > a {
		background: var(--kleur-inkt);
		color: var(--kleur-wit);
	}
	.hoofdmenu .menu-item-has-children > a::after { display: none; }
	/* Loopbrug naar het uitklapmenu.
	 *
	 * Hier stond `padding-bottom: 8px` op de items met subpagina's. Bedoeling
	 * was dat je muis onderweg naar het uitklapmenu binnen het item blijft en
	 * de hover niet wegvalt. Het neveneffect: alleen die twee items werden 8
	 * pixels hoger, en omdat de balk verticaal centreert kwamen "Ballonnen" en
	 * "Schmink & Glitter" 4 pixels boven de rest te staan. Zichtbaar scheef.
	 *
	 * Nu ligt de brug in een apart laagje dat buiten de opmaak valt, dus de
	 * hoogte van het item verandert niet. Hij vangt alleen muisbewegingen op
	 * terwijl je er daadwerkelijk overheen zweeft; anders zou er een onzichtbaar
	 * strookje onder de balk hangen dat kliks opslokt.
	 */
	.hoofdmenu .menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 10px;
		pointer-events: none;
	}
	.hoofdmenu .menu-item-has-children:hover::after,
	.hoofdmenu .menu-item-has-children:focus-within::after { pointer-events: auto; }
	.hoofdmenu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		max-height: none;
		overflow: visible;
		background: var(--kleur-wit);
		border: var(--lijn) solid var(--kleur-inkt);
		border-radius: var(--radius-klein);
		box-shadow: var(--schaduw);
		padding: 8px;
		min-width: 240px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity var(--overgang), transform var(--overgang), visibility var(--overgang);
	}
	.hoofdmenu .menu-item-has-children:hover .sub-menu,
	.hoofdmenu .menu-item-has-children:focus-within .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.hoofdmenu .sub-menu a {
		border-radius: var(--radius-klein);
		padding: 10px 12px;
		font-family: var(--font-body);
	}
	.hoofdmenu .sub-menu a:hover { background: var(--kleur-achtergrond-alt); }
	.knop--nav { display: inline-flex; }
	.hoofdnavigatie > .knop--nav { margin-top: 0; }
}

/* -------------------------------------------------------------------- hero */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 64px) clamp(70px, 9vw, 104px);
}

/* Sfeer-laag: driftende gloed-vlekken + zwevende ballon-/ster-iconen die met
   de cursor meebewegen (parallax, zie initHeroParallax in main.js). Puur
   decoratief en nooit klikbaar: daarom altijd pointer-events: none. */
.hero__sfeer { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	animation: hero-drift 16s ease-in-out infinite alternate;
	/* Grote vervaagde vlakken die bewegen zijn zwaar werk voor de videokaart.
	   Door ze een eigen laag te geven hoeft de vervaging niet elk beeldje
	   opnieuw berekend te worden, wat schokkerig beeld voorkomt. */
	will-change: transform;
}
.hero__glow--1 { width: 420px; height: 420px; background: var(--kleur-primair-zacht); top: -140px; left: -80px; }
.hero__glow--2 { width: 360px; height: 360px; background: var(--kleur-geel-zacht); top: 40%; right: -120px; animation-duration: 20s; animation-delay: -4s; }
.hero__glow--3 { width: 300px; height: 300px; background: var(--kleur-paars-zacht); bottom: -140px; left: 30%; animation-duration: 24s; animation-delay: -9s; }
@keyframes hero-drift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(40px, 30px) scale(1.12); }
}
.hero__ballon-zweven {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	color: var(--kleur-primair);
	filter: drop-shadow(3px 4px 0 rgba(36, 28, 44, 0.12));
	will-change: transform;
	/* Klikbaar als klein geheimpje: prik een ballon door en hij knalt met
	   confetti uiteen (zie initBallonPop in main.js). */
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 700ms ease, transform 700ms ease;
}
.hero__ballon-zweven.is-geknald {
	opacity: 0;
	transform: scale(1.7) !important;
	pointer-events: none;
	transition-duration: 130ms;
}
.hero__ballon-zweven .icon { width: 100%; height: 100%; }
.hero__ballon-zweven__bob { display: block; animation: hero-bob 5s ease-in-out infinite; }
.hero__ballon-zweven--1 { top: 10%; left: 5%; width: 50px; height: 50px; }
.hero__ballon-zweven--2 { top: 64%; left: 3%; width: 32px; height: 32px; color: var(--kleur-geel); }
.hero__ballon-zweven--2 .hero__ballon-zweven__bob { animation-duration: 6.5s; animation-delay: -2s; }
.hero__ballon-zweven--3 { top: 6%; right: 7%; width: 30px; height: 30px; color: var(--kleur-paars); }
.hero__ballon-zweven--3 .hero__ballon-zweven__bob { animation-duration: 4.5s; animation-delay: -1s; }
.hero__ballon-zweven--4 { top: 68%; right: 12%; width: 24px; height: 24px; color: var(--kleur-geel); }
.hero__ballon-zweven--4 .hero__ballon-zweven__bob { animation-duration: 5.5s; animation-delay: -3s; }
@keyframes hero-bob {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-16px) rotate(3deg); }
}
@media (max-width: 700px) {
	.hero__ballon-zweven--2, .hero__ballon-zweven--4 { display: none; }
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	color: var(--kleur-inkt);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 7px 16px;
	border-radius: var(--radius-pil);
	box-shadow: 3px 3px 0 var(--kleur-inkt);
	margin-bottom: 22px;
}
.hero__badge .icon { color: var(--kleur-primair); }

/* Kop-highlight: cursieve schreef + een robuuste, native golvende
   onderstreping in plaats van een met de hand gemeten SVG-pad. */
.hero__gemarkeerd {
	font-style: italic;
	color: var(--kleur-primair-dark);
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--kleur-geel);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.hero__intro { font-size: 1.18rem; color: var(--kleur-inkt-zacht); max-width: 54ch; }
.hero__acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.knop--magnetisch { transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--overgang), background var(--overgang), color var(--overgang); }

.hero__beeld { position: relative; }

/* Fotostapel: twee foto's licht verdraaid over elkaar: de voorste foto
   richt zichzelf recht bij hover, alsof je een neergelegd stapeltje
   polaroids aanraakt. */
.hero__stapel { position: relative; }
.hero__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--lijn) solid var(--kleur-inkt); border-radius: var(--radius); }
.hero__foto--voor {
	position: relative;
	z-index: 1;
	box-shadow: var(--schaduw-groot);
	transform: rotate(-1.5deg);
	transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero__foto--achter {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: rotate(4deg) translate(14px, 10px);
	box-shadow: var(--schaduw-klein);
	opacity: 0.9;
}
.hero__stapel:hover .hero__foto--voor { transform: rotate(0.5deg) scale(1.015); }
.hero__illustratie {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--kleur-primair-zacht);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	overflow: hidden;
}
.hero__illustratie.hero__foto--voor { box-shadow: var(--schaduw-groot); }
.hero__ballon-illustratie { position: absolute; opacity: 0.85; }
.hero__ballon-illustratie--1 { width: 30%; height: 30%; top: 15%; left: 15%; color: var(--kleur-primair); }
.hero__ballon-illustratie--2 { width: 22%; height: 22%; top: 45%; left: 55%; color: var(--kleur-geel); }
.hero__ballon-illustratie--3 { width: 18%; height: 18%; top: 15%; left: 65%; color: var(--kleur-paars); }

/* Zwevende statistiekkaartjes op de fotostapel: eerlijke, live cijfers uit
   WordPress zelf (zie hero.php), geen verzonnen getallen. */
.hero__statkaart {
	position: absolute;
	left: -16px;
	bottom: -22px;
	z-index: 2;
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	padding: 14px 20px;
	text-align: center;
	line-height: 1;
	transition: transform var(--overgang), box-shadow var(--overgang);
}
.hero__statkaart:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 7px 7px 0 var(--kleur-inkt); }
.hero__statkaart--tweede { left: auto; right: -12px; bottom: auto; top: 20px; background: var(--kleur-inkt); }
.hero__statkaart--tweede .hero__stattekst { color: rgba(255,255,255,0.7); }
.hero__statgetal { font-family: var(--font-koppen); font-weight: 700; font-size: 1.9rem; color: var(--kleur-primair-dark); }
.hero__statkaart--tweede .hero__statgetal { color: var(--kleur-wit); }
.hero__statplus { font-family: var(--font-koppen); font-weight: 700; font-size: 1.9rem; color: var(--kleur-geel); }
.hero__stattekst { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kleur-inkt-zacht); margin-top: 2px; max-width: 12ch; margin-inline: auto; }

/* Scroll-aanwijzing onderaan de hero: alleen op ruime desktopschermen. */
.hero__scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 2;
	display: none;
	width: 26px;
	height: 42px;
	border: 2px solid var(--kleur-inkt-zacht);
	border-radius: 999px;
	opacity: 0.5;
	transition: opacity var(--overgang), border-color var(--overgang);
}
.hero__scroll-cue:hover { opacity: 1; border-color: var(--kleur-inkt); }
.hero__scroll-cue__wiel {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 999px;
	background: var(--kleur-inkt-zacht);
	animation: scroll-cue-wiel 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-wiel {
	0% { opacity: 1; transform: translateY(0); }
	70% { opacity: 0; transform: translateY(14px); }
	100% { opacity: 0; transform: translateY(14px); }
}

@media (max-width: 559px) {
	/* Compactere statistiekkaartjes op telefoons, zodat ze de hero-foto niet
	   overheersen. */
	.hero__statkaart { padding: 10px 14px; }
	.hero__statgetal, .hero__statplus { font-size: 1.45rem; }
	.hero__intro { font-size: 1.08rem; }
}
@media (min-width: 900px) {
	.hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 60px; }
	.hero__beeld { margin-inline: 10px; }
}
@media (min-width: 900px) and (min-height: 760px) {
	.hero__scroll-cue { display: block; }
}

/* ----------------------------------------------------------------- marquee */
/* Doorlopende diensten-ticker: een licht gedraaide gele strook die de naad
   tussen hero en diensten doorbreekt. Pauzeert bij hover; de globale
   reduced-motion-regel zet de animatie stil voor wie dat wil. */
.marquee {
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: var(--kleur-geel);
	border-block: var(--lijn) solid var(--kleur-inkt);
	transform: rotate(-1.1deg);
	width: 104%;
	margin-left: -2%;
	margin-block: -16px -14px;
}
.marquee__baan {
	display: flex;
	width: max-content;
	padding: 12px 0;
	animation: marquee-schuif 28s linear infinite;
}
.marquee:hover .marquee__baan { animation-play-state: paused; }
.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 38px;
	font-weight: 800;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kleur-inkt);
	white-space: nowrap;
}
.marquee__ster { color: var(--kleur-primair); }
@keyframes marquee-schuif {
	to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- diensten */
.diensten { background: var(--kleur-achtergrond-alt); position: relative; overflow: hidden; }
.diensten::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -140px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--kleur-primair-zacht);
	filter: blur(90px);
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}
.diensten .container { position: relative; z-index: 1; }
.diensten__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin-top: 12px;
}
.dienst-kaart {
	position: relative;
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	padding: 30px 26px 28px;
	text-decoration: none !important;
	color: var(--kleur-inkt) !important;
	box-shadow: var(--schaduw);
	transition: transform var(--overgang), box-shadow var(--overgang);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dienst-kaart:hover { transform: scale(1.02); box-shadow: 8px 8px 0 var(--kleur-inkt); }
.dienst-kaart__nummer {
	font-family: var(--font-koppen);
	font-weight: 700;
	font-size: 1rem;
	color: var(--kleur-rand);
	position: absolute;
	top: 20px;
	right: 22px;
}
/* Deze sectie houdt bewust één kleur aan.
   De dienstkleuren zijn hier geprobeerd, eerst als gevulde kaartvlakken en
   daarna alleen in het icoon en de link. Beide keren viel het uit elkaar: vier
   kaarten naast elkaar in vier kleuren leest als een verzameling losse dingen
   in plaats van één keuzemenu. De dienstkleur mag pas verschijnen op de pagina
   waar je terechtkomt, want daar staat hij alleen. */
.dienst-kaart__icoon {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pil);
	border: var(--lijn) solid var(--kleur-inkt);
	background: var(--kleur-achtergrond);
	color: var(--kleur-primair-dark);
	margin-bottom: 10px;
}
.dienst-kaart h3 { margin-bottom: 0.2em; padding-right: 30px; }
.dienst-kaart p { color: var(--kleur-inkt-zacht); margin-bottom: 0.4em; flex-grow: 1; font-size: 0.96rem; }
.dienst-kaart__link { font-weight: 700; color: var(--kleur-primair-dark); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); }
.dienst-kaart__link .icon { width: 1em; height: 1em; transition: transform var(--overgang); }
.dienst-kaart:hover .dienst-kaart__link .icon { transform: translateX(4px); }

/* Eén kaart krijgt een eigen kleurvlak: breekt bewust met de "4 identieke
   kaarten"-symmetrie en zet de kerndienst neer als uithangbord. */
/* De uitgelichte kaart blijft koraalrood, ook al hoort er een andere dienst bij.
   Deze kaart is de blikvanger van de sectie: dat werkt alleen met de merkkleur,
   en niet als hij per dienst een andere kant op kleurt. */
.dienst-kaart--uitgelicht {
	background: var(--kleur-primair-diep);
	color: var(--kleur-wit) !important;
	overflow: hidden;
}
.dienst-kaart--uitgelicht::after {
	content: "";
	position: absolute;
	right: -34px;
	bottom: -34px;
	width: 150px;
	height: 150px;
	background: var(--kleur-primair-dark);
	border-radius: 50%;
	opacity: 0.55;
	pointer-events: none;
	z-index: -1;
}
.dienst-kaart--uitgelicht .dienst-kaart__nummer { color: rgba(255,255,255,0.55); }
.dienst-kaart--uitgelicht .dienst-kaart__icoon { background: var(--kleur-wit); border-color: var(--kleur-wit); color: var(--kleur-primair-dark); }
.dienst-kaart--uitgelicht p { color: rgba(255,255,255,0.88); }
.dienst-kaart--uitgelicht .dienst-kaart__link { color: var(--kleur-wit); }
.dienst-kaart--uitgelicht:hover { box-shadow: 8px 8px 0 var(--kleur-inkt); }

@media (min-width: 640px) { .diensten__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .diensten__grid { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------- portfolio */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.portfolio-kaart {
	position: relative;
	display: block;
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius-klein);
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: var(--schaduw-klein);
	background: var(--kleur-wit);
	transition: transform var(--overgang), box-shadow var(--overgang);
}
.portfolio-kaart:hover { transform: scale(1.02); box-shadow: 7px 7px 0 var(--kleur-inkt); }
.portfolio-kaart__beeld { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--kleur-achtergrond-alt); position: relative; }
.portfolio-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.portfolio-kaart:hover .portfolio-kaart__beeld img { transform: scale(1.06); }
.portfolio-kaart__zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(36, 28, 44, 0.25);
	opacity: 0;
	transition: opacity var(--overgang);
}
.portfolio-kaart__zoom .icon {
	width: 2.1rem;
	height: 2.1rem;
	color: var(--kleur-wit);
	background: rgba(36, 28, 44, 0.55);
	border-radius: 50%;
	padding: 10px;
	box-sizing: content-box;
	transform: scale(0.8);
	transition: transform var(--overgang);
}
.portfolio-kaart:hover .portfolio-kaart__zoom { opacity: 1; }
.portfolio-kaart:hover .portfolio-kaart__zoom .icon { transform: scale(1); }
.portfolio-kaart__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--kleur-rand); }
.portfolio-kaart__placeholder .icon { width: 3rem; height: 3rem; }
.portfolio-kaart__info {
	position: absolute;
	inset: auto 0 0 0;
	padding: 30px 14px 12px;
	background: linear-gradient(0deg, rgba(36,28,44,0.88), rgba(36,28,44,0));
	color: var(--kleur-wit) !important;
}
.portfolio-kaart__label {
	display: block;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
	color: var(--kleur-geel);
	margin-bottom: 2px;
}
.portfolio-kaart__titel { font-family: var(--font-koppen); font-weight: 700; font-size: 1rem; }

.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}
.filter-knop {
	padding: 8px 18px;
	border-radius: var(--radius-pil);
	border: var(--lijn) solid var(--kleur-inkt);
	background: var(--kleur-wit);
	color: var(--kleur-inkt) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: 3px 3px 0 var(--kleur-inkt);
	transition: transform var(--overgang), box-shadow var(--overgang), background var(--overgang), color var(--overgang);
}
.filter-knop:hover { background: var(--kleur-geel-zacht); transform: scale(1.05); box-shadow: 5px 5px 0 var(--kleur-inkt); }
.filter-knop:active { transform: scale(0.98); box-shadow: 2px 2px 0 var(--kleur-inkt); }
.filter-knop.is-actief { background: var(--kleur-primair-diep); border-color: var(--kleur-inkt); color: var(--kleur-wit) !important; }
.filter-knop__aantal {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	background: var(--kleur-geel);
	color: var(--kleur-inkt);
	border-radius: var(--radius-pil);
	padding: 1px 8px;
	margin-left: 4px;
	vertical-align: 1px;
}
.filter-knop.is-actief .filter-knop__aantal { background: var(--kleur-wit); }

.portfolio-leeg {
	text-align: center;
	padding: 60px 20px;
	color: var(--kleur-inkt-zacht);
}
.portfolio-leeg .icon { color: var(--kleur-rand); margin-bottom: 12px; }

.paginering { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block: 44px 76px; }
.paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--radius-pil);
	text-decoration: none !important;
	color: var(--kleur-inkt) !important;
	font-weight: 700;
	border: 2px solid var(--kleur-rand);
}
.paginering .page-numbers.current { background: var(--kleur-primair-diep); border-color: var(--kleur-inkt); color: var(--kleur-wit) !important; }
.paginering .page-numbers:hover:not(.current) { border-color: var(--kleur-inkt); }

.portfolio-detail__label { color: var(--kleur-primair-dark); font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; font-family: var(--font-body); }
/* De hoofdfoto bepaalt zelf zijn maat: nooit uitgerekt of afgesneden, nooit
   hoger dan het scherm: de lijst krimpt netjes om de foto heen. */
.portfolio-detail__hoofdfoto {
	width: fit-content;
	max-width: 100%;
	margin: 30px auto;
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schaduw-groot);
	cursor: zoom-in;
}
.portfolio-detail__hoofdfoto img { display: block; width: auto; max-width: 100%; max-height: 70vh; }
.portfolio-detail__tekst { max-width: 70ch; }
.portfolio-detail__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 40px 0; }

.foto-rooster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 30px 0;
}
.foto-rooster img { width: 100%; height: 100%; object-fit: cover; border: var(--lijn) solid var(--kleur-inkt); border-radius: var(--radius-klein); aspect-ratio: 1/1; }
.foto-rooster--groot a { display: block; cursor: zoom-in; border-radius: var(--radius-klein); overflow: hidden; }
@media (min-width: 640px) { .foto-rooster { grid-template-columns: repeat(4, 1fr); } }

.portfolio-gerelateerd { padding-block: 10px 60px; }
.sectie-titel--klein { font-size: clamp(1.3rem, 1.6vw + 1rem, 1.8rem); margin-bottom: 20px; }

/* Boeketkaarten (ballonboeketten-pagina): foto, naam en prijs onlosmakelijk
   bij elkaar: geen raadwerk meer welke foto welk boeket is. */
.boeket-rooster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 1.4em 0 2em;
}
@media (min-width: 820px) { .boeket-rooster { grid-template-columns: repeat(3, 1fr); } }
.boeket-kaart {
	margin: 0;
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw-klein);
	overflow: hidden;
	transition: transform var(--overgang), box-shadow var(--overgang);
}
.boeket-kaart:hover { transform: scale(1.02); box-shadow: 7px 7px 0 var(--kleur-inkt); }
.boeket-kaart img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-bottom: var(--lijn) solid var(--kleur-inkt);
}
.boeket-kaart figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
}
.boeket-kaart strong { font-family: var(--font-koppen); font-size: 1.02rem; line-height: 1.2; }
.boeket-kaart figcaption span { color: var(--kleur-primair-dark); font-weight: 700; white-space: nowrap; font-size: 0.92rem; }

/* Op de homepage krijgt de nieuwste portfolio-foto een groot podium (2×2): doorbreekt het uniforme rooster en geeft het beste werk de hoofdrol. */
.portfolio-grid--voorpagina .portfolio-kaart:first-child { grid-column: span 2; grid-row: span 2; }
.portfolio-grid--voorpagina .portfolio-kaart:first-child .portfolio-kaart__titel,
.portfolio-grid--archief .portfolio-kaart:nth-child(7n + 1):nth-last-child(n + 5) .portfolio-kaart__titel { font-size: 1.35rem; }
.portfolio-grid--voorpagina .portfolio-kaart:first-child .portfolio-kaart__info,
.portfolio-grid--archief .portfolio-kaart:nth-child(7n + 1):nth-last-child(n + 5) .portfolio-kaart__info { padding: 44px 18px 16px; }

/* Mozaïek: elk zevende werk krijgt een 2×2-podium, "dense" vult de gaten.
   De :nth-last-child(n+5)-guard voorkomt dat één item schermvullend wordt in
   een klein of gefilterd rooster. */
.portfolio-grid--archief { grid-auto-flow: dense; }
@media (min-width: 640px) {
	.portfolio-grid--archief .portfolio-kaart:nth-child(7n + 1):nth-last-child(n + 5) { grid-column: span 2; grid-row: span 2; }
}

/* --------------------------------------------------------------- reviews */
.reviews { background: var(--kleur-achtergrond-alt); }
.reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin-top: 24px;
}
@media (min-width: 760px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.review-kaart {
	position: relative;
	margin: 0;
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	padding: 26px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Licht wisselende rotatie: als opgeprikte kaartjes, geen strakke rij. */
.review-kaart:nth-child(2) { transform: rotate(-0.8deg); }
.review-kaart:nth-child(3) { transform: rotate(0.6deg); }
.review-kaart__quote {
	position: absolute;
	top: -14px;
	left: 20px;
	display: inline-flex;
	background: var(--kleur-geel);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: 50%;
	padding: 6px;
	color: var(--kleur-inkt);
}
.review-kaart__quote .icon { width: 1.1rem; height: 1.1rem; }
.review-kaart blockquote { margin: 6px 0 0; font-size: 1.02rem; line-height: 1.6; }
.review-kaart blockquote p { margin: 0 0 0.6em; }
.review-kaart blockquote p:last-child { margin-bottom: 0; }
.review-kaart figcaption { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; }
.review-kaart figcaption strong { font-family: var(--font-koppen); font-size: 1.02rem; }
.review-kaart figcaption span { font-size: 0.84rem; color: var(--kleur-inkt-zacht); }

/* ------------------------------------------------------------------- faq */
.faq { background: var(--kleur-achtergrond-alt); }
.faq__lijst { margin-top: 24px; max-width: 78ch; }
.faq__item {
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius-klein);
	box-shadow: var(--schaduw-klein);
	margin-bottom: 14px;
	overflow: hidden;
}
.faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 20px;
	font-family: var(--font-koppen);
	font-weight: 700;
	font-size: 1.05rem;
	position: relative;
	user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Plusje dat bij openen een minnetje wordt: puur CSS. */
.faq__item summary::after,
.faq__item summary::before {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--kleur-primair);
	transform: translateY(-50%);
	transition: transform var(--overgang), opacity var(--overgang);
}
.faq__item summary::before { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__item summary:hover { background: var(--kleur-geel-zacht); }
.faq__item[open] summary { background: var(--kleur-geel-zacht); }
.faq__antwoord { padding: 2px 20px 18px; }
.faq__antwoord p { margin: 0; color: var(--kleur-inkt-zacht); }

/* ------------------------------------------------------------- werkwijze */
.werkwijze { position: relative; overflow: hidden; }
.werkwijze__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	margin-top: 28px;
}
.werkwijze__stap { position: relative; max-width: 42ch; }
.werkwijze__nummer {
	display: inline-block;
	font-family: var(--font-koppen);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
	background: var(--kleur-geel);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius-klein);
	padding: 9px 13px;
	box-shadow: 3px 3px 0 var(--kleur-inkt);
	margin-bottom: 16px;
	transform: rotate(-3deg);
}
.werkwijze__stap:nth-child(2) .werkwijze__nummer { transform: rotate(2deg); background: var(--kleur-primair); color: var(--kleur-wit); }
.werkwijze__stap:nth-child(3) .werkwijze__nummer { transform: rotate(-1.5deg); background: var(--kleur-paars); color: var(--kleur-wit); }
.werkwijze__stap h3 { margin-bottom: 0.25em; }
.werkwijze__stap p { color: var(--kleur-inkt-zacht); margin: 0; }
.werkwijze__cta { margin: 34px 0 0; font-weight: 700; }
.werkwijze__cta a { display: inline-flex; align-items: center; gap: 8px; color: var(--kleur-primair-dark); }
.werkwijze__cta .icon { transition: transform var(--overgang); }
.werkwijze__cta a:hover .icon { transform: translateX(4px); }

@media (min-width: 820px) {
	.werkwijze__grid { grid-template-columns: repeat(3, 1fr); gap: 44px; }
	/* Verspringende middenkolom + gestippelde verbindingslijnen: bewust
	   onregelmatig, geen drie identieke kaartjes naast elkaar. */
	.werkwijze__stap:nth-child(2) { margin-top: 30px; }
	.werkwijze__stap:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 22px;
		left: calc(100% + 2px);
		width: 40px;
		border-top: 3px dashed var(--kleur-rand);
	}
}

/* ---------------------------------------------------------------- lichtbak */
.lichtbak {
	position: fixed;
	inset: 0;
	background: rgba(20, 15, 25, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--overgang), visibility var(--overgang);
	padding: 20px;
}
.lichtbak.is-open { opacity: 1; visibility: visible; }
body.lichtbak-open { overflow: hidden; }
.lichtbak__afbeelding { max-width: min(90vw, 1100px); max-height: 86vh; border: var(--lijn) solid var(--kleur-wit); border-radius: var(--radius-klein); }
.lichtbak__sluiten,
.lichtbak__vorige,
.lichtbak__volgende {
	position: absolute;
	background: rgba(255,255,255,0.12);
	color: var(--kleur-wit);
	border: none;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--overgang);
}
.lichtbak__sluiten:hover, .lichtbak__vorige:hover, .lichtbak__volgende:hover { background: rgba(255,255,255,0.25); }
.lichtbak__sluiten { top: 20px; right: 20px; }
.lichtbak__vorige { left: 20px; top: 50%; transform: translateY(-50%); }
.lichtbak__volgende { right: 20px; top: 50%; transform: translateY(-50%); }
.lichtbak__teller {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--kleur-wit);
	opacity: 0.8;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}

/* -------------------------------------------------------------- over-mij (snippet) */
.over-snippet__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}
.over-snippet__beeld { position: relative; }
.over-snippet__beeld img,
.over-snippet__placeholder {
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
	transform: rotate(-1.2deg);
	transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.over-snippet__beeld:hover img { transform: rotate(0.3deg) scale(1.01); }
.over-snippet__placeholder { display: flex; align-items: center; justify-content: center; background: var(--kleur-achtergrond-alt); color: var(--kleur-rand); }
.over-snippet__sticker {
	position: absolute;
	bottom: -14px;
	left: 18px;
	transform: rotate(-2.5deg);
}
.over-snippet__groet {
	font-family: var(--font-koppen);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--kleur-inkt);
	margin: 0.4em 0 1.2em;
}
.over-snippet__naam { color: var(--kleur-primair-dark); }
@media (min-width: 820px) { .over-snippet__grid { grid-template-columns: 0.8fr 1.2fr; } }

/* -------------------------------------------------------------------- cta */
.cta-band {
	background: var(--kleur-inkt);
	color: var(--kleur-wit);
	text-align: center;
	position: relative;
	overflow: hidden;
	/* Herhalend stippenpatroon ipv een zachte kleurovergang: confetti-gevoel
	   zonder de klassieke "AI-gradient-blob". */
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 2.5px, transparent 2.5px);
	background-size: 26px 26px;
}
/* Golvende bovenrand, in de kleur van de sectie erboven.
 *
 * Hier stonden eerst herhaalde halve cirkels, met erbij geschreven dat een
 * straal groter dan de halve tegel de spitse punten ertussen zou voorkomen.
 * Dat klopt niet, en het is narekenbaar. Elke tegel wordt namelijk op zijn
 * eigen breedte afgeknipt, dus dat "overlappen" gebeurt nooit. De diepte van de
 * golf is daardoor exact hetzelfde getal als de hoogte van de punt ertussen:
 * bij straal 23 op een tegel van 44 waren beide 5,3 pixel, oftewel bijna de
 * helft van de strook. Een grotere straal maakte de punt kleiner maar vlakte de
 * golf even hard af. Met die techniek bestaat er dus geen instelling met wel
 * een golf en geen punten.
 *
 * Vandaar nu een echte golf: twee bézierbogen die aan de tegelrand vloeiend in
 * elkaar overlopen, zodat er geen knik en dus geen punt kan ontstaan. De vorm
 * zit in een masker en de kleur komt gewoon uit de variabele, zodat een
 * kleurwijziging niet in een plaatje hoeft te worden nagetypt. Browsers zonder
 * maskers tonen een rechte rand, wat er ook prima uitziet.
 */
.cta-band::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 16px;
	background: var(--kleur-achtergrond);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'%3E%3Cpath d='M0,8 C13.33,2.67 26.67,2.67 40,8 C53.33,13.33 66.67,13.33 80,8 L80,0 L0,0 Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'%3E%3Cpath d='M0,8 C13.33,2.67 26.67,2.67 40,8 C53.33,13.33 66.67,13.33 80,8 L80,0 L0,0 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: 80px 16px;
	mask-size: 80px 16px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	pointer-events: none;
	z-index: 1;
}
.cta-band h2 { color: var(--kleur-wit); }
.cta-band p { color: rgba(255,255,255,0.85); font-size: 1.1rem; }
.cta-band__binnen { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cta-band .knop--wit { box-shadow: 5px 5px 0 var(--kleur-primair); }
.cta-band .knop--wit:hover { box-shadow: 7px 7px 0 var(--kleur-primair); }

/* ------------------------------------------------------------------ footer */
.site-footer {
	position: relative;
	background: var(--kleur-inkt);
	color: rgba(255,255,255,0.75);
	padding-top: 80px;
	border-top: var(--lijn) solid var(--kleur-inkt);
	overflow: hidden;
}
.site-footer__gloed {
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
	width: 620px;
	height: 380px;
	background: var(--kleur-primair);
	filter: blur(120px);
	opacity: 0.25;
	pointer-events: none;
	z-index: 0;
}
.site-footer__merk {
	position: absolute;
	left: 50%;
	bottom: -0.14em;
	transform: translateX(-50%);
	font-family: var(--font-koppen);
	font-weight: 700;
	font-size: clamp(4rem, 16vw, 11rem);
	color: rgba(255,255,255,0.045);
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
	line-height: 1;
}
.footer__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 56px;
}
.footer__kolom p { color: rgba(255,255,255,0.65); }
.footer__voorheen { font-size: 0.85rem; font-style: italic; }
.footer__titel { font-family: var(--font-koppen); color: var(--kleur-wit); font-size: 1.15rem; margin-bottom: 0.8em; }
.footermenu, .footer__contactlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footermenu a, .footer__contactlijst a, .footer__contactlijst span {
	color: rgba(255,255,255,0.75);
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color var(--overgang);
}
.footermenu a:hover, .footer__contactlijst a:hover { color: var(--kleur-geel); }
.footer__contactlijst li { display: flex; align-items: center; gap: 8px; }
.footer__contactlijst .icon { color: var(--kleur-geel); flex-shrink: 0; }
.footer__kolom--cta .knop { margin-top: 18px; }

.social-iconen { display: flex; gap: 12px; margin-top: 16px; }
.social-iconen a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.3);
	background: rgba(255,255,255,0.06);
	color: var(--kleur-wit) !important;
	transition: background var(--overgang), border-color var(--overgang), transform var(--overgang);
}
.social-iconen a:hover { background: var(--kleur-primair-diep); border-color: var(--kleur-primair-diep); transform: scale(1.12); }

.footer__onder { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.15); padding-block: 20px; }
.footer__onder-binnen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.footer__onder p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.footer__naar-boven {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.6) !important;
	text-decoration: none !important;
	font-size: 0.85rem;
	font-weight: 600;
	transition: color var(--overgang);
}
.footer__naar-boven:hover { color: var(--kleur-wit) !important; }
.footer__naar-boven-pijl { transform: rotate(-90deg); }

@media (min-width: 700px) { .footer__grid { grid-template-columns: 1.3fr 0.8fr 1fr; } }

/* ------------------------------------------------------------- paginabanner */
/* De banner bovenaan elke binnenpagina draagt de kleur van de dienst. Dat is
   het duidelijkste moment waarop een bezoeker ziet in welk onderdeel hij zit. */
.pagina-banner {
	position: relative;
	overflow: hidden;
	padding-block: 56px 28px;
	background: var(--dienst-zacht);
	border-bottom: var(--lijn) solid var(--kleur-inkt);
	/* Samen met de 20px van .pagina-inhoud hieronder komt dat op een normale
	   sectie-afstand uit; de harde rand vraagt om wat lucht eronder. */
	margin-bottom: 18px;
}
.pagina-banner::before {
	content: "";
	position: absolute;
	top: -160px;
	left: -100px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: var(--dienst);
	filter: blur(90px);
	opacity: 0.18;
	pointer-events: none;
	z-index: 0;
}
.pagina-banner .container { position: relative; z-index: 1; }
/* Groot ballon-watermerk rechts in de banner: subtiel merk-accent op elke
   binnenpagina, puur CSS (inline SVG-data), verborgen op smalle schermen. */
.pagina-banner::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: -34px;
	width: 150px;
	height: 170px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10c0 3.5 2.5 6.5 6 7.6V19a2 2 0 002 2 2 2 0 002-2v-1.4c3.5-1.1 6-4.1 6-7.6 0-4.42-3.58-8-8-8z' stroke='%23ff4d6d' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.18;
	transform: rotate(10deg);
	pointer-events: none;
	z-index: 0;
}
@media (max-width: 700px) { .pagina-banner::after { display: none; } }
.pagina-banner__intro { font-size: 1.1rem; color: var(--kleur-inkt-zacht); max-width: 65ch; }
.pagina-banner--tarieven { background: var(--kleur-achtergrond-alt); padding-bottom: 40px; }
.pagina-banner--tarieven::before { background: var(--kleur-geel-zacht); }

.broodkruimels { margin-bottom: 14px; }
.broodkruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: 0.85rem; color: var(--kleur-inkt-zacht); }
.broodkruimels li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--kleur-rand); }
.broodkruimels a { color: var(--kleur-inkt-zacht); }

/* -------------------------------------------------------------- pagina-inhoud */
.pagina-inhoud { padding-block: 20px 40px; }
.entry-content { max-width: 78ch; }
/* Eerste alinea als "lead": iets groter en zachter, geeft elke pagina een
   redactionele opening in plaats van een muur van gelijke tekst. */
.entry-content > p:first-child { font-size: 1.15rem; color: var(--kleur-inkt-zacht); }
/* Tussenkoppen in pagina-inhoud.
 *
 * Deze koppen waren h3 en stonden daarmee direct onder de h1, zonder h2
 * ertussen. Onzichtbaar voor wie kijkt, maar een schermlezer kondigt kopniveaus
 * aan en laat gebruikers er doorheen springen; een ontbrekend niveau is dan een
 * gat in de route. Ze zijn nu h2.
 *
 * De opmaak is bewust meeverhuisd in plaats van de standaard h2-maat over te
 * nemen: die is anderhalf keer zo groot en zwart in plaats van rood, en dat zou
 * het beeld van acht pagina's ineens veranderen terwijl er inhoudelijk niets
 * mis mee was. Wat je ziet blijft dus gelijk, alleen de structuur eronder klopt
 * nu. Dit raakt ook de artikelkoppen van de algemene voorwaarden, die daardoor
 * rustiger ogen dan voorheen.
 */
.entry-content h2 {
	margin-top: 1.5em;
	font-size: clamp(1.15rem, 1vw + 1rem, 1.4rem);
	color: var(--kleur-primair-dark);
}
.entry-content h3 { margin-top: 1.2em; color: var(--kleur-inkt-zacht); font-size: 1.05rem; }
.entry-content ul li, .entry-content ol li { margin-bottom: 0.5em; }
.entry-content ul li::marker { color: var(--kleur-primair); }
.entry-content ol li::marker { color: var(--kleur-primair-dark); font-weight: 700; }
.entry-content a { text-decoration-color: var(--kleur-geel); text-decoration-thickness: 2px; }
.entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 5px solid var(--kleur-geel);
	font-family: var(--font-koppen);
	font-style: italic;
	font-size: 1.12rem;
	color: var(--kleur-inkt);
}
.entry-content blockquote p { margin: 0; }
/* Losse foto's in de tekst: nooit torenhoog: begrensd op hoogte, netjes
   gecentreerd in een iets smallere kolom dan de lopende tekst. */
.entry-content figure { margin: 1.8em auto; max-width: 640px; }
.entry-content figure img {
	width: auto;
	max-width: 100%;
	max-height: 65vh;
	margin-inline: auto;
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
}
.entry-content .foto-rooster { max-width: none; }

.vak-let-op {
	background: var(--kleur-geel-zacht);
	border: var(--lijn) solid var(--kleur-inkt);
	border-left-width: 6px;
	padding: 16px 20px;
	border-radius: var(--radius-klein);
	margin: 1.6em 0;
}
.vak-let-op p { margin: 0; color: #6b4c00; }

.entry-content--tarieven { max-width: none; }
/* Tarief-koppen krijgen een markeerstift-veeg: als een prijslijst op een
   feestposter, niet een kale administratieve tabel. */
.entry-content--tarieven h3 {
	display: inline-block;
	color: var(--kleur-inkt);
	background: linear-gradient(transparent 52%, var(--kleur-geel) 52%, var(--kleur-geel) 94%, transparent 94%);
	padding-inline: 4px;
}
.wp-block-table { margin: 1.4em 0 2em; overflow-x: auto; }
.wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	overflow: hidden;
}
.wp-block-table td { padding: 14px 18px; border-bottom: 1px solid var(--kleur-rand); }
.wp-block-table tr:last-child td { border-bottom: none; }
.wp-block-table tr:hover td { background: var(--kleur-geel-zacht); }
.wp-block-table .prijs-kolom, .wp-block-table td:last-child {
	text-align: right;
	font-weight: 700;
	font-family: var(--font-koppen);
	color: var(--kleur-primair-dark);
	white-space: nowrap;
}

/* Knoppen uit de blokkeneditor (in pagina-inhoud) gedragen zich exact als
   alle andere knoppen: zelfde sticker-look, zelfde duw-hover. Bewust níet
   magnetisch: dat effect blijft gereserveerd voor de hoofdacties, anders
   beweegt alles en valt niets meer op. */
.wp-block-button__link {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	text-decoration: none !important;
	background: var(--kleur-primair-diep) !important;
	color: var(--kleur-wit) !important;
	border: var(--lijn) solid var(--kleur-inkt) !important;
	border-radius: var(--radius-klein) !important;
	box-shadow: var(--schaduw-klein);
	padding: 12px 22px !important;
	transition: transform var(--overgang), box-shadow var(--overgang), background var(--overgang);
}
.wp-block-button__link:hover {
	background: var(--kleur-primair-dark) !important;
	transform: scale(1.04);
	box-shadow: 6px 6px 0 var(--kleur-inkt);
}
.wp-block-button__link:active { transform: scale(0.98); box-shadow: 2px 2px 0 var(--kleur-inkt); }

/* ------------------------------------------------------------------ contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 20px 60px; }
@media (min-width: 900px) {
	.contact-grid { grid-template-columns: 1.4fr 1fr; }
	.contact-grid__zijbalk { position: sticky; top: 96px; align-self: start; }
}

.offerte-formulier {
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: var(--schaduw-groot);
}
.formulier-rij { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .formulier-rij { grid-template-columns: 1fr 1fr; } }

/* min-width: 0 is hier geen detail maar noodzaak. Zonder die regel mag een veld
   niet kleiner worden dan zijn eigen inhoud, en juist het datumveld heeft op
   de iPhone een flinke ingebouwde minimumbreedte. Het gevolg is dat dat ene
   veld buiten de witte kaart uitsteekt terwijl de rest netjes past. */
.formulier-veld { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formulier-veld label { font-weight: 700; font-size: 0.92rem; }
.formulier-veld span[aria-hidden] { color: var(--kleur-primair-dark); }
.formulier-veld input,
.formulier-veld select,
.formulier-veld textarea {
	font-family: inherit;
	/* 1rem is bewust: bij een kleinere lettergrootte zoomt iOS automatisch in
	   zodra je een veld aantikt, en dan staat de pagina scheef. */
	font-size: 1rem;
	padding: 12px 15px;
	border: var(--lijn) solid var(--kleur-rand);
	border-radius: var(--radius-klein);
	background: var(--kleur-achtergrond);
	color: var(--kleur-inkt);
	width: 100%;
	min-width: 0;
	max-width: 100%;
	transition: border-color var(--overgang);
}

/* Datum- en tijdvelden krijgen op iOS een eigen opmaak mee die de breedte en
   hoogte overneemt. Deze regels halen die opmaak weg zodat ze net zo breed en
   hoog zijn als alle andere velden. */
.formulier-veld input[type="date"],
.formulier-veld input[type="time"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: 3.1rem;
	display: block;
}
.formulier-veld input:focus,
.formulier-veld select:focus,
.formulier-veld textarea:focus {
	border-color: var(--kleur-inkt);
	box-shadow: 3px 3px 0 var(--kleur-geel);
	outline: none;
}
.formulier-veld textarea { resize: vertical; min-height: 120px; }

.formulier-privacy { font-size: 0.85rem; color: var(--kleur-inkt-zacht); }

/* Het hidden-attribuut moet winnen van de flex-weergave van formuliervelden;
   anders blijven verborgen vervolgvragen toch zichtbaar. */
[hidden] { display: none !important; }

.formulier-label { font-weight: 700; font-size: 0.92rem; }
.formulier-hint { font-weight: 500; color: var(--kleur-inkt-zacht); }

/* ------------------------------------------------------------ kleurkiezer */
.kleurkiezer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.kleurkiezer__staal {
	width: 38px;
	height: 38px;
	padding: 0;
	cursor: pointer;
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: 50%;
	background: var(--staal, #fff);
	box-shadow: 2px 2px 0 var(--kleur-inkt);
	transition: transform var(--overgang), box-shadow var(--overgang), opacity var(--overgang);
	position: relative;
}
.kleurkiezer__staal:hover { transform: scale(1.12); box-shadow: 4px 4px 0 var(--kleur-inkt); }
/* Gekozen kleur: een duidelijk vinkje, ook herkenbaar zonder kleurwaarneming. */
.kleurkiezer__staal[aria-pressed="true"] {
	transform: scale(1.08);
	box-shadow: 4px 4px 0 var(--kleur-primair);
}
.kleurkiezer__staal[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 7px;
	height: 13px;
	margin-left: -4px;
	margin-top: -8px;
	border: solid var(--kleur-inkt);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}
.kleurkiezer__staal.is-vol { opacity: 0.35; cursor: not-allowed; }
.kleurkiezer__staal.is-vol:hover { transform: none; box-shadow: 2px 2px 0 var(--kleur-inkt); }
.kleurkiezer__gekozen {
	margin: 10px 0 0;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--kleur-primair-dark);
	min-height: 1.2em;
}

/* Honeypot: onzichtbaar voor mensen, blijft "aanwezig" voor eenvoudige bots. */
/* Inhoudsopgave boven een lang document (algemene voorwaarden).
   Twee kolommen zodra er ruimte is: elf regels onder elkaar is zelf al een
   stuk scrollen, en dan schiet het lijstje zijn doel voorbij. */
.voorwaarden-inhoud {
	list-style: none;
	margin: 0 0 34px;
	padding: 20px 24px;
	background: var(--kleur-achtergrond-alt);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw-klein);
	columns: 1;
	column-gap: 30px;
}
.voorwaarden-inhoud li { margin: 0; break-inside: avoid; }
.voorwaarden-inhoud a {
	display: block;
	padding: 5px 0;
	color: var(--kleur-inkt);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.97rem;
}
.voorwaarden-inhoud a:hover { color: var(--kleur-primair-dark); text-decoration: underline; }
@media (min-width: 700px) { .voorwaarden-inhoud { columns: 2; } }

/* De meeplakkende header dekt anders precies de kop af waar je net heen sprong. */
.entry-content h2[id],
.entry-content h3[id] { scroll-margin-top: 96px; }

.hp-veld {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	overflow: hidden;
}

.formulier-status { margin-top: 16px; font-weight: 700; min-height: 1.3em; }
.formulier-status--gelukt { color: #0d7d3a; }
.formulier-status--fout { color: var(--kleur-primair-dark); }

.formulier-melding {
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius-klein);
	padding: 20px;
	margin-bottom: 20px;
}
.formulier-melding--fout { background: var(--kleur-primair-zacht); color: #9c1a34; font-weight: 600; }
.formulier-melding--gelukt {
	background: var(--kleur-wit);
	box-shadow: var(--schaduw);
	padding: 40px;
	text-align: center;
	border-radius: var(--radius);
}
.formulier-melding--gelukt .icon { color: #0d7d3a; margin-bottom: 10px; }

.contact-kaart {
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--schaduw);
	margin-bottom: 22px;
}
.contact-kaart h2 { font-size: 1.2rem; }
.contact-kaart__lijst { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-kaart__lijst li, .contact-kaart__lijst a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--kleur-inkt) !important;
	text-decoration: none !important;
}
.contact-kaart__lijst .icon { color: var(--kleur-primair-dark); flex-shrink: 0; }
.contact-kaart--tip { background: var(--kleur-geel-zacht); }
.contact-kaart__tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-kaart__tips li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; }
.contact-kaart__tips .icon { color: #6b4c00; flex-shrink: 0; margin-top: 2px; }

/* ------------------------------------------------------------ zoekresultaten */
.zoekresultaten { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.zoekresultaat {
	background: var(--kleur-wit);
	border: var(--lijn) solid var(--kleur-inkt);
	border-radius: var(--radius);
	box-shadow: var(--schaduw-klein);
	padding: 22px 24px;
	transition: transform var(--overgang), box-shadow var(--overgang);
}
.zoekresultaat:hover { transform: scale(1.01); box-shadow: 6px 6px 0 var(--kleur-inkt); }
.zoekresultaat h2 { font-size: 1.25rem; margin-bottom: 0.3em; }
.zoekresultaat h2 a { color: var(--kleur-inkt); text-decoration: none; }
.zoekresultaat h2 a:hover { color: var(--kleur-primair-dark); }
.zoekresultaat p { color: var(--kleur-inkt-zacht); margin-bottom: 0.5em; }
.zoekresultaat__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--kleur-primair-dark); text-decoration: none; }
.zoekresultaat__link .icon { transition: transform var(--overgang); }
.zoekresultaat:hover .zoekresultaat__link .icon { transform: translateX(4px); }

/* -------------------------------------------------------------------- 404 */
.pagina-404 { text-align: center; padding-block: 60px 80px; }
.pagina-404::after { display: none; }
.pagina-404__icoon { color: var(--kleur-primair); display: inline-flex; margin-bottom: 10px; animation: hero-bob 4.5s ease-in-out infinite; }
.pagina-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0; }
.pagina-404__zoeken { display: flex; gap: 10px; max-width: 420px; margin: 20px auto 0; }
.pagina-404__zoeken input {
	flex: 1;
	padding: 12px 16px;
	border-radius: var(--radius-pil);
	border: var(--lijn) solid var(--kleur-rand);
	font-size: 1rem;
}

/* ------------------------------------------------------------- animaties */
.kan-onthullen { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.kan-onthullen.is-zichtbaar { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------- extra afwerking
   Korrel, cursor-volger, kantelende kaarten. Alles hieronder is decoratief
   (pointer-events: none) of beperkt tot een precisiemuis. */

/* Zeer subtiele, met puur CSS opgewekte korrel over de hele site: geen
   extern beeldbestand nodig. Voorkomt dat grote vlakke kleurvlakken plat
   digitaal aanvoelen. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
	opacity: 0.03;
	/* Bewust géén mix-blend-mode: een vastgezette laag die de hele pagina
	   opnieuw moet mengen bij elk scrollbeeldje geeft op sommige computers
	   zichtbaar geflikker. Op een eigen laag zetten (translateZ) houdt het
	   rustig. */
	transform: translateZ(0);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kleine cursor-volger (initCursor in main.js): alleen op apparaten met een
   precisiemuis, en altijd náást de gewone cursor, nooit in de plaats ervan. */
@media (hover: hover) and (pointer: fine) {
	.cursor-stip {
		position: fixed;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--kleur-primair);
		pointer-events: none;
		z-index: 9999;
		transition: width 160ms ease, height 160ms ease, background 160ms ease, opacity 160ms ease;
		opacity: 0;
		will-change: transform;
	}
	.cursor-stip.is-actief { opacity: 0.85; }
	.cursor-stip.is-groot { width: 30px; height: 30px; background: transparent; border: 1.5px solid var(--kleur-primair); }
}

/* Kaarten die via JS lichtjes kantelen op muisbeweging (initKantelen). */
.dienst-kaart,
.portfolio-kaart {
	will-change: transform;
}

/* Confetti voor de ballon-knal wordt volledig inline gestyled vanuit
   main.js (spawnConfetti): bewust geen CSS-afhankelijkheid. */

/* Zachte overgang tussen pagina's (cross-document view transitions).
   Progressieve verbetering: browsers zonder ondersteuning of met
   verminderde-bewegingsvoorkeur laden gewoon direct. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* ---------------------------------------------------------------- printen
   Ouders printen prijslijsten: alles wat op papier geen nut heeft gaat weg,
   tabellen worden rustig zwart-wit. */
@media print {
	.site-header,
	.site-footer,
	.cta-band,
	.marquee,
	.hero__sfeer,
	.hero__scroll-cue,
	.portfolio-filters,
	.paginering,
	.knop,
	.wp-block-buttons,
	.menu-toggle,
	.scroll-voortgang,
	.cursor-stip,
	.broodkruimels,
	body::before,
	.pagina-banner::before,
	.pagina-banner::after {
		display: none !important;
	}
	body { background: #fff; color: #000; }
	.wp-block-table table { box-shadow: none; border: 1px solid #888; }
	.entry-content, .entry-content--tarieven { max-width: none; }
	a { color: #000; text-decoration: none; }
}