/* =========================================================
   Innovatie Media - themastyling. Tokens staan in style.css (:root).
   Alleen wat in Figma staat: header en hero (frame 1:26).
   ========================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--c-bg);
	color-scheme: dark;
}

/* Geen grijze tikvlek op de telefoon (op verzoek, overal); knoppen en pillen
   geven zelf al antwoord met de krabbel en de focusrand. */
*,
*::before,
*::after { -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--c-bg);
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
video { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: inherit; }
::selection { background: var(--c-lavender); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }

.screen-reader-text {
	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 {
	position: fixed;
	top: 0.75rem; left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-weight: 500;
	text-decoration: none;
	transform: translateY(-200%);
}

/* Lenis (lenis.css 1.3.17, hier opgenomen: een request minder) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

.richtext > * + * { margin-top: 1em; }
.richtext p { text-wrap: pretty; }
.richtext a { color: var(--c-lavender); text-underline-offset: 0.18em; }
.richtext strong { font-weight: 600; }

/* ---------- Transitie (Osmo DrawSVG page transition) ---------- */
.transition {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	overflow: clip;
}
.transition__shape {
	position: absolute;
	inset: 0;
	color: var(--c-lavender);
}
/* Roze vlak groot in beeld (app.js, ook bij herladen): bruine krabbel. */
.roze-in-beeld .transition__shape { color: var(--c-bg); }
.transition__svg {
	position: absolute;
	top: -15%; left: -15%;
	width: 130%; height: 130%;
	max-width: none;
}
/* Eerste page load: het scherm staat al bedekt tot app.js de lijn uittekent. */
.js.is-loading:not(.is-reduced) .transition__svg path { stroke-width: 36%; }
/* Vangnet als de scripts niet laden: na 5 seconden toch de pagina tonen. */
.js.is-loading .transition { animation: im-cover-out 0.5s ease 5s forwards; }
@keyframes im-cover-out { to { opacity: 0; visibility: hidden; } }
.is-transitioning .transition { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
	.transition { display: none; }
}

/* ---------- Pillen en knoppen ---------- */
.pill,
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--fs-btn);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.45s var(--ease-im), border-color 0.45s var(--ease-im);
}

/* Hover: een krabbel tekent zich over de knop en vult hem (buttons.js,
   Osmo "Button 007"). De kleur van de krabbel per variant via --scribble.
   Bij de witte en paarse omlijnde knoppen keert de tekst om met difference
   (binnen de knop, die is geïsoleerd): precies waar de krabbel ligt wordt de
   tekst donker, de rest blijft licht. Toetsenbordfocus: direct vol. */
.pill { border-color: var(--c-white); color: var(--c-white); --scribble: var(--c-white); }
.scribble {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	overflow: hidden;
	color: var(--scribble, var(--c-white));
	pointer-events: none;
}
.scribble svg { width: 100%; height: 100%; }
.pill:focus-visible .scribble path,
.btn:focus-visible .scribble path { stroke-width: 62; }
.pill__label,
.btn__label { position: relative; line-height: 1.25; }
.pill .pill__label,
.btn--omlijnd .btn__label,
.btn--paars .btn__label { mix-blend-mode: difference; }

.btn--primair { background: var(--c-lavender); color: var(--c-ink); --scribble: var(--c-lavender-dark); }

.btn--paars { border-color: var(--c-lavender); color: var(--c-lavender); --scribble: var(--c-lavender); }

.btn--omlijnd { border-color: var(--c-white); color: var(--c-white); --scribble: var(--c-white); }


/* Op een lichte ondergrond: donkere varianten. */
.btn--on-light.btn--primair { background: var(--c-ink); color: var(--c-lavender); --scribble: var(--c-bg); }
.btn--on-light.btn--paars,
.btn--on-light.btn--omlijnd { border-color: var(--c-ink); color: var(--c-ink); --scribble: var(--c-ink); }
.btn--on-light .btn__label { mix-blend-mode: normal; transition: color 0.3s ease 0.32s; }
.btn--on-light.btn--paars.is-hover,
.btn--on-light.btn--omlijnd.is-hover { color: var(--c-lavender); }

.btns { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Header (Figma 1:26) ----------
   Elk onderdeel staat los vast in beeld. De witte pillen en het logo mengen
   met difference: boven het bruin blijven ze licht, boven de foto keren ze om.
   Het logo heeft daarvoor een gecompenseerde kleur (--c-logo-blend): min het bruin
   van de achtergrond geeft dat precies het lavendel uit het ontwerp. */
.site-header__menu,
.site-header__logo,
.site-header__ctas,
.site-header__lang {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top));
	z-index: 40;
}
.site-header__menu,
.site-header__logo,
.site-header__lang { mix-blend-mode: difference; }

.site-header__menu { left: var(--gutter); }
/* Mijn omgeving: op de plek van het menu de pil terug naar de website, en
   geen let's work (body-klasse portaal-pagina). Geldt ook voor de tweelingen. */
.site-header__terug { position: fixed; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top)); left: var(--gutter); z-index: 40; display: none; mix-blend-mode: difference; }
.site-header__terug .pill__label { display: inline-flex; align-items: center; gap: 0.45rem; }
.site-header__terug .pill__label svg { flex: none; width: 1.05rem; height: 1.05rem; margin-left: -0.3rem; transition: translate 0.45s var(--ease-im); }
.site-header__terug.is-hover .pill__label svg { translate: -0.2rem 0; }
.portaal-pagina .site-header__terug { display: inline-flex; }
.site-header__terug-kort { display: none; }
@media (max-width: 47.99em) {
	.site-header__terug-lang { display: none; }
	.site-header__terug-kort { display: inline; }
}
.portaal-pagina .site-header__menu,
.portaal-pagina .site-header__ctas { display: none; }
.site-header__uit { position: fixed; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top)); right: calc(var(--gutter) + var(--lang-w) + 1.25rem); z-index: 40; display: none; mix-blend-mode: difference; }
.site-header--een-taal .site-header__uit { right: var(--gutter); }
.portaal-in .site-header__uit { display: inline-flex; }
@media (max-width: 47.99em) {
	.portaal-in .site-header__uit { display: none; }
}
.site-header__logo {
	left: 0;
	right: 0;
	width: max-content;
	height: var(--btn-h);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--c-logo-blend);
	text-decoration: none;
}
.site-header__mark,
.site-header__logo-img { flex: none; width: 3.5rem; height: auto; overflow: visible; }     /* 56 */
/* De naam naast het beeldmerk (op verzoek de standaard): wit, met difference
   zoals de witte pillen. Boven een lavendel vlak neemt de tweeling het over
   (lavendel.js), bruin op lavendel. */
.site-header__woord {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 0.98;
	white-space: nowrap;
}
/* Bord en case (app.js zetKleuren): de kleuren gaan in één keer om; wat dan in beeld is, loopt zacht over. */
.kleur-glijdt .site-header__logo,
.kleur-glijdt .site-header .btn--primair { transition: color var(--kleur-glijd, 1.2s) ease, background-color var(--kleur-glijd, 1.2s) ease; }
.site-header__logo.is-twin { mix-blend-mode: normal; color: var(--c-op-accent); }
.site-header__logo.is-twin .site-header__woord { color: var(--c-op-accent); }

.site-header__lang { right: var(--gutter); width: var(--lang-w); padding: 0; }
.site-header__ctas { right: calc(var(--gutter) + var(--lang-w) + 1.25rem); display: flex; gap: 0.75rem; }
.site-header--een-taal .site-header__ctas { right: var(--gutter); }
/* Direct weg als een paneel opengaat (cases.js, im:card-lock). */
.cases-snap .site-header .cases__ring { transition: none !important; }

@media (max-width: 47.99em) {
	.site-header__logo { gap: 0.5rem; }
	.site-header__mark,
	.site-header__logo-img { width: 2.75rem; }
	.site-header__woord { font-size: 0.8125rem; }
	.site-header__ctas { display: none; }
}
/* Te smal voor de naam naast het beeldmerk (menu- of terugpil en taalpil
   houden minstens 8px lucht): dan alleen de m, zoals de oude site deed. */
@media (max-width: 22.49em) {
	.site-header__woord { display: none; }
}
@media (max-width: 24.99em) {
	.portaal-pagina .site-header__woord { display: none; }
}

/* ---------- Taalpaneel (lang.js) ----------
   Gespiegeld aan het menu: het paneel ligt rechts onder de pagina, op het
   donkere bruin dat het hele scherm vult. De taalpil schuift de hele pagina
   (met logo en knoppen) als kaart naar links (card.js); de taalpil blijft
   staan en wordt "sluiten". Bovenin een draaiende wereldbol, onderin de
   talen. */
.langpanel {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: var(--c-panel);
	visibility: hidden;
}
.lang-open .langpanel { visibility: visible; }
/* Vangt de klik op de weggeschoven pagina, ook op het logo en de knoppen. */
.langpanel-catch {
	position: fixed;
	top: 0;
	right: var(--lang-panel-w);
	bottom: 0;
	left: 0;
	z-index: 50;
	visibility: hidden;
	cursor: pointer;
}
.lang-open .langpanel-catch { visibility: visible; }
/* Alleen tijdens openen en sluiten van het paneel (lang-anim, lang.js):
   anders zit deze overgang de binnenkomst van de header en de
   paginawissels in de weg. */
.lang-anim .site-main,
.lang-anim [data-header-item] { transition: opacity 0.4s ease; }
/* Net als bij het menu: de paginakaart dimt iets, alleen de taalpil niet. */
.lang-dim .site-main,
.lang-dim [data-header-item]:not(.site-header__lang) { opacity: 0.7; }
/* De taalpil blijft boven alles staan en wordt "sluiten": eerst wachtende
   stipjes, dan groeit hij naar links (lang.js). */
.lang-open .site-header__lang { z-index: 55; mix-blend-mode: normal; }
.morph { display: grid; place-items: center; }
.morph > * { grid-area: 1 / 1; white-space: nowrap; }
.morph__dots,
.morph__close { opacity: 0; visibility: hidden; }
.morph__dots { display: flex; gap: 4px; }
.morph__dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: im-dot 0.9s ease-in-out infinite; }
.morph__dots i:nth-child(2) { animation-delay: 0.15s; }
.morph__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes im-dot {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
	40% { transform: translateY(-4px); opacity: 1; }
}
.langpanel__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--lang-panel-w);
	background: var(--c-panel);
	overflow: hidden;
}
/* Kicker op de hoogte van de taalpil; rechts uitgelijnd met de pil. */
.langpanel__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: calc(var(--header-top)) var(--gutter) var(--gutter);
	overflow-y: auto;
}
.langpanel__top { display: flex; align-items: center; min-height: var(--btn-h); gap: 1rem; }
.langpanel__kicker { font-size: var(--fs-small); color: var(--c-mute); }
.langpanel__globe {
	/* Niet krimpen: anders valt de lijst op lage schermen over de bol; de
	   lijst scrollt dan in het paneel. */
	flex: 1 0 auto;
	display: grid;
	place-items: center;
	min-height: 14rem;
	padding: 1.5rem 0;
}
.langpanel__canvas { width: min(100%, 19rem, 34vh); aspect-ratio: 1; display: block; }
/* Stijl schets: onze cursors tekenen de bol (lang.js); spoken voor de
   zwevende cursors (cursors.js), op de telefoon zelf te zien. */
.langpanel__globe { position: relative; }
.langpanel__cursor { z-index: 2; pointer-events: none; }
.langpanel__globe.is-schets .rv-cursor { opacity: 1; }
.langpanel__list { list-style: none; margin: 0; padding: 0; }
/* Meer dan vier talen: twee kolommen en compacter, zodat alles naast de bol past. */
.langpanel__list--veel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.langpanel__list--veel .langpanel__item { padding: 0.9rem 0; gap: 0.75rem; }
.langpanel__list--veel .langpanel__hello { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.25rem); }
.langpanel__list--veel .langpanel__name { font-size: 0.875rem; }
.langpanel__list--veel .langpanel__arrow { width: 2.5rem; height: 2.5rem; }
@media (max-width: 30em) {
	.langpanel__list--veel { grid-template-columns: 1fr; }
}
.langpanel__row { position: relative; }
.langpanel__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	text-decoration: none;
	color: var(--c-white);
	transition: opacity 0.45s var(--ease-im);
}
.langpanel__text { display: grid; gap: 0.2rem; }
.langpanel__mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.langpanel__hello {
	display: block;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.75rem);
	line-height: 1.05;
	color: var(--c-lavender);
}
.langpanel__name { display: block; font-size: 1rem; color: var(--c-mute); transition: color 0.35s; }
.langpanel__arrow {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--c-white);
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	--scribble: var(--c-white);
}
/* Pijl keert om met difference, net als de tekst in de knoppen. */
.langpanel__chevsvg { position: relative; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
/* Actieve taal: roze knop met een vinkje. */
.langpanel__arrow--check { background: var(--c-lavender); border-color: var(--c-lavender); color: var(--c-ink); }
.langpanel__arrow--check .langpanel__chevsvg { mix-blend-mode: normal; }
.langpanel.is-aiming .langpanel__item:not(.is-aim) { opacity: 0.28; }
.langpanel__item.is-aim .langpanel__name { color: var(--c-white); }
.langpanel__item:focus-visible .scribble path { stroke-width: 62; }
@media (max-width: 47.99em) {
	.langpanel__arrow { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Menu (menu.js) ----------
   Naar Osmo "Fixed Underlay Navigation" en "Stacked Drawer Navigation".
   Het menu ligt onder de pagina (z-index 1, de pagina 2) en vult het hele
   scherm met het donkere menubruin. De menu-pil schuift de hele pagina, met
   logo en knoppen, naar rechts en maakt hem kleiner: een kaart met ronde
   hoeken op die donkere ondergrond (menu.js). De pagina dimt iets, alleen
   de menu-pil blijft staan als "sluiten". Elk dieper niveau vervangt de
   lijst op hetzelfde vlak; de terug-pil naast "sluiten" gaat een niveau
   terug. */
.site-main { position: relative; z-index: 2; background: var(--c-bg); }

.drawer {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: var(--c-panel);
	visibility: hidden;
}
.menu-open .drawer { visibility: visible; }

/* Vangt de klik op de weggeschoven pagina, ook op het logo en de knoppen. */
.drawer-frame {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--menu-w);
	z-index: 50;
	visibility: hidden;
	cursor: pointer;
}
.menu-open .drawer-frame { visibility: visible; }

.menu-anim .site-main,
.menu-anim [data-header-item] { transition: opacity 0.4s ease; }
/* Iets minder gedimd dan bij het taalpaneel: op het donkere menubruin moet
   de paginakaart als kaart herkenbaar blijven. */
.menu-dim .site-main,
.menu-dim [data-header-item]:not(.site-header__menu) { opacity: 0.7; }
.menu-open .site-header__menu { z-index: 55; mix-blend-mode: normal; }
/* Rand bovenin (mobiel en tablet): 10px bruin en twee ingedraaide hoeken,
   sticky bovenin de pagina, zodat elk blok met 10px marge en ronde hoeken
   onder de bovenkant door schuift (op desktop doen het cases-vlak en de
   reviews dat zelf). Sticky in plaats van fixed: zo gaat hij gewoon mee als
   de pagina een kaart wordt (menu, taalpaneel, onderlaag). */
.site-rand {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	display: block;
	height: calc(var(--frame) + var(--radius));
	margin-bottom: calc(-1 * (var(--frame) + var(--radius)));
	pointer-events: none;
	background:
		linear-gradient(var(--c-bg), var(--c-bg)) top / 100% var(--frame) no-repeat,
		radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) left var(--frame) top var(--frame) / var(--radius) var(--radius) no-repeat,
		radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) right var(--frame) top var(--frame) / var(--radius) var(--radius) no-repeat;
}
/* Subtiel donker verloop achter de header (mobiel, op verzoek), zodat de
   pillen en het logo ook boven lichte foto's en tekst goed uitkomen. Niet
   over het lavendel: lavendel.js zet daar een masker (--lv-a tot --lv-b). */
.site-rand::after {
	--lv-masker: linear-gradient(to bottom, #000 var(--lv-a, 0px), transparent var(--lv-a, 0px), transparent var(--lv-b, 0px), #000 var(--lv-b, 0px));
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--header-top) + var(--btn-h) + 2.5rem);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--c-scrim) 50%, transparent), color-mix(in srgb, var(--c-scrim) 28%, transparent) 35%, color-mix(in srgb, var(--c-scrim) 8%, transparent) 70%, color-mix(in srgb, var(--c-scrim) 0%, transparent));
	-webkit-mask-image: var(--lv-masker);
	mask-image: var(--lv-masker);
}
@media (min-width: 56.25em) {
	.site-rand { display: none; }
}
/* Op de telefoon scrolt de adminbalk mee weg (WordPress, tot 600px): de
   randen dan tegen de bovenkant, niet 46px eronder. */
@media (max-width: 600px) {
	.admin-bar .site-rand,
	.admin-bar .reviews__rand,
	.admin-bar .kb__rand,
	.admin-bar .kanalen__rand { top: 0; }
}
/* Pagina als kaart (card.js, menu en taalpaneel). Desktop: de herofoto
   staat vast in beeld (kijkgat). Zodra de pagina een transform krijgt,
   hangt "vast" aan de pagina in plaats van aan het scherm; card.js geeft de
   scrollpositie mee zodat de foto niet verspringt. */
.page-card .site-main { will-change: transform; }
@media (min-width: 56.25em) {
	.page-card .hero__media { translate: 0 var(--card-y, 0px); }
}
/* Menu-pil: "sluiten" en de stipjes tellen niet mee voor de breedte, zodat
   de pil in rust precies om "menu" past; menu.js laat hem groeien. */
.site-header__menu .morph__dots,
.site-header__menu .morph__close { width: 0; display: flex; justify-content: center; }
.morph__dots i { flex: none; }

.drawer__panel {
	/* Inhoud begint onder de menu-pil en lijnt links uit met de pil. */
	--drawer-top: calc(var(--header-top) + var(--btn-h) + 2.75rem);
	--drawer-px: var(--gutter);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--menu-w);
	background: var(--c-panel);
	overflow: hidden;
	color: var(--c-white);
}
/* Een dieper niveau vervangt de lijst op hetzelfde vlak (menu.js). */
.drawer__sheet {
	position: absolute;
	inset: 0;
	z-index: 2;
	visibility: hidden;
}

/* Terug-pil: bovenin links, op de plek van "sluiten", die hij opzij duwt
   (menu.js). Roze, net als let's work (btn--primair). Komt binnen als
   rondje met stipjes en groeit open; bij terug naar het eerste niveau
   worden het weer stipjes en krimpt hij weg. */
.drawer__back {
	position: absolute;
	top: calc(var(--header-top));
	left: var(--gutter);
	z-index: 5;
	visibility: hidden;
	opacity: 0;
}
.drawer__back-code { display: inline-flex; align-items: center; gap: 0.5rem; }
.drawer__back .morph__dots { width: 0; display: flex; justify-content: center; }
.drawer__back-icon { flex: none; width: 1.125rem; height: 1.125rem; }

.drawer__content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--drawer-top) var(--drawer-px) var(--drawer-px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.drawer__content::-webkit-scrollbar { display: none; }
/* In de kolom van een paneel krimpt niets in: anders lopen lange lijsten
   over wat eronder staat (alleen de foto en de tegels vullen de ruimte). */
.drawer__content > :not(.drawer__visual):not(.drawer__tiles) { flex-shrink: 0; }

.drawer__title {
	margin: 0 0 1rem;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--fs-small);
	color: var(--c-lavender);
}

.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	width: 100%;
	padding: 0.35rem 0;
	border: 0;
	background: none;
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3.5rem);
	line-height: 1.08;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.45s var(--ease-im), color 0.35s ease;
}
/* Vanaf het tweede niveau: kleiner, met de omschrijving eronder. */
.drawer__list--2 { margin-bottom: 2rem; }
.drawer__list--2 .drawer__link { font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.875rem); padding: 0.6rem 0; }
.drawer__text { display: grid; gap: 0.3rem; }
.drawer__desc {
	display: block;
	font-family: var(--f-body);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--c-mute);
	transition: color 0.35s ease;
}
.drawer__mask { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.drawer__label { display: block; }
/* Pijl naar een dieper niveau: outlined rondje zoals in het taalpaneel; bij
   hover op de regel loopt het vol met de krabbel en keert de pijl om. */
.drawer__arrow {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--c-white);
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	--scribble: var(--c-white);
}
.drawer__list--2 .drawer__arrow { width: 2.5rem; height: 2.5rem; }
.drawer__arrow-svg { position: relative; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
/* Gewone link (geen dieper niveau): roze gevuld rondje met ↗, bij hover
   loopt het donkerder lavendel vol, net als de roze knoppen. */
.drawer__arrow--link { background: var(--c-lavender); border-color: var(--c-lavender); color: var(--c-ink); --scribble: var(--c-lavender-dark); }
.drawer__arrow--link .drawer__arrow-svg { mix-blend-mode: normal; }
.drawer__link[aria-current="page"] { color: var(--c-lavender); }
.drawer__link:focus-visible { color: var(--c-lavender); outline: none; }
.drawer__link:focus-visible .scribble path,
.drawer__case-row:focus-visible .scribble path { stroke-width: 62; }
/* Hover: de rest dimt, net als in het taalpaneel; het item kleurt lavendel. */
@media (hover: hover) {
	.drawer__list:has(> .drawer__item > .drawer__link:hover) > .drawer__item > .drawer__link:not(:hover) { opacity: 0.3; }
	.drawer__link:hover { color: var(--c-lavender); }
	.drawer__link:hover .drawer__desc { color: var(--c-white); }
}
.drawer__more { align-self: flex-start; margin: -0.75rem 0 2rem; color: var(--c-white); font-size: 1rem; }

/* ---------- Menu, variant uitgebreid (Theme Settings > Menu) ----------
   Naar het menu van Cube: Ons werk toont cases, Over ons fototegels, en
   gewone links krijgen een roze rondje met ↗ (wit rondje met → = een niveau
   dieper). */
.drawer__count {
	display: inline-block;
	margin: 0.3em 0 0 0.5rem;
	padding: 0.35em 0.85em;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1;
	vertical-align: top;
	color: var(--c-white);
}
/* Knop naar het hele werkarchief, onderaan het paneel Ons werk. Blijft
   onderin het paneel in beeld (sticky) met een donkere gradient erachter
   waarin de lijst wegvalt, tot je bij zijn eigen plek bent. */
.drawer__all-wrap {
	position: sticky;
	bottom: 0;
	z-index: 3;
	flex: none;
	margin-top: 2rem;
	pointer-events: none;
}
/* De gradient loopt tot de randen van het paneel en tot de onderkant. */
.drawer__all-wrap::before {
	content: "";
	position: absolute;
	top: -4rem;
	right: calc(-1 * var(--drawer-px));
	bottom: calc(-1 * var(--drawer-px));
	left: calc(-1 * var(--drawer-px));
	z-index: -1;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--c-panel) 0%, transparent), var(--c-panel) 55%);
}
.drawer__all { gap: 0.6rem; pointer-events: auto; }
.drawer__all-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Rechts naast de knop: een rondje dat wit volloopt naarmate je door het
   paneel scrolt (menu.js zet --scroll, 0 tot 1). Onderaan verdwijnt het;
   een klik brengt je in één beweging naar beneden. */
.drawer__scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-mute);
	font: inherit;
	font-size: var(--fs-small);
	cursor: pointer;
	pointer-events: auto;
	transition: opacity 0.5s var(--ease-im), visibility 0.5s, color 0.3s ease;
}
.drawer__scroll.is-end,
.drawer__scroll.is-kort { opacity: 0; visibility: hidden; }
.drawer__scroll:hover,
.drawer__scroll:focus-visible { color: var(--c-white); }
.drawer__ring { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--c-white); }
.drawer__ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.drawer__ring-track { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.drawer__ring-fill { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--scroll, 0)); transition: stroke-dashoffset 0.15s linear; }
.drawer__ring-arrow { width: 0.875rem; height: 0.875rem; }
@media (max-width: 47.99em) {
	.drawer__scroll-label { display: none; }
}
.drawer__count--btn { position: relative; margin: 0; background: color-mix(in srgb, var(--c-ink) 12%, transparent); color: var(--c-ink); vertical-align: middle; }
.drawer__subtitle { margin: 2rem 0 0.25rem; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-small); color: var(--c-mute); }

/* Uitgelichte cases: kaarten per twee. */
.drawer__cases { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
.drawer__case { display: grid; align-content: start; gap: 0.4rem; color: var(--c-white); text-decoration: none; }
.drawer__case-visual { display: block; aspect-ratio: 4 / 3; margin-bottom: 0.4rem; border-radius: calc(var(--radius) * 0.8); overflow: hidden; background: var(--c-panel-2); }
.drawer__case-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-im); }
.drawer__case-name { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; transition: color 0.35s ease; }
.drawer__case-intro { font-size: 0.875rem; line-height: 1.4; color: var(--c-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drawer__case-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.drawer__case-labels span { padding: 0.3rem 0.6rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-size: 0.75rem; line-height: 1; color: var(--c-mute); }
.drawer__case:focus-visible,
.drawer__case-row:focus-visible,
.drawer__tile:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 4px; border-radius: calc(var(--radius) * 0.8); }

/* De overige cases als lijstje. */
.drawer__case-list { list-style: none; margin: 0; padding: 0; }
.drawer__case-row { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; color: var(--c-white); text-decoration: none; transition: opacity 0.45s var(--ease-im); }
.drawer__case-thumb { flex: none; width: 3.5rem; height: 3.5rem; border-radius: calc(var(--radius) * 0.6); overflow: hidden; background: var(--c-panel-2); }
.drawer__case-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drawer__case-row-text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.drawer__case-row-name { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.2; transition: color 0.35s ease; }
.drawer__case-row-intro { font-size: 0.8125rem; color: var(--c-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer__case-row .drawer__arrow { width: 2.25rem; height: 2.25rem; }

/* Fototegels: de eerste breed, de rest per twee. */
.drawer__tiles { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* De tegels vullen de hoogte van het paneel (eerste rij iets hoger). */
/* Meer dan drie tegels (Over ons met Vacatures, 2026-10-14): elke extra rij even hoog als de tweede; eerst kreeg
   de vierde tegel een rij van 0 hoog en was hij onzichtbaar. */
.drawer__content--tegels .drawer__tiles { flex: 1 1 auto; min-height: 26rem; grid-template-rows: 1.25fr 1fr; grid-auto-rows: 1fr; }
.drawer__content--tegels .drawer__tile { aspect-ratio: auto; height: 100%; }
.drawer__tiles > li:first-child { grid-column: 1 / -1; }
/* Een even aantal tegels: de laatste staat alleen in zijn rij en krijgt de hele breedte, zoals de eerste. */
.drawer__tiles > li:last-child:nth-child(even) { grid-column: 1 / -1; }
.drawer__tile {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	text-decoration: none;
	background: var(--c-panel-2);
}
.drawer__tile--wide { aspect-ratio: 16 / 10; }
.drawer__tile-visual { position: absolute; inset: 0; z-index: -2; }
.drawer__tile-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-im); }
.drawer__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--c-panel) 85%, transparent), color-mix(in srgb, var(--c-panel) 0%, transparent) 62%); }
.drawer__tile-text { position: absolute; left: 1rem; right: 4rem; bottom: 1rem; display: grid; gap: 0.2rem; }
.drawer__tile-name { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.1; }
.drawer__tile--wide .drawer__tile-name { font-size: 1.875rem; }
.drawer__tile-desc { font-size: 0.8125rem; line-height: 1.35; color: rgba(255, 255, 255, 0.8); }
.drawer__tile .drawer__arrow { position: absolute; right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; }
.drawer__tile:focus-visible .scribble path { stroke-width: 62; }

@media (hover: hover) {
	.drawer__case:hover .drawer__case-img,
	.drawer__tile:hover .drawer__tile-img { transform: scale(1.05); }
	.drawer__case:hover .drawer__case-name,
	.drawer__case-row:hover .drawer__case-row-name { color: var(--c-lavender); }
	.drawer__case-list:has(.drawer__case-row:hover) .drawer__case-row:not(:hover) { opacity: 0.3; }
}
@media (max-width: 47.99em) {
	.drawer__cases { gap: 1.25rem 0.75rem; }
	.drawer__case-name { font-size: 1.0625rem; }
	.drawer__case-labels { display: none; }
	.drawer__tile-name { font-size: 1.125rem; }
	.drawer__tile--wide .drawer__tile-name { font-size: 1.5rem; }
	.drawer__tile-desc { display: none; }
	.drawer__tile:not(.drawer__tile--wide) .drawer__tile-text { right: 1rem; bottom: 3.75rem; }
}

/* Beeldvlak onderin een paneel; wisselt mee met de regel waar je op staat. */
.drawer__visual {
	position: relative;
	/* Groeit mee met de ruimte die over is; nooit kleiner dan de basis. */
	flex: 1 0 clamp(9rem, 32vh, 19rem);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-panel-2);
}
.drawer__visual-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.6s var(--ease-im), transform 1.4s var(--ease-im);
}
.drawer__visual-img.is-active { opacity: 1; transform: scale(1); }

/* Kaartje over de volle breedte, daaronder e-mail en telefoon met Mijn
   omgeving rechts ernaast. */
.drawer__bottom { margin-top: auto; padding-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
.drawer__card { grid-column: 1 / -1; }
.drawer__card {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	padding: 0.75rem;
	border-radius: var(--radius);
	background: var(--c-panel-2);
	color: var(--c-white);
	text-decoration: none;
}
.drawer__card-visual { flex: none; display: flex; flex-direction: column; gap: 10px; width: 9rem; }
.drawer__card-photo { position: relative; flex: 1 1 0; min-height: 6rem; border-radius: calc(var(--radius) * 0.6); overflow: hidden; background: var(--c-panel-3); }
.drawer__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-im); }
.drawer__card-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.9rem; padding: 0.75rem 0.75rem 0.75rem 0; }
.drawer__card-desc { color: var(--c-mute); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.drawer__card-cta { --btn-h: 2.75rem; --btn-px: 1.375rem; }
.drawer__card:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.drawer__card:focus-visible .scribble path { stroke-width: 62; }
@media (hover: hover) {
	.drawer__card:hover .drawer__card-img { transform: scale(1.05); }
}
.drawer__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 1rem; }
/* Knop naar de klantomgeving: kleine witte pil met krabbel, rechts naast de voet. */
.drawer__portal {
	position: relative;
	font-size: var(--fs-small);
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 1.125rem;
	border: 1px solid var(--c-white);
	border-radius: var(--radius-pill);
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 500;
	text-decoration: none;
	--scribble: var(--c-white);
}
.drawer__portal-label { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; mix-blend-mode: difference; }
.drawer__portal-icon { width: 1.125rem; height: 1.125rem; flex: none; }
.drawer__portal:focus-visible .scribble path { stroke-width: 62; }
/* E-mail en telefoon: met dezelfde haarlijn als de diensten in de hero. */
.drawer__footer-link { color: var(--c-white); }

@media (max-width: 47.99em) {
	.drawer__panel { --drawer-top: calc(var(--header-top) + var(--btn-h) + 2rem); }
	.drawer__arrow { width: 2.5rem; height: 2.5rem; }
	.drawer__list--2 .drawer__arrow { width: 2.25rem; height: 2.25rem; }
	.drawer__visual { flex-basis: clamp(8rem, 24vh, 12rem); }
	/* Kaartje: de tekst vult de breedte (overal 12px lucht om foto en tekst),
	   zodat het minder hoog hoeft. */
	.drawer__card { gap: 0.75rem; }
	.drawer__card-visual { width: 5rem; }
	.drawer__card-text { padding: 0.25rem 0; }
	/* Telefoon (op verzoek): Mijn omgeving over de volle breedte, gecentreerd,
	   boven het kaartje; die twee vullen de breedte tot 10px van de rand
	   (zoals de vlakken op de pagina), e-mail en telefoon eronder op de
	   linkerlijn van het menu. */
	.drawer__bottom { grid-template-columns: minmax(0, 1fr); row-gap: var(--frame); }
	.drawer__portal,
	.drawer__card { margin-inline: calc(var(--frame) - var(--drawer-px)); }
	.drawer__portal { order: -1; justify-content: center; height: 2.75rem; }
	.drawer__footer { margin-top: calc(1.5rem - var(--frame)); gap: 0.5rem 1.5rem; }
}

/* ---------- Titelreveal (lamalama, title-reveal.js) ---------- */
.title-line { white-space: nowrap; will-change: transform, clip-path; }

/* ---------- Blok: hero (Figma 1:26) ---------- */
.section--hero { position: relative; }
.hero {
	position: relative;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
.hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--gap);
	height: 100%;
	width: calc(100% - 41.07% - var(--frame));
	padding: calc(var(--header-top) + var(--btn-h) + 2rem) var(--gutter) var(--gutter);
}
.hero__title {
	max-width: 42rem;                                   /* 672 */
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 1;
	color: var(--c-lavender);
	text-wrap: balance;
}
.hero__text {
	max-width: 36.5rem;                                 /* 584 */
	font-size: var(--fs-lead);
	line-height: 1.35;
}
.hero__text > * + * { margin-top: 1.35em; }
/* Links in de introtekst (de diensten): subtiele bruine onderstreping met
   ronde uiteinden die bij hover van links naar rechts roze volloopt (de roze
   lijn groeit in de breedte, dus de ronde punt loopt mee); de tekst kleurt
   mee. Op één regel gehouden, zodat de lijn nooit over twee regels breekt. */
.hero__text a,
.drawer__more,
.drawer__footer-link {
	position: relative;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	transition: color 0.35s ease;
}
.hero__text a::before,
.hero__text a::after,
.drawer__more::before,
.drawer__footer-link::before,
.drawer__more::after,
.drawer__footer-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.06em;
	height: 1px;
	border-radius: 1px;
	pointer-events: none;
}
.hero__text a::before,
.drawer__more::before,
.drawer__footer-link::before { right: 0; background: var(--c-underline); }
/* Op retina-schermen een haarlijn: een halve CSS-pixel is daar één echte pixel. */
@media (min-resolution: 2dppx) {
	.hero__text a::before,
	.hero__text a::after,
	.drawer__more::before,
	.drawer__footer-link::before,
	.drawer__more::after,
	.drawer__footer-link::after { height: 0.5px; }
}
.hero__text a::after,
.drawer__more::after,
.drawer__footer-link::after { width: 0; background: var(--c-lavender); transition: width 0.6s var(--ease-im); }
.hero__text a:focus-visible,
.drawer__more:focus-visible,
.drawer__footer-link:focus-visible { color: var(--c-lavender); }
.hero__text a:focus-visible::after,
.drawer__more:focus-visible::after,
.drawer__footer-link:focus-visible::after { width: 100%; }
@media (hover: hover) {
	.hero__text a:hover,
	.drawer__more:hover,
	.drawer__footer-link:hover { color: var(--c-lavender); }
	.hero__text a:hover::after,
	.drawer__more:hover::after,
	.drawer__footer-link:hover::after { width: 100%; }
}
.hero__visual {
	position: absolute;
	top: var(--frame);
	right: var(--frame);
	/* Expliciete hoogte (niet via bottom): ScrollTrigger pint dit kader en
	   meet dan zijn eigen hoogte. */
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	width: 41.07%;                                      /* 621 van 1512 */
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-bg-licht);
}
/* Beeldlaag. Mobiel: parallax (hero.js), daarvoor is de laag 28% hoger.
   Laptop en desktop: kijkgat, zie hieronder. */
.hero__media { position: absolute; inset: -14% 0; will-change: transform; }

/* Kijkgat (laptop en desktop): de foto staat vast in het scherm (fixed) en
   het afgeronde kader knipt hem af (clip-path knipt ook vaste kinderen af).
   Bij het scrollen schuift het kader omhoog en zie je steeds minder foto.
   Pure CSS, dus het beeld staat echt stil, ook met Lenis. De foto houdt
   bovenin de 10px marge en dezelfde afgeronde hoeken als het kader, ook als
   het kader omhoog is geschoven. Een paar pixels breder dan het kader tegen
   afrondingsverschillen. */
@media (min-width: 56.25em) {
	/* Geen eigen achtergrond: de marge boven de vaste foto moet het bruin van
	   de pagina tonen, niet het kader. */
	.hero__visual { overflow: visible; clip-path: inset(0 round var(--radius)); background: none; }
	.hero__media {
		position: fixed;
		inset: auto;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
		right: calc(var(--frame) - 2px);
		width: calc(41.07% + 4px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
		border-radius: var(--radius) var(--radius) 0 0;
		overflow: hidden;
		will-change: auto;
	}
}

/* De frames liggen op volgorde op elkaar; alles tot en met het huidige frame
   staat aan, zodat er nooit een leeg moment is (hero.js). */
.hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.22s ease-out;
}
.hero__frame.is-shown,
.no-js .hero__frame:first-child { opacity: 1; }
/* Bedekt door twee frames erboven: na de fade weg (minder tekenwerk). */
.hero__frame.is-onder { visibility: hidden; transition: opacity 0.22s ease-out, visibility 0s linear 0.3s; }
/* Zwart verloop bovenin de foto zelf (op de beeldlaag, dus het blijft bij
   het kijkgat onder de pillen staan), zodat de pillen goed uitkomen. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 40%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0));
	pointer-events: none;
}
.hero--zonder-beeld .hero__content { width: auto; }
/* Podium: kop, tekst, knoppen en het beeld. Met twee tegels staat het op
   laptop en desktop vast (sticky) zolang de scrollbaan duurt. */
.hero__podium { position: relative; height: 100%; }

/* Twee tegels (hero.js, 2026-10-14): boven de foto uit "sfeerbeeld", eronder
   de trap, met 10px ertussen. Beide tegels zijn zo groot als het hele beeld
   en worden alleen verschoven (transform): de bovenste schuift omhoog onder
   zijn eigen onderrand door, de trap schuift omhoog en zijn beeld gaat
   langzamer mee. Zonder JS en bij minder beweging zet deze CSS de beginstand
   neer (procenten van de tegel zelf, die zo groot is als het beeld).
   --hero-split = aandeel van de bovenste tegel, --hero-kt = hoe ver het
   trapbeeld meeschuift met zijn rand (1 = helemaal, 0 = staat stil). */
.hero--tegels { --hero-split: 0.5; --hero-kt: 0.56; }
.hero--tegels .hero__visual {
	--hero-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	background: none;
}
.hero--tegels .hero__media::after { content: none; }
.hero__tegel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--c-bg-licht);
	will-change: transform;
}
.hero__beeld { position: absolute; inset: 0; will-change: transform; }
.hero__sfeer { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Het verloop voor de header, per tegel; hero.js houdt het bovenaan het beeld. */
.hero__waas {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--hero-h) * 0.4);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--c-scrim) 60%, transparent), color-mix(in srgb, var(--c-scrim) 28%, transparent) 40%, color-mix(in srgb, var(--c-scrim) 0%, transparent));
	pointer-events: none;
	will-change: transform;
}
/* Figma-selectie om de trap zolang hij groeit (zoals op het cases-bord):
   lijnen en grepen 6px binnen de rand, de maat onderin het midden. Alles
   schuift of schaalt (transform), zodat de foto eronder niet elke frame
   opnieuw geschilderd wordt (eerst veranderde de maat van de selectie en
   haperde het): het begin staat stil, het eind schuift mee met de rand en de
   zijlijnen schalen mee. */
.hero__selectie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; will-change: opacity; }
/* De maten van een Figma-selectie, gedeeld met de wissel op /diensten/ (op verzoek 2026-10-14: "de hoekjes zijn soms
   verkeerd of de groene lijn loopt erdoor, kun je fixen dat het altijd goed is"). Alles valt op hele schermpixels
   (op een gewoon scherm een lijn van 1px, op retina 1,5px), het midden van een hoekje ligt precies op het midden van
   de lijn, de hoekjes liggen boven de lijnen en ze staan zo ver binnen de tegel dat de afronding van 10px ze niet
   afsnijdt (vanaf 3px vanaf de rand past een hoekje helemaal). --sel-m = het midden van de lijn vanaf de rand. */
.hero__selectie,
.dw__sel,
.vk__sel { --sel-lijn: 1px; --sel-greep: 9px; --sel-rand: 1px; --sel-m: 7.5px; --sel-lo: calc(var(--sel-m) - var(--sel-lijn) / 2); --sel-go: calc(var(--sel-m) - var(--sel-greep) / 2); }
@media (min-resolution: 2dppx) {
	.hero__selectie,
	.dw__sel,
	.vk__sel { --sel-lijn: 1.5px; --sel-greep: 8.5px; --sel-rand: 1.5px; --sel-m: 7.75px; }
}
.hero__selectie.is-aan { opacity: 1; }
/* z-index 1: de stroken met de hoekjes boven de zijlijnen (een strook is een eigen laag door will-change, dus een
   z-index op de hoekjes zelf werkt alleen binnen de strook). */
.hero__sel-begin,
.hero__sel-eind { position: absolute; z-index: 1; left: 0; right: 0; height: calc(var(--sel-m) * 2); will-change: transform; }
.hero__sel-begin { top: 0; }
.hero__sel-eind { bottom: 0; }
.hero__sel-begin::before,
.hero__sel-eind::before { content: ""; position: absolute; top: var(--sel-lo); left: var(--sel-m); right: var(--sel-m); height: var(--sel-lijn); background: var(--c-lavender); }
.hero__sel-zij { position: absolute; top: var(--sel-m); bottom: var(--sel-m); left: var(--sel-lo); width: var(--sel-lijn); background: var(--c-lavender); transform-origin: 50% 0; will-change: transform; }
.hero__sel-zij + .hero__sel-zij { left: auto; right: var(--sel-lo); }
/* De hoekjes boven de lijnen (de zijlijnen staan later in de HTML en liepen er eerst doorheen). */
.hero__selectie i { position: absolute; z-index: 1; top: var(--sel-go); width: var(--sel-greep); height: var(--sel-greep); border: var(--sel-rand) solid var(--c-lavender); border-radius: 2px; background: var(--c-white); }
.hero__selectie i:first-child { left: var(--sel-go); }
.hero__selectie i:last-child { right: var(--sel-go); }
.hero__maat {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	translate: -50% 0;
	padding: 3px 7px;
	border-radius: 4px;
	background: var(--c-lavender);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	will-change: transform;
}
/* De naad: een greepje in het accent met Ben erop (spook voor de zwevende
   cursors; zonder zwevende cursors zijn eigen cursor). Zolang hij trekt
   drukt hij een tikje in, zoals bij een klik. */
.hero__greep {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 0;
	height: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
	will-change: transform;
}
.hero__greep.is-aan { opacity: 1; }
.hero__greep-lijn {
	position: absolute;
	top: -2px;
	left: -1.125rem;
	width: 2.25rem;
	height: 4px;
	border-radius: 4px;
	background: var(--c-lavender);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lavender) 22%, transparent);
}
.hero__cursor { margin: -2px 0 0 -3px; transform-origin: 3px 2px; transition: transform 0.25s var(--ease-im); }
.hero__greep.is-vast .hero__cursor { transform: scale(0.88); }
.no-js .hero__greep,
.no-js .hero__selectie { display: none; }
@media (prefers-reduced-motion: reduce) {
	.hero__greep,
	.hero__selectie { display: none; }
}
/* Beginstand, overal onder elkaar (ook op de telefoon, op verzoek 2026-10-14). */
.hero__tegel--sfeer { height: calc((100% - var(--frame)) * var(--hero-split)); }
.hero__tegel--trap { transform: translateY(calc((100% - var(--frame)) * var(--hero-split) + var(--frame))); }
.hero__tegel--trap > .hero__beeld { transform: translateY(calc(((100% - var(--frame)) * var(--hero-split) + var(--frame)) * (var(--hero-kt) - 1))); }
@media (min-width: 56.25em) {
	/* De beeldlaag is 4px breder dan het kader (kijkgat); de tegels precies zo breed als het kader. */
	.hero__tegel { left: 2px; width: calc(100% - 4px); }
}
/* Scrollbaan: de hero is zoveel hoger en het podium staat zolang stil. */
@media (min-width: 56.25em) and (prefers-reduced-motion: no-preference) {
	.js .hero--tegels {
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) + var(--hero-baan, 0px));
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) + var(--hero-baan, 0px));
	}
	.js .hero--tegels .hero__podium {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	}
}

/* AI-bal in de kop (aibal.js): achter het woord AI groeit ruimte open en
   daarin veert een roze bal van klein naar groot; daarna begint altijd een
   nieuwe regel (br in de markup), zodat de rest van de kop niet verspringt. In de bal rolt een rij AI-logo's: rustig als je niets doet, sneller
   en mee in je scrollrichting als je scrolt (--ai-y, in logo's). */
.ai-ball { position: relative; display: inline-block; width: 0; height: 0.8em; vertical-align: -0.08em; transition: width 1s var(--ease-im); }
.has-ai-ball .ai-ball { width: 1.04em; }
.ai-ball__disc {
	position: absolute;
	top: 0;
	left: 0.24em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	overflow: hidden;
	color: var(--c-lavender);
	transform: scale(0);
	transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
/* Omlijnd: een ring boven de rollende logo's (op verzoek in plaats van een gevulde bal). */
.ai-ball__disc::after {
	content: "";
	position: absolute;
	inset: 0;
	border: max(1.5px, 0.028em) solid var(--c-lavender);
	border-radius: 50%;
	pointer-events: none;
}
.has-ai-ball .ai-ball__disc { transform: scale(1); }
.ai-ball__track { display: flex; flex-direction: column; transform: translateY(calc(var(--ai-y, 0) * -0.8em)); }
.ai-ball__logo { flex: none; display: grid; place-items: center; width: 0.8em; height: 0.8em; }
.ai-ball__logo svg { display: block; width: 52%; height: 52%; }
@media (prefers-reduced-motion: reduce) {
	.ai-ball, .ai-ball__disc { transition: none; }
}

/* Laptop en desktop: de hero is precies het scherm hoog; tekst schaalt ook
   mee met de hoogte, zodat alles op een laag laptopscherm past. */
@media (min-width: 56.25em) {
	.hero__title { font-size: min(var(--fs-h1), 5.1vh); }
	.hero__text { font-size: min(var(--fs-lead), 2.45vh); }
	.hero__content { gap: min(var(--gap), 4.1vh); }
}

@media (max-width: 56.24em) {
	.hero { height: auto; display: flex; flex-direction: column; }
	.hero__content {
		width: auto;
		height: auto;
		justify-content: flex-start;
		padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3.5rem) var(--gutter) 2.5rem;
	}
	.hero__visual {
		position: relative;
		inset: auto;
		width: auto;
		height: min(150vw, 82svh);
		margin: 0 var(--frame) var(--frame);
	}
	.hero__podium { display: contents; }
	/* Twee tegels onder elkaar zoals op desktop; de naad schuift omhoog terwijl
	   het beeld in beeld komt (hero.js). De beelden zijn wat hoger dan de
	   tegel voor een zachte parallax. */
	.hero--tegels .hero__visual { --hero-h: min(150vw, 82svh); }
	.hero--tegels .hero__media { inset: 0; will-change: auto; }
	.hero--tegels .hero__beeld { inset: -7% 0; }
}

/* ---------- Blok: werk (klantlogo's, werk.js) ----------
   Naar omelettedufromage.nl: op de bruine pagina, bovenin de tekst
   gecentreerd. Roze ballen met bruine logo's rijden op een onzichtbare plank
   met de onderkant van het scherm mee en landen op het roze vlak eronder. */
.werk__card {
	position: relative;
	height: calc(110vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(110svh - var(--wp-admin--admin-bar--height, 0px));
	overflow: hidden;
	color: var(--c-white);
}
.werk__canvas { position: absolute; inset: 0; }
.werk__canvas canvas { display: block; touch-action: pan-y; }
.werk__canvas canvas.is-over { cursor: grab; }
.werk__canvas canvas.is-grabbing { cursor: grabbing; }
.werk__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	max-width: 48rem;
	margin: 0 auto;
	padding: calc(var(--header-top) + var(--btn-h) + 6vh) var(--gutter) 0;
	text-align: center;
	pointer-events: none;
}
.werk__content a,
.werk__content button { pointer-events: auto; }
.werk__title {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.02;
	color: var(--c-lavender);
	text-wrap: balance;
}
/* Kop met rollende woorden in roze pillen (roll.js): elke pil sluit een
   regel af, zodat een pil die van breedte verandert alleen zijn eigen regel
   laat meeschuiven. Zonder JS is de pil zo breed als het langste woord. */
.werk__title--roll { line-height: 1.26; }
.werk__line { display: block; }
.roll {
	display: inline-block;
	box-sizing: content-box;
	height: 1.1em;
	padding: 0 0.36em;
	overflow: hidden;
	vertical-align: -0.2em;
	border-radius: 999px;
	background: var(--c-lavender);
	color: var(--c-bg);
	white-space: nowrap;
}
.roll__track { display: flex; flex-direction: column; align-items: center; }
/* De tweede pil omlijnd, voor afwisseling (rand binnen de pil, zodat de
   breedte gelijk blijft). */
.roll--b { background: transparent; color: var(--c-lavender); box-shadow: inset 0 0 0 max(1.5px, 0.04em) var(--c-lavender); }
.roll__item { display: block; height: 1.1em; line-height: 1.1em; white-space: nowrap; }
.werk__text { max-width: 38rem; font-size: var(--fs-lead); line-height: 1.35; text-wrap: pretty; }
.werk__text > * + * { margin-top: 1.1em; }
.werk__btns { justify-content: center; }
/* Zonder JS (of tot de ballen klaar zijn): de logo's als rustig raster
   onderin. Daarna alleen nog voor schermlezers (de alt-tekst is de naam). */
.werk__logos {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 3rem;
	list-style: none;
}
.werk__logos li { display: grid; place-items: center; }
.werk__logo { width: 70%; height: auto; max-height: 4rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.7; }
.js .werk__logos { opacity: 0; pointer-events: none; }
.js .werk__card.is-failed .werk__logos { opacity: 1; }
.werk__card.is-ready .werk__logos { inset: auto; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 56.25em) {
	.werk__title { font-size: min(var(--fs-h2), 5vh); }
	.werk__text { font-size: min(var(--fs-lead), 2.45vh); }
	.werk__content { gap: min(var(--gap), 4.1vh); }
}
@media (max-width: 56.24em) {
	.werk__card { height: calc(105svh - var(--wp-admin--admin-bar--height, 0px)); }
	.werk__content { padding-top: calc(var(--header-top) + var(--btn-h) + 3rem); }
}

/* ---------- Blok: cases (cases.js) ----------
   Gekaderd lavendel vlak (10px marge, ronde hoeken). Op desktop blijft het
   vast in beeld staan (sticky) terwijl alles horizontaal voorbij schuift, in
   lagen: achterin een lus die zich tekent, daarvoor de kop en de
   foto's in drie maten op verschillende hoogtes, elk met een eigen snelheid
   (is-pinned, --cases-dist, data-depth: cases.js). Daaronder, en bij minder
   beweging, een rij die je zelf veegt. overflow: clip (niet hidden), anders
   werkt sticky niet. */
.cases {
	--cases-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	position: relative;
	margin: 0 var(--frame) var(--frame);
	border-radius: var(--radius);
	background: var(--c-lavender);
	color: var(--c-ink);
	overflow: clip;
}
.cases__sticky {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--cases-h);
}
/* Maat en vorm zet cases.js: zo hoog als het vlak (met lucht boven en
   onder, zodat er niets wordt afgekapt) en zo breed als de hele rij plus een
   stuk extra, zodat de lus rechts buiten beeld eindigt. Gecentreerd in de
   rij, en de rij beslaat het hele vlak. */
.cases__lus {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 4860 / 1040;
	overflow: visible;
	color: var(--c-lavender-dark);
	transform: translateY(-50%);
	pointer-events: none;
}
.cases__lus path { fill: none; stroke: currentColor; stroke-width: 78; stroke-linecap: round; stroke-linejoin: round; }
.cases__intro,
.cases__list { position: relative; z-index: 1; }
.cases__track {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	min-height: 0;
	/* De ruimte voor de header zit in de rij zelf (niet in het vlak), zodat de
	   rij het hele vlak beslaat en de lus nergens tegen een rand valt. */
	padding: calc(var(--header-top) + var(--btn-h) + 1.5rem) var(--gutter) 2rem;
	/* Alleen opzij vegen: met alleen overflow-x wordt y ook auto, en op lage
	   schermen steekt de lus onderuit, zodat het vlak ook omhoog en omlaag schoof. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}
.cases__track::-webkit-scrollbar { display: none; }
.cases__intro {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.1rem;
	width: min(76vw, 26rem);
	margin-right: clamp(1.5rem, 6vw, 7rem);
	scroll-snap-align: start;
}
.cases__title {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4.25rem);
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.cases__text { font-size: 1.125rem; line-height: 1.4; color: color-mix(in srgb, var(--c-ink) 78%, transparent); }
.cases__list { display: flex; align-items: stretch; gap: clamp(1.25rem, 5vw, 6rem); margin: 0; padding: 0; list-style: none; }
.cases__item { flex: none; display: flex; flex-direction: column; justify-content: center; width: min(72vw, 20rem); scroll-snap-align: start; }
/* Veegbare rij (mobiel, tablet): alle foto's op dezelfde hoogte (anders
   schoof elke case op eigen hoogte, door het aantal pillen en de lengte van
   de intro); de rij als geheel in het midden van het vlak. */
.cases:not(.is-pinned) .cases__list { align-self: center; align-items: flex-start; }
.cases:not(.is-pinned) .cases__item { justify-content: flex-start; }
.cases__tile { display: block; color: inherit; text-decoration: none; }
.cases__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	background: color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.cases__zoom { position: absolute; inset: 0; display: block; transition: transform 1.1s var(--ease-im); }
.cases__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Bijschrift als pillen: naam gevuld bruin, diensten omlijnd. */
.cases__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding-top: 0.75rem; }
.cases__name,
.cases__label {
	display: inline-flex;
	align-items: center;
	height: 2.25rem;
	padding: 0 1rem;
	border-radius: var(--radius-pill);
	line-height: 1;
	white-space: nowrap;
}
.cases__name {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--c-ink);
	color: var(--c-lavender);
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 0.9375rem;
	--scribble: var(--c-ink-diep);
}
/* Krabbel bij hover (buttons.js, via data-scribble op de tegel): een nog
   donkerder bruin; de naam blijft lavendel. */
.cases__name-label { position: relative; }
@media (hover: hover) and (pointer: fine) {
	/* is-hover zet buttons.js; cases.js houdt het ook tijdens het scrollen
	   bij (de tegels schuiven dan onder een stilstaande muis door). */
	.cases__tile.is-hover .cases__zoom { transform: scale(1.04); }
	.cases__tile.is-hover .cases__pijl { transform: none; }
}
/* Korte intro: op desktop rechts naast de foto (24px), mobiel eronder. */
.cases__desc { display: block; max-width: 26rem; padding-top: 0.9rem; font-size: 1.125rem; line-height: 1.35; color: var(--c-ink); text-wrap: pretty; }
/* Ring met een muisje (scrollen): loopt bruin vol naarmate je het einde
   nadert (cases.js). Strak en klein: ring en muisje 1px. Alleen op desktop. */
.cases__ring { position: absolute; left: var(--gutter); bottom: 1.5rem; z-index: 2; width: 2.75rem; height: 2.75rem; pointer-events: none; }
.cases__muis {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.65rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.325rem;
	border: 1px solid var(--c-ink);
	border-radius: 0.35rem;
}
.cases__muis i {
	position: absolute;
	top: 0.17rem;
	left: 50%;
	width: 1px;
	height: 0.22rem;
	margin-left: -0.5px;
	border-radius: 1px;
	background: var(--c-ink);
	animation: im-muis 1.9s var(--ease-im) infinite;
}
@keyframes im-muis {
	0% { opacity: 0; transform: translateY(0); }
	20% { opacity: 1; }
	65% { opacity: 0; transform: translateY(var(--muis-y, 0.32rem)); }
	100% { opacity: 0; transform: translateY(var(--muis-y, 0.32rem)); }
}
/* Desktop: cases.js zet de ring in de header, naast de menupil en even hoog;
   alleen in beeld zolang het roze vlak vaststaat (cases-head). */
.site-header .cases__ring {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top));
	bottom: auto;
	left: var(--cases-ring-left, 9rem);
	z-index: 40;
	width: var(--btn-h);
	height: var(--btn-h);
	opacity: 0;
	visibility: hidden;
	scale: 0.6;
	transform-origin: 0 50%;
	transition: opacity 0.3s ease, scale 0.6s var(--ease-im), visibility 0s linear 0.6s;
}
.cases-head .site-header .cases__ring { opacity: 1; visibility: visible; scale: 1; transition: opacity 0.45s ease 0.18s, scale 0.8s var(--ease-im) 0.12s, visibility 0s; }
.site-header .cases__muis { --muis-y: 0.4rem; width: 0.8rem; height: 1.2rem; margin: -0.6rem 0 0 -0.4rem; border-radius: 0.42rem; }
.site-header .cases__muis i { top: 0.2rem; height: 0.27rem; }
@media (prefers-reduced-motion: reduce) {
	.cases__muis i { animation: none; }
}
/* Veegbare rij (tablet, mobiel): geen ring (op verzoek), het gluren van de
   rij laat al zien dat je kunt vegen. */
.cases:not(.is-pinned) .cases__ring { display: none; }
.cases__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.cases__ring circle { fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cases__ring-track { stroke: color-mix(in srgb, var(--c-ink) 16%, transparent); }
.cases__ring-fill { stroke: var(--c-ink); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cases__label { border: 1px solid var(--c-ink); font-size: 0.9375rem; text-transform: lowercase; }
/* Pijl bij hover: rechtsonder in de foto, veert in beeld en loopt lavendel
   vol met de krabbel; --c-ink-blend met difference geeft op het bruin lavendel en
   op de lavendel krabbel bruin. */
.cases__pijl {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	background: var(--c-ink);
	--scribble: var(--c-lavender);
	transform: scale(0) rotate(-45deg);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cases__pijl-svg { position: relative; width: 1.35rem; height: 1.35rem; color: var(--c-ink-blend); mix-blend-mode: difference; }

/* Desktop: vast in beeld, lagen met elk een eigen snelheid. Het roze zit
   dan op het vastgezette vlak zelf, zodat het ook vastgezet 10px marge boven
   en onder en ronde hoeken houdt; het blok eromheen is transparant. */
.cases.is-pinned { height: calc(var(--cases-h) + var(--cases-dist, 0px)); background: transparent; border-radius: 0; }
.cases.is-pinned .cases__sticky {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
	height: var(--cases-h);
	border-radius: var(--radius);
	background: var(--c-lavender);
	overflow: clip;
}
.cases.is-pinned .cases__track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.cases.is-pinned .cases__item { will-change: transform; }
/* Drie vormen van ongeveer hetzelfde formaat (staand, vierkant, liggend);
   de breedte geeft ook mee met de schermhoogte, zodat foto, pillen en tekst
   altijd in het vlak passen. */
.cases.is-pinned .cases__item--l { --foto: max(17rem, min(27vw, calc(80svh - 15rem), 30rem)); }
.cases.is-pinned .cases__item--m { --foto: max(17rem, min(30vw, calc(100svh - 19rem), 32rem)); }
.cases.is-pinned .cases__item--w { --foto: max(19rem, min(34vw, calc(125svh - 24rem), 36rem)); }
.cases.is-pinned .cases__item { width: auto; }
.cases.is-pinned .cases__tile {
	display: grid;
	grid-template-columns: var(--foto) minmax(12rem, 15rem);
	grid-template-rows: auto auto;
	column-gap: 1.75rem;
}
.cases.is-pinned .cases__media { grid-column: 1; grid-row: 1; }
.cases.is-pinned .cases__tags { grid-column: 1; grid-row: 2; }
.cases.is-pinned .cases__desc { grid-column: 2; grid-row: 1; align-self: end; max-width: none; padding-top: 0; font-size: var(--fs-lead); }
.cases.is-pinned .cases__item--m .cases__media { aspect-ratio: 1; }
.cases.is-pinned .cases__item--w .cases__media { aspect-ratio: 5 / 4; }
.cases.is-pinned .cases__item--boven { justify-content: flex-start; }
.cases.is-pinned .cases__item--onder { justify-content: flex-end; }

/* ---------- Blok: fases (fases.js) ----------
   "Dit gebeurt er als we starten." (naar omelettedufromage.nl): links een
   kop met tekst en knoppen, rechts een kaart met één fase tegelijk,
   daaronder een tijdlijn met een knop per fase, een afspeelstreepje dat
   vanzelf door de fases loopt en een liniaal met tikjes. */
.fases {
	--fases-kaart: var(--c-kaart);
	--fases-kaart-2: var(--c-kaart-2);
	--fases-pad: clamp(1.75rem, 2.6vw, 2.75rem);
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 4.5rem);
	padding: clamp(6rem, 16vh, 11rem) var(--gutter) clamp(5rem, 12vh, 8rem);
}
.fases__intro { position: sticky; top: calc(var(--header-top) + var(--btn-h) + 3rem); display: grid; gap: 1.75rem; }
.fases__intro-kop { display: grid; gap: 1rem; }
.fases__intro-tekst { display: grid; justify-items: start; gap: 1.75rem; }
.fases__kicker { font-size: var(--fs-small); color: var(--c-mute); }
.fases__title {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.125rem, 1.5rem + 1.75vw, 3.375rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--c-lavender);
	text-wrap: balance;
}
.fases__lead { max-width: 23rem; font-size: var(--fs-body); line-height: 1.5; color: var(--c-mute); text-wrap: pretty; }
.fases__lead > * + * { margin-top: 1em; }
.fases__stage { min-width: 0; }
.fases__card {
	position: relative;
	height: clamp(32rem, 66vh, 44rem);
	border-radius: var(--radius);
	background: var(--fases-kaart);
	overflow: hidden;
	container-type: size;
}
.fases__panel { position: absolute; inset: 0; visibility: hidden; }
.fases__panel:first-child { visibility: visible; }
.js .fases__panel:first-child { visibility: hidden; }
.fases__text { position: relative; z-index: 3; padding: var(--fases-pad); pointer-events: none; }
.fases__naam { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem); line-height: 1; color: var(--c-white); }
.fases__tekst { max-width: 27rem; margin-top: 1.1rem; font-size: var(--fs-lead); line-height: 1.35; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
.fases__visual { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.fases__raster,
.fases__grafiek { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Tafel: gedeeld whiteboard. Stippenraster (canvas), briefjes, penlijn, cursors. */
.fases__pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fases__pen-lijn { fill: none; stroke: var(--c-lavender); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.fases__notitie {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 0.95rem;
	border-radius: var(--radius);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.15;
	white-space: nowrap;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
	visibility: hidden;
	will-change: transform;
}
.fases__nr {
	display: grid;
	place-items: center;
	flex: none;
	width: 0;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-lavender);
	font-size: 0.6875rem;
	font-weight: 600;
	overflow: hidden;
	opacity: 0;
}
.fases__cursor { position: absolute; top: 0; left: 0; z-index: 4; color: var(--c-white); will-change: transform; }
.fases__cursor svg { display: block; width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.fases__cursor-label {
	position: absolute;
	top: 1.05rem;
	left: 0.85rem;
	padding: 0.2rem 0.55rem;
	border-radius: var(--radius-pill);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: 0.8125rem;
	font-weight: 500;
	white-space: nowrap;
}
/* De teamleden: lavendel pijl met een ronde foto als label. */
.fases__cursor--team { color: var(--c-lavender); }
.fases__cursor-fotos {
	position: absolute;
	top: 0.95rem;
	left: 0.8rem;
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--c-lavender);
	border-radius: 50%;
	overflow: hidden;
	background: var(--fases-kaart-2);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.fases__cursor-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Uitgeklapt: een rond vinkje rechts in het briefje; afgevinkt vult het bruin.
   Geen overflow: hidden (het vulrondje veert even door); het lege rondje (b)
   groeit vanaf rechts mee met de breedte (fases.js). */
.fases__vink { position: relative; flex: none; width: 0; height: 1.3rem; opacity: 0; }
.fases__vink b,
.fases__vink i { position: absolute; top: 0; right: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; transform: scale(0); }
.fases__vink b { border: 1.5px solid var(--c-ink); }
.fases__vink i { background: var(--c-ink); }
.fases__vink i::after { content: ""; position: absolute; top: 0.27rem; left: 0.48rem; width: 0.3rem; height: 0.56rem; border: solid var(--c-lavender); border-width: 0 2px 2px 0; rotate: 45deg; }

/* Bouw: links een ontwerpvenster (frame wordt getrokken en gevuld), rechts
   een terminal waarin Claude de bouwstappen afvinkt (het oranje sterretje is
   de knipoog), foto's eromheen. Alles schaalt met de kaart (container-units);
   de vensters beginnen onder de tekst (--tekst-onder, fases.js). */
.fases__venster {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	background: var(--c-panel);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38);
	font-size: clamp(9.5px, 1.3cqw, 13px);
	overflow: hidden;
}
.fases__panel--waaier { --onder: var(--tekst-onder, 50cqh); --rest: calc(100cqh - var(--onder)); }
.fases__venster--figma { top: calc(var(--onder) + 1rem); bottom: calc(var(--rest) * 0.3); left: 4%; width: 66%; }
.fases__venster--terminal { top: calc(var(--onder) + var(--rest) * 0.36); bottom: 4%; right: 4%; z-index: 3; width: 52%; }
/* Brede kaart met ruimte naast de tekst: vensters onderin, foto's als waaier rechtsboven. */
.is-breed .fases__venster--figma { top: max(48%, calc(var(--onder) + 1.25rem)); bottom: 5%; width: 57%; }
.is-breed .fases__venster--terminal { top: 44%; bottom: 7%; width: 40%; }
.fases__balk { flex: none; display: flex; align-items: center; gap: 0.45em; height: 2.5em; padding: 0 0.9em; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: var(--c-blok); }
.fases__balk > i { flex: none; width: 0.65em; height: 0.65em; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.fases__balk > i:first-child { background: var(--c-lavender); }
.fases__balk-titel { margin: 0 auto; padding-right: 3.4em; color: var(--c-mute); font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em; }
.fases__tools { display: flex; gap: 0.95em; margin: 0 auto; padding-right: 3.4em; color: rgba(255, 255, 255, 0.45); }
.fases__tools svg { display: block; width: 1.2em; height: 1.2em; }
.fases__tools .is-aan { color: var(--c-lavender); }

/* Ontwerpvenster: lagen links, doek met stippen, frame met grepen en maat. */
.fases__figma { flex: 1; display: flex; min-height: 0; }
.fases__lagen { flex: none; display: grid; align-content: start; gap: 0.8em; width: 24%; padding: 1em 0.85em; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.fases__laag { display: flex; align-items: center; gap: 0.5em; }
.fases__laag:nth-child(n+2) { padding-left: 0.9em; }
.fases__laag i { flex: none; width: 0.7em; height: 0.7em; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 2px; }
.fases__laag:first-child i { border-color: var(--c-lavender); }
.fases__laag b { width: var(--w); height: 0.42em; border-radius: 1em; background: rgba(255, 255, 255, 0.22); }
.fases__doek { position: relative; flex: 1; min-width: 0; background: var(--c-blok-2) radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) 0 0 / 1.4em 1.4em; overflow: hidden; }
.fases__frame { position: absolute; top: 13%; left: 9%; width: 78%; height: 70%; outline: 1px solid var(--c-lavender); background: var(--c-bg); visibility: hidden; }
.fases__frame-inhoud {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto auto;
	gap: 0.55em 0.9em;
	padding: 0.75em 0.85em 0.95em;
	overflow: hidden;
}
.fases__frame-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.45em; }
.fases__frame-nav i { width: 0.85em; height: 0.85em; margin-right: auto; border-radius: 50%; background: var(--c-lavender); }
.fases__frame-nav b { width: 1.9em; height: 0.32em; border-radius: 1em; background: rgba(255, 255, 255, 0.3); }
.fases__frame-kop { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 0.38em; }
.fases__frame-kop i { width: var(--w); height: 0.8em; border-radius: 1em; background: var(--c-lavender); }
.fases__frame-tekst { grid-column: 1; grid-row: 3; display: grid; gap: 0.32em; }
.fases__frame-tekst i { width: var(--w); height: 0.3em; border-radius: 1em; background: rgba(255, 255, 255, 0.3); }
.fases__frame-knop { grid-column: 1; grid-row: 4; width: 4.6em; height: 1.4em; border-radius: 1em; background: var(--c-lavender); }
.fases__frame-foto { grid-column: 2; grid-row: 2 / 5; border-radius: 0.45em; overflow: hidden; background: var(--fases-kaart-2); }
.fases__greep { position: absolute; width: 0.55em; height: 0.55em; border: 1px solid var(--c-lavender); background: var(--c-white); }
.fases__greep:nth-of-type(1) { top: -0.275em; left: -0.275em; }
.fases__greep:nth-of-type(2) { top: -0.275em; right: -0.275em; }
.fases__greep:nth-of-type(3) { bottom: -0.275em; left: -0.275em; }
.fases__greep:nth-of-type(4) { right: -0.275em; bottom: -0.275em; }
.fases__maat {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 0.55em;
	padding: 0.15em 0.45em;
	border-radius: 0.3em;
	background: var(--c-lavender);
	color: var(--c-ink);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.8em;
	white-space: nowrap;
	transform: translateX(-50%);
}
.fases__doek .fases__cursor svg { width: 1.35em; height: 1.35em; }

/* Terminal. */
.fases__term {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	min-height: 0;
	padding: 1.05em 1.15em;
	color: rgba(255, 255, 255, 0.82);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	line-height: 1.45;
	overflow: hidden;
}
.fases__term b { font-weight: 400; }
.fases__term-welkom { align-self: start; padding: 0.4em 0.8em; border: 1px solid #d97757; border-radius: 0.45em; white-space: nowrap; }
.fases__term-welkom b,
.fases__term-status b { color: #d97757; }
.fases__term-regel b { color: var(--c-lavender); }
.fases__caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.1em; vertical-align: -0.2em; background: var(--c-lavender); animation: fases-caret 1s steps(1) infinite; }
@keyframes fases-caret { 50% { opacity: 0; } }
.fases__term-taken { display: grid; gap: 0.3em; padding-left: 1.2em; }
.fases__taak { display: flex; align-items: baseline; gap: 0.65em; color: var(--c-mute); }
.fases__taak i { position: relative; flex: none; top: 0.12em; width: 0.85em; height: 0.85em; border: 1px solid currentColor; border-radius: 2px; }
.fases__taak.is-bezig { color: var(--c-white); }
.fases__taak.is-af { color: rgba(255, 255, 255, 0.42); }
.fases__taak.is-af span { text-decoration: line-through; }
.fases__taak.is-af i { border-color: var(--c-lavender); background: var(--c-lavender); }
.fases__taak.is-af i::after { content: ""; position: absolute; top: 0.08em; left: 0.24em; width: 0.22em; height: 0.42em; border: solid var(--c-ink); border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.fases__term-status { margin-top: auto; color: var(--c-mute); white-space: nowrap; }
.fases__term-status [data-procent] { color: var(--c-lavender); }
.fases__term-status.is-klaar b { color: var(--c-lavender); }

/* Zwevende foto's rond de vensters. */
.fases__foto {
	position: absolute;
	z-index: 1;
	width: clamp(5rem, 13cqw, 8.5rem);
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--fases-kaart-2);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
	animation: fases-zweef 7s ease-in-out infinite alternate;
}
.fases__foto-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Zonder ruimte naast de tekst: één foto rechts boven de terminal. */
.fases__foto--0 { top: calc(var(--onder) + 1.5rem); right: 6%; z-index: 2; width: clamp(4.5rem, 16cqw, 7rem); rotate: 6deg; }
.fases__foto--1,
.fases__foto--2 { display: none; }
.is-breed .fases__foto { display: block; }
.is-breed .fases__foto--0 { top: 17%; right: 15%; z-index: 2; width: clamp(5rem, 11.5cqw, 8rem); rotate: -4deg; }
.is-breed .fases__foto--1 { top: 5%; right: 4%; width: clamp(4.5rem, 10cqw, 7rem); rotate: 7deg; animation-delay: -3s; }
.is-breed .fases__foto--2 { top: 4%; right: 27%; width: clamp(4rem, 9cqw, 6.25rem); rotate: -9deg; animation-delay: -5s; }
@keyframes fases-zweef { from { translate: 0 -7px; } to { translate: 0 7px; } }
/* Smalle kaart (telefoon): de vensters breder, zonder lagenpaneel. */
@container (max-width: 37.5em) {
	.fases__venster--figma { bottom: calc(var(--rest) * 0.26); left: 5%; width: 80%; }
	.fases__venster--terminal { top: calc(var(--onder) + var(--rest) * 0.4); bottom: 3%; right: 5%; width: 78%; }
	.fases__term { gap: 0.55em; padding: 0.8em 0.95em; }
	.fases__lagen { display: none; }
	.fases__foto--0 { z-index: 3; right: 3%; width: 21%; }
}

/* Live: groeilijn op canvas; de woorden als omlijnde pillen boven hun punt (fases.js). */
.fases__punt {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding: 0 0.85rem;
	border: 1px solid var(--c-lavender);
	border-radius: var(--radius-pill);
	background: var(--fases-kaart);
	color: var(--c-lavender);
	font-size: 0.875rem;
	white-space: nowrap;
	opacity: 0;
	will-change: transform, opacity;
}

/* Tijdlijn: knoppen (de actieve breder en vult zacht mee met de voortgang),
   afspeelstreepje, liniaal. */
.fases__tijdlijn { margin-top: 10px; }
.fases__track { position: relative; display: flex; gap: 10px; }
.fases__tab {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 3.5rem;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--fases-kaart);
	color: var(--c-mute);
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1rem;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: flex-grow 0.7s var(--ease-im), background-color 0.35s ease, color 0.35s ease;
}
.fases__tab::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.06);
	transform: scaleX(var(--p, 0));
	transform-origin: 0 50%;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.fases__tab.is-active { flex-grow: 2.2; background: var(--fases-kaart-2); color: var(--c-white); }
.fases__tab.is-active::before { opacity: 1; }
.fases__tab:not(.is-active):hover { color: var(--c-white); }
.fases__tab:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.fases__kop { position: absolute; top: 0; left: 0; z-index: 1; width: 1.5px; height: calc(100% + 1.4rem); background: var(--c-lavender); pointer-events: none; will-change: transform; }
.fases__kop::before { content: ""; position: absolute; top: -1px; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--c-lavender); border-bottom: 0; }
.fases__ticks { display: flex; justify-content: space-between; margin-top: 0.85rem; padding: 0 1px; }
.fases__ticks i { width: 1px; height: 0.55rem; background: rgba(255, 255, 255, 0.22); }
@media (prefers-reduced-motion: reduce) {
	.fases__foto, .fases__caret { animation: none; }
	.fases__tab, .fases__tab::before { transition: none; }
}

/* Tablet en mobiel: intro boven de kaart; op tablet de kop links en de tekst
   met knop rechts ernaast. */
@media (max-width: 56.24em) {
	.fases { grid-template-columns: 1fr; gap: 2.25rem; }
	.fases__intro { position: static; }
	.fases__card { height: 40rem; }
	.fases__tekst { font-size: 1.125rem; }
}
@media (min-width: 37.5em) and (max-width: 56.24em) {
	.fases__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--gutter); }
	.fases__lead { max-width: none; }
}
@media (max-width: 37.49em) {
	.fases__intro { gap: 1.5rem; }
	.fases__card { height: 39rem; }
	.fases__naam { font-size: 1.875rem; }
	.fases__tekst { margin-top: 0.85rem; font-size: 1.0625rem; }
	.fases__notitie { padding: 0.5rem 0.8rem; font-size: 0.875rem; }
	.fases__punt { height: 1.75rem; padding: 0 0.7rem; font-size: 0.8125rem; }
	.fases__tab { height: 3rem; padding: 0 0.5rem; font-size: 0.9375rem; }
}

/* ---------- Blok: reviews (Google, inc/google-reviews.php; reviews.js) ----------
   Links een lichtbruin vak dat vast in beeld blijft (sticky, 10px marge
   rondom zoals de andere vlakken, 40px binnenmarge): bovenin een puntenwolk
   (canvas) die de initiaal vormt van de review die rechts in beeld is,
   onderin de tekst (24px wit, zoals de hero) en een donkere knop. Rechts de
   vier nieuwste reviews als roze vakken onder elkaar; een vaste rand bovenin
   (.reviews__rand, sticky) houdt daar altijd 10px marge en ronde hoeken,
   net als het cases-vlak. De kennisbank gebruikt dezelfde rand (.kb__rand). */
.reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--frame);
	margin: 0 var(--frame) var(--frame);
}
.reviews-leeg { margin: 2rem var(--gutter); padding: 1.5rem; border: 1px dashed var(--c-lavender); border-radius: var(--radius); color: var(--c-lavender); }
.reviews__info {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
	display: flex;
	align-items: flex-end;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	padding: 2.5rem;
	border-radius: var(--radius);
	background: var(--c-bg-licht);
	overflow: hidden;
}
.reviews__info { grid-column: 1; grid-row: 1; }
.reviews__lijst { grid-column: 2; grid-row: 1; }
/* Dezelfde rand voor het bruine vak: in dezelfde gridcel, erbovenop. */
.reviews__rand--links { grid-column: 1; grid-row: 1; align-self: start; }
.reviews__wolk { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Bord (reviews.js): twee cursors met een teamfoto, zoals in de fases. Bij
   gummen wordt de pijl een gum. Pas zichtbaar als het bord draait. */
.rv-cursor { z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.reviews.is-bord .rv-cursor { opacity: 1; }
.rv-cursor .rv-cursor__pijl { transition: opacity 0.2s ease; }
.rv-cursor .rv-cursor__gum { position: absolute; top: -0.45rem; left: -0.45rem; display: block; width: 1.7rem; height: 1.7rem; opacity: 0; transition: opacity 0.2s ease; }
.rv-cursor.is-gum .rv-cursor__pijl { opacity: 0; }
.rv-cursor.is-gum .rv-cursor__gum { opacity: 1; }
.rv-cursor__gum path:nth-child(2) { stroke: var(--c-ink); }
.reviews__info-inhoud { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.25rem; width: 100%; max-width: 36rem; pointer-events: none; }
.reviews__info-inhoud a { pointer-events: auto; }
.reviews__kicker { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--fs-small); color: var(--c-mute); }
.reviews__g { width: 1.05rem; height: 1.05rem; }
.reviews__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.125rem, 1.5rem + 1.75vw, 3.375rem); line-height: 1; letter-spacing: -0.01em; color: var(--c-white); text-wrap: balance; }
.reviews__lead { max-width: 32rem; font-size: var(--fs-lead); line-height: 1.35; color: var(--c-white); text-wrap: pretty; }
.reviews__knop { margin-top: 0.75rem; background: var(--c-bg); color: var(--c-lavender); --scribble: var(--c-ink); }
.reviews__lijst { position: relative; display: grid; gap: var(--frame); }
/* Vaste rand bovenin: 10px bruin en twee ingedraaide hoeken. In rust valt
   hij samen met de bovenkant van de eerste kaart, bij scrollen blijft hij
   bovenin staan en schuiven de kaarten eronderdoor. */
.reviews__rand,
.kb__rand,
.kanalen__rand {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 2;
	display: block;
	height: calc(var(--frame) + var(--radius));
	margin: calc(-1 * var(--frame)) 0 calc(-1 * (var(--radius) + var(--frame)));
	pointer-events: none;
	background:
		linear-gradient(var(--c-bg), var(--c-bg)) top / 100% var(--frame) no-repeat,
		radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) left var(--frame) / var(--radius) var(--radius) no-repeat,
		radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) right var(--frame) / var(--radius) var(--radius) no-repeat;
}
.reviews__kaart {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5rem;
	min-height: clamp(20rem, 55svh, 32rem);
	padding: 2.5rem;
	border-radius: var(--radius);
	background: var(--c-lavender);
	color: var(--c-ink);
}
.reviews__tekst { font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.875rem); line-height: 1.35; letter-spacing: -0.005em; text-wrap: pretty; }
.reviews__wie { display: flex; align-items: center; gap: 0.85rem; }
/* Bij iedereen een bruin rondje met een roze initiaal. */
.reviews__foto { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-bg); color: var(--c-lavender); font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; }
.reviews__naam-tijd { display: grid; gap: 0.15rem; min-width: 0; }
.reviews__naam { overflow: hidden; color: var(--c-ink); font-size: 1rem; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.reviews__naam:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.reviews__tijd { font-size: 0.875rem; color: color-mix(in srgb, var(--c-ink) 60%, transparent); }
@media (max-width: 56.24em) {
	.reviews { grid-template-columns: 1fr; }
	.reviews__info,
	.reviews__lijst { grid-column: 1; grid-row: auto; }
	.reviews__rand--links { display: none; }
	.reviews__info { position: relative; top: auto; height: min(88svh, 40rem); padding: 1.75rem; }
	.reviews__kaart { min-height: 0; gap: 1.75rem; padding: 1.75rem; }
	.reviews__tekst { font-size: 1.125rem; }
}

/* ---------- Blok: veelgestelde vragen: kop (zelfde maat als fases) ---------- */
.faq__kicker { font-size: var(--fs-small); color: var(--c-mute); }
.faq__title {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.125rem, 1.5rem + 1.75vw, 3.375rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--c-lavender);
	text-wrap: balance;
}

/* ---------- Blok: veelgestelde vragen (faq.js) ----------
   Links (sticky) kop, tekst en knoppen. Rechts de vragen van één onderwerp
   als uitklappers met een plus in een omlijnd rondje dat bij hover met de
   krabbel volloopt (open: lavendel, een min). Bovenin de lijst de eigen
   vraag (stel je vraag) met het chaticoon. Onderin het scherm de zwevende
   schakelaar met de onderwerpen (lavendel vlakje dat meeschuift). */
.faq {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 4.5rem);
	padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}
.faq__intro { position: sticky; top: calc(var(--header-top) + var(--btn-h) + 3rem); display: grid; justify-items: start; gap: 1.25rem; }
.faq__lead { max-width: 23rem; font-size: var(--fs-body); line-height: 1.5; color: var(--c-mute); text-wrap: pretty; }
.faq__btns { gap: 0.75rem; margin-top: 0.5rem; }
.faq__rechts { min-width: 0; }

/* Onderwerpen (in de zwevende schakelaar). */
.faq__tabs {
	position: relative;
	display: flex;
	gap: 0.25rem;
	width: max-content;
	max-width: 100%;
	padding: 0.3125rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-pill);
	overflow-x: auto;
	scrollbar-width: none;
	isolation: isolate;
}
.faq__tabs::-webkit-scrollbar { display: none; }
.faq__blob { position: absolute; top: 0.3125rem; bottom: 0.3125rem; left: 0; z-index: -1; width: 0; border-radius: var(--radius-pill); background: var(--c-lavender); pointer-events: none; }
.faq__tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 2.75rem;
	padding: 0 1.2rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1;
	text-transform: lowercase;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.45s var(--ease-im);
}
@media (hover: hover) and (pointer: fine) {
	.faq__tab:hover { color: var(--c-lavender); }
}
.faq__tab[aria-pressed="true"] { color: var(--c-ink); }
.faq__tab:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: -2px; }

/* Groepen: met JavaScript alleen het gekozen onderwerp (de kop alleen voor
   schermlezers), zonder alles onder elkaar met een kop. */
.js .faq__groep:not(.is-actief) { display: none; }
.faq__groep-titel { padding: 2.5rem 0 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-small); color: var(--c-mute); }
.js .faq__groep-titel { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* De vragen. */
.faq__lijst { border-top: 1px solid rgba(255, 255, 255, 0.12); }
/* Alleen verticaal knippen: het rondje dat inkomt schiet even groter dan zichzelf. */
.faq__lijst.is-wissel { overflow: visible clip; }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.faq__vraag { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; list-style: none; cursor: pointer; }
.faq__vraag::-webkit-details-marker { display: none; }
summary.faq__vraag:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 4px; border-radius: 4px; }
.faq__vraag-tekst { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; color: var(--c-white); text-wrap: pretty; transition: color 0.35s ease, transform 0.65s var(--ease-im); }
@media (hover: hover) and (pointer: fine) {
	summary.faq__vraag:hover .faq__vraag-tekst { color: var(--c-lavender); transform: translateX(0.4rem); }
}
/* De plus: een dun kruisje van twee lijnen in een omlijnd rondje. Bij hover
   loopt het rondje met de krabbel vol (buttons.js) en draait de plus een
   kwartslag met een kleine terugslag.
   Open: lavendel met een min. Vulling, rand, krabbelkleur en lijnkleur
   lopen precies tegelijk over (zelfde duur en curve), zodat er nooit een
   tussenstand is van roze met een witte rand. De lijnen blijven altijd met
   difference mengen: dicht wit (op het bruin wit, op de witte krabbel
   donker), open --c-logo-blend (op lavendel precies het donkere
   bruin), dus ook halverwege de overgang altijd leesbaar. */
.faq__plus {
	--plus-t: 0.45s var(--ease-im);
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 3.375rem;
	height: 3.375rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: transparent;
	color: var(--c-white);
	overflow: hidden;
	isolation: isolate;
	--scribble: var(--c-white);
	transition: background-color var(--plus-t), border-color var(--plus-t), color var(--plus-t);
}
.faq__plus .scribble { transition: color var(--plus-t); }
.faq__plus-lijnen { position: relative; width: 1.375rem; height: 1.375rem; color: var(--c-white); mix-blend-mode: difference; transition: transform 0.75s var(--ease-spin), color var(--plus-t); }
.faq__plus-lijnen i { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; margin-top: -0.5px; background: currentColor; transition: transform 0.6s var(--ease-im); }
.faq__plus-lijnen i + i { transform: rotate(90deg); }
.faq__vraag.is-hover .faq__plus,
summary.faq__vraag:focus-visible .faq__plus { border-color: var(--c-white); }
summary.faq__vraag:focus-visible .scribble path { stroke-width: 62; }
@media (hover: hover) and (pointer: fine) {
	.faq__item:not([open]) > summary.faq__vraag:hover .faq__plus-lijnen { transform: rotate(90deg); }
}
.faq__item[open]:not(.is-sluit) > .faq__vraag .faq__plus { background: var(--c-lavender); border-color: var(--c-lavender); color: var(--c-ink); --scribble: var(--c-lavender-dark); }
.faq__item[open]:not(.is-sluit) > .faq__vraag .faq__plus-lijnen { color: var(--c-logo-blend); }
.faq__item[open]:not(.is-sluit) > .faq__vraag .faq__plus-lijnen i + i { transform: rotate(0deg); }
.faq__antwoord { overflow: hidden; }
/* Zo breed als de vraag: de hele kolom min het rondje. */
.faq__antwoord-tekst { padding: 0 calc(3.375rem + 1.5rem) 1.75rem 0; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.faq__antwoord-tekst > * + * { margin-top: 0.85em; }
.faq__antwoord-tekst a { color: var(--c-lavender); }

/* Stel je vraag: een nieuwe regel in dezelfde opmaak, eerst om te typen. */
.faq__nieuw { position: relative; transition: border-color 0.45s var(--ease-im); }
.js .faq__nieuw:not(.is-open) { display: none; }
.faq__nieuw:focus { outline: 0; }
.faq__nieuw:not(.is-verstuurd):focus-within { border-bottom-color: var(--c-lavender); }
.faq__nieuw-kop { cursor: text; }
.faq__nieuw-invoer {
	flex: 1;
	min-width: 0;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	resize: none;
	overflow: hidden;
	outline: 0;
	color: rgba(255, 255, 255, 0.72);
	caret-color: var(--c-lavender);
	transition: color 0.7s var(--ease-im), height 0.4s var(--ease-im);
}
.faq__nieuw-invoer::placeholder { color: rgba(255, 255, 255, 0.36); opacity: 1; }
/* Onzichtbare kopie om de hoogte van het vraagvak te meten (faq.js). */
.faq__maat { position: absolute; top: 0; left: 0; height: 0 !important; visibility: hidden; pointer-events: none; transition: none; }
.faq__nieuw.is-verstuurd .faq__nieuw-invoer { color: var(--c-white); cursor: default; }
.faq__nieuw.is-verstuurd .faq__nieuw-kop { cursor: auto; }
.faq__nieuw-knop { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq__nieuw-knop:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.faq__nieuw-knop:focus-visible .scribble path { stroke-width: 62; }
/* Leeg: een kruisje (annuleren); met tekst: lavendel met een pijl omhoog;
   verstuurd: open zoals de andere vragen (een min), ingeklapt (is-toe) weer
   een plus. Kleuren lopen tegelijk over, net als bij de andere rondjes. */
.faq__nieuw .faq__plus-lijnen { transform: rotate(45deg); transition: transform 0.75s var(--ease-spin), opacity 0.3s ease, color var(--plus-t); }
.faq__nieuw-knop .faq__pijl { position: absolute; inset: 0; width: 1.375rem; height: 1.375rem; margin: auto; color: var(--c-ink); opacity: 0; transform: translateY(70%); transition: transform 0.6s var(--ease-im), opacity 0.35s ease; }
.faq__nieuw.has-tekst .faq__nieuw-knop,
.faq__nieuw.is-verstuurd:not(.is-toe) .faq__nieuw-knop { background: var(--c-lavender); border-color: var(--c-lavender); color: var(--c-ink); --scribble: var(--c-lavender-dark); }
.faq__nieuw.has-tekst .faq__plus-lijnen { opacity: 0; transform: rotate(135deg) scale(0.4); }
.faq__nieuw.has-tekst .faq__nieuw-knop .faq__pijl { opacity: 1; transform: none; }
.faq__nieuw.is-verstuurd .faq__nieuw-knop .faq__pijl { opacity: 0; transform: translateY(-80%); }
.faq__nieuw.is-verstuurd .faq__plus-lijnen { opacity: 1; transform: none; }
.faq__nieuw.is-verstuurd:not(.is-toe) .faq__plus-lijnen { color: var(--c-logo-blend); }
.faq__nieuw.is-verstuurd:not(.is-toe) .faq__plus-lijnen i + i { transform: rotate(0deg); }

/* Het gesprekje eronder: dezelfde berichtjes als in het let's work-paneel
   (lwchat__bubbel en lwchat__typt), alleen een tint lichter omdat ze hier op
   het bruin van de pagina staan; het staartje maskeert met dat bruin. De
   hoogte volgt de binnenkant met een veer (faq.js); alleen verticaal
   knippen, zodat de staartjes en het opspringen van de berichtjes vrij zijn. */
.faq__nieuw-body { display: none; overflow: visible clip; }
.faq__nieuw.is-verstuurd .faq__nieuw-body { display: block; }
.faq__nieuw.is-ingeklapt .faq__nieuw-body { visibility: hidden; }
.faq__nieuw-binnen { display: flex; flex-direction: column; padding-bottom: 1.75rem; }
.faq__chat { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0.65rem; }
.faq__chat .lwchat__bubbel--in,
.faq__chat .lwchat__typt { --bubbel: var(--c-bg-licht); }
.faq__chat .lwchat__typt { margin-top: 0; }
.faq__chat .lwchat__bubbel.is-laatst::after,
.faq__chat .lwchat__typt::after { background: var(--c-bg); }
.faq__chat .lwchat__bubbel--uit { margin-right: 0.65rem; }
/* Het e-mailveld: dezelfde invoerbalk als in het let's work-paneel (rond
   omlijnd veld, rond lavendel verstuurknopje ernaast, zoals in Messenger),
   rechts onder het gesprek, aan jouw kant. */
.faq__kaart { display: none; align-self: flex-end; width: min(100%, 30rem); margin: 0.6rem 0.65rem 0 0; }
.faq__nieuw.is-mail .faq__kaart { display: block; }
.faq__kaart .lwchat__veld { caret-color: var(--c-lavender); }
.faq__mail-fout { margin-top: 0.5rem; padding-left: 1.05rem; font-size: var(--fs-small); color: var(--c-lavender); }
.faq__mail-fout[hidden] { display: none; }
/* Het formulier zelf: verstopt (de invoer hierboven vult het), zonder
   JavaScript gewoon zichtbaar. */
.js .faq__gf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; pointer-events: none; }
html:not(.js) .faq__nieuw-kop,
html:not(.js) .faq__nieuw-body { display: none; }
html:not(.js) .faq__gf { padding: 1.5rem 0; }

/* De zwevende schakelaar (in de body, faq.js): smal; past niet alles, dan
   schuift hij mee naar het gekozen onderwerp en vervagen de randen. */
.faq-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 35;
	display: flex;
	width: max-content;
	max-width: min(34rem, calc(100vw - 2 * var(--gutter)));
	margin-inline: auto;
	padding: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--c-panel);
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
	transform-origin: 50% 100%;
}
.faq-dock[hidden] { display: none; }
.faq-dock .faq__tabs {
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	--fl: 0;
	--fr: 0;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, calc(1 - var(--fl))) 0, #000 2rem, #000 calc(100% - 2rem), rgba(0, 0, 0, calc(1 - var(--fr))) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, calc(1 - var(--fl))) 0, #000 2rem, #000 calc(100% - 2rem), rgba(0, 0, 0, calc(1 - var(--fr))) 100%);
}
.faq-dock .faq__blob { top: 0; bottom: 0; }

@media (max-width: 56.24em) {
	.faq { grid-template-columns: 1fr; }
	.faq__intro { position: static; }
	.faq__antwoord-tekst { padding-right: 0; }
}
@media (max-width: 47.99em) {
	.faq__vraag { gap: 1rem; padding: 1.2rem 0; }
	.faq__plus { width: 2.875rem; height: 2.875rem; }
	.faq__plus-lijnen { width: 1.125rem; height: 1.125rem; }
	.faq-dock { padding: 0.3125rem; }
	.faq__antwoord-tekst { font-size: 1rem; }
}

/* ---------- Blok: afsluiter (afsluiter.js) ----------
   Gekaderd lavendel vlak (10px marge, ronde hoeken): links de kop, rechts
   het begin van het let's work-gesprek (berichtjes en antwoordpillen). */
.afsluiter { padding: 0 var(--frame) var(--frame); }
.afsluiter__vlak {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 6rem);
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	padding: clamp(6rem, 14vh, 9rem) clamp(1.5rem, 5vw, 5rem);
	border-radius: var(--radius);
	background: var(--c-lavender);
	color: var(--c-ink);
}
.afsluiter__kicker { margin-bottom: 1rem; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-ink) 65%, transparent); }
.afsluiter__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; }
.afsluiter__lead { max-width: 28rem; margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.4; color: color-mix(in srgb, var(--c-ink) 80%, transparent); }
.afsluiter__lead a { color: var(--c-ink); }
.afsluiter__chat { justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; max-width: 30rem; }
.afsluiter__bubbel,
.afsluiter__typt {
	position: relative;
	z-index: 0;
	max-width: 90%;
	padding: 0.7rem 1.05rem;
	border-radius: 1.15rem;
	background: var(--c-bg);
	color: var(--c-white);
	font-size: 1.0625rem;
	line-height: 1.38;
}
/* Staartje aan het laatste berichtje (zoals in het let's work-paneel). */
.afsluiter__bubbel:last-of-type::before,
.afsluiter__bubbel:last-of-type::after,
.afsluiter__typt::before,
.afsluiter__typt::after { content: ""; position: absolute; bottom: 0; z-index: -1; height: 1.2rem; }
.afsluiter__bubbel:last-of-type::before,
.afsluiter__typt::before { left: -0.45rem; width: 1.2rem; border-bottom-right-radius: 0.95rem; background: var(--c-bg); }
.afsluiter__bubbel:last-of-type::after,
.afsluiter__typt::after { left: -0.65rem; width: 0.65rem; border-bottom-right-radius: 0.65rem; background: var(--c-lavender); }
.afsluiter__bubbel + .afsluiter__bubbel { margin-top: -0.2rem; }
/* Typende stipjes op de plek van het volgende berichtje (afsluiter.js). */
.afsluiter__chat { position: relative; }
.afsluiter__typt { position: absolute; left: 0; display: flex; gap: 0.3rem; padding: 0.85rem 1rem; }
.afsluiter__typt[hidden] { display: none; }
.afsluiter__typt i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); animation: lw-typt 1.2s ease-in-out infinite; }
.afsluiter__typt i:nth-child(2) { animation-delay: 0.16s; }
.afsluiter__typt i:nth-child(3) { animation-delay: 0.32s; }
.afsluiter__keuzes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.afsluiter__keuze {
	display: inline-flex;
	align-items: center;
	min-height: 2.6rem;
	padding: 0.5rem 1.05rem;
	border: 1px solid var(--c-ink);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.3s var(--ease-im), color 0.3s var(--ease-im), transform 0.3s var(--ease-im);
}
@media (hover: hover) {
	.afsluiter__keuze:hover { background: var(--c-ink); color: var(--c-lavender); }
}
.afsluiter__keuze:active { transform: scale(0.96); }
.afsluiter__keuze:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
@media (max-width: 56.24em) {
	.afsluiter__vlak { grid-template-columns: 1fr; min-height: 0; padding: clamp(4.5rem, 12vh, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vh, 4rem); }
	.afsluiter__chat { justify-self: start; }
}
@media (max-width: 47.99em) {
	.afsluiter__bubbel { font-size: 1rem; }
	.afsluiter__keuze { min-height: 2.4rem; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
}

/* ---------- Footer (footer.js) ----------
   Opbouw naar wux.nl (op verzoek): losse vlakken met overal 10px marge en
   ronde hoeken, net als de andere gekaderde blokken. Lichtbruin links (foto,
   grote regel, tekst), daaronder de contactgegevens als eigen blokjes in een
   andere tint, roze rechts (het begin van het let's work-gesprek). Daarna de
   onderlaag: aan het eind schaalt de pagina als een kaart kleiner en naar
   boven weg (footer.js) en ligt eronder het donkere vlak met de kolommen,
   de partners, een balk en het beeldmerk dat zich als één lijn schrijft. */
.site-footer {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-areas: "licht roze" "contact roze";
	gap: var(--frame);
	padding: 0 var(--frame) var(--frame);
}
.site-footer--zonder-roze { grid-template-columns: minmax(0, 1fr); grid-template-areas: "licht" "contact"; }
.site-footer__vak { --vak-p: clamp(1.75rem, 3.6vw, 3.5rem); position: relative; padding: var(--vak-p); border-radius: var(--radius); overflow: hidden; }

/* Lichtbruin: links een staande foto, rechtsonder daarnaast de regel en de
   tekst (op verzoek; de regel iets kleiner dan eerst). */
.site-footer__vak--licht { grid-area: licht; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(18rem, 42vh, 26rem); background: var(--c-bg-licht); }
.site-footer__vak--licht.heeft-foto { display: grid; grid-template-columns: minmax(8rem, 0.62fr) minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 3vw, 2.75rem); }
.site-footer__foto { align-self: stretch; min-height: 14rem; overflow: hidden; border-radius: calc(var(--radius) * 0.6); }
.site-footer__foto-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-footer__intro { display: grid; justify-items: start; gap: 1.1rem; }
.site-footer__kop { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--c-lavender); text-wrap: balance; }
.site-footer__tekst { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--c-white); text-wrap: pretty; }

/* Contactgegevens (zoals wux.nl, maar elk een eigen blokje in een andere
   tint, op verzoek): label, waarde en een rond pijltje dat bij hover met de
   krabbel volloopt (zoals in het taalpaneel). Geen lijnen ertussen. */
.site-footer__contact { grid-area: contact; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.site-footer__contact li { display: flex; }
.site-footer__rij { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 6.5rem; padding: 1.4rem clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--radius); background: var(--c-bg-tegel); color: var(--c-white); text-decoration: none; }
.site-footer__rij:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
.site-footer__rij:focus-visible .scribble path { stroke-width: 62; }
.site-footer__rij-tekst { display: grid; gap: 0.25rem; min-width: 0; }
.site-footer__rij-label { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.2; transition: color 0.35s ease; }
.site-footer__rij-waarde { font-size: 0.9375rem; line-height: 1.35; color: var(--c-mute); overflow-wrap: anywhere; }
.site-footer__pijl {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	--scribble: var(--c-white);
	transition: border-color 0.45s var(--ease-im);
}
.site-footer__pijl svg { position: relative; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
.site-footer__rij.is-hover .site-footer__pijl { border-color: var(--c-white); }
@media (hover: hover) and (pointer: fine) {
	.site-footer__rij:hover .site-footer__rij-label { color: var(--c-lavender); }
}

/* Roze: het begin van het let's work-gesprek (de afsluiter-onderdelen). */
.site-footer__vak--roze { grid-area: roze; display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; background: var(--c-lavender); color: var(--c-ink); }
.site-footer__cta { display: grid; justify-items: start; gap: 0.9rem; }
.site-footer__cta-kicker { font-size: var(--fs-small); color: color-mix(in srgb, var(--c-ink) 65%, transparent); }
.site-footer__cta-kop { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--c-ink); text-wrap: balance; }
.site-footer__cta-tekst { max-width: 26rem; font-size: 1.0625rem; line-height: 1.5; color: color-mix(in srgb, var(--c-ink) 80%, transparent); }
.site-footer__vak--roze .afsluiter__chat { max-width: none; margin-top: auto; }
.site-footer__vak--roze .afsluiter__keuzes { margin-top: 1rem; }

/* De onderlaag: ligt vast onder de pagina (z-index 0, onder het menu en de
   panelen); aan het eind schuift de pagina eraf en schaalt hij als een kaart
   kleiner en naar boven (footer.js). De ruimte na de pagina is zo hoog als de
   inhoud van de onderlaag. Zonder JavaScript gewoon in de flow. */
.onderlaag { position: fixed; inset: 0; z-index: 0; display: flex; align-items: flex-end; background: var(--c-panel); }
html:not(.js) .onderlaag { position: static; }
.onderlaag-ruimte { height: var(--onderlaag-h, 0px); }
.onderlaag__inhoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); width: 100%; padding: clamp(2rem, 5vh, 3.5rem) var(--gutter) var(--gutter); }
.onderlaag__links { display: grid; align-content: end; gap: clamp(1.75rem, 4vh, 2.75rem); min-width: 0; }
.onderlaag__merk { display: flex; justify-content: flex-end; color: var(--c-lavender); line-height: 0; }
/* Desktop: het beeldmerk krijgt precies zijn eigen breedte, de linkerkant de
   rest (minstens 30rem), zodat de rij pillen met naar boven op één regel past. */
@media (min-width: 64em) {
	.onderlaag__inhoud { grid-template-columns: minmax(min(30rem, 100%), 1fr) minmax(0, auto); column-gap: clamp(2rem, 3vw, 3rem); }
}
.onderlaag__mark { display: block; width: auto; height: min(46svh, 27rem); max-width: 100%; overflow: visible; }
/* Vanaf 80em houdt de linkerkant altijd plek voor de hele rij pillen (45rem).
   Is het scherm daarvoor net te smal (rond 1280), dan wordt het beeldmerk iets
   kleiner (breedte bepaalt, hoogte volgt de viewBox van 60 x 42) in plaats van
   dat "naar boven" naar de volgende regel valt. */
@media (min-width: 80em) {
	.onderlaag__inhoud { grid-template-columns: minmax(45rem, 1fr) minmax(0, auto); }
	.onderlaag__mark { width: calc(min(46svh, 27rem) * 60 / 42); height: auto; }
}
/* De pagina als kaart (footer.js zet transform en clip-path op de container):
   hij dimt mee, net als bij het menu. */
.site-main::after { content: ""; position: absolute; inset: 0; z-index: 90; display: none; background: #000; opacity: var(--onder-dim, 0); pointer-events: none; }
.is-onder .site-main::after { display: block; }
.site-footer__kolommen { display: flex; flex-wrap: wrap; gap: 2.5rem clamp(2.5rem, 6vw, 6rem); }
.site-footer__kolom { min-width: 0; }
.site-footer__titel { margin-bottom: 1rem; font-size: var(--fs-small); color: var(--c-mute); }
.site-footer__kolom ul { display: grid; justify-items: start; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.site-footer__link { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.375rem); line-height: 1.4; color: var(--c-white); text-decoration: none; white-space: nowrap; transition: color 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
	.site-footer__link:hover { color: var(--c-lavender); }
}
/* Eén rij pillen, allemaal even hoog (--fp-h): partners, Mijn omgeving, de
   socials als rondjes en de roze knop naar boven. */
.site-footer__partners { --fp-h: 2.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__partners > li { display: flex; }
.site-footer__partner { display: inline-flex; align-items: center; gap: 0.55rem; height: var(--fp-h); padding: 0 0.95rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); color: rgba(255, 255, 255, 0.75); font-family: inherit; font-weight: 400; font-size: 0.8125rem; line-height: 1; white-space: nowrap; }
/* Past de hele rij niet naast het beeldmerk (sinds de derde partner, Claude,
   tot ongeveer 1640 breed), dan bewust twee regels: eerst de partners, dan
   Mijn omgeving, de socials en naar boven, in plaats van een willekeurige
   afbreking. */
.site-footer__breek { display: none; }
@media (max-width: 102.5em) {
	.site-footer__partners > .site-footer__breek { display: block; flex-basis: 100%; height: 0; }
}
/* Niet de krabbel-svg van Mijn omgeving raken. */
.site-footer__partner > svg,
.site-footer__partner .pill__label > svg { width: 1rem; height: 1rem; color: var(--c-white); }
.site-footer__partner b { font-weight: 600; color: var(--c-white); }
/* Mijn omgeving als badge naast de partners: een link, dus bij hover de
   krabbel (wit, de tekst keert om) en een witte rand. */
.site-footer__partner--link { --scribble: var(--c-white); text-decoration: none; }
.site-footer__partner--link .pill__label { display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1; }
.site-footer__partner--link.is-hover,
.site-footer__partner--link:focus-visible { border-color: var(--c-white); color: var(--c-white); }
/* Badges met een icoon in vaste kleuren (Google-cijfer, groen gehost): geen
   difference, anders verkleurt het icoon zodra de krabbel de pil wit vult. De
   tekst wordt donker zodra de krabbel eronder ligt (zoals de omlijnde knoppen op
   een lichte ondergrond). Het blaadje is altijd groen (--c-groen). */
.site-footer__partner--vast .pill__label { mix-blend-mode: normal; transition: color 0.3s ease 0.32s; }
.site-footer__partner--vast.is-hover .pill__label,
.site-footer__partner--vast:focus-visible .pill__label,
.site-footer__partner--vast.is-hover b,
.site-footer__partner--vast:focus-visible b { color: var(--c-bg); transition: color 0.3s ease 0.32s; }
.site-footer__partner--groen .pill__label > svg { color: var(--c-groen); }
.site-footer__onder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; font-size: var(--fs-small); color: var(--c-mute); }
.site-footer__copy { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.site-footer__jur { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
/* Socials: omlijnde witte rondjes met het merkicoon; bij hover vult de krabbel
   ze wit en keert het icoon om (difference, zoals de tekst in de pillen). */
.site-footer__social { --btn-h: var(--fp-h); width: var(--btn-h); padding: 0; }
.site-footer__social .pill__label { display: grid; place-items: center; }
/* Alleen het icoon: .site-footer__social svg zou ook de krabbel-svg krimpen. */
.site-footer__social .pill__label svg { width: 0.875rem; height: 0.875rem; }
/* Naar boven: even hoog als de partnerpillen, maar roze (op verzoek). */
.site-footer__boven-knop { --btn-h: var(--fp-h); --btn-px: 0.95rem; border-color: var(--c-lavender); background: var(--c-lavender); color: var(--c-ink); font-size: 0.8125rem; --scribble: var(--c-lavender-dark); }
.site-footer__boven-knop .pill__label { mix-blend-mode: normal; }

@media (max-width: 68em) {
	.site-footer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "licht" "contact" "roze"; }
	.site-footer__vak--licht { min-height: 0; }
}
@media (max-width: 47.99em) {
	.site-footer__contact { grid-template-columns: minmax(0, 1fr); }
	.site-footer__vak--licht.heeft-foto { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
	.site-footer__foto { min-height: 12rem; }
	.onderlaag__inhoud { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.onderlaag__merk { order: -1; justify-content: flex-start; }
	.onderlaag__mark { height: 6.5rem; }
	.site-footer__kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; width: 100%; }
	.site-footer__link { font-size: 1.0625rem; white-space: normal; }
	.site-footer__pijl { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Blok: roze vlak (placeholder) ----------
   Lavendel, gekaderd zoals de hero (10px marge, ronde hoeken), als plek voor
   een volgend blok. De ballen van Werk landen erbovenop: het vlak sluit
   direct aan op de bodem van Werk, de bruine pagina daarboven vormt zelf de
   marge. */
.vlak {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--frame));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--frame));
	margin: 0 var(--frame) var(--frame);
	border-radius: var(--radius);
	background: var(--c-lavender);
}

/* Header boven een lavendel vlak (lavendel.js): elk header-onderdeel heeft
   een tweeling in de lavendel stijl die precies vanaf de rand van het vlak
   zichtbaar is (clip-path), zodat de kleur met de rand meeschuift, net als
   bij het logo. Alleen bruin en lavendel, geen tussenkleuren.
   - let's work: bruin met lavendel tekst.
   - menu- en taalpil: bruine rand en tekst; de krabbel vult bruin en de
     tekst keert precies op de rand om naar lavendel. Truc: binnen de
     (geïsoleerde) pil een lavendel ondergrond gelijk aan het vlak, tekst
     --c-logo-blend met difference: op lavendel geeft dat bruin, op bruin lavendel.
     Een lavendel schaduwrand dekt de rand van het origineel eronder af.
   - het logo (difference met --c-logo-blend) wordt op lavendel vanzelf bruin. */
.header-twins { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
.header-twins .is-twin { pointer-events: none; }
.site-header__ctas.is-twin .btn--primair { background: var(--c-op-accent); color: var(--c-lavender); --scribble: var(--c-ink); }
/* Echt omlijnd (geen vulling): het witte origineel eronder wordt op dat stuk
   gemaskeerd (lavendel.js). Tekst bruin; bij hover vult de krabbel bruin en
   wordt de tekst lavendel, zoals de omlijnde knoppen op een lichte ondergrond. */
.site-header__lang.is-twin,
.site-header__menu.is-twin,
.site-header__terug.is-twin,
.site-header__uit.is-twin {
	mix-blend-mode: normal;
	background: transparent;
	border-color: var(--c-op-accent);
	color: var(--c-op-accent);
	--scribble: var(--c-op-accent);
}
.site-header__lang.is-twin .pill__label,
.site-header__menu.is-twin .pill__label,
.site-header__terug.is-twin .pill__label,
.site-header__uit.is-twin .pill__label { mix-blend-mode: normal; transition: color 0.3s ease 0.32s; }
.site-header__lang.is-twin.is-hover,
.site-header__menu.is-twin.is-hover,
.site-header__terug.is-twin.is-hover,
.site-header__uit.is-twin.is-hover { color: var(--c-lavender); }

/* ---------- Let's work (letswork.js) ----------
   Net als het taalpaneel: rechts onder de pagina, die als kaart naar links
   schuift; de let's work-knop blijft staan en wordt "sluiten". In het paneel
   een chatgesprek in de stijl van Apple Berichten (op verzoek): de vragen
   van het Gravity Forms-formulier komen als berichtjes (eerst typende
   stipjes), antwoorden kies je met pillen onderin of typ je, de laatste stap
   is het formulier als kaartje in het gesprek. Hun berichtjes bruin, de
   jouwe lavendel, met het staartje aan het laatste berichtje van een groep. */
.lwpanel {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: var(--c-panel);
	visibility: hidden;
}
.lw-open .lwpanel { visibility: visible; }
.lwpanel-catch {
	position: fixed;
	top: 0;
	right: var(--lw-panel-w);
	bottom: 0;
	left: 0;
	z-index: 50;
	visibility: hidden;
	cursor: pointer;
}
.lw-open .lwpanel-catch { visibility: visible; }
.lw-anim .site-main,
.lw-anim [data-header-item] { transition: opacity 0.4s ease; }
.lw-dim .site-main,
.lw-dim [data-header-item]:not(.site-header__ctas) { opacity: 0.7; }
.lw-open .site-header__ctas { z-index: 55; }
.site-header__cta--lw .morph__dots,
.site-header__cta--lw .morph__close { width: 0; display: flex; justify-content: center; }

.lwpanel__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--lw-panel-w);
	background: var(--c-panel);
	overflow: hidden;
}
.lwpanel__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--header-top) 0 var(--gutter);
}
.lwchat [hidden] { display: none !important; }

/* Kop van het gesprek: beeldmerk, naam en beschikbaarheid (opent het
   profiel), de omlijnde knop "bekijk contactgegevens"; rechts ruimte voor
   de pil "sluiten" uit de header (--lw-pil, letswork.js). */
.lwchat__kop { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: var(--btn-h); padding: 0 calc(var(--gutter) + var(--lw-pil, 7.5rem) + 0.75rem) 0 var(--gutter); }
.lw-no-pill .lwchat__kop { padding-right: var(--gutter); }
.lwchat__wie { display: flex; align-items: center; gap: 0.8rem; min-width: 0; margin-right: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lwchat__wie:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 4px; border-radius: var(--radius); }
.lwchat__avatar { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-bg); color: var(--c-lavender); }
.lwchat__mark { display: block; width: 58%; height: auto; }
.lwchat__naam-status { display: grid; gap: 0.15rem; min-width: 0; }
.lwchat__naam { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; color: var(--c-white); }
.lwchat__status { font-size: 0.8125rem; line-height: 1.2; color: var(--c-mute); }
.lwchat__contact-knop { flex: none; }
.lwchat__contact-i { display: none; }
.lwchat__contact-i svg { width: 1.2rem; height: 1.2rem; }
/* Alleen als het paneel niet vanuit de header-knop opende (mobiel, of een
   link naar #lets-work elders): dan is er geen pil die "sluiten" wordt. */
.lwpanel__close {
	display: none;
	place-items: center;
	width: var(--btn-h);
	height: var(--btn-h);
	margin-left: auto;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--c-white) 40%, transparent);
	border-radius: 50%;
	background: none;
	color: var(--c-white);
	cursor: pointer;
	transition: border-color 0.3s, transform 0.6s var(--ease-im);
}
.lwpanel__close svg { width: 1.1rem; height: 1.1rem; }
.lwpanel__close:hover { border-color: var(--c-lavender); transform: rotate(90deg); }
.lw-no-pill .lwpanel__close { display: grid; }
/* Naast de contactknop (niet met de vrije ruimte ertussen; de naam duwt ze al naar rechts). */
.lwchat__contact-knop ~ .lwpanel__close { margin-left: 0; }
.lwpanel__progress { position: relative; flex: none; height: 2px; margin: 1rem var(--gutter) 0; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--c-white) 10%, transparent); }
.lwpanel__bar { position: absolute; inset: 0; background: var(--c-lavender); transform: scaleX(0); transform-origin: 0 50%; }

/* Het gesprek: scrolt zelf; weinig berichtjes staan onderaan. Boven en
   onder vervaagt het naar de rand (masker), zodat berichtjes zacht onder de
   balk door en van onderen in beeld schuiven. */
.lwchat__draad {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 1.25rem var(--gutter) 1.75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, var(--c-panel) 1.25rem, var(--c-panel) calc(100% - 1.25rem), transparent);
	mask-image: linear-gradient(to bottom, transparent, var(--c-panel) 1.25rem, var(--c-panel) calc(100% - 1.25rem), transparent);
}
.lwchat__draad::-webkit-scrollbar { display: none; }
/* De stroom (berichtjes, stipjes en het kaartje) schuift als geheel zacht
   mee als er iets bijkomt of weggaat (letswork.js, schuif()). */
.lwchat__stroom { display: flex; flex-direction: column; margin-top: auto; }
.lwchat__berichten { display: flex; flex-direction: column; gap: 0.6rem; }
.lwchat__systeem { align-self: center; margin-bottom: 0.6rem; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--c-mute); text-align: center; }
.lwchat__bubbel,
.lwchat__typt {
	position: relative;
	z-index: 0;
	max-width: min(80%, 26rem);
	padding: 0.6rem 0.95rem 0.65rem;
	border: 0;
	border-radius: 1.15rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.38;
	text-align: left;
	white-space: pre-line;
	overflow-wrap: anywhere;
}
.lwchat__bubbel--in,
.lwchat__typt { --bubbel: var(--c-bg); align-self: flex-start; background: var(--bubbel); color: var(--c-white); }
.lwchat__bubbel--uit { --bubbel: var(--c-lavender); align-self: flex-end; background: var(--bubbel); color: var(--c-ink); }
.lwchat__bubbel.is-vervolg { margin-top: -0.4rem; }
.lwchat__bubbel--klein { color: color-mix(in srgb, var(--c-white) 72%, transparent); font-size: 0.9375rem; }
.lwchat__bubbel--stil { --bubbel: transparent; border: 1px solid color-mix(in srgb, var(--c-lavender) 60%, transparent); color: var(--c-lavender); font-size: 0.9375rem; }
/* Je eigen antwoord is aan te tikken: terug naar die vraag. */
button.lwchat__bubbel { cursor: pointer; transition: filter 0.25s ease; }
button.lwchat__bubbel:hover { filter: brightness(1.06); }
button.lwchat__bubbel:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
/* Het staartje (techniek van Apple Berichten): een vlak in de kleur van het
   berichtje met daaroverheen een vlak in de kleur van het paneel. */
.lwchat__bubbel.is-laatst::before,
.lwchat__bubbel.is-laatst::after,
.lwchat__typt::before,
.lwchat__typt::after { content: ""; position: absolute; bottom: 0; z-index: -1; height: 1.2rem; }
.lwchat__bubbel--in.is-laatst::before,
.lwchat__typt::before { left: -0.45rem; width: 1.2rem; border-bottom-right-radius: 0.95rem; background: var(--bubbel); }
.lwchat__bubbel--in.is-laatst::after,
.lwchat__typt::after { left: -0.65rem; width: 0.65rem; border-bottom-right-radius: 0.65rem; background: var(--c-panel); }
.lwchat__bubbel--uit.is-laatst::before { right: -0.45rem; width: 1.2rem; border-bottom-left-radius: 0.95rem; background: var(--bubbel); }
.lwchat__bubbel--uit.is-laatst::after { right: -0.65rem; width: 0.65rem; border-bottom-left-radius: 0.65rem; background: var(--c-panel); }
.lwchat__bubbel--stil::before,
.lwchat__bubbel--stil::after { display: none; }
.lwchat__vink { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.45em; vertical-align: -0.2em; color: var(--c-lavender); }
/* Typende stipjes (rustig, op verzoek). */
.lwchat__typt { display: flex; gap: 0.3rem; margin-top: 0.6rem; padding: 0.85rem 1rem; }
.lwchat__typt i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 55%, transparent); animation: lw-typt 1.4s ease-in-out infinite; }
.lwchat__typt i:nth-child(2) { animation-delay: 0.18s; }
.lwchat__typt i:nth-child(3) { animation-delay: 0.36s; }
@keyframes lw-typt {
	0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-0.2rem); }
}

/* Onderin: pillen, tekstvak met pijltje, of de verstuurknop. Tussen twee
   vragen blijft de invoer even hoog staan en groeit of krimpt hij zacht
   naar de volgende (letswork.js); wat er stond vervaagt als kopie
   (lwchat__spook). */
.lwchat__invoer { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 1.5rem var(--gutter) 0; border-top: 1px solid color-mix(in srgb, var(--c-white) 6%, transparent); }
.lwchat__spook { position: absolute; top: 0; left: 0; width: 100%; display: grid; gap: 0.6rem; padding: inherit; pointer-events: none; }
.lwchat__keuzes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.lwchat__keuzes:empty { display: none; }
.lwchat__keuze {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--c-white) 28%, transparent);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--c-white);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.3s var(--ease-im), border-color 0.3s var(--ease-im), color 0.3s var(--ease-im), transform 0.3s var(--ease-im);
}
@media (hover: hover) {
	.lwchat__keuze:hover { border-color: var(--c-lavender); }
}
.lwchat__keuze:active { transform: scale(0.96); }
.lwchat__keuze[aria-pressed="true"] { border-color: var(--c-lavender); background: var(--c-lavender); color: var(--c-ink); }
.lwchat__keuze:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
/* Tekstvak: een rond, gevuld veld zoals het zoekveld van de kennisbank, met
   rechts het pijltje. Is het niet verplicht en nog leeg, dan staat daar de
   pil "overslaan" (in de stijl van de pillen van de site, met krabbel);
   zodra je typt schuift hij weg en komt het pijltje (letswork.js zet
   kan-overslaan en heeft-tekst). */
.lwchat__rij { --lw-rij-h: 3rem; display: flex; align-items: flex-end; gap: 0.5rem; }
.lwchat__veld {
	flex: 1;
	width: 0;
	min-width: 0;
	height: var(--lw-rij-h);
	max-height: 10rem;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: calc(var(--lw-rij-h) / 2);
	background: var(--c-bg);
	box-shadow: inset 0 0 0 1px transparent;
	color: var(--c-white);
	caret-color: var(--c-lavender);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	resize: none;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.lwchat__veld::placeholder { color: color-mix(in srgb, var(--c-white) 42%, transparent); }
@media (hover: hover) {
	.lwchat__veld:hover { background: color-mix(in srgb, var(--c-bg) 55%, var(--c-bg-licht)); }
}
.lwchat__veld:focus { outline: none; background: var(--c-bg-licht); box-shadow: inset 0 0 0 1px var(--c-lavender), 0 0 0 4px color-mix(in srgb, var(--c-lavender) 14%, transparent); }
.lwchat__stuur {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--lw-rij-h, 2.75rem);
	max-width: var(--lw-rij-h, 2.75rem);
	height: var(--lw-rij-h, 2.75rem);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-lavender);
	color: var(--c-ink);
	cursor: pointer;
	transition: opacity 0.3s ease, transform 0.3s var(--ease-im);
}
.lwchat__stuur svg { width: 1.15rem; height: 1.15rem; }
.lwchat__stuur:active { transform: scale(0.92); }
.lwchat__stuur:disabled { opacity: 0.3; cursor: default; }
.lwchat__stuur:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
.lwchat__overslaan { flex: none; height: var(--lw-rij-h); max-width: 14rem; padding: 0 1.25rem; text-transform: lowercase; }
.lwchat__overslaan .pill__label { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Alleen het icoon in het label, niet de svg van de krabbel. */
.lwchat__overslaan .pill__label svg { flex: none; width: 1.05rem; height: 1.05rem; }
.lwchat__overslaan,
.lwchat__rij .lwchat__stuur { transition: max-width 0.6s var(--ease-im), padding 0.6s var(--ease-im), margin 0.6s var(--ease-im), border-color 0.45s var(--ease-im), color 0.45s var(--ease-im), opacity 0.4s ease 0.12s, transform 0.6s var(--ease-im), visibility 0s; }
.lwchat__rij.heeft-tekst .lwchat__overslaan,
.lwchat__rij.kan-overslaan:not(.heeft-tekst) .lwchat__stuur {
	max-width: 0;
	margin-left: -0.5rem;
	padding-inline: 0;
	border-color: transparent;
	opacity: 0;
	transform: scale(0.7);
	visibility: hidden;
	pointer-events: none;
	transition: max-width 0.6s var(--ease-im), padding 0.6s var(--ease-im), margin 0.6s var(--ease-im), border-color 0.3s ease, opacity 0.25s ease, transform 0.6s var(--ease-im), visibility 0s 0.6s;
}
.lwchat__verstuur { justify-self: end; min-width: 11rem; }
.lwchat__verstuur .morph__dots { width: 0; display: flex; justify-content: center; }
.lwchat__verstuur .btn__label { text-transform: lowercase; }

/* Profiel (zoals in WhatsApp): schuift als scherm over het gesprek. De
   inhoud scrolt onder de balk door; daar vervaagt hij naar boven toe
   (progressive blur: vijf lagen met oplopende backdrop-blur en een
   verloopmasker, plus een zacht donker verloop), dus geen harde rand. Let
   op: geen opacity < 1 op een voorouder van de blur, dan ziet
   backdrop-filter niets meer. */
.lwpanel__inner { position: relative; }
.lwprofiel { position: absolute; inset: 0; z-index: 5; background: var(--c-panel); }
.lwprofiel__balk {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	height: calc(var(--header-top) + var(--btn-h));
	padding: var(--header-top) calc(var(--gutter) + var(--lw-pil, 7.5rem) + 0.75rem) 0 var(--gutter);
}
.lw-no-pill .lwprofiel__balk { padding-right: var(--gutter); }
.lwprofiel__terug .pill__label { display: inline-flex; align-items: center; gap: 0.45rem; }
/* Alleen de chevron in het label, niet de svg van de krabbel. */
.lwprofiel__terug .pill__label svg { width: 1.05rem; height: 1.05rem; margin-left: -0.3rem; }
.lwprofiel__blur {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: calc(var(--header-top) + var(--btn-h) + 3rem);
	overflow: hidden;
	isolation: isolate;
	contain: paint;
	pointer-events: none;
}
.lwprofiel__blur i { position: absolute; inset: 0; }
.lwprofiel__blur i:nth-child(1) { -webkit-backdrop-filter: blur(0.09375rem); backdrop-filter: blur(0.09375rem); -webkit-mask: linear-gradient(to top, #0000 50%, #000 62.5% 75%, #0000 87.5%); mask: linear-gradient(to top, #0000 50%, #000 62.5% 75%, #0000 87.5%); }
.lwprofiel__blur i:nth-child(2) { -webkit-backdrop-filter: blur(0.1875rem); backdrop-filter: blur(0.1875rem); -webkit-mask: linear-gradient(to top, #0000 62.5%, #000 75% 87.5%, #0000 100%); mask: linear-gradient(to top, #0000 62.5%, #000 75% 87.5%, #0000 100%); }
.lwprofiel__blur i:nth-child(3) { -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); -webkit-mask: linear-gradient(to top, #0000 75%, #000 87.5% 100%); mask: linear-gradient(to top, #0000 75%, #000 87.5% 100%); }
.lwprofiel__blur i:nth-child(4) { -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); -webkit-mask: linear-gradient(to top, #0000 82%, #000 92% 100%); mask: linear-gradient(to top, #0000 82%, #000 92% 100%); }
.lwprofiel__blur i:nth-child(5) { -webkit-backdrop-filter: blur(1.5rem); backdrop-filter: blur(1.5rem); -webkit-mask: linear-gradient(to top, #0000 88%, #000 100%); mask: linear-gradient(to top, #0000 88%, #000 100%); }
.lwprofiel__blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--c-panel) 82%, transparent), color-mix(in srgb, var(--c-panel) 45%, transparent) 55%, color-mix(in srgb, var(--c-panel) 0%, transparent)); }
.lwprofiel__scroll {
	position: absolute;
	inset: 0;
	padding: calc(var(--header-top) + var(--btn-h) + 1.75rem) var(--gutter) var(--gutter);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.lwprofiel__scroll::-webkit-scrollbar { display: none; }
.lwprofiel__hoofd { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.lwprofiel__avatar { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; margin-bottom: 0.6rem; border-radius: 50%; background: var(--c-bg); color: var(--c-lavender); }
.lwprofiel__avatar .lwchat__mark { width: 52%; }
.lwprofiel__naam { font-family: var(--f-display); font-weight: 600; font-size: 1.625rem; line-height: 1.1; color: var(--c-white); }
.lwprofiel__nummer { font-size: 1rem; color: var(--c-mute); font-variant-numeric: tabular-nums; }
.lwprofiel__status { font-size: 0.875rem; color: var(--c-lavender); }
.lwprofiel__acties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.5rem; }
.lwprofiel__actie {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	padding: 0.85rem 0.5rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent);
	border-radius: var(--radius);
	background: none;
	color: var(--c-white);
	font: inherit;
	font-size: 0.875rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.lwprofiel__actie svg { width: 1.4rem; height: 1.4rem; color: var(--c-lavender); }
.lwprofiel__actie:hover { border-color: var(--c-lavender); background: color-mix(in srgb, var(--c-lavender) 6%, transparent); }
.lwprofiel__actie:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
.lwprofiel__blok { margin-top: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--c-blok); }
.lwprofiel__acties + .lwprofiel__blok { margin-top: 1.5rem; }
.lwprofiel__label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.45rem; font-size: 0.8125rem; color: var(--c-mute); }
.lwprofiel__info { font-size: 1rem; line-height: 1.4; color: var(--c-white); }
.lwprofiel__media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.3rem; }
/* Elke foto opent de mediagalerij (galerij.js); de laatste met +N ook. */
.lwprofiel__foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; border-radius: 0.4rem; background: var(--c-bg); cursor: pointer; }
.lwprofiel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-im); }
.lwprofiel__foto:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
@media (hover: hover) {
	.lwprofiel__foto:hover img { transform: scale(1.08); }
}
.lwprofiel__foto[data-meer]::after { content: attr(data-meer); position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--c-panel) 62%, transparent); color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; }
.lwprofiel__rijen { display: grid; gap: 0; padding-block: 0.35rem; list-style: none; }
.lwprofiel__rijen li { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0; font-size: 0.9375rem; color: var(--c-white); }
.lwprofiel__rijen li + li { border-top: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent); }
.lwprofiel__rijen svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--c-lavender); }
.lwprofiel__rijen a { color: inherit; text-decoration: none; }
.lwprofiel__rijen a:hover { color: var(--c-lavender); }

/* Gravity Forms in het paneel: verstopt, behalve de contactstap als kaartje
   in het gesprek (rechts, want het is jouw invoer). Bewust niet met
   display: none: Gravity Forms start zijn voorwaardelijke logica pas als het
   formulier een offsetParent heeft (zichtbaar is). */
.lwchat .lwpanel__form:not(.is-kaart) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	visibility: hidden;
	pointer-events: none;
}
/* Het formulier met je gegevens (de laatste stap) als kaartje rechts in het
   gesprek (op verzoek 2026-10-13 meer premium): ronde, gevulde velden zoals
   het zoekveld van de kennisbank, met het label in het veld dat bij focus of
   invullen klein naar boven schuift; op een breed paneel twee kolommen
   (naam en bedrijf, e-mail en telefoon), het grote veld over de volle
   breedte. Focus: een lichter vlak met een rand en een zachte gloed in het
   accent; ingevuld en goed: een vinkje in het veld (is-ok, letswork.js);
   fout: een rand in --c-error met de melding van Gravity Forms eronder. */
.lwchat .lwpanel__form.is-kaart {
	align-self: flex-end;
	width: min(100%, 34rem);
	margin-top: 0.75rem;
	padding: 0.625rem;
	border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
	border-radius: 1.75rem;
	background: var(--c-blok);
	container-type: inline-size;
}
.lwchat .is-kaart .gform_fields { display: grid; gap: 0.5rem; }
@container (min-width: 30rem) {
	.lwchat .is-kaart .gform_fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lwchat .is-kaart .gfield--type-textarea { grid-column: 1 / -1; }
}
.lwpanel .gform_validation_container,
.lwpanel .gform_heading,
.lwpanel .gfield_required,
.lwpanel .gform_footer,
.lwpanel .gform_ajax_spinner,
.lwpanel .gform_submission_error,
.lwpanel .gform_validation_errors,
.lwpanel .gsection,
.lwpanel [data-lw-ready] .gfield.lw-off { display: none !important; }
.lwpanel .hidden_label > .gfield_label,
.lwpanel .hidden_label > legend.gfield_label {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.lwpanel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lwpanel .gfield { position: relative; }
.lwpanel .gfield input[type="text"],
.lwpanel .gfield input[type="email"],
.lwpanel .gfield input[type="tel"],
.lwpanel .gfield textarea {
	display: block;
	width: 100%;
	height: 3.75rem;
	margin: 0;
	padding: 1.55rem 2.75rem 0.4rem 1.35rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	box-shadow: inset 0 0 0 1px transparent;
	color: var(--c-white);
	caret-color: var(--c-lavender);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.lwpanel .gfield textarea { height: 7rem; padding: 1.9rem 1.35rem 0.8rem; border-radius: 1.375rem; line-height: 1.45; resize: none; }
.lwpanel .gfield input::placeholder,
.lwpanel .gfield textarea::placeholder { color: color-mix(in srgb, var(--c-white) 40%, transparent); }
@media (hover: hover) {
	.lwpanel .gfield input:hover,
	.lwpanel .gfield textarea:hover { background: color-mix(in srgb, var(--c-bg) 55%, var(--c-bg-licht)); }
}
.lwpanel .gfield input:focus,
.lwpanel .gfield textarea:focus { outline: none; background: var(--c-bg-licht); box-shadow: inset 0 0 0 1px var(--c-lavender), 0 0 0 4px color-mix(in srgb, var(--c-lavender) 14%, transparent); }
.lwpanel .gfield_error input,
.lwpanel .gfield_error textarea { box-shadow: inset 0 0 0 1px var(--c-error); }
.lwpanel .gfield_error input:focus,
.lwpanel .gfield_error textarea:focus { box-shadow: inset 0 0 0 1px var(--c-error), 0 0 0 4px color-mix(in srgb, var(--c-error) 16%, transparent); }
/* Automatisch invullen door de browser: geen gekleurd vlak in het veld. */
.lwpanel .gfield input:-webkit-autofill { -webkit-text-fill-color: var(--c-white); transition: background-color 600000s 0s, box-shadow 0.35s ease; }
/* Foutmelding: rood rondje met een uitroepteken en de tekst ernaast. */
.lwpanel .lw-error,
.lwpanel .validation_message {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.55rem 0 0.2rem 1.35rem;
	font-size: var(--fs-small);
	line-height: 1.35;
	color: var(--c-error);
}
.lwpanel .lw-error::before,
.lwpanel .validation_message::before {
	content: "!";
	content: "!" / "";
	flex: none;
	display: grid;
	place-items: center;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: var(--c-error);
	color: var(--c-panel);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.6875rem;
	line-height: 1;
}
/* Zwevend label (lw-zweef): staat als tekst in het veld en schuift bij focus
   of als er iets is ingevuld klein naar boven (is-filled: letswork.js). Het
   grote veld heeft het label op dezelfde hoogte als de andere. */
.lwpanel .lw-zweef > .gfield_label {
	position: absolute;
	top: 1.875rem;
	right: 2.75rem;
	left: 1.35rem;
	z-index: 1;
	overflow: hidden;
	font-size: 1.0625rem;
	line-height: 1.25;
	color: color-mix(in srgb, var(--c-white) 50%, transparent);
	text-transform: lowercase;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translateY(-50%);
	transform-origin: 0 50%;
	pointer-events: none;
	transition: transform 0.55s var(--ease-out), color 0.35s ease;
}
.lwpanel .lw-zweef:focus-within > .gfield_label,
.lwpanel .lw-zweef.is-filled > .gfield_label { transform: translateY(calc(-50% - 0.8rem)) scale(0.72); color: var(--c-mute); }
.lwpanel .lw-zweef:focus-within > .gfield_label { color: var(--c-lavender); }
.lwpanel .lw-zweef.gfield_error > .gfield_label { color: var(--c-error); }
.lwpanel .lw-zweef.gfield--type-textarea > .gfield_label { right: 1.35rem; }
.lwpanel .lw-zweef:has(input:-webkit-autofill) > .gfield_label { transform: translateY(calc(-50% - 0.8rem)) scale(0.72); }
/* Vinkje (twee randen van een gedraaid vakje) als het veld goed is ingevuld. */
.lwpanel .lw-zweef .ginput_container { position: relative; }
.lwpanel .lw-zweef:not(.gfield--type-textarea) .ginput_container::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.4rem;
	width: 0.4rem;
	height: 0.75rem;
	border: solid var(--c-lavender);
	border-width: 0 1.5px 1.5px 0;
	opacity: 0;
	transform: translateY(-65%) rotate(45deg) scale(0.4);
	transition: opacity 0.3s ease, transform 0.5s var(--ease-out);
	pointer-events: none;
}
.lwpanel .lw-zweef.is-ok:not(.gfield_error) .ginput_container::after { opacity: 1; transform: translateY(-65%) rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
	.lwchat__typt i { animation: none; opacity: 0.6; }
	.lwchat__overslaan,
	.lwchat__rij .lwchat__stuur,
	.lwpanel .lw-zweef > .gfield_label,
	.lwpanel .lw-zweef .ginput_container::after { transition: none; }
}
@media (max-width: 47.99em) {
	.lwchat__bubbel,
	.lwchat__typt { max-width: 86%; font-size: 0.9375rem; }
	.lwchat__keuze { min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: 0.875rem; }
	.lwchat__keuzes { gap: 0.4rem; }
	.lwchat__rij { --lw-rij-h: 2.875rem; }
	.lwchat__veld { padding-block: calc((var(--lw-rij-h) - 1.5rem) / 2); }
	.lwchat__overslaan { padding: 0 1rem; }
	.lwchat .lwpanel__form.is-kaart { width: 100%; padding: 0.5rem; border-radius: 1.6rem; }
	.lwchat__verstuur { justify-self: stretch; }
	/* Smal: de contactknop als rond i-knopje. */
	.lwchat__contact-knop { width: var(--btn-h); padding: 0; }
	.lwchat__contact-knop .pill__label { display: none; }
	.lwchat__contact-i { display: grid; place-items: center; mix-blend-mode: difference; }
	/* Even rustig omlijnd als het sluitkruisje ernaast (eerst een felwitte rand naast een zachte). */
	.lwchat__contact-knop { border-color: color-mix(in srgb, var(--c-white) 40%, transparent); }
	.lwchat__kop { gap: 0.5rem; }
	.lwprofiel__avatar { width: 6rem; height: 6rem; }
}

/* ---------- Terugval zonder ontwerp (pagina zonder blokken, 404) ---------- */
.plain {
	padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 4rem) var(--gutter) var(--gutter);
}
.plain h1 {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 1;
	color: var(--c-lavender);
	margin-bottom: 1.5rem;
}

/* ---------- Verborgen blok (alleen zichtbaar voor ingelogde redacteuren) ---------- */
.im-hidden-block { position: relative; outline: 2px dashed var(--c-lavender); outline-offset: -2px; }
.im-hidden-block__notice {
	position: relative;
	z-index: 5;
	margin: 0;
	padding: 0.625rem var(--gutter);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 500;
}

/* ---------- Mediagalerij (galerij.js, template-parts/galerij.php) ----------
   Schermvullend boven alles, op een donker vlak: links de foto's in twee
   kolommen, rechts de foto in het groot. Overal 10px marge en ronde hoeken.
   De foto staat er helemaal in (contain) op een vervaagde kopie van zichzelf,
   zodat het kader vol is zonder dat er iets wordt afgesneden. */
.galerij {
	--gal-zij: clamp(15rem, 24vw, 23rem);
	--gal-dek: 13, 10, 6;
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: var(--gal-zij) minmax(0, 1fr);
	color: var(--c-white);
}
.galerij[hidden] { display: none; }
.galerij img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.galerij__dek { position: absolute; inset: 0; background: rgba(var(--gal-dek), 0.92); }

.galerij__zij {
	position: relative;
	min-height: 0;
	padding: var(--frame);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.galerij__zij::-webkit-scrollbar { display: none; }
.galerij__duims { display: grid; grid-template-columns: 1fr 1fr; gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.galerij__duim {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-panel);
	cursor: pointer;
}
.galerij__duim img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; transition: opacity 0.5s var(--ease-out), transform 1s var(--ease-im); }
/* De foto die groot staat: vol en met een lavendel rand. */
.galerij__duim::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c-lavender); border-radius: inherit; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.galerij__duim[aria-current="true"] img { opacity: 1; }
.galerij__duim[aria-current="true"]::after { opacity: 1; }
.galerij__duim:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
@media (hover: hover) {
	.galerij__duim:hover img { opacity: 1; transform: scale(1.05); }
}
/* Onderin de kolom het rondje dat volloopt met de scrollvoortgang (zoals in
   het menu), met een donker verloop waarin de foto's wegvallen. */
.galerij__scroll-wrap { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: center; padding-top: 1rem; pointer-events: none; }
.galerij__scroll-wrap::before {
	content: "";
	position: absolute;
	top: -3.5rem;
	right: calc(-1 * var(--frame));
	bottom: calc(-1 * var(--frame));
	left: calc(-1 * var(--frame));
	z-index: -1;
	background: linear-gradient(to bottom, rgba(var(--gal-dek), 0), rgba(var(--gal-dek), 0.96) 60%);
	transition: opacity 0.5s var(--ease-im);
}
.galerij__scroll-wrap:has(.is-end, .is-kort)::before { opacity: 0; }
.galerij__scroll { margin-bottom: 0.25rem; }

.galerij__podium {
	position: relative;
	min-height: 0;
	margin: var(--frame) var(--frame) var(--frame) 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-diep);
	touch-action: pan-y;
	user-select: none;
}
.galerij__beelden,
.galerij__laag,
.galerij__foto { position: absolute; inset: 0; }
.galerij__laag { overflow: hidden; }
.galerij__waas {
	position: absolute;
	top: -8%;
	left: -8%;
	width: 116%;
	height: 116%;
	object-fit: cover;
	filter: blur(44px) saturate(1.2) brightness(0.5);
}
.galerij__klein,
.galerij__groot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.galerij__groot { opacity: 0; transition: opacity 0.5s ease; }
.galerij__groot.is-geladen { opacity: 1; }

/* Onderin: teller links, pijlen rechts. */
.galerij__balk {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: linear-gradient(to top, rgba(var(--gal-dek), 0.5), rgba(var(--gal-dek), 0));
	pointer-events: none;
}
.galerij__balk > * { pointer-events: auto; }
.galerij__teller { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1; font-variant-numeric: tabular-nums; }
.galerij__totaal { color: var(--c-mute); }
.galerij__pijlen { display: flex; gap: 0.625rem; }
/* Omlijnde rondjes zoals in het menu; bij hover loopt de krabbel wit vol. */
.galerij__pijl {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid var(--c-white);
	border-radius: 50%;
	background: none;
	color: var(--c-white);
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	--scribble: var(--c-white);
}
.galerij__pijl-svg { position: relative; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
.galerij__pijl:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.galerij__pijl:focus-visible .scribble path { stroke-width: 62; }
.galerij__sluiten { position: absolute; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); z-index: 2; background: rgba(var(--gal-dek), 0.25); }

/* Tablet en telefoon: de foto bovenaan, de foto's als strook eronder. */
@media (max-width: 56.24em) {
	.galerij { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
	.galerij__podium { grid-row: 1; margin: var(--frame) var(--frame) 0; }
	.galerij__zij { grid-row: 2; overflow-x: auto; overflow-y: hidden; }
	.galerij__duims { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 4.25rem; }
	.galerij__scroll-wrap { display: none; }
	.galerij__pijl { width: 2.875rem; height: 2.875rem; }
	.galerij__balk { padding: 0.875rem; }
	.galerij__sluiten { top: 0.875rem; right: 0.875rem; }
}

/* ---------- Blok: manifest (manifest.js) ----------
   Opzet zoals de hero: links de tekst, rechts een foto met 10px marge die
   blijft staan (sticky) terwijl je door de tekst scrolt. De tekst is heel
   groot en loopt per alinea woord voor woord vol van doorschijnend naar wit.
   Telefoon: kop, foto en tekst onder elkaar. */
/* Kolommen zoals de footer (1,25 : 1, 10px marge en tussenruimte): het
   kader rechts is precies zo breed als het roze vlak eronder. Onderin 10px:
   het kader loopt door tot 10px boven dat vlak; de lucht onder de tekst is
   een eigen rij (::after), zodat het kader daar ook nog naast blijft staan.
   De tekst houdt de linkerlijn van de header (gutter min de 10px marge). */
.manifest {
	--manifest-links: calc(var(--gutter) - var(--frame));
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	column-gap: var(--frame);
	align-items: start;
	padding: 0 var(--frame) var(--frame);
	color: var(--c-white);
}
.manifest::after { content: ""; grid-column: 1; grid-row: 4; height: clamp(5rem, 22vh, 12rem); }
.manifest--zonder-beeld { --manifest-links: var(--gutter); grid-template-columns: minmax(0, 1fr); padding-right: 0; padding-left: 0; }
.manifest__kop {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1.25rem;
	min-height: calc(58svh - var(--wp-admin--admin-bar--height, 0px));
	padding: calc(var(--header-top) + var(--btn-h) + 2rem) var(--gutter) 0 var(--manifest-links);
}
.manifest__kicker { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
/* Een stuk groter dan de witte tekst eronder (op verzoek). */
.manifest__titel {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(3rem, 1rem + 5.6vw, 7.5rem);
	line-height: 0.95;
	letter-spacing: -0.015em;
	color: var(--c-lavender);
	text-wrap: balance;
}
.manifest__beeld {
	grid-column: 2;
	grid-row: 1 / span 4;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	margin-top: var(--frame);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-bg-licht);
}
.manifest__media { position: absolute; inset: 0; will-change: transform; }
.manifest__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Zwart verloop bovenin, zodat de pillen van de header goed uitkomen (zoals de hero). */
.manifest__beeld::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 40%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0));
	pointer-events: none;
}
.manifest__tekst {
	grid-column: 1;
	grid-row: 2;
	padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) 0 var(--manifest-links);
	/* Bodyfont (op verzoek): leest rustiger dan Neulis met zijn lussen. */
	font-family: var(--f-body);
	font-weight: 500;
	font-size: clamp(2rem, 0.9rem + 3.2vw, 4.25rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.manifest__tekst > * + * { margin-top: 0.8em; }
.manifest__tekst strong { font-weight: 600; }
/* Vóór het splitsen al doorschijnend (geen flits van wit); daarna doen de
   woorden het zelf (manifest.js). Zonder JS of bij minder beweging wit. */
.js [data-manifest-tekst]:not(.is-vullen) { opacity: 0.2; }
@media (prefers-reduced-motion: reduce) {
	.js [data-manifest-tekst]:not(.is-vullen) { opacity: 1; }
}
/* Links (bijvoorbeeld "Let's work." naar het paneel): lavendel met een dikke
   onderstreping die pas verschijnt als de alinea vol is, en bij hover van
   links naar rechts wit volloopt. */
.manifest__tekst a { position: relative; color: var(--c-lavender); text-decoration: none; white-space: nowrap; transition: color 0.35s ease; }
.manifest__tekst a::before,
.manifest__tekst a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.02em;
	height: 0.06em;
	border-radius: 0.06em;
	pointer-events: none;
}
.manifest__tekst a::before { right: 0; background: currentColor; opacity: 0.45; transition: opacity 0.6s var(--ease-im); }
.manifest__tekst a::after { width: 0; background: var(--c-white); transition: width 0.7s var(--ease-im); }
.manifest__tekst.is-vullen > :not(.is-vol) a::before { opacity: 0; }
.manifest__tekst a:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 0.1em; }
@media (hover: hover) {
	.manifest__tekst a:hover::after { width: 100%; }
}
/* Knoppen heel groot (op verzoek twee keer een gewone knop): ze horen bij
   de enorme tekst. */
.manifest__btns { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 1rem; padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) 0 var(--manifest-links); }
.manifest__btns .btn { --btn-h: 6.25rem; --btn-px: 3.75rem; font-size: 2rem; }
/* Deeltjes (manifest.js): donker kader met een canvas, de vormen volgen de
   alinea die je leest. */
.manifest__beeld--canvas { background: radial-gradient(120% 80% at 50% 45%, var(--c-bord), var(--c-bord-rand)); }
.manifest__beeld--canvas::after { display: none; }
.manifest__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Schetsbord (schets.js): de cursors (zelfde opmaak als bij de reviews). */
.manifest__beeld--schets .rv-cursor { z-index: 2; }
.manifest__beeld--schets.is-schets .rv-cursor { opacity: 1; }

@media (max-width: 56.24em) {
	.manifest { --manifest-links: var(--gutter); grid-template-columns: minmax(0, 1fr); padding-right: 0; padding-left: 0; }
	.manifest__kop,
	.manifest__beeld,
	.manifest__tekst,
	.manifest__btns,
	.manifest::after { grid-column: 1; grid-row: auto; }
	.manifest__btns .btn { --btn-h: 4.5rem; --btn-px: 2.25rem; font-size: 1.375rem; }
	.manifest__kop { min-height: 0; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3.5rem) var(--gutter) 2rem; }
	.manifest__beeld { position: relative; top: auto; height: min(125vw, 72svh); margin: 0 var(--frame); }
	/* Deeltjes op de telefoon: gedempt achter de tekst, schermhoog en vast
	   terwijl je leest (neemt zelf geen ruimte in). */
	.manifest--canvas .manifest__beeld {
		position: sticky;
		top: 0;
		z-index: 0;
		height: 100vh;
		height: 100svh;
		margin: 0 0 -100vh;
		margin: 0 0 -100svh;
		border-radius: 0;
		background: none;
		opacity: 0.45;
		pointer-events: none;
	}
	.manifest--canvas .manifest__kop,
	.manifest--canvas .manifest__tekst,
	.manifest--canvas .manifest__btns { position: relative; z-index: 1; }
	/* Door die negatieve marge mag het canvas een scherm voorbij het eind van
	   de sectie doorschuiven, de footer in: knippen op de rand van de sectie,
	   zodat de footer er gewoon overheen schuift. clip (niet hidden): dat maakt
	   geen scrollcontainer, dus sticky blijft werken. */
	.manifest--canvas { overflow: clip; }
	.manifest__beeld--schets .schets-cursor { display: none; }
}

/* ---------- Blok: contact (contact.js) ----------
   Links alle manieren van contact onder elkaar, elk als eigen blok met ronde
   hoeken (afwisselend lichtbruin, roze en donker) met de inhoud linksonder en
   een knop. Rechts een vast kader met deeltjes (IM.Wolk, zoals het manifest)
   dat per blok een eigen vorm aanneemt. Kolommen zoals het manifest en de
   footer (1,25 : 1, 10px marge en tussenruimte). Telefoon: de blokken onder
   elkaar, zonder deeltjes. */
.kanalen {
	--kanalen-links: calc(var(--gutter) - var(--frame));
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	column-gap: var(--frame);
	align-items: start;
	padding: 0 var(--frame) var(--frame);
	color: var(--c-white);
}
.kanalen__kop {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1.5rem;
	min-height: calc(50svh - var(--wp-admin--admin-bar--height, 0px));
	padding: calc(var(--header-top) + var(--btn-h) + 2rem) var(--gutter) clamp(2.5rem, 7vh, 4.5rem) var(--kanalen-links);
}
.kanalen__titel {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(3rem, 1rem + 5.6vw, 7.5rem);
	line-height: 0.95;
	letter-spacing: -0.015em;
	color: var(--c-lavender);
	text-wrap: balance;
}
.kanalen__intro { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.4; text-wrap: pretty; }
.kanalen__beeld {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	margin-top: var(--frame);
	border-radius: var(--radius);
	overflow: hidden;
	background: radial-gradient(120% 80% at 50% 45%, var(--c-bord), var(--c-bord-rand));
}
.kanalen__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.kanalen__lijst { grid-column: 1; grid-row: 2; display: grid; gap: var(--frame); }

/* Eén blok per kanaal, inhoud linksonder (zoals de vlakken in de footer). */
.kanaal {
	--vak-p: clamp(1.75rem, 3.6vw, 3.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 1rem;
	min-height: clamp(22rem, 62svh, 42rem);
	padding: var(--vak-p);
	border-radius: var(--radius);
	background: var(--c-bg-licht);
	color: var(--c-white);
}
.kanaal--donker { background: var(--c-panel); }
.kanaal--roze { --c-mute: color-mix(in srgb, var(--c-ink) 72%, transparent); background: var(--c-lavender); color: var(--c-ink); }
.kanaal__label { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.kanaal__label span { color: var(--c-lavender); font-weight: 600; }
.kanaal--roze .kanaal__label span { color: var(--c-ink); }
.kanaal__titel {
	margin: 0;
	max-width: 100%;
	font-family: var(--f-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 0.8rem + 2.7vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.kanaal__tekst { max-width: 32rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.45; color: var(--c-mute); text-wrap: pretty; }
.kanaal__btns { gap: 0.75rem; margin-top: 0.75rem; }
/* Bedrijfsgegevens: label en waarde naast elkaar; de KvK-link heeft de
   onderstreping van de hero (drawer__footer-link). */
.kanaal__gegevens { display: grid; gap: 0.35rem; margin: 0.25rem 0 0; font-size: var(--fs-body); }
.kanaal__gegevens div { display: flex; gap: 0.75rem; }
.kanaal__gegevens dt { flex: none; min-width: 3.5rem; color: var(--c-mute); }
.kanaal__gegevens dd { margin: 0; font-variant-numeric: tabular-nums; }
.kanaal--roze .kanaal__gegevens .drawer__footer-link::after { background: var(--c-ink); }
/* Kopieerknopje: verschijnt bij hover achter de waarde, een klik zet hem in
   het klembord (contact.js); even een vinkje en "Gekopieerd". Zonder hover
   (telefoon) staat hij er altijd, iets zachter. */
.kopieer { position: relative; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: -0.2rem 0 -0.2rem 0.35rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-mute); vertical-align: middle; cursor: pointer; opacity: 0; transition: opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.kopieer svg { grid-area: 1 / 1; width: 1.05rem; height: 1.05rem; transition: opacity 0.2s ease, scale 0.35s var(--ease-spin); }
.kopieer__vink { opacity: 0; scale: 0.4; }
.kopieer.is-gekopieerd { opacity: 1; color: var(--c-lavender); }
.kopieer.is-gekopieerd .kopieer__icoon { opacity: 0; scale: 0.4; }
.kopieer.is-gekopieerd .kopieer__vink { opacity: 1; scale: 1; }
.kopieer__melding { position: absolute; bottom: calc(100% + 0.35rem); left: 50%; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 0.25rem); transition: opacity 0.25s ease, transform 0.35s var(--ease-out); }
.kopieer.is-gekopieerd .kopieer__melding { opacity: 1; transform: translate(-50%, 0); }
.kopieer:focus-visible { opacity: 1; outline: 2px solid var(--c-lavender); outline-offset: 1px; }
.kanaal__titel .kopieer { width: 2.5rem; height: 2.5rem; margin: 0 0 0 0.4rem; vertical-align: 0.1em; }
.kanaal__titel .kopieer svg { width: 1.4rem; height: 1.4rem; }
.kanaal--roze .kopieer { color: color-mix(in srgb, var(--c-ink) 60%, transparent); }
.kanaal--roze .kopieer.is-gekopieerd { color: var(--c-ink); }
.kanaal--roze .kopieer__melding { background: var(--c-ink); color: var(--c-lavender); }
@media (hover: hover) {
	.kanaal__gegevens div:hover .kopieer,
	.kanaal__titel:hover .kopieer { opacity: 1; }
	.kopieer:hover { background: rgba(255, 255, 255, 0.08); color: var(--c-white); }
	.kanaal--roze .kopieer:hover { background: color-mix(in srgb, var(--c-ink) 8%, transparent); color: var(--c-ink); }
}
@media (hover: none) {
	.kopieer { opacity: 0.75; }
}
@media (hover: hover) {
	.kanaal--roze .kanaal__gegevens .drawer__footer-link:hover { color: var(--c-ink); }
}
.kanaal__extra { margin: 0; color: var(--c-mute); font-size: var(--fs-small); }
.kanaal__extra a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; transition: color 0.3s ease; }
.kanaal__extra a:hover,
.kanaal__extra a:focus-visible { color: var(--c-lavender); }
.kanaal--roze .kanaal__extra a:hover,
.kanaal--roze .kanaal__extra a:focus-visible { color: var(--c-ink); }

@media (max-width: 56.24em) {
	.kanalen { grid-template-columns: minmax(0, 1fr); }
	.kanalen__kop,
	.kanalen__lijst { grid-column: 1; grid-row: auto; }
	.kanalen__kop { --kanalen-links: calc(var(--gutter) - var(--frame)); min-height: 0; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3.5rem) calc(var(--gutter) - var(--frame)) 2rem; }
	.kanalen__beeld,
	.kanalen__rand { display: none; }
	.kanaal { min-height: clamp(17rem, 52svh, 26rem); }
}

/* Scènes (contact.js, zoals de fases op de home): één tegelijk in het kader,
   de deeltjes wijken zolang er een scène staat. Bellen: een belscherm dat
   overgaat en verbindt. Mailen: een mailvenster waarin het bericht zich typt,
   een cursor klikt op versturen. Chatten: het begin van het let's
   work-gesprek, in dezelfde berichtjes als het paneel. */
/* Sfeerbeelden in het donker achter de scènes: per blok een andere, langzaam
   uitzoomend, onder een donkere waas zodat de scène voorop blijft (scherp, de
   blur is op verzoek weer weg). */
.kanalen__fotos { position: absolute; inset: 0; overflow: hidden; }
.kanalen__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(0.3) brightness(0.85); scale: 1.08; transition: opacity 1.4s var(--ease-im), scale 9s linear; }
.kanalen__foto.is-aan { opacity: 1; scale: 1; }
.kanalen__waas { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 45%, color-mix(in srgb, var(--c-panel-2) 90%, transparent), color-mix(in srgb, var(--c-diep) 97%, transparent)); }
@media (prefers-reduced-motion: reduce) {
	.kanalen__foto { scale: 1; transition: opacity 0.6s ease; }
}
.kanalen__canvas { transition: opacity 0.5s var(--ease-im); }
.kanalen__beeld.heeft-scene .kanalen__canvas { opacity: 0; }
.ksc {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(5.5rem, 12vh, 7rem) clamp(1.25rem, 7%, 3rem) clamp(2rem, 6vh, 3rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s var(--ease-im), visibility 0s linear 0.45s;
}
.ksc.is-aan { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease-im) 0.1s, visibility 0s; }
.ksc-cursor { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; opacity: 0; will-change: transform; }
/* Het stippenraster (bord) boven de sfeerbeelden, en de penlijn van onze cursor. */
.kanalen__raster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.ksc-pen { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ksc-pen__lijn { fill: none; stroke: var(--c-lavender); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ksc-cursor svg { display: block; width: 1.35rem; height: 1.35rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.ksc-merk { display: block; width: 100%; height: auto; }

/* Bellen */
.ksc-bel { display: grid; justify-items: center; gap: 0.75rem; width: min(100%, 24rem); padding: 3rem 1.75rem 2.25rem; border-radius: 2rem; background: var(--fases-kaart, var(--c-kaart)); text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ksc-bel__foto { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--c-panel); color: var(--c-lavender); }
.ksc-bel__foto .ksc-merk { position: relative; z-index: 1; width: 58%; }
.ksc-bel__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ksc-bel__foto i { position: absolute; inset: 0; border: 1.5px solid var(--c-lavender); border-radius: 50%; opacity: 0; }
.ksc.is-belt .ksc-bel__foto i { animation: ksc-ring 1.8s var(--ease-out) infinite; }
.ksc.is-belt .ksc-bel__foto i:nth-child(2) { animation-delay: 0.6s; }
.ksc.is-belt .ksc-bel__foto i:nth-child(3) { animation-delay: 1.2s; }
@keyframes ksc-ring {
	0% { transform: scale(1); opacity: 0.75; }
	100% { transform: scale(1.75); opacity: 0; }
}
.ksc-bel__naam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--c-white); }
.ksc-bel__status { margin: 0; color: var(--c-mute); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ksc-bel__belt b { font-weight: inherit; animation: ksc-punt 1.2s steps(1) infinite; }
.ksc-bel__belt b:nth-child(2) { animation-delay: 0.2s; }
.ksc-bel__belt b:nth-child(3) { animation-delay: 0.4s; }
@keyframes ksc-punt {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}
.ksc-bel__tijd { display: none; color: var(--c-lavender); }
.ksc.is-verbonden .ksc-bel__belt { display: none; }
.ksc.is-verbonden .ksc-bel__tijd { display: inline; }
.ksc-bel__golf { display: flex; align-items: center; gap: 3px; height: 2.75rem; margin: 0.5rem 0 0.75rem; }
.ksc-bel__golf i { width: 3px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--c-lavender) 30%, transparent); transition: background-color 0.4s ease; }
.ksc.is-verbonden .ksc-bel__golf i { background: var(--c-lavender); animation: ksc-golf 0.7s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes ksc-golf {
	from { height: 4px; }
	to { height: var(--h, 1.6rem); }
}
/* Tijdens het overgaan een roze telefoonknop; neemt Innovatie Media op, dan
   draait die weg en komt de rode ophangknop (op verzoek rood) in beeld. */
.ksc-bel__knoppen { display: grid; }
.ksc-bel__knop { grid-area: 1 / 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); }
.ksc-bel__knop svg { width: 1.45rem; height: 1.45rem; }
.ksc-bel__knop--op { background: #e5484d; color: var(--c-white); opacity: 0; visibility: hidden; }
.ksc-bel__knop--op svg { rotate: 135deg; }

/* Mailen */
.ksc-mail { position: relative; display: flex; flex-direction: column; width: min(100%, 30rem); min-height: 24rem; padding: 1.1rem 1.4rem 1.4rem; border-radius: var(--radius); background: var(--fases-kaart, var(--c-kaart)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ksc-mail__balk { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; color: var(--c-mute); font-size: var(--fs-small); }
.ksc-mail__balk i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ksc-mail__balk i:first-child { background: var(--c-lavender); }
.ksc-mail__balk span { margin-left: auto; }
.ksc-mail__veld { display: flex; gap: 0.8rem; margin: 0; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.9375rem; }
.ksc-mail__veld span { flex: none; min-width: 5.5rem; color: var(--c-mute); }
.ksc-mail__veld b { min-width: 0; overflow: hidden; color: var(--c-white); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ksc-mail__tekst { flex: 1; margin: 0; padding-top: 1rem; color: rgba(255, 255, 255, 0.88); font-size: 1rem; line-height: 1.6; }
.ksc-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--c-lavender); animation: ksc-caret 1s steps(1) infinite; }
@keyframes ksc-caret {
	50% { opacity: 0; }
}
.ksc-mail__knop { align-self: flex-end; display: inline-flex; align-items: center; height: 2.75rem; margin-top: 1rem; padding: 0 1.4rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 500; }
.ksc-mail__klaar { position: absolute; inset: 0; display: flex; align-items: center; gap: 0.6rem; width: max-content; height: max-content; margin: auto; padding: 0.85rem 1.4rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; opacity: 0; visibility: hidden; }
.ksc-mail__klaar svg { width: 1.35rem; height: 1.35rem; }

/* Chatten: dezelfde berichtjes en typende stipjes als het let's work-paneel. */
.ksc-chat { display: flex; flex-direction: column; width: min(100%, 30rem); height: min(100%, 36rem); border-radius: var(--radius); background: var(--c-panel); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ksc-chat__kop { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ksc-chat__avatar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); }
.ksc-chat__avatar .ksc-merk { width: 60%; }
.ksc-chat__kop b { display: block; font-family: var(--f-display); font-weight: 600; line-height: 1.2; }
.ksc-chat__kop small { display: block; color: var(--c-lavender); font-size: 0.8125rem; }
.ksc-chat__draad { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; padding: 1.2rem; overflow: hidden; }
.ksc-chat__draad .lwchat__bubbel,
.ksc-chat__draad .lwchat__typt { margin: 0; font-size: 0.9375rem; }
.ksc-chat__keuzes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; margin: 0.2rem 0 0; }
.ksc-chat__keuze { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.3rem 0.8rem; border: 1px solid color-mix(in srgb, var(--c-lavender) 60%, transparent); border-radius: var(--radius-pill); color: var(--c-lavender); font-size: 0.8125rem; transition: background-color 0.3s ease, color 0.3s ease; }
.ksc-chat__keuze.is-gekozen { background: var(--c-lavender); color: var(--c-ink); }
/* Minder beweging: geen ringen, golf of knipperende cursor. */
@media (prefers-reduced-motion: reduce) {
	.ksc .ksc-bel__foto i,
	.ksc .ksc-bel__golf i,
	.ksc-caret { animation: none; }
}

/* Zelf zoeken: de kennisbank in het klein (roze vak, bruin zoekveld, donkere
   vragen met een plus die bij openen lavendel wordt). */
.ksc-kb { display: grid; gap: 0.5rem; width: min(100%, 30rem); padding: 1.25rem; border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ksc-kb__zoek { display: flex; align-items: center; gap: 0.6rem; height: 3rem; margin: 0 0 0.25rem; padding: 0 1.1rem; border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-white); font-size: 0.9375rem; }
.ksc-kb__zoek svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--c-mute); }
.ksc-kb__zoek [data-ksc-zoek] { order: 1; white-space: pre; }
.ksc-kb__zoek .ksc-caret { order: 2; }
.ksc-kb__hint { order: 3; display: none; color: var(--c-mute); }
.ksc-kb__zoek.is-leeg .ksc-kb__hint { display: inline; }
.ksc-kb__lijst { display: grid; margin: 0; padding: 0; list-style: none; }
.ksc-kb__vraag { max-height: 14rem; margin-top: 0.5rem; overflow: hidden; border-radius: 0.9rem; background: var(--c-panel); color: var(--c-white); transition: max-height 0.45s var(--ease-im), margin 0.45s var(--ease-im), opacity 0.3s ease; }
.ksc-kb__vraag:first-child { margin-top: 0; }
.ksc-kb__vraag.is-weg { max-height: 0; margin-top: 0; opacity: 0; }
.ksc-kb__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; font-size: 0.9375rem; line-height: 1.3; transition: color 0.3s ease; }
.ksc-kb__vraag.is-raak .ksc-kb__kop { color: var(--c-lavender); }
.ksc-kb__plus { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: var(--c-white); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.ksc-kb__plus::before,
.ksc-kb__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 1px; margin: -0.5px 0 0 -0.35rem; background: currentColor; transition: rotate 0.45s var(--ease-spin); }
.ksc-kb__plus::after { rotate: 90deg; }
.ksc-kb__vraag.is-open .ksc-kb__plus { border-color: var(--c-lavender); background: var(--c-lavender); color: var(--c-ink); }
.ksc-kb__vraag.is-open .ksc-kb__plus::after { rotate: 0deg; }
.ksc-kb__antwoord { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-im); }
.ksc-kb__antwoord > span { min-height: 0; overflow: hidden; padding: 0 1rem; color: var(--c-mute); font-size: 0.875rem; line-height: 1.5; }
.ksc-kb__vraag.is-open .ksc-kb__antwoord { grid-template-rows: 1fr; }
.ksc-kb__vraag.is-open .ksc-kb__antwoord > span { padding-bottom: 1rem; }

/* Volgen: een profiel in het klein met eigen beeld. */
.ksc-ig { width: min(100%, 26rem); padding: 1.1rem; border-radius: var(--radius); background: var(--c-panel); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ksc-ig__kop { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; }
.ksc-ig__avatar { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); }
.ksc-ig__avatar .ksc-merk { width: 60%; }
.ksc-ig__kop b { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ksc-ig__knop { display: inline-grid; align-items: center; height: 2.25rem; padding: 0 1.1rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-size: 0.875rem; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.ksc-ig__knop > span { grid-area: 1 / 1; text-align: center; transition: opacity 0.25s ease; }
.ksc-ig__knop > span:last-child { opacity: 0; }
.ksc-ig__knop.is-aan { background: transparent; color: var(--c-lavender); box-shadow: inset 0 0 0 1px var(--c-lavender); }
.ksc-ig__knop.is-aan > span:first-child { opacity: 0; }
.ksc-ig__knop.is-aan > span:last-child { opacity: 1; }
.ksc-ig__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: hidden; border-radius: 0.6rem; }
.ksc-ig__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--c-bg-licht); }
.ksc-ig__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ksc-ig__hart { position: absolute; inset: 0; width: 42%; height: 42%; margin: auto; color: var(--c-white); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); opacity: 0; visibility: hidden; }

/* Postadres: de kaart van Nederland als lijn (Natural Earth, publiek domein). */
.ksc-kaart { position: relative; height: min(100%, 34rem); max-width: 100%; }
.ksc-kaart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ksc-kaart__land { fill: color-mix(in srgb, var(--c-lavender) 7%, transparent); fill-rule: evenodd; stroke: var(--c-lavender); stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ksc-kaart__water { fill: none; stroke: color-mix(in srgb, var(--c-lavender) 55%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ksc-kaart__route { fill: none; stroke: var(--c-lavender); stroke-width: 1.2px; stroke-dasharray: 3 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.ksc-kaart__start { fill: var(--c-lavender); opacity: 0; }
.ksc-kaart__masker { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.ksc-kaart__post { opacity: 0; }
.ksc-kaart__post rect { fill: var(--c-lavender); }
.ksc-kaart__post path { fill: none; stroke: var(--c-ink); stroke-width: 1; stroke-linejoin: round; }
.ksc-kaart__pin path { fill: var(--c-lavender); }
.ksc-kaart__pin circle { fill: var(--c-ink); }
.ksc-kaart__golf { fill: none; stroke: var(--c-lavender); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ksc.is-geland .ksc-kaart__golf { animation: ksc-kaart-golf 2.4s var(--ease-out) infinite; }
.ksc.is-geland .ksc-kaart__golf + .ksc-kaart__golf { animation-delay: 1.2s; }
@keyframes ksc-kaart-golf {
	from { transform: scale(0.4); opacity: 0.9; }
	to { transform: scale(3.2); opacity: 0; }
}

/* Mijn omgeving: een klein dashboard. */
.ksc-dash { display: flex; width: min(100%, 30rem); min-height: 22rem; overflow: hidden; border-radius: var(--radius); background: var(--fases-kaart, var(--c-kaart)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.ksc-dash__zij { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: 3.75rem; padding: 1.1rem 0; background: var(--c-panel); }
.ksc-dash__merk { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.4rem; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); }
.ksc-dash__merk .ksc-merk { width: 60%; }
.ksc-dash__zij i { width: 1.4rem; height: 0.35rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); }
.ksc-dash__zij i:first-of-type { background: color-mix(in srgb, var(--c-lavender) 60%, transparent); }
.ksc-dash__hoofd { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1.25rem; }
.ksc-dash__titel { margin-bottom: 0.4rem; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; }
.ksc-dash__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "soort status" "naam knop"; align-items: center; gap: 0.25rem 0.75rem; padding: 0.85rem 1rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.05); }
.ksc-dash__soort { grid-area: soort; color: var(--c-mute); font-size: 0.75rem; }
.ksc-dash__rij b { grid-area: naam; font-size: 0.9375rem; font-weight: 500; }
.ksc-dash__status { grid-area: status; justify-self: end; display: inline-grid; font-size: 0.75rem; }
.ksc-dash__status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; transition: opacity 0.3s ease; }
.ksc-dash__status > span:first-child { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: var(--c-mute); }
.ksc-dash__status > span:last-child { background: var(--c-lavender); color: var(--c-ink); opacity: 0; }
.ksc-dash__status svg { width: 0.9rem; height: 0.9rem; }
.ksc-dash__rij.is-klaar .ksc-dash__status > span:first-child { opacity: 0; }
.ksc-dash__rij.is-klaar .ksc-dash__status > span:last-child { opacity: 1; }
.ksc-dash__knop { grid-area: knop; justify-self: end; display: inline-flex; align-items: center; height: 2rem; padding: 0 0.9rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-size: 0.8125rem; font-weight: 500; transition: opacity 0.3s ease; }
.ksc-dash__rij.is-klaar .ksc-dash__knop { opacity: 0; }
.ksc-dash__voortgang { display: grid; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.05); }
.ksc-dash__voortgang .ksc-dash__soort { grid-area: auto; }
.ksc-dash__balk { height: 0.4rem; overflow: hidden; border-radius: 1rem; background: rgba(255, 255, 255, 0.1); }
.ksc-dash__balk i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--c-lavender); }
.ksc-dash__stappen { display: flex; justify-content: space-between; color: var(--c-mute); font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
	.ksc .ksc-kaart__golf { animation: none; }
}

/* ---------- Kennisbank, deel vragen: "Vraag het ons" (vraaghet.js) ----------
   Bovenin een roze vlak (10px marge, ronde hoeken) met een heel grote kop, een
   enorm donker zoekveld dat zelf voorbeeldvragen typt en de onderwerpen als
   pillen. Daaronder het gesprek (berichtjes zoals het let's work-paneel) en de
   index: per onderwerp de titel groot en vast links, de vragen als rustige
   regels in de bodyletter met bij hover de eerste zin van het antwoord.
   De inhoud houdt de linkerlijn van de header. */
.kb3,
.vraag {
	--kb3-p: calc(var(--gutter) - var(--frame));
	padding: 0 var(--frame) var(--frame);
	color: var(--c-white);
}
/* De 10px boven de vlakken als padding, niet als marge: een marge viel door
   de pagina heen (margin collapse) en dan scheen in de tussenruimte bovenin de
   donkere onderlaag door, alsof er een hapje uit de rand was. */
.kb3 { padding-top: var(--frame); }
.kb3__held,
.vraag__held {
	display: grid;
	align-content: end;
	justify-items: start;
	gap: 1.25rem;
	margin-top: var(--frame);
	padding: calc(var(--header-top) + var(--btn-h) + 3rem) var(--kb3-p) clamp(2.5rem, 5vw, 4.5rem);
	border-radius: var(--radius);
	background: var(--c-lavender);
	color: var(--c-ink);
}
/* Desktop: de twee vlakken bovenin precies het scherm hoog (min 2x 10px). */
.kb3__held { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
.kb3__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.kb3__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(3.25rem, 1rem + 7vw, 9rem); line-height: 0.92; letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.kb3__tekst { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.4; color: color-mix(in srgb, var(--c-ink) 82%, transparent); text-wrap: pretty; }

/* Het zoekveld: groot, donker, met een rond lavendel verstuurknopje. */
.kb3-zoek {
	/* De roze knop heeft boven, onder en rechts dezelfde marge (--kb3-m). */
	--kb3-h: clamp(4.25rem, 3.25rem + 3vw, 6.75rem);
	--kb3-m: clamp(0.5rem, 0.35rem + 0.45vw, 0.85rem);
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.2vw, 1rem);
	width: 100%;
	height: var(--kb3-h);
	margin: 0;
	padding: 0 var(--kb3-m) 0 clamp(1.25rem, 2.2vw, 2.25rem);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	color: var(--c-white);
}
.kb3-zoek__icoon { flex: none; width: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); height: auto; color: var(--c-mute); }
.kb3-zoek__vak { position: relative; flex: 1; min-width: 0; height: 100%; }
.kb3-zoek__veld,
.kb3-zoek__typ { font-family: var(--f-body); font-weight: 500; font-size: clamp(1.125rem, 0.85rem + 1.4vw, 2.25rem); letter-spacing: -0.015em; }
.kb3-zoek__veld { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--c-white); -webkit-appearance: none; appearance: none; }
.kb3-zoek__veld:focus { outline: none; }
.kb3-zoek__veld::placeholder { color: rgba(255, 255, 255, 0.45); }
.kb3-zoek__veld::-webkit-search-cancel-button { -webkit-appearance: none; }
.kb3-zoek__typ { position: absolute; inset: 0 auto 0 0; display: none; align-items: center; max-width: 100%; overflow: hidden; color: rgba(255, 255, 255, 0.55); white-space: nowrap; pointer-events: none; }
.kb3-zoek__typ::after { content: ""; flex: none; width: 2px; height: 1em; margin-left: 2px; background: var(--c-lavender); animation: kb3-caret 1s steps(1) infinite; }
.kb3.is-typt .kb3-zoek__typ { display: flex; }
@keyframes kb3-caret {
	50% { opacity: 0; }
}
.kb3-zoek__stuur { flex: none; display: grid; place-items: center; width: calc(var(--kb3-h) - 2 * var(--kb3-m)); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); cursor: pointer; transition: transform 0.35s var(--ease-out), background-color 0.3s ease; }
.kb3-zoek__stuur svg { width: 42%; height: 42%; }
.kb3-zoek__stuur:hover { transform: scale(1.05); }
.kb3-zoek__stuur:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

/* Wissen: een rond kruisje, alleen als er iets in het veld staat. */
.kb3-zoek__wis { flex: none; display: grid; place-items: center; width: calc(var(--kb3-h) - 2 * var(--kb3-m)); aspect-ratio: 1; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: transparent; color: var(--c-white); cursor: pointer; opacity: 0; transform: scale(0.6); pointer-events: none; transition: opacity 0.25s ease, transform 0.4s var(--ease-out), border-color 0.3s ease, background-color 0.3s ease; }
.kb3-zoek__wis svg { width: 34%; height: 34%; }
.kb3-zoek.heeft-tekst .kb3-zoek__wis { opacity: 1; transform: none; pointer-events: auto; }
.kb3-zoek__wis:hover { border-color: var(--c-white); background: rgba(255, 255, 255, 0.08); }
.kb3-zoek__wis:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
/* Zwevend zolang je zoekt en het zoekveld uit beeld is (vraaghet.js): de
   zoekterm met een kruisje; klik = wissen en rustig terug naar boven. Boven de
   schakelaar vragen | blogs. */
.kb3-filter { position: fixed; inset-inline: 0; bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.4rem); z-index: 30; display: flex; align-items: center; gap: 0.6rem; width: max-content; max-width: calc(100% - 2rem); height: 3rem; margin-inline: auto; padding: 0 0.35rem 0 1rem; border: 0; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25); cursor: pointer; opacity: 0; visibility: hidden; }
.kb3-filter__icoon { flex: none; width: 1.05rem; height: 1.05rem; }
.kb3-filter__term { min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb3-filter__x { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--c-ink); color: var(--c-lavender); transition: transform 0.4s var(--ease-out); }
.kb3-filter__x svg { width: 46%; height: 46%; }
.kb3-filter:hover .kb3-filter__x { transform: rotate(90deg); }
.kb3-filter:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
.kb3-onderwerpen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.kb3-onderwerp { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 35%, transparent); color: var(--c-ink); font-size: 0.9375rem; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; }
.kb3-onderwerp:hover,
.kb3-onderwerp:focus-visible { background: var(--c-ink); color: var(--c-lavender); }
.kb3-onderwerp:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* Bovenin twee vlakken: links het zoekvak, rechts (lichtbruin) een ingang
   naar de blogs met een klein sfeerbeeld. */
.kb3__boven { display: grid; gap: var(--frame); }
.kb3__boven.heeft-ingang { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.kb3__boven .kb3__held { margin-top: 0; }
.kb3__boven.heeft-ingang .kb3__titel { font-size: clamp(3rem, 1rem + 5.4vw, 7.5rem); }
/* Vaste rand bovenin per blok (.kb__rand, zoals de reviews): in dezelfde
   gridcel als het blok, zodat roze en lichtbruin elk met 10px marge en hun
   eigen ronde hoeken onder de bovenkant door schuiven. Telefoon: .site-rand. */
.kb3__boven > .kb3__held { grid-area: 1 / 1; }
.kb3__boven > .kb3-ingang { grid-area: 1 / 2; }
.kb3__rand { grid-area: 1 / 1; align-self: start; }
.kb3__rand--ingang { grid-area: 1 / 2; }
.vraag__boven { display: grid; }
.vraag__boven > .vraag__held { grid-area: 1 / 1; }
.vraag__rand { grid-area: 1 / 1; align-self: start; margin-top: 0; }
.kb3-ingang { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1rem; padding: calc(var(--header-top) + var(--btn-h) + 1.5rem) clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--radius); background: var(--c-bg-licht); color: var(--c-white); }
.kb3-ingang__foto { position: relative; display: block; flex: 1 1 0; width: 100%; min-height: 9rem; margin-bottom: 0.5rem; overflow: hidden; border-radius: 0.9rem; }
/* Absoluut: de foto vult de ruimte boven de tekst, maar rekt het vlak niet op. */
.kb3-ingang__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kb3-ingang__kicker { margin: 1.5rem 0 0; color: var(--c-mute); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); }
.kb3-ingang__kop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1; color: var(--c-lavender); text-wrap: balance; }
.kb3-ingang__tekst { max-width: 26rem; color: var(--c-mute); font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.kb3-ingang__knop { margin-top: 0.5rem; }

/* Geen enkele vraag past: stel hem direct (onder het zoekveld). */
.kb3-stel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(1rem, 2vw, 1.5rem); width: min(100%, 58rem); margin-top: 0.25rem; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--c-bg); color: var(--c-white); }
/* Onze twee foto's, net over elkaar, met een lavendel rand. */
.kb3-stel__wie { display: flex; padding-top: 0.15rem; }
.kb3-stel__foto { display: block; width: clamp(2.75rem, 2.3rem + 1.2vw, 3.5rem); aspect-ratio: 1; overflow: hidden; border: 2px solid var(--c-lavender); border-radius: 50%; background: var(--c-panel); }
.kb3-stel__foto + .kb3-stel__foto { margin-left: -0.9rem; }
.kb3-stel__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kb3-stel__inhoud { display: grid; justify-items: start; gap: 0.6rem; min-width: 0; }
.kb3-stel__kop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.15; color: var(--c-lavender); text-wrap: balance; }
.kb3-stel__tekst { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 1.0625rem; line-height: 1.45; }
/* Jouw vraag als lavendel bubbel, zoals in let's work. */
.kb3-stel__vraag { max-width: 100%; margin: 0.35rem 0 0.25rem; padding: 0.55rem 1rem; border-radius: 1.15rem 1.15rem 1.15rem 0.35rem; background: var(--c-lavender); color: var(--c-ink); font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.kb3-stel__vraag:empty { display: none; }
.kb3-stel__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; width: 100%; }
.kb3-stel__veld { flex: 1 1 16rem; min-width: 0; height: var(--btn-h); padding: 0 1.25rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.04); color: var(--c-white); font: inherit; font-size: 1rem; transition: border-color 0.3s ease, background-color 0.3s ease; }
.kb3-stel__veld::placeholder { color: rgba(255, 255, 255, 0.45); }
.kb3-stel__veld:hover { border-color: rgba(255, 255, 255, 0.4); }
.kb3-stel__veld:focus { outline: none; border-color: var(--c-lavender); background: rgba(255, 255, 255, 0.07); }
.kb3-stel__fout { margin: 0; color: var(--c-lavender); font-size: var(--fs-small); font-weight: 600; }
.kb3-stel__klaar { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--c-white); font-weight: 500; }
.kb3-stel__klaar .lwchat__vink { color: var(--c-lavender); }
.kb3-stel.is-bezig .kb3-stel__knop { opacity: 0.6; }
.kb3-stel[hidden],
.kb3-stel__klaar[hidden],
.kb3-stel__fout[hidden] { display: none; }
.kb3-stel.is-klaar .kb3-stel__tekst,
.kb3-stel.is-klaar .kb3-stel__rij { display: none; }
.js .kb3__gf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; pointer-events: none; }

/* De index. */
.kb3__index { padding: clamp(3rem, 8vh, 6rem) var(--kb3-p) clamp(5rem, 12vh, 8rem); }
.kb3__aantal { margin: 0 0 clamp(1rem, 3vh, 2rem); color: var(--c-mute); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); }
.kb3-groep { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: start; gap: 1.5rem clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 5vh, 3.5rem) 0; scroll-margin-top: calc(var(--header-top) + var(--btn-h) + 1rem); }
.kb3-groep + .kb3-groep { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kb3-groep[hidden] { display: none; }
.kb3-groep__titel { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1.5rem); margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.15rem + 1.9vw, 3rem); line-height: 1; color: var(--c-lavender); text-wrap: balance; }
.kb3-groep__lijst { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.kb3-vraag[hidden] { display: none; }
/* Zoeken haalt niets weg: wat past licht op, de rest wordt half doorzichtig;
   de beste vraag krijgt een lavendel kader en zijn eerste zin. */
.kb3-vraag,
.kb3-groep__titel { transition: opacity 0.45s var(--ease-im); }
.kb3-vraag.is-intro,
.kb3-groep__titel.is-intro { transition: none; }
.kb3.is-scrollt .kb3-vraag__link { pointer-events: none; }
.kb3__index.is-zoek .kb3-vraag:not(.is-raak),
.kb3__index.is-zoek .kb3-groep:not(.is-raak) .kb3-groep__titel { opacity: 0.28; }
.kb3-vraag.is-raak .kb3-vraag__vraag { color: var(--c-lavender); }
.kb3-vraag.is-beste .kb3-vraag__link { background: color-mix(in srgb, var(--c-lavender) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 45%, transparent); }
.kb3-vraag.is-beste .kb3-vraag__intro { grid-template-rows: 1fr; }
.kb3-vraag.is-beste .kb3-vraag__intro > span { padding-top: 0.45rem; }
/* De vraag en de pijl delen de eerste rij; de eerste zin klapt open in een
   eigen rij eronder, dus de vraag blijft staan en alleen wat eronder staat
   schuift op (op verzoek; met flex en centreren schoof de vraag omhoog). */
.kb3-vraag__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; margin: 0 -1.25rem; padding: 1.1rem 1.25rem; border-radius: 0.9rem; color: var(--c-white); text-decoration: none; transition: background-color 0.35s ease; }
.kb3-vraag__link:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 0; }
.kb3-vraag__tekst { display: contents; }
.kb3-vraag__vraag { grid-area: 1 / 1; font-family: var(--f-body); font-weight: 500; font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; transition: color 0.3s ease; }
.kb3-vraag__intro { grid-area: 2 / 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-im); }
.kb3-vraag__intro > span { min-height: 0; overflow: hidden; color: var(--c-mute); font-size: 0.9375rem; line-height: 1.45; transition: padding 0.45s var(--ease-im); }
.kb3-vraag__pijl {
	grid-area: 1 / 2;
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	--scribble: var(--c-white);
	transition: border-color 0.45s var(--ease-im);
}
.kb3-vraag__pijl svg { position: relative; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
.kb3-vraag__link.is-hover .kb3-vraag__pijl { border-color: var(--c-white); }
@media (hover: hover) and (pointer: fine) {
	.kb3-vraag__link:hover { background: rgba(255, 255, 255, 0.04); }
	.kb3-vraag__link:hover .kb3-vraag__vraag { color: var(--c-lavender); }
	.kb3-vraag__link:hover .kb3-vraag__intro { grid-template-rows: 1fr; }
	.kb3-vraag__link:hover .kb3-vraag__intro > span { padding-top: 0.45rem; }
}
.kb3__niets { margin: 2rem 0 0; color: var(--c-mute); font-size: var(--fs-lead); }
/* De zwevende schakelaar vliegt van onderen in beeld met een kleine bounce
   (zoals de zwevende terugknop op een vraag- of blogpagina, op verzoek) en
   vliegt precies omgekeerd weer weg (eerst een tikje omhoog, dan naar
   beneden uit beeld); pas als hij weg is wordt hij onzichtbaar. */
.kb3 .kb-schakel { margin-top: calc(-1 * clamp(3rem, 8vh, 5rem)); transition: opacity 0.2s ease, translate 0.85s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kb3.is-veld-zichtbaar .kb-schakel { opacity: 0; translate: 0 calc(100% + 3rem); pointer-events: none; transition: opacity 0.2s ease 0.45s, translate 0.6s cubic-bezier(0.36, 0, 0.66, -0.56); }

/* Eén vraag (single-vraag.php). */
.vraag__held { min-height: min(64svh, 38rem); }
.vraag__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
/* Terugknop: de donkere knop (zoals op roze overal), met een chevron die bij
   hover een stukje terugschuift; het onderwerp ernaast is even hoog. */
.vraag__terug { padding-left: calc(var(--btn-px) - 0.35rem); }
.vraag__terug .btn__label { display: inline-flex; align-items: center; gap: 0.45rem; }
.vraag__terug .btn__label svg { flex: none; width: 1.05rem; height: 1.05rem; transition: translate 0.45s var(--ease-im); }
.vraag__terug.is-hover .btn__label svg { translate: -0.2rem 0; }
.vraag__terug:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
/* Broodkruimels: chevrons in plaats van schuine strepen, links met de
   onderstreping die bij hover van links naar rechts volloopt. */
.rank-math-breadcrumb { font-size: var(--fs-small); }
.rank-math-breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.65rem; margin: 0; }
.rank-math-breadcrumb .separator { flex: none; display: inline-block; width: 0.42rem; height: 0.72rem; font-size: 0; background: currentColor; opacity: 0.5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.rank-math-breadcrumb a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease-im), color 0.3s ease; }
.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus-visible { background-size: 100% 1px; }
.rank-math-breadcrumb .last { max-width: min(42ch, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vraag__held .rank-math-breadcrumb { color: color-mix(in srgb, var(--c-ink) 62%, transparent); }
.vraag__held .rank-math-breadcrumb a:hover,
.vraag__held .rank-math-breadcrumb a:focus-visible,
.vraag__held .rank-math-breadcrumb .last { color: var(--c-ink); }
.vraag__onderwerp { display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 40%, transparent); color: var(--c-ink); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; }
a.vraag__onderwerp:hover,
a.vraag__onderwerp:focus-visible { background: var(--c-ink); color: var(--c-lavender); }
.vraag__titel .ai-ball__disc { color: var(--c-ink); }
.vraag__titel .ai-ball__disc::after { border-color: var(--c-ink); }
.vraag__titel { max-width: 18ch; margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 1rem + 4.6vw, 6.5rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; }
.vraag__body { display: grid; justify-items: start; gap: clamp(2rem, 5vh, 3rem); padding: clamp(3rem, 8vh, 5.5rem) var(--kb3-p) 0; }
.vraag__antwoord { max-width: 42rem; color: rgba(255, 255, 255, 0.92); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.vraag__antwoord > * + * { margin-top: 0.9em; }
.vraag__antwoord a { color: var(--c-lavender); }
.vraag__kort-kop { margin: 0 0 calc(-1 * clamp(1.25rem, 3.5vh, 2.25rem)); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-lavender); }
/* Het uitgebreide antwoord: rustig leesbaar, lavendel tussenkoppen. */
.vraag__artikel { max-width: 42rem; padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.84); font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.65; text-wrap: pretty; }
.vraag__artikel > * + * { margin-top: 1em; }
.vraag__artikel h2 { margin-top: 2em; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--c-lavender); text-wrap: balance; }
.vraag__artikel h2 + * { margin-top: 0.6em; }
.vraag__artikel > :first-child { margin-top: 0; }
.vraag__artikel ol { padding-left: 1.25em; }
.vraag__artikel li + li { margin-top: 0.45em; }
.vraag__artikel ol li::marker { color: var(--c-lavender); }
/* Opsommingen met ons beeldmerk (de m) in plaats van een stip. */
.vraag__artikel ul { padding-left: 0; list-style: none; }
.vraag__artikel ul li { position: relative; padding-left: 1.85em; }
.vraag__artikel ul li::before { content: ""; position: absolute; top: 0.5em; left: 0; width: 1.15em; height: 0.82em; background: var(--c-lavender); -webkit-mask: url("../img/logo-bullet.svg") center / contain no-repeat; mask: url("../img/logo-bullet.svg") center / contain no-repeat; }
.vraag__artikel strong { color: var(--c-white); font-weight: 600; }
.vraag__meer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; color: var(--c-mute); font-size: var(--fs-lead); }
.vraag__buren { margin-top: clamp(3rem, 8vh, 5rem); padding-left: var(--kb3-p); padding-right: var(--kb3-p); padding-bottom: clamp(4rem, 10vh, 6rem); border-top: 1px solid rgba(255, 255, 255, 0.08); }

@media (max-width: 56.24em) {
	.kb3__held { min-height: 0; padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3.5rem); }
	.vraag__held { min-height: 0; padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3rem); }
	.kb3-zoek { padding-left: 1.1rem; }
	.kb3__boven.heeft-ingang { grid-template-columns: minmax(0, 1fr); }
	.kb3__boven > .kb3-ingang { grid-area: auto; }
	.kb3-ingang__foto { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
	.kb3-groep { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
	.kb3-groep__titel { position: static; }
	.kb3-vraag__link { margin: 0 -0.75rem; padding: 0.9rem 0.75rem; }
	.kb3-vraag__pijl { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.kb3-zoek__typ::after { animation: none; }
}

/* ---------- Blok: kennisbank (kennisbank.js) ----------
   Twee delen (vragen en blogs) met de opbouw van de reviews: links een roze
   vak dat vast in beeld blijft (10px marge, 40px binnenmarge) met de kop,
   het zoekveld en de onderwerpen; een bruine pil schuift naar het actieve
   onderwerp. Rechts de vragen of blogs als losse donkere blokjes met 10px
   ertussen; een vaste rand bovenin (.kb__rand, zoals .reviews__rand) houdt
   daar 10px marge en ronde hoeken. Onderin zweeft de schakelaar vragen |
   blogs (sticky in het blok, dus aan het eind rust hij op zijn eigen plek). */
.kennisbank {
	--kb-tegel: var(--c-panel);
	--kb-tegel-hover: var(--c-blok-2);
	--kb-vrij: calc(var(--header-top) + var(--btn-h) + 2rem);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: var(--frame);
	margin: var(--frame);
	color: var(--c-white);
}
.kb__zij,
.kb__rand--links { grid-column: 1; grid-row: 1; }
.kb__rand--links { align-self: start; }
.kb__lijst { grid-column: 2; grid-row: 1; }
.kb-schakel { grid-column: 2; grid-row: 1; }

/* Het roze vak. Past het niet (laag scherm), dan scrolt het zelf. */
.kb__zij {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	padding: calc(var(--kb-vrij) - var(--frame)) 2.5rem 2.5rem;
	border-radius: var(--radius);
	background: var(--c-lavender);
	color: var(--c-ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.kb__zij::-webkit-scrollbar { display: none; }
.kb__titel { font-family: var(--f-display); font-weight: 600; font-size: min(clamp(2.75rem, 1rem + 3.4vw, 5.5rem), 9.5svh); line-height: 0.95; letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; }
.kb__tekst { max-width: 30rem; margin-top: 1.25rem; font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.4; color: var(--c-ink); text-wrap: pretty; }
.kb__tekst a { color: inherit; }

/* Zoekveld: een bruine pil op het roze, niet breder dan nodig. Krimpt mee
   (anders duwt de minimale breedte van het invoerveld de pagina op de
   telefoon breder dan het scherm). */
.kb-zoek { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-width: 0; max-width: 26rem; height: 3.5rem; margin-top: 1.75rem; padding: 0 0.45rem 0 1.2rem; border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-white); box-shadow: 0 0 0 0 var(--c-ink); transition: box-shadow 0.3s ease; }
.kb-zoek:focus-within { box-shadow: 0 0 0 2px var(--c-ink); }
.kb-zoek__icoon { flex: none; width: 1.3rem; height: 1.3rem; color: var(--c-mute); }
.kb-zoek__veld { flex: 1 1 auto; width: 1px; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; outline: 0; }
.kb-zoek__veld::placeholder { color: rgba(255, 255, 255, 0.45); }
.kb-zoek__veld::-webkit-search-cancel-button { display: none; }
.kb-zoek__aantal { flex: none; padding-right: 0.75rem; color: var(--c-mute); font-size: var(--fs-small); white-space: nowrap; }
.kb-zoek__wis { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: none; color: var(--c-white); cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease; }
.kb-zoek__wis svg { width: 1rem; height: 1rem; }
.kb-zoek__wis:hover,
.kb-zoek__wis:focus-visible { border-color: var(--c-lavender); color: var(--c-lavender); }
.kb-zoek__wis[hidden] { display: none; }
.kb-zoek__wis:not([hidden]) ~ .kb-zoek__aantal,
.kb-zoek__aantal:has(~ .kb-zoek__wis:not([hidden])) { padding-right: 0; }

/* Onderwerpen: de bruine pil schuift naar het actieve (kennisbank.js). */
.kb-nav { display: grid; gap: 0.6rem; }
.kb-nav__kop { padding-left: 1.1rem; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-ink) 60%, transparent); }
.kb-nav__lijst { position: relative; display: grid; }
.kb-nav__pil { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: var(--radius-pill); background: var(--c-bg); opacity: 0; pointer-events: none; }
.kb-nav__item { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: min(2.875rem, 5.6svh); padding: 0 1.1rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-ink); font-family: var(--f-display); font-weight: 500; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem); line-height: 1.1; text-align: start; text-decoration: none; cursor: pointer; transition: color 0.35s ease, opacity 0.35s ease; }
.kb-nav__naam { transition: translate 0.5s var(--ease-im); }
.kb-nav__n { flex: none; font-family: var(--f-body); font-size: var(--fs-small); font-variant-numeric: tabular-nums; opacity: 0.6; }
.kb-nav__item.is-actief { color: var(--c-lavender); }
.kb-nav__item.is-leeg { opacity: 0.35; pointer-events: none; }
.kb-nav__item:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
	.kb-nav__item:not(.is-actief):hover .kb-nav__naam { translate: 0.35rem 0; }
}

/* Rechts: de blokjes. Ruimte onderin voor de schakelaar als hij rust. */
/* De rand telt in het grid niet mee (negatieve marges), daarna volgt nog één
   gat van 10px: vandaar de 2x --frame. De eerste kop of het eerste blokje
   staat zo op dezelfde hoogte als de kop in het roze vak. */
.kb__lijst { position: relative; display: grid; align-content: start; gap: var(--frame); min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); padding: calc(var(--kb-vrij) - 2 * var(--frame) - 3rem) 0 6.5rem; }
.kennisbank--blog .kb__lijst { padding-top: calc(var(--kb-vrij) - 2 * var(--frame)); }
.kb__lijst > .kb__rand { margin-top: calc(-1 * (var(--kb-vrij) - var(--frame) - 3rem)); }
.kennisbank--blog .kb__lijst > .kb__rand { margin-top: calc(-1 * (var(--kb-vrij) - var(--frame))); }
.kb-groep { display: grid; gap: var(--frame); scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--kb-vrij) - 3rem); }
.kb-groep[hidden],
.kb-vraag[hidden],
.kb-artikel[hidden] { display: none; }
.kb-groep__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 3rem 0.5rem 0.6rem; }
.kb-groep__titel { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); line-height: 1.05; color: var(--c-lavender); text-wrap: balance; }
.kb-groep__n { flex: none; color: var(--c-mute); font-size: var(--fs-small); }

/* Een vraag als los blokje, in de opmaak van het faq-blok. */
.kb-vraag.faq__item { border: 0; border-radius: var(--radius); background: var(--kb-tegel); transition: background-color 0.4s ease; }
.kb-vraag > .faq__vraag { padding: 1.4rem 1.4rem 1.4rem 1.9rem; }
.kb-vraag .faq__antwoord-tekst { padding: 0 calc(3.375rem + 2.9rem) 1.9rem 1.9rem; }
@media (hover: hover) and (pointer: fine) {
	.kb-vraag:hover { background: var(--kb-tegel-hover); }
}
.kb-mark { padding: 0 0.08em; border-radius: 0.2em; background: color-mix(in srgb, var(--c-lavender) 35%, transparent); color: inherit; }
.kb__leeg { padding: 1.9rem; border-radius: var(--radius); background: var(--kb-tegel); font-family: var(--f-display); font-size: var(--fs-lead); color: var(--c-mute); }
.kb__leeg[hidden] { display: none; }
.kb__niet { max-width: 36rem; padding: 2.5rem 0.5rem 0; color: var(--c-mute); font-size: var(--fs-lead); line-height: 1.4; }

/* Blogs: kaartjes in twee kolommen. */
.kb-artikelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--frame); }
.kb-artikel { border-radius: var(--radius); background: var(--kb-tegel); transition: background-color 0.4s ease; }
.kb-artikel__link { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--frame); color: inherit; text-decoration: none; }
.kb-artikel__beeld { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) * 0.7); overflow: hidden; background: var(--c-bg-licht); }
.kb-artikel__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-out); }
.kb-artikel__tekst { display: grid; align-content: start; gap: 0.8rem; padding: 1.4rem 1.1rem 1.1rem; }
.kb-artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.75rem; font-size: var(--fs-small); color: var(--c-mute); }
.kb-artikel__cat { padding: 0.3rem 0.75rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); color: var(--c-white); }
.kb-artikel__titel { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); line-height: 1.2; color: var(--c-white); text-wrap: balance; transition: color 0.35s ease; }
.kb-artikel__intro { line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
.kb-artikel__pijl { position: absolute; top: calc(var(--frame) + 0.9rem); right: calc(var(--frame) + 0.9rem); z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--c-ink); --scribble: var(--c-lavender); transform: scale(0) rotate(-45deg); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kb-artikel__pijl-svg { position: relative; width: 1.25rem; height: 1.25rem; color: var(--c-ink-blend); mix-blend-mode: difference; }
/* Zonder foto: een tekstkaart met een grotere titel en onderin een omlijnd
   rondje dat bij hover wit volloopt (de pijl mengt dan donker). */
.kb-artikel__link:not(:has(.kb-artikel__beeld)) .kb-artikel__titel { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: 1.1; }
.kb-artikel__link:not(:has(.kb-artikel__beeld)) .kb-artikel__pijl { position: relative; top: auto; right: auto; margin: auto 0 0 1.1rem; transform: none; border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; --scribble: var(--c-white); }
.kb-artikel__link:not(:has(.kb-artikel__beeld)) .kb-artikel__pijl-svg { color: var(--c-white); }
.kb-artikel__link.is-hover .kb-artikel__pijl,
.kb-artikel__link:focus-visible .kb-artikel__pijl { transform: none; }
.kb-artikel__link.is-hover .kb-artikel__titel { color: var(--c-lavender); }
@media (hover: hover) and (pointer: fine) {
	.kb-artikel:hover { background: var(--kb-tegel-hover); }
	.kb-artikel__link:hover .kb-artikel__beeld img { scale: 1.04; }
}
.kb-artikel__link:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: -2px; border-radius: var(--radius); }

/* Nog geen blogs: één blokje met een verwijzing naar de vragen. */
/* Vult de kolom tot net boven de schakelaar. */
.kb-nog { display: grid; align-content: end; justify-items: start; gap: 1.25rem; min-height: max(20rem, calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--kb-vrij) - 6.5rem)); padding: 2.5rem; border-radius: var(--radius); background: var(--kb-tegel); }
.kb-nog__kop { max-width: 18ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 1.8vw, 3rem); line-height: 1.02; color: var(--c-lavender); text-wrap: balance; }
.kb-nog__tekst { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.kb-nog .btn { margin-top: 0.5rem; }

/* De schakelaar vragen | blogs: een lavendel pil schuift naar het actieve
   deel (zoals het kenniscentrum van gdverhuizen.nl). */
.kb-schakel {
	position: sticky;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 20;
	align-self: end;
	justify-self: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1.25rem;
	padding: 0.3rem;
	border-radius: var(--radius-pill);
	background: var(--c-bg-licht);
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}
.kb-schakel__pil { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0.3rem; width: calc(50% - 0.3rem); border-radius: var(--radius-pill); background: var(--c-lavender); transition: translate 0.7s var(--ease-im); }
.kb-schakel--blog .kb-schakel__pil { translate: 100% 0; }
.kb-schakel__link { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.4rem; border-radius: var(--radius-pill); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); text-decoration: none; white-space: nowrap; transition: color 0.45s var(--ease-im); }
.kb-schakel__link.is-actief { color: var(--c-ink); }
.kb-schakel__n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); font-family: var(--f-body); font-size: 0.75rem; transition: background-color 0.45s var(--ease-im), color 0.45s var(--ease-im); }
.kb-schakel__link.is-actief .kb-schakel__n { background: var(--c-ink); color: var(--c-lavender); }
.kb-schakel__link:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.kb-schakel__link:not(.is-actief):hover { color: var(--c-lavender); }
}

@media (max-width: 56.24em) {
	.kennisbank { grid-template-columns: minmax(0, 1fr); margin-top: var(--frame); }
	.kb__zij { grid-column: 1; grid-row: 1; position: relative; top: auto; height: auto; gap: 2.25rem; padding: calc(var(--kb-vrij) - var(--frame)) 1.5rem 1.75rem; overflow: visible; }
	.kb__rand,
	.kb__rand--links { display: none; }
	.kb__lijst { grid-column: 1; grid-row: 2; min-height: 80svh; padding: 0 0 6rem; }
	.kennisbank--blog .kb__lijst { padding-top: 0; }
	.kb-schakel { grid-column: 1; grid-row: 1 / 3; }
	.kb-zoek { max-width: none; }
	.kb-nav__item { min-height: 2.75rem; }
	.kb-groep { scroll-margin-top: calc(var(--header-top) + var(--btn-h) + 1.25rem - 2.25rem); }
	.kb-groep__kop { padding: 2.25rem 0.25rem 0.5rem; }
	.kb-vraag > .faq__vraag { gap: 1rem; padding: 1.1rem 1rem 1.1rem 1.25rem; }
	.kb-vraag .faq__antwoord-tekst { padding: 0 1.25rem 1.5rem; }
	.kb-artikelen { grid-template-columns: minmax(0, 1fr); }
	.kb-nog { min-height: 18rem; padding: 1.75rem; }
}

/* Onze twee cursors (cursors.js, laag in footer.php buiten de Barba-container):
   alleen op desktop met een muis en zonder minder beweging. Ze zweven
   rechtsonder en vliegen naar de blokken waar ze iets doen; daar volgen ze
   de cursors van het blok zelf, die dan alleen nog onzichtbaar meelopen. */
.cursors { display: none; }
.has-im-cursors .cursors { position: fixed; inset: 0; z-index: 40; display: block; overflow: hidden; pointer-events: none; transition: opacity 0.35s ease; }
.has-im-cursors .cursors.is-weg { opacity: 0; transition-duration: 0.2s; }
.has-im-cursors [data-cursor-wie] > * { visibility: hidden !important; }
.cursors__c { z-index: auto; transform-origin: 15% 10%; transition: opacity 0.4s ease, color 0.3s ease; }
.cursors__c .fases__cursor-fotos { transition: border-color 0.3s ease; }
.cursors__c.is-rust { opacity: 0.9; }
.cursors__c .rv-cursor__pijl { transition: opacity 0.2s ease; }
.cursors__c .rv-cursor__gum { position: absolute; top: -0.45rem; left: -0.45rem; display: block; width: 1.7rem; height: 1.7rem; opacity: 0; transition: opacity 0.2s ease; }
.cursors__c.is-gum .rv-cursor__pijl { opacity: 0; }
.cursors__c.is-gum .rv-cursor__gum { opacity: 1; }

/* Krabbels in de cases (krabbels.js): een woord met de hand op het roze, in
   donkere inkt; de cursor in de donkere variant (ook de zwevende cursors). */
.cases__item.heeft-krabbel { position: relative; }
.cases-krabbel { position: absolute; top: 0; left: 0; z-index: 3; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.cases-krabbel path { fill: none; stroke: var(--c-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cases-cursor { z-index: 5; pointer-events: none; opacity: 0; visibility: hidden; }
.fases__cursor--team.is-donker { color: var(--c-ink); }
.fases__cursor--team.is-donker .fases__cursor-fotos { border-color: var(--c-ink); }

/* ---------- InnoGPT (vraaghet.js) ---------- */
/* De plek van het zoekveld (zweeft het veld, dan houdt deze zijn hoogte). */
.kb3-zoek-plek { width: min(100%, 58rem); margin-top: 0.75rem; }
/* Schakelaar Traditioneel | InnoGPT: donkere pil op roze, lavendel pil schuift. */
.kb3-modus { position: relative; display: inline-flex; align-items: center; margin-top: 0.5rem; padding: 0.3rem; border-radius: var(--radius-pill); background: var(--c-ink); isolation: isolate; }
.kb3-modus[hidden] { display: none; }
.kb3-modus__pil { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0; z-index: -1; width: 0; border-radius: var(--radius-pill); background: var(--c-lavender); transition: transform 0.6s var(--ease-im), width 0.6s var(--ease-im); }
.kb3-modus__knop { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.5rem; padding: 0 1.1rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-lavender); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; cursor: pointer; transition: color 0.45s var(--ease-im); }
.kb3-modus__knop.is-actief { color: var(--c-ink); }
.kb3-modus__knop:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.kb3-modus__merk { width: 1.35rem; height: auto; }
/* Microfoon: zo groot als de roze knop; staat er tekst, dan maakt hij plaats
   voor het wis-kruisje (behalve tijdens het luisteren). */
.kb3-zoek__mic { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--kb3-h) - 2 * var(--kb3-m)); aspect-ratio: 1; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: transparent; color: var(--c-white); cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.kb3-zoek__mic[hidden] { display: none; }
.kb3-zoek__mic svg { position: relative; width: 38%; height: 38%; }
.kb3-zoek__mic:hover { border-color: var(--c-white); background: rgba(255, 255, 255, 0.08); }
.kb3-zoek__mic:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.kb3-zoek.heeft-tekst:not(.is-luistert) .kb3-zoek__mic { display: none; }
.kb3-zoek.is-luistert .kb3-zoek__wis { display: none; }
.kb3-zoek.is-luistert .kb3-zoek__mic { border-color: var(--c-lavender); background: var(--c-lavender); color: var(--c-ink); }
.kb3-zoek.is-luistert .kb3-zoek__mic::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--c-lavender); animation: kb3-luister 1.4s var(--ease-out) infinite; }
@keyframes kb3-luister { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.55); opacity: 0; } }
.menu-dim .kb3-filter,
.lang-dim .kb3-filter,
.lw-dim .kb3-filter { opacity: 0; pointer-events: none; }
/* Dicteren: het microfoontje wordt een spraakgolf; komt er tekst binnen, dan
   slaat hij even feller uit (is-praat). */
.kb3-golf { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 0.2rem; }
.kb3-golf i { display: block; flex: none; width: 0.16rem; height: 16%; border-radius: 99px; background: currentColor; }
.kb3-zoek.is-luistert .kb3-zoek__mic svg { display: none; }
.kb3-zoek.is-luistert .kb3-golf { display: flex; }
.kb3-zoek.is-luistert .kb3-golf i { animation: kb3-golf 0.9s ease-in-out infinite; }
.kb3-golf i:nth-child(1) { animation-delay: -0.25s; }
.kb3-golf i:nth-child(2) { animation-duration: 1.1s; animation-delay: -0.55s; }
.kb3-golf i:nth-child(3) { animation-duration: 0.8s; }
.kb3-golf i:nth-child(4) { animation-duration: 1.05s; animation-delay: -0.35s; }
.kb3-golf i:nth-child(5) { animation-delay: -0.7s; }
.kb3-zoek__mic.is-praat .kb3-golf i { animation-name: kb3-golf-hard; }
@keyframes kb3-golf { 0%, 100% { height: 12%; } 50% { height: 40%; } }
@keyframes kb3-golf-hard { 0%, 100% { height: 18%; } 50% { height: 62%; } }
/* In de chat: geen onderwerpen, geen lijst, geen schakelaar vragen | blogs. */
.kb3.is-chat .kb-schakel,
.kb3.is-chat .kb3-filter { display: none; }
/* Verborgen is verborgen (de blokken hebben zelf een display). */
.kb3__boven[hidden],
.kb3__index[hidden] { display: none; }
/* Het chatvlak: schermhoog (net als de blokken bovenin), met 10px marge en
   ronde hoeken; het gesprek scrolt binnen het vlak, de invoer staat onderin. */
.kb3-chat { display: flex; flex-direction: column; height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); border-radius: var(--radius); background: var(--c-panel); overflow: hidden; }
.kb3-chat[hidden] { display: none; }
.kb3-chat__kop { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: calc(var(--header-top) + var(--btn-h) + 1rem) max(clamp(1rem, 3vw, 2rem), calc((100% - 52rem) / 2)) 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.kb3-chat__naam { display: grid; margin-right: auto; }
.kb3-chat__modus .kb3-modus { margin-top: 0; background: var(--c-bg-licht); }
.kb3-chat__naam small { transition: color 0.3s ease; }
.kb3-chat__naam small.is-typt { color: var(--c-lavender); }
.kb3-chat__naam small.is-typt::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.35em; border-radius: 50%; background: currentColor; vertical-align: 0.15em; animation: kb3-stip 0.9s ease-in-out infinite; }
.kb3-chat__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1rem, 3vw, 2rem) 1.5rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.kb3-chat__invoer { flex: none; padding: 0.75rem clamp(0.75rem, 3vw, 2rem) clamp(0.75rem, 2.2vh, 1.4rem); }
.kb3-chat__invoer .kb3-zoek { --kb3-h: clamp(3.5rem, 3rem + 1.2vw, 4.5rem); width: min(100%, 52rem); margin: 0 auto; background: var(--c-bg); }
.kb3-chat__invoer .kb3-zoek__veld,
.kb3-chat__invoer .kb3-zoek__typ { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); }
.kb3-chat__naam b { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.2; }
.kb3-chat__naam small { color: var(--c-mute); font-size: var(--fs-small); }
.kb3-chat__knop { height: 3.1rem; padding: 0 1.3rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); background: none; color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.kb3-chat__knop:hover,
.kb3-chat__knop:focus-visible { border-color: var(--c-lavender); color: var(--c-lavender); }
.kb3-chat__draad { display: grid; gap: clamp(1.25rem, 3vh, 1.75rem); width: min(100%, 48rem); margin: 0 auto; }
.kb3-chat__noot { width: min(100%, 48rem); margin: 2rem auto 0; color: var(--c-mute); font-size: var(--fs-small); line-height: 1.45; text-align: center; }
.kb3-msg { display: flex; align-items: flex-start; gap: 0.9rem; }
.kb3-msg--jij { justify-content: flex-end; }
.kb3-msg__bubbel { max-width: min(36rem, 85%); margin: 0; padding: 0.75rem 1.15rem; border-radius: 1.4rem 1.4rem 0.4rem 1.4rem; background: var(--c-lavender); color: var(--c-ink); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.4; overflow-wrap: anywhere; }
.kb3-msg__avatar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); }
.kb3-msg__merk { width: 62%; height: auto; }
.kb3-msg__inhoud { display: grid; justify-items: start; gap: 1rem; min-width: 0; padding-top: 0.3rem; }
.kb3-msg__tekst { color: rgba(255, 255, 255, 0.9); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.kb3-msg__tekst p { margin: 0; }
.kb3-msg__tekst p + p { margin-top: 0.8em; }
.kb3-msg__tekst.is-stroomt > p:last-child::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.3em; border-radius: 50%; background: var(--c-lavender); vertical-align: 0.05em; animation: kb3-stip 0.9s ease-in-out infinite; }
@keyframes kb3-stip { 50% { opacity: 0.25; transform: scale(0.7); } }
.kb3-msg__typt { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; padding: 0.85rem 1rem; border-radius: 1.2rem; background: var(--c-bg-licht); }
.kb3-msg__typt i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-lavender); animation: kb3-typt 1s ease-in-out infinite; }
.kb3-msg__typt i:nth-child(2) { animation-delay: 0.15s; }
.kb3-msg__typt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes kb3-typt { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.kb3-msg__acties { margin: 0; }
.kb3-msg__lees { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-lavender); font-family: var(--f-display); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease-im); }
.kb3-msg__lees svg { width: 1.15rem; height: 1.15rem; transition: translate 0.45s var(--ease-im); }
.kb3-msg__lees:hover,
.kb3-msg__lees:focus-visible { background-size: 100% 1px; }
.kb3-msg__lees:hover svg { translate: 0.2rem 0; }
.kb3-msg__ook { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kb3-msg__ook-kop { width: 100%; color: var(--c-mute); font-size: var(--fs-small); }
.kb3-chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.45rem 1rem; border: 1px solid color-mix(in srgb, var(--c-lavender) 50%, transparent); border-radius: var(--radius-pill); background: none; color: var(--c-lavender); font: inherit; font-size: 0.9375rem; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.kb3-chip:hover,
.kb3-chip:focus-visible { border-color: var(--c-lavender); background: var(--c-lavender); color: var(--c-ink); }
.kb3-msg__mail { display: flex; align-items: center; gap: 0.5rem; width: min(100%, 26rem); }
.kb3-msg__veld { flex: 1; min-width: 0; height: 3rem; padding: 0 1.15rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.04); color: var(--c-white); font: inherit; font-size: 1rem; }
.kb3-msg__veld::placeholder { color: rgba(255, 255, 255, 0.45); }
.kb3-msg__veld:focus { outline: none; border-color: var(--c-lavender); }
.kb3-msg__stuur { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: var(--c-lavender); color: var(--c-ink); cursor: pointer; }
.kb3-msg__stuur svg { width: 42%; height: 42%; }
.kb3-msg__stuur:disabled { opacity: 0.6; }
.kb3-msg__fout { margin: 0; color: var(--c-lavender); font-size: var(--fs-small); font-weight: 600; }
.kb3-msg__fout[hidden] { display: none; }
@media (max-width: 56.24em) {
	.kb3-chat { height: calc(100svh - 2 * var(--frame)); }
	.kb3-chat__kop { padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 0.75rem); }
	.kb3-chat__kop .kb3-chat__knop { display: none; }
	.kb3-msg__avatar { width: 2.1rem; height: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.kb3-zoek.is-luistert .kb3-zoek__mic::before,
	.kb3-zoek.is-luistert .kb3-golf i,
	.kb3-chat__naam small.is-typt::after,
	.kb3-msg__typt i,
	.kb3-msg__tekst.is-stroomt > p:last-child::after { animation: none; }
}

/* ---------- Vraagpagina: schetsbord en delen (vraag.js) ---------- */
.vraag__midden { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: var(--frame); }
.vraag__bord { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame)); height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); margin-top: var(--frame); }
.vraag__vak { position: relative; height: 100%; overflow: hidden; border-radius: var(--radius); background: radial-gradient(120% 80% at 50% 45%, var(--c-bord), var(--c-bord-rand)); }
.vraag__deel { display: grid; justify-items: start; gap: 0.85rem; width: 100%; max-width: 42rem; padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.vraag__deel-kop { margin: 0; font-family: var(--f-display); font-weight: 500; color: var(--c-lavender); }
.vraag__deel-rij { display: flex; flex-wrap: wrap; gap: 0.75rem 0.5rem; }
.vraag__deel-knop { height: 2.75rem; padding: 0 1.15rem; font-size: 0.9375rem; }
.vraag__deel-knop[hidden] { display: none; }
.vraag__deel-knop .pill__label { display: inline-flex; align-items: center; gap: 0.55rem; }
/* Alleen de iconen (niet de krabbel, die is ook een svg). Lijniconen (Lucide)
   als lijn, de merken (Simple Icons, CC0) gevuld. */
.vraag__deel-knop .pill__label svg { flex: none; width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vraag__deel-knop .pill__label .vraag__deel-merk { width: 1.2rem; height: 1.2rem; fill: currentColor; stroke: none; }
.vraag__deel-knop.is-gekopieerd { border-color: var(--c-lavender); }
@media (max-width: 56.24em) {
	.vraag__midden { grid-template-columns: minmax(0, 1fr); }
	.vraag__bord { display: none; }
}

/* Extra pil achter een menuregel (Theme Settings > Menu > Extra pil, bv. GPT
   bij Kennisbank): lavendel omlijnd met ons logo, loopt vol met de krabbel.
   menu.js zet hem achter de tekst (--pil-x). */
.drawer__item { position: relative; }
.drawer__pil { position: absolute; top: 50%; left: var(--pil-x, 0); display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.95rem 0 0.75rem; border: 1px solid var(--c-lavender); border-radius: var(--radius-pill); color: var(--c-lavender); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate; translate: 0 -50%; --scribble: var(--c-lavender); }
.drawer__pil-label { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.3s ease 0.32s; }
.drawer__pil-merk { width: 1.2rem; height: auto; }
.drawer__pil.is-hover,
.drawer__pil:focus-visible { color: var(--c-ink); }
.drawer__pil:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.drawer__list--2 .drawer__pil { height: 1.9rem; font-size: 0.8125rem; }
/* Te weinig ruimte (telefoon): alleen het logo in een rondje, of helemaal niet. */
.drawer__pil.is-klein { width: 2.25rem; padding: 0; justify-content: center; }
.drawer__pil.is-klein .drawer__pil-label { gap: 0; font-size: 0; }
.drawer__pil.is-weg { display: none; }

/* ---------- Blog (single-post.php): de opmaak van een vraagpagina, met naast
   de tekst een sfeerbeeld van ons (desktop vast in beeld, telefoon erboven). ---------- */
.blog__titel { max-width: 21ch; font-size: clamp(2.25rem, 0.9rem + 3.6vw, 5rem); line-height: 1.02; }
/* Onder de titel omlijnde pillen; de auteur met een fotootje en een pijltje
   (een teamlid opent het auteurspaneel, de pil loopt dan vol met de krabbel). */
.blog__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.blog__pil { position: relative; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; border: 0; border-radius: var(--radius-pill); background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 32%, transparent); color: var(--c-ink); font: inherit; font-size: 0.9375rem; line-height: 1; white-space: nowrap; }
.blog__pil--auteur { padding: 0 1rem 0 0.3rem; font-family: var(--f-display); font-weight: 500; }
button.blog__pil { overflow: hidden; isolation: isolate; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 55%, transparent); --scribble: var(--c-ink); -webkit-tap-highlight-color: transparent; }
button.blog__pil:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
button.blog__pil:focus-visible .scribble path { stroke-width: 62; }
.blog__pil-label { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; transition: color 0.3s ease 0.32s; }
.blog__pil.is-hover .blog__pil-label,
button.blog__pil:focus-visible .blog__pil-label { color: var(--c-lavender); }
.blog__pil-foto { flex: none; display: block; width: 1.9rem; height: 1.9rem; overflow: hidden; border-radius: 50%; background: var(--c-ink); }
.blog__pil-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog__pil-foto--merk { display: grid; place-items: center; color: var(--c-lavender); }
.blog__pil-merk { width: 62%; height: auto; }
.blog__pil-pijl { flex: none; width: 1rem; height: 1rem; transition: translate 0.45s var(--ease-im); }
.blog__pil.is-hover .blog__pil-pijl { translate: 0.12rem -0.12rem; }
/* Links in een antwoord of blog: zoals in de hero een subtiele bruine
   onderstreping die bij hover van links naar rechts lavendel volloopt, en de
   tekst kleurt mee. Met een achtergrond in plaats van pseudo-elementen, zodat
   een link ook over twee regels mag lopen. */
.vraag__antwoord a,
.vraag__artikel a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(var(--c-lavender), var(--c-lavender)) 0 100% / 0 1px no-repeat, linear-gradient(var(--c-underline), var(--c-underline)) 0 100% / 100% 1px no-repeat;
	padding-bottom: 0.08em;
	transition: color 0.35s ease, background-size 0.6s var(--ease-im);
}
.vraag__antwoord a:focus-visible,
.vraag__artikel a:focus-visible { color: var(--c-lavender); background-size: 100% 1px, 100% 1px; }
@media (hover: hover) {
	.vraag__antwoord a:hover,
	.vraag__artikel a:hover { color: var(--c-lavender); background-size: 100% 1px, 100% 1px; }
}
/* Een link naar een andere site krijgt vanzelf een klein pijltje schuin
   omhoog (alles met http dat niet naar innovatiemedia.nl gaat). */
.vraag__antwoord a[href^="http"]:not([href*="innovatiemedia.nl"])::after,
.vraag__artikel a[href^="http"]:not([href*="innovatiemedia.nl"])::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-left: 0.25em;
	background: currentColor;
	opacity: 0.55;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M8 7h9v9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M8 7h9v9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate 0.45s var(--ease-im), opacity 0.3s ease;
}
.vraag__antwoord a[href^="http"]:not([href*="innovatiemedia.nl"]):focus-visible::after,
.vraag__artikel a[href^="http"]:not([href*="innovatiemedia.nl"]):focus-visible::after { opacity: 1; translate: 0.08em -0.08em; }
@media (hover: hover) {
	.vraag__antwoord a[href^="http"]:not([href*="innovatiemedia.nl"]):hover::after,
	.vraag__artikel a[href^="http"]:not([href*="innovatiemedia.nl"]):hover::after { opacity: 1; translate: 0.08em -0.08em; }
}
/* Zwevende terugknop (vraag.js, GSAP): de roze knop vliegt linksonder van
   onderen in beeld met een kleine bounce zodra de terugknop bovenin weg is,
   en vliegt op dezelfde manier omgekeerd weer weg als je terug bent of bij
   de footer. Zonder JS blijft hij weg. Niet zolang de pagina een kaart is
   (menu, panelen). */
.vraag__zweef {
	position: fixed;
	left: var(--gutter);
	bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
	z-index: 45;
	visibility: hidden;
}
.vraag__zweef[inert] { pointer-events: none; }
.vraag__zweef:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.page-card .vraag__zweef { visibility: hidden !important; } /* GSAP zet visibility inline */
/* Genummerde lijsten in een antwoord of blog: het cijfer in een lavendel
   omlijnd rondje (op verzoek), op de eerste regel gecentreerd. */
.vraag__artikel ol { padding-left: 0; list-style: none; counter-reset: im-stap; }
.vraag__artikel ol > li { position: relative; padding-left: 2.4em; counter-increment: im-stap; }
.vraag__artikel ol > li + li { margin-top: 0.8em; }
/* Rondje van ~1,55x de tekst, in een kleiner cijfer (0,78) gemeten: 2em
   breed; de regel is 1,65 hoog, dus 0,06em omlaag staat hij in het midden. */
.vraag__artikel ol > li::before {
	content: counter(im-stap);
	position: absolute;
	top: 0.06em;
	left: 0;
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	border: 1px solid var(--c-lavender);
	border-radius: 50%;
	color: var(--c-lavender);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 0.78em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 56.24em) {
	.vraag__zweef { left: calc(var(--frame) * 2); bottom: calc(var(--frame) * 2 + env(safe-area-inset-bottom, 0px)); }
}
.blog__beeld { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-tegel); }
.blog__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: blog-beeld 2.6s var(--ease-out) 0.3s both; }
@keyframes blog-beeld { from { scale: 1.08; } }
@media (max-width: 56.24em) {
	.blog .vraag__bord { display: block; position: relative; top: auto; order: -1; height: auto; }
	.blog__beeld { aspect-ratio: 4 / 3; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.blog__beeld img { animation: none; }
}

/* ---------- Auteurspaneel (auteur.js) ----------
   Net als let's work: rechts onder de pagina, die als kaart naar links
   schuift en dimt. Een profiel in de stijl van het profiel in let's work:
   foto met een lavendel ring, naam, functie, LinkedIn, dan blokjes met wie
   hij of zij is, de loopbaan (een lijn met rondjes, het nu gevuld) en de
   blogs die hij of zij schreef. */
.aupanel { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); right: 0; bottom: 0; left: 0; z-index: 1; background: var(--c-panel); visibility: hidden; }
.au-open .aupanel { visibility: visible; }
.aupanel-catch { position: fixed; top: 0; right: var(--lw-panel-w); bottom: 0; left: 0; z-index: 50; visibility: hidden; cursor: pointer; }
.au-open .aupanel-catch { visibility: visible; }
.au-anim .site-main,
.au-anim [data-header-item] { transition: opacity 0.4s ease; }
.au-dim .site-main,
.au-dim [data-header-item] { opacity: 0.7; }
.aupanel__panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--lw-panel-w); overflow: hidden; background: var(--c-panel); }
.aupanel__close { position: absolute; top: var(--header-top); right: var(--gutter); z-index: 2; display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); padding: 0; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: var(--c-panel); color: var(--c-white); cursor: pointer; transition: border-color 0.3s, rotate 0.6s var(--ease-im); }
.aupanel__close svg { width: 1.1rem; height: 1.1rem; }
.aupanel__close:hover { border-color: var(--c-lavender); rotate: 90deg; }
.aupanel__close:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.auprofiel { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: calc(var(--header-top) + var(--btn-h) + 1rem) var(--gutter) var(--gutter); }
.auprofiel::-webkit-scrollbar { display: none; }
.auprofiel__hoofd { display: grid; justify-items: center; gap: 0.4rem; text-align: center; }
.auprofiel__foto { display: block; width: 8.5rem; height: 8.5rem; margin-bottom: 1rem; overflow: hidden; border-radius: 50%; background: var(--c-bg); outline: 1px solid var(--c-lavender); outline-offset: 6px; }
.auprofiel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auprofiel__naam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--c-white); }
.auprofiel__functie { margin: 0; font-size: 0.9375rem; color: var(--c-lavender); }
.auprofiel__linkedin { height: 2.75rem; margin-top: 1rem; padding: 0 1.15rem; font-size: 0.9375rem; }
.auprofiel__linkedin .pill__label { display: inline-flex; align-items: center; gap: 0.55rem; }
.auprofiel__linkedin .pill__label svg { flex: none; width: 1.1rem; height: 1.1rem; fill: currentColor; }
.auprofiel__blok { margin-top: 0.75rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--c-blok); }
.auprofiel__hoofd + .auprofiel__blok { margin-top: 2rem; }
.auprofiel__label { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--c-mute); }
/* Over: groter (op verzoek), zoals een korte inleiding. */
.auprofiel__over { color: rgba(255, 255, 255, 0.92); font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem); line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
.auprofiel__over > * + * { margin-top: 0.7em; }
/* Verjaardag: de datum met een taartje, rechts het aftellen als omlijnde
   pil (de laatste week gevuld lavendel). */
.auprofiel__jarig-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.auprofiel__datum { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.1; color: var(--c-white); }
.auprofiel__datum svg { flex: none; width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--c-lavender); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auprofiel__aftel { display: inline-flex; align-items: center; height: 2.25rem; margin: 0; padding: 0 0.95rem; border: 1px solid var(--c-lavender); border-radius: var(--radius-pill); color: var(--c-lavender); font-size: 0.9375rem; white-space: nowrap; }
.auprofiel__aftel.is-bijna { background: var(--c-lavender); color: var(--c-ink); }
.auprofiel__aftel[hidden] { display: none; }
.auprofiel__blogs { margin: 0 0 -0.35rem; padding: 0; list-style: none; }
.auprofiel__blogs li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.auprofiel__blog { column-gap: 1rem; margin: 0 -0.6rem; padding: 0.75rem 0.6rem; border-radius: 0.7rem; }
.auprofiel__blog .kb3-vraag__vraag { font-size: 1.0625rem; }
.auprofiel__blog .kb3-vraag__pijl { width: 2.5rem; height: 2.5rem; }

/* ---------- ZIP-paneel (template-parts/zip-panel.php, portaal.js) ----------
   Op verzoek zoals de taalwisselaar: rechts onder de pagina, die als kaart
   naar links schuift (card.js). Bovenin de samenvatting van de ZIP (scrolt),
   onderin vast naar wie hij gaat. */
.zppanel { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); right: 0; bottom: 0; left: 0; z-index: 1; background: var(--c-panel); visibility: hidden; }
.zp-open .zppanel { visibility: visible; }
.zppanel-catch { position: fixed; top: 0; right: var(--lw-panel-w); bottom: 0; left: 0; z-index: 50; visibility: hidden; cursor: pointer; }
.zp-open .zppanel-catch { visibility: visible; }
.zp-anim .site-main,
.zp-anim [data-header-item] { transition: opacity 0.4s ease; }
.zp-dim .site-main,
.zp-dim [data-header-item] { opacity: 0.7; }
.zppanel__panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--lw-panel-w); overflow: hidden; background: var(--c-panel); }
.zppanel__inhoud { display: flex; flex-direction: column; height: 100%; }
.zp__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: calc(var(--header-top) + var(--btn-h) + 1.5rem) var(--gutter) 1.5rem; }
.zp__scroll::-webkit-scrollbar { display: none; }
.zp__kicker { margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--c-lavender); }
.zp__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--c-white); text-wrap: balance; }
/* Drie cijfers als blokjes, zoals de blokjes in het auteurspaneel. */
.zp__cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; margin-top: 1.75rem; }
.zp__cijfer { display: grid; align-content: space-between; gap: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--c-blok); }
.zp__cijfer p { margin: 0; }
.zp__cijfer-label { font-size: 0.8125rem; color: var(--c-mute); }
.zp__cijfer-waarde { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; color: var(--c-white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zp__cijfer:first-child .zp__cijfer-waarde { color: var(--c-lavender); }
/* Smal paneel (telefoon): het totaal over de hele breedte bovenaan, aantal en btw eronder naast elkaar. */
@media (max-width: 47.99em) {
	.zp__cijfers { grid-template-columns: 1fr 1fr; }
	.zp__cijfer:nth-child(2) { grid-column: 1 / -1; order: -1; }
	.zp__cijfer:nth-child(2) .zp__cijfer-waarde { font-size: 2rem; }
}
.zp__statussen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.zp__statussen:empty { display: none; }
.zp__status { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.1rem; padding: 0 0.9rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-mute); font-size: 0.8125rem; }
.zp__status b { font-weight: 600; color: var(--c-white); }
.zp__blok { margin-top: 0.75rem; padding: 1.1rem 1.2rem 0.4rem; border-radius: var(--radius); background: var(--c-blok); }
.zp__label { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--c-mute); }
.zp__label span { color: var(--c-white); }
.zp__lijst { margin: 0; padding: 0; list-style: none; }
.zp__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icoon nr bedrag" "icoon oms oms"; align-items: center; column-gap: 0.85rem; row-gap: 0.15rem; padding: 0.8rem 0; }
.zp__item + .zp__item { border-top: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent); }
.zp__icoon { grid-area: icoon; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 45%, transparent); color: var(--c-lavender); }
.zp__icoon svg { width: 1.1rem; height: 1.1rem; }
.zp__nr { grid-area: nr; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--c-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp__bedrag { grid-area: bedrag; font-family: var(--f-display); font-weight: 500; font-size: 1rem; color: var(--c-white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zp__oms { grid-area: oms; font-size: 0.8125rem; color: var(--c-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Onderin vast: naar wie, versturen, of zelf downloaden. */
.zp__voet { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 1.25rem var(--gutter) max(1.25rem, env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); background: var(--c-panel); }
.zp__voet .portaal-mail__veld { background: var(--c-blok); box-shadow: none; }
.zp__voet .portaal-mail__veld:focus { box-shadow: inset 0 0 0 1px var(--c-lavender); }
.zp__fout { margin: 0; color: var(--c-lavender); font-size: 0.875rem; }
.zp__fout[hidden] { display: none; }
.zp__download { position: relative; justify-self: start; color: var(--c-mute); font-size: 0.875rem; }
.zp__download:hover { color: var(--c-white); }
/* Verstuurd: een getekend vinkje met wie hem krijgt. */
.zp__klaar { display: grid; justify-items: start; gap: 0.35rem; padding: 0.25rem 0 0.4rem; }
.zp__vink { width: 3rem; height: 3rem; margin-bottom: 0.5rem; color: var(--c-lavender); }
.zp__klaar-kop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--c-white); }
.zp__klaar-tekst { margin: 0 0 0.5rem; color: var(--c-mute); font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.zp__klaar .portaal-link { font-size: 0.875rem; color: var(--c-lavender); }

/* Bezig (downloaden, versturen; portaal.js bezig()): de knop wordt drie
   wachtende stipjes, zoals uitloggen. De tekst blijft onzichtbaar staan,
   dus de knop houdt zijn maat. */
.laad-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.3rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.laad-dots i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; animation: uit-stip 1s ease-in-out infinite; }
.laad-dots i:nth-child(2) { animation-delay: 0.15s; }
.laad-dots i:nth-child(3) { animation-delay: 0.3s; }
/* (Uitloggen heeft zijn eigen stipjes, .uit__dots: die niet verbergen.) */
/* Alleen in knoppen die ooit stipjes kregen en zonder gewicht (:where), zodat eigen overgangen blijven werken. */
:where(:is(.pill__label, .btn__label, .zp__download):has(> .laad-dots) > :not(.laad-dots, .uit__dots)) { transition: opacity 0.25s ease; }
:is(.pill, .btn, .zp__download).is-bezig { pointer-events: none; }
.is-bezig > :is(.pill__label, .btn__label) > :not(.laad-dots, .uit__dots),
.zp__download.is-bezig > :not(.laad-dots) { opacity: 0; }
.is-bezig > :is(.pill__label, .btn__label) > .laad-dots,
.zp__download.is-bezig > .laad-dots { opacity: 1; }
.zp__download.is-bezig { background-size: 0 1px; }
.zp__download.is-bezig .laad-dots { justify-content: flex-start; }
/* Wachten op de volgende pagina (app.js wachtStart): de aangeklikte knop of pil wordt dezelfde stipjes. De
   tekst kan een los tekstknooppunt zijn, dus onzichtbaar via text-fill (currentColor blijft voor de stipjes). */
:is(.pill, .btn).is-laadt { pointer-events: none; }
.is-laadt > :is(.pill__label, .btn__label) { -webkit-text-fill-color: transparent; }
.is-laadt > :is(.pill__label, .btn__label) > :not(.laad-dots) { opacity: 0; }
.is-laadt > :is(.pill__label, .btn__label) > .laad-dots { opacity: 1; }
/* Rechtsonder een klein draaiend rondje zolang de volgende pagina binnenkomt (na 0,2 s). */
.wacht {
	position: fixed;
	z-index: 59;
	right: calc(var(--frame) * 2 + env(safe-area-inset-right, 0px));
	bottom: calc(var(--frame) * 2 + env(safe-area-inset-bottom, 0px));
	width: 1.375rem;
	height: 1.375rem;
	border: 1.5px solid color-mix(in srgb, var(--c-white) 18%, transparent);
	border-top-color: var(--c-lavender);
	border-radius: 50%;
	opacity: 0;
	scale: 0.7;
	pointer-events: none;
	animation: wacht-draai 0.9s linear infinite;
	transition: opacity 0.3s ease, scale 0.3s ease;
}
.wacht.is-aan { opacity: 1; scale: 1; }
@keyframes wacht-draai { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .wacht { animation-duration: 2.4s; } }

/* ---------- Kennisbank, blogs v3 (kennisbank-blogs.php, kennisbank.js) ----------
   In de opmaak van "Vraag het ons": bovenin het roze zoekvak (groot zoekveld,
   schakelaar Alles | Handleidingen | Actueel, onderwerpen als pillen) en
   rechts de nieuwste blog; daaronder de kaarten in een raster. De 10px boven
   de vlakken is padding op .kb3, geen marge: de oude opbouw had marge op de
   sectie, die viel door de pagina heen, en dan scheen bovenin in de drie
   tussenruimtes naast de randen de donkere onderlaag door (drie zwarte
   vierkantjes). */
.kb3--blog { --kb-tegel: var(--c-panel); --kb-tegel-hover: var(--c-blok-2); }
/* De schakelaar Kennisbank | InnoGPT | Blogs (kennisbank-wissel.php): de
   opmaak van .kb3-modus, maar met links. */
.kb-wissel .kb3-modus__knop { text-decoration: none; white-space: nowrap; }
.kb-wissel .kb3-modus__knop:not(.is-actief):hover { color: var(--c-white); }
/* Zwevend onderin: dezelfde drie in de vorm van de zwevende schakelaar
   (drie gelijke kolommen, de lavendel pil schuift per derde). In het midden
   van het scherm, ook in de blokopbouw van .kb3. */
.kb-schakel--drie { grid-template-columns: repeat(3, 1fr); width: max-content; margin-inline: auto; }
.kb-schakel--drie .kb-schakel__pil { width: calc((100% - 0.6rem) / 3); }
.kb-schakel--chat .kb-schakel__pil { translate: 100% 0; }
.kb-schakel--drie.kb-schakel--blogs .kb-schakel__pil { translate: 200% 0; }
.kb-schakel--drie .kb-schakel__link { gap: 0.45rem; padding: 0 1.2rem; }
.kb-schakel--drie .kb3-modus__merk { width: 1.3rem; height: auto; }
@media (max-width: 30em) {
	.kb-schakel--drie .kb-schakel__link { gap: 0.3rem; padding: 0 0.8rem; font-size: 0.875rem; }
	.kb-schakel--drie .kb3-modus__merk { width: 1.1rem; }
}
/* Pillen: eerst de soort, een streepje, dan de onderwerpen. */
.kb-pillen { align-items: center; }
.kb-pillen__streep { flex: none; width: 1px; height: 1.5rem; margin: 0 0.35rem; background: color-mix(in srgb, var(--c-ink) 28%, transparent); }
/* Onderwerpen als pillen: aan = donker met een kruisje, nog een klik zet hem uit. */
.kb-pil { border: 0; background: none; font-family: inherit; cursor: pointer; }
.kb-pil__x { display: inline-grid; place-items: center; width: 0; height: 1rem; margin-left: -0.5rem; overflow: hidden; opacity: 0; transition: width 0.45s var(--ease-im), margin 0.45s var(--ease-im), opacity 0.3s ease; }
.kb-pil__x svg { flex: none; width: 0.95rem; height: 0.95rem; }
.kb-pil.is-actief { background: var(--c-ink); color: var(--c-lavender); }
.kb-pil.is-actief .kb-pil__x { width: 0.95rem; margin-left: 0; opacity: 1; }
.kb-pil.is-leeg { opacity: 0.35; pointer-events: none; }
/* Rechts de nieuwste blog: de foto vult de ruimte boven de tekst. */
.kb-uitgelicht__foto .kb3-ingang__img { transition: scale 0.9s var(--ease-out); }
/* De titel gewoon wit, zonder onderstreping (op verzoek); bij hover lavendel. */
.kb3-ingang__kop.kb-uitgelicht__kop { color: var(--c-white); }
.kb-uitgelicht__kop a,
.kb-uitgelicht__kop a:hover { color: inherit; text-decoration: none; background: none; transition: color 0.35s ease; }
.kb-uitgelicht__kop a:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 4px; border-radius: 0.2em; }
@media (hover: hover) and (pointer: fine) {
	.kb-uitgelicht:hover .kb-uitgelicht__foto .kb3-ingang__img { scale: 1.04; }
	.kb-uitgelicht__kop a:hover { color: var(--c-lavender); }
}
/* De kaarten: drie naast elkaar, met een vaste rand bovenin (marge-truc). */
/* Strak onder de vlakken bovenin (10px, op verzoek) en zonder ruimte onder
   de lijst: de onderste rij kaarten krijgt binnenin ruimte voor de zwevende
   schakelaar (is-onderrij, kennisbank.js). Het aantal blogs alleen voor
   schermlezers (aria-live bij zoeken en filteren). */
.kb-blogs { padding: var(--frame) 0 0; }
.kb-blogs .kb3__aantal { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kb3--blog .kb-artikel.is-onderrij .kb-artikel__tekst { padding-bottom: calc(1.1rem + 5.5rem); }
/* De zwevende schakelaar neemt hier netto geen ruimte in (hoogte 3,35rem +
   marge onder 1,25rem terug met de marge boven), zodat tussen de laatste
   kaarten en de footer precies de 10px van de pagina zit. */
.kb3--blog .kb-schakel { margin-top: calc(-1 * (3.35rem + 1.25rem)); }
.kb-blogs .kb__leeg { margin-bottom: var(--frame); }
.kb-blogs__raster { position: relative; }
.kb-blogs__raster > .kb__rand { margin: calc(-1 * var(--frame)) 0 calc(-1 * var(--radius)); }
/* De rand per kolom (zelfde kolommen als de kaarten): elk kaartje houdt bij
   het wegscrollen 10px marge en zijn eigen ronde hoeken, ook in het midden. */
.kb-blogs__rand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--frame); background: none; }
.kb-blogs__rand > i {
	display: block;
	background:
		linear-gradient(var(--c-bg), var(--c-bg)) top / 100% var(--frame) no-repeat,
		radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) left var(--frame) / var(--radius) var(--radius) no-repeat,
		radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) right var(--frame) / var(--radius) var(--radius) no-repeat;
}
@media (max-width: 75em) {
	.kb-blogs__rand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kb-blogs__rand > i:nth-child(3) { display: none; }
}
.kb3--blog .kb-artikelen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb-artikel__soort--actueel { border-color: color-mix(in srgb, var(--c-lavender) 60%, transparent); color: var(--c-lavender); }
/* Zoeken haalt niets weg (zoals bij de vragen): wat past licht op, de rest
   wordt half doorzichtig, de beste krijgt een lavendel kader. */
/* Dimmen met filter (niet met opacity): opacity animeert GSAP bij het
   filteren (uit- en instaggeren), een CSS-transitie daarop liep erdoorheen. */
.kb3--blog .kb-artikel { transition: background-color 0.4s ease, filter 0.45s ease, box-shadow 0.45s ease; }
.kb-blogs.is-zoek .kb-artikel:not(.is-raak) { filter: opacity(0.28); }
.kb-blogs.is-zoek .kb-artikel.is-raak .kb-artikel__titel { color: var(--c-lavender); }
.kb-artikel.is-beste { box-shadow: inset 0 0 0 2px var(--c-lavender); }
.kb-artikel__intro .kb-mark { background: color-mix(in srgb, var(--c-lavender) 28%, transparent); }
@media (max-width: 75em) {
	.kb3--blog .kb-artikelen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56.24em) {
	.kb3--blog .kb-artikelen { grid-template-columns: minmax(0, 1fr); }
	/* Telefoon: de lijst volgt meteen, dus geen aparte nieuwste blog. */
	.kb-uitgelicht,
	.kb3--blog .kb3__rand--ingang { display: none; }
}
@media (max-width: 30em) {
	/* Drie delen naast elkaar passen net: iets smaller. */
	.kb-wissel .kb3-modus__knop { gap: 0.35rem; padding: 0 0.8rem; font-size: 0.875rem; }
	.kb-wissel .kb3-modus__merk { width: 1.15rem; }
}

/* ---------- Mijn omgeving (blok portaal, portaal.js) ----------
   Uitgelogd in de opmaak van de kennisbank: roze vlak met een groot donker
   veld voor je e-mailadres en daarna zes vakjes voor de code, rechts
   lichtbruin met een sfeerbeeld. Ingelogd: roze vlak met "Hoi ..." en wat
   er openstaat, een lichtbruin vlak met de keuzes, daaronder de documenten
   als donkere rijen (of een tijdlijn per maand). Elk vlak met de vaste rand
   bovenin (marge-truc). */
.portaal [hidden] { display: none !important; }
/* Geen onderlaag in de omgeving: geen lege ruimte onder de pagina en de
   pagina altijd minstens het scherm hoog, zodat een kortere lijst nooit de
   donkere onderlaag laat zien. */
.portaal-pagina .onderlaag-ruimte { display: none; }
.portaal-pagina .onderlaag { visibility: hidden; }
.portaal-pagina .site-main { min-height: 100svh; }
.portaal__titel { max-width: 12ch; }
.portaal__stap { width: 100%; max-width: 46rem; margin-top: 0.5rem; }
.portaal-veld .kb3-zoek__veld { font-size: clamp(1.125rem, 0.85rem + 1.2vw, 2rem); }
.portaal-veld.is-bezig .kb3-zoek__stuur { pointer-events: none; animation: portaal-puls 1s ease-in-out infinite; }
@keyframes portaal-puls { 50% { transform: scale(0.88); opacity: 0.6; } }
.portaal__melding { max-width: 40rem; min-height: 1.5em; margin: 0; color: color-mix(in srgb, var(--c-ink) 78%, transparent); font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.portaal__melding.is-fout { color: var(--c-ink); font-weight: 600; }
/* Hint bij een onbekend adres met een bekend domein (portaal.js toonHint):
   het bekende adres gemaskeerd in een donkere pil, de puntjes in lavendel. */
.portaal-hint { display: grid; justify-items: start; gap: 0.75rem; max-width: 40rem; margin-top: 1rem; }
.portaal-hint[hidden] { display: none; }
.portaal-hint__tekst,
.portaal-hint__actie { margin: 0; color: color-mix(in srgb, var(--c-ink) 78%, transparent); font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.portaal-hint__tekst { color: var(--c-ink); font-weight: 600; }
.portaal-hint__adressen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.portaal-hint__adres { display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 1.25rem; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); letter-spacing: 0.01em; white-space: nowrap; }
.portaal-hint__adres > span { display: inline-block; }
.portaal-hint__adres .is-punt { margin: 0 0.06em; color: var(--c-lavender); }
/* Zes vakjes voor de code, met een streepje na de derde. */
.portaal-code { display: grid; gap: 1rem; }
.portaal-code__label { margin: 0; font-family: var(--f-display); font-weight: 500; color: color-mix(in srgb, var(--c-ink) 75%, transparent); }
.portaal-code__vakjes { display: flex; align-items: center; gap: clamp(0.4rem, 0.9vw, 0.75rem); }
.portaal-code__cijfer { width: clamp(3rem, 2.2rem + 2.6vw, 4.75rem); height: clamp(3.75rem, 2.8rem + 3vw, 5.75rem); padding: 0; border: 0; border-radius: 1rem; background: var(--c-bg); color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); text-align: center; caret-color: var(--c-lavender); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.3s ease, transform 0.35s var(--ease-out); -webkit-appearance: none; appearance: none; }
.portaal-code__cijfer:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-lavender), 0 0 0 3px var(--c-ink); transform: translateY(-2px); }
.portaal-code.is-fout .portaal-code__cijfer { box-shadow: inset 0 0 0 2px #e5484d; }
.portaal-code.is-bezig .portaal-code__cijfer { opacity: 0.6; }
.portaal-code__streep { flex: none; width: 0.9rem; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c-ink) 45%, transparent); }
.portaal-code__acties { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.portaal-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 0.9375rem; text-decoration: none; cursor: pointer; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-size: 100% 1px; background-repeat: no-repeat; padding-bottom: 0.1em; transition: opacity 0.3s ease; }
.portaal-link:disabled { opacity: 0.5; cursor: default; background-size: 0 1px; }
.portaal-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.portaal__ingang .kb3-ingang__kop { margin-top: 1.25rem; }

/* Ingelogd: het roze vlak met "Hoi ..." en wat er openstaat. */
/* Het roze vlak direct onder de 10px padding van .kb3 (net als bij het inloggen);
   alleen het vlak eronder heeft 10px tussenruimte. */
.portaal__boven,
.portaal__paneel { display: grid; }
.portaal__paneel { margin-top: var(--frame); }
.portaal__boven > *,
.portaal__paneel > * { grid-area: 1 / 1; }
.portaal__boven > .kb3__rand,
.portaal__paneel > .kb3__rand { align-self: start; }
.portaal__kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem clamp(2rem, 5vw, 5rem); min-height: min(50svh, 30rem); padding: calc(var(--header-top) + var(--btn-h) + 3rem) var(--kb3-p) clamp(2.25rem, 4vw, 3.75rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.portaal__wie { display: grid; gap: 1rem; }
.portaal__hoi { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(3.25rem, 1rem + 7vw, 9rem); line-height: 0.92; letter-spacing: -0.02em; text-wrap: balance; }
.portaal__namen { display: flex; align-items: center; gap: 0.5em; margin: 0; font-size: var(--fs-lead); color: color-mix(in srgb, var(--c-ink) 75%, transparent); }
/* Merkje voor de bedrijfsnaam (portaal.js merk()): eerste letter, het favicon
   van de klant vloeit eroverheen. Vaste maat, dus niets verspringt. */
.portaal__merk { position: relative; flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; overflow: hidden; background: var(--c-ink); color: var(--c-lavender); font-family: var(--f-display); font-weight: 600; font-size: 0.8em; line-height: 1; }
.portaal__merk[hidden] { display: none; }
.portaal__merk-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 16%; object-fit: contain; background: var(--c-white); opacity: 0; transform: scale(0.85); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); }
.portaal__merk.is-geladen .portaal__merk-img { opacity: 1; transform: none; }
/* Twee cijfers naast elkaar, met een haarlijn ertussen (geen knop met stipje).
   Eén raster voor allebei (subgrid): labels, bedragen en tekst staan op
   dezelfde hoogte, ook als een label over twee regels loopt (telefoon). */
.portaal__cijfers { display: grid; grid-auto-flow: column; grid-template-rows: auto auto auto; align-items: end; justify-content: end; gap: 0; margin: 0; }
/* Tot de documenten er zijn (portaal.js klaar()): plek houden, niet tonen. */
.js .portaal.is-laden .portaal__cijfers,
.js .portaal.is-laden .portaal-balk { visibility: hidden; }
.portaal__cijfer { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: end; justify-items: end; row-gap: 0.2rem; margin: 0; padding: 0 0 0 clamp(1.5rem, 3vw, 2.75rem); text-align: right; }
.portaal__cijfer[hidden] { display: none; }
.portaal__cijfer + .portaal__cijfer { margin-left: clamp(1.5rem, 3vw, 2.75rem); border-left: 1px solid color-mix(in srgb, var(--c-ink) 20%, transparent); }
.portaal__cijfer dt,
.portaal__cijfer dd { margin: 0; }
.portaal__cijfer-label { font-family: var(--f-display); font-weight: 500; color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.portaal__cijfer-label { align-self: end; }
.portaal__cijfer-waarde { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 3.5vw, 4.75rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portaal__cijfer-tekst { color: color-mix(in srgb, var(--c-ink) 75%, transparent); }
.portaal__cijfer-tekst .portaal-link { font-size: 1rem; color: var(--c-ink); }
/* Uitloggen: op desktop in de header naast de taalpil, op de telefoon hier. */
.portaal__uit { display: none; }
/* Uitloggen: na een klik drie wachtende stipjes in plaats van de tekst (de
   knop houdt zijn breedte), daarna het afscheid (portaal.js). */
.uit__tekst { transition: opacity 0.25s ease; }
.uit__dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.3rem; opacity: 0; transition: opacity 0.25s ease; }
.uit__dots i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; animation: uit-stip 1s ease-in-out infinite; }
.uit__dots i:nth-child(2) { animation-delay: 0.15s; }
.uit__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes uit-stip { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.is-bezig .uit__tekst { opacity: 0; }
.is-bezig .uit__dots { opacity: 1; }
.is-bezig[data-portaal-uit],
.is-bezig[data-portaal-uit-kop] { pointer-events: none; }

/* De keuzes: één regel, alles even hoog (--pt-h). */
.portaal__keuzes { --pt-h: 3.25rem; position: relative; z-index: 3; display: grid; gap: 1rem; padding: clamp(1.25rem, 2.4vw, 1.75rem) var(--kb3-p); border-radius: var(--radius); background: var(--c-bg-licht); }
.portaal-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.portaal-soort { position: relative; display: inline-flex; align-items: center; height: var(--pt-h); padding: 0.3rem; border-radius: var(--radius-pill); background: var(--c-bg); isolation: isolate; }
.portaal-soort__pil,
.portaal-zweef__pil { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0; z-index: -1; width: 0; border-radius: var(--radius-pill); background: var(--c-lavender); transition: transform 0.6s var(--ease-im), width 0.6s var(--ease-im); }
.portaal-soort__knop { display: inline-flex; align-items: center; gap: 0.55rem; height: 100%; padding: 0 1.25rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); cursor: pointer; transition: color 0.45s var(--ease-im); }
.portaal-soort__knop.is-actief { color: var(--c-ink); }
.portaal-soort__knop:not(.is-actief):hover { color: var(--c-lavender); }
.portaal-soort__knop:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
.portaal-soort__n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.1); font-family: var(--f-body); font-size: 0.75rem; font-variant-numeric: tabular-nums; transition: background-color 0.45s var(--ease-im), color 0.45s var(--ease-im); }
.portaal-soort__knop.is-actief .portaal-soort__n { background: var(--c-ink); color: var(--c-lavender); }
/* Pil met paneel: label klein, gekozen waarde groot; gekozen = lavendel rand. */
.portaal-kies { position: relative; }
.portaal-kies__knop { display: inline-flex; align-items: center; gap: 0.6rem; height: var(--pt-h); padding: 0 1.1rem 0 1.35rem; border: 0; border-radius: var(--radius-pill); background: var(--c-bg); box-shadow: inset 0 0 0 1px transparent; color: var(--c-white); font: inherit; cursor: pointer; transition: box-shadow 0.35s ease; }
.portaal-kies__label { color: var(--c-mute); font-size: 0.875rem; }
.portaal-kies__waarde { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); }
.portaal-kies__pijl { width: 1rem; height: 1rem; color: var(--c-mute); transition: rotate 0.45s var(--ease-im); }
.portaal-kies.is-open .portaal-kies__pijl { rotate: 180deg; }
.portaal-kies.is-gekozen .portaal-kies__knop,
.portaal-kies.is-open .portaal-kies__knop { box-shadow: inset 0 0 0 1px var(--c-lavender); }
.portaal-kies.is-gekozen .portaal-kies__waarde { color: var(--c-lavender); }
.portaal-kies__knop:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 60%, transparent); }
.portaal-kies__knop:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
.portaal-kies__paneel { position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 20; width: max-content; max-width: min(46rem, calc(100vw - 2 * var(--gutter))); padding: 1.25rem; border-radius: 1.25rem; background: var(--c-panel); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35); }
.portaal-kies--status .portaal-kies__paneel { min-width: 16rem; padding: 0.5rem; }
.portaal-jaren { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.portaal-optie { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.05rem; border: 0; border-radius: var(--radius-pill); background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.portaal-optie:hover { box-shadow: inset 0 0 0 1px var(--c-lavender); color: var(--c-lavender); }
.portaal-optie.is-actief { background: var(--c-lavender); box-shadow: none; color: var(--c-ink); }
/* Kwartalen: een tegel met het bedrag en een staafje per maand. */
.portaal-kwartalen { display: grid; grid-template-columns: repeat(4, minmax(8.5rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.portaal-kw { display: grid; gap: 0.75rem; padding: 0.9rem 0.9rem 0.75rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.35s ease, background-color 0.35s ease; }
.portaal-kw.is-actief { background: color-mix(in srgb, var(--c-lavender) 8%, transparent); box-shadow: inset 0 0 0 1px var(--c-lavender); }
.portaal-kw.is-leeg { opacity: 0.4; }
.portaal-kw__kop { display: grid; justify-items: start; gap: 0.1rem; padding: 0; border: 0; background: none; color: var(--c-white); font: inherit; text-align: left; cursor: pointer; }
.portaal-kw__kop strong { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1; }
.portaal-kw__kop span { color: var(--c-mute); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.portaal-kw__kop:hover strong,
.portaal-kw.is-actief .portaal-kw__kop strong { color: var(--c-lavender); }
.portaal-kw__kop:disabled { cursor: default; }
.portaal-kw__staven { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.35rem; height: 5.5rem; padding-bottom: 1.25rem; }
.portaal-staaf { position: relative; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.portaal-staaf:disabled { cursor: default; }
.portaal-staaf__vul { position: absolute; right: 0; bottom: 0; left: 0; height: max(3px, var(--h)); border-radius: 0.45rem 0.45rem 0.2rem 0.2rem; background: color-mix(in srgb, var(--c-lavender) 45%, transparent); transition: background-color 0.35s ease; }
.portaal-staaf:disabled .portaal-staaf__vul { background: rgba(255, 255, 255, 0.1); }
.portaal-staaf:not(:disabled):hover .portaal-staaf__vul { background: color-mix(in srgb, var(--c-lavender) 80%, transparent); }
.portaal-staaf.is-actief .portaal-staaf__vul { background: var(--c-lavender); }
.portaal-staaf.is-uit .portaal-staaf__vul { background: rgba(255, 255, 255, 0.14); }
.portaal-staaf__m { position: absolute; top: calc(100% + 0.35rem); left: 50%; color: var(--c-mute); font-size: 0.6875rem; translate: -50% 0; }
.portaal-staaf:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; border-radius: 0.4rem; }
/* Status: een lijst met aantallen. */
.portaal-statusrij { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; height: 2.75rem; padding: 0 0.6rem 0 1rem; border: 0; border-radius: 0.8rem; background: none; color: var(--c-white); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.portaal-statusrij:hover { background: rgba(255, 255, 255, 0.05); }
.portaal-statusrij.is-actief { background: var(--c-lavender); color: var(--c-ink); }
.portaal-statusrij__n { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.portaal-statusrij.is-actief .portaal-statusrij__n { background: var(--c-ink); color: var(--c-lavender); }
/* Lijst of tijdlijn: twee ronde knoppen, even hoog. */
.portaal-weergave { display: inline-flex; gap: 0.4rem; }
.portaal-rond { display: grid; place-items: center; width: var(--pt-h); height: var(--pt-h); padding: 0; border: 0; border-radius: 50%; background: var(--c-bg); color: var(--c-white); cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease; }
.portaal-rond svg { width: 1.2rem; height: 1.2rem; }
.portaal-rond:hover { color: var(--c-lavender); }
.portaal-rond.is-actief { background: var(--c-lavender); color: var(--c-ink); }
.portaal-rond:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
/* De ZIP rechts op de regel. */
.portaal__zip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-left: auto; }
.portaal-zip { height: var(--pt-h); padding: 0 1.3rem; border-color: var(--c-lavender); color: var(--c-lavender); text-decoration: none; --scribble: var(--c-lavender); }
.portaal-zip .pill__label { display: inline-flex; align-items: center; gap: 0.6rem; }
.portaal-zip .pill__label svg { flex: none; width: 1.25rem; height: 1.25rem; }
.portaal-zip__kort { display: none; }
/* ZIP mailen: pil "Mailen" naast de ZIP, opent het ZIP-paneel. */
.portaal-mail__knop { flex: none; height: var(--pt-h); padding: 0 1.2rem; border-color: rgba(255, 255, 255, 0.3); color: var(--c-white); --scribble: var(--c-white); }
.portaal-mail__knop .pill__label { display: inline-flex; align-items: center; gap: 0.55rem; }
.portaal-mail__knop .pill__label svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--c-lavender); }
.portaal-mail__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.portaal-mail__label { color: var(--c-mute); font-size: 0.875rem; }
.portaal-mail__rij { display: flex; gap: 0.5rem; }
.portaal-mail__veld { flex: 1; min-width: 0; height: 3rem; padding: 0 1.1rem; border: 0; border-radius: var(--radius-pill); background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-white); font: inherit; font-size: 1rem; outline: none; transition: box-shadow 0.3s; }
.portaal-mail__veld:focus { box-shadow: inset 0 0 0 1px var(--c-lavender); }
.portaal-mail__stuur { --btn-h: 3rem; --btn-px: 1.2rem; flex: none; cursor: pointer; }
.portaal-mail__opties { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.portaal-mail__opties:empty { display: none; }
.portaal-mail__optie { height: 2.1rem; max-width: 100%; overflow: hidden; padding: 0 0.9rem; border: 0; border-radius: var(--radius-pill); background: none; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-white); font: inherit; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: box-shadow 0.3s, color 0.3s; }
.portaal-mail__optie:hover,
.portaal-mail__optie:focus-visible { box-shadow: inset 0 0 0 1px var(--c-lavender); color: var(--c-lavender); outline: none; }
.portaal-mail__noot { margin: 0.2rem 0 0; color: var(--c-mute); font-size: 0.8125rem; line-height: 1.45; }
.portaal-btw { display: inline-flex; align-items: center; gap: 0.5rem; height: var(--pt-h); padding: 0 1.15rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: var(--c-white); font-size: 0.9375rem; }
.portaal-btw svg { width: 1.15rem; height: 1.15rem; color: var(--c-lavender); }
.portaal__dmelding { margin: 0; color: var(--c-lavender); }

/* Zwevend onderin zodra de keuzes uit beeld zijn: facturen of offertes, en de
   gekozen periode of status met een kruisje. Vliegt in en uit met een bounce,
   zoals de schakelaar van de kennisbank. */
.portaal-zweef { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem; border-radius: var(--radius-pill); background: var(--c-bg-licht); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; translate: -50% calc(100% + 3rem); transition: opacity 0.2s ease 0.45s, translate 0.6s cubic-bezier(0.36, 0, 0.66, -0.56); }
.portaal-zweef.is-zichtbaar { opacity: 1; pointer-events: auto; translate: -50% 0; transition: opacity 0.2s ease, translate 0.85s cubic-bezier(0.34, 1.56, 0.64, 1); }
.page-card .portaal-zweef { visibility: hidden; }
.portaal-zweef__tabs { position: relative; display: inline-flex; isolation: isolate; }
.portaal-zweef__knop { height: 2.75rem; padding: 0 1.3rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); cursor: pointer; transition: color 0.45s var(--ease-im); }
.portaal-zweef__knop.is-actief { color: var(--c-ink); }
.portaal-zweef__filter { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 0.9rem 0 1.1rem; border: 0; border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-lavender); font: inherit; font-size: 0.9375rem; white-space: nowrap; cursor: pointer; }
.portaal-zweef__filter svg { width: 1rem; height: 1rem; }

/* De documenten: donkere rijen met 10px ertussen. */
.portaal__docs { display: grid; gap: var(--frame); margin-top: var(--frame); overflow: clip; }
.pdoc { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 9.5rem 6.75rem; align-items: center; gap: 1rem 2rem; padding: 1.4rem var(--kb3-p); border-radius: var(--radius); background: var(--c-panel); color: var(--c-white); }
.pdoc__wat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.75rem; min-width: 0; }
.pdoc__soort { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.7rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: var(--c-mute); font-size: 0.8125rem; }
.pdoc--offerte .pdoc__soort { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 55%, transparent); color: var(--c-lavender); }
.pdoc__nummer { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pdoc__oms { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; color: var(--c-mute); -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: pretty; }
.pdoc__wanneer,
.pdoc__bedrag { display: grid; gap: 0.15rem; }
.pdoc__bedrag { justify-items: end; text-align: right; }
.pdoc__datum { font-variant-numeric: tabular-nums; }
.pdoc__euro { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pdoc--credit .pdoc__euro { color: var(--c-lavender); }
.pdoc__sub { color: var(--c-mute); font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdoc__datum,
.pdoc__euro { white-space: nowrap; }
/* Vaste kolommen voor status en knoppen, zodat bedragen en statussen in elke
   rij precies onder elkaar staan (offertes: ruimte voor goedkeuren). */
.pdoc--offerte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 9.5rem 20rem; }
/* Status zonder stipje (op verzoek), even hoog als de pdf-knop. */
.pdoc__status { justify-self: end; display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.1rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; white-space: nowrap; }
.pdoc__status--open,
.pdoc__status--pending_payment { box-shadow: inset 0 0 0 1px var(--c-lavender); color: var(--c-lavender); }
/* Herinnerd: oranje (op verzoek), tussen open en te laat in. */
.pdoc__status--reminded { box-shadow: inset 0 0 0 1px rgba(242, 153, 74, 0.8); color: #f4a261; }
.pdoc__status--late { box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.75); color: #f08c8f; }
.pdoc__status--paid,
.pdoc__status--accepted { background: color-mix(in srgb, var(--c-lavender) 12%, transparent); box-shadow: none; color: var(--c-lavender); }
.pdoc__status--billed,
.pdoc__status--rejected,
.pdoc__status--uncollectible { color: var(--c-mute); }
/* Goedkeuren en pdf op één regel (op verzoek). */
.pdoc__acties { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.pdoc__akkoord { height: 2.75rem; padding: 0 1.2rem; font-size: 0.9375rem; }
.pdoc__akkoord .btn__label { display: inline-flex; align-items: center; gap: 0.45rem; }
.pdoc__akkoord .btn__label svg { width: 1rem; height: 1rem; }
.pdoc__pdf { height: 2.75rem; padding: 0 1.15rem; font-size: 0.9375rem; text-decoration: none; }
.pdoc__pdf .pill__label { display: inline-flex; align-items: center; gap: 0.45rem; }
.pdoc__pdf .pill__label svg { flex: none; width: 1.1rem; height: 1.1rem; transition: translate 0.45s var(--ease-im); }
.pdoc__pdf.is-hover .pill__label svg { translate: 0 2px; }
/* Laden: drie lege balkjes per rij die zacht oplichten. */
.pdoc--skelet { grid-template-columns: 2fr 1fr 1fr; height: 5.5rem; }
.pdoc--skelet span { height: 0.9rem; border-radius: 1rem; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)) 0 0 / 200% 100%; animation: portaal-skelet 1.4s ease-in-out infinite; }
@keyframes portaal-skelet { to { background-position: -200% 0; } }
.portaal__leeg { display: grid; justify-items: start; gap: 0.75rem; padding: 2rem var(--kb3-p); border-radius: var(--radius); background: var(--c-panel); color: var(--c-mute); font-size: var(--fs-lead); }
.portaal__leeg p { margin: 0; }
.portaal__leeg .portaal-link { color: var(--c-lavender); }

/* Tijdlijn: per maand de maand groot en vast links (zoals de index van de
   kennisbank), rechts een lijn met een rondje per document. */
.portaal__docs.is-tijdlijn { gap: 0; }
.pmaand { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: start; gap: 1rem clamp(2rem, 5vw, 5rem); padding: clamp(1.5rem, 4vh, 2.5rem) var(--kb3-p); }
.pmaand + .pmaand { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.pmaand__titel { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1.5rem); margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.15rem + 1.9vw, 3rem); line-height: 1; color: var(--c-lavender); text-transform: lowercase; }
.pmaand__lijst { position: relative; display: grid; gap: var(--frame); margin: 0; padding: 0 0 0 2rem; list-style: none; }
.pmaand__lijst::before { content: ""; position: absolute; top: 1.6rem; bottom: 1.6rem; left: 0.4rem; width: 1px; background: color-mix(in srgb, var(--c-lavender) 35%, transparent); }
.pmaand__item { position: relative; }
.pmaand__stip { position: absolute; top: 50%; left: -1.95rem; width: 0.85rem; height: 0.85rem; border: 1px solid var(--c-lavender); border-radius: 50%; background: var(--c-bg); translate: 0 -50%; }
.pmaand__stip--paid,
.pmaand__stip--accepted { background: var(--c-lavender); }
.pmaand__stip--late { border-color: #e5484d; }
.pmaand__stip--reminded { border-color: #f4a261; }
.pmaand .pdoc { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 9.5rem 6.75rem; }
.pmaand .pdoc--offerte { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 9.5rem 20rem; }
.pmaand .pdoc__wanneer { display: none; }

@media (max-width: 75em) {
	.pdoc,
	.pdoc--offerte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
	.pdoc__wanneer { grid-row: 2; grid-column: 1; }
	.pdoc__bedrag { grid-row: 1; grid-column: 2; }
	.pdoc__status { grid-row: 2; grid-column: 2; justify-self: end; }
	.pdoc__acties { grid-row: 1 / span 2; grid-column: 3; }
	.pmaand .pdoc,
	.pmaand .pdoc--offerte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
}
/* Tot 1200 breed: de naam boven de cijfers (naast elkaar brak "Hoi Sanne." rond 1024 over twee regels). */
@media (max-width: 74.99em) {
	.portaal__kop { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.portaal__cijfers { justify-content: start; }
	.portaal__cijfer { justify-items: start; padding-left: 0; text-align: left; }
	/* Het tweede cijfer houdt evenveel lucht na het lijntje als ervoor (stond op de telefoon tegen de rand). */
	.portaal__cijfer + .portaal__cijfer { padding-left: clamp(1.5rem, 3vw, 2.75rem); }
}
/* Uitloggen: in het roze vlak alleen waar hij niet in de header staat (< 48em), anders stond hij op de tablet dubbel. */
@media (max-width: 47.99em) {
	/* Op de telefoon over de hele breedte (op verzoek). */
	.portaal__uit { display: flex; justify-self: stretch; width: 100%; }
}
@media (max-width: 56.24em) {
	.portaal__kop { min-height: 0; padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 2rem); }
	.portaal-balk { gap: 0.5rem; }
	.portaal-soort { width: 100%; }
	.portaal-soort__knop { flex: 1; justify-content: center; }
	.portaal-kies { flex: 1; }
	.portaal-kies__knop { width: 100%; justify-content: space-between; }
	.portaal-kies__paneel { position: fixed; top: auto; right: var(--frame); bottom: var(--frame); left: var(--frame); max-width: none; width: auto; }
	.portaal-kwartalen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.portaal__zip { width: 100%; margin-left: 0; }
	.pdoc__acties { flex-wrap: wrap; }
	.pdoc,
	.pdoc--offerte { grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 1rem; padding: 1.25rem 1.25rem; }
	.pdoc__status { justify-self: start; }
	.pdoc__wat { grid-column: 1 / -1; }
	.pdoc__wanneer { grid-row: auto; grid-column: 1; }
	.pdoc__bedrag { grid-row: auto; grid-column: 2; }
	.pdoc__status { grid-row: auto; grid-column: 1; justify-self: start; }
	.pdoc__acties { grid-row: auto; grid-column: 2; max-width: none; }
	.pdoc:has(.pdoc__akkoord) .pdoc__acties { grid-column: 1 / -1; justify-content: flex-start; }
	.pmaand { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
	.pmaand__titel { position: static; }
	.pmaand .pdoc,
	.pmaand .pdoc--offerte { grid-template-columns: minmax(0, 1fr) auto; }
	.portaal-code__cijfer { width: calc((100% - 5 * 0.4rem - 1.7rem) / 6); }
	.portaal-code__vakjes { width: 100%; }
}
/* ---------- Mijn omgeving op de telefoon (op verzoek "meer premium") ----------
   Keuzes in drie rijen (soort; periode en status; weergave met ZIP en mailen),
   compacte documentrijen (nummer, omschrijving en datum links; bedrag, status
   en pdf rechts) en de keuzepanelen als sheet met greep en gedimde pagina. */
@media (max-width: 47.99em) {
	.portaal__keuzes { gap: 0.75rem; padding: 0.75rem; }
	.portaal-balk { gap: 0.5rem; }
	.portaal-soort { order: 1; width: 100%; }
	.portaal-kies { order: 2; flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
	.portaal-kies__knop { padding: 0 0.9rem 0 1.1rem; }
	.portaal-weergave { order: 3; flex: none; padding: 0.25rem; border-radius: var(--radius-pill); background: var(--c-bg); }
	.portaal-weergave .portaal-rond { width: calc(var(--pt-h) - 0.5rem); height: calc(var(--pt-h) - 0.5rem); background: none; }
	.portaal-weergave .portaal-rond.is-actief { background: var(--c-lavender); }
	.portaal__zip { order: 4; flex: 1 1 0; flex-wrap: nowrap; min-width: 0; margin-left: 0; width: auto; }
	.portaal-zip { flex: 1 1 auto; min-width: 0; padding: 0 1rem; }
	.portaal-zip__lang { display: none; }
	.portaal-zip__kort { display: inline; }
	.portaal-btw { order: 5; flex: 1 1 100%; justify-content: center; }
	.portaal__zip:has(.portaal-btw:not([hidden])) { flex-wrap: wrap; }
	.portaal-kies__paneel { right: 0; bottom: 0; left: 0; max-height: 78svh; overflow: auto; padding: 1.75rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--c-panel) 72%, transparent); }
	.portaal-kies__paneel::before { content: ""; position: absolute; top: 0.6rem; left: 50%; width: 2.5rem; height: 0.25rem; border-radius: 1rem; background: var(--c-line); translate: -50% 0; }
	.portaal__docs { gap: 0.5rem; }
	.pdoc,
	.pdoc--offerte,
	.pmaand .pdoc,
	.pmaand .pdoc--offerte { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "wat wat bedrag" "wanneer status acties"; align-items: center; gap: 0.6rem 0.5rem; padding: 1rem 1rem 1rem 1.15rem; }
	/* Alleen grid-area: een grid-row of grid-column erna in dezelfde regel zet de plaats weer op auto. */
	.pdoc__wat { grid-area: wat; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
	.pdoc__soort { display: none; }
	.pdoc__nummer { font-size: 1.0625rem; }
	.pdoc__oms { grid-column: 1 / -1; -webkit-line-clamp: 1; font-size: 0.9375rem; }
	.pdoc__bedrag { grid-area: bedrag; align-self: start; }
	.pdoc__euro { font-size: 1.125rem; }
	.pdoc__bedrag .pdoc__sub { font-size: 0.75rem; }
	.pdoc__wanneer { grid-area: wanneer; display: grid; gap: 0.1rem; min-width: 0; font-size: 0.8125rem; }
	.pdoc__wanneer .pdoc__datum { color: var(--c-white); }
	.pdoc__wanneer .pdoc__sub { font-size: inherit; white-space: normal; }
	.pdoc__status { grid-area: status; justify-self: end; height: 2.25rem; padding: 0 0.85rem; font-size: 0.8125rem; }
	.pdoc__acties { grid-area: acties; justify-self: end; flex-wrap: nowrap; }
	.pdoc__pdf { --btn-h: 2.25rem; height: 2.25rem; padding: 0 0.85rem; font-size: 0.8125rem; }
	.pdoc:has(.pdoc__akkoord) { grid-template-areas: "wat wat bedrag" "wanneer wanneer status" "acties acties acties"; }
	.pdoc:has(.pdoc__akkoord) .pdoc__acties { justify-self: stretch; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.pdoc--skelet span { animation: none; }
}

/* =====================================================================
   Ons verhaal (2026-10-12, op verzoek "heel creatief, een toffe wow
   factor"): vier blokken voor /ons-verhaal/.
   ===================================================================== */

/* ---------- Blok verhaal (verhaal.php, verhaal.js) ----------
   Grote kop met een fotootje als woord in de zin; scrollend groeit het uit
   tot een beeld van schermhoogte (GSAP Flip) en schrijft het logo zich over
   de foto. Daaronder de feiten die optellen. */
.verhaal { position: relative; padding-bottom: clamp(4rem, 8vw, 7rem); }
.verhaal__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	min-height: 100svh;
	padding: calc(var(--header-top) + var(--btn-h) + 2rem) var(--gutter) clamp(3rem, 9vh, 6rem);
	text-align: center;
}
.verhaal__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-lavender); }
.verhaal__titel {
	max-width: 13em;
	margin: 0;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.75rem, 1rem + 6.4vw, 8.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-white);
	text-wrap: balance;
}
/* Elk woord rijst op uit zijn eigen masker (net iets ruimer voor de staartjes). */
.verhaal__w { display: inline-block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: top; }
.verhaal__w-in { display: inline-block; }
/* Het plekje in de zin: zo hoog als een kleine letter, ongeveer twee letters breed. */
.verhaal__klein { position: relative; display: inline-block; width: 1.85em; height: 0.8em; margin: 0 0.04em; vertical-align: -0.02em; }
.verhaal__klein--los { width: min(20rem, 70vw); height: auto; aspect-ratio: 16 / 9; }
/* Het fotootje zelf (Flip zet maat en plek; Osmo: top/left 0 en 100%). */
.verhaal__doel {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0.3em;
	background: var(--c-bg-licht);
	isolation: isolate;
	will-change: transform;
}
.verhaal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.verhaal__waas { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--c-scrim) 82%, transparent) 100%); opacity: 0; pointer-events: none; }
/* Ons logo als penlijn rechtsonder op de foto (schrijft zich met het scrollen). */
.verhaal__m { position: absolute; right: 5%; bottom: 8%; width: 15%; height: auto; overflow: visible; color: var(--c-lavender); pointer-events: none; }
.verhaal__m path { stroke-width: 2.5px; }
/* Nick, die het logo tekent (verhaal.js zet hem op de punt van de pen). */
.verhaal__pen { z-index: 4; opacity: 0; transition: opacity 0.5s ease; will-change: transform; }
.verhaal__pen.is-aan { opacity: 1; }
.verhaal.is-stil .verhaal__pen { display: none; }
.verhaal__tekst { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 82%, transparent); }
/* Het grote vak: schermhoog met 10px marge, hier landt de foto. */
.verhaal__groot { position: relative; padding: 0 var(--frame); }
.verhaal__vak { position: relative; height: calc(100svh - 2 * var(--frame)); border-radius: var(--radius); }
.verhaal__onder { position: absolute; left: calc(var(--frame) + var(--gutter)); bottom: var(--gutter); z-index: 4; max-width: min(48rem, calc(100% - 2 * var(--gutter) - 2 * var(--frame))); }
.verhaal__bkop { margin: 0 0 1rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.125rem, 1rem + 3.2vw, 4.75rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--c-white); text-wrap: balance; }
.verhaal__btekst { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 88%, transparent); }
/* Pas op de foto als hij groot is. */
.verhaal.is-flip .verhaal__onder > * { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.8s var(--ease-out), transform 1.1s var(--ease-out); }
.verhaal.is-flip .verhaal__onder > * + * { transition-delay: 0.12s; }
.verhaal.is-groot .verhaal__onder > * { opacity: 1; transform: none; }
/* Stil (minder beweging, geen Flip): de foto staat meteen groot. */
.verhaal.is-stil .verhaal__klein { display: none; }
.verhaal.is-stil .verhaal__vak { overflow: hidden; }
.verhaal.is-stil .verhaal__doel { border-radius: var(--radius); }
.verhaal.is-stil .verhaal__waas { opacity: 1; }
.no-js .verhaal__groot { display: none; }
/* Feiten (op verzoek): elk in een eigen blokje met ronde hoeken en overal
   10px marge, het getal groot linksboven, onderin de regel en eventueel een
   knop; lichtbruin of roze (nu de reviews, met "bekijk ze allemaal"). In het
   koffieblokje tekent Ben rechtsonder een kopje (verhaal.js). Daaronder de
   knoppen van het blok. */
.verhaal__slot { display: grid; gap: clamp(2rem, 4vw, 3rem); padding: var(--frame) var(--frame) 0; }
.verhaal__feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.verhaal__feit {
	--feit-pad: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-height: clamp(13rem, 10rem + 8vw, 19rem);
	padding: var(--feit-pad);
	border-radius: var(--radius);
	background: var(--c-bg-licht);
}
.verhaal__getal { display: inline-block; margin-bottom: auto; padding-bottom: 1.25rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(3.5rem, 1.6rem + 5vw, 7.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--c-lavender); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verhaal__label { max-width: 20rem; font-size: var(--fs-body); line-height: 1.4; color: color-mix(in srgb, var(--c-white) 72%, transparent); }
.verhaal__feitknop { --btn-h: 2.75rem; --btn-px: 1.25rem; }
/* De knoppen van het blok (let's work, manifest) in het eerste blokje. */
.verhaal__feitknoppen { gap: 0.6rem; margin-top: 0.5rem; }
.verhaal__feitknoppen .btn { --btn-h: 2.75rem; --btn-px: 1.25rem; }
.verhaal__feit--roze { background: var(--c-lavender); }
.verhaal__feit--roze .verhaal__getal { color: var(--c-ink); }
.verhaal__feit--roze .verhaal__label { color: color-mix(in srgb, var(--c-ink) 80%, transparent); }
/* Een vierkant fotootje (optioneel) of het schetsje rechtsonder; de regel loopt er niet onder door. */
.verhaal__feitfoto { position: absolute; right: var(--feit-pad); bottom: var(--feit-pad); width: clamp(4.75rem, 3rem + 4vw, 7.25rem); aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--radius) - 2px); }
.verhaal__feitimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.verhaal__schets { position: absolute; right: calc(var(--feit-pad) - 0.5rem); bottom: calc(var(--feit-pad) - 0.75rem); width: clamp(5.5rem, 4rem + 4vw, 8rem); height: auto; overflow: visible; color: var(--c-lavender); rotate: -5deg; pointer-events: none; }
.verhaal__schets path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.verhaal__feit.has-foto .verhaal__label,
.verhaal__feit:has(.verhaal__schets) .verhaal__label { max-width: calc(100% - clamp(6rem, 4.5rem + 4vw, 8.5rem)); }
.verhaal__knoppen { padding: 0 calc(var(--gutter) - var(--frame)); }
@media (max-width: 47.99em) {
	.verhaal__onder { left: calc(var(--frame) + 1.25rem); bottom: 1.5rem; }
	/* Iets van de rand, zodat Nicks fotobolletje bij het eind van de pen in de foto past. */
	.verhaal__m { right: 16%; width: 22%; bottom: auto; top: 6.5rem; }
}

/* ---------- Blok tijdlijn (tijdlijn.php, tijdlijn.js) ----------
   Onze cursors trekken één lavendel penlijn, om de beurt een stuk, met een
   lus om elk jaartal; hij eindigt als handtekening (ons logo). */
.tijdlijn { padding: clamp(5rem, 10vw, 9rem) var(--gutter) clamp(4rem, 8vw, 7rem); }
.tijdlijn__kop { display: grid; justify-items: center; gap: 1rem; max-width: 56rem; margin: 0 auto; text-align: center; }
.tijdlijn__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.tijdlijn__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 1rem + 4.6vw, 6.25rem); line-height: 0.96; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.tijdlijn__lijst { position: relative; padding-top: clamp(4rem, 9vw, 8rem); }
.tijdlijn__svg { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; color: var(--c-lavender); pointer-events: none; }
.tijdlijn__pad { stroke-width: 2px; }
/* De cursors die tekenen (tijdlijn.js zet ze op de punt van de lijn). */
.tijdlijn__pen { z-index: 3; opacity: 0; transition: opacity 0.5s ease; will-change: transform; }
.tijdlijn__pen.is-aan { opacity: 1; }
.tijdlijn.is-stil .tijdlijn__pen { display: none; }
/* Vangnet: komt de zwevende cursor niet, dan tekent de cursor van het blok zelf (zichtbaar). */
.has-im-cursors .tijdlijn__pen.is-zelf > *,
.has-im-cursors .verhaal__pen.is-zelf > * { visibility: visible !important; }
.tijdlijn__momenten { position: relative; z-index: 1; display: grid; gap: clamp(7rem, 15vw, 13rem); margin: 0; padding: 0; list-style: none; }
.tijdlijn__jaar span {
	display: block;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 1rem + 1.7vw, 2.625rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--c-white) 38%, transparent);
	font-variant-numeric: tabular-nums;
	transition: color 0.6s ease;
}
.tijdlijn__moment.is-inkt .tijdlijn__jaar span,
.tijdlijn:not(.is-lijn) .tijdlijn__jaar span { color: var(--c-lavender); }
.tijdlijn__tekst { display: grid; gap: 1rem; max-width: 30rem; }
.tijdlijn__mkop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.875rem, 1.2rem + 1.7vw, 3rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--c-white); text-wrap: balance; }
.tijdlijn__mtekst { font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3125rem); line-height: 1.5; color: color-mix(in srgb, var(--c-white) 76%, transparent); }
.tijdlijn__foto { position: relative; width: 100%; max-width: 27rem; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--c-bg-licht); will-change: transform; }
.tijdlijn__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 56.25em) {
	.tijdlijn__moment { display: grid; grid-template-columns: minmax(0, 1fr) 14rem minmax(0, 1fr); align-items: center; }
	.tijdlijn__jaar { grid-column: 2; grid-row: 1; justify-self: center; }
	.tijdlijn__foto { grid-column: 1; grid-row: 1; justify-self: end; }
	.tijdlijn__tekst { grid-column: 3; grid-row: 1; justify-self: start; }
	.tijdlijn__moment.is-rechts .tijdlijn__foto { grid-column: 3; justify-self: start; }
	.tijdlijn__moment.is-rechts .tijdlijn__tekst { grid-column: 1; justify-self: end; text-align: right; }
	.tijdlijn__moment.is-zonder-foto .tijdlijn__tekst { min-height: 12rem; align-content: center; }
}
@media (max-width: 56.24em) {
	.tijdlijn__momenten { gap: 4.5rem; }
	.tijdlijn__moment { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 1.5rem; align-items: start; }
	.tijdlijn__jaar { grid-column: 1; grid-row: 1; justify-self: center; padding-top: 1.1rem; }
	.tijdlijn__jaar span { font-size: 1.0625rem; }
	.tijdlijn__tekst { grid-column: 2; grid-row: 1; }
	.tijdlijn__foto { grid-column: 2; grid-row: 2; max-width: none; aspect-ratio: 4 / 3; }
}
/* Het slot: de handtekening en de slotregel. */
.tijdlijn__slot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.5rem; padding-top: clamp(5rem, 10vw, 9rem); text-align: center; }
.tijdlijn__logo { position: relative; display: block; width: clamp(12rem, 9rem + 12vw, 21rem); aspect-ratio: 56 / 40; }
.tijdlijn__slottekst { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.015em; color: var(--c-white); }
.tijdlijn.is-lijn .tijdlijn__slottekst { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s var(--ease-out) 0.15s, transform 1.1s var(--ease-out) 0.15s; }
.tijdlijn.is-lijn .tijdlijn__slot.is-getekend .tijdlijn__slottekst { opacity: 1; transform: none; }

/* ---------- Blok team (team.php, team.js) ----------
   Portretten als lavendel stippenraster op een canvas; onder de muis
   ontwikkelt de foto zich door een lens. */
.team { padding: clamp(5rem, 10vw, 9rem) var(--frame) clamp(4rem, 8vw, 7rem); }
.team__kop { display: grid; gap: 1rem; max-width: 52rem; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0 calc(var(--gutter) - var(--frame)); }
.team__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.team__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 1rem + 4.6vw, 6.25rem); line-height: 0.96; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.team__tekst { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.45; color: var(--c-mute); }
.team__leden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.team__lid { display: grid; grid-template-rows: auto 1fr; padding: var(--frame); border-radius: var(--radius); background: var(--c-panel); }
/* Staand, maar nooit hoger dan het scherm (dan iets breder, de uitsnede volgt). width: 100%, anders
   maakt de maximale hoogte via de verhouding ook de breedte kleiner. */
.team__portret { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 5; max-height: 78svh; border-radius: calc(var(--radius) - 2px); background: var(--c-panel); cursor: pointer; }
.team__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.team__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.team:not(.is-raster) .team__canvas { display: none; }
/* De foto is alleen te zien in de lens (--mx/--my/--lr, team.js). */
.team.is-raster .team__foto {
	-webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 36%), #000 calc(var(--lr, 0px) * 0.6), transparent var(--lr, 0px));
	mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 36%), #000 calc(var(--lr, 0px) * 0.6), transparent var(--lr, 0px));
}
.team__cursor { top: 66%; left: 68%; opacity: 0; transition: opacity 0.6s ease; }
.team__lid.is-klaar .team__cursor { opacity: 1; }
html:not(.has-im-cursors) .team__cursor { display: none; }
.team__info { display: grid; align-content: start; justify-items: start; gap: 0.5rem; padding: 1.75rem calc(var(--gutter) - var(--frame)) 1.25rem; }
.team__naam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -0.015em; color: var(--c-white); }
.team__functie { margin: 0; font-size: var(--fs-body); color: var(--c-lavender); }
.team__over { max-width: 32rem; margin: 0.5rem 0 1.25rem; font-size: 1.125rem; line-height: 1.5; color: var(--c-mute); }
@media (max-width: 47.99em) {
	.team__leden { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Blok kijkje (kijkje.php, kijkje.js) ----------
   Fotomuur die uitzoomt: de middelste foto begint schermvullend en krimpt
   naar zijn cel, de rest komt eromheen. */
.kijkje { position: relative; }
.kijkje__baan { height: 280svh; }
.kijkje__podium { position: sticky; top: 0; height: 100svh; padding: var(--frame); overflow: clip; }
.kijkje__raster { display: grid; grid-template-columns: 1fr 1.55fr 1fr; grid-template-rows: 1fr 1.45fr 1fr; gap: var(--frame); height: 100%; margin: 0; padding: 0; list-style: none; }
.kijkje__foto { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); }
.kijkje__foto.is-midden { z-index: 2; overflow: visible; background: none; }
.kijkje__laag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); will-change: transform; }
.kijkje__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-out); }
.kijkje__foto:not(.is-midden):hover .kijkje__img { scale: 1.04; }
.kijkje__waas { position: absolute; inset: var(--frame); z-index: 3; border-radius: var(--radius); background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c-scrim) 80%, transparent) 100%); pointer-events: none; }
.kijkje__tekst {
	position: absolute;
	inset: var(--frame);
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1rem;
	padding: var(--gutter);
	pointer-events: none;
}
.kijkje__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 1rem + 6vw, 8rem); line-height: 0.94; letter-spacing: -0.02em; color: var(--c-white); text-wrap: balance; }
.kijkje__intro { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 88%, transparent); }
/* Stil (minder beweging, geen JS): kop boven een gewoon raster. */
.kijkje.is-stil .kijkje__baan,
.no-js .kijkje__baan { height: auto; }
.kijkje.is-stil .kijkje__podium,
.no-js .kijkje__podium { position: static; display: flex; flex-direction: column-reverse; gap: 2rem; height: auto; padding: clamp(4rem, 8vw, 7rem) var(--frame) var(--frame); }
.kijkje.is-stil .kijkje__raster,
.no-js .kijkje__raster { height: min(90svh, 60rem); }
.kijkje.is-stil .kijkje__tekst,
.no-js .kijkje__tekst { position: static; padding: 0 calc(var(--gutter) - var(--frame)); background: none; }
.kijkje.is-stil .kijkje__waas,
.no-js .kijkje__waas { display: none; }
@media (max-width: 47.99em) {
	.kijkje__baan { height: 240svh; }
	.kijkje__raster { grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: 1fr 1.3fr 1fr; }
	.kijkje__tekst { padding: 1.5rem; }
}

/* ---------- Koffiecalculator (koffie-panel.php, koffie.js) ----------
   Een paneel zoals de taalwisselaar: rechts onder de pagina, die als kaart
   opzij schuift (card.js). Opmaak van Mijn omgeving (op verzoek): een roze
   vlak bovenin, een lichtbruin vlak met de keuzes als pillen die meegroeien,
   donkere blokjes eronder, overal 10px marge. */
.kfpanel { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); right: 0; bottom: 0; left: 0; z-index: 1; background: var(--c-panel); visibility: hidden; }
.kf-open .kfpanel { visibility: visible; }
.kfpanel-catch { position: fixed; top: 0; right: var(--lw-panel-w); bottom: 0; left: 0; z-index: 50; visibility: hidden; cursor: pointer; }
.kf-open .kfpanel-catch { visibility: visible; }
.kf-anim .site-main,
.kf-anim [data-header-item] { transition: opacity 0.4s ease; }
.kf-dim .site-main,
.kf-dim [data-header-item] { opacity: 0.7; }
.kfpanel__panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--lw-panel-w); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--c-panel); }
.kfpanel__panel::-webkit-scrollbar { display: none; }
/* Het kruisje op het roze vlak: donker, zoals de knoppen op roze. */
.kfpanel__close { top: calc(var(--frame) + 1rem); right: calc(var(--frame) + 1rem); border-color: color-mix(in srgb, var(--c-ink) 35%, transparent); background: transparent; color: var(--c-ink); }
.kfpanel__close:hover { border-color: var(--c-ink); }
.kf { --kf-h: 3.25rem; display: grid; gap: var(--frame); padding: var(--frame) var(--frame) max(var(--frame), env(safe-area-inset-bottom)); }
/* Het roze vlak. */
.kf__boven { display: grid; gap: 0.9rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.kf__kicker { margin: 0; padding-right: calc(var(--btn-h) + 0.5rem); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.kf__titel { margin: 0; padding-right: calc(var(--btn-h) + 0.5rem); font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.kf__uitkomst { display: flex; align-items: flex-end; gap: 1rem; margin-top: 1.25rem; }
.kf__kop { flex: none; width: clamp(4.5rem, 3.5rem + 3vw, 6rem); height: auto; overflow: visible; color: var(--c-ink); rotate: -5deg; }
.kf__kop path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kf__kop .kf__vulling { fill: color-mix(in srgb, var(--c-ink) 22%, transparent); }
.kf__stoom { animation: kf-stoom 3s ease-in-out infinite; }
.kf__stoom:nth-of-type(6) { animation-delay: 0.6s; }
.kf__stoom:nth-of-type(7) { animation-delay: 1.2s; }
@keyframes kf-stoom { 0%, 100% { opacity: 0.35; translate: 0 2px; } 50% { opacity: 1; translate: 0 -2px; } }
.kf__totaal { display: grid; margin: 0; }
.kf__getal { font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 2rem + 3.4vw, 4.75rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.kf__eenheid { margin-top: 0.35rem; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
/* De keuzes: een lichtbruin vlak met per regel een pil die meegroeit (--vol-n, koffie.js),
   het getal in de pil; de gewone schuif ligt er onzichtbaar overheen en doet het werk. */
.kf__regels { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius); background: var(--c-bg-licht); }
.kf__regel { display: grid; gap: 0.6rem; }
.kf__label { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-white); }
.kf__schuif { --kf-min: calc(var(--kf-h) - 8px); position: relative; height: var(--kf-h); border-radius: var(--radius-pill); background: var(--c-blok); transition: box-shadow 0.3s ease; }
.kf__schuif:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 35%, transparent); }
.kf__schuif:has(.kf__invoer:focus-visible) { box-shadow: 0 0 0 2px var(--c-lavender); }
.kf__vol { position: absolute; top: 4px; bottom: 4px; left: 4px; display: flex; align-items: center; justify-content: flex-end; width: calc(var(--kf-min) + (100% - 8px - var(--kf-min)) * var(--vol-n, 0.3)); padding: 0 1rem; border-radius: var(--radius-pill); background: var(--c-lavender); transition: width 0.45s var(--ease-out); }
.kf__waarde { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.kf__schaal { position: absolute; inset: 0 1.1rem; display: flex; align-items: center; justify-content: flex-end; font-size: 0.8125rem; color: var(--c-mute); pointer-events: none; }
.kf__schaal span:first-child { display: none; }
.kf__invoer { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.kf__invoer::-webkit-slider-thumb { width: 6px; height: var(--kf-h); -webkit-appearance: none; appearance: none; }
.kf__invoer::-moz-range-thumb { width: 6px; height: var(--kf-h); border: 0; }
.kf__invoer:active { cursor: grabbing; }
/* Weetjes en de zin over hoe je ervoor staat. */
.kf__weetjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.kf__weetje { display: grid; align-content: space-between; gap: 1.25rem; min-height: 6.5rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--c-blok); }
.kf__weetje b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1; color: var(--c-lavender); font-variant-numeric: tabular-nums; }
.kf__weetje span { font-size: 0.8125rem; color: var(--c-mute); }
.kf__voet { display: grid; justify-items: start; gap: 1.25rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius); background: var(--c-blok); }
.kf__wij { margin: 0; font-size: var(--fs-lead); line-height: 1.4; color: color-mix(in srgb, var(--c-white) 88%, transparent); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
	.kf__stoom { animation: none; }
	.kf__vol { transition: none; }
}

/* =====================================================================
   Werkwijze (2026-10-12, op verzoek "met super vette blokken"): blokken
   werkwijze (stappen met scènes), jijwij (wie doet wat) en vragen.
   ===================================================================== */

/* ---------- Zwevende paginaschakelaar (paginaschakel.php, paginaschakel.js) ----------
   Zoals de zwevende schakelaar van de kennisbank (kb-schakel): lichtbruin,
   lavendel pil die naar de huidige pagina schuift. Met JS zweeft hij vast
   onderin het scherm en neemt hij geen ruimte in de pagina in;
   paginaschakel.js laat hem met een bounce in- en wegvliegen, weg zodra de
   footer in beeld komt (op verzoek: eerst landde hij boven de footer, met
   lege ruimte eromheen). Zonder JS staat hij onder de blokken. */
.paginaschakel { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: max-content; max-width: calc(100% - 2 * var(--frame)); margin: 1.5rem auto 1.25rem; }
.paginaschakel .kb-schakel__pil { width: calc((100% - 0.6rem) / var(--n, 3)); translate: calc(100% * var(--i, 0)) 0; }
.paginaschakel .kb-schakel__link { padding: 0 1.25rem; }
.js .paginaschakel { position: fixed; left: 0; right: 0; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 45; margin: 0 auto; visibility: hidden; }
.js .paginaschakel[inert] { pointer-events: none; }
.page-card .paginaschakel { visibility: hidden !important; } /* GSAP zet visibility inline */
@media (max-width: 30em) {
	.paginaschakel .kb-schakel__link { padding: 0 0.75rem; font-size: 0.875rem; }
}

/* ---------- Blok werkwijze (werkwijze.php, werkwijze.js), versie 2 ----------
   On brand (op verzoek): bovenin twee vlakken zoals de kennisbank, daaronder
   een whiteboard dat vast in beeld blijft terwijl de stappen er horizontaal
   overheen schuiven, met naast elke stap een schetsje van onze cursors. */
.werkwijze { padding-bottom: var(--frame); }
.werkwijze__boven { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--frame); padding: var(--frame); }
.werkwijze__roze { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.25rem; min-height: calc(100svh - 2 * var(--frame)); padding: calc(var(--header-top) + var(--btn-h) + 2rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.werkwijze__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.werkwijze__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(3.25rem, 1rem + 7vw, 9rem); line-height: 0.92; letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.werkwijze__tekst { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-ink) 82%, transparent); }
.werkwijze__inhoud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.werkwijze__naar { --btn-h: 2.75rem; --btn-px: 1.1rem; font-size: 0.9375rem; }
.werkwijze__foto { position: relative; min-height: calc(100svh - 2 * var(--frame)); margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); }
.werkwijze__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Het whiteboard: stippen, 10px marge, ronde hoeken; horizontaal blijft het vast in beeld. */
.werkwijze__baan { position: relative; }
.werkwijze__bord { position: relative; margin: 0 var(--frame); overflow: clip; border-radius: var(--radius); background-color: var(--c-bord); background-image: radial-gradient(color-mix(in srgb, var(--c-white) 11%, transparent) 1px, transparent 1.6px); background-size: 24px 24px; }
.werkwijze.is-horizontaal .werkwijze__bord { position: sticky; top: var(--frame); height: calc(100svh - 2 * var(--frame)); }
.werkwijze__rail { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); width: max-content; height: 100%; padding: 0 clamp(2rem, 6vw, 6rem); }
.werkwijze.is-horizontaal .werkwijze__rail { will-change: transform; }
.ww-stap { position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; width: clamp(19rem, 26vw, 27rem); height: min(66%, 34rem); padding: clamp(1.5rem, 1rem + 1vw, 2.25rem); border-radius: var(--radius); }
.werkwijze.is-horizontaal .ww-stap { margin-bottom: 9svh; }
.werkwijze.is-horizontaal .ww-stap.is-laag { margin-top: 9svh; margin-bottom: 0; }
.ww-stap--roze { background: var(--c-lavender); color: var(--c-ink); }
.ww-stap--licht { background: var(--c-bg-licht); color: var(--c-white); }
.ww-stap--donker { background: var(--c-panel); color: var(--c-white); }
.ww-stap__nummer { font-family: var(--f-display); font-weight: 600; font-size: clamp(4rem, 2.5rem + 4vw, 7.5rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--c-lavender); font-variant-numeric: tabular-nums; }
.ww-stap--roze .ww-stap__nummer { color: var(--c-ink); }
.ww-stap__onder { display: grid; gap: 0.75rem; }
.ww-stap__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.ww-stap__tekst { font-size: 1.0625rem; line-height: 1.5; color: color-mix(in srgb, var(--c-white) 78%, transparent); }
.ww-stap--roze .ww-stap__tekst { color: color-mix(in srgb, var(--c-ink) 82%, transparent); }
.ww-stap--eind { justify-content: center; gap: 1.5rem; }
.ww-stap__eindkop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; }
/* Het schetsje naast een stap (werkwijze.js tekent het met de hand, lijndikte --dik). */
.ww-schets { flex: none; width: clamp(9rem, 12vw, 13rem); aspect-ratio: 1; color: var(--c-lavender); }
.werkwijze.is-horizontaal .ww-schets { margin-top: 16svh; }
.werkwijze.is-horizontaal .ww-schets.is-hoog { margin-top: 0; margin-bottom: 16svh; }
.ww-schets svg { width: 100%; height: 100%; overflow: visible; rotate: -4deg; }
.ww-schets path { fill: none; stroke: currentColor; stroke-width: var(--dik, 1.6); stroke-linecap: round; stroke-linejoin: round; }
/* Onze cursors. */
.werkwijze__pen { z-index: 5; opacity: 0; transition: opacity 0.5s ease; }
.werkwijze__pen.is-aan { opacity: 1; }
.has-im-cursors .werkwijze__pen.is-zelf > * { visibility: visible !important; }
/* De ring met het muisje (cases-blok): werkwijze.js zet hem naast de menupil,
   zichtbaar zolang het bord vaststaat (ww-head); wit, want het bord is donker. */
.werkwijze__bord > .werkwijze__ring { display: none; }
.site-header .werkwijze__ring { left: var(--ww-ring-left, 9rem); }
.ww-head .site-header .werkwijze__ring { opacity: 1; visibility: visible; scale: 1; transition: opacity 0.45s ease 0.18s, scale 0.8s var(--ease-im) 0.12s, visibility 0s; }
.ww-snap .site-header .werkwijze__ring { transition: none !important; }
.werkwijze__ring .cases__ring-track { stroke: color-mix(in srgb, var(--c-white) 22%, transparent); }
.werkwijze__ring .cases__ring-fill { stroke: var(--c-white); }
.werkwijze__ring .cases__muis { border-color: var(--c-white); }
.werkwijze__ring .cases__muis i { background: var(--c-white); }
/* Onder elkaar (telefoon, minder beweging, zonder JS). */
.werkwijze:not(.is-horizontaal) .werkwijze__rail { flex-direction: column; align-items: stretch; gap: var(--frame); width: auto; padding: var(--frame); }
.werkwijze:not(.is-horizontaal) .ww-stap { width: auto; height: auto; gap: 2.5rem; }
.werkwijze:not(.is-horizontaal) .ww-schets { align-self: center; width: 9.5rem; margin: 0.5rem 0; }
@media (max-width: 56.24em) {
	.werkwijze__boven { grid-template-columns: minmax(0, 1fr); }
	.werkwijze__roze { min-height: 0; }
	.werkwijze__foto { min-height: 55svh; }
}

/* ---------- Blok jij en wij (jijwij.php, jijwij.js), versie 2 ----------
   Op verzoek "on brand", gekozen: als chatgesprek. Links een roze vlak dat
   vast in beeld blijft, rechts het gesprek op het donker van het let's
   work-paneel (zelfde berichtjes, lwchat__bubbel), alleen groter. */
.jijwij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: var(--frame); padding: 0 var(--frame) var(--frame); }
.jijwij__roze { position: sticky; top: var(--frame); display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - 2 * var(--frame)); padding: calc(var(--header-top) + var(--btn-h) + 2rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.jijwij__kop { display: grid; gap: 1.25rem; }
.jijwij__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.jijwij__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 1rem + 4.4vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.jijwij__tekst { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-ink) 82%, transparent); }
.jijwij__knoppen { margin-top: 0.5rem; }
.jijwij__chat { display: flex; flex-direction: column; min-height: calc(100svh - 2 * var(--frame)); padding: calc(var(--header-top) + var(--btn-h) + 2rem) clamp(1.25rem, 0.5rem + 3vw, 4rem) clamp(2.5rem, 2rem + 3vw, 5rem); border-radius: var(--radius); background: var(--c-panel); }
.jijwij__chatkop { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent); }
.jijwij__chatkop .lwchat__naam { font-size: 1.1875rem; }
.jijwij__chatkop .lwchat__status { font-size: 0.875rem; }
.jijwij__draad { position: relative; display: flex; flex-direction: column; gap: 0.65rem; margin-top: auto; padding-top: clamp(2rem, 4vw, 3.5rem); }
.jijwij__systeem { margin-bottom: 0.5rem; font-size: 0.8125rem; }
.jijwij .jijwij__bubbel { max-width: min(82%, 32rem); padding: 0.75rem 1.15rem 0.8rem; border-radius: 1.4rem; font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); line-height: 1.38; }
.jijwij .jijwij__bubbel.is-vervolg { margin-top: -0.35rem; }
.jijwij__typt { position: absolute; left: 0; margin: 0; padding: 1rem 1.15rem; border-radius: 1.4rem; }
.jijwij__typt[hidden] { display: none; }
.jijwij__typt i { width: 0.5rem; height: 0.5rem; }
@media (max-width: 56.24em) {
	.jijwij { grid-template-columns: minmax(0, 1fr); }
	.jijwij__roze { position: relative; top: auto; min-height: 0; padding-top: 2.5rem; }
	.jijwij__chat { min-height: 0; padding-top: 2rem; }
	.jijwij .jijwij__bubbel { max-width: 88%; }
}

/* ---------- Blok vragen (vragen.php, vragen.js) ----------
   De kennisbankvragen van een paar onderwerpen in de opmaak van de index. */
.vragenblok { padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.vragenblok__kop { display: grid; gap: 1rem; max-width: 52rem; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.vragenblok__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.vragenblok__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 1rem + 4.6vw, 6.25rem); line-height: 0.96; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.vragenblok__tekst { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; color: var(--c-mute); }
.vragenblok__knoppen { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 404 (404.php, teken404.js) ----------
   Op verzoek simpel: één stippenbord van schermhoogte (10px marge, ronde
   hoeken) met de 404 zo groot als past, met de hand getekend door onze
   cursors; onderin het midden een zwevende balk met de knoppen, in de stijl
   van de schakelaar van de kennisbank, die met een bounce binnenvliegt. */
.nf { padding: var(--frame); }
.nf__bord {
	--nf-px: clamp(1.25rem, 3vw, 2.5rem);
	--nf-top: calc(var(--header-top) + var(--btn-h) + 3rem);
	--nf-onder: 7.5rem;
	position: relative;
	display: grid;
	place-items: center;
	height: calc(100svh - 2 * var(--frame));
	min-height: 30rem;
	padding: var(--nf-top) var(--nf-px) var(--nf-onder);
	overflow: clip;
	container-type: size;
	border-radius: var(--radius);
	background-color: var(--c-bord);
	background-image: radial-gradient(color-mix(in srgb, var(--c-white) 11%, transparent) 1px, transparent 1.6px);
	background-size: 24px 24px;
}
.nf__kicker { position: absolute; top: calc(var(--header-top) + var(--btn-h) + 1.25rem); left: var(--nf-px); margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.nf__kop { margin: 0; line-height: 0; }
/* Zo groot als past: de volle breedte, of de hoogte tussen kopje en balk (viewBox 394 x 244 met ruimte voor de handwiebel; cq-eenheden = binnen de padding). */
.nf__cijfers { display: block; width: min(100cqw, 100cqh * 1.6148); height: auto; overflow: visible; }
.nf__cijfers--staand { display: none; width: min(100cqw, 100cqh * 0.701); }
/* Een hoog bord (telefoon): de staande 404, die vult dan meer (gelijk oppervlak rond vierkant). */
@container (max-aspect-ratio: 1/1) {
	.nf__cijfers--liggend { display: none; }
	.nf__cijfers--staand { display: block; }
}
.nf__cijfers path { fill: none; stroke: var(--c-lavender); stroke-width: var(--dik, 1); stroke-linecap: round; stroke-linejoin: round; }
/* De zwevende balk: lichtbruin met schaduw, zoals kb-schakel; let's work als lavendel pil. */
.nf__balk {
	position: absolute;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 0.15rem;
	width: max-content;
	max-width: calc(100% - 1.5rem);
	margin-inline: auto;
	padding: 0.3rem;
	border-radius: var(--radius-pill);
	background: var(--c-bg-licht);
	box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--c-diep) 55%, transparent), 0 0.25rem 0.75rem color-mix(in srgb, var(--c-diep) 35%, transparent);
	transition: opacity 0.2s ease, translate 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js .nf__balk.is-weg { opacity: 0; translate: 0 calc(100% + 3rem); pointer-events: none; transition: opacity 0.2s ease 0.45s, translate 0.6s cubic-bezier(0.36, 0, 0.66, -0.56); }
.nf__balk-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.25rem; border-radius: var(--radius-pill); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); text-decoration: none; white-space: nowrap; transition: color 0.45s var(--ease-im), background-color 0.45s var(--ease-im); }
.nf__balk-link--lw { background: var(--c-lavender); color: var(--c-ink); }
.nf__balk-link:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
@media (hover: hover) {
	.nf__balk-link:not(.nf__balk-link--lw):hover { color: var(--c-lavender); }
	.nf__balk-link--lw:hover { background: var(--c-lavender-dark); }
}
/* Onze cursors. */
.nf .nf__pen { z-index: 5; opacity: 0; transition: opacity 0.5s ease; }
.nf .nf__pen.is-aan { opacity: 1; }
.has-im-cursors .nf__pen.is-zelf > * { visibility: visible !important; }
@media (max-width: 47.99em) {
	.nf__bord { --nf-onder: 6rem; }
	.nf__balk { gap: 0; }
	.nf__balk-link { min-height: 2.5rem; padding: 0 0.8rem; font-size: 0.875rem; }
}
@media (max-width: 23.5em) {
	.nf__balk-link { padding: 0 0.6rem; font-size: 0.8125rem; }
}

/* ---------- Tekstpagina (blok tekstpagina: toegankelijkheidsverklaring,
   algemene voorwaarden, privacyverklaring). De opmaak van een vraagpagina;
   hieronder alleen wat er anders is. ---------- */
/* Een lang woord in de kop (Toegankelijkheidsverklaring) mag afbreken op zijn
   zachte afbreekstreepje, ook nadat title-reveal de kop in regels heeft gezet
   (.title-line staat op nowrap); onder 400px wordt de kop iets kleiner. */
.vraag__titel.tekstpagina__titel { max-width: none; font-size: min(clamp(2.25rem, 0.9rem + 3.6vw, 5rem), 9vw); }
.tekstpagina__titel .title-line { white-space: normal; }
/* Kolommen zoals de footer en het manifest (1,25 : 1), zodat de zijkant
   precies zo breed is als het roze footervlak eronder; hij loopt door tot
   10px erboven. */
.tekstpagina .vraag__midden { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tekstpagina--geen .vraag__midden { grid-template-columns: minmax(0, 1fr); }
.tekstpagina .vraag__body { padding-bottom: clamp(3rem, 8vh, 5rem); }
/* Klein regeltje boven een tussenkop. */
.vraag__artikel .tekstpagina__kicker { margin: 2.6em 0 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.vraag__artikel .tekstpagina__kicker + h2 { margin-top: 0.3em; }
.vraag__artikel > .tekstpagina__kicker:first-child { margin-top: 0; }
/* Het slot: de vraag groot, de knoppen eronder. */
.tekstpagina .vraag__meer { display: grid; justify-items: start; gap: 1.25rem; width: 100%; max-width: 42rem; padding-top: clamp(1.75rem, 4vh, 2.5rem); border-top: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-white); font-size: inherit; }
.tekstpagina__vraag-kop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--c-white); text-wrap: balance; }
.tekstpagina__knoppen { gap: 0.5rem; }
@media (min-width: 56.25em) {
	/* Met een leeswijzer staat de vraag onderin de leeswijzer. */
	.tekstpagina--inhoud .vraag__body > .vraag__meer { display: none; }
}

/* De leeswijzer (tekstpagina.js): een lichter vlak van schermhoogte dat vast
   in beeld blijft. Bovenin (onder de pillen van de header) de teller en een
   lijntje dat vol loopt met het lezen, dan de hoofdstukken met een nummer; een
   lavendel pil schuift naar het hoofdstuk waar je bent, wat je al gelezen hebt
   is wit. Onderin de vraag met de knoppen. */
.tekstpagina__zij { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2rem); padding: calc(var(--header-top) + var(--btn-h) + 1.75rem) clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem); border-radius: var(--radius); background: var(--c-bg-licht); }
.tekstpagina__inhoud { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tekstpagina__kopregel { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); }
.tekstpagina__inhoud-kop { color: var(--c-lavender); }
.tekstpagina__teller { overflow: hidden; color: var(--c-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tekstpagina__teller b { display: inline-block; font-weight: 500; color: var(--c-white); }
.tekstpagina__balk { position: relative; flex: none; height: 2px; margin: 0.9rem 0 0.85rem; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--c-white) 12%, transparent); }
.tekstpagina__balk i { position: absolute; inset: 0; background: var(--c-lavender); transform-origin: 0 50%; scale: var(--tp-p, 0) 1; }
.tekstpagina__scroll { position: relative; flex: 0 1 auto; min-height: 0; margin: 0 -0.5rem; padding: 0.25rem 0.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.tekstpagina__scroll::-webkit-scrollbar { display: none; }
.tekstpagina__lijstvak { position: relative; }
.tekstpagina__pil { position: absolute; top: 0; left: 0; right: 0; height: var(--pil-h, 0); translate: 0 var(--pil-y, 0); border-radius: var(--radius-pill); background: var(--c-lavender); opacity: 0; pointer-events: none; }
.tekstpagina__pil.is-aan { opacity: 1; }
.tekstpagina__pil.is-klaar { transition: translate 0.6s var(--ease-im), height 0.6s var(--ease-im); }
.tekstpagina__lijst { display: grid; margin: 0; padding: 0; list-style: none; }
.tekstpagina__link { position: relative; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.95rem; border-radius: var(--radius-pill); color: var(--c-mute); font-family: var(--f-display); font-weight: 500; font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem); line-height: 1.25; text-decoration: none; transition: color 0.35s ease; }
.tekstpagina__nr { font-variant-numeric: tabular-nums; }
.tekstpagina__link.is-gelezen { color: color-mix(in srgb, var(--c-white) 88%, transparent); }
.tekstpagina__link:hover,
.tekstpagina__link:focus-visible { color: var(--c-white); }
.tekstpagina__link.is-actief { color: var(--c-ink); transition-delay: 0.12s; }
.tekstpagina__link:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.tekstpagina__zij .tekstpagina__vraag { flex: none; display: grid; justify-items: start; gap: 1rem; margin-top: auto; padding-top: clamp(1.25rem, 3vh, 1.75rem); border-top: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); }
.tekstpagina__zij .tekstpagina__vraag-kop { font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem); }
/* Telefoon en tablet: de hoofdstukken als uitklapper onder "in het kort",
   het hoofdstuk waar je bent als lavendel vlakje. */
.tekstpagina__uitklap { display: none; }
@media (max-width: 56.24em) {
	/* Eén kolom en geen leeswijzer (deze regels winnen anders van die van de vraagpagina). */
	.tekstpagina .vraag__midden { grid-template-columns: minmax(0, 1fr); }
	.tekstpagina__zij { display: none; }
	.tekstpagina__uitklap { display: block; width: 100%; max-width: 42rem; border-radius: var(--radius); background: var(--c-bg-licht); }
	.tekstpagina__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font-family: var(--f-display); font-weight: 500; color: var(--c-white); cursor: pointer; list-style: none; }
	.tekstpagina__summary::-webkit-details-marker { display: none; }
	.tekstpagina__summary svg { flex: none; width: 1.25rem; height: 1.25rem; transition: rotate 0.35s var(--ease-im); }
	.tekstpagina__uitklap[open] .tekstpagina__summary svg { rotate: 180deg; }
	.tekstpagina__uitklap .tekstpagina__lijst { padding: 0 0.5rem 0.75rem; }
	.tekstpagina__uitklap .tekstpagina__link { padding: 0.55rem 0.75rem; }
	.tekstpagina__uitklap .tekstpagina__link.is-actief { background: var(--c-lavender); }
}
@media (prefers-reduced-motion: reduce) {
	.tekstpagina__pil.is-klaar { transition: none; }
}

/* Cases op telefoon en tablet: de veegbare rij is ook met de pijltjes te
   bedienen (cases.js). Alleen bij toetsenbordfocus een rand, donker, want de
   lavendel rand van :focus-visible zie je op het roze niet. */
.cases__track:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -10px; }

/* ---------- Cases-bord (blok casesbord, casesbord.js; pagina Ons werk).
   Al het werk als frames op een stippenbord, zoals in Figma. Desktop met een
   muis: een vlak van schermhoogte met een camera (slepen, zoomen). Telefoon,
   tablet en touch (is-lees): de frames onder elkaar op een bord dat zo hoog
   wordt als nodig, met het stippendoek sticky erachter. Zonder JS: een raster. ---------- */
.casesbord { --kb3-p: calc(var(--gutter) - var(--frame)); position: relative; display: grid; gap: var(--frame); padding: var(--frame); color: var(--c-white); }
.casesbord__bord { position: relative; overflow: clip; border-radius: var(--radius); background: radial-gradient(120% 80% at 50% 45%, var(--c-bord), var(--c-bord-rand)); }
.casesbord__doek { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.casesbord__wereld { --z: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 3.5rem 1.5rem; padding: 3rem var(--gutter); }
.casesbord.is-js .casesbord__wereld { position: absolute; top: 0; left: 0; display: block; padding: 0; transform-origin: 0 0; will-change: transform; }
.casesbord .casesbord__wereld[hidden] { display: none; }
/* Een frame: naam erboven, foto, en bij aanwijzen de selectie met grepen en
   de maat rechtsonder (links eronder schrijft een van ons het woord). Naam, selectie en maat houden hun maat bij elk zoomniveau
   (--z van de camera), zoals in Figma. */
.cb-frame { position: relative; display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: opacity 0.5s ease, filter 0.5s ease; -webkit-tap-highlight-color: transparent; }
.casesbord.is-js .cb-frame { position: absolute; top: 0; left: 0; }
.cb-frame__naam { position: absolute; left: 0; bottom: 100%; padding-bottom: calc(0.45rem / var(--z)); color: var(--c-mute); font-family: var(--f-display); font-weight: 500; font-size: calc(0.8125rem / var(--z)); line-height: 1.2; white-space: nowrap; transition: color 0.25s ease; }
.casesbord:not(.is-js) .cb-frame__naam { position: static; display: block; }
.cb-frame__beeld { position: relative; display: block; overflow: hidden; border-radius: calc(0.5rem / var(--z)); background: var(--c-bg-licht); box-shadow: 0 1.5rem 3.5rem -1.5rem color-mix(in srgb, var(--c-diep) 80%, transparent); }
.casesbord:not(.is-js) .cb-frame__beeld { aspect-ratio: 4 / 3; }
.cb-frame__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: scale 0.8s var(--ease-im); }
.cb-frame__sel { position: absolute; inset: calc(-5px / var(--z)); border: calc(1.5px / var(--z)) solid var(--c-lavender); border-radius: calc(0.7rem / var(--z)); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.cb-frame__sel i { position: absolute; width: calc(8px / var(--z)); height: calc(8px / var(--z)); border: calc(1.5px / var(--z)) solid var(--c-lavender); border-radius: calc(2px / var(--z)); background: var(--c-white); }
.cb-frame__sel i:nth-child(1) { top: calc(-5px / var(--z)); left: calc(-5px / var(--z)); }
.cb-frame__sel i:nth-child(2) { top: calc(-5px / var(--z)); right: calc(-5px / var(--z)); }
.cb-frame__sel i:nth-child(3) { bottom: calc(-5px / var(--z)); left: calc(-5px / var(--z)); }
.cb-frame__sel i:nth-child(4) { bottom: calc(-5px / var(--z)); right: calc(-5px / var(--z)); }
.cb-frame__maat { position: absolute; right: 0; top: calc(100% + 12px / var(--z)); padding: calc(3px / var(--z)) calc(7px / var(--z)); border-radius: calc(4px / var(--z)); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: calc(0.75rem / var(--z)); line-height: 1.2; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; font-variant-numeric: tabular-nums; pointer-events: none; }
.cb-frame.is-hover .cb-frame__sel,
.cb-frame:focus-visible .cb-frame__sel,
.cb-frame.is-hover .cb-frame__maat,
.cb-frame:focus-visible .cb-frame__maat { opacity: 1; }
.cb-frame.is-hover .cb-frame__naam,
.cb-frame:focus-visible .cb-frame__naam { color: var(--c-lavender); }
.cb-frame.is-hover img { scale: 1.04; }
.cb-frame:focus-visible { outline: none; }
.cb-frame.is-uit { opacity: 0.12; filter: grayscale(1); pointer-events: none; }
/* Onze cursors (spoken): zichtbaar zolang ze werk hebben. */
.casesbord .cb-pen { z-index: 6; opacity: 0; transition: opacity 0.5s ease; }
.casesbord .cb-pen.is-aan { opacity: 1; }
.has-im-cursors .cb-pen.is-zelf > * { visibility: visible !important; }
.casesbord__jij { position: absolute; top: 0; left: 0; z-index: 7; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); background: var(--c-white); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.75rem; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.casesbord.is-muis:not(.is-sleep) .casesbord__jij { opacity: 1; }
/* Links een lavendel vlak, zoals de kennisbank: de inhoud onderaan, de kop
   groot (kb3__titel), de lagen als omlijnde pillen (kb3-onderwerp). */
.casesbord__paneel { display: grid; align-content: end; justify-items: start; gap: 1.25rem; padding: calc(var(--header-top) + var(--btn-h) + 3rem) var(--kb3-p) clamp(2.5rem, 5vw, 4.5rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
/* "Ons" en "werk." altijd onder elkaar (op verzoek): elk woord een eigen regel. */
.casesbord__kop { max-width: min-content; font-size: clamp(3rem, 1rem + 5.4vw, 7.5rem); }
.casesbord__pillen { margin-top: 0; }
.casesbord .kb3-onderwerp { border: 0; background: transparent; font-family: inherit; font-weight: inherit; line-height: 1; cursor: pointer; }
.casesbord .kb3-onderwerp:hover,
.casesbord .kb3-onderwerp:focus-visible,
.casesbord .kb3-onderwerp[aria-pressed="true"] { background: var(--c-ink); color: var(--c-lavender); }
.casesbord__knoppen { gap: 0.5rem; }
.cb-lagen { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 1.375rem; background: var(--c-bord-rand); }
.cb-laag { height: 2.25rem; padding: 0 0.95rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-mute); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1; cursor: pointer; transition: background-color 0.35s var(--ease-im), color 0.35s ease; }
.cb-laag:hover { color: var(--c-white); }
.cb-laag[aria-pressed="true"] { background: var(--c-lavender); color: var(--c-ink); }
.cb-laag:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.casesbord__zoom,
.casesbord__tip { display: none; }
/* Het paneel van een case: lavendel, rechts in het bord (telefoon: van onderen). */
.cb-case { position: absolute; top: var(--frame); right: var(--frame); bottom: var(--frame); z-index: 8; display: flex; flex-direction: column; width: min(30rem, 42%); overflow: hidden auto; border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); cursor: auto; translate: calc(100% + 2rem) 0; transition: translate 0.75s var(--ease-im); }
.cb-case[hidden] { display: none; }
.casesbord.is-case .cb-case { translate: 0 0; }
.cb-case:focus-visible { outline: none; }
.cb-case__foto { flex: 1 1 auto; min-height: 9rem; margin: var(--frame); overflow: hidden; border-radius: calc(var(--radius) * 0.8); }
.cb-case__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-case__tekst { display: grid; justify-items: start; gap: 0.9rem; padding: 0.5rem clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.2vw, 2rem); }
.cb-case__naam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.cb-case__intro { max-width: 34rem; font-size: 1.0625rem; line-height: 1.45; }
.cb-case__pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cb-case__pillen li { padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 35%, transparent); font-family: var(--f-display); font-weight: 500; font-size: 0.8125rem; line-height: 1.2; }
.cb-case__knoppen { gap: 0.5rem; padding-top: 0.25rem; }
.cb-case__knoppen [hidden] { display: none; }
/* De lagen zwevend onderin (telefoon en tablet), met de bounce van de kennisbank. */
.cb-zweef { position: fixed; left: 50%; bottom: calc(var(--frame) * 2 + 1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: calc(100vw - 4 * var(--frame)); padding: 0.25rem; border-radius: var(--radius-pill); background: var(--c-panel); box-shadow: 0 0.75rem 2rem -0.75rem color-mix(in srgb, var(--c-diep) 90%, transparent); translate: -50% 0; visibility: hidden; }
/* In en uit met een bounce via GSAP (casesbord.js zetZweef); de lijst zelf veegt opzij, met vervagende randen waar er nog meer staat. */
.cb-zweef .cb-lagen {
	display: flex;
	flex-wrap: nowrap;
	max-width: 100%;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border-radius: var(--radius-pill);
	background: none;
	scrollbar-width: none;
	--fl: 0;
	--fr: 0;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, calc(1 - var(--fl))) 0, #000 2rem, #000 calc(100% - 2rem), rgba(0, 0, 0, calc(1 - var(--fr))) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, calc(1 - var(--fl))) 0, #000 2rem, #000 calc(100% - 2rem), rgba(0, 0, 0, calc(1 - var(--fr))) 100%);
}
.cb-zweef .cb-lagen::-webkit-scrollbar { display: none; }
.cb-zweef .cb-laag { flex: none; height: 2.875rem; padding: 0 1.2rem; font-size: 1rem; } /* hoger dan in het paneel: prettiger te tikken (op verzoek) */
/* Een zacht donker verloop van onderen achter de balk, zodat de cases erachter wegvallen (op verzoek; een los
   element, want in de vaste balk zou het over zijn eigen achtergrond vallen). casesbord.js zet is-aan samen
   met de balk. */
.cb-zweef-waas { position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; height: 13rem; background: linear-gradient(to top, color-mix(in srgb, var(--c-diep) 88%, transparent), color-mix(in srgb, var(--c-diep) 50%, transparent) 50%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.1s; }
.cb-zweef-waas.is-aan { opacity: 1; transition-delay: 0s; }
.casesbord.is-bord .cb-zweef-waas, .page-card .cb-zweef-waas { display: none; }
.cb-zweef.is-weg { pointer-events: none; }
.page-card .cb-zweef { visibility: hidden !important; } /* GSAP zet visibility inline */

/* Bord-modus (desktop met een muis): een vlak van schermhoogte met een camera. */
.casesbord.is-bord { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); }
.casesbord.is-bord .casesbord__paneel,
.casesbord.is-bord .casesbord__bord { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
.casesbord.is-bord .casesbord__bord { cursor: grab; user-select: none; -webkit-user-select: none; }
.casesbord.is-bord.is-sleep .casesbord__bord { cursor: grabbing; }
/* Zoomen (op verzoek wit en omlijnd): losse pillen zoals in de header, met
   de krabbel bij hover; even hoog als de tip links. */
.casesbord.is-bord .casesbord__zoom { position: absolute; right: var(--frame); bottom: var(--frame); z-index: 5; display: flex; gap: 0.4rem; --btn-h: 2.5rem; --btn-px: 1rem; cursor: auto; }
.casesbord__zoom .pill { background: none; font-size: 0.875rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.casesbord__zoom-rond { width: var(--btn-h); padding: 0; }
/* Het rondje van de stilte (casesbord.js stilte()): links naast de zoomknoppen,
   loopt in 10 s groen vol en animeert dan weg terwijl het bord terugzoomt.
   Het icoon is "alles in beeld" (Lucide scan, ISC). */
.casesbord__rust { position: absolute; top: 0; right: calc(100% + 0.4rem); display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); color: var(--c-white); opacity: 0; scale: 0.6; pointer-events: none; transition: opacity 0.35s ease, scale 0.55s var(--ease-im); }
.casesbord__rust.is-aan { opacity: 1; scale: 1; }
.casesbord__rust-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.casesbord__rust-baan { fill: none; stroke: color-mix(in srgb, var(--c-white) 30%, transparent); stroke-width: 1; }
.casesbord__rust-vol { fill: none; stroke: var(--c-lavender); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.casesbord__rust-icoon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.casesbord__zoom-pct { min-width: 4.5rem; }

.casesbord__zoom .pill__label svg { display: block; width: 1.1rem; height: 1.1rem; }
/* De tip in de huisstijl (op verzoek): onze cursor in lavendel, Neulis, een
   omlijnde pil op het bord, de toets als klein omlijnd toetsje. */
.casesbord.is-bord .casesbord__tip { position: absolute; left: var(--frame); bottom: var(--frame); z-index: 5; display: flex; align-items: center; gap: 0.9rem; height: 2.5rem; margin: 0; padding: 0 1.1rem 0 0.95rem; border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-bord) 80%, transparent); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 0.8125rem; line-height: 1; white-space: nowrap; pointer-events: none; transition: opacity 0.3s ease; }
.casesbord__tip-deel { display: inline-flex; align-items: center; gap: 0.45rem; }
.casesbord__tip-deel + .casesbord__tip-deel { padding-left: 0.9rem; border-left: 1px solid color-mix(in srgb, var(--c-white) 25%, transparent); }
.casesbord__tip-pijl { flex: none; width: 0.95rem; height: 0.95rem; color: var(--c-lavender); }
.casesbord__tip kbd { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.35rem; border: 1px solid color-mix(in srgb, var(--c-white) 45%, transparent); border-radius: 0.35rem; font-family: inherit; font-size: 0.75rem; line-height: 1; }
.casesbord.is-bord.is-case .casesbord__tip { opacity: 0; pointer-events: none; }
.casesbord.is-bord .cb-zweef { display: none; }

/* Lees-modus (telefoon, tablet, touch): de frames onder elkaar. */
.casesbord.is-lees .casesbord__bord { display: flex; flex-direction: column; }
/* Telefoon en tablet (op verzoek "gewoon blokjes van 100% breed met 10px
   marge overal"): geen bord en geen stippen, de cases als blokken met ronde
   hoeken en 10px ertussen (casesbord.js lees()), de naam als donkere pil
   linksonder in de foto. */
.casesbord.is-lees .casesbord__bord { background: none; border-radius: 0; overflow: visible; }
.casesbord.is-lees .casesbord__doek { display: none; }
.casesbord.is-lees .cb-frame__beeld { border-radius: var(--radius); box-shadow: none; }
.casesbord.is-lees .cb-frame__naam { z-index: 2; left: var(--frame); bottom: var(--frame); max-width: calc(100% - 2 * var(--frame)); padding: 0.55rem 0.95rem; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-lavender); font-size: 0.875rem; line-height: 1.2; }
.casesbord.is-lees .cb-frame__sel,
.casesbord.is-lees .cb-frame__maat { display: none; }
/* Onder de foto (alleen telefoon en tablet, op verzoek): naam met een pijlrondje rechts, intro, diensten. */
.cb-frame__onder { display: none; }
.casesbord.is-lees .cb-frame__naam { display: none; }
.casesbord.is-lees .cb-frame__onder { display: grid; gap: 0.6rem; padding: 1rem 0.25rem 1.5rem; }
.cb-frame__rij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cb-frame__titel { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--c-white); }
.cb-frame__pijl { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 45%, transparent); color: var(--c-white); }
.cb-frame__pijl svg { width: 1.2rem; height: 1.2rem; }
.cb-frame__intro { max-width: 34rem; font-size: 1rem; line-height: 1.45; color: color-mix(in srgb, var(--c-white) 75%, transparent); }
.cb-frame__pillen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cb-frame__pillen span { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 0.75rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 35%, transparent); color: var(--c-white); font-size: 0.8125rem; }
.casesbord.is-lees .casesbord__paneel { padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3.5rem); }
.casesbord.is-lees .cb-frame.is-uit { display: none; }
/* Opacity, scale en translate bij een andere laag doet casesbord.js (leesWissel); een CSS-transitie zou meevechten. */
.casesbord.is-lees .cb-frame { transition: none; }
.casesbord.is-lees .cb-case { position: fixed; top: auto; left: var(--frame); right: var(--frame); bottom: var(--frame); width: auto; max-height: 86svh; translate: 0 calc(100% + 2rem); }
.casesbord.is-lees .cb-case__foto { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
.casesbord.is-lees.is-case .cb-case { translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
	.cb-case, .cb-zweef, .cb-frame__beeld img { transition: none; }
}

/* ---------- Case-pagina (single-case.php, casepagina.js). Dezelfde opbouw als
   het bord: links het lavendel vlak (vast in beeld op desktop), rechts de
   case. ---------- */
.casepagina { --kb3-p: calc(var(--gutter) - var(--frame)); display: grid; gap: var(--frame); padding: var(--frame); color: var(--c-white); }
.casepagina__paneel { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.25rem; }
.casepagina__terug { gap: 0.4rem; margin-bottom: auto; padding-left: 0.75rem; }
.casepagina__terug svg { flex: none; width: 1rem; height: 1rem; }
.casepagina__info { display: grid; justify-items: start; gap: 1.1rem; }
.casepagina__kop { font-size: clamp(2.5rem, 0.8rem + 3.4vw, 5.5rem); overflow-wrap: anywhere; hyphens: auto; }
.casepagina__kop .title-line { white-space: normal; }
.casepagina__kpis,
.casepagina__diensten { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.casepagina__kpis li { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 1rem; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-lavender); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.2; }
.casepagina__diensten li { display: inline-flex; align-items: center; height: 2.125rem; padding: 0 0.85rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 35%, transparent); color: var(--c-ink); font-size: 0.8125rem; }
/* Rechts: foto, verhaal, de site in een venster, quote, volgende case. */
/* Bovenaan: het vlak en de foto naast elkaar (podium); daaronder alles over de volle breedte (versie 3). */
.casepagina__podium-held { display: grid; gap: var(--frame); }
.casepagina__inhoud { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--frame); min-width: 0; } /* de kolom mag krimpen: anders rekende hij met het langste woord en liep de tekst op de telefoon buiten beeld */
.casepagina__foto { position: relative; height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); }
.casepagina__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.casepagina__tekst { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(2rem, 5vh, 3rem); padding: clamp(3rem, 8vh, 5.5rem) var(--kb3-p) clamp(2rem, 6vh, 4rem); overflow-wrap: break-word; hyphens: auto; }
/* Lange woorden (onderhandelingscapaciteiten) maakten op de telefoon de hele pagina breder. */
.casepagina__tekst > * { max-width: 100%; }
/* In het kort: groot (Neulis) en het vult zich woord voor woord (casepagina.js vullen). */
.casepagina__lead { display: grid; align-content: start; gap: 1.25rem; }
.casepagina__lead .vraag__kort-kop { margin: 0; }
.casepagina__lead-tekst { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 2vw, 3.25rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--c-white); text-wrap: pretty; }
.casepagina__verhaal { max-width: min(38rem, 100%); padding-top: 0; border-top: 0; } /* zonder de lijn van de vraagpagina (op verzoek) */
/* De site in een browservenster: het venster blijft staan, de site schuift erin mee. */
.casepagina__site { position: relative; height: 240svh; }
/* Onder de pillen van de header, anders vallen die over de adresbalk. */
.casepagina__venster { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1rem); display: flex; flex-direction: column; height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--header-top) - var(--btn-h) - 1rem - var(--frame)); overflow: hidden; border-radius: var(--radius); background: var(--c-panel); }
.casepagina__balk { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem 0.7rem 1.1rem; }
.casepagina__stippen { display: flex; gap: 0.35rem; }
.casepagina__stippen i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 22%, transparent); }
.casepagina__adres { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); background: var(--c-bg-licht); color: var(--c-mute); font-size: 0.875rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
/* Bekijk live: een gewone pil zoals in de header (Neulis, witte rand, de krabbel loopt vol bij hover; op verzoek). */
.casepagina__live { --btn-h: 2.25rem; --btn-px: 1rem; flex: none; font-size: 0.875rem; }
.casepagina__live .pill__label { display: inline-flex; align-items: center; gap: 0.35rem; }
.casepagina__live .pill__label svg { flex: none; width: 1rem; height: 1rem; }
.casepagina__scherm { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 var(--frame) var(--frame); overflow: hidden; border-radius: calc(var(--radius) * 0.8); background: var(--c-bg-licht); }
.casepagina__site-img { display: block; width: 100%; height: auto; will-change: transform; }
.casepagina__quote { display: grid; gap: 1.5rem; margin: 0; padding: clamp(2rem, 5vw, 4.5rem) var(--kb3-p); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.casepagina__quote blockquote { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 2vw, 3.25rem); line-height: 1.18; letter-spacing: -0.01em; text-wrap: pretty; }
.casepagina__quote blockquote p { margin: 0; }
.casepagina__quote figcaption { display: grid; gap: 0.15rem; font-size: 1rem; }
.casepagina__quote figcaption b { font-family: var(--f-display); font-weight: 600; }
.casepagina__quote figcaption span { color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
@media (min-width: 56.25em) {
	.casepagina__podium-held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
	.casepagina__paneel { height: 100%; }
	/* Desktop met muis (casepagina.js held): het podium staat vast terwijl je 70% van een scherm
	   scrolt; het vlak gaat dicht en de foto groeit mee tot de volle breedte. */
	.casepagina.is-held .casepagina__held { height: calc(200svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
	.casepagina.is-held .casepagina__podium-held { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame)); }
	.casepagina__tekst { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: clamp(2.5rem, 6vw, 8rem); }
	.casepagina__lead { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 2.5rem); }
}
@media (max-width: 56.24em) {
	.casepagina__paneel { padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1.5rem); }
	.casepagina__terug { margin-bottom: 1.5rem; }
	.casepagina__foto { height: 62svh; }
	.casepagina__site { height: 200svh; }
	.casepagina__venster { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--header-top) - var(--btn-h) - 1rem - var(--frame)); }
}

/* ---------- Case-pagina versie 2 (op verzoek 2026-10-13 richting B "zoals
   Ons verhaal", met onze zwevende cursors; casepagina.js) ---------- */
/* Een van onze cursors als spook (Nick op de foto, Ben aan de scrollbalk, om de
   beurt bij de feiten); zichtbaar als de zwevende
   cursor er niet is (telefoon) of na het vangnet (is-zelf). */
.cp-pen { position: absolute; top: 0; left: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; will-change: transform; }
.cp-pen.is-aan { opacity: 1; }
/* De foto: een waas onderin en het woord dat Nick er met de hand op schrijft. */
.casepagina__foto-waas { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-scrim) 70%, transparent) 100%); opacity: 0; pointer-events: none; transition: opacity 2.2s cubic-bezier(0.45, 0, 0.25, 1); }
.casepagina__foto.is-waas .casepagina__foto-waas { opacity: 1; }
.casepagina__woord { position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1rem, 2.5vw, 2rem); overflow: visible; fill: none; stroke: var(--c-white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--c-scrim) 60%, transparent)); pointer-events: none; }
/* De zin met de site als woord erin (zoals de kop van Ons verhaal). */
.casepagina__zin { max-width: 16em; margin: 0 auto; padding: clamp(4rem, 12vh, 8rem) var(--kb3-p) clamp(2rem, 5vh, 3.5rem); text-align: center; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.25rem, 1rem + 3.4vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--c-white); text-wrap: balance; }
.casepagina__w { display: inline-block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: top; }
.casepagina__w-in { display: inline-block; }
.casepagina__klein { position: relative; display: inline-block; width: 1.85em; height: 0.8em; margin: 0 0.04em; vertical-align: -0.02em; }
.casepagina__doel { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; overflow: hidden; border-radius: 0.3em; background: var(--c-bg-licht); isolation: isolate; will-change: transform; }
.casepagina__doel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.casepagina__zin.is-weg .casepagina__doel { visibility: hidden; }
.casepagina.is-zin .casepagina__site:not(.is-open) .casepagina__site-img { opacity: 0; }
.casepagina.is-zin-stil .casepagina__klein { display: none; }
/* De scrollbalk in het venster; Ben houdt hem vast zolang je scrolt. */
.casepagina__rol { position: absolute; top: 0; right: 6px; bottom: 0; z-index: 2; width: 6px; pointer-events: none; }
.casepagina__rol i { position: absolute; top: 0; left: 0; width: 100%; border-radius: 3px; background: color-mix(in srgb, var(--c-ink) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-white) 55%, transparent); }
.casepagina__rol-pen { z-index: 5; }
/* De KPI's als blokjes (zoals de feiten in Ons verhaal), het schetsje rechtsboven. */
.casepagina__feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.casepagina__feit { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; min-height: clamp(15rem, 32vh, 20rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--c-bg-licht); color: var(--c-white); }
.casepagina__feit--roze { background: var(--c-lavender); color: var(--c-ink); }
.casepagina__feit--tegel { background: var(--c-bg-tegel); }
.casepagina__feit-schets { position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); width: 4.5rem; height: 4.5rem; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 0.55; stroke-linecap: round; stroke-linejoin: round; }
.casepagina__feit--roze .casepagina__feit-schets { stroke: var(--c-ink); }
.casepagina__feit-tekst { max-width: 14ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
.casepagina__feit-getal { font-family: var(--f-display); font-weight: 600; font-size: clamp(3.5rem, 2rem + 4vw, 6.5rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.casepagina__feit-getal [data-cp-getal] { display: inline-block; }
.casepagina__feit-eenheid { font-size: 0.45em; letter-spacing: -0.01em; }
.casepagina__feit-label { font-size: 1.125rem; color: color-mix(in srgb, currentColor 75%, transparent); }
/* De KPI's naast het venster met de site (op verzoek): links een kolom met de eigenschappen en de
   blokjes, die langs het vaste venster omhoog schuift terwijl je door de site scrolt. */
.casepagina__preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--frame); } /* mag krimpen (zie .casepagina__inhoud) */
.casepagina__zij { display: grid; align-content: start; gap: var(--frame); min-width: 0; }
.casepagina__zij .casepagina__feiten { grid-template-columns: minmax(0, 1fr); }
/* Het eigenschappenpaneel staat vast op de hoogte van het venster (casepagina.js stapel(); desktop met muis,
   alleen als het met wat lucht in het scherm past); de KPI's eronder schalen naar achteren en verdwijnen
   eronder door. */
.casepagina__zij.is-vast .cp-eig { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1rem); z-index: 3; }
@media (min-width: 56.25em) {
	.casepagina__preview:not(.casepagina__preview--zonder-site) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: stretch; }
	.casepagina__preview:not(.casepagina__preview--zonder-site) .casepagina__site { height: auto; min-height: 240svh; }
	/* Gewoon 10px tussen paneel en blokjes, zoals overal (op verzoek; eerst stond er veel lucht tussen). */
	.casepagina__preview:not(.casepagina__preview--zonder-site) .casepagina__feit { min-height: 0; padding: clamp(1.5rem, 2.2vw, 2.25rem); }
	.casepagina__preview:not(.casepagina__preview--zonder-site) .casepagina__feit-schets { top: clamp(1rem, 1.6vw, 1.5rem); right: clamp(1rem, 1.6vw, 1.5rem); width: 3.25rem; height: 3.25rem; stroke-width: 0.7; }
	.casepagina__preview:not(.casepagina__preview--zonder-site) .casepagina__feit-getal { font-size: clamp(2.75rem, 1.5rem + 2.6vw, 4.75rem); }
	.casepagina__preview:not(.casepagina__preview--zonder-site) .casepagina__feit-tekst { font-size: clamp(1.375rem, 0.9rem + 1vw, 2rem); padding-right: 3.5rem; }
}
/* Uitleg onder een KPI (uit het verhaal) en de stroom van een koppeling. */
.casepagina__feit-uitleg { max-width: 30rem; font-size: 1rem; line-height: 1.45; color: color-mix(in srgb, currentColor 78%, transparent); }
.casepagina__feit--roze .drawer__footer-link { color: var(--c-ink); }
.casepagina__stroom { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2.75rem; margin-top: 0.75rem; }
.casepagina__stroom-stap { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.85rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); font-family: var(--f-display); font-weight: 500; font-size: 0.875rem; white-space: nowrap; }
.casepagina__stroom-pijlen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.casepagina__feit--roze .casepagina__stroom-pijlen { stroke: var(--c-ink); }
/* Groen gehost: het blaadje in vast groen (zoals de badge in de footer). */
/* Altijd ons donkergroene blokje, ook op een case met eigen huisstijlkleuren (op verzoek): binnen het
   blokje gelden de vaste groene tokens uit style.css, het blaadje blijft het vaste groen. */
.casepagina__feit--groen { --c-lavender: var(--c-groen-accent); --c-underline: var(--c-groen-lijn); background: var(--c-groen-vlak); color: var(--c-white); }
.casepagina__feit--groen .casepagina__feit-schets { stroke: var(--c-groen); }
/* Eigenschappen, zoals het paneel rechts in Figma. */
.cp-eig { padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--radius); background: var(--c-panel); color: var(--c-white); }
.cp-eig__kop { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem; font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; }
.cp-eig__kop span { min-width: 0; overflow: hidden; color: var(--c-mute); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cp-eig__lijst { display: grid; margin: 0; }
.cp-eig__rij { display: grid; grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 2fr); align-items: start; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); }
.cp-eig__rij dt { padding-top: 0.15rem; color: var(--c-mute); font-size: 0.875rem; }
.cp-eig__rij dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; }
.cp-eig__rij dd small { flex-basis: 100%; color: var(--c-mute); font-family: var(--f-body, inherit); font-weight: 400; font-size: 0.8125rem; }
.cp-eig__pillen span { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.7rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 55%, transparent); color: var(--c-lavender); font-size: 0.8125rem; }
/* Platform en koppelingen als omlijnde pillen (op verzoek), met het logo erin waar we er een hebben; wit, de diensten groen. */
.cp-eig__merken span { gap: 0.4rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 35%, transparent); color: var(--c-white); }
.cp-eig__merken svg { flex: none; width: 0.95rem; height: 0.95rem; }
/* WooCommerce: alleen het Woo-logo (op verzoek), ongeveer zo hoog als de tekst in de andere pillen (1,06 rem
   was op verzoek "overduidelijk te groot"); de naam staat er voor schermlezers. */
.cp-eig__merken .cp-eig__logo svg { width: auto; height: 0.72rem; }
.cp-eig__groen { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--c-groen); }
.cp-eig__groen svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-eig__snel { flex-wrap: nowrap !important; }
.cp-eig__ring { position: relative; display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; }
.cp-eig__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; stroke-width: 2.5; }
.cp-eig__ring circle:first-child { stroke: color-mix(in srgb, var(--c-white) 12%, transparent); }
.cp-eig__ring-vol { stroke: var(--c-lavender); stroke-dasharray: 100; stroke-linecap: round; }
.cp-eig__ring b { position: relative; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cp-eig__snel > span:last-child { display: grid; gap: 0.1rem; }
.cp-eig__snel > span:last-child small { flex-basis: auto; }
/* De link in de vragen: de onderstreping van het thema, wit (op verzoek, was off brand). */
.faq__antwoord-tekst a.casepagina__faq-link { color: var(--c-white); }
/* Vragen uit de kennisbank (zelfde uitklappers als het faq-blok op de home). */
.casepagina__faq { display: grid; gap: clamp(2rem, 4vw, 4rem); padding: clamp(3rem, 8vh, 6rem) var(--kb3-p); }
.casepagina__faq-kop { display: grid; justify-items: start; gap: 1.25rem; }
.casepagina__faq-kop .vraag__kort-kop { margin: 0; }
.casepagina__faq-titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.25rem, 1rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.casepagina__faq-kop .btns { margin-top: 0.5rem; }
@media (min-width: 56.25em) {
	.casepagina__faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
	.casepagina__faq-kop { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 2.5rem); }
}
/* Zonder quote: de afsluiter in hetzelfde vlak, met een regeltje erboven. */
/* De afsluiter (op verzoek, zoals het tweede blok op de home): een grote gecentreerde zin in het
   accent op de donkere pagina, die zich vult terwijl je leest; vooraan het fotootje van de persoon
   (of een rondje met de eerste letter), bij geen quote de foto van de case als pilletje. */
.casepagina__slot { display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(5rem, 16vh, 10rem) var(--kb3-p); text-align: center; } /* boven en onder evenveel ruimte (op verzoek) */
.casepagina__slot-tekst { max-width: min(17em, 100%); margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1rem + 3vw, 4.5rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.casepagina__slot-tekst p { margin: 0; }
.casepagina__slot-foto { display: inline-block; width: 2em; height: 1.1em; margin: 0 0.08em; overflow: hidden; vertical-align: -0.2em; border-radius: 999px; background: var(--c-bg-licht); }
.casepagina__slot-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.casepagina__slot-foto--wie { width: 1.1em; }
.casepagina__slot-foto--letter { background: var(--c-lavender); color: var(--c-op-accent); }
/* De letter staat in een eigen blok: zo lijnt het rondje uit als een foto (inline-block met overflow: de
   onderrand op -0,2em). Als inline-grid lijnde het uit op de letter erin en zakte het, de regel werd hoger. */
.casepagina__slot-foto--letter span { display: grid; place-items: center; height: 100%; font-size: 0.6em; line-height: 1; }
/* Lange quotes kleiner en iets breder (single-case.php: tot 120 tekens groot, tot 300 middel, daarboven lang). */
.casepagina__slot--middel .casepagina__slot-tekst { max-width: min(20em, 100%); font-size: clamp(1.75rem, 0.9rem + 2.2vw, 3.25rem); line-height: 1.15; }
.casepagina__slot--lang .casepagina__slot-tekst { max-width: min(24em, 100%); font-size: clamp(1.375rem, 0.85rem + 1.45vw, 2.5rem); line-height: 1.2; }
.casepagina__slot-wie { display: grid; gap: 0.2rem; margin: 0; font-size: 1rem; color: var(--c-mute); }
.casepagina__slot-wie b { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; color: var(--c-white); }
/* De quote vult zich woord voor woord. */
.is-vullen .casepagina__qw { opacity: 0.25; transition: opacity 0.35s ease; }
.is-vullen .casepagina__qw.is-aan { opacity: 1; }
@media (max-width: 56.24em) {
	.casepagina__klein { display: none; }
}
@media (max-width: 47.99em) {
	.casepagina__feiten { grid-template-columns: minmax(0, 1fr); }
	.casepagina__feit { min-height: 12rem; }
}

/* Overgang tussen bord en case (casesbord.js naarCase/vanCase, casepagina.js,
   app.js im-bord): niets aanklikbaar, de bediening weg, de foto zonder
   hover-zoom (dan is de uitsnede precies die van de case-pagina), en zodra de
   foto groeit ook naam, selectie en maat weg. De vlucht van "volgende case"
   is een losse kopie van de foto bovenop de pagina, onder de header (40). */
.casesbord.is-overgang { pointer-events: none; }
/* Meteen weg (geen overgang bij het verbergen, anders flitsen ze even); terug met een fade. */
.casesbord.is-bord .casesbord__zoom { transition: opacity 0.4s ease; }
.casesbord.is-overgang .casesbord__zoom,
.casesbord.is-overgang .casesbord__tip,
.casesbord.is-overgang .casesbord__jij,
.casesbord.is-overgang .cb-pen { opacity: 0; transition: none; }
.casesbord.is-overgang .cb-frame img { scale: 1; }
.casesbord.is-groeit .cb-frame__sel,
.casesbord.is-groeit .cb-frame__naam,
.casesbord.is-groeit .cb-frame__maat { opacity: 0; transition: opacity 0.3s ease; }
/* Terug naar het bord in de header, naast de menupil (case-pagina, desktop;
   op verzoek 2026-10-13). Zelfde pil als "terug naar de website" in Mijn
   omgeving; de pil in het groene vlak zelf blijft voor telefoon en tablet.
   Plek naast het menu via --bord-terug-left (casepagina.js). */
.site-header__terug.site-header__terug--bord,
.site-header__terug.site-header__terug--vac { display: none; left: var(--bord-terug-left, 9rem); }
/* De lijst op zijn volle breedte (anders krimpt hij in de rij en begint de knop erna midden in de laatste case). */
.cases__list:has(+ .cases__eind) { flex: none; }
.cases__eind { flex: none; display: flex; align-items: center; padding-left: clamp(1.25rem, 5vw, 6rem); scroll-snap-align: end; }
@media (min-width: 56.25em) {
	/* Alleen de pil naar het bord: de pil naar de diensten heeft ook de klasse --bord (voor de plek) en lag er
	   anders bovenop, dan ging "terug" op een case naar /diensten/ (gerepareerd 2026-10-14). */
	.single-case .site-header__terug.site-header__terug--bord:not(.site-header__terug--dienst) { display: inline-flex; }
	/* Terug naar alle vacatures (vacatures.js). */
	.single-vacature .site-header__terug.site-header__terug--vac { display: inline-flex; }
	.casepagina__terug { display: none; }
}
.cp-vlucht { position: fixed; z-index: 39; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); pointer-events: none; will-change: top, left, width, height; }
.cp-vlucht img { display: block; width: 100%; height: 100%; object-fit: cover; }
.casepagina.is-overgang { pointer-events: none; }

/* ---------- Diensten (2026-10-14; inc/diensten.php): de blokken dienst,
   dienst_tekst, dienst_venster, dienst_vragen, dienst_slot en diensten. Ze
   gebruiken de opmaak en de beweging van de case-pagina (casepagina.js doet
   ook [data-cp-blok]); hier alleen wat anders is. ---------- */
/* Elk blok is een eigen sectie: alleen 10px opzij, het bovenste ook boven. */
.casepagina--blok { padding: 0 var(--frame); }
.casepagina--blok.dienstheld { padding-top: var(--frame); }
/* Bovenaan: het groene vlak met label, kop, intro, pillen en knoppen. */
.dienstheld .casepagina__info { align-self: stretch; container-type: inline-size; }
.dienstheld__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
/* Lange woorden (Webapplicatie) maken de kop kleiner: --woord is het langste woord in tekens. */
.dienstheld__kop { font-size: min(clamp(2.75rem, 0.9rem + 3.6vw, 5.75rem), calc(100cqi / (var(--woord, 8) * 0.62))); overflow-wrap: normal; hyphens: manual; }
.dienstheld__intro > * + * { margin-top: 0.6em; }
.dienstheld__pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.dienstheld__pil { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 1rem; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-lavender); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.2; }
.dienstheld__knoppen { margin-top: 0.4rem; }
/* De pil terug naar alle diensten staat boven het label (bovenin het vlak staat de menupil). */
.dienstheld .dienstheld__terug { display: inline-flex; margin: 0 0 0.5rem; }
.dienstheld__terug { gap: 0.4rem; padding-left: 0.75rem; }
.dienstheld__terug svg { flex: none; width: 1rem; height: 1rem; }
/* In het kort: groot, dus niet afbreken met een streepje (dat gebeurde midden in WordPress en bedrijf). */
.diensttekst .casepagina__lead-tekst { hyphens: manual; }
/* Lage laptopschermen: het vlak staat vast en is precies het scherm hoog, dus kop, intro en ruimtes
   schalen mee met de hoogte (gemeten op 1280 x 720 en 1366 x 768, daar liep de knop eronder weg). */
@media (min-width: 56.25em) and (max-height: 56rem) {
	.dienstheld__paneel { padding-top: calc(var(--header-top) + var(--btn-h) + 1.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.75rem); }
	.dienstheld .casepagina__info { gap: 0.8rem; }
	.dienstheld__kop { font-size: min(clamp(2.75rem, 0.9rem + 3.6vw, 5.75rem), calc(100cqi / (var(--woord, 8) * 0.62)), 8.4vh); }
	.dienstheld__intro { font-size: min(var(--fs-lead), 2.45vh); line-height: 1.4; }
	.dienstheld__pil { min-height: 2.125rem; padding: 0.25rem 0.85rem; font-size: 0.8125rem; }
	.dienstheld .dienstheld__terug { height: 2.125rem; margin-bottom: 0; }
}
/* De zwevende schakelaar met de diensten van een groep (Nieuwe webshop, Webshop vernieuwen, Hosting
   & onderhoud): op de telefoon passen die namen niet op één regel, dan mogen ze over twee regels. */
@media (max-width: 30em) {
	.paginaschakel { width: calc(100% - 2 * var(--frame)); }
	.paginaschakel .kb-schakel__link { padding: 0.3rem 0.55rem; font-size: 0.8125rem; line-height: 1.1; text-align: center; white-space: normal; text-wrap: balance; }
}
/* Nog lager: de pillen weg (ze vatten samen wat verderop uitgebreid staat). */
@media (min-width: 56.25em) and (max-height: 47rem) {
	.dienstheld__pillen { display: none; }
}
/* De uitleg: ook tussenkoppen van een niveau lager. */
.vraag__artikel h3 { margin-top: 2em; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--c-lavender); text-wrap: balance; }
.vraag__artikel h3 + * { margin-top: 0.6em; }

/* Foto's in een blogtekst (de oude blogs van de vorige site, setup 66). */
.vraag__artikel figure { margin: 2em 0 0; }
.vraag__artikel figure + * { margin-top: 2em; }
.vraag__artikel figure img { width: 100%; border-radius: var(--radius); }
/* Blokjes: de kop is een h3, de uitleg mag alinea's hebben. */
.casepagina__feit-label { margin: 0; font-family: var(--f-body); font-weight: 400; }
.casepagina__feit-uitleg > * + * { margin-top: 0.5em; }
/* Het venster met tabbladen: elke case een tabblad, de sites liggen op elkaar. */
.dienstvenster__tabs { gap: 1rem; padding-bottom: 0.25rem; }
.dienstvenster__tablijst { display: flex; flex: 1 1 auto; gap: 0.3rem; min-width: 0; }
.dienstvenster__tab { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 0.55rem; min-width: 0; max-width: 13rem; height: 2.25rem; padding: 0 0.95rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--c-mute); font: inherit; font-family: var(--f-display); font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.dienstvenster__tab:hover { background: color-mix(in srgb, var(--c-white) 6%, transparent); color: var(--c-white); }
.dienstvenster__tab.is-actief { background: var(--c-bg-licht); color: var(--c-white); }
.dienstvenster__tab:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 2px; }
/* Een stipje in de huisstijlkleur van de klant, zoals een favicon. */
.dienstvenster__favicon { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--fav, var(--c-lavender)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-white) 28%, transparent); }
.dienstvenster__tabnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dienstvenster__adresbalk { padding-top: 0.35rem; }
.dienstvenster .casepagina__site-img { position: absolute; top: 0; left: 0; }
.dienstvenster .casepagina__site-img.is-weg { visibility: hidden; }
.dienstvenster .casepagina__site-img.is-boven { z-index: 1; }
/* Zonder venster (hosting, AI, de merkpagina's): op desktop het paneel links (vast in beeld) en de blokjes
   rechts per twee, zoals paneel en venster; zonder paneel de blokjes per drie. Telefoon: onder elkaar. */
.dienstvenster .casepagina__preview--zonder-site .casepagina__zij { grid-template-columns: minmax(0, 1fr); }
.dienstvenster .casepagina__preview--zonder-site .casepagina__feiten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
@media (min-width: 56.25em) {
	.dienstvenster .casepagina__preview--zonder-site .casepagina__zij:has(> .cp-eig) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: start; }
	.dienstvenster .casepagina__preview--zonder-site .casepagina__zij:has(> .cp-eig) .casepagina__feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dienstvenster .casepagina__preview--zonder-site .cp-eig { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1rem); }
}
.dienstvenster .casepagina__zin:only-child,
.dienstvenster .casepagina__preview--zonder-site { padding-bottom: clamp(2rem, 6vh, 4rem); }
/* Het bord van de werkwijze als losse stap op een dienstpagina: de kop staat als eerste op het bord. */
.werkwijze--bord { padding-top: var(--frame); }
.ww-intro { flex: none; display: grid; align-content: center; justify-items: start; gap: 1.25rem; width: clamp(20rem, 34vw, 36rem); }
.ww-intro__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-lavender); }
.ww-intro__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 1rem + 4.2vw, 6.25rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.ww-intro__tekst { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 80%, transparent); }
.werkwijze:not(.is-horizontaal) .ww-intro { width: auto; padding: clamp(2rem, 6vw, 3rem) clamp(0.5rem, 2vw, 1.5rem) 1rem; }
@media (max-width: 56.24em) {
	.dienstvenster__tab { max-width: 9rem; padding: 0 0.75rem; }
	.dienstvenster__tabs .casepagina__stippen { display: none; }
}

/* ---------- Dienst, weergave home (2026-10-14, op verzoek "mag wat weg hebben
   van de homepagina"): links de tekst op de donkere pagina zoals de hero van de
   home, rechts twee tegels onder elkaar (foto en live scène). ---------- */
.dienstheld--home { padding-top: var(--frame); }
.dh { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--frame); }
.dh__tekst { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.25rem; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 2rem) calc(var(--gutter) - var(--frame)) clamp(1.5rem, 4vh, 2.5rem); container-type: inline-size; }
.dh__terug { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.95rem 0 0.7rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 30%, transparent); color: var(--c-white); font-size: 0.875rem; text-decoration: none; transition: box-shadow 0.3s ease, color 0.3s ease; }
.dh__terug svg { flex: none; width: 1rem; height: 1rem; }
.dh__terug:hover,
.dh__terug:focus-visible { box-shadow: inset 0 0 0 1px var(--c-lavender); color: var(--c-lavender); }
.dh__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
/* Groot en in het accent, zoals de kop van de home maar korter dus groter. Lange woorden (Webapplicatie) maken hem kleiner. */
.dh__titel { margin: 0; max-width: 11em; font-family: var(--f-display); font-weight: 600; font-size: min(clamp(2.75rem, 0.9rem + 4.1vw, 6.25rem), calc(100cqi / (var(--woord, 8) * 0.62)), 10.5vh); line-height: 0.95; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.dh__titel .title-line { white-space: normal; }
/* "voor" met een rollende pil (roll.js, zoals het blok werk). */
.dh__voor { margin: -0.35rem 0 0; font-family: var(--f-display); font-weight: 600; font-size: min(clamp(1.5rem, 0.95rem + 1.5vw, 2.6rem), 5vh); line-height: 1.26; letter-spacing: -0.01em; color: var(--c-white); }
/* De pil iets hoger dan in het blok werk: hier staan woorden met een staart (g, j). */
.dh__voor .roll { height: 1.24em; }
.dh__voor .roll__item { height: 1.24em; line-height: 1.24em; }
.dh__intro { max-width: 34rem; font-size: min(var(--fs-lead), 2.6vh); line-height: 1.4; color: color-mix(in srgb, var(--c-white) 86%, transparent); text-wrap: pretty; }
.dh__intro > * + * { margin-top: 0.6em; }
.dh__pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.dh__pil { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.95rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 55%, transparent); color: var(--c-lavender); font-size: 0.875rem; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; }
.dh__pil:hover,
.dh__pil:focus-visible { background: var(--c-lavender); color: var(--c-ink); }
.dh__knoppen { margin-top: 0.25rem; }
/* De tegels: foto boven (onder de pillen van de header), de scène eronder. */
.dh__tegels { display: grid; grid-template-rows: minmax(0, 1fr); gap: var(--frame); min-height: 0; }
.dh__tegels.heeft-scene:has(.dh__tegel--foto) { grid-template-rows: minmax(0, 0.78fr) minmax(0, 1.22fr); }
.dh__tegel { position: relative; min-height: 0; margin: 0; overflow: hidden; border-radius: var(--radius); }
.dienstheld--home .dh__tegel--foto { height: auto; }
.dh__tegel--scene { container: scene / size; background-color: var(--c-bord); background-image: radial-gradient(color-mix(in srgb, var(--c-white) 11%, transparent) 1px, transparent 1.6px); background-size: 24px 24px; }
@media (min-width: 56.25em) {
	.dh { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); min-height: 34rem; }
}
@media (max-width: 56.24em) {
	.dh__tegel--foto { display: none; }
	.dh__tegel--scene { aspect-ratio: 4 / 5; max-height: 82svh; }
	.dh__tegels { grid-template-rows: auto !important; }
}

/* ---------- Live scènes (template-parts/dienstscene.php, dienstscene.js).
   Alles in em: de scène schaalt met zijn tegel (container scene). Breed
   ontworpen op ongeveer 52 x 37 em, smal (telefoon) op 30 x 38 em. ---------- */
.ds { position: absolute; inset: 0; font-size: clamp(9px, min(1.9cqw, 3.05cqh), 17px); line-height: 1.3; color: var(--c-white); }
.ds__inhoud { position: absolute; inset: 0; }
.ds .ds-cursor { z-index: 6; transition: none; }
.ds-pen { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ds-ic { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-ic--groot { width: 3.4em; height: 3.4em; stroke-width: 1.1; }
.ds-vink { flex: none; width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Bouwstenen: venster, knop, kaart, chip, en wat je sleept. */
.ds-win { position: relative; border-radius: 0.9em; background: var(--c-panel); box-shadow: 0 1.4em 3em -1.4em color-mix(in srgb, var(--c-scrim) 70%, transparent); }
.ds-win__balk { display: flex; align-items: center; gap: 0.35em; height: 2.75em; padding: 0 0.9em; flex: none; }
.ds-win__balk i { flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 20%, transparent); }
.ds-win__adres { margin-left: 0.6em; padding: 0.25em 0.85em; border-radius: var(--radius-pill); background: var(--c-bg-licht); color: var(--c-mute); font-size: 0.8em; white-space: nowrap; transition: box-shadow 0.3s ease, color 0.3s ease; }
.ds-win__adres.is-aan { box-shadow: inset 0 0 0 1.5px var(--c-lavender); color: var(--c-white); }
.ds-knop { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; height: 2.4em; padding: 0 1.15em; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 40%, transparent); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 0.95em; white-space: nowrap; }
.ds-knop--vol { background: var(--c-lavender); box-shadow: none; color: var(--c-ink); }
.ds-knop--klein { height: 2.1em; padding: 0 0.9em; font-size: 0.82em; }
.ds-knop__na { display: none; align-items: center; gap: 0.35em; }
.ds-knop.is-klaar .ds-knop__voor { display: none; }
.ds-knop.is-klaar .ds-knop__na { display: inline-flex; }
.ds-knop.is-bezig .ds-knop__voor { opacity: 0; }
.ds-knop.is-bezig::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.4em; height: 0.4em; margin: -0.2em 0 0 -0.2em; border-radius: 50%; background: currentColor; box-shadow: -0.75em 0 0 currentColor, 0.75em 0 0 currentColor; animation: ds-stip 0.9s ease-in-out infinite; }
@keyframes ds-stip { 50% { opacity: 0.35; } }
.ds-kaart { border-radius: 0.8em; background: var(--c-bg-licht); padding: 1em 1.1em; }
.ds-kaart__kop { display: flex; align-items: center; gap: 0.5em; font-family: var(--f-display); font-weight: 600; }
.ds-kaart__kop .ds-ic { color: var(--c-lavender); }
.ds-chip { display: inline-flex; align-items: center; gap: 0.45em; height: 2.2em; padding: 0 0.9em; border-radius: var(--radius-pill); background: var(--c-bg-licht); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 45%, transparent); color: var(--c-white); font-size: 0.85em; white-space: nowrap; }
.ds-chip .ds-vink,
.ds-chip .ds-ic { color: var(--c-lavender); }
.ds-chip--klein { height: 1.9em; font-size: 0.78em; }
.ds-sleep { position: absolute; top: 0; left: 0; z-index: 5; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 0.9em; border-radius: 0.6em; background: var(--c-bg-tegel); box-shadow: 0 1em 2em -0.8em color-mix(in srgb, var(--c-scrim) 80%, transparent); color: var(--c-white); font-size: 0.9em; white-space: nowrap; pointer-events: none; rotate: -3deg; }
.ds-sleep .ds-ic { color: var(--c-lavender); }

/* Webshop: één venster met de kassa als lade; rechts wat er vanzelf gebeurt, op de hoogte van het venster. */
.ds--webshop .ds__inhoud { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); column-gap: 4.5em; padding: 3.2em 3.2em; }
.ds-shop { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ds-shop__mand { position: absolute; top: 0.6em; right: 0.8em; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.3em 0.25em 0.6em; border-radius: var(--radius-pill); background: var(--c-bg-licht); font-size: 0.85em; }
.ds-shop__mand b { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--c-bg-tegel); font-size: 0.85em; transition: background-color 0.3s ease, color 0.3s ease; }
.ds-shop__mand.is-vol b { background: var(--c-lavender); color: var(--c-ink); }
.ds-shop__product { display: grid; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto; gap: 1.1em; min-height: 0; padding: 0.2em 1.2em 1.3em; }
.ds-shop__foto { display: grid; place-items: center; min-height: 0; border-radius: 0.7em; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c-lavender) 22%, var(--c-bg-licht)) 0%, var(--c-bg-licht) 62%); color: var(--c-lavender); }
.ds-shop__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25em 1em; }
.ds-shop__naam { font-family: var(--f-display); font-weight: 600; font-size: 1.35em; }
.ds-shop__voorraad { grid-row: 2; display: inline-flex; align-items: center; gap: 0.45em; color: var(--c-mute); font-size: 0.85em; }
.ds-shop__voorraad i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c-lavender); }
.ds-shop__info .ds-knop { grid-column: 2; grid-row: 1 / 3; }
.ds-kassa { position: absolute; top: 2.75em; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; width: 60%; padding: 1.3em 1.4em; border-radius: 0.8em 0 0.9em 0; background: var(--c-bg-licht); box-shadow: -1.4em 0 2.2em -1.6em color-mix(in srgb, var(--c-scrim) 90%, transparent); }
.ds-kassa__kop { font-family: var(--f-display); font-weight: 600; font-size: 1.2em; }
.ds-kassa__opties { display: flex; flex-wrap: wrap; gap: 0.4em; }
.ds-kassa .ds-knop { align-self: flex-start; }
.ds-optie { padding: 0.45em 0.85em; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 22%, transparent); color: var(--c-mute); font-size: 0.85em; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.ds-optie.is-gekozen { background: var(--c-bg-tegel); box-shadow: inset 0 0 0 1.5px var(--c-lavender); color: var(--c-white); }
.ds-uit { display: flex; flex-direction: column; justify-content: space-between; gap: 0.8em; margin: 0; padding: 2.75em 0 0; list-style: none; }
.ds-uit__rij { display: flex; align-items: center; gap: 0.85em; padding: 1em 1.05em; border-radius: 0.8em; background: var(--c-bg-licht); }
.ds-uit__rij > span { display: grid; flex: 1 1 auto; gap: 0.1em; min-width: 0; color: var(--c-mute); font-size: 0.85em; }
.ds-uit__rij b { color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: 1.18em; }
.ds-uit__rij .ds-ic { width: 1.5em; height: 1.5em; color: var(--c-lavender); }
.ds-uit__rij .ds-vink { color: var(--c-lavender); }

/* Website: links de blokken, rechts de pagina met lege vakken. */
.ds--website .ds__inhoud { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); column-gap: 2.4em; padding: 3em; }
.ds-bib { align-self: center; display: flex; flex-direction: column; gap: 0.55em; padding: 1.1em; }
.ds-bib__kop { margin-bottom: 0.3em; font-family: var(--f-display); font-weight: 600; }
.ds-bib__blok { display: flex; align-items: center; gap: 0.55em; padding: 0.7em 0.8em; border-radius: 0.6em; background: var(--c-bg-licht); font-size: 0.9em; white-space: nowrap; transition: opacity 0.3s ease; }
.ds-bib__blok .ds-ic { color: var(--c-lavender); }
.ds-bib__blok.is-gebruikt { opacity: 0.4; }
.ds-site { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ds-live { display: inline-flex; align-items: center; margin-left: auto; height: 1.95em; padding: 0 0.85em; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 500; font-size: 0.8em; white-space: nowrap; }
.ds-live__na { display: none; align-items: center; gap: 0.45em; }
.ds-live__na i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--c-lavender); animation: ds-puls 1.6s ease-in-out infinite; }
.ds-live.is-klaar { background: var(--c-bg-licht); color: var(--c-white); }
.ds-live.is-klaar .ds-live__voor { display: none; }
.ds-live.is-klaar .ds-live__na { display: inline-flex; }
@keyframes ds-puls { 50% { box-shadow: 0 0 0 0.4em color-mix(in srgb, var(--c-lavender) 25%, transparent); } }
.ds-site__pagina { display: grid; flex: 1 1 auto; grid-template-rows: 1.5fr 1fr 0.8fr 0.7fr; gap: 0.6em; min-height: 0; padding: 0.2em 0.9em 0.9em; }
.ds-slot { position: relative; min-height: 0; border-radius: 0.6em; outline: 1.5px dashed color-mix(in srgb, var(--c-white) 22%, transparent); outline-offset: -1.5px; transition: outline-color 0.3s ease; }
.ds-slot.is-gevuld { outline-color: transparent; }
.ds-blok { position: absolute; inset: 0; display: flex; border-radius: 0.6em; background: var(--c-bg-licht); }
.ds-blok b,
.ds-blok i { display: block; }
.ds-blok--kop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 0.9em; padding: 0.9em; }
.ds-blok__tekst { display: grid; gap: 0.45em; }
.ds-blok__tekst b { height: 0.75em; border-radius: 0.3em; background: color-mix(in srgb, var(--c-white) 80%, transparent); }
.ds-blok__tekst b + b { width: 65%; }
.ds-blok--kop .ds-blok__tekst b:first-child { height: 1em; background: var(--c-lavender); }
.ds-blok__tekst i { width: 5em; height: 1.6em; margin-top: 0.35em; border-radius: var(--radius-pill); background: var(--c-lavender); }
.ds-blok__beeld { display: grid; place-items: center; height: 100%; border-radius: 0.45em; background: var(--c-bg-tegel); color: var(--c-lavender); }
.ds-blok--diensten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; padding: 0.7em; }
.ds-blok--diensten i { border-radius: 0.4em; background: var(--c-bg-tegel); }
.ds-blok--reviews { align-items: center; gap: 0.9em; padding: 0.7em 1em; }
.ds-blok__ster { font-family: var(--f-display); font-weight: 600; font-size: 1.3em; color: var(--c-lavender); }
.ds-blok--reviews .ds-blok__tekst { flex: 1 1 auto; }
.ds-blok--contact { align-items: center; gap: 0.6em; padding: 0.7em 1em; }
.ds-blok--contact b { flex: 1 1 auto; height: 1.7em; border-radius: var(--radius-pill); background: var(--c-bg-tegel); }
.ds-blok--contact i { width: 5em; height: 1.7em; border-radius: var(--radius-pill); background: var(--c-lavender); }

/* Vernieuwen: oud en nieuw in één venster, de schuif ertussen. */
.ds--vernieuwen .ds__inhoud,
.ds--vernieuwen-shop .ds__inhoud { display: flex; flex-direction: column; gap: 1.1em; padding: 2.8em 3.2em; }
.ds-vv { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
.ds-vv__beeld { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 0.7em 0.7em; overflow: hidden; border-radius: 0.6em; }
/* De oude site: grijs, een schreefletter, onderstreepte links en een sticker. */
.ds-vv__oud { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-white) 86%, var(--c-scrim)); color: var(--c-ink); font-family: Georgia, "Times New Roman", serif; }
.ds-oud__balk { display: flex; gap: 0.9em; padding: 0.7em 1em; background: color-mix(in srgb, var(--c-white) 55%, var(--c-scrim)); }
.ds-oud__balk u { display: block; width: 3.2em; height: 0.5em; border-bottom: 2px solid color-mix(in srgb, var(--c-white) 85%, var(--c-scrim)); }
.ds-oud__kop { display: block; margin: 1em 1em 0.6em; font-size: 1.55em; text-decoration: underline; text-underline-offset: 0.15em; }
.ds-oud__nieuw { position: absolute; top: 3.4em; right: 1.4em; padding: 0.25em 0.7em; rotate: 12deg; background: var(--c-lavender); color: var(--c-ink); font-weight: 700; font-size: 0.95em; }
.ds-oud__vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; margin: 0 1em; }
.ds--vernieuwen-shop .ds-oud__vakken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-oud__vakken i { display: block; height: 5em; border: 3px outset color-mix(in srgb, var(--c-white) 70%, var(--c-scrim)); background: color-mix(in srgb, var(--c-white) 74%, var(--c-scrim)); }
.ds-vv__nieuw { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.9em; padding-bottom: 1em; background: var(--c-bg); clip-path: inset(0 0 0 5%); }
.ds-nw__balk { display: flex; align-items: center; gap: 0.9em; padding: 0.8em 1.1em; }
.ds-nw__balk b { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c-lavender); }
.ds-nw__balk span { display: flex; gap: 0.5em; }
.ds-nw__balk span i { display: block; width: 2.6em; height: 0.4em; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-white) 45%, transparent); }
.ds-nw__balk em { margin-left: auto; width: 4.6em; height: 1.7em; border-radius: var(--radius-pill); background: var(--c-lavender); }
.ds-nw__balk .ds-ic { margin-left: auto; color: var(--c-lavender); }
.ds-nw__kop { max-width: 9em; padding: 0.2em 1.1em 0; font-family: var(--f-display); font-weight: 600; font-size: 2.1em; line-height: 1; color: var(--c-lavender); }
.ds-nw__rij { display: flex; gap: 0.5em; padding: 0 1.1em; }
.ds-nw__knop { width: 6em; height: 1.9em; border-radius: var(--radius-pill); background: var(--c-lavender); }
.ds-nw__knop--om { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 50%, transparent); }
.ds-nw__beeld { flex: 1 1 auto; margin: 0 1.1em; border-radius: 0.6em; background: linear-gradient(135deg, color-mix(in srgb, var(--c-lavender) 30%, var(--c-bg-licht)), var(--c-bg-tegel)); }
.ds-nw__producten { display: grid; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; padding: 0 1.1em; }
.ds-nw__producten i { border-radius: 0.6em; background: var(--c-bg-licht); }
.ds-nw__producten i:nth-child(odd) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-lavender) 28%, var(--c-bg-licht)), var(--c-bg-licht)); }
.ds-vv__schuif { position: absolute; top: 0; bottom: 0; left: 5%; z-index: 2; width: 2px; margin-left: -1px; background: var(--c-lavender); }
.ds-vv__schuif span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.5em; height: 2.5em; translate: -50% -50%; border-radius: 50%; background: var(--c-lavender); box-shadow: 0 0.6em 1.4em -0.4em color-mix(in srgb, var(--c-scrim) 80%, transparent); color: var(--c-ink); }
.ds-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; }

/* Hosting: de takenlijst links, snelheid en groen rechts. */
.ds--hosting .ds__inhoud { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1em 1.4em; padding: 3em 3.2em; }
.ds-onderhoud { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; padding: 1.1em 1.3em; }
.ds-onderhoud__kop { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 0.6em; font-family: var(--f-display); font-weight: 600; font-size: 1.15em; }
.ds-onderhoud__kop .ds-knop { font-size: 0.72em; }
.ds-taak { display: flex; align-items: center; gap: 0.75em; padding: 0.75em 0.15em; border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); font-size: 0.95em; }
.ds-taak > .ds-ic { color: var(--c-mute); }
.ds-taak > span:nth-of-type(1) { flex: 1 1 auto; }
.ds-taak__status { position: relative; display: grid; place-items: center; width: 1.6em; height: 1.6em; color: var(--c-lavender); }
.ds-taak__status i { display: none; width: 1.1em; height: 1.1em; border: 2px solid color-mix(in srgb, var(--c-white) 25%, transparent); border-top-color: var(--c-lavender); border-radius: 50%; animation: ds-draai 0.8s linear infinite; }
.ds-taak__status .ds-vink { display: none; }
.ds-taak.is-bezig .ds-taak__status i { display: block; }
.ds-taak.is-klaar .ds-taak__status .ds-vink { display: block; }
.ds-taak.is-klaar > .ds-ic { color: var(--c-white); }
@keyframes ds-draai { to { rotate: 360deg; } }
.ds-snel { display: flex; flex-direction: column; gap: 0.7em; min-height: 0; }
.ds-snel__lijn { flex: 1 1 auto; width: 100%; min-height: 5em; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 2.4; stroke-linecap: round; }
.ds-groen { display: flex; align-items: center; gap: 0.85em; }
.ds-groen > span:last-child { display: grid; gap: 0.1em; color: var(--c-mute); font-size: 0.85em; }
.ds-groen b { color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: 1.18em; }
.ds-groen__blad { display: grid; flex: none; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: color-mix(in srgb, var(--c-groen) 18%, transparent); color: var(--c-groen); }
.ds-groen__blad .ds-ic { width: 1.4em; height: 1.4em; }

/* Koppeling: drie systemen, een schakelaar, pakketjes. */
.ds-schakel { position: absolute; top: 2.4em; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 0.6em; height: 2.3em; padding: 0 1em 0 0.4em; translate: -50% 0; border-radius: var(--radius-pill); background: var(--c-bg-licht); font-size: 0.9em; }
.ds-schakel__knop { position: relative; width: 2.7em; height: 1.55em; border-radius: var(--radius-pill); background: var(--c-bg-tegel); transition: background-color 0.3s ease; }
.ds-schakel__knop i { position: absolute; top: 0.2em; left: 0.2em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--c-white); transition: translate 0.4s var(--ease-im), background-color 0.3s ease; }
.ds-schakel.is-aan .ds-schakel__knop { background: var(--c-lavender); }
.ds-schakel.is-aan .ds-schakel__knop i { translate: 1.15em 0; background: var(--c-ink); }
.ds-sys { position: absolute; display: grid; gap: 0.8em; width: 31%; padding: 1em 1.15em; }
.ds-sys--0 { top: 50%; left: 6%; translate: 0 -38%; }
.ds-sys--1 { top: 23%; right: 6%; }
.ds-sys--2 { right: 6%; bottom: 10%; }
.ds-sys__kop { display: flex; align-items: center; gap: 0.65em; min-width: 0; font-family: var(--f-display); font-weight: 600; white-space: nowrap; }
.ds-sys__ic { display: grid; flex: none; place-items: center; width: 2.2em; height: 2.2em; border-radius: 0.55em; background: var(--c-bg-licht); color: var(--c-lavender); }
.ds-sys__tel { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; color: var(--c-mute); font-size: 0.85em; }
.ds-sys__tel b { display: inline-block; color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: 1.7em; font-variant-numeric: tabular-nums; }
.ds-pakket { position: absolute; top: 0; left: 0; z-index: 4; padding: 0.35em 0.75em; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 500; font-size: 0.78em; white-space: nowrap; opacity: 0; }

/* AI: inbox links, het concept rechts. */
.ds--ai .ds__inhoud { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 1.4em; padding: 3em; }
.ds-inbox { display: flex; flex-direction: column; gap: 0.5em; padding: 1em; }
.ds-inbox__kop { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.3em; font-family: var(--f-display); font-weight: 600; }
.ds-mail { display: flex; gap: 0.7em; padding: 0.75em 0.85em; border-radius: 0.6em; background: var(--c-bg-licht); font-size: 0.85em; transition: box-shadow 0.3s ease; }
.ds-mail > i { flex: none; width: 0.55em; height: 0.55em; margin-top: 0.4em; border-radius: 50%; }
.ds-mail.is-nieuw { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-lavender) 60%, transparent); }
.ds-mail.is-nieuw > i { background: var(--c-lavender); }
.ds-mail > span { display: grid; gap: 0.15em; min-width: 0; color: var(--c-mute); }
.ds-mail b { overflow: hidden; color: var(--c-white); font-family: var(--f-display); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ds-concept { display: flex; flex-direction: column; gap: 0.9em; padding: 1.2em 1.3em; }
.ds-concept__kop { display: flex; align-items: center; gap: 0.5em; color: var(--c-lavender); font-family: var(--f-display); font-weight: 600; }
.ds-concept__tekst { line-height: 1.45; }
.ds-concept__bronnen { display: flex; }
.ds-concept__knoppen { display: flex; justify-content: flex-end; gap: 0.5em; }
.ds-ai__mens { position: absolute; right: 3em; bottom: 1.4em; }

/* App: een klantomgeving. */
.ds--app .ds__inhoud { display: flex; padding: 3em 3.4em; }
.ds-app { display: grid; flex: 1 1 auto; grid-template-columns: 3.6em minmax(0, 1fr); overflow: hidden; }
.ds-app__nav { display: flex; flex-direction: column; align-items: center; gap: 0.9em; padding: 1.1em 0; border-right: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); }
.ds-app__logo { width: 1.7em; height: 1.7em; margin-bottom: 0.5em; border-radius: 0.45em; background: var(--c-lavender); }
.ds-app__item { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 0.55em; color: var(--c-mute); }
.ds-app__item.is-aan { background: var(--c-bg-tegel); color: var(--c-white); }
.ds-app__inhoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.8em; padding: 1.2em 1.3em; }
.ds-app__hoi { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 600; font-size: 1.7em; color: var(--c-lavender); }
.ds-app__offerte { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1em; }
.ds-app__offerte > span:first-child,
.ds-app__factuur > span:first-child { display: grid; gap: 0.15em; color: var(--c-mute); font-size: 0.85em; }
.ds-app__offerte b,
.ds-app__factuur b,
.ds-app__planning > b { color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: 1.15em; }
.ds-app__planning { grid-row: 2 / 4; grid-column: 2; display: flex; flex-direction: column; justify-content: center; gap: 0.6em; }
.ds-app__factuur { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
.ds-stappen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3em; padding-top: 1.4em; color: var(--c-mute); font-size: 0.82em; }
.ds-stappen i { position: absolute; top: 0; left: 0; right: 0; height: 0.5em; overflow: hidden; border-radius: var(--radius-pill); background: var(--c-bg-tegel); }
.ds-stappen i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--c-lavender); }
.ds-status { display: inline-flex; align-items: center; height: 1.9em; padding: 0 0.85em; border-radius: var(--radius-pill); background: var(--c-bg-tegel); color: var(--c-mute); font-size: 0.8em; white-space: nowrap; }
.ds-status__na { display: none; }
.ds-status.is-klaar { background: var(--c-lavender); color: var(--c-ink); }
.ds-status.is-klaar .ds-status__voor { display: none; }
.ds-status.is-klaar .ds-status__na { display: inline; }

/* Logo en verpakking: een ontwerpvenster en drie toepassingen. */
.ds--logo .ds__inhoud,
.ds--verpakking .ds__inhoud { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 1.4em; padding: 3em; }
.ds-doek { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.ds-doek__tools { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 0.6em; padding: 1em 0; border-right: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); }
.ds-doek__tools span { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; color: var(--c-mute); }
.ds-doek__tools span:first-child { background: var(--c-bg-tegel); color: var(--c-white); }
.ds-doek__vlak { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6em; min-height: 0; margin: 1em 1em 0.6em; border-radius: 0.5em; background-color: color-mix(in srgb, var(--c-white) 3%, transparent); background-image: radial-gradient(color-mix(in srgb, var(--c-white) 10%, transparent) 1px, transparent 1.6px); background-size: 1.2em 1.2em; }
.ds-doek__teken { width: auto; height: 58%; max-width: 80%; aspect-ratio: 1; overflow: visible; fill: none; stroke: var(--c-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.6s ease; }
.ds-doek__vlak.is-kleur .ds-doek__teken { stroke: var(--c-lavender); }
.ds-doek__naam,
.ds-doek__label { font-family: var(--f-display); font-weight: 600; font-size: 1.6em; transition: color 0.6s ease; }
.ds-doek__vlak.is-kleur .ds-doek__naam,
.ds-doek__vlak.is-kleur .ds-doek__label { color: var(--c-lavender); }
.ds-doek__kleuren { display: flex; gap: 0.5em; padding: 0 1em 1em; }
.ds-doek__kleuren i { display: block; width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 25%, transparent); }
.ds-doek__kleuren .is-0 { background: var(--c-lavender); }
.ds-doek__kleuren .is-1 { background: var(--c-bg); }
.ds-doek__kleuren .is-2 { background: var(--c-white); }
.ds-doek__kleuren .is-3 { background: var(--c-bg-tegel); }
.ds-mockups { display: flex; flex-direction: column; justify-content: center; gap: 0.7em; }
.ds-mockup { display: flex; align-items: center; gap: 0.75em; padding: 0.85em 0.95em; border-radius: 0.7em; background: var(--c-bg-licht); font-size: 0.9em; }
.ds-mockup__merk { flex: none; width: 1.9em; height: 1.9em; border: 2px solid var(--c-lavender); border-radius: 50%; }
.ds-mockup .ds-ic { margin-left: auto; color: var(--c-mute); }

/* Foto: de zoeker groot, de strook eronder. */
.ds--foto .ds__inhoud { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1em; padding: 2.6em 3em; }
.ds-zoeker { position: relative; min-height: 0; overflow: hidden; border-radius: 0.8em; background: var(--c-panel); }
.ds-zoeker__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-zoeker__hoeken i { position: absolute; width: 1.8em; height: 1.8em; border: 2px solid var(--c-white); }
.ds-zoeker__hoeken i:nth-child(1) { top: 1em; left: 1em; border-right: 0; border-bottom: 0; }
.ds-zoeker__hoeken i:nth-child(2) { top: 1em; right: 1em; border-left: 0; border-bottom: 0; }
.ds-zoeker__hoeken i:nth-child(3) { bottom: 1em; left: 1em; border-right: 0; border-top: 0; }
.ds-zoeker__hoeken i:nth-child(4) { right: 1em; bottom: 1em; border-left: 0; border-top: 0; }
.ds-zoeker__focus { position: absolute; top: 45%; left: 50%; width: 6em; height: 4.4em; translate: -50% -50%; border: 1.5px solid var(--c-lavender); border-radius: 0.3em; }
.ds-zoeker__flits { position: absolute; inset: 0; background: var(--c-white); opacity: 0; }
.ds-zoeker__info { position: absolute; bottom: 1.1em; left: 3.2em; display: flex; align-items: center; gap: 0.6em; color: var(--c-white); font-size: 0.8em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px var(--c-scrim); }
.ds-zoeker__info span { color: var(--c-mute); }
.ds-zoeker__knop { position: absolute; right: 3.2em; bottom: 0.8em; width: 2.6em; height: 2.6em; border: 2px solid var(--c-white); border-radius: 50%; }
.ds-zoeker__knop::after { content: ""; position: absolute; inset: 0.25em; border-radius: 50%; background: var(--c-white); }
.ds-strook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
.ds-strook__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.5em; background: var(--c-bg-licht); }
.ds-strook__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-strook__hart { position: absolute; top: 0.4em; right: 0.4em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: color-mix(in srgb, var(--c-scrim) 55%, transparent); color: var(--c-white); }
.ds-strook__hart .ds-ic { width: 0.95em; height: 0.95em; }
.ds-strook__foto.is-gekozen .ds-strook__hart { background: var(--c-lavender); color: var(--c-ink); }
.ds-strook__foto.is-gekozen .ds-strook__hart svg { fill: currentColor; }

/* Animatie: het podium met de baan, de tijdlijn eronder. */
.ds--animatie .ds__inhoud { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1em; padding: 2.8em 3em; }
.ds-podium { position: relative; min-height: 0; overflow: hidden; background-image: radial-gradient(color-mix(in srgb, var(--c-white) 9%, transparent) 1px, transparent 1.6px); background-size: 1.2em 1.2em; }
.ds-podium__baan { position: absolute; top: 1.2em; left: 1.4em; width: calc(100% - 2.8em); height: calc(100% - 2.4em); overflow: visible; fill: none; stroke: color-mix(in srgb, var(--c-lavender) 70%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.ds-podium__bol { position: absolute; top: calc(1.2em + (100% - 2.4em) * 0.2); left: calc(1.4em + (100% - 2.8em) * 0.933); width: 1.9em; height: 1.9em; margin: -0.95em 0 0 -0.95em; border-radius: 50%; background: var(--c-lavender); box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--c-lavender) 18%, transparent); }
.ds-tijdlijn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1em; padding: 0.9em 1.1em; }
.ds-tijdlijn__kop { display: flex; align-items: center; gap: 0.5em; font-family: var(--f-display); font-weight: 600; font-size: 0.9em; }
.ds-tijdlijn__play { display: inline-grid; color: var(--c-lavender); }
.ds-tijdlijn__play .ds-ic { width: 1.5em; height: 1.5em; }
.ds-tijdlijn__spoor { position: relative; height: 2.2em; }
.ds-tijdlijn__spoor > i { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--c-white) 15%, transparent); }
.ds-key { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 0.85em; height: 0.85em; margin: -0.42em 0 0 -0.42em; rotate: 45deg; border-radius: 0.15em; background: var(--c-lavender); }
.ds-tijdlijn__kop-lijn { position: absolute; top: 0; bottom: 0; left: calc(var(--k, 1) * 100%); width: 2px; background: var(--c-white); }
.ds-tijdlijn__curve { display: flex; align-items: center; gap: 0.5em; color: var(--c-mute); font-size: 0.75em; white-space: nowrap; }
.ds-tijdlijn__curve svg { width: 3em; height: 1.3em; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Social: de telefoon met posts, rechts de week. */
.ds--social .ds__inhoud { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: center; gap: 2em; padding: 2.4em 3.2em; }
.ds-telefoon { position: relative; justify-self: center; display: flex; flex-direction: column; gap: 0.6em; width: min(100%, 12.5em); aspect-ratio: 9 / 17; padding: 0.9em 0.75em; border-radius: 1.6em; background: var(--c-panel); box-shadow: inset 0 0 0 0.35em var(--c-bg-licht), 0 1.4em 3em -1.4em color-mix(in srgb, var(--c-scrim) 70%, transparent); }
.ds-telefoon__kop { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0.3em 0; font-size: 0.8em; }
.ds-telefoon__av { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c-lavender); }
.ds-post { display: flex; flex: 1 1 0; align-items: flex-end; padding: 0.7em; border-radius: 0.6em; font-family: var(--f-display); font-weight: 600; font-size: 0.9em; line-height: 1.1; }
.ds-post--a { background: var(--c-lavender); color: var(--c-ink); }
.ds-post--b { background: var(--c-bg-tegel); }
.ds-hartjes { position: absolute; top: 40%; right: -0.6em; display: flex; flex-direction: column; color: var(--c-lavender); }
.ds-hartjes svg { width: 1.3em; height: 1.3em; fill: currentColor; stroke: none; }
.ds-week { display: flex; flex-direction: column; gap: 0.9em; padding: 1.1em 1.2em; }
.ds-week__kop { display: flex; align-items: center; gap: 0.5em; font-family: var(--f-display); font-weight: 600; }
.ds-week__kop .ds-ic { color: var(--c-lavender); }
.ds-week__dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35em; }
.ds-dag { display: flex; flex-direction: column; align-items: center; gap: 0.4em; color: var(--c-mute); font-size: 0.75em; }
.ds-dag b { font-weight: 500; }
.ds-dag i { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 0.4em; background: var(--c-bg-licht); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 10%, transparent); transition: background-color 0.3s ease; }
.ds-dag.is-vol i { background: var(--c-bg-tegel); }
.ds-dag.is-doel.is-vol i { background: var(--c-lavender); }
.ds-dag.is-doel b { color: var(--c-white); }
.ds-week__chip { align-self: flex-start; }
.ds-sleep--post { width: 6.5em; height: 4.2em; align-items: flex-end; background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.8em; white-space: normal; }

/* Alles: je bedrijf in het midden, de diensten eromheen. */
.ds-kern { position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4em; padding: 1.2em 1.7em; translate: -50% -50%; border-radius: 1em; background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 1.15em; }
.ds-kern .ds-ic { width: 1.8em; height: 1.8em; }
.ds-baan { position: absolute; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.05em; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--c-bg-licht); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 12%, transparent); font-family: var(--f-display); font-weight: 500; font-size: 0.95em; white-space: nowrap; }
.ds-baan .ds-ic { color: var(--c-lavender); }
.ds-baan--0 { top: 22%; left: 22%; }
.ds-baan--1 { top: 20%; left: 76%; }
.ds-baan--2 { top: 60%; left: 84%; }
.ds-baan--3 { top: 84%; left: 54%; }
.ds-baan--4 { top: 70%; left: 17%; }

/* Smalle tegel (telefoon): onder elkaar. */
@container scene (max-aspect-ratio: 1 / 1) {
	.ds { font-size: clamp(9px, min(3.3cqw, 2.55cqh), 15px); }
	.ds--webshop .ds__inhoud { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: 3.2em; padding: 2.4em 2em; }
	.ds--webshop .ds-uit { flex-direction: row; padding: 0; }
	.ds--webshop .ds-uit__rij { flex: 1 1 0; flex-direction: column; gap: 0.4em; padding: 0.8em 0.5em; text-align: center; }
	.ds--webshop .ds-uit__rij > span { font-size: 0.75em; }
	.ds--webshop .ds-uit__rij > span > :not(b),
	.ds--webshop .ds-uit__rij .ds-vink { display: none; }
	.ds--webshop .ds-kassa { width: 72%; }
	.ds--website .ds__inhoud { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 1em; padding: 2.2em 1.8em; }
	.ds--website .ds-bib { flex-flow: row wrap; padding: 0.8em; }
	.ds--website .ds-bib__kop { display: none; }
	.ds--website .ds-bib__blok { flex: 1 1 40%; }
	.ds--vernieuwen .ds__inhoud,
	.ds--vernieuwen-shop .ds__inhoud { padding: 2.2em 1.8em; }
	.ds--vernieuwen-shop .ds-oud__vakken,
	.ds--vernieuwen-shop .ds-nw__producten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds--hosting .ds__inhoud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 2.2em 1.8em; }
	.ds--hosting .ds-onderhoud { grid-column: 1 / -1; grid-row: 1; }
	.ds--hosting .ds-snel { grid-row: 2; }
	.ds--hosting .ds-groen { grid-row: 2; flex-direction: column; align-items: flex-start; }
	.ds-sys { width: 56%; }
	.ds-sys--0 { top: 21%; left: 5%; translate: none; }
	.ds-sys--1 { top: 46%; right: 5%; }
	.ds-sys--2 { left: 5%; right: auto; bottom: 6%; }
	.ds--ai .ds__inhoud { grid-template-columns: minmax(0, 1fr); align-content: center; padding: 2.2em 1.8em 3.6em; }
	.ds--ai .ds-mail:nth-child(n + 4) { display: none; }
	.ds--app .ds__inhoud { padding: 2.2em 1.6em; }
	.ds-app__inhoud { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.ds-app__planning { grid-row: auto; grid-column: auto; }
	.ds--logo .ds__inhoud,
	.ds--verpakking .ds__inhoud { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 2.2em 1.8em; }
	.ds--logo .ds-mockups,
	.ds--verpakking .ds-mockups { flex-direction: row; }
	.ds--logo .ds-mockup,
	.ds--verpakking .ds-mockup { flex: 1 1 0; flex-direction: column; gap: 0.4em; padding: 0.7em 0.4em; }
	.ds--logo .ds-mockup .ds-ic,
	.ds--verpakking .ds-mockup .ds-ic { margin: 0; }
	.ds--foto .ds__inhoud { padding: 2.2em 1.8em; }
	.ds-strook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds--animatie .ds__inhoud { padding: 2.2em 1.8em; }
	.ds-tijdlijn { grid-template-columns: auto minmax(0, 1fr); }
	.ds-tijdlijn__curve { display: none; }
	.ds--social .ds__inhoud { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 2em 1.8em; }
	.ds-telefoon { width: auto; height: 100%; }
	.ds-baan--0 { top: 18%; left: 30%; }
	.ds-baan--1 { top: 30%; left: 70%; }
	.ds-baan--2 { top: 70%; left: 72%; }
	.ds-baan--3 { top: 86%; left: 38%; }
	.ds-baan--4 { top: 62%; left: 26%; }
}


/* Terug naar alle diensten in de header, naast de menupil (zoals bij een case; op verzoek 2026-10-14).
   In de tekst staat de pil dan alleen nog op telefoon en tablet. */
@media (min-width: 56.25em) {
	.dienst-pagina .site-header__terug.site-header__terug--dienst,
	.kb-detail .site-header__terug.site-header__terug--dienst { display: inline-flex; }
	.dienst-pagina .dh__terug,
	.dienst-pagina .dienstheld__terug { display: none; }
	/* Vraag en blog in de kennisbank (op verzoek 2026-10-14): de pil staat naast het menu, dus de knop bovenin het
	   roze vlak en de zwevende terugknop (die vloog in als die knop uit beeld was) alleen nog op telefoon en tablet. */
	.kb-detail .vraag__terug { display: none; }
}

/* ---------- Diensten, overzicht versie 5 (2026-10-14, op verzoek "simpeler maar
   toch premium, doe de hele pagina opnieuw"): bovenaan de kop groot over de
   hele breedte met intro en knoppen eronder en één grote foto (blok dienst,
   weergave groot), daaronder de diensten als index (blok diensten,
   casepagina.js index()). ---------- */
.dienstheld--groot { padding-top: var(--frame); }
.dg { display: grid; justify-items: start; gap: clamp(1rem, 2.5vh, 1.75rem); padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + clamp(3rem, 12vh, 8rem)) calc(var(--gutter) - var(--frame)) clamp(2.5rem, 7vh, 5rem); }
.dg__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.dg__titel { margin: 0; max-width: 100%; font-family: var(--f-display); font-weight: 600; font-size: clamp(3.25rem, 0.5rem + 10.4vw, 13rem); line-height: 0.88; letter-spacing: -0.035em; color: var(--c-lavender); text-wrap: balance; }
.dg__titel .title-line { white-space: normal; }
.dg__onder { display: grid; gap: 1.5rem; width: 100%; margin-top: clamp(0.5rem, 2vh, 1.5rem); }
.dg__intro { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 86%, transparent); text-wrap: pretty; }
.dg__intro > * + * { margin-top: 0.6em; }
.dienstheld--groot .dg__foto { height: clamp(22rem, 78svh, 60rem); }
@media (min-width: 56.25em) {
	/* De intro links, de knoppen rechts op dezelfde onderlijn. */
	.dg__onder { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}
@media (max-width: 56.24em) {
	.dienstheld--groot .dg__foto { height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
}

/* De index: per groep een kleine kop, de diensten als regels in grote letters. */
.dix { position: relative; padding-top: var(--frame); padding-bottom: clamp(4rem, 12vh, 8rem); }
.dix__intro { display: grid; justify-items: start; gap: 1rem; padding: clamp(4rem, 12vh, 8rem) calc(var(--gutter) - var(--frame)) 0; }
.dix__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: var(--c-mute); }
.dix__kop { margin: 0; max-width: 18ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.25rem, 1rem + 3.4vw, 4.75rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.dix__tekst { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 82%, transparent); }
.dix__groep { display: grid; gap: var(--frame); scroll-margin-top: var(--frame); }
/* De marge-truc (op verzoek "geldt overal"): een vaste rand bovenin, per kolom, zodat het groene vlak en de blokjes
   bij het wegscrollen 10px marge en hun eigen ronde hoeken houden. Ook boven de grote foto (.dg__rand). Telefoon:
   .site-rand doet het al voor de hele pagina. */
.dix__rand,
.dvl__rand,
.dg__rand,
.dw__rand { display: none; }
/* De rand staat in een eigen blok (flow-root, geen raster): zo telt hij netto niet mee in de hoogte en blijft hij
   vast staan tot het blok uit beeld is. */
.dg__beeld,
.dw,
.dix__groepen,
.dvl__blok { display: flow-root; }
.dg__beeld > .kb__rand,
.dw > .kb__rand,
.dix__groepen > .kb__rand,
.dvl__blok > .kb__rand { margin: calc(-1 * var(--frame)) 0 calc(-1 * var(--frame)); }
.dix__groep + .dix__groep { margin-top: var(--frame); }
@media (min-width: 56.25em) {
	.dg__rand,
	.dw__rand { display: block; }
	.dix__rand,
	.dvl__rand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--frame); background: none; }
	.dix__rand > i,
	.dvl__rand > i {
		display: block;
		background:
			linear-gradient(var(--c-bg), var(--c-bg)) top / 100% var(--frame) no-repeat,
			radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) left var(--frame) / var(--radius) var(--radius) no-repeat,
			radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) right var(--frame) / var(--radius) var(--radius) no-repeat;
	}
}
/* Links per groep een groen vlak (op verzoek "groene vlakken die onder elkaar met 10px staan"): de naam,
   de omschrijving en een verhaaltje in drie schetsjes dat Ben of Nick met de hand tekent. */
.dix__vlak { position: relative; border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.dix__vlak-in { position: relative; display: grid; justify-items: start; gap: 0.7rem; padding: clamp(1.5rem, 3vw, 2.25rem) calc(var(--gutter) - var(--frame)); }
.dix__groepnaam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; color: inherit; text-wrap: balance; }
.dix__groepoms { max-width: 22rem; margin: 0; font-size: var(--fs-body); line-height: 1.45; color: color-mix(in srgb, var(--c-ink) 78%, transparent); text-wrap: pretty; }
.dix__schets { width: min(100%, 15rem); height: auto; margin-top: clamp(0.75rem, 3vh, 2rem); overflow: visible; fill: none; stroke: var(--c-ink); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
/* Rechts elke dienst als eigen blokje (op verzoek "losse blokjes", 10px ertussen, geen lijnen). */
/* Is het groene vlak hoger dan de blokjes (Apps & portalen heeft er één), dan groeien de blokjes mee: overal 10px. */
.dix__lijst { display: grid; align-content: stretch; gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.dix__rij { position: relative; display: grid; }
.dix__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam pijl" "oms pijl"; align-items: center; align-content: center; gap: 0.35rem 1.25rem; padding: clamp(1.25rem, 2.4vw, 2.25rem); border-radius: var(--radius); background: var(--c-bg-licht); color: var(--c-white); text-decoration: none; transition: opacity 0.45s var(--ease-im), background-color 0.45s var(--ease-im); }
.dix__link:hover,
.dix__link:focus-visible,
.dix__rij.is-aan .dix__link { background: var(--c-bg-tegel); }
.dix__duim { display: none; }
/* De naam staat in een masker (komt er in beeld uit omhoog). */
.dix__naam { grid-area: naam; display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.dix__naam-in { display: block; margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 0.75rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.025em; color: inherit; transition: color 0.45s var(--ease-im), translate 0.6s var(--ease-im); }
.dix__oms { grid-area: oms; max-width: 32rem; font-size: var(--fs-body); line-height: 1.45; color: var(--c-mute); text-wrap: pretty; transition: color 0.45s var(--ease-im); }
.dix__pijl { grid-area: pijl; position: relative; display: grid; place-items: center; width: clamp(3rem, 2.4rem + 1.4vw, 4rem); height: clamp(3rem, 2.4rem + 1.4vw, 4rem); overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--c-white) 40%, transparent); border-radius: 50%; color: var(--c-white); --scribble: var(--c-white); transition: border-color 0.45s var(--ease-im); }
.dix__pijl svg { position: relative; width: 100%; height: 100%; overflow: visible; mix-blend-mode: difference; }
.dix__link:hover .dix__naam-in,
.dix__link:focus-visible .dix__naam-in,
.dix__rij.is-aan .dix__naam-in { color: var(--c-lavender); }
.dix__link:hover .dix__oms,
.dix__link:focus-visible .dix__oms,
.dix__rij.is-aan .dix__oms { color: color-mix(in srgb, var(--c-white) 86%, transparent); }
.dix__link:hover .dix__pijl,
.dix__link:focus-visible .dix__pijl { border-color: var(--c-white); }
.dix__link:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
/* De foto die met de muis meezweeft (alleen desktop met een muis; casepagina.js zet de plek). */
.dix__zweef { display: none; }
@media (min-width: 56.25em) {
	.dix__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 3rem; }
	.dix__intro .dix__kicker { grid-column: 1 / -1; }
	/* Het vlak is zo hoog als zijn regels (minstens zo hoog als zijn inhoud); de inhoud blijft staan terwijl je
	   langs de regels scrolt. Tussen twee groepen 10px, dus de vlakken staan onder elkaar. */
	.dix__groep { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--frame); align-items: stretch; }
	.dix__vlak-in { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 0.5rem); }
	.dix__schets { width: min(100%, 22rem); margin-top: clamp(1.25rem, 5vh, 3rem); stroke-width: 0.6; }
	.dix__lijst { padding-left: 0; }
	/* De naam op één regel over de hele breedte, de omschrijving eronder. */
	.dix__link { gap: 0.5rem 2rem; }
	/* Aanwijzen: de regel schuift een stukje op, de andere gaan wat terug. */
	.dix.is-wijzen .dix__rij:not(.is-aan) .dix__link { opacity: 0.45; }
	.dix__rij.is-aan .dix__naam-in { translate: 0.35em 0; }
}
@media (min-width: 56.25em) and (hover: hover) and (pointer: fine) {
	/* De subregel alleen bij aanwijzen (op verzoek). Zonder verspringen: zijn ruimte is er al, in rust staat de naam
	   in het midden van het blokje en bij aanwijzen schuift hij omhoog terwijl de subregel eronder infaadt. */
	.dix__link { --oms-schuif: calc((var(--fs-body) * 1.45 + 0.5rem) / 2); }
	.dix__naam { translate: 0 var(--oms-schuif); transition: translate 0.6s var(--ease-im); }
	.dix__oms { opacity: 0; translate: 0 calc(var(--oms-schuif) * 0.6); transition: color 0.45s var(--ease-im), opacity 0.45s ease, translate 0.6s var(--ease-im); }
	.dix__link:hover .dix__naam,
	.dix__link:focus-visible .dix__naam,
	.dix__rij.is-aan .dix__naam { translate: 0 0; }
	.dix__link:hover .dix__oms,
	.dix__link:focus-visible .dix__oms,
	.dix__rij.is-aan .dix__oms { opacity: 1; translate: 0 0; }
	.dix__zweef { position: absolute; top: 0; left: 0; z-index: 3; display: block; width: clamp(15rem, 19vw, 22rem); aspect-ratio: 4 / 5; margin-top: calc(clamp(15rem, 19vw, 22rem) * -0.625); overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); pointer-events: none; visibility: hidden; will-change: transform; }
	.dix__zweef-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08; transition: opacity 0.45s ease, scale 0.9s var(--ease-im); }
	.dix__zweef-img.is-aan { opacity: 1; scale: 1; }
}
@media (max-width: 56.24em) {
	/* Telefoon en tablet: een fotootje voor elke regel. */
	.dix__link { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "duim naam pijl" "duim oms pijl"; gap: 0.3rem 1rem; }
	.dix__duim { grid-area: duim; display: block; width: clamp(4rem, 18vw, 5.5rem); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-licht); }
	.dix__duim img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.dix__naam-in { font-size: clamp(1.5rem, 1rem + 2.6vw, 2.5rem); }
	.dix__oms { font-size: 0.9375rem; }
	.dix__pijl { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.dix__naam-in,
	.dix__naam,
	.dix__oms,
	.dix__link { transition: none; }
}

/* ---------- De wissel bovenaan het overzicht (blok dienst, weergave groot met sfeerbeelden;
   casepagina.js wissel()). Op verzoek 2026-10-14: "hetzelfde effect als op de homepagina, maar
   horizontaal, automatisch met sfeerbeelden"; het schrijven van een woord is daarna op verzoek weer
   weg en het wisselen sneller. Twee tegels naast elkaar met 10px ertussen; alles hangt aan --f (het deel van de breedte
   voor de linker tegel): het uitknippen, de parallax in het beeld en het zachte inzoomen van de kleine
   foto. Zonder JS en bij minder beweging staat de beginstand er. ---------- */
.dw > .kb__rand { z-index: 4; }
.dw__vak { --f: 0.75; position: relative; height: clamp(22rem, 78svh, 60rem); }
.dw__tegel { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--c-bg-licht); }
.dw__tegel--a { clip-path: inset(0 calc((100% - var(--frame)) * (1 - var(--f)) + var(--frame)) 0 0 round var(--radius)); }
.dw__tegel--b { clip-path: inset(0 0 0 calc((100% - var(--frame)) * var(--f) + var(--frame)) round var(--radius)); }
.dw__laag { position: absolute; inset: 0; will-change: transform; }
/* Het beeld schuift met de naad mee (net niet helemaal, zoals een venster) en zoomt een tikje in als hij klein is. */
.dw__tegel--a .dw__laag { translate: calc(((100% - var(--frame)) * var(--f) - 100%) * 0.35) 0; scale: calc(1 + (0.75 - var(--f)) * 0.12); }
.dw__tegel--b .dw__laag { translate: calc(((100% - var(--frame)) * var(--f) + var(--frame)) * 0.35) 0; scale: calc(1 + (var(--f) - 0.25) * 0.12); }
.dw__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity 0.9s ease; }
.dw__img.is-aan { opacity: 1; }
.dw__waas { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-scrim) 65%, transparent) 100%); pointer-events: none; }
/* De selectie om de foto die groter trekt (zoals op het cases-bord en de home). */
.dw__sel { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: calc((100% - var(--frame)) * var(--f)); width: round(nearest, calc((100% - var(--frame)) * var(--f)), 1px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.dw__vak.groeit-b .dw__sel { left: calc((100% - var(--frame)) * var(--f) + var(--frame)); left: round(nearest, calc((100% - var(--frame)) * var(--f) + var(--frame)), 1px); right: 0; width: auto; }
/* De lijn als rechthoek binnen de tegel (recht, zoals in Figma), de hoekjes erboven met hun midden op de lijn. */
.dw__sel::before { content: ""; position: absolute; inset: var(--sel-lo); border: var(--sel-lijn) solid var(--c-lavender); }
.dw__sel.is-aan { opacity: 1; }
.dw__sel > i { position: absolute; z-index: 1; width: var(--sel-greep); height: var(--sel-greep); border: var(--sel-rand) solid var(--c-lavender); border-radius: 2px; background: var(--c-white); }
.dw__sel > i:nth-child(1) { top: var(--sel-go); left: var(--sel-go); }
.dw__sel > i:nth-child(2) { top: var(--sel-go); right: var(--sel-go); }
.dw__sel > i:nth-child(3) { bottom: var(--sel-go); left: var(--sel-go); }
.dw__sel > i:nth-child(4) { bottom: var(--sel-go); right: var(--sel-go); }
.dw__maat { position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; padding: 3px 7px; border-radius: 4px; background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.75rem; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* De naad: een greepje in het accent met Nick erop; zolang hij trekt drukt hij een tikje in. */
.dw__greep { position: absolute; top: 58%; left: calc((100% - var(--frame)) * var(--f) + var(--frame) / 2); z-index: 3; width: 0; height: 0; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.dw__greep.is-aan { opacity: 1; }
.dw__greep-lijn { position: absolute; top: -1.125rem; left: -2px; width: 4px; height: 2.25rem; border-radius: 4px; background: var(--c-lavender); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lavender) 22%, transparent); }
.dw__greep.is-vast .hero__cursor { transform: scale(0.88); }
@media (max-width: 56.24em) {
	.dw__vak { height: clamp(22rem, 70svh, 34rem); }
}
@media (prefers-reduced-motion: reduce) {
	.dw__img,
	.dw__sel,
	.dw__greep { transition: none; }
}

/* ---------- De dienstpagina in vlakken (2026-10-14, op verzoek "de detailpagina ook compleet
   opnieuw", in de lijn van het overzicht): dienst_venster en werkwijze met de weergave vlakken. Links
   een groen vlak dat vast in beeld blijft, rechts donkere tegels met 10px ertussen; Ben en Nick tekenen
   om de beurt het schetsje in een tegel (casepagina.js feiten()). Een vaste rand bovenin per kolom
   (de marge-truc). ---------- */
/* 10px onder elke vlakkenrij (niet erboven): zo staat het cases-blok erna op 10px, en telt zijn eigen marge onder
   niet op bij die van de vlakken eronder (eerst 0 boven en 20 onder). */
.dvl { padding-bottom: var(--frame); }
.dvl__rij { display: grid; gap: var(--frame); }
.dvl__vlak { position: relative; border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.dvl__vlak-in { position: relative; display: grid; justify-items: start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.25rem) calc(var(--gutter) - var(--frame)); }
.dvl__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.dvl__kop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; color: inherit; text-wrap: balance; }
.dvl__intro { max-width: 26rem; font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--c-ink) 82%, transparent); text-wrap: pretty; }
.dvl__intro > * + * { margin-top: 0.6em; }
.dvl__knoppen { margin-top: 0.25rem; }
/* De eigenschappen als rijen label en waarde, met een haarlijn in de inkt. */
.dvl__eig { display: grid; width: 100%; margin: 0.25rem 0 0; }
.dvl__eig-rij { display: grid; gap: 0.25rem; padding: 0.8rem 0; border-top: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent); }
.dvl__eig-rij dt { font-size: 0.875rem; color: color-mix(in srgb, var(--c-ink) 65%, transparent); }
.dvl__eig-rij dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.dvl__waarde { display: inline-flex; align-items: center; gap: 0.45rem; }
.dvl__waarde svg { width: auto; height: 1.05em; fill: currentColor; }
.dvl__waarde--logo svg { height: 0.8rem; }
.dvl__groen { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.dvl__groen svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dvl__groen:hover { text-decoration-thickness: 2px; }
/* De i met een uitleg (op verzoek: bij beheer de handleidingen in Mijn omgeving). Het wolkje hangt onder de rij (de
   rij is het kader, dus het past altijd); met een muis bij aanwijzen, anders na tikken of Enter (is-open). */
.dvl__eig-rij { position: relative; }
/* Dicht tegen de waarde (de rij heeft 1rem tussen losse waarden; het rondje zelf heeft al wat lucht om de i). */
.dvl__info { display: inline-flex; margin-left: -0.75rem; }
.dvl__i { position: relative; z-index: 7; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.dvl__i svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dvl__i:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.dvl__info.is-open .dvl__i { background: var(--c-ink); color: var(--c-lavender); }
.dvl__bel { position: absolute; top: calc(100% - 0.35rem); left: 0; right: 0; z-index: 6; padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--c-ink); color: var(--c-white); font-family: var(--f-body); font-weight: 400; font-size: 0.9375rem; line-height: 1.5; opacity: 0; visibility: hidden; translate: 0 -0.35rem; transition: opacity 0.3s ease, translate 0.45s var(--ease-im), visibility 0s linear 0.3s; }
/* Een onzichtbare brug naar het wolkje, zodat het blijft staan als je er met de muis naartoe gaat. */
.dvl__bel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.5rem; }
.dvl__bel-link { color: var(--c-lavender); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; white-space: nowrap; }
.dvl__bel-link:hover { text-decoration-thickness: 2px; }
.dvl__info.is-open .dvl__bel { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s ease, translate 0.45s var(--ease-im), visibility 0s; }
@media (hover: hover) and (pointer: fine) {
	.dvl__i:hover { background: var(--c-ink); color: var(--c-lavender); }
	.dvl__info:hover .dvl__bel { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s ease, translate 0.45s var(--ease-im), visibility 0s; }
}
/* De tegels. */
.dvl__tegels { display: grid; align-content: stretch; gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.dvl__tegel { position: relative; display: grid; align-content: start; gap: 0.75rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--radius); background: var(--c-bg-licht); color: var(--c-white); }
.dvl__schets { width: 3.25rem; height: 3.25rem; margin-bottom: 0.5rem; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.dvl__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
.dvl__getal { margin-top: 0.25rem; }
.dvl__tekst { max-width: 34rem; font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--c-white) 78%, transparent); text-wrap: pretty; }
.dvl__tekst > * + * { margin-top: 0.6em; }
/* De stappen: nummer, kop en tekst, het schetsje rechts. */
.dvl__stap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nummer schets" "titel schets" "tekst schets"; column-gap: 1.5rem; }
.dvl__nummer { grid-area: nummer; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-body); color: var(--c-lavender); font-variant-numeric: tabular-nums; }
.dvl__stap .dvl__titel { grid-area: titel; font-size: clamp(1.625rem, 1rem + 1.6vw, 2.75rem); }
.dvl__stap .dvl__tekst { grid-area: tekst; }
.dvl__stap .dvl__schets { grid-area: schets; align-self: center; width: clamp(3.25rem, 2.5rem + 2vw, 4.75rem); height: clamp(3.25rem, 2.5rem + 2vw, 4.75rem); margin: 0; }
@media (min-width: 56.25em) {
	.dvl__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); align-items: stretch; }
	.dvl__vlak-in { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 0.5rem); }
	.dvl__tegels--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30em) {
	.dvl__stap { grid-template-areas: "nummer schets" "titel titel" "tekst tekst"; }
	.dvl__stap .dvl__schets { align-self: start; }
}

/* ---------- Vacatures (2026-10-14, op verzoek "vacatures overzicht en detailpagina, met een super gave
   transitie zoals bij cases, maak er echt iets bijzonders van"; blok vacatures, single-vacature.php,
   assets/js/vacatures.js). ---------- */
/* Het overzicht: links het groene vlak (vast in beeld), rechts de tegels, samen een scherm hoog. */
.vk { padding: var(--frame) var(--frame) 0; color: var(--c-white); }
.vk__blok { display: flow-root; }
.vk__rand { display: none; }
.vk__blok > .kb__rand { margin: calc(-1 * var(--frame)) 0 calc(-1 * var(--frame)); }
.vk__rij { display: grid; gap: var(--frame); }
.vk__vlak { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.25rem; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 2rem) calc(var(--gutter) - var(--frame)) clamp(2rem, 4.5vw, 3.5rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.vk__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.vk__kop { font-size: clamp(2.75rem, 0.9rem + 3.8vw, 6rem); }
.vk__tekst > * + * { margin-top: 0.6em; }
/* Ben, Nick en jij aan tafel: onze cursors (spoken; op desktop vliegen de zwevende cursors erin) en een lege plek. */
.vk__tafel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 2rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.vk__plek { display: grid; justify-items: start; gap: 0.35rem; transition: opacity 0.5s ease; }
.vk__cursor { position: relative; display: block; width: 3rem; height: 3.1rem; }
.vk__spook.cp-pen { top: 0; left: 0; }
.vk__spook .fases__cursor-fotos { box-shadow: none; }
.vk__naam { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
/* De lege plek: een gestippelde cursor met een vraagteken waar de foto hoort. */
.vk__cursor--jij { color: var(--c-ink); }
.vk__jij-pijl { position: absolute; top: 0; left: 0; display: block; width: 1.25rem; height: 1.25rem; overflow: visible; }
.vk__jij-foto { position: absolute; top: 0.95rem; left: 0.8rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px dashed var(--c-ink); border-radius: 50%; font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; line-height: 1; }
.vk.is-kies .vk__plek--jij { opacity: 0.35; }
.vk__aantal { margin: 0; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
/* De tegels: foto, waas, soort, titel, gegevens en een pijlrondje; met een muis groeit de tegel onder de muis. */
.vk__tegels { display: flex; flex-direction: column; gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.vk__item { display: flex; flex: 1 1 0; min-height: clamp(21rem, 66svh, 32rem); transition: flex-grow 0.75s var(--ease-im); }
.vk__tegel { position: relative; display: block; flex: 1 1 auto; overflow: hidden; isolation: isolate; border-radius: var(--radius); background: var(--c-bg-licht); color: var(--c-white); text-decoration: none; }
.vk__tegel:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: -2px; }
.vk__foto { position: absolute; inset: 0; }
.vk__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.vk__waas { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--c-scrim) 78%, transparent) 100%); pointer-events: none; }
/* De andere tegels gaan wat terug (een laag erover: een filter op de foto kost elk frame veel). */
.vk__tegel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-bg) 55%, transparent); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.vk__inhoud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; justify-items: start; gap: 0.7rem; padding: clamp(1.25rem, 2.4vw, 2.25rem); padding-right: calc(clamp(1.25rem, 2.4vw, 2.25rem) + 4.75rem); }
.vk__soort { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.85rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 500; font-size: 0.8125rem; }
.vk__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.875rem, 1rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; color: inherit; text-wrap: balance; }
.vk__klap { display: grid; grid-template-rows: 1fr; }
.vk__klap > * { min-height: 0; overflow: hidden; }
.vk__kort { display: block; max-width: 36rem; font-size: var(--fs-body); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 84%, transparent); text-wrap: pretty; }
.vk__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.15rem; }
.vk__meta span { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.8rem; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 45%, transparent); font-size: 0.8125rem; }
.vk__pijl.dix__pijl { position: absolute; right: clamp(1.25rem, 2.4vw, 2.25rem); bottom: clamp(1.25rem, 2.4vw, 2.25rem); z-index: 2; }
.vk__tegel:focus-visible .vk__pijl { border-color: var(--c-white); }
/* De Figma-selectie (zelfde maten als op de home en de wissel), met de maat rechtsboven. */
.vk__sel { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.vk__sel::before { content: ""; position: absolute; inset: var(--sel-lo); border: var(--sel-lijn) solid var(--c-lavender); }
.vk__sel > i { position: absolute; z-index: 1; width: var(--sel-greep); height: var(--sel-greep); border: var(--sel-rand) solid var(--c-lavender); border-radius: 2px; background: var(--c-white); }
.vk__sel > i:nth-child(1) { top: var(--sel-go); left: var(--sel-go); }
.vk__sel > i:nth-child(2) { top: var(--sel-go); right: var(--sel-go); }
.vk__sel > i:nth-child(3) { bottom: var(--sel-go); left: var(--sel-go); }
.vk__sel > i:nth-child(4) { bottom: var(--sel-go); right: var(--sel-go); }
/* De maat boven het pijlrondje (rechtsboven lag hij onder de pillen van de header). */
.vk__maat { position: absolute; right: clamp(1.25rem, 2.4vw, 2.25rem); bottom: calc(clamp(1.25rem, 2.4vw, 2.25rem) + clamp(3rem, 2.4rem + 1.4vw, 4rem) + 0.6rem); padding: 3px 7px; border-radius: 4px; background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.75rem; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vk__maat:empty { display: none; }
/* Jouw naamlabel bij de muis (vacatures.js zet het in de body): de rol, zoals een naam bij een cursor in Figma. */
.vk__jouw { position: fixed; top: 0; left: 0; z-index: 38; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: var(--radius-pill); background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.875rem; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; margin: 1.15rem 0 0 0.9rem; scale: 0.6; transform-origin: 0 0; transition: opacity 0.25s ease, scale 0.45s var(--ease-out); }
.vk__jouw.is-aan { opacity: 1; scale: 1; }
.vk__jouw-foto { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1.5px dashed var(--c-ink); border-radius: 50%; font-size: 0.75rem; }
.vk.is-overgang { pointer-events: none; }
@media (min-width: 56.25em) {
	.vk__rand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); column-gap: var(--frame); background: none; }
	.vk__rand > i {
		display: block;
		background:
			linear-gradient(var(--c-bg), var(--c-bg)) top / 100% var(--frame) no-repeat,
			radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) left var(--frame) / var(--radius) var(--radius) no-repeat,
			radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) right var(--frame) / var(--radius) var(--radius) no-repeat;
	}
	.vk__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); align-items: start; }
	.vk__vlak { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame)); height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
	.vk__tegels { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
	.vk__item { min-height: 10rem; }
	/* Met een muis: de tegel onder de muis groeit, de andere gaan wat terug, de korte tekst klapt open. */
	.vk.is-kies .vk__item.is-aan { flex-grow: 2.2; }
	.vk.is-kies .vk__item:not(.is-aan) .vk__tegel::after { opacity: 1; }
	.vk__item.is-aan .vk__foto img { transform: scale(1.04); }
	.vk__klap { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.75s var(--ease-im), opacity 0.4s ease; }
	.vk__item.is-aan .vk__klap { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.75s var(--ease-im), opacity 0.5s ease 0.2s; }
	.vk__item.is-aan .vk__sel { opacity: 1; }
	/* De overgang: de zoom loopt terug voordat de laag de foto overneemt. */
	.vk.is-overgang .vk__foto img { transform: none; transition: transform 0.5s var(--ease-out); }
}
/* Alleen met een muis: de selectie en het naamlabel. */
@media (hover: none), (pointer: coarse) {
	.vk__sel,
	.vk__jouw { display: none; }
}
@media (max-width: 56.24em) {
	.vk__vlak { min-height: 70svh; }
}
@media (prefers-reduced-motion: reduce) {
	.vk__item,
	.vk__foto img,
	.vk__klap { transition: none; }
}

/* De vacature: bovenaan het groene vlak en de foto zoals een case (hier landt de overgang). */
.casepagina--blok.vac { padding-top: var(--frame); padding-bottom: var(--frame); }
.vac__kop { font-size: clamp(2.5rem, 0.8rem + 3.4vw, 5.5rem); }
.vac__intro > * + * { margin-top: 0.6em; }
.vac__knoppen { margin-top: 0.25rem; }
/* Taken en profiel: het vlak om en om links en rechts. */
@media (min-width: 56.25em) {
	.dvl--spiegel .dvl__rij,
	.dvl--spiegel .dvl__rand { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
	.dvl--spiegel .dvl__vlak { order: 2; }
}
/* Solliciteren: het formulier in een tegel naast het groene vlak. */
.vac__form-tegel { grid-template-columns: minmax(0, 1fr); }
.vac-form { gap: 0; }
.vac-form .gform_heading,
.vac-form .gform_validation_container,
.vac-form .gform_ajax_spinner,
.vac-form .gfield--type-hidden,
.vac-form .gform_hidden,
.vac-form .gfield_visibility_hidden { display: none !important; }
.vac-form .gform_fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.vac-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.vac-form .gfield { position: relative; display: grid; gap: 0.45rem; min-width: 0; }
.vac-form .gfield_label { display: block; padding-left: 1.35rem; font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; color: color-mix(in srgb, var(--c-white) 78%, transparent); }
.vac-form .gfield_required { margin-left: 0.25rem; color: var(--c-lavender); }
.vac-form .gfield_required_text { font-size: 0; }
.vac-form .gfield_required_text::after { content: "*"; font-size: 0.9375rem; }
.vac-form .gfield_description { padding-left: 1.35rem; font-size: var(--fs-small); color: var(--c-mute); }
.vac-form .gfield input[type="text"],
.vac-form .gfield input[type="email"],
.vac-form .gfield input[type="tel"],
.vac-form .gfield input[type="url"],
.vac-form .gfield textarea {
	display: block;
	width: 100%;
	height: 3.5rem;
	margin: 0;
	padding: 0 1.35rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	box-shadow: inset 0 0 0 1px transparent;
	color: var(--c-white);
	caret-color: var(--c-lavender);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.vac-form .gfield textarea { height: 10rem; padding: 1rem 1.35rem; border-radius: 1.375rem; line-height: 1.5; resize: vertical; }
.vac-form .gfield input::placeholder,
.vac-form .gfield textarea::placeholder { color: color-mix(in srgb, var(--c-white) 40%, transparent); }
@media (hover: hover) {
	.vac-form .gfield input:hover,
	.vac-form .gfield textarea:hover { background: color-mix(in srgb, var(--c-bg) 55%, var(--c-bg-licht)); }
}
.vac-form .gfield input:focus,
.vac-form .gfield textarea:focus { outline: none; background: var(--c-bg-licht); box-shadow: inset 0 0 0 1px var(--c-lavender), 0 0 0 4px color-mix(in srgb, var(--c-lavender) 14%, transparent); }
.vac-form .gfield input:-webkit-autofill { -webkit-text-fill-color: var(--c-white); transition: background-color 600000s 0s, box-shadow 0.35s ease; }
/* Het cv: het bestandsveld als een vak met een omlijnde pil. */
.vac-form .ginput_container_fileupload { display: grid; gap: 0.45rem; }
.vac-form input[type="file"] { width: 100%; padding: 0.6rem; border: 1px dashed color-mix(in srgb, var(--c-white) 30%, transparent); border-radius: 1.375rem; background: var(--c-bg); color: var(--c-mute); font: inherit; font-size: 0.9375rem; cursor: pointer; transition: border-color 0.35s ease; }
.vac-form input[type="file"]:hover,
.vac-form input[type="file"]:focus-visible { border-color: var(--c-lavender); outline: none; }
.vac-form input[type="file"]::file-selector-button { height: 2.5rem; margin-right: 0.9rem; padding: 0 1.1rem; border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 1px var(--c-white); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; cursor: pointer; }
.vac-form .gform_fileupload_rules { padding-left: 1.35rem; font-size: var(--fs-small); color: var(--c-mute); }
/* Fouten: rand en melding zoals in let's work. */
.vac-form .gfield.gfield_error input,
.vac-form .gfield.gfield_error textarea { box-shadow: inset 0 0 0 1px var(--c-error); }
.vac-form .gfield.gfield_error input:focus,
.vac-form .gfield.gfield_error textarea:focus { box-shadow: inset 0 0 0 1px var(--c-error), 0 0 0 4px color-mix(in srgb, var(--c-error) 16%, transparent); }
.vac-form .gfield.gfield_error input[type="file"] { border-color: var(--c-error); box-shadow: none; }
.vac-form .validation_message--hidden-on-empty:empty { display: none; }
.vac-form .validation_message { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.1rem 0 0 1.35rem; font-size: var(--fs-small); line-height: 1.35; color: var(--c-error); }
.vac-form .validation_message::before { content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: 0.05rem; border-radius: 50%; background: var(--c-error); color: var(--c-panel); font-family: var(--f-display); font-weight: 700; font-size: 0.6875rem; line-height: 1; }
.vac-form .gform_validation_errors { margin: 0 0 1.25rem; padding: 0.9rem 1.2rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c-error) 14%, transparent); color: var(--c-white); font-size: var(--fs-body); }
.vac-form .gform_validation_errors h2 { margin: 0; font: inherit; }
.vac-form .gform_validation_errors ol { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: var(--fs-small); }
.vac-form .gform_validation_errors a { color: inherit; }
.vac-form .gform_footer { margin-top: 1.5rem; }
.vac-form .gform_confirmation_message { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.2; color: var(--c-white); text-wrap: balance; }
.vac-form .gform_confirmation_message p + p { margin-top: 0.6em; }
/* Breed genoeg: naam en e-mail, telefoon en link naast elkaar (de halve velden van het formulier). */
.vac-form { container-type: inline-size; }
@container (min-width: 34rem) {
	.vac-form .gform_fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vac-form .gfield { grid-column: 1 / -1; }
	.vac-form .gfield--width-half { grid-column: auto; }
}
/* Meer plekken aan tafel: de andere vacatures als tegels met een foto. */
.vac-meer { gap: var(--frame); padding-bottom: var(--frame); }
.vac-meer__kop { margin: 0; padding: clamp(3rem, 8vh, 5rem) calc(var(--gutter) - var(--frame)) 1rem; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em; color: var(--c-lavender); text-wrap: balance; }
.vac-meer__lijst { display: grid; gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.vac-meer__tegel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; min-height: 7.5rem; padding: var(--frame) clamp(1rem, 2vw, 1.75rem) var(--frame) var(--frame); border-radius: var(--radius); background: var(--c-bg-licht); color: var(--c-white); text-decoration: none; transition: background-color 0.4s ease; }
.vac-meer__foto { display: block; width: clamp(6rem, 12vw, 9.5rem); aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--radius) * 0.8); }
.vac-meer__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.vac-meer__tekst { display: grid; justify-items: start; gap: 0.4rem; min-width: 0; }
.vac-meer__soort { font-size: var(--fs-small); color: var(--c-mute); }
.vac-meer__titel { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.vac-meer__pijl.dix__pijl { grid-area: auto; width: 3rem; height: 3rem; }
.vac-meer__tegel:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
	.vac-meer__tegel:hover { background: var(--c-bg-tegel); }
	.vac-meer__tegel:hover .vac-meer__foto img { transform: scale(1.06); }
}
@media (min-width: 56.25em) {
	.vac-meer__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Vacature versie 2 (2026-10-14, op verzoek "de detailpagina kan iets vetter, nu teveel van
   hetzelfde"): wat je gaat doen op het bord van de werkwijze, wat je meeneemt als afvinklijst, wat je bij ons
   vindt als collage, en Ben, Nick en jij naast het formulier. template-parts/vacature/, vacatures.js. ---------- */
/* Wat je meeneemt: een afvinklijst op een stippenbord; Ben en Nick zetten de vinkjes (casepagina.js feiten()). */
.vac-lijst { padding-bottom: var(--frame); }
.vac-lijst__bord { display: grid; gap: clamp(2rem, 5vw, 4rem); padding: clamp(2.5rem, 7vw, 6rem) calc(var(--gutter) - var(--frame)); border-radius: var(--radius); background-color: var(--c-bord); background-image: radial-gradient(color-mix(in srgb, var(--c-white) 11%, transparent) 1px, transparent 1.6px); background-size: 24px 24px; }
.vac-lijst__kop { display: grid; align-content: start; gap: 1.1rem; max-width: 40rem; }
.vac-lijst__titel,
.vac-vindt__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 1rem + 4.2vw, 6.25rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.vac-lijst__intro,
.vac-vindt__intro { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 80%, transparent); }
.vac-lijst__items { display: grid; margin: 0; padding: 0; list-style: none; }
.vac-lijst__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(1rem, 2.4vw, 1.75rem); padding: clamp(1.25rem, 2.6vw, 2rem) 0; border-top: 1px dashed var(--c-line); }
/* Vaste maat, zodat het vinkje overal precies een dunne penlijn van 1,5px is (zoals de andere borden). */
.vac-lijst__vak { position: relative; display: block; width: 3rem; aspect-ratio: 1; border: 1.5px solid color-mix(in srgb, var(--c-white) 50%, transparent); border-radius: 0.6rem; }
/* Het vinkje steekt een stukje buiten het vakje, zoals met een pen. */
.vac-lijst__vink { position: absolute; top: -28%; left: -12%; width: 140%; height: 140%; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 0.56; stroke-linecap: round; stroke-linejoin: round; }
.vac-lijst__tekst { display: grid; gap: 0.45rem; padding-top: 0.15em; }
.vac-lijst__naam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.375rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--c-white); text-wrap: balance; }
.vac-lijst__uitleg { max-width: 34rem; font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--c-white) 72%, transparent); text-wrap: pretty; }
.vac-lijst__uitleg > * + * { margin-top: 0.6em; }
@media (min-width: 56.25em) {
	.vac-lijst__bord { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); align-items: start; }
	.vac-lijst__items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}
/* Wat je bij ons vindt: sfeerbeelden tussen de blokjes en de koppen koffie. */
.vac-vindt { padding-bottom: var(--frame); }
.vac-vindt__kop { display: grid; justify-items: start; gap: 1.1rem; padding: clamp(3.5rem, 10vh, 7rem) calc(var(--gutter) - var(--frame)) clamp(1.75rem, 4vh, 2.75rem); }
.vac-vindt__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--frame); margin: 0; padding: 0; list-style: none; }
.vac-vindt__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--c-bg-licht); }
/* Iets hoger dan het vak: het beeld schuift zacht mee met het scrollen (vacatures.js). */
.vac-vindt__img { position: absolute; top: -8%; left: 0; display: block; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.vac-vindt__tegel { position: relative; display: grid; align-content: end; gap: 0.6rem; min-height: 15rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--radius); color: var(--c-white); }
.vac-vindt__tegel--licht { background: var(--c-bg-licht); }
.vac-vindt__tegel--tegel { background: var(--c-bg-tegel); }
.vac-vindt__tegel--koffie { background: var(--c-lavender); color: var(--c-ink); }
.vac-vindt__schets { position: absolute; top: clamp(1.5rem, 2.4vw, 2.25rem); left: clamp(1.5rem, 2.4vw, 2.25rem); width: 3.25rem; height: 3.25rem; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.vac-vindt__kopje { position: absolute; top: clamp(1rem, 2vw, 1.75rem); right: clamp(1rem, 2vw, 1.75rem); width: clamp(5rem, 3rem + 4vw, 7.5rem); height: auto; aspect-ratio: 1; overflow: visible; fill: none; stroke: var(--c-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vac-vindt__naam { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
.vac-vindt__tekst { font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--c-white) 76%, transparent); text-wrap: pretty; }
.vac-vindt__tekst > * + * { margin-top: 0.6em; }
.vac-vindt__getal { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 1.5rem + 3.6vw, 5.5rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vac-vindt__getal span { display: inline-block; }
.vac-vindt__label { margin: 0; font-size: var(--fs-body); line-height: 1.4; color: color-mix(in srgb, var(--c-ink) 78%, transparent); }
@media (min-width: 40em) {
	.vac-vindt__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vac-vindt__foto--1,
	.vac-vindt__foto--3 { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (min-width: 56.25em) {
	.vac-vindt__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(15rem, 31vh, 21rem), auto); grid-auto-flow: dense; }
	.vac-vindt__foto { aspect-ratio: auto; }
	.vac-vindt__foto--1 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
	.vac-vindt__foto--3 { grid-column: span 2; aspect-ratio: auto; }
}
/* Solliciteren: Ben, Nick en jij onderin het groene vlak; "jij?" wordt je voornaam terwijl je typt. */
.vac__tafel { padding-top: clamp(0.5rem, 3vh, 2rem); }
.vac__tafel .vk__tafel { margin: 0; }
.vk__jij-foto { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.vk__naam--jij { display: inline-block; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk__plek--jij.is-jij .vk__jij-foto { border-style: solid; background: var(--c-ink); color: var(--c-lavender); }
.vk__plek--jij.is-jij .vk__jij-pijl path { stroke-dasharray: none; fill: currentColor; }

/* ---------- Website abonnement (2026-10-14, landingspagina /website-abonnement/; blokken bon en vergelijk,
   assets/js/abonnement.js, inc/abonnement.php) ---------- */
/* De marge-truc per kolom, zoals de vlakken. */
.bon__rand,
.vgl__rand { display: none; }
.bon__blok,
.vgl__blok { display: flow-root; }
.bon__blok > .kb__rand,
.vgl__blok > .kb__rand { margin: calc(-1 * var(--frame)) 0 calc(-1 * var(--frame)); }
/* Bovenaan: het groene vlak met de kop en rechts de bon op een stippenbord. */
.bon { padding-top: var(--frame); padding-bottom: var(--frame); }
.bon__rij { display: grid; gap: var(--frame); }
.bon__vlak { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.25rem; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 2rem) calc(var(--gutter) - var(--frame)) clamp(2rem, 4.5vw, 3.5rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.bon__kicker,
.vgl__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); }
.bon__kicker { color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.bon__kop { font-size: clamp(2.5rem, 0.8rem + 3.4vw, 5.25rem); }
.bon__bij { white-space: nowrap; }
.bon__tekst > * + * { margin-top: 0.6em; }
.bon__knoppen { margin-top: 0.25rem; }
/* De printer staat onder de pillen van de header (op verzoek "ietsje naar beneden") en de bon in het midden van het bord. */
.bon__bord { position: relative; display: grid; justify-items: center; align-content: center; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 1rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vh, 3rem); overflow: hidden; border-radius: var(--radius); background-color: var(--c-bord); background-image: radial-gradient(color-mix(in srgb, var(--c-white) 11%, transparent) 1px, transparent 1.6px); background-size: 24px 24px; }
/* De printer: een donker blok met een gleuf, het papier rolt eronder vandaan. */
.bon__printer { position: relative; z-index: 2; width: min(100%, 30rem); height: 2rem; border-radius: 1rem; background: var(--c-panel); box-shadow: 0 12px 30px color-mix(in srgb, var(--c-scrim) 55%, transparent); }
.bon__gleuf { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0.6rem; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--c-white) 12%, transparent); }
.bon__uit { width: min(100% - 2rem, 27rem); margin-top: -0.75rem; clip-path: inset(0.75rem -3rem -3rem -3rem); }
/* Het papier: licht, met een gekartelde onderrand. */
.bon__papier { --tand: 0.875rem; position: relative; padding: 1.5rem 1.5rem calc(1.4rem + var(--tand) / 2); background: color-mix(in srgb, var(--c-white) 93%, var(--c-lavender)); color: var(--c-ink); box-shadow: 0 18px 40px color-mix(in srgb, var(--c-scrim) 45%, transparent); -webkit-mask: radial-gradient(circle at 50% 100%, transparent calc(var(--tand) / 2 - 0.5px), var(--c-ink) calc(var(--tand) / 2)) bottom / var(--tand) var(--tand) repeat-x, linear-gradient(var(--c-ink), var(--c-ink)) top / 100% calc(100% - var(--tand) + 1px) no-repeat; mask: radial-gradient(circle at 50% 100%, transparent calc(var(--tand) / 2 - 0.5px), var(--c-ink) calc(var(--tand) / 2)) bottom / var(--tand) var(--tand) repeat-x, linear-gradient(var(--c-ink), var(--c-ink)) top / 100% calc(100% - var(--tand) + 1px) no-repeat; will-change: transform; }
.bon__boven { display: grid; justify-items: center; gap: 0.4rem; padding-bottom: 0.75rem; border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 35%, transparent); text-align: center; }
.bon__merk { width: 2rem; height: auto; color: var(--c-ink); }
.bon__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: inherit; }
.bon__regels { display: grid; margin: 0; padding: 0; list-style: none; }
.bon__regel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.85rem; padding: 0.45rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent); }
/* Vaste maat: het vinkje is een penlijn van 1,5px (vak van 24, het vinkje is 140% van het vakje). */
.bon__vak { position: relative; display: block; width: 1.5rem; aspect-ratio: 1; border: 1.5px solid color-mix(in srgb, var(--c-ink) 40%, transparent); border-radius: 0.35rem; }
.bon__vink { position: absolute; top: -28%; left: -12%; width: 140%; height: 140%; overflow: visible; fill: none; stroke: var(--c-ink); stroke-width: 1.22; stroke-linecap: round; stroke-linejoin: round; }
.bon__wat { display: grid; gap: 0; min-width: 0; }
.bon__naam { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.bon__uitleg { font-size: 0.78125rem; line-height: 1.3; color: color-mix(in srgb, var(--c-ink) 65%, transparent); }
.bon__in { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--c-ink) 60%, transparent); white-space: nowrap; }
.bon__totaal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1rem; margin-top: 0.35rem; padding: 0.8rem 0 1rem; border-top: 3px double color-mix(in srgb, var(--c-ink) 55%, transparent); }
.bon__totaal-label { font-weight: 600; font-size: 1rem; }
.bon__prijs { text-align: right; white-space: nowrap; }
.bon__prijs b { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); line-height: 1; letter-spacing: -0.02em; }
.bon__prijs span { font-size: 0.9375rem; color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
/* De streep onder het totaal, met de hand (vak 120 x 24). */
.bon__streep { position: absolute; right: -0.5rem; bottom: -0.1rem; width: 62%; height: auto; aspect-ratio: 5; overflow: visible; fill: none; stroke: var(--c-lavender-dark); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.bon__noot { font-size: 0.8125rem; line-height: 1.45; text-align: center; color: color-mix(in srgb, var(--c-ink) 68%, transparent); }
.bon__noot > * + * { margin-top: 0.4em; }
@media (min-width: 56.25em) {
	.bon__rand,
	.vgl__rand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--frame); background: none; }
	.bon__rand > i,
	.vgl__rand > i {
		display: block;
		background:
			linear-gradient(var(--c-bg), var(--c-bg)) top / 100% var(--frame) no-repeat,
			radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) left var(--frame) / var(--radius) var(--radius) no-repeat,
			radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--c-bg) var(--radius)) right var(--frame) / var(--radius) var(--radius) no-repeat;
	}
	.bon__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); }
}
/* Lage laptopschermen: de bon iets kleiner, zodat hij met het totaal in beeld past (1280 x 720 liep hij 110 px over de
   onderrand). Zoom schaalt ook de maten, dus de vinkjes en de pennen van Ben en Nick blijven op hun plek. */
@media (min-width: 56.25em) and (max-height: 55em) { .bon__uit { zoom: 0.9; } }
@media (min-width: 56.25em) and (max-height: 50em) { .bon__uit { zoom: 0.84; } }
@media (min-width: 56.25em) and (max-height: 46em) { .bon__uit { zoom: 0.78; } }
@media (min-width: 56.25em) and (max-height: 42em) { .bon__uit { zoom: 0.72; } }
@media (max-width: 30em) {
	.bon__papier { padding-inline: 1.1rem; }
	.bon__in { display: none; }
}
/* Kopen of een abonnement: links doorgestreept, rechts het groene vlak met vinkjes. */
.vgl { padding-bottom: var(--frame); }
.vgl__kop { display: grid; justify-items: start; gap: 1.1rem; padding: clamp(3.5rem, 10vh, 7rem) calc(var(--gutter) - var(--frame)) clamp(1.75rem, 4vh, 2.75rem); }
.vgl__kicker { color: var(--c-lavender); }
.vgl__titel { margin: 0; max-width: 16ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 1rem + 3.8vw, 5.5rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--c-lavender); text-wrap: balance; }
.vgl__intro { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 80%, transparent); }
.vgl__intro > * + * { margin-top: 0.6em; }
.vgl__kolommen { display: grid; gap: var(--frame); }
.vgl__kolom { display: grid; align-content: start; gap: 1rem; padding: clamp(1.75rem, 3vw, 3rem); border-radius: var(--radius); }
.vgl__kolom--uit { background: var(--c-bg-licht); color: var(--c-white); }
.vgl__kolom--in { background: var(--c-lavender); color: var(--c-ink); }
.vgl__kolomtitel { margin: 0 0 0.5rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.1; color: inherit; }
.vgl__regels { display: grid; margin: 0; padding: 0; list-style: none; }
.vgl__regel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; padding: 1rem 0; border-top: 1px dashed color-mix(in srgb, currentColor 22%, transparent); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.35; }
.vgl__kruis { position: relative; display: block; width: 1.75rem; aspect-ratio: 1; border: 1.5px solid color-mix(in srgb, var(--c-white) 35%, transparent); border-radius: 50%; }
.vgl__kruis::before,
.vgl__kruis::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 1.5px; background: color-mix(in srgb, var(--c-white) 55%, transparent); border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.vgl__kruis::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vgl__kolom--uit .vgl__tekst { position: relative; justify-self: start; opacity: calc(0.55 + 0.45 * var(--vgl-dim, 0)); }
/* De doorhaling (abonnement.js laat hem van links naar rechts lopen). */
/* De doorhaling: een achtergrond op de tekst zelf, per regel (box-decoration-break), dus ook goed over twee regels;
   abonnement.js laat --haal van 0 naar 100% lopen. Zonder JS staat hij er. */
.vgl__haal { --haal: 100%; background: linear-gradient(var(--c-error), var(--c-error)) no-repeat 0 56% / var(--haal) 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vgl__vak { position: relative; display: block; width: 1.75rem; aspect-ratio: 1; border: 1.5px solid color-mix(in srgb, var(--c-ink) 45%, transparent); border-radius: 0.45rem; }
.vgl__vink { position: absolute; top: -28%; left: -12%; width: 140%; height: 140%; overflow: visible; fill: none; stroke: var(--c-ink); stroke-width: 1.03; stroke-linecap: round; stroke-linejoin: round; }
.vgl__knoppen { margin-top: 0.75rem; }
@media (min-width: 56.25em) {
	.vgl__kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.bon__papier { will-change: auto; }
}

/* ---------- AI aan het werk (2026-10-14, op verzoek "op de koppeling laten maken pagina meer investeren en visueel
   weergeven dat we ook met AI kunnen koppelen en automatiseren, met use cases en de AI-logo's die rouleren"; blok
   aiwerk, assets/js/aiwerk.js, inc/aiwerk.php). Bovenaan het groene vlak met de kop over de hele breedte, daaronder
   het stippenbord waarop de voorbeelden om de beurt spelen. ---------- */
.aiw { padding: 0 var(--frame) var(--frame); }
.aiw__blok { display: flow-root; }
.aiw__rand { display: none; }
.aiw__blok > .kb__rand { margin: calc(-1 * var(--frame)) 0 calc(-1 * var(--frame)); }
.aiw__rij { display: grid; gap: var(--frame); }
/* Het groene vlak: kicker en de grote kop, onderaan de tekst links en de knoppen rechts. */
.aiw__vlak { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 1.25rem; padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + clamp(1.5rem, 5vh, 3.5rem)) calc(var(--gutter) - var(--frame)) clamp(2rem, 4.5vw, 3.5rem); border-radius: var(--radius); background: var(--c-lavender); color: var(--c-ink); }
.aiw__kicker { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-body); color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.aiw__kop { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.125rem, 0.6rem + 5.2vw, 7rem); line-height: 1.16; letter-spacing: -0.025em; color: inherit; }
.aiw__regel { display: block; white-space: nowrap; }
/* De pillen: op het groene vlak gevuld in de inkt (de AI-modellen met hun logo) en omlijnd (de systemen). */
.aiw__kop .roll { height: 1.08em; padding: 0 0.32em; background: var(--c-ink); color: var(--c-lavender); vertical-align: -0.17em; }
.aiw__kop .roll--b { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 max(1.5px, 0.03em) var(--c-ink); }
.aiw__kop .roll__item { display: flex; align-items: center; justify-content: center; gap: 0.16em; height: 1.08em; line-height: 1.08em; }
.roll__icoon { display: grid; place-items: center; flex: none; width: 0.6em; height: 0.6em; }
.roll__icoon svg { display: block; width: 100%; height: 100%; }
.aiw__tekst { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.4; color: color-mix(in srgb, var(--c-ink) 82%, transparent); text-wrap: pretty; }
.aiw__tekst > * + * { margin-top: 0.6em; }
/* Het bord: stippen op het donkere vlak; boven de titel, in het midden de stroom, onderin de knoppen per voorbeeld. */
.aiw__bord { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vh, 2rem); min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame)); padding: calc(var(--header-top) + var(--btn-h) + 1.25rem) clamp(1.25rem, 3vw, 2.5rem) clamp(4.5rem, 10vh, 6.5rem); overflow: hidden; border-radius: var(--radius); background-color: var(--c-bord); background-image: radial-gradient(color-mix(in srgb, var(--c-white) 11%, transparent) 1px, transparent 1.6px); background-size: 24px 24px; color: var(--c-white); container-type: inline-size; }
.aiw__scenes { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; }
/* Alle voorbeelden in dezelfde cel, zodat het bord niet van hoogte verandert als ze wisselen. */
.aiw__scene { grid-area: 1 / 1; display: grid; align-content: center; gap: clamp(1.5rem, 5vh, 3.25rem); }
.aiw__scene[hidden] { display: none; }
.aiw__scene.is-weg { visibility: hidden; }
.aiw__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.625rem, 1rem + 1.8vw, 3rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--c-lavender); text-wrap: balance; }
/* De stroom: wat binnenkomt, een lijn, AI, een lijn, wat eruit komt. */
.aiw__stroom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 0.42fr) auto minmax(2.5rem, 0.42fr) minmax(0, 1.12fr); align-items: center; }
.aiw__kaart { position: relative; display: grid; align-content: start; gap: 0.8rem; padding: clamp(1rem, 1.8cqi, 1.6rem); border-radius: var(--radius); background: var(--c-bg-licht); box-shadow: 0 18px 40px color-mix(in srgb, var(--c-scrim) 40%, transparent); }
.aiw__kaart--uit { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lavender) 50%, transparent), 0 18px 40px color-mix(in srgb, var(--c-scrim) 40%, transparent); }
.aiw__kaart-kop { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.875rem; line-height: 1.3; color: color-mix(in srgb, var(--c-white) 70%, transparent); }
.aiw__icoon { display: grid; place-items: center; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: color-mix(in srgb, var(--c-lavender) 15%, transparent); color: var(--c-lavender); }
.aiw__icoon svg { width: 1.125rem; height: 1.125rem; }
.aiw__kaart-tekst { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.0625rem, 0.85rem + 0.9cqi, 1.5rem); line-height: 1.3; color: var(--c-white); text-wrap: pretty; }
/* Het getypte stuk; de rest staat er al (onzichtbaar), zodat de kaart niet groeit terwijl hij typt. */
.aiw__rest { color: transparent; }
.aiw__typ-streep { display: inline-block; width: 2px; height: 1.05em; margin: 0 -2px -0.16em 0; background: var(--c-lavender); animation: aiw-knipper 1s steps(1) infinite; }
@keyframes aiw-knipper { 50% { opacity: 0; } }
/* Een mens keurt goed: de knop (versiering, Nick klikt erop) en het regeltje ernaast. */
.aiw__mens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.25rem 0 0; }
.aiw__knop { position: relative; display: inline-grid; align-items: center; height: 2.5rem; padding: 0 1.15rem; border-radius: 999px; background: var(--c-lavender); color: var(--c-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.aiw__knop > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: opacity 0.3s ease, translate 0.5s var(--ease-im); }
.aiw__knop-na { opacity: 0; translate: 0 0.6rem; }
.aiw__knop-na svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aiw__knop.is-klaar .aiw__knop-voor { opacity: 0; translate: 0 -0.6rem; }
.aiw__knop.is-klaar .aiw__knop-na { opacity: 1; translate: 0 0; }
.aiw__mens-label { font-size: 0.8125rem; line-height: 1.3; color: color-mix(in srgb, var(--c-white) 62%, transparent); }
.aiw__mens--vanzelf .aiw__mens-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.aiw__mens--vanzelf .aiw__mens-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-lavender); }
/* AI in het midden: een ring met de rollende logo's (aiwerk.js zet --aiw-y), daaronder wat AI doet. */
.aiw__ai { display: grid; justify-items: center; gap: 0.9rem; width: clamp(8.5rem, 16cqi, 13rem); text-align: center; }
.aiw__ring { --ring: clamp(5.25rem, 9cqi, 8rem); position: relative; display: block; width: var(--ring); height: var(--ring); border-radius: 50%; color: var(--c-lavender); }
.aiw__ring::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--c-lavender); border-radius: 50%; pointer-events: none; }
.aiw__ring-in { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.aiw__ring-track { display: flex; flex-direction: column; transform: translateY(calc(var(--aiw-y, 0) * -1 * var(--ring))); }
.aiw__ring-logo { flex: none; display: grid; place-items: center; width: var(--ring); height: var(--ring); }
.aiw__ring-logo svg { display: block; width: 42%; height: 42%; }
/* Denkt na: een zachte gloed die uitdijt. */
.aiw__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.aiw__ai.is-denkt .aiw__ring::before { opacity: 1; animation: aiw-puls 1.3s ease-out infinite; }
@keyframes aiw-puls {
	from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-lavender) 45%, transparent); }
	to { box-shadow: 0 0 0 1.4rem color-mix(in srgb, var(--c-lavender) 0%, transparent); }
}
.aiw__ai-tekst { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: color-mix(in srgb, var(--c-white) 78%, transparent); text-wrap: balance; }
/* De lijnen: een penlijn met de hand, en een pakketje dat erlangs reist. */
.aiw__lijn { position: relative; display: block; height: 1.5rem; margin: 0 0.6rem; }
.aiw__lijn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c-lavender); stroke-width: 1.5; stroke-linecap: round; }
.aiw__lijn path { vector-effect: non-scaling-stroke; }
.aiw__lijn-sta { display: none; }
.aiw__rit { position: absolute; top: 50%; left: 0; width: 100%; height: 0; pointer-events: none; }
.aiw__pakket { position: absolute; top: 0; left: 0; width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-radius: 50%; background: var(--c-lavender); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--c-lavender) 22%, transparent); opacity: 0; }
/* Nick, die goedkeurt (spook voor de zwevende cursor; zonder zwevende cursors zijn eigen cursor). */
.aiw__pen { z-index: 5; }
/* De knoppen per voorbeeld: de actieve is breder en vult zacht mee (zoals de fases), met rechts pauzeren. */
.aiw__tijd { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.aiw__tabs { display: flex; flex: 1 1 auto; gap: 0.625rem; min-width: 0; }
.aiw__tab { position: relative; flex: 1 1 0; min-width: 0; height: 3.25rem; padding: 0 1rem; overflow: hidden; isolation: isolate; border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--c-white) 6%, transparent); color: color-mix(in srgb, var(--c-white) 62%, transparent); font-family: var(--f-display); font-weight: 500; font-size: 1rem; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; transition: flex-grow 0.7s var(--ease-im), background-color 0.35s ease, color 0.35s ease; }
.aiw__tab-vol { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c-lavender) 16%, transparent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity 0.35s ease; }
.aiw__tab[aria-selected="true"] { flex-grow: 2.2; background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-white); }
.aiw__tab[aria-selected="true"] .aiw__tab-vol { opacity: 1; }
.aiw__tab:not([aria-selected="true"]):hover { color: var(--c-white); }
.aiw__tab:focus-visible,
.aiw__pauze:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }
.aiw__pauze { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 35%, transparent); color: var(--c-white); cursor: pointer; transition: box-shadow 0.3s ease; }
.aiw__pauze[hidden] { display: none; }
.aiw__pauze:hover { box-shadow: inset 0 0 0 1px var(--c-white); }
.aiw__pauze svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aiw__pauze-play { display: none; }
.aiw__pauze[aria-pressed="true"] .aiw__pauze-ii { display: none; }
.aiw__pauze[aria-pressed="true"] .aiw__pauze-play { display: block; }
@media (min-width: 56.25em) {
	.aiw__rand { display: block; }
	/* Onderaan het vlak: de tekst links en de knoppen rechts op dezelfde lijn. */
	.aiw__vlak { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
	.aiw__kicker,
	.aiw__kop { grid-column: 1 / -1; }
	.aiw__kop { margin-bottom: clamp(0.5rem, 3vh, 2rem); }
	.aiw__knoppen { align-self: end; justify-content: flex-end; }
}
/* Telefoon en tablet: de stroom onder elkaar, de lijnen staand, de knoppen per voorbeeld schuiven opzij. */
@media (max-width: 56.24em) {
	.aiw__bord { min-height: 0; padding-bottom: clamp(1.25rem, 3vw, 2.5rem); }
	.aiw__stroom { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.aiw__kaart { justify-self: stretch; }
	.aiw__ai { width: auto; max-width: 16rem; }
	.aiw__ring { --ring: 5.5rem; }
	.aiw__lijn { width: 1.5rem; height: 2.75rem; margin: 0.6rem 0; }
	.aiw__lijn-lig { display: none; }
	.aiw__lijn-sta { display: block; }
	.aiw__rit { top: 0; left: 50%; width: 0; height: 100%; }
	.aiw__tabs { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2.5rem)); padding: 0.25rem clamp(1.25rem, 3vw, 2.5rem); }
	.aiw__tabs::-webkit-scrollbar { display: none; }
	.aiw__tab { flex: none; height: 2.75rem; padding: 0 1.1rem; }
	.aiw__tab[aria-selected="true"] { flex-grow: 0; }
	.aiw__pauze { width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 37.49em) {
	/* De tekst voor een pil op een eigen regel, zodat de kop niet anders afbreekt als een pil van breedte verandert. */
	.aiw__voor { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.aiw__tab, .aiw__tab-vol, .aiw__knop > span { transition: none; }
	.aiw__ai.is-denkt .aiw__ring::before, .aiw__typ-streep { animation: none; }
}
.has-im-cursors .aiw__pen.is-zelf > * { visibility: visible !important; }

/* ---------- Cookiemelding (inc/cookies.php, assets/js/cookies.js) ----------
   Een kaart onderin (desktop rechts) in de stijl van de zwevende balken: vliegt in met dezelfde bounce
   en zakt precies omgekeerd weg. "zelf kiezen" klapt de schakelaars open. Weg zolang een
   paneel open is. */
.cookies {
	position: fixed;
	left: max(var(--frame), env(safe-area-inset-left));
	bottom: max(var(--frame), env(safe-area-inset-bottom));
	z-index: 57;
	width: min(27rem, calc(100vw - 2 * var(--frame)));
	max-height: calc(100svh - 2 * var(--frame));
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	translate: 0 calc(100% + 3rem);
	pointer-events: none;
	transition: opacity 0.2s ease 0.45s, translate 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.cookies[hidden] { display: none; }
.cookies.is-open { opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity 0.2s ease, translate 0.85s cubic-bezier(0.34, 1.56, 0.64, 1); }
html:is(.menu-dim, .lang-dim, .lw-dim, .au-dim, .zp-dim, .kf-dim, .galerij-open) .cookies { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }

.cookies__kaart {
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--c-bg-licht);
	box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--c-panel) 70%, transparent), 0 0.25rem 0.75rem color-mix(in srgb, var(--c-panel) 40%, transparent);
	color: var(--c-white);
}
.cookies__kop { display: flex; align-items: center; gap: 0.85rem; }
.cookies__merk { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.6rem; background: var(--c-bg); }
.cookies__m { width: 1.75rem; height: auto; color: var(--c-lavender); }
.cookies__titel { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--c-lavender); text-wrap: balance; }
.cookies__tekst { margin-top: 0.9rem; color: var(--c-mute); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.cookies__tekst > * + * { margin-top: 0.6em; }
.cookies__tekst a { color: var(--c-white); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--c-line); text-underline-offset: 0.2em; transition: text-decoration-color 0.35s ease; }
@media (hover: hover) { .cookies__tekst a:hover { text-decoration-color: var(--c-lavender); } }

/* Zelf kiezen: per soort een rij met een schakelaar. */
.cookies__keuzes { display: none; margin-top: 1.1rem; gap: 0.4rem; }
.cookies.is-kiezen .cookies__keuzes { display: grid; }
.cookies__optie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius); background: var(--c-bg-tegel); cursor: pointer; }
.cookies__optie:has(.cookies__altijd) { cursor: default; }
.cookies__optie-tekst strong { display: block; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-btn); }
.cookies__optie-tekst small { display: block; margin-top: 0.2rem; color: var(--c-mute); font-size: var(--fs-small); line-height: 1.4; }
.cookies__altijd { flex: none; color: var(--c-lavender); font-size: var(--fs-small); white-space: nowrap; }
.cookies__schakel { position: relative; flex: none; width: 2.75rem; height: 1.625rem; }
.cookies__schakel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookies__schakel span { position: absolute; inset: 0; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-panel); pointer-events: none; transition: background-color 0.35s var(--ease-im), border-color 0.35s var(--ease-im); }
.cookies__schakel span::after { content: ""; position: absolute; top: 50%; left: 0.2rem; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; border-radius: 50%; background: var(--c-white); transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s var(--ease-im); }
.cookies__schakel input:checked + span { border-color: var(--c-lavender); background: var(--c-lavender); }
.cookies__schakel input:checked + span::after { translate: 1.125rem 0; background: var(--c-ink); }
.cookies__schakel input:focus-visible + span { outline: 2px solid var(--c-lavender); outline-offset: 3px; }

/* Knoppen: eerst alles goed en alleen nodig; bij zelf kiezen opslaan en alleen nodig. */
.cookies__knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.cookies [data-cookies-actie="opslaan"],
.cookies.is-kiezen [data-cookies-actie="alles"],
.cookies.is-kiezen [data-cookies-actie="kiezen"] { display: none; }
.cookies.is-kiezen [data-cookies-actie="opslaan"] { display: inline-flex; }
.cookies__onder { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 1rem; font-size: var(--fs-small); color: var(--c-mute); }
.cookies__link { font-size: inherit; color: var(--c-mute); }
@media (hover: hover) { .cookies__link:hover { color: var(--c-white); } }

/* Laptop en desktop: rechtsonder, dan ligt hij niet over de kop van de hero (die staat links). */
@media (min-width: 56.25em) {
	.cookies { left: auto; right: max(var(--frame), env(safe-area-inset-right)); }
}
@media (max-width: 37.49em) {
	.cookies__kaart { padding: 1.25rem; }
	.cookies__knoppen .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cookies, .cookies.is-open { translate: none; transition: opacity 0.2s ease; }
}