/*
Theme Name: Persoonlijkheid
Theme URI: https://persoonlijkheid.nl
Author: Persoonlijkheid.nl
Description: Custom standalone theme for Persoonlijkheid.nl. No page builder, no framework dependency.
Version: 0.4.0
Text Domain: persoonlijkheid
Requires PHP: 8.2
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

/* Huisstijl v2. Bron van waarheid: Portaal.persoonlijkheid.nl/_claude_md_docs/HUISSTIJL-V2.md */
:root {
	/* Hoofdkleuren */
	--ink: #0B3342;
	--accent: #5A6FF9; /* niet voor lopende tekst: contrast 3.75 op paper */
	--paper: #F4F4F0;
	--white: #FFFFFF;

	/* Website: witte pagina */
	--accent-hover: #4A5EE8;

	/* Afgeleide neutralen (ink gemengd in paper) */
	--track: #D1D7D6;
	--sub-fill: #A2B0B3;

	/* Accent per trait, alleen voor trait-gebonden elementen. Nooit tekst op een accentvlak. */
	--trait-meegaandheid: #F46325;
	--trait-conscientieusheid: #767058;
	--trait-extraversie: #AE82DB;
	--trait-emotionaliteit: #FCA862;
	--trait-openheid: #F0909B;
	--trait-eerlijkheid: #60DA98;

	/* Grote cijfers op de site zijn STIX. De 'Cijfers'-truc is voor het rapport. */
	--font-body: 'Space Grotesk', -apple-system, sans-serif;
	--font-display: var(--font-body);
	--font-serif: 'STIX Two Text', Georgia, serif;
	--font-mono: 'Space Mono', ui-monospace, monospace;

	--text-xs: 0.625rem;
	--text-sm: 0.8rem;
	--text-base: 1rem;
	--text-md: 1.25rem;
	--text-lg: 1.5rem;
	--text-xl: 1.95rem;
	--text-2xl: 2.45rem;
	--text-3xl: 3.05rem;
	--text-4xl: 3.8rem;
	--text-5xl: 4.75rem;
	--text-6xl: 6rem;

	--radius-sm: 0.75rem;
	--radius-md: 1.125rem;
	--radius: 1.5rem;
	--radius-pill: 999rem;

	--container-width: 85rem; /* 1360px at 16px root */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;

	--r-groot: 3.75rem;  /* grote kaarten en foto's (60px) */
	--r-midden: 2.5rem;  /* kaart in kaart (40px) */
	--r-klein: 1.875rem; /* team, artikelen, testimonialfoto (30px) */
	--sectie: 6.25rem;   /* ruimte tussen secties (100px) */
	--knop-h: 3.375rem;  /* hoogte knop (54px) */

	/* Breedtes (zie DESIGN.md "Breedtes"). Twee lijnen voor de hele site, ontwerpbreedte 1920:
	   inhoud 1560 (180 marge) en brede vlakken 1840 (40 marge). Alles in rem. */
	--rand: clamp(1.5rem, 9.375vw, 11.25rem);     /* marge van de inhoud: 180 op 1920, daar is de inhoud ook precies 1560 */
	--rand-vlak: clamp(0.75rem, 2.1vw, 2.5rem);   /* marge van een breed vlak */
	--inhoud: min(97.5rem, 100% - 2 * var(--rand));
	--breed: min(115rem, 100% - 2 * var(--rand-vlak));
	/* Binnenmarge van een breed vlak, zodat de inhoud erin weer op de inhoudslijn staat */
	--vlak-pad: max(var(--rand) - var(--rand-vlak), 1.25rem);

	/* Twee kolommen (v5): links kop of foto, rechts tekst of cijfers. Zelfde verdeling overal,
	   zodat de rechterkolom op elke sectie op dezelfde lijn begint (1075 op 1920). */
	--twee-kolommen: minmax(0, 760fr) minmax(0, 642fr);
	--twee-gat: clamp(2rem, 5.7vw, 6.8rem);
}

/* ==========================================================================
   Fonts
   ========================================================================== */

/* Space Grotesk is variabel (300-700) in één bestand. */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/space-grotesk.woff2') format('woff2');
}

/* Claimt alleen cijfers en , . % zodat elk getal automatisch STIX wordt (huisstijl v2 §2). */
@font-face {
	font-family: 'Cijfers';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/stix-two-text-regular.woff2') format('woff2');
	unicode-range: U+0030-0039, U+002C, U+002E, U+0025;
}

@font-face {
	font-family: 'STIX Two Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/stix-two-text-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'STIX Two Text';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/stix-two-text-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'STIX Two Text';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/stix-two-text-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/space-mono.woff2') format('woff2');
}


/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--white); /* v5: witte pagina met crème vlakken, op alle pagina's */
	line-height: 1.5;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer; /* ook links zonder href, zoals Testen en Trainingen in het menu */
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, p {
	margin: 0;
	font-weight: 400;
}

/* Nadruk met de serif-italic, niet met vet (huisstijl v2 §2) */
strong, b, em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}

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

/* ==========================================================================
   Basis: containers, typografie, knop
   Breedtes als tokens in :root (--inhoud, --breed), zie DESIGN.md.
   ========================================================================== */

/* Inhoud (1560 op 1920): topbar, header, tekst en kaarten */
.container,
.smal {
	width: var(--inhoud);
	margin-inline: auto;
}

/* Brede vlakken (1840 op 1920): hero, citaat, footer. Inhoud erin met padding-inline: var(--vlak-pad) */
.breed {
	width: var(--breed);
	margin-inline: auto;
}

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

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--white);
}

.skip-link:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.kop {
	font-size: clamp(2.25rem, 4.5vw, 3.125rem); /* 50px */
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.kop em {
	display: block;
}

.kop--klein {
	font-size: clamp(2rem, 3.5vw, 2.5rem);
}

.kop--klein em,
.kop--midden em,
.kop--inline em {
	display: inline;
}

.kop--midden {
	text-align: center;
}

.eyebrow {
	margin-bottom: 1rem;
	font-family: var(--font-mono);
	font-size: clamp(1rem, 1.4vw, 1.25rem); /* 20px */
	line-height: 1;
	color: var(--accent);
}

.lopend {
	font-size: 1.125rem; /* 18px */
	line-height: 1.4;
}

.lopend p + p {
	margin-top: 1.4em;
}

.sectie {
	margin-top: var(--sectie);
}

.sectie__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}

.kaart {
	border-radius: var(--r-groot);
}

.kaart--wit {
	background: var(--white);
}

.kaart--donker {
	background: var(--ink);
	color: var(--white);
}

/* Knop: pil met label plus los rondje met pijl */
.knop {
	display: inline-flex;
	align-items: stretch;
	font-size: 1.125rem;
	line-height: 1;
	white-space: nowrap;
}

.knop__label,
.knop__pijl {
	display: inline-flex;
	align-items: center;
	height: var(--knop-h);
	border-radius: var(--radius-pill);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.knop__label {
	padding: 0 1.4rem;
}

.knop__pijl {
	justify-content: center;
	flex-shrink: 0;
	width: var(--knop-h);
	height: var(--knop-h);
}

.knop__pijl svg {
	width: 1.25rem;
	height: 1.25rem;
	transition: transform 0.2s ease;
}

.knop--blauw .knop__label,
.knop--blauw .knop__pijl,
span.knop__pijl {
	background: var(--accent);
	color: var(--white);
}

.knop--wit .knop__label,
.knop--wit .knop__pijl {
	background: var(--white);
	color: var(--ink);
}

.knop--blauw:hover .knop__label,
.knop--blauw:hover .knop__pijl {
	background: var(--accent-hover);
}

.knop--wit:hover .knop__label,
.knop--wit:hover .knop__pijl {
	background: var(--paper);
}

.knop:hover .knop__pijl svg,
a:hover > .knop__pijl svg,
a:hover .artikel__voet .knop__pijl svg,
a:hover .uitgelicht__voet .knop__pijl svg {
	transform: translateX(0.2rem);
}

/* ==========================================================================
   Topbar + header
   ========================================================================== */

.topbar {
	background: var(--ink);
	color: var(--white);
	font-size: 0.9375rem;
}

.topbar__inner {
	container-type: inline-size; /* de claim verschijnt alleen als hij past (zie @container hieronder) */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	min-height: 3.75rem;
}

/* Onder 15rem laat de widget ster en logo weg. Trustpilot centreert de inhoud in het kader;
   de negatieve marge zet de tekst gelijk met de rand van de container. */
.topbar__tp {
	justify-self: start;
	width: 15rem;
	min-width: 0;
	margin-left: -1rem;
}

.topbar__reviews {
	display: flex;
	align-items: center;
	gap: 0.25rem 1.25rem;
	justify-self: start;
	min-width: 0;
}

.topbar__reviews .topbar__tp {
	flex-shrink: 0;
	margin-right: -1rem; /* zelfde lege ruimte als links, zie .topbar__tp */
}

/* Google-score naast de widget, met een dun streepje ertussen */
.topbar__google {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-left: 1.25rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 0.875rem;
	white-space: nowrap;
}

.topbar__google-g {
	width: 1rem;
	height: 1rem;
}

.topbar__google-score {
	font-weight: 600;
}

.topbar__google-aantal {
	opacity: 0.75;
}

.topbar__stars.topbar__stars--google {
	color: #FBBC04;
}

.topbar__tp-terugval {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.topbar__tp-name {
	font-weight: 600;
}

.topbar__tp-score {
	color: var(--trait-eerlijkheid);
}

.topbar__stars {
	display: inline-flex;
	gap: 0.15rem;
	color: #00B67A;
}

.topbar__stars svg {
	width: 0.95rem;
	height: 0.95rem;
}

.topbar__claim {
	color: var(--trait-eerlijkheid);
	text-align: center;
}

.topbar__rechts {
	display: flex;
	align-items: center;
	gap: 2rem;
	grid-column: -2; /* altijd de laatste kolom, ook als de claim wegvalt */
	justify-self: end;
}

.topbar__login {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.topbar__login svg {
	width: 1.1rem;
	height: 1.1rem;
}

.topbar a:hover {
	color: var(--trait-eerlijkheid);
}

.site-header {
	position: relative;
	z-index: 20;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 6.5rem;
}

.site-logo {
	display: inline-flex;
	color: var(--ink);
	transition: color 0.2s ease;
}

/* Hover: het hele woordmerk in het blauw van ".nl" */
.site-logo:hover,
.site-logo:focus-visible {
	color: var(--accent);
}

.site-logo svg {
	display: block;
	height: 1.55rem;
	width: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2vw, 3rem);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2vw, 2.75rem);
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.75rem 0;
	font-size: 1.125rem;
	font-weight: 500;
	white-space: nowrap;
}

.site-nav__list > .menu-item-has-children > a::after {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	margin-top: -0.25rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.site-nav__list a:hover {
	color: var(--accent);
}

.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -1.25rem;
	min-width: 16rem;
	padding: 0.75rem;
	border-radius: 1.25rem;
	background: var(--white);
	box-shadow: 0 1rem 2.5rem rgba(11, 51, 66, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.site-nav .sub-menu a {
	display: block;
	padding: 0.65rem 0.9rem;
	border-radius: 0.75rem;
	font-size: 1rem;
}

.site-nav .sub-menu a:hover {
	background: var(--paper);
	color: var(--ink);
}

/* Met JS opent site.js het paneel met een korte vertraging (is-open); zonder JS opent hover direct.
   is-dicht: met Esc gesloten terwijl de focus nog in het item staat. */
.site-header:not(.nav-js) .site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within:not(.is-dicht) > .sub-menu,
.site-nav__list > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__cta {
	display: inline-flex;
	align-items: center;
	height: var(--knop-h);
	padding: 0 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--white);
	font-size: 1.125rem;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.site-nav__cta:hover {
	background: var(--accent-hover);
}

/* Hover: tekst schuift iets naar links en een pijl schuift in. De breedte blijft gelijk, het menu verspringt niet. */
.site-nav__cta {
	position: relative;
	overflow: hidden;
	padding-inline: 1.75rem;
}

.site-nav__cta-tekst {
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-nav__cta-pijl {
	position: absolute;
	top: 50%;
	right: 1.1rem;
	display: flex;
	width: 1rem;
	height: 1rem;
	opacity: 0;
	transform: translate(-0.6rem, -50%);
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-nav__cta-pijl svg {
	width: 100%;
	height: 100%;
}

.site-nav__cta:hover .site-nav__cta-tekst,
.site-nav__cta:focus-visible .site-nav__cta-tekst {
	transform: translateX(-0.8rem);
}

.site-nav__cta:hover .site-nav__cta-pijl,
.site-nav__cta:focus-visible .site-nav__cta-pijl {
	opacity: 1;
	transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__cta-tekst,
	.site-nav__cta-pijl {
		transition: none;
	}
}

.nav-toggle {
	display: none;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	margin: 0 auto;
	background: var(--ink);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before { top: -0.4rem; }
.nav-toggle__bars::after { top: 0.4rem; }

.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(0.4rem) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after { transform: translateY(-0.4rem) rotate(-45deg); }

/* De claim staat gecentreerd tussen de scores en het inloggen; onder 94rem topbarbreedte (1500px) botst hij
   met de Google-score en valt hij weg ("5000+" staat ook bij de cijfers). Gemeten op de topbar zelf, niet op het
   scherm, omdat de inhoudsbreedte met de marge meeschaalt. */
@container (max-width: 94rem) {
	.topbar__claim {
		display: none;
	}
}

@media (max-width: 40rem) {
	/* Telefoons: geen ruimte voor beide scores naast het inloggen, Trustpilot blijft staan */
	.topbar__google {
		display: none;
	}
}

@media (max-width: 22.5rem) {
	/* Kleinste telefoons (320): smallere widget, Trustpilot laat dan ster en logo weg */
	.topbar__tp {
		width: 12.5rem;
	}
}

@media (max-width: 25rem) {
	/* Smalste telefoons: alleen het inlogicoon, anders past de Trustpilot-widget er niet naast */
	.topbar__login-tekst {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (max-width: 64rem) {
	/* Op mobiel staan deze links in het menu */
	.topbar__link {
		display: none;
	}

	.topbar__inner {
		grid-template-columns: 1fr 1fr;
		min-height: 2.75rem;
		font-size: 0.875rem;
	}

	.topbar__claim {
		display: none;
	}

	.site-header__inner {
		min-height: 5rem;
	}

	.nav-toggle {
		display: block;
		flex-shrink: 0;
	}

	.site-logo svg {
		height: clamp(0.95rem, 4vw, 1.3rem);
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
		padding: 1rem 1.5rem 2rem;
		background: var(--paper);
		box-shadow: 0 1.5rem 2rem rgba(11, 51, 66, 0.08);
	}

	.site-header.is-open .site-nav {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list > li {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.site-nav__list > li > a {
		justify-content: space-between;
		width: 100%;
		padding: 1rem 0;
		font-size: 1.25rem;
	}

	.site-nav .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		margin-bottom: 1rem;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list > li.is-open > .sub-menu {
		display: block;
	}

	.site-nav__list > li.is-open > a::after {
		transform: rotate(-135deg);
	}

	.site-nav__cta {
		justify-content: center;
	}
}

/* --- Megamenu ------------------------------------------------------------- */
/* Paneel onder het menu, rechts uitgelijnd op de knop "Gratis profielscan". Standaard: foto-kaarten
   naast elkaar (Trainingen). Zit de profielscan erin (Testen), dan worden de andere items een lijst
   met uitleg en is de profielscan de enige grote kaart. */

/* Mobiel: kaarten zijn gewone links, zonder foto en uitleg */
.mega-kaart__foto,
.mega-kaart__uitleg {
	display: none;
}

/* Lintje "Gratis" naast de titel (zelfde groen als de plekken-badge bij de trainingen) */
.mega-kaart__lint {
	display: inline-flex;
	align-items: center;
	margin-left: 0.6rem;
	padding: 0.2rem 0.6rem;
	border-radius: 0.625rem;
	background: var(--trait-eerlijkheid);
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	vertical-align: middle;
}

@media (min-width: 64.0625rem) {
	/* Het paneel hangt aan de navigatie, niet aan het menu-item */
	.site-nav {
		position: relative;
	}

	.site-nav__list > li {
		position: static;
	}

	/* Kennisbank en Contact staan op desktop in de topbar (pnl_topbar_links) */
	.site-nav__list > li.in-topbar {
		display: none;
	}

	.site-nav__list > li:hover > a,
	.site-nav__list > li:focus-within > a,
	.site-nav__list > li.is-open > a {
		color: var(--accent);
	}

	.site-header:not(.nav-js) .site-nav__list > li:hover > a::after,
	.site-nav__list > li:focus-within:not(.is-dicht) > a::after,
	.site-nav__list > li.is-open > a::after {
		margin-top: 0.25rem;
		transform: rotate(-135deg);
	}

	.site-nav .sub-menu {
		top: calc(100% + 1rem);
		left: auto;
		right: 0;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 18rem;
		gap: 1.25rem;
		min-width: 0;
		padding: 1.25rem;
		border-radius: var(--r-klein);
		box-shadow: 0 1.5rem 3rem rgba(11, 51, 66, 0.14);
	}

	/* Brug tussen menu-item en paneel, zodat hover niet wegvalt bij het omlaag bewegen */
	.site-nav .sub-menu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 2.5rem;
	}

	.site-nav .sub-menu a.mega-kaart {
		display: grid;
		align-content: start;
		gap: 1rem;
		height: 100%;
		padding: 0 0 0.5rem;
		border-radius: 0;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.35;
	}

	.site-nav .sub-menu a.mega-kaart:hover {
		background: none;
		color: var(--ink);
	}

	.mega-kaart__tekst {
		display: grid;
		gap: 0.25rem;
		padding-inline: 0.25rem;
	}

	.mega-kaart__titel {
		font-size: 1.25rem;
		font-weight: 500;
		transition: color 0.2s ease;
	}

	.mega-kaart:hover .mega-kaart__titel {
		color: var(--accent);
	}

	.mega-kaart__uitleg {
		display: block;
		font-size: 1rem;
		opacity: 0.7;
	}

	.mega-kaart__foto {
		position: relative;
		display: block;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		border-radius: var(--radius-md);
		background: var(--paper);
	}

	/* Donker verloop naar rechts, zodat de pijlknop loskomt van de foto */
	.mega-kaart__foto::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(11, 51, 66, 0) 35%, rgba(11, 51, 66, 0.7) 100%);
	}

	.mega-kaart__foto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}

	.mega-kaart:hover .mega-kaart__foto img {
		transform: scale(1.03);
	}

	.mega-kaart__foto .knop__pijl {
		position: absolute;
		z-index: 1;
		right: 0.9rem;
		bottom: 0.9rem;
		width: 3rem;
		height: 3rem;
	}

	.mega-kaart:hover .mega-kaart__foto .knop__pijl {
		background: var(--accent-hover);
	}

	/* Paneel met de profielscan: lijst links, profielscan als grote kaart rechts */
	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) {
		grid-auto-flow: row dense;
		grid-template-columns: 23rem 21rem;
		grid-auto-columns: auto;
		column-gap: 1.5rem;
		row-gap: 0.25rem;
	}

	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) > li {
		grid-column: 1;
	}

	/* Het paneel Testen heeft drie tests naast de profielscan */
	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) > li:has(.mega-kaart--uitgelicht) {
		grid-column: 2;
		grid-row: span 3;
	}

	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) a.mega-kaart:not(.mega-kaart--uitgelicht) {
		padding: 1.1rem 1.25rem;
		border-radius: var(--radius-md);
	}

	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) a.mega-kaart:not(.mega-kaart--uitgelicht):hover {
		background: var(--paper);
	}

	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) a.mega-kaart:not(.mega-kaart--uitgelicht) .mega-kaart__foto {
		display: none;
	}

	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) .mega-kaart__tekst {
		padding-inline: 0;
	}

	/* Lijnen tussen de tests, zodat het duidelijk losse keuzes zijn */
	.site-nav .sub-menu:has(.mega-kaart--uitgelicht) > li:not(:has(.mega-kaart--uitgelicht)) + li:not(:has(.mega-kaart--uitgelicht)) {
		border-top: 1px solid rgba(11, 51, 66, 0.1);
		padding-top: 0.25rem;
	}
}

/* Smalle desktops (1025-1200): kleinere menutekst, anders schuift de navigatie buiten de inhoudsbreedte */
@media (min-width: 64.0625rem) and (max-width: 75rem) {
	.site-nav__list > li > a,
	.site-nav__cta {
		font-size: 1rem;
	}
}

/* ==========================================================================
   Homepage v3 (Figma "Homepage concept 1", bestand Persoonlijkheid.nl)
   Ontwerpbreedte 1920: vlakken 1840 breed (40 marge), inhoud 1680 (120 marge).
   ========================================================================== */

.knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
}

.knoppen--midden {
	justify-content: center;
}

/* Tweede knop in de hero: witte rand, transparant */
.knop-rand,
.knop-wit {
	display: inline-flex;
	align-items: center;
	height: var(--knop-h);
	padding: 0 1.5rem;
	border-radius: var(--radius-pill);
	font-size: 1.125rem;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.knop-rand {
	border: 1px solid var(--white);
	color: var(--white);
}

.knop-rand:hover {
	background: var(--white);
	color: var(--ink);
}

.knop-wit {
	background: var(--white);
	color: var(--accent);
}

.knop-wit:hover {
	background: var(--paper);
}

.accolade {
	display: block;
	flex-shrink: 0;
	width: auto;
	color: var(--accent);
}

.icoon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--accent);
}

.vinkjes {
	display: grid;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--ink);
}

.vinkjes li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.vink {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--accent);
}

.vinkjes--groot {
	font-size: 1.125rem;
}

.lopend--klein {
	font-size: 1rem;
	line-height: 1.6;
}

.onderstreept {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Kop links, tekst rechts (begint op 1090 van 1920) */
.sectie__twee {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem 4rem;
	align-items: start;
}

.sectie__twee > .lopend {
	max-width: 32rem;
	padding-top: 0.75rem;
}

/* --- Hero ---------------------------------------------------------------- */

.hero__vlak {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(34rem, 46vw, 55.625rem);
	overflow: hidden;
	border-radius: var(--r-groot);
	background: var(--ink);
	color: var(--white);
	isolation: isolate;
}

.hero__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 30%;
}

.hero__vlak::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2) 55%);
}

.hero__inhoud {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
	padding: 3rem clamp(1.5rem, 4.2vw, 5rem);
}

.hero__inhoud > div {
	min-width: 0;
}

.hero__inhoud .accolade {
	align-self: stretch;
	height: auto;
	max-height: 20.25rem;
	width: clamp(2.5rem, 4.6vw, 5.5rem);
}

.hero__titel {
	max-width: 33rem;
	font-size: clamp(2.5rem, 4.6vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.hero__titel em {
	display: block;
}

.hero__tekst {
	max-width: 36rem;
	margin: 2rem 0 2.5rem;
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	line-height: 1.4;
}

/* Hero v4: video-achtergrond en opbouw uit homepage-v1 (kop midden links, knoppen rechtsonder) */
.hero__vlak.hero__vlak--video {
	flex-direction: column;
	align-items: stretch;
	gap: 2rem;
	min-height: clamp(34rem, 46vw, 53.125rem);
	padding: clamp(1.5rem, 4.2vw, 5rem) var(--vlak-pad);
	padding-bottom: clamp(1.25rem, 1.8vw, 2rem); /* logo's dicht bij de onderrand */
}

.hero__vlak.hero__vlak--video::before {
	background: linear-gradient(0deg, rgba(5, 26, 34, 0.92) 0%, rgba(11, 51, 66, 0.45) 55%, rgba(11, 51, 66, 0.15) 100%);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--ink);
}

.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Telefoons en beperkte beweging: alleen de poster (de video wordt dan ook niet geladen) */
@media (max-width: 48rem), (prefers-reduced-motion: reduce) {
	.hero__video {
		display: none;
	}

	.hero__media {
		background-image: var(--hero-poster, none);
		background-size: cover;
		background-position: center;
	}
}

.hero__vlak--video .hero__inhoud {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	gap: 0;
	padding: 0;
}

/* Accolade in het blauw links van de kop, even hoog als de twee regels */
.hero__kop {
	--acc-w: clamp(1.25rem, 2.6vw, 3rem);
	--acc-gap: clamp(0.75rem, 1.6vw, 1.75rem);
	display: flex;
	align-items: stretch;
	gap: var(--acc-gap);
}

.hero__kop .accolade {
	--acc: var(--acc-w);
}

/* Subtekst begint op dezelfde lijn als de kop, rechts van de accolade */
.hero__vlak--video .hero__kop + .hero__tekst {
	margin-left: calc(clamp(1.25rem, 2.6vw, 3rem) + clamp(0.75rem, 1.6vw, 1.75rem));
}

.hero__titel--video {
	max-width: 50rem;
	font-size: clamp(2.5rem, 5.5vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
}

.hero__vlak--video .hero__tekst {
	max-width: 34rem;
	margin: 1.5rem 0 0;
}

.hero__zij {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.5rem;
	text-align: right;
}

.hero__zij-tekst {
	max-width: 20rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 48rem) {
	.hero__vlak.hero__vlak--video {
		min-height: 36rem;
		padding: 2rem var(--vlak-pad) 1.25rem;
	}

	.hero__vlak--video .hero__inhoud {
		padding: 0;
	}

	.hero__vlak--video .hero__tekst {
		margin: 1.25rem 0 0;
	}

	.hero__zij {
		align-items: flex-start;
		text-align: left;
	}
}

/* --- Logo's in de hero (v4, uit homepage-v1) ---------------------------- */

.hero__trust {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-top: 0.5rem;
}

.hero__trust-marquee {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.hero__trust-track {
	display: flex;
	width: max-content;
	animation: pnl-marquee 28s linear infinite;
}

.hero__trust-logos {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 4rem;
	padding-right: 4rem;
}

.hero__trust-logo {
	display: flex;
	align-items: center;
	height: 2.25rem;
}

.hero__trust-logo--sm {
	height: 1.6rem;
}

.hero__trust-logo img {
	height: 100%; /* svg's zonder eigen formaat vallen anders weg op 0x0 */
	width: auto;
	max-width: 9rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.hero__trust-logo img:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero__trust-track {
		animation: none;
	}
}

@keyframes pnl-marquee {
	to { transform: translateX(-50%); }
}

/* --- Intro (Know thyself) ------------------------------------------------------ */

.intro {
	margin-top: var(--sectie);
}

.intro__knop {
	margin-top: 2.5rem;
}

/* --- Cijfers -------------------------------------------------------------- */

.cijfers {
	margin-top: var(--sectie);
}

.cijfers__grid {
	display: grid;
	grid-template-columns: minmax(0, 790fr) minmax(0, 1050fr);
	gap: 2.5rem;
}

.cijfers__foto {
	width: 100%;
	height: 100%;
	min-height: 28rem;
	max-height: 71rem;
	object-fit: cover;
	border-radius: var(--r-groot);
}

.cijfers__rechts {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 4rem;
	padding: 0 clamp(0rem, 3vw, 4rem) 0 clamp(0rem, 5vw, 6rem);
}

.cijfers__lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2.75rem;
	margin: 0;
}

.cijfer {
	padding: 1.25rem 0 3.5rem;
	border-top: 1px solid var(--ink);
}

.cijfer__getal {
	font-family: var(--font-serif);
	font-size: clamp(3rem, 4.4vw, 5rem);
	line-height: 1;
	white-space: nowrap;
}

.cijfer__label {
	margin: 0.75rem 0 0;
	font-size: 1rem;
}

.cijfers__tekst {
	align-self: end;
	max-width: 23rem;
	margin-right: clamp(0rem, 4vw, 4.5rem);
}

.cijfers__tekst p {
	margin-bottom: 2.5rem;
	font-size: 1.125rem;
	line-height: 1.4;
}

/* --- Longread (verschijnt met scrollen) ----------------------------------- */

.longread {
	margin-top: var(--sectie);
}

.longread__sticky {
	position: relative;
	display: grid;
	justify-items: center;
}

.longread__stippen,
.aanpak__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.longread__stippen {
	display: none;
}

.longread__tekst {
	display: grid;
	gap: 1.5em;
	max-width: 44rem;
	font-size: clamp(1.5rem, 1.9vw, 2.25rem);
	line-height: 1.4;
	text-align: center;
}

.longread__kop {
	font-size: inherit;
	line-height: inherit;
}

/* Wrappers voor de veegversie: op desktop en zonder JS doen ze niet mee aan de opmaak */
.longread__alineas,
.longread__bediening {
	display: contents;
}

.longread:not(.longread--veeg) .longread__pijlen {
	display: none;
}

/* Scrollmodus (JS, brede schermen): kop blijft staan, alinea's wisselen elkaar af en
   woorden worden zwart naarmate je verder scrolt. */
.longread--scroll .longread__spoor {
	height: calc(100vh + 5 * 70vh); /* kop + 4 alinea's */
}

.longread--scroll .longread__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	align-content: center;
}

.longread--scroll .longread__tekst {
	grid-template-areas: 'tekst';
	align-items: center;
}

/* Kop is de eerste stap en vervaagt daarna, net als de alinea's */
.longread--scroll .longread__kop {
	grid-area: tekst;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.longread--scroll .longread__kop.is-weg {
	opacity: 0;
	transform: translateY(-1.5rem);
}

.longread--scroll .longread__alinea {
	grid-area: tekst;
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.longread--scroll .longread__alinea.is-actief {
	opacity: 1;
	transform: none;
}

.longread__kop .woord,
.longread__alinea .woord {
	color: rgba(0, 0, 0, 0.2);
	transition: color 0.25s ease;
}

.longread__kop .woord.is-gelezen,
.longread__alinea .woord.is-gelezen {
	color: var(--ink);
}

.longread--scroll .longread__stippen {
	position: absolute;
	left: clamp(0rem, 10vw, 15rem);
	top: 50%;
	display: grid;
	gap: 0.75rem;
	transform: translateY(-50%);
}

.longread__stippen li {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--white);
	transition: background-color 0.3s ease;
}

.longread__stippen li.is-actief {
	background: var(--accent);
}

/* --- Probleem (perzik vlak) ----------------------------------------------- */

.probleem {
	margin-top: var(--sectie);
}

/* v4: perzik vlak op de breedte van de hero (zoals de FAQ), niet meer schermbreed */
.probleem__vlak {
	padding: clamp(2rem, 4.2vw, 5rem) clamp(1rem, 2.6vw, 2.5rem) clamp(1rem, 2.6vw, 2.5rem);
	border-radius: var(--r-groot);
	background: #FEEEE0; /* emotionaliteit (#FCA862) 20% op wit, uit het ontwerp */
}

.probleem__vlak .vraag {
	border-radius: var(--r-midden); /* kaart in kaart */
}

.probleem .kop em {
	display: inline;
}

.vragen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem;
	margin-top: 4rem;
}

.vraag {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	min-height: clamp(20rem, 30vw, 35.7rem);
	padding: clamp(2rem, 3.4vw, 4rem);
	border-radius: var(--r-groot);
	background: var(--white);
}

.vraag .icoon {
	width: 4rem;
	height: 4rem;
	stroke-width: 1;
}

.vraag__titel {
	grid-row: 3;
	margin-bottom: 1.5rem;
	padding-top: 3rem;
	font-size: clamp(1.75rem, 2vw, 2.25rem);
	font-weight: 500;
	line-height: 1.1;
}

.vraag p {
	grid-row: 4;
	max-width: 26rem;
	min-height: 4.8em;
}

/* --- Inzicht (blauwe kaart + foto) ---------------------------------------- */

.inzicht {
	margin-top: 2.5rem;
}

.inzicht__grid {
	display: grid;
	grid-template-columns: minmax(0, 1219fr) minmax(0, 598fr);
	gap: 1.3rem;
}

.inzicht__kaart {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 3rem;
	padding: clamp(2.5rem, 4.2vw, 5rem);
	border-radius: var(--r-groot);
	background: var(--accent);
	color: var(--white);
}

.inzicht__tekst {
	max-width: 63rem;
	font-family: var(--font-serif);
	font-size: clamp(1.625rem, 2.1vw, 2.5rem);
	line-height: 1.25;
}

.inzicht__slot {
	font-size: clamp(1.25rem, 1.4vw, 1.5rem);
	font-weight: 600;
}

.inzicht__foto {
	width: 100%;
	height: 100%;
	max-height: 43.75rem;
	object-fit: cover;
	border-radius: var(--r-groot);
}

/* --- Aanpak (vier kaarten in trait-kleuren) -------------------------------- */

.aanpak {
	margin-top: var(--sectie);
}

.aanpak__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem 0.875rem;
	margin: 3.5rem auto 0; /* auto: anders wint de margin: 0 hierboven van .breed */
}

.reden {
	display: flex;
	gap: 2rem;
	min-height: 22.5rem;
	padding: 2.5rem clamp(1.5rem, 2.2vw, 2.5rem);
	border-radius: var(--r-midden);
	color: var(--ink);
}

.reden--roze { background: #F1DEDD; }
.reden--oranje { background: #F2D5C5; }
.reden--groen { background: #D4EDDC; }
.reden--zand { background: #E2DFD6; }

.reden__nr {
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 3vw, 3.125rem);
	line-height: 1;
	color: var(--accent);
}

.reden__titel {
	margin: 0.4rem 0 3rem;
	font-size: clamp(1.375rem, 1.6vw, 1.875rem);
	font-weight: 500;
	line-height: 1.25;
}

.reden p {
	max-width: 40rem;
	font-size: 1rem;
	line-height: 1.6;
}

/* --- Methodiek (v4, uit homepage-v1): driehoek links, accordeon rechts ------ */

.agency {
	margin-top: var(--sectie);
}

.agency__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
	gap: 3rem clamp(2rem, 5vw, 6rem);
	align-items: center;
	padding: clamp(1.5rem, 4.2vw, 5rem);
	border-radius: var(--r-groot);
	background: var(--white);
	color: var(--ink);
}

.agency__eyebrow {
	margin-bottom: 1rem;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.75;
}

.agency .kop {
	margin-bottom: 2.5rem;
	color: var(--ink);
}

.agency-item {
	border-bottom: 1px solid rgba(11, 51, 66, 0.15);
}

.agency-item__heading {
	margin: 0;
}

.agency-item__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 1rem 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: var(--ink);
	font: inherit;
	transition: color 0.3s ease;
}

.agency-item__num {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	line-height: 1;
	opacity: 0.5;
}

.agency-item__title {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere; /* lange woorden als "Zelfdeterminatietheorie" op telefoons */
	hyphens: auto;
	font-size: clamp(1.375rem, 2vw, 1.95rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.agency-item__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.agency-item__icon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.agency-item__icon-v {
	transform-origin: center;
	transition: transform 0.3s ease;
}

/* Open item: nummer, titel en icoon in het accent, gelijk met de blauwe driehoek */
.agency-item--open .agency-item__header {
	color: var(--accent);
}

.agency-item--open .agency-item__icon {
	opacity: 1;
}

.agency-item--open .agency-item__icon-v {
	transform: scaleY(0);
}

.agency-item__header:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.agency-item__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.agency-item--open .agency-item__body {
	grid-template-rows: 1fr;
}

.agency-item__body-inner {
	overflow: hidden;
}

.agency-item__body-inner p {
	padding-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
}

/* Driehoek: crème vlakken op de witte kaart, de actieve is blauw. De witte rand geeft de naad. */
.agency__diagram {
	width: 100%;
	max-width: 37.5rem;
	justify-self: center;
}

.agency__diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

.agency-driehoek {
	fill: var(--paper);
	stroke: var(--white);
	stroke-width: 6;
	stroke-linejoin: round;
	transition: fill 0.45s ease;
}

.agency-label {
	font-family: var(--font-body);
	font-size: 1.5rem;
	fill: var(--ink);
	transition: fill 0.45s ease;
}

.agency__diagram[data-active="persoonlijkheid"] .agency-driehoek[data-part="persoonlijkheid"],
.agency__diagram[data-active="motivatie"] .agency-driehoek[data-part="motivatie"],
.agency__diagram[data-active="waarden"] .agency-driehoek[data-part="waarden"] {
	fill: var(--accent);
}

.agency__diagram[data-active="persoonlijkheid"] .agency-label[data-part="persoonlijkheid"],
.agency__diagram[data-active="motivatie"] .agency-label[data-part="motivatie"],
.agency__diagram[data-active="waarden"] .agency-label[data-part="waarden"] {
	fill: var(--white);
}

@media (max-width: 64rem) {
	.agency__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.agency__diagram {
		max-width: 30rem;
	}
}

@media (max-width: 48rem) {
	/* SVG-tekst schaalt mee met de driehoek; op telefoons groter zodat hij leesbaar blijft */
	.agency-label {
		font-size: 1.75rem;
	}
}

/* --- Citaat-banner -------------------------------------------------------- */

.citaat {
	margin-top: var(--sectie);
}

.citaat__vlak {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(26rem, 42vw, 51.25rem);
	overflow: hidden;
	border-radius: var(--r-groot);
	color: var(--white);
	isolation: isolate;
}

.citaat__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.citaat__vlak::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.2);
}

.citaat__inhoud {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.25rem);
	padding: 3rem clamp(1.5rem, 5.5vw, 6.75rem);
}

.citaat__inhoud .accolade {
	--acc: clamp(2.25rem, 3.6vw, 4.25rem);
}

.citaat__tekst {
	max-width: 39rem;
	font-size: clamp(2rem, 3vw, 3.125rem);
	line-height: 1.2;
}

.citaat__tekst em {
	display: block;
}

/* --- Ervaringen (testimonial + carousel) ---------------------------------- */

.ervaringen {
	margin-top: 2.25rem;
}

.ervaringen__vlak {
	padding: 2.5rem;
	border-radius: var(--r-groot);
	background: #F9F9F7;
}

.testimonial {
	position: relative;
	margin: 0;
}

.testimonial__foto {
	width: 100%;
	height: clamp(22rem, 38vw, 45.875rem);
	object-fit: cover;
	border-radius: var(--r-midden);
}

.testimonial__kaart {
	position: absolute;
	right: clamp(1.5rem, 4.4vw, 5.25rem);
	bottom: clamp(-3rem, -1.5vw, -1rem);
	display: flex;
	flex-direction: column;
	width: min(31.875rem, 45%);
	min-height: 31.875rem;
	padding: 2.25rem 1.5rem;
	border-radius: var(--r-klein);
	background: var(--paper);
}

.testimonial__quote {
	margin: 1.5rem 0 2.5rem;
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 1.4vw, 1.5rem);
	line-height: 1.3;
}

.testimonial__auteur {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: auto;
	font-family: var(--font-mono);
	font-size: 1rem;
	line-height: 1.4;
}

.testimonial__auteur img {
	width: 5.625rem;
	height: 5.625rem;
	border-radius: 50%;
	object-fit: cover;
}

.ervaringen__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin: 5rem 0 2.5rem;
	padding-left: 2.5rem;
}

.pijlen {
	display: flex;
	gap: 0.6rem;
}

.pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--knop-h);
	height: var(--knop-h);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.pijl svg {
	width: 1.25rem;
	height: 1.25rem;
}

.pijl--terug {
	background: var(--paper);
	color: var(--accent);
}

.pijl--terug svg {
	transform: rotate(180deg);
}

.pijl:disabled {
	opacity: 0.45;
	cursor: default;
}

.ervaringen__rij {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 1.65rem) / 4);
	gap: 1.65rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ervaringen__rij::-webkit-scrollbar {
	display: none;
}

.ervaring {
	display: flex;
	flex-direction: column;
	min-height: 22.5rem;
	padding: 2.5rem 2.75rem;
	border-radius: var(--r-midden);
	background: var(--paper);
	scroll-snap-align: start;
}

.ervaring__sterren {
	display: flex;
	gap: 0.15rem;
	color: #00B975;
}

.ervaring__sterren svg {
	width: 1.2rem;
	height: 1.2rem;
}

.ervaring__quote {
	margin: 1.75rem 0 2rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
}

.ervaring__naam {
	margin-top: auto;
	font-size: 0.9375rem;
	line-height: 1.75;
}

/* --- Trainingen ----------------------------------------------------------- */

.trainingen {
	margin-top: var(--sectie);
}

.trainingen__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
	margin-top: 3rem;
}

.training {
	padding: 2rem 2rem 2.25rem;
	border-radius: var(--r-midden);
	color: var(--ink);
}

.training--een { background: #DEE2FE; }
.training--drie { background: #EFE6F8; }

.training__kop {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.training__foto {
	width: 10rem;
	height: 10rem;
	border-radius: 1.25rem;
	object-fit: cover;
}

.training__kop .accolade {
	width: 2.25rem;
	height: 9rem;
	margin-right: -0.75rem;
}

.training__titel {
	font-size: clamp(2.5rem, 3.1vw, 3.75rem);
	line-height: 1.05;
}

.training__body {
	max-width: 34rem;
	margin: 2.25rem 0 0 15.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.training__body .vinkjes {
	margin: 1.25rem 0 2rem;
}

.training__editie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	margin-bottom: 1.25rem;
}

.training__badge {
	display: inline-flex;
	align-items: center;
	min-height: 2.625rem;
	padding: 0 1.4rem;
	border-radius: 0.625rem;
	background: var(--trait-eerlijkheid);
	font-weight: 600;
}

/* --- Dagen (driedaagse, wisselt met scrollen) ------------------------------ */

.dagen {
	margin-top: var(--sectie);
}

.dagen__vlak {
	padding: clamp(3rem, 6vw, 5rem) 0 2.5rem;
	border-radius: var(--r-groot);
	background: #EFE6F8;
}

.container-in {
	padding-inline: clamp(1.5rem, 4.4vw, 5rem);
}

.dagen .kop em {
	display: inline;
}

.dagen__spoor {
	margin-top: 2.5rem;
	padding-inline: clamp(1rem, 4.4vw, 5rem);
}

.dagen__kaart {
	display: grid;
	grid-template-columns: minmax(0, 813fr) minmax(0, 867fr);
	gap: 0;
	border-radius: var(--r-midden);
	background: #F4EDFA;
	overflow: hidden;
}

.dagen__foto {
	width: 100%;
	height: 100%;
	min-height: 30rem;
	max-height: 53.75rem;
	object-fit: cover;
	border-radius: var(--r-midden);
}

.dagen__stapel {
	display: grid;
	gap: 3rem;
	padding: 2.5rem clamp(1.5rem, 4.4vw, 5rem);
}

.dag__teller {
	margin-bottom: clamp(2.5rem, 6vw, 7rem);
	font-family: var(--font-mono);
	font-size: 1rem;
	color: var(--accent);
}

.dag__titel {
	margin-bottom: 2rem;
	font-size: clamp(2.25rem, 2.6vw, 3.125rem);
	font-weight: 500;
	line-height: 1.1;
}

.dag__titel em {
	display: block;
}

.dag .lopend {
	max-width: 28rem;
}

.dag .lopend p + p {
	margin-top: 1.6em;
}

/* Scrollmodus (JS): de kaart blijft staan en dag 2 en 3 komen langs met scrollen */
.dagen--scroll .dagen__spoor {
	height: calc(100vh + 2 * 80vh);
}

.dagen--scroll .dagen__sticky {
	position: sticky;
	top: max(calc(var(--header-vast) + 1.5rem), calc(50vh - 26.875rem));
}

.dagen--scroll .dagen__kaart {
	height: min(53.75rem, calc(100vh - 3rem));
}

.dagen--scroll .dagen__stapel {
	grid-template-areas: 'dag';
	align-content: start;
}

.dagen--scroll .dag {
	grid-area: dag;
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.45s ease, transform 0.45s ease;
	visibility: hidden;
}

.dagen--scroll .dag.is-actief {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* --- Galerij (slider met beelden) ----------------------------------------- */

.galerij {
	--rij: clamp(9rem, 15.1vw, 18.125rem);
	--gat: 1.25rem;
	margin-top: 2.5rem;
	overflow: hidden;
}

.galerij__spoor {
	display: flex;
	width: max-content;
	animation: pnl-marquee 60s linear infinite;
}

.galerij:hover .galerij__spoor {
	animation-play-state: paused;
}

.galerij__set {
	display: flex;
	gap: var(--gat);
	padding-right: var(--gat);
}

.galerij img {
	height: calc(2 * var(--rij) + var(--gat));
	object-fit: cover;
	object-position: 50% 75%; /* groepsfoto's: mensen staan in de onderste helft */
	border-radius: var(--r-midden);
}

.galerij__smal { width: calc(var(--rij) * 0.862); }
.galerij__hoog { width: calc(var(--rij) * 1.034); }
.galerij__breed { width: calc(var(--rij) * 1.334); }

/* Blok van twee rijen: boven breed + smal, onder smal + breed (zoals in het ontwerp) */
.galerij__stapel {
	display: grid;
	grid-template-columns: calc(var(--rij) * 1.034) calc(var(--rij) * 1.034 - var(--gat)) calc(var(--rij) * 1.034);
	grid-template-rows: var(--rij) var(--rij);
	gap: var(--gat);
}

.galerij .galerij__stapel img {
	width: 100%;
	height: 100%;
}

.galerij__stapel img:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.galerij__stapel img:nth-child(2) { grid-column: 3; grid-row: 1; }
.galerij__stapel img:nth-child(3) { grid-column: 1; grid-row: 2; }
.galerij__stapel img:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }

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

.faq {
	margin-top: var(--sectie);
}

.faq__vlak {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem 3rem;
	padding: clamp(2rem, 4.2vw, 4.75rem) 2.5rem 1.75rem;
	border-radius: var(--r-groot);
	background: #DEE2FE;
	color: var(--ink);
}

.faq__links .kop {
	max-width: 32rem;
	margin: 0 0 3rem 2.5rem;
	color: var(--ink);
}

.faq__foto {
	width: 100%;
	height: clamp(14rem, 16.5vw, 19.75rem);
	object-fit: cover;
	border-radius: var(--r-midden);
}

.faq__rechts {
	max-width: 32rem;
	padding-top: 1.25rem;
}

.faq__lijst {
	display: grid;
	gap: 1rem;
	margin-top: 3rem;
}

.faq__item {
	border-radius: var(--r-klein);
	background: var(--white);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.125rem;
	padding: 0.75rem 1.5rem 0.75rem 2.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__plus {
	position: relative;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
}

.faq__plus::before,
.faq__plus::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.faq__plus::after {
	transform: rotate(90deg);
}

.faq__item[open] .faq__plus::after {
	transform: rotate(0deg);
}

.faq__item p {
	padding: 0 2.25rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Afsluiter ------------------------------------------------------------ */

.afsluiter {
	margin-top: var(--sectie);
	text-align: center;
	color: var(--ink);
}

.afsluiter .kop {
	color: var(--ink);
}

.afsluiter p {
	margin: 1.75rem 0 2.5rem;
	font-size: 1.125rem;
}

/* --- Slot (haal meer uit jezelf) ------------------------------------------ */

.slot {
	margin-top: var(--sectie);
}

.slot__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 32.7rem);
	gap: 3rem 4rem;
	align-items: center;
	max-width: 80rem;
}

.slot .kop em {
	display: block;
}

.slot .vinkjes {
	margin: 3rem 0 2.75rem;
}

.slot__foto {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-midden);
}

/* --- Responsief ----------------------------------------------------------- */

@media (max-width: 64rem) {
	.hero__vlak::before {
		background: rgba(0, 0, 0, 0.45);
	}

	.sectie__twee,
	.faq__vlak,
	.slot__grid,
	.cijfers__grid,
	.inzicht__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sectie__twee > .lopend {
		padding-top: 0;
	}

	.cijfers__foto {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.cijfers__rechts {
		padding: 0 1rem;
	}

	.cijfers__tekst {
		margin-right: 0;
	}

	.inzicht__foto {
		max-height: 28rem;
	}

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

	.vraag {
		min-height: 0;
	}

	.vraag__titel {
		padding-top: 2.5rem;
	}

	.reden {
		min-height: 0;
	}

	.reden__titel {
		margin-bottom: 1.5rem;
	}

	.testimonial__kaart {
		position: relative;
		right: auto;
		bottom: auto;
		width: auto;
		min-height: 0;
		margin: -4rem 1rem 0;
	}

	.ervaringen__rij {
		grid-auto-columns: calc((100% - 1.65rem) / 2);
	}

	.training__body {
		margin-left: 0;
	}

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

	.dagen__foto {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.faq__links .kop {
		margin-left: 0;
	}

	.slot__foto {
		max-width: 32rem;
		height: auto; /* anders wint height="734" van de aspect-ratio en wordt de foto heel hoog */
	}
}

@media (max-width: 48rem) {
	.hero__vlak {
		align-items: flex-end;
		min-height: 36rem;
	}

	.hero__vlak::before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.35));
	}

	.citaat__vlak::before {
		background: rgba(0, 0, 0, 0.45);
	}

	.hero__inhoud {
		align-items: stretch;
		gap: 0.75rem;
		padding: 2rem 1rem;
	}

	.hero__inhoud .accolade {
		width: 1.25rem;
	}

	.knop__label {
		padding: 0 1.1rem;
	}

	.hero__tekst {
		margin: 1.25rem 0 1.75rem;
	}

	.cijfers__lijst {
		gap: 0 1.25rem;
	}

	.cijfer {
		padding-bottom: 2rem;
	}

	.cijfer__getal {
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.cijfer__label {
		font-size: 0.875rem;
	}

	.probleem__vlak {
		padding-top: 2.5rem;
	}

	.reden {
		flex-direction: column;
		gap: 1rem;
	}

	.ervaringen__vlak {
		padding: 1rem;
	}

	.ervaringen__kop {
		margin-top: 3rem;
		padding-left: 0.5rem;
	}

	.ervaringen__rij {
		grid-auto-columns: 85%;
		gap: 1rem;
	}

	.ervaring {
		min-height: 18rem;
		padding: 2rem 1.75rem;
	}

	.training {
		padding: 1.25rem 1.25rem 1.75rem;
	}

	.training__kop {
		gap: 1rem;
	}

	.training__foto {
		display: none;
	}

	.training__kop .accolade {
		width: 1.4rem;
		height: 5.5rem;
		margin-right: -0.25rem;
	}

	.training__titel {
		font-size: 2.25rem;
	}

	.training__body {
		margin-top: 1.5rem;
	}

	.dagen__vlak {
		padding-bottom: 1rem;
	}

	.dagen__spoor {
		padding-inline: 0.75rem;
	}

	.dagen__stapel {
		padding: 2rem 1.25rem;
	}

	.faq__vlak {
		padding: 2rem 1rem 1rem;
	}

	.faq__item summary {
		padding-left: 1.5rem;
	}

	.faq__item p {
		padding-inline: 1.5rem;
	}
}

/* ==========================================================================
   Footer (donker vlak met afgeronde hoeken)
   ========================================================================== */

.site-footer {
	margin: var(--sectie) 0 2.5rem;
	color: var(--white);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.site-footer__vlak {
	padding: 4rem var(--vlak-pad) 1.5rem;
	border-radius: var(--r-groot);
	background: var(--ink);
}

.site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 54rem) minmax(0, 36rem);
	justify-content: space-between;
	gap: 3rem 4rem;
}

.site-footer__logo {
	display: block;
	max-width: 53rem;
	color: var(--paper);
}

.site-footer__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.club {
	margin-top: 2.25rem;
}

.club__titel,
.site-footer__kop {
	margin-bottom: 1rem;
	font-size: 1.375rem;
	line-height: 1.3;
}

.club__velden {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 54rem;
}

.club__velden input {
	flex: 1 1 14rem;
	height: 3.125rem;
	padding: 0 1rem;
	border: 0;
	border-radius: 0.75rem /* zelfde als de velden op Contact */;
	background: var(--white);
	color: var(--ink);
	font: inherit;
}

.club__velden button {
	border: 0;
	background: var(--accent);
	color: var(--white);
	cursor: pointer;
}

.club__velden button:hover {
	background: var(--accent-hover);
}

.club__akkoord {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	font-size: 0.8125rem;
}

.club__akkoord input {
	width: 0.85rem;
	height: 0.85rem;
	margin: 0;
	accent-color: var(--accent);
}

.club__akkoord a {
	text-decoration: underline;
}

.club__melding {
	margin-top: 0.75rem;
	color: var(--trait-eerlijkheid);
}

.club__melding--fout {
	color: var(--trait-emotionaliteit);
}

.site-footer a.site-footer__rmh:hover {
	opacity: 0.9;
}

.site-footer__onder {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 5rem;
	margin-top: 1.75rem;
}

.site-footer__social {
	display: flex;
	gap: 1rem;
}

.site-footer__social svg {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
}

.site-footer__rmh {
	display: inline-block;
	padding: 0.4rem 0.6rem;
	border-radius: 0.625rem;
	background: var(--white);
}

.site-footer__rmh img {
	width: 5.5rem;
	height: auto;
}

.site-footer__menus {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 2rem 2.5rem;
	align-content: start;
	padding-top: 0.5rem;
}

.site-footer__menus > div:last-child {
	grid-column: 1 / -1;
}

.site-footer__title {
	margin-bottom: 1.25rem;
	white-space: nowrap;
	font-size: 1.125rem;
	color: var(--accent);
}

.site-footer__links {
	display: grid;
	gap: 0.75rem; /* elk item leest als een eigen link */
	font-size: 0.9375rem;
	line-height: 1.3;
}

.site-footer__links a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Hover in het blauw, net als het logo erboven: blauw is de interactiekleur, groen is een traitkleur */
.site-footer a:hover {
	color: var(--accent);
}

/* Laatste artikelen: titel (max. twee regels) met de datum eronder, zodat het als blog leest */
.site-footer__artikelen {
	display: grid;
	gap: 1rem;
}

.footer-artikel {
	display: grid;
	gap: 0.2rem;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.footer-artikel__titel {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color 0.2s ease;
}

.footer-artikel__datum {
	font-size: 0.8125rem;
	opacity: 0.55;
}

.site-footer a.footer-artikel:hover {
	color: inherit;
}

.footer-artikel:hover .footer-artikel__titel,
.footer-artikel:focus-visible .footer-artikel__titel {
	color: var(--accent);
}

.footer-artikel__alle {
	font-size: 0.9375rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Laatste artikelen in een eigen rij, twee naast elkaar: houdt de footer laag */
.site-footer__artikelen {
	grid-template-columns: repeat(2, minmax(0, 18rem));
	column-gap: 2rem;
}

/* Logo: net als in de header helemaal blauw, zoals ".nl" */
.site-footer a.site-footer__logo {
	transition: color 0.2s ease;
}

.site-footer a.site-footer__logo:hover,
.site-footer a.site-footer__logo:focus-visible {
	color: var(--accent);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-top: 4.5rem;
	font-size: 0.8125rem;
}

.site-footer__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

@media (max-width: 64rem) {
	.site-footer__main {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 48rem) {
	:root {
		--sectie: 4rem;
		--rand: 1.5rem; /* telefoons: vaste marge voor tekst; kaarten (.smal) gaan tot de rand van de brede vlakken */
	}

	.site-footer {
		margin-bottom: 0.75rem;
	}

	.site-footer__vlak {
		padding-top: 2.5rem;
	}

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

	.site-footer__menus > div:last-child {
		grid-column: 1 / -1;
	}

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

	.site-footer__links a {
		white-space: normal;
	}


	.site-footer__bottom {
		flex-direction: column;
		margin-top: 3rem;
	}
}

/* ==========================================================================
   Overige pagina's (tijdelijk, tot de paginatemplates in v2 gebouwd zijn)
   ========================================================================== */

body:not(.home) #main-content > article {
	width: var(--inhoud);
	margin: 2rem auto 0;
}

/* ==========================================================================
   Eendaagse training (v4, page-eendaagse-leerervaring.php)
   Figma "Persoonlijkheid.nl", frame "Trainingen" (206:3690), ontwerpbreedte 1920.
   ========================================================================== */

.ed-smal {
	width: var(--inhoud); /* zelfde inhoudslijn als de rest van de site (was 1320 uit het trainingen-ontwerp) */
	margin-inline: auto;
}

.ed-editie {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-style: italic;
}

.ed-sterren {
	color: #F4B860;
	letter-spacing: 0.1em;
}

/* Vet in de sans (de theme-<strong> is serif cursief) */
.ed-vet {
	font-weight: 700;
}

.ed-subkop {
	font-size: clamp(1.25rem, 1.3vw, 1.5625rem);
	font-weight: 700;
	line-height: 1.4;
}

/* --- Hero: foto met lichte kaart linksonder ------------------------------- */

.ed-hero__vlak {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(38rem, 48vw, 58rem);
	padding: clamp(1.5rem, 5.2vw, 6.25rem) var(--vlak-pad);
	overflow: hidden;
	border-radius: var(--r-groot);
	isolation: isolate;
}

.ed-hero__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 30%;
}

.ed-hero__vlak::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.15);
}

.ed-hero__kaart {
	width: min(36rem, 100%);
	padding: 3.5rem 2.5rem 2.5rem;
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
	font-size: 1.125rem;
	line-height: 1.4;
}

.ed-hero__kop {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.ed-hero__kop .accolade {
	--acc: 1.75rem;
}

.ed-hero__titel {
	font-size: clamp(2.5rem, 3.1vw, 3.75rem);
	line-height: 1;
	letter-spacing: -0.01em;
}

.ed-hero__kaart .vinkjes {
	margin: 1rem 0 1.75rem;
}

.ed-hero__kaart .ed-editie,
.ed-vraagstuk .ed-editie {
	margin-bottom: 1rem;
}

.ed-hero__knop {
	margin-top: 1.75rem;
}

/* --- Intro ---------------------------------------------------------------- */

.ed-intro {
	margin-top: var(--sectie);
}

.ed-intro__statement {
	max-width: 73rem;
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 2.6vw, 3.125rem);
	line-height: 1.3;
}

/* --- Ongemakkelijke waarheden: foto links, tekst rechts ------------------- */

.ed-ongemak {
	margin-top: var(--sectie);
}

.ed-ongemak__grid {
	display: grid;
	grid-template-columns: minmax(0, 790fr) minmax(0, 1050fr);
	align-items: start;
}

.ed-ongemak__foto {
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--r-groot);
}

.ed-ongemak__tekst {
	padding-left: clamp(2rem, 7.8vw, 9.375rem);
	font-size: 1rem;
	line-height: 1.6;
}

.ed-ongemak__tekst > * {
	max-width: 38.75rem;
}

.ed-ongemak__tekst > p,
.ed-bullets {
	margin-top: 1.4em;
}

.ed-bullets {
	padding-left: 1.25rem;
	list-style: disc;
}

.ed-na {
	margin: 2.5rem 0 3.5rem;
	padding: 2rem 1.75rem;
	border-radius: var(--r-klein);
	background: var(--paper);
}

.ed-na .vinkjes {
	margin: 1.25rem 0 1.5rem;
	font-weight: 400;
}

.ed-na__score {
	font-weight: 600;
	color: var(--ink);
}

.ed-inschrijven {
	padding-left: 1.5rem;
}

/* --- Blauwe banner -------------------------------------------------------- */

.ed-banner {
	margin-top: var(--sectie);
}

.ed-banner__vlak {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.6vw, 1.75rem);
	padding: clamp(2.5rem, 5vw, 6rem) clamp(1.5rem, 5.5vw, 6.5rem);
	border-radius: var(--r-groot);
	background: var(--accent);
	color: var(--white);
}

.ed-banner__vlak .accolade {
	--acc: clamp(1.5rem, 2vw, 2.5rem);
	color: var(--white);
}

.ed-banner__tekst {
	font-size: clamp(2rem, 3.1vw, 3.75rem);
	line-height: 1.15;
}

.ed-banner__tekst em {
	display: block;
}

/* --- Wat deelnemers zeggen ------------------------------------------------ */

.ed-reviews {
	margin-top: var(--sectie);
}

/* Bronregel onder de reviews: dezelfde scores als in de topbar, gecentreerd */
.review-bronnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	margin-top: 2.5rem;
}

.review-bronnen .topbar__tp {
	flex: none;
	margin-inline: -1rem;
}

.review-bronnen .topbar__google {
	display: inline-flex;
	border-left-color: var(--track);
}

@media (max-width: 40rem) {
	.review-bronnen {
		flex-direction: column;
	}

	.review-bronnen .topbar__google {
		padding-left: 0;
		border-left: 0;
	}
}

.ed-review {
	display: flex;
	flex-direction: column;
	padding: 2.5rem 2.25rem;
	border-radius: var(--r-midden);
	background: var(--paper);
}

.ed-review__quote {
	margin: 1.5rem 0 2.5rem;
	font-family: var(--font-serif);
	font-size: 1.125rem;
	line-height: 1.6;
}

.ed-review__auteur {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	line-height: 1.5;
}

.ed-review__auteur img {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	object-fit: cover;
}

.ed-reviews + .galerij {
	margin-top: var(--sectie);
}

/* --- Trainers ------------------------------------------------------------- */

.ed-trainers {
	margin-top: var(--sectie);
}

.ed-trainers__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem;
	margin-top: 2.5rem;
}

.ed-trainer {
	padding: 1.4rem 1.4rem 2.5rem;
	border-radius: var(--r-midden);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.ed-trainer--blauw { background: var(--accent); color: var(--white); }
.ed-trainer--donker { background: var(--ink); color: var(--white); }
.ed-trainer--licht { background: var(--paper); color: var(--ink); }

.ed-trainer__foto {
	width: 10rem;
	height: 10rem;
	object-fit: cover;
	border-radius: var(--r-klein);
}

.ed-trainer__kop {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin: 2rem 0 1.25rem;
	padding-left: 1.1rem;
}

.ed-trainer__kop .accolade {
	--acc: 1rem;
	color: currentColor;
}

.ed-trainer--licht .ed-trainer__kop {
	color: var(--accent);
}

.ed-trainer__naam {
	font-size: clamp(1.75rem, 2vw, 2.375rem);
	line-height: 1;
}

.ed-trainer p {
	padding-inline: 1.1rem;
}

.ed-trainer p + p {
	margin-top: 1.2em;
}

/* --- Testimonial (los, zonder het witte vlak van de homepage) -------------- */

.ed-testimonial {
	margin-top: var(--sectie);
}

.ed-testimonial .testimonial {
	margin-inline: auto; /* .testimonial zet margin op 0, .breed heeft auto nodig */
}

.ed-testimonial .testimonial__kaart {
	top: clamp(1.5rem, 4.9vw, 5.9rem);
	bottom: auto;
}

/* --- Wat is jouw psychologische vraagstuk? ------------------------------- */

.ed-vraagstuk {
	margin-top: var(--sectie);
}

.ed-vraagstuk__grid {
	display: grid;
	grid-template-columns: minmax(0, 32rem) minmax(0, 38.75rem);
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
}

.ed-vraagstuk .lopend {
	margin: 2.5rem 0 2.25rem;
}

.ed-vraagstuk__fotos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	aspect-ratio: 1;
}

.ed-vraagstuk__fotos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-midden);
}

.ed-vraagstuk__fotos img:first-child {
	grid-row: 1 / 3;
}

@media (max-width: 64rem) {
	.ed-ongemak__grid,
	.ed-vraagstuk__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ed-ongemak__foto {
		max-height: 32rem;
	}

	.ed-ongemak__tekst {
		padding: 2.5rem clamp(0rem, 3vw, 2rem) 0;
	}

	.ed-trainers__lijst {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}

	.ed-vraagstuk__fotos {
		max-width: 38.75rem;
	}

	/* De kaart staat hier onder de foto (v3-regel), niet erin */
	.ed-testimonial .testimonial__kaart {
		top: auto;
	}
}

@media (max-width: 48rem) {
	/* Hero: foto boven, kaart eronder (schuift iets over de foto) */
	.ed-hero__vlak {
		display: block;
		min-height: 0;
		padding: 0;
		overflow: visible;
		border-radius: 0;
	}

	.ed-hero__vlak::before {
		display: none;
	}

	.ed-hero__foto {
		position: static;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: var(--r-groot);
	}

	.ed-hero__kaart {
		position: relative;
		width: auto;
		margin: -3rem 0.75rem 0;
		padding: 2.5rem 1.5rem 2rem;
	}

	.ed-review {
		padding: 2rem 1.5rem;
	}

	.ed-inschrijven {
		padding-left: 0;
	}

	.ed-banner__vlak {
		padding: 2.5rem 1.25rem;
	}

}

/* ==========================================================================
   Driedaagse training (v4, page-ontwikkelingstraject.php), bouwt op de ed-* blokken
   ========================================================================== */

/* Feitenlijst (datum, locatie, ontzorgd) in hero en editiekaart */
.dd-feiten {
	display: grid;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
}

.dd-feiten > div {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 1rem;
}

.dd-feiten dt {
	font-weight: 700;
}

.dd-feiten dd {
	margin: 0;
}

.dd-waarom {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

.dd-waarom li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.dd-waarom .vink {
	margin-top: 0.2rem;
}

.dd-helderheid {
	margin-top: 1.5rem;
}

.dd-helderheid .aanpak__grid {
	margin-top: 0;
}

.dd-helderheid .reden {
	min-height: 0;
	align-items: center;
}

.dd-reviews__sub {
	margin-top: 1.5rem;
}

.dd-succes {
	margin-top: var(--sectie);
}

/* Cursief deel loopt door na "is", geen witruimte achter de eerste regel */
.dd-succes .kop em {
	display: inline;
}

/* Drie levels: kop links, tekst rechts, op een licht vlak */
.dd-levels {
	margin-top: var(--sectie);
}

.dd-levels__lijst {
	display: grid;
	gap: 1rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.dd-level {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem 4rem;
	padding: clamp(2rem, 4.2vw, 5rem);
	border-radius: var(--r-groot);
	background: var(--paper);
	color: var(--ink);
}

.dd-level:nth-child(2) {
	background: #DEE2FE;
}

.dd-level:nth-child(3) {
	background: var(--ink);
	color: var(--white);
}

.dd-level__titel {
	max-width: 30rem;
	font-size: clamp(1.75rem, 2.4vw, 2.75rem);
	line-height: 1.1;
}

.dd-level:nth-child(3) .eyebrow {
	color: var(--trait-eerlijkheid);
}

.dd-level__tekst {
	max-width: 38rem;
	line-height: 1.6;
}

.dd-level__tekst p + p {
	margin-top: 1.1em;
}

.dd-trainers__lijst {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 54rem;
}

.dd-editie {
	margin: 2.5rem 0 0;
}

.dd-editie .ed-subkop {
	margin-top: 0.5rem;
}

.dd-editie .dd-feiten {
	margin-bottom: 1.75rem;
}

.dd-faq__intro {
	max-width: 32rem;
	margin: 0 0 0 2.5rem; /* zelfde inspringing als .faq__links .kop */
}

@media (max-width: 64rem) {
	.dd-faq__intro {
		margin-left: 0;
	}
}

/* Aanvraagformulier: onderaan de pagina, met JS als venster */
.dd-aanvraag {
	margin-top: var(--sectie);
}

.dd-aanvraag__vlak {
	position: relative;
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem);
	border-radius: var(--r-groot);
	background: var(--paper);
	color: var(--ink);
}

/* Als venster wit (op de donkere achtergrond); de velden dan crème, op de pagina wit */
.dd-aanvraag.is-venster .dd-aanvraag__vlak {
	background: var(--white);
}

.dd-aanvraag:not(.is-venster) .dd-form input,
.dd-aanvraag:not(.is-venster) .dd-form textarea {
	background: var(--white);
}

.dd-aanvraag__vlak .kop em {
	display: block;
}

.dd-aanvraag__vlak > .lopend {
	margin: 1rem 0 1.75rem;
}

.dd-aanvraag__fout {
	margin-bottom: 1rem;
	font-weight: 600;
	color: #B42318;
}

.dd-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.dd-form label {
	display: grid;
	gap: 0.4rem;
	font-weight: 600;
}

.dd-form input,
.dd-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--track);
	border-radius: 0.75rem;
	background: var(--paper);
	font: inherit;
	font-weight: 400;
	color: var(--ink);
}

.dd-form input:focus-visible,
.dd-form textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.dd-form .knop {
	justify-self: start;
	margin-top: 0.5rem;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: 1.125rem;
}

.dd-form__honing {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dd-aanvraag__sluit {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	border: 0;
	background: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}

.dd-aanvraag.is-venster {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 1rem;
	overflow-y: auto;
	background: rgba(11, 51, 66, 0.6);
}

.dd-aanvraag.is-venster .ed-smal {
	width: 100%;
}

.aanvraag-open {
	overflow: hidden;
}

@media (max-width: 64rem) {
	.dd-level {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 48rem) {
	.dd-trainers__lijst {
		grid-template-columns: minmax(0, 1fr);
	}

	.dd-feiten > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Lange knopteksten mogen afbreken op smalle schermen */
	.dd-form .knop,
	.dd-editie .knop {
		white-space: normal;
		max-width: 100%;
	}

	.dd-form .knop__label,
	.dd-editie .knop__label {
		height: auto;
		min-height: var(--knop-h);
		padding-block: 0.6rem;
		line-height: 1.25;
	}
}

/* ==========================================================================
   Testpagina's (v4, parts/testpagina.php): persoonlijkheids-, waarden- en motivatietest
   ========================================================================== */

/* Bredere kaart: "Persoonlijkheidstest" past anders niet op een regel */
@media (min-width: 48.0625rem) {
	.tp-hero .ed-hero__kaart {
		width: min(46rem, 100%);
	}
}

.tp-hero__kop {
	margin-bottom: 0.75rem;
	font-family: var(--font-serif);
	font-size: clamp(1.375rem, 1.6vw, 1.75rem);
	line-height: 1.25;
}

.tp-vertrouwd {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
}

/* Rapport-mockup op een blauw vlak (vervangt de foto in het ed-ongemak-blok) */
.tp-rapport {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: clamp(1rem, 2.2vw, 2rem);
	border-radius: var(--r-groot);
	background: var(--paper);
}

.tp-rapport img {
	width: 100%;
	height: auto;
}

.ed-ongemak__tekst > .kop {
	margin-bottom: 0.5rem;
}

.tp-voordelen {
	margin-top: var(--sectie);
}

.tp-voordelen .container + .aanpak__grid {
	margin-top: 2.5rem;
}

.tp-voordelen .reden {
	min-height: 0;
}

.tp-banner__tekst {
	max-width: 52rem;
	margin-top: 1.25rem;
	font-size: clamp(1rem, 1.1vw, 1.1875rem);
	line-height: 1.6;
}

.tp-banner__tekst p + p {
	margin-top: 1em;
}

/* Hoe werkt het: drie stappen */
.tp-stappen {
	margin-top: var(--sectie);
}

.tp-stappen__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.tp-stap {
	padding: 2.25rem 2rem 2.5rem;
	border-radius: var(--r-midden);
	background: var(--paper);
	line-height: 1.6;
}

.tp-stap .reden__nr {
	display: block;
	margin-bottom: 1.5rem;
}

.tp-stap .ed-subkop {
	margin-bottom: 0.75rem;
}

/* Voor wie wel / niet */
.tp-voorwie {
	margin-top: var(--sectie);
}

.tp-voorwie__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem;
	margin-top: 2.5rem;
}

.tp-voorwie__kaart {
	padding: 2.5rem 2.25rem;
	border-radius: var(--r-midden);
	line-height: 1.55;
}

.tp-voorwie__kaart--niet {
	background: var(--paper);
	color: var(--ink);
}

.tp-voorwie__kaart--wel {
	background: var(--ink);
	color: var(--white);
}

.tp-voorwie__kaart .ed-subkop {
	margin-bottom: 1.25rem;
}

.tp-voorwie__kaart--wel .vinkjes {
	color: var(--white);
	font-weight: 400;
}

.tp-voorwie__kaart--wel .vink {
	color: var(--trait-eerlijkheid);
}

.tp-kruisjes {
	display: grid;
	gap: 0.6rem;
}

.tp-kruisjes li {
	position: relative;
	padding-left: 1.75rem;
}

.tp-kruisjes li::before {
	content: '\00d7';
	position: absolute;
	left: 0.2rem;
	top: -0.1rem;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--sub-fill);
}

.vinkjes li > span {
	min-width: 0;
}

.tp-voorwie .vinkjes li,
.tp-pakket .vinkjes li {
	align-items: flex-start;
}

.tp-voorwie .vink,
.tp-pakket .vink {
	margin-top: 0.25rem;
}

/* Pakketten */
.tp-pakketten {
	margin-top: var(--sectie);
	scroll-margin-top: 2rem;
}

.tp-pakketten__intro {
	max-width: 40rem;
	margin-top: 1.25rem;
}

.tp-pakketten__lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem;
	margin-top: 2.5rem;
}

.tp-pakket {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.75rem 2.5rem 2.25rem;
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
	line-height: 1.55;
}

.tp-pakket--populair {
	box-shadow: inset 0 0 0 2px var(--accent);
}

.tp-pakket__badge {
	position: absolute;
	top: -1.3rem;
	right: 2rem;
}

.tp-pakket__titel {
	max-width: 26rem;
	font-size: clamp(1.25rem, 1.5vw, 1.625rem);
	line-height: 1.25;
}

.tp-pakket__prijs {
	margin: 1rem 0 0.5rem;
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 3.2vw, 3.5rem);
	line-height: 1;
	color: var(--accent);
}

.tp-pakket__intro {
	margin-bottom: 1rem;
}

.tp-pakket .vinkjes {
	font-weight: 400;
}

.tp-pakket__knop {
	margin-top: auto;
	padding-top: 2rem;
}

.tp-pakket__noot {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--ink);
	opacity: 0.75;
}

/* Ontdek jezelf verder (alleen persoonlijkheidstest) */
.tp-verder {
	margin-top: var(--sectie);
}

.tp-verder__rapport {
	width: 12rem;
	height: auto;
	margin: -0.5rem 0 1rem -0.75rem;
}

.tp-verder .tp-pakket__knop {
	padding-top: 1.5rem;
}

.tp-slot .vinkjes {
	margin: 2rem 0 0;
}

.tp-rapport--slot {
	aspect-ratio: auto;
}

@media (max-width: 64rem) {
	.tp-stappen__lijst,
	.tp-pakketten__lijst {
		grid-template-columns: minmax(0, 1fr);
	}

	.tp-rapport {
		max-width: 32rem;
	}
}

@media (max-width: 48rem) {
	.tp-voorwie__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tp-pakket {
		padding: 2.5rem 1.5rem 2rem;
	}

	.tp-pakket__badge {
		right: 1.25rem;
	}

	.tp-pakket .knop,
	.tp-slot .knop,
	.ed-ongemak .knop,
	.ed-hero .knop {
		white-space: normal;
		max-width: 100%;
	}

	.tp-pakket .knop__label,
	.tp-slot .knop__label,
	.ed-ongemak .knop__label,
	.ed-hero .knop__label {
		height: auto;
		min-height: var(--knop-h);
		padding-block: 0.6rem;
		line-height: 1.25;
	}
}

.tp-voordelen .reden__titel {
	margin-bottom: 1rem;
}

@media (max-width: 48rem) {
	/* Lange titels (Persoonlijkheidstest) passen anders niet in de herokaart */
	.ed-hero__titel {
		font-size: clamp(1.875rem, 8.5vw, 2.5rem);
		overflow-wrap: anywhere;
	}

	.ed-hero__kop > div,
	.ed-hero__titel {
		min-width: 0;
	}

	/* Lange samenstellingen (persoonlijkheidstest) in koppen laten afbreken */
	h1, h2, h3 {
		overflow-wrap: break-word; /* breekt alleen woorden die echt niet passen */
	}
}

.ed-ongemak__tekst > p + .ed-inschrijven {
	margin-top: 2.25rem;
	padding-left: 0;
}

.tp-verder .tp-pakket__titel {
	margin-bottom: 0.75rem;
}

/* ==========================================================================
   Juridische pagina's (v4, parts/juridisch.php): privacyverklaring, beleid AVG, algemene voorwaarden
   ========================================================================== */

.jr-kop__vlak {
	padding: clamp(2.5rem, 6vw, 6.25rem) var(--vlak-pad);
	border-radius: var(--r-groot);
	background: #DEE2FE;
}

.jr-kop__titel {
	display: flex;
	align-items: stretch;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

/* De accolade loopt over de volle hoogte van de inhoud ernaast (titel, banner, citaat), ook bij meerdere regels.
   Krullen en punt houden hun vorm (maskers uit accolade.svg, eenheid u = breedte / 90); alleen de rechte stukken
   rekken mee. Elk onderdeel zet alleen zijn breedte in --acc. */
:is(.jr-kop__titel, .ed-hero__kop, .ed-banner__vlak, .ed-trainer__kop, .hero__kop, .citaat__inhoud) > .accolade {
	--u: calc(var(--acc) / 90);
	width: var(--acc);
	height: auto;
	max-height: none;
	min-height: calc(var(--u) * 140);
	align-self: stretch;
	contain: size; /* eigen verhouding van de svg telt niet mee: de inhoud ernaast bepaalt de hoogte */
	background: currentColor;
	-webkit-mask:
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 90 32%22><path d=%22M90 0H50C40 0 32 8 32 18V32H64C64 26 66 24 72 24H90Z%22/></svg>") top / 100% auto no-repeat,
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 134 90 56%22><path d=%22M32 134V136C32 148 24 156 0 162C24 168 32 176 32 188V190H64C64 176 58 168 44 162C58 156 64 148 64 134Z%22/></svg>") center / 100% auto no-repeat,
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 292 90 32%22><path d=%22M32 292V306C32 316 40 324 50 324H90V300H72C66 300 64 298 64 292Z%22/></svg>") bottom / 100% auto no-repeat,
		linear-gradient(#000, #000) calc(var(--u) * 32) calc(var(--u) * 30) / calc(var(--u) * 32) calc(50% - var(--u) * 56 + 1px) no-repeat,
		linear-gradient(#000, #000) left calc(var(--u) * 32) bottom calc(var(--u) * 30) / calc(var(--u) * 32) calc(50% - var(--u) * 56 + 1px) no-repeat;
	mask:
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 90 32%22><path d=%22M90 0H50C40 0 32 8 32 18V32H64C64 26 66 24 72 24H90Z%22/></svg>") top / 100% auto no-repeat,
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 134 90 56%22><path d=%22M32 134V136C32 148 24 156 0 162C24 168 32 176 32 188V190H64C64 176 58 168 44 162C58 156 64 148 64 134Z%22/></svg>") center / 100% auto no-repeat,
		url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 292 90 32%22><path d=%22M32 292V306C32 316 40 324 50 324H90V300H72C66 300 64 298 64 292Z%22/></svg>") bottom / 100% auto no-repeat,
		linear-gradient(#000, #000) calc(var(--u) * 32) calc(var(--u) * 30) / calc(var(--u) * 32) calc(50% - var(--u) * 56 + 1px) no-repeat,
		linear-gradient(#000, #000) left calc(var(--u) * 32) bottom calc(var(--u) * 30) / calc(var(--u) * 32) calc(50% - var(--u) * 56 + 1px) no-repeat;
}

:is(.jr-kop__titel, .ed-hero__kop, .ed-banner__vlak, .ed-trainer__kop, .hero__kop, .citaat__inhoud) > .accolade path {
	display: none;
}

.jr-kop__titel .accolade {
	--acc: clamp(1.25rem, 2vw, 1.75rem);
}

.jr-kop__titel h1 {
	min-width: 0;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
	overflow-wrap: break-word;
}

.jr-kop__meta {
	margin-top: 1.5rem;
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	font-style: italic;
	color: var(--ink);
}

.jr-body {
	display: grid;
	grid-template-columns: minmax(15rem, 20rem) minmax(0, 48rem);
	justify-content: space-between;
	gap: 3rem clamp(3rem, 8vw, 10rem);
	margin-top: clamp(3rem, 5vw, 5rem);
}

/* Inhoudsopgave: papieren kaart op de witte pagina. h2 = titel met pijl, h3 = subtitel aan een lijn. */
.jr-inhoud {
	position: sticky;
	top: calc(var(--header-vast) + 2rem);
	align-self: start;
	max-height: calc(100vh - var(--header-vast) - 4rem);
	padding: 1.25rem 0.625rem 0.625rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	border-radius: var(--r-klein);
	background: var(--paper);
}

.jr-inhoud__kop {
	margin: 0 0.75rem 1rem;
	font-size: var(--text-md);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
}

.jr-inhoud ul {
	display: grid;
	gap: 0.125rem;
}

.jr-inhoud a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.3125rem 0.375rem 0.3125rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
	transition: background-color 0.2s ease;
}

.jr-inhoud__pijl {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.jr-inhoud__pijl svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* Subtitels: kleiner, regular, ingesprongen aan een lijn onder hun titel */
.jr-inhoud li ul {
	gap: 0;
	margin: 0.125rem 0 0.375rem 0.75rem;
	border-left: 0.0625rem solid var(--track);
}

.jr-inhoud li ul a {
	position: relative;
	margin-left: 0.25rem;
	padding: 0.25rem 0.5rem 0.25rem 0.625rem;
	font-size: 0.875rem;
	font-weight: 400;
	text-decoration: underline;
	text-decoration-color: var(--sub-fill);
	text-underline-offset: 0.2em;
}

.jr-inhoud a:hover,
.jr-inhoud a[aria-current] {
	background: var(--white);
}

.jr-inhoud a:hover .jr-inhoud__pijl,
.jr-inhoud a[aria-current] .jr-inhoud__pijl {
	background: var(--accent);
	color: var(--white);
}

/* Huidige subtitel: het stuk lijn ernaast wordt blauw */
.jr-inhoud li ul a[aria-current]::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -0.3125rem;
	width: 0.125rem;
	background: var(--accent);
}

.jr-tekst {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ink);
}

.jr-tekst__intro {
	font-size: clamp(1.125rem, 1.3vw, 1.25rem);
}

.jr-tekst section {
	scroll-margin-top: 2rem;
}

.jr-tekst__intro + section,
.jr-tekst section + section {
	margin-top: 3.5rem;
}

.jr-tekst h2 {
	margin-bottom: 1.25rem;
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.jr-tekst p + p,
.jr-tekst p + ul,
.jr-tekst p + ol,
.jr-tekst ul + p,
.jr-tekst ol + p,
.jr-tekst p + dl {
	margin-top: 1em;
}

.jr-tekst a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.jr-tekst a:hover {
	color: var(--accent);
}

.jr-tekst ul:not([class]),
.jr-tekst ol:not([class]) {
	display: grid;
	gap: 0.4rem;
	padding-left: 1.5rem;
}

.jr-tekst ul:not([class]) {
	list-style: disc;
}

.jr-tekst ol:not([class]) {
	list-style: decimal;
}

.jr-tekst ul:not([class]) li::marker,
.jr-tekst ol:not([class]) li::marker {
	color: var(--accent);
}

/* Artikelen met eigen nummer (2.1., 4.1.1.) */
.jr-artikelen {
	display: grid;
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.jr-artikelen li {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: 0.75rem;
}

.jr-artikelen li > span {
	font-family: var(--font-mono);
	font-size: 0.9375rem;
	line-height: 1.85;
	color: var(--accent);
}

.jr-artikelen .jr-artikelen {
	grid-column: 2;
	margin-top: 1rem;
}

.jr-artikelen .jr-artikelen li {
	grid-template-columns: 4rem minmax(0, 1fr);
}

.jr-definities {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: 1rem 1.5rem;
}

.jr-definities dt {
	font-weight: 500;
}

.jr-definities dd {
	margin: 0;
}

.jr-vraag {
	margin-top: 4.5rem;
	padding: 2rem 2.25rem;
	border-radius: var(--r-midden);
	background: var(--paper);
}

.jr-vraag__kop {
	margin-bottom: 0.25rem;
	font-family: var(--font-serif);
	font-size: 1.375rem;
}

@media (max-width: 64rem) {
	.jr-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.jr-inhoud {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

@media (max-width: 48rem) {
	.jr-tekst {
		font-size: 1rem;
	}

	.jr-artikelen li {
		grid-template-columns: 2.75rem minmax(0, 1fr);
	}

	.jr-artikelen .jr-artikelen {
		grid-column: 1 / -1;
	}

	.jr-definities {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.jr-definities dd {
		margin: 0 0 0.75rem;
	}

	.jr-vraag {
		padding: 1.5rem;
	}
}

/* ==========================================================================
   Homepage v5 (Figma "Persoonlijkheid.nl", pagina "Design homepage", frame 405:870)
   Witte pagina, crème vlakken. Inhoud 1560 breed op 1920 (180 marge), hero en citaat
   blijven 1840 (.breed). Header ligt op de homepage wit over de hero.
   ========================================================================== */

/* Topbar lichtgrijs over de volle breedte en lager dan de header, zodat die twee los van elkaar lezen (alle pagina's) */
.topbar {
	background: var(--paper);
	color: var(--ink);
}

.topbar__inner {
	min-height: 2.75rem;
}

/* Header over een grote foto: wit, de foto eronder maakt het onderscheid al */
.topbar.topbar--wit {
	background: var(--white);
}

.topbar__claim {
	color: var(--ink);
}

.topbar a:hover {
	color: var(--accent);
}

.topbar__google {
	border-left-color: rgba(11, 51, 66, 0.2);
}

.topbar__tp-score {
	color: #00B975;
}

.home .kop {
	font-size: clamp(2.25rem, 3.125vw, 3.75rem); /* 60px */
}

/* --- Header over de hero ---------------------------------------------------- */

.site-header--over {
	position: absolute; /* zonder top: blijft direct onder de topbar staan */
	left: 0;
	right: 0;
}

.site-header--over .site-logo {
	color: var(--white);
}

.site-header--over .site-logo:hover,
.site-header--over .site-logo:focus-visible {
	color: var(--accent);
}

@media (max-width: 64rem) {
	.site-logo svg {
		height: clamp(0.7rem, 2.8vw, 0.875rem);
	}

	/* Logo op de lijn van de accolade in de hero, niet tegen de ronde hoek */
	.site-header--over .site-logo {
		margin-left: 0.5rem;
	}

	/* Over de video: geen rondje achter het menu, alleen witte streepjes */
	.site-header--over .nav-toggle,
	.site-header.is-open .nav-toggle {
		background: transparent;
	}

	.site-header--over .nav-toggle__bars,
	.site-header--over .nav-toggle__bars::before,
	.site-header--over .nav-toggle__bars::after,
	.site-header.is-open .nav-toggle__bars::before,
	.site-header.is-open .nav-toggle__bars::after {
		width: 1.5rem;
		background: var(--white);
	}

	.site-header--over.is-open .nav-toggle__bars {
		background: transparent;
	}

	/* --- Mobiel menu: inktvlak over het hele scherm ---------------------------- */

	html.nav-open {
		overflow: hidden;
	}

	/* WhatsApp-knop (Futy, z-index 999999999) weg zolang het menu open is */
	html.nav-open #futy-container {
		display: none;
	}

	.site-header.is-open {
		z-index: 1001; /* boven vensters */
		min-height: 5rem; /* header houdt zijn plek, het vlak zelf staat vast */
	}

	.site-header.is-open .site-header__inner {
		position: fixed;
		inset: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 5rem auto;
		align-content: start;
		width: auto;
		min-height: 0;
		padding-inline: calc((100% - var(--inhoud)) / 2);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ink);
		color: var(--paper);
		animation: pnl-menu-in 0.2s ease-out;
	}

	.site-header.is-open .site-logo {
		color: var(--white);
	}

	.site-header.is-open .site-nav {
		grid-column: 1 / -1;
		align-self: start; /* niet centreren: is het menu hoger dan het scherm, dan schoof het onder het logo */
		position: static;
		display: flex;
		gap: 0;
		min-height: calc(100dvh - 5rem);
		padding: 1rem 0 max(2rem, env(safe-area-inset-bottom));
		background: none;
		box-shadow: none;
	}

	.site-header.is-open .site-nav__list > li {
		border-bottom-color: rgba(244, 244, 240, 0.14);
	}

	.site-header.is-open .site-nav__list > li > a {
		justify-content: flex-start;
		gap: 0;
		padding: 1.15rem 0;
		color: var(--paper);
		font-size: clamp(1.75rem, 8.5vw, 2.25rem);
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.01em;
	}

	.site-header.is-open .site-nav__list > .menu-item-has-children > a::after {
		width: 0.6rem;
		height: 0.6rem;
		margin-left: auto;
	}

	/* Open onderdeel: de blauwe accolade uit de hero ervoor, de links eronder op dezelfde lijn */
	.site-header.is-open .site-nav__list > li.is-open > a::before {
		content: '';
		flex-shrink: 0;
		width: 0.5em;
		height: 1.2em;
		margin-right: 0.45em;
		background: var(--accent);
		-webkit-mask: url(assets/icons/accolade.svg) left center / contain no-repeat;
		mask: url(assets/icons/accolade.svg) left center / contain no-repeat;
	}

	.site-header.is-open .site-nav .sub-menu {
		margin: -0.35rem 0 0;
		padding: 0 0 1.25rem calc(0.95 * clamp(1.75rem, 8.5vw, 2.25rem));
		border-radius: 0;
		background: none;
	}

	.site-header.is-open .site-nav .sub-menu a.mega-kaart {
		display: block;
		padding: 0.6rem 0;
		border-radius: 0;
		color: var(--paper);
		font-size: 1.25rem;
	}

	.site-header.is-open .site-nav .sub-menu a.mega-kaart:hover {
		background: none;
		color: var(--accent);
	}

	.site-header.is-open .site-nav__cta {
		margin-top: auto;
		width: 100%;
	}

	.site-header.is-open .site-nav__motto {
		display: block;
	}
}

.site-nav__motto {
	display: none;
	max-width: 22rem;
	margin: 1.5rem 0 0;
	color: var(--sub-fill);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.45;
}

@keyframes pnl-menu-in {
	from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header.is-open .site-header__inner {
		animation: none;
	}
}


@media (min-width: 64.0625rem) {
	.site-header--over .site-header__inner {
		min-height: 9.5rem;
	}

	.site-header--over .site-nav__list > li > a {
		color: var(--white);
	}

	.site-header--over .site-nav__list > li:hover > a,
	.site-header--over .site-nav__list > li:focus-within > a,
	.site-header--over .site-nav__list > li.is-open > a {
		color: var(--accent);
	}
}

/* --- Hero ------------------------------------------------------------------- */

.home .hero__vlak.hero__vlak--video {
	min-height: clamp(38rem, 54.7vw, 65.625rem); /* 1050 */
	padding-block: 11.5rem clamp(1.25rem, 1.8vw, 2rem);
	padding-inline: var(--vlak-pad);
}

/* Donker verloop van boven, zodat het witte menu over de hero ook op lichte videobeelden leesbaar blijft */
.home .hero__vlak.hero__vlak--video::before {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.35) 10rem, rgba(0, 0, 0, 0) 20rem),
		rgba(0, 0, 0, 0.4);
}

.home .hero__kop {
	--acc-w: clamp(1.1rem, 1.82vw, 2.2rem);
	--acc-gap: clamp(0.75rem, 1.5vw, 1.8rem);
}

.home .hero__titel--video {
	font-size: clamp(2.25rem, 3.125vw, 3.75rem); /* 60 */
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.home .hero__vlak--video .hero__kop + .hero__tekst,
.hero__knoppen {
	margin-left: calc(clamp(1.1rem, 1.82vw, 2.2rem) + clamp(0.75rem, 1.5vw, 1.8rem));
}

.home .hero__vlak--video .hero__tekst {
	max-width: 32rem;
	font-size: 1rem;
}

.hero__knoppen {
	margin-top: 2.75rem;
}

/* --- Intro ------------------------------------------------------------------ */

@media (min-width: 64.0625rem) {
	.intro .sectie__twee {
		grid-template-columns: var(--twee-kolommen);
		column-gap: var(--twee-gat);
	}
}

.intro .sectie__twee > .lopend {
	max-width: none;
	font-size: 1rem;
	line-height: 1.6;
}

/* --- Cijfers ---------------------------------------------------------------- */

.cijfers__lijst {
	align-content: start;
}

.cijfer {
	padding: 1.25rem 0 2.75rem;
	border-top-color: rgba(11, 51, 66, 0.35);
}

.cijfer__getal {
	color: var(--accent);
	font-variant-numeric: tabular-nums; /* tellende cijfers verspringen niet */
	font-size: clamp(2.5rem, 3.55vw, 4.25rem); /* 68 */
}

.cijfer__label {
	color: var(--ink);
}

@media (min-width: 64.0625rem) {
	.cijfers__grid {
		grid-template-columns: var(--twee-kolommen);
		gap: var(--twee-gat);
	}

	.cijfers__foto {
		height: auto;
		min-height: 0;
		aspect-ratio: 1;
		border-radius: var(--r-groot);
	}

	.cijfers__lijst {
		gap: 0 clamp(1.5rem, 6.9vw, 8.25rem);
		padding-top: 1.3rem;
	}
}

/* --- Galerij ---------------------------------------------------------------- */

.home .galerij {
	margin-top: var(--sectie);
}

/* --- Longread: direct onder de cijfers, stippen rechts van de tekst ---------- */

/* Alleen in scrollmodus (desktop): het vastgezette vlak geeft zelf de ruimte boven en onder de tekst */
.home .longread.longread--scroll {
	margin-top: 0;
}

/* Vlak van een halve schermhoogte, vastgezet in het midden van het scherm: de tekst staat gecentreerd
   terwijl je scrolt, en in de flow blijft er geen leeg scherm onder over. home.js leest top en hoogte. */
.home .longread--scroll .longread__sticky {
	top: 25vh;
	height: 50vh;
}

/* Spoor: vlak + korte kopstap (0.6) + 4 alinea's van 70vh (stappen in home.js) */
.home .longread--scroll .longread__spoor {
	height: calc(50vh + 4.6 * 70vh);
}

/* Kop als grote opening (desktop): breder dan de alinea's, tweede regel cursief in de serif */
.longread--scroll .longread__tekst {
	width: 100%;
	max-width: 72rem;
}

.longread--scroll .longread__alinea {
	justify-self: center;
	max-width: 44rem;
}

.longread__kop em {
	font-family: inherit;
	font-style: normal;
}

.longread--scroll .longread__kop {
	font-size: clamp(2.75rem, 4.4vw, 4.75rem);
	line-height: 1.08;
	transition-duration: 0.25s;
}

.longread--scroll .longread__kop em {
	font-family: var(--font-serif);
	font-style: italic;
}

.longread--scroll .longread__stippen {
	transition: opacity 0.3s ease;
}

.longread--kop .longread__stippen {
	opacity: 0;
}

/* Stippen: zichtbaar op wit, de actieve blijft blauw */
.longread__stippen li {
	background: var(--track);
}

.longread--scroll .longread__stippen {
	left: auto;
	right: max(0rem, 50% - 27rem);
}

/* Hint onderin het vastgezette vlak, alleen zolang de kop staat en er nog niets verandert (home.js) */
.longread__hint {
	display: none;
}

.longread--scroll .longread__hint {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	line-height: 1;
	text-align: center;
	color: var(--ink);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.longread--scroll .longread__hint.is-zichtbaar {
	opacity: 0.65;
}

/* Veegversie (home.js, telefoons en tablets): kop, dan de alinea's naast elkaar om door te vegen.
   De volgende alinea piept erin; woorden kleuren in zodra een alinea in beeld komt. Doorscrollen slaat
   het verhaal over. */
.longread--veeg .longread__sticky {
	grid-template-columns: minmax(0, 1fr); /* anders groeit de kolom mee met de veegrij */
	justify-items: stretch;
}

.longread--veeg .longread__tekst {
	display: block;
	max-width: none;
	font-size: clamp(1.25rem, 4.6vw, 1.75rem);
	text-align: left;
}

.longread--veeg .longread__kop {
	max-width: 36rem;
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	line-height: 1.15;
}

.longread--veeg .longread__alineas {
	display: flex;
	gap: 1.5rem;
	/* Links op de inhoudslijn, rechts doorlopend tot de schermrand */
	margin: 2rem calc((100% - 100vw) / 2) 0 0;
	padding-right: calc((100vw - 100%) / 2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.longread--veeg .longread__alineas::-webkit-scrollbar {
	display: none;
}

/* Ruimte na de laatste alinea, zodat ook die op de inhoudslijn kan vastklikken */
.longread--veeg .longread__alineas::after {
	content: '';
	flex: 0 0 calc(100% - min(86%, 36rem) - 1.5rem);
}

.longread--veeg .longread__alinea {
	flex: 0 0 min(86%, 36rem);
	margin: 0;
	line-height: 1.4;
	scroll-snap-align: start;
}

.longread--veeg .longread__bediening {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2rem;
}

.longread--veeg .longread__stippen {
	display: flex;
	flex: 1;
	gap: 0.375rem;
	max-width: 12rem;
}

.longread--veeg .longread__stippen li {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: var(--paper);
	cursor: pointer;
}

.longread--veeg .longread__stippen li.is-gelezen {
	background: var(--ink);
}

.longread--veeg .longread__stippen li.is-actief {
	background: var(--accent);
}

.longread--veeg .longread__pijlen {
	display: flex;
}

/* --- Citaat ----------------------------------------------------------------- */

.home .citaat__vlak {
	min-height: clamp(24rem, 31.25vw, 37.5rem); /* 600 */
}

.home .citaat__inhoud {
	gap: clamp(1rem, 1.9vw, 2.3rem);
	padding-inline: var(--vlak-pad);
}

.home .citaat__inhoud .accolade {
	--acc: clamp(2.25rem, 4.6vw, 5.5rem);
}

.home .citaat__tekst {
	max-width: none;
	font-size: clamp(2rem, 3.125vw, 3.75rem); /* 60 */
	line-height: 1.12;
}

/* --- Methodiek: crème kaart, vier vlakken ----------------------------------- */

.agency__card {
	padding: clamp(2rem, 4.5vw, 5.4rem) clamp(1.25rem, 2.35vw, 2.8rem);
	border-radius: var(--r-klein);
	background: var(--paper);
}

.agency .kop {
	margin-bottom: 3.25rem;
	font-size: clamp(2rem, 2.45vw, 2.95rem); /* 47 */
	line-height: 1.05;
}

.agency .kop em {
	display: inline;
}

.agency-item {
	border-bottom-color: rgba(11, 51, 66, 0.25);
}

.agency-item:first-child {
	border-top: 1px solid rgba(11, 51, 66, 0.25);
}

.agency-item__num {
	opacity: 1;
}

.agency-item__title {
	font-size: 1.375rem; /* 22 */
}

.agency-item__icon {
	opacity: 1;
}

.agency-driehoek {
	fill: var(--white);
	stroke: var(--paper);
	stroke-width: 2; /* dunne naad: de vlakken sluiten bijna op elkaar aan (was 6) */
}

.agency-driehoek--midden {
	fill: #957A2F; /* goud voor Agency, op verzoek warmer dan de traitkleur (#767058) */
}

/* Tekst op het donkere middenvlak in licht */
.agency__diagram:not([data-active="agency"]) [data-part="agency"]:is(.agency-nr, .agency-label) {
	fill: var(--paper);
}

.agency-nr {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	fill: var(--ink);
	transition: fill 0.45s ease;
}

.agency-label {
	font-size: 1.45rem;
}

.agency__diagram[data-active="agency"] .agency-driehoek[data-part="agency"] {
	fill: var(--accent);
}

.agency__diagram[data-active="persoonlijkheid"] [data-part="persoonlijkheid"]:is(.agency-nr, .agency-label),
.agency__diagram[data-active="motivatie"] [data-part="motivatie"]:is(.agency-nr, .agency-label),
.agency__diagram[data-active="waarden"] [data-part="waarden"]:is(.agency-nr, .agency-label),
.agency__diagram[data-active="agency"] [data-part="agency"]:is(.agency-nr, .agency-label) {
	fill: var(--white);
}

/* Driehoeken zijn klikbaar (agency.js); de tekst laat de klik door naar het vlak eronder */
.agency-driehoek {
	cursor: pointer;
}

.agency-nr,
.agency-label {
	pointer-events: none;
}

/* Hover: lichtblauwe tint, lager in specificiteit dan het actieve (blauwe) vlak */
@media (hover: hover) {
	:where(.agency__diagram) .agency-driehoek:not(.agency-driehoek--midden):hover {
		fill: #DEE2FE;
	}
}

@media (min-width: 64.0625rem) {
	.agency__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem);
		gap: 3rem;
		padding-right: clamp(1.25rem, 7.3vw, 8.75rem);
	}
}

/* --- Ervaringen: foto met kaart, daaronder Trustpilot ----------------------- */

.home .ervaringen {
	margin-top: var(--sectie);
}

.home .ervaringen__vlak {
	padding: 0;
	border-radius: var(--r-midden);
	background: var(--paper);
}

.home .testimonial__foto {
	height: clamp(20rem, 31.25vw, 37.5rem); /* 600 */
	border-radius: var(--r-midden);
}

.home .testimonial__kaart {
	background: var(--white);
}

.beloven {
	padding: clamp(2.5rem, 3.3vw, 3.2rem) clamp(1rem, 7.6vw, 9.1rem) clamp(2rem, 4vw, 4.9rem);
}

.beloven__widget {
	min-height: 140px;
	margin-top: 2.5rem;
}

@media (min-width: 64.0625rem) {
	/* Kaart binnen de foto: de foto is minimaal zo hoog als de kaart met de langste quote */
	.home .testimonial__foto {
		height: clamp(31rem, 31.25vw, 37.5rem);
	}

	.home .testimonial__kaart {
		top: clamp(1rem, 2.4vw, 2.875rem);
		right: clamp(1rem, 2.55vw, 3.05rem);
		bottom: auto;
		min-height: 0;
		max-height: calc(100% - 2 * clamp(1rem, 2.4vw, 2.875rem));
	}
}

/* --- Trainingen -------------------------------------------------------------- */

.home .trainingen__grid {
	gap: clamp(1rem, 2.55vw, 3.05rem);
	margin-top: 3rem;
}

.home .training {
	padding: 3rem clamp(1.25rem, 2.9vw, 3.5rem) 3.25rem;
	border-radius: var(--r-midden);
}

.home .training--een {
	background: var(--ink);
	color: var(--white);
}

.home .training--drie {
	background: var(--paper);
	color: var(--ink);
}

.home .training__kop {
	gap: clamp(1.25rem, 2.3vw, 2.75rem);
	margin-left: -0.25rem;
}

.home .training__foto {
	width: 12.5rem;
	height: 12.5rem;
}

.home .training__body {
	max-width: 32rem;
	margin: 3.5rem 0 0;
	font-size: 1.125rem;
}

.home .training .vinkjes {
	font-weight: 600;
	color: inherit;
}

.home .training__editie em {
	font-family: var(--font-serif);
	font-size: 1.125rem;
}

.home .training__badge {
	min-height: 2.6875rem;
	border-radius: 0.625rem;
	color: var(--ink);
	font-weight: 700;
}

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

.home .faq__vlak {
	gap: 2.5rem clamp(2rem, 3.5vw, 4.25rem);
	padding: clamp(2rem, 3.5vw, 4.2rem) clamp(1rem, 3.1vw, 3.75rem) clamp(1rem, 3.1vw, 3.75rem);
}

.home .faq__links .kop {
	margin: 0 0 2.5rem;
}

.home .faq__rechts {
	max-width: 38.125rem;
	padding-top: 2.75rem;
}

.home .faq__lijst {
	margin-top: 3.5rem;
}

.home .faq__item summary {
	font-size: 1.125rem;
	font-weight: 700;
}

@media (min-width: 64.0625rem) {
	.home .faq__vlak {
		grid-template-columns: minmax(0, 683fr) minmax(0, 610fr);
	}
}

/* --- Slot: gratis profielscan ----------------------------------------------- */

.home .slot__grid {
	max-width: none;
}

.slot__sub {
	margin-top: 2.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.home .slot .vinkjes {
	margin: 1.25rem 0 2.75rem;
	font-weight: 400;
}

.home .slot__foto {
	border-radius: var(--r-midden);
}

@media (min-width: 64.0625rem) {
	.home .slot__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 46.25rem);
		gap: 3rem;
	}

	.home .slot__tekst {
		padding-left: clamp(0rem, 3.1vw, 3.75rem);
	}
}

/* --- Afsluitende call-to-action (blauw) ------------------------------------- */

.cta {
	margin-top: 2.5rem;
}

.cta__vlak {
	display: grid;
	justify-items: center;
	gap: 2rem;
	padding: clamp(5rem, 9vw, 9rem) 1.5rem;
	border-radius: var(--r-midden);
	background: linear-gradient(rgba(11, 51, 66, 0.66), rgba(11, 51, 66, 0.66)), var(--ink) url("assets/images/home/cta-schrijven.webp") center / cover no-repeat; /* groep schrijft aan tafel, Level 2 april 2026, overlay in --ink */
	color: var(--white);
	text-align: center;
}

.cta .kop {
	color: var(--white);
	line-height: 1.05;
}

.cta__knop {
	height: 3.3rem;
	padding: 0 clamp(1.5rem, 4.5vw, 5.5rem);
	font-size: clamp(1.125rem, 1.35vw, 1.625rem);
}

/* --- Telefoons en tablets ----------------------------------------------------- */

@media (max-width: 64rem) {
	.home .hero__vlak.hero__vlak--video {
		padding-top: 7rem;
	}

	.home .faq__rechts {
		padding-top: 0;
	}

	.home .faq__lijst {
		margin-top: 2rem;
	}

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

	.home .testimonial__kaart {
		margin-top: -4rem;
	}

	.home .slot__foto {
		max-width: none;
	}
}

@media (max-width: 48rem) {
	.smal {
		width: var(--breed); /* kaarten op telefoons even breed als de brede vlakken */
	}

	.intro .smal,
	.cijfers__lijst,
	.slot__tekst {
		padding-inline: 0.75rem;
	}

	.home .hero__vlak.hero__vlak--video {
		padding-top: 6.5rem;
	}

	.home .hero__titel--video {
		font-size: 1.875rem; /* 30 */
	}

	.home .training__foto {
		display: block;
		width: 5.5rem;
		height: 5.5rem;
	}

	.home .training__body {
		margin-top: 2rem;
	}

	.beloven {
		padding-inline: 0.75rem;
	}
}

/* ==========================================================================
   Over ons (v5, page-over-ons.php). Stijl van homepage v5: witte pagina, crème vlakken,
   inhoud 1560 breed (.smal). Begin naar Figma-schets "Over ons" (263:4827).
   ========================================================================== */

.oo .kop {
	font-size: clamp(2.25rem, 3.125vw, 3.75rem); /* 60 */
}

.oo > section {
	margin-top: var(--sectie);
}

.oo > section.oo-hero {
	margin-top: 0;
}

/* --- Hero: blauwe kaart naast een fotomozaïek -------------------------------- */

.oo-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 31.25rem) minmax(0, 1fr);
	gap: 1.25rem;
	height: clamp(26rem, 32vw, 38.75rem);
}

.oo-hero__kaart {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3.1vw, 3.75rem);
	border-radius: var(--r-midden);
	background: var(--accent);
	color: var(--white);
}

.oo-hero__kaart .eyebrow {
	color: var(--white);
	opacity: 0.8;
}

.oo-hero__titel {
	margin-top: auto;
	font-size: clamp(2.25rem, 3.125vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* Zes foto's: hoog | breed + smal / smal + breed | hoog (zoals de galerij van de homepage) */
.oo-hero__fotos {
	display: grid;
	grid-template-columns: 0.8fr 1fr 1fr 1fr 0.8fr;
	grid-template-rows: 1fr 1fr;
	gap: 1.25rem;
	min-height: 0;
}

.oo-hero__fotos img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	border-radius: var(--r-midden);
}

.oo-hero__fotos img:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.oo-hero__fotos img:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.oo-hero__fotos img:nth-child(3) { grid-column: 4; grid-row: 1; }
.oo-hero__fotos img:nth-child(4) { grid-column: 2; grid-row: 2; }
.oo-hero__fotos img:nth-child(5) { grid-column: 3 / 5; grid-row: 2; }
.oo-hero__fotos img:nth-child(6) { grid-column: 5; grid-row: 1 / 3; }

/* --- Intro, missie, team: kop links, tekst rechts ------------------------------ */

@media (min-width: 64.0625rem) {
	.oo .sectie__twee {
		grid-template-columns: var(--twee-kolommen);
		column-gap: var(--twee-gat);
	}
}

.oo .sectie__twee > .lopend {
	max-width: none;
	font-size: 1rem;
	line-height: 1.6;
}

.oo .lopend p + p {
	margin-top: 1em;
}

.oo-intro__lead {
	font-family: var(--font-serif);
	font-size: clamp(1.375rem, 1.6vw, 1.75rem);
	line-height: 1.3;
	color: var(--ink);
}

/* --- Missie en visie: foto + tekst op crème ------------------------------------ */

.oo-missie__vlak {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
	padding: clamp(0.75rem, 2.5vw, 3rem);
	border-radius: var(--r-midden);
	background: var(--paper);
}

.oo-missie__foto {
	align-self: stretch;
	width: 100%;
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
	border-radius: var(--r-midden);
}

.oo-missie__tekst .lopend {
	max-width: 32rem;
	margin-top: var(--space-4);
}

/* --- Team ------------------------------------------------------------------- */

.oo-team__lijst {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem clamp(1rem, 2vw, 2.5rem);
	margin-top: 3.5rem;
}

.oo-lid {
	color: var(--ink);
}

.oo-lid__foto {
	width: 100%;
	height: auto; /* anders wint height="600" van de aspect-ratio */
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-midden);
}

.oo-lid__naam {
	margin-top: 1.25rem;
	font-size: clamp(1.25rem, 1.4vw, 1.625rem);
	line-height: 1.15;
}

.oo-lid__rol {
	margin-top: 0.35rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
}

.oo-lid__meer {
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1rem;
	color: var(--accent);
	cursor: pointer;
}

.oo-lid__meer:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oo-bio {
	width: min(56rem, 100% - 2rem);
	max-height: calc(100% - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--r-midden);
	background: var(--white);
	color: var(--ink);
}

.oo-bio[open] {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}

.oo-bio::backdrop {
	background: rgba(11, 51, 66, 0.6);
}

.oo-bio__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oo-bio__tekst {
	padding: clamp(1.75rem, 3vw, 3rem);
	font-size: 1rem;
	line-height: 1.6;
}

.oo-bio__kop {
	margin-bottom: 0.75rem;
	font-size: clamp(1.75rem, 2.2vw, 2.25rem);
	line-height: 1.1;
}

.oo-bio__kop--klein {
	margin-top: 1.75rem;
	font-size: 1.375rem;
}

.oo-bio__tekst p + p {
	margin-top: 0.75rem;
}

.oo-bio__sluit {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	border: 0;
	background: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}

/* --- Methodiek (zelfde blok als de homepage, drie pijlers) ------------------- */

.agency__intro {
	margin: -1.5rem 0 2.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.agency-item__body-inner p + p {
	margin-top: -0.75rem;
}

/* --- Whitepaper: blauw vlak --------------------------------------------------- */

.oo-whitepaper__vlak {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	gap: 3rem;
	align-items: center;
	padding: clamp(2rem, 4.5vw, 5rem) clamp(1.5rem, 5.5vw, 6.5rem);
	border-radius: var(--r-midden);
	background: var(--accent);
	color: var(--white);
}

.oo-whitepaper .kop {
	color: var(--white);
}

.oo-whitepaper .lopend {
	max-width: 44rem;
	margin: 2rem 0 2.5rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.oo-whitepaper__foto {
	width: 100%;
	height: auto;
	max-width: 24rem;
	justify-self: center;
	filter: drop-shadow(0 1.5rem 2.5rem rgba(11, 51, 66, 0.35));
}

/* --- Ronald McDonald Huis --------------------------------------------------- */

.oo-rmh__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
	gap: 3rem clamp(2rem, 6vw, 8rem);
	align-items: center;
}

.oo-rmh .lopend {
	max-width: 44rem;
	margin-top: 2rem;
	font-size: 1rem;
	line-height: 1.6;
}

.oo-rmh__kaart {
	padding: clamp(2rem, 3vw, 3rem);
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
	text-align: center;
}

.oo-rmh__logo {
	width: 11rem;
	margin: 0 auto 2rem;
	padding: 0.75rem 1rem;
	border-radius: 1rem;
	background: var(--white);
}

.oo-rmh__label {
	font-family: var(--font-mono);
	color: var(--accent);
}

.oo-rmh__bedrag {
	margin: 0.5rem 0 1rem;
	font-family: var(--font-serif);
	font-size: clamp(3rem, 4.5vw, 5rem);
	line-height: 1;
	color: var(--accent);
}

.oo-rmh__uitleg {
	font-size: 0.9375rem;
}

/* --- Klanten ------------------------------------------------------------------ */

.oo-klanten__sub {
	margin-top: 1rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.25rem;
	text-align: center;
	color: var(--ink);
}

/* --- Slot: profielscan ---------------------------------------------------------- */

.oo-slot__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
	gap: 3rem;
	align-items: center;
	padding: clamp(2rem, 4vw, 4.5rem) clamp(1.25rem, 4vw, 4.5rem);
	border-radius: var(--r-midden);
	background: var(--paper);
}

.oo-slot .lopend {
	max-width: 36rem;
	margin: 2rem 0 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.oo-slot .vinkjes {
	margin-bottom: 2.5rem;
	font-weight: 400;
}

.oo-slot__preview {
	margin-top: 1.25rem;
}

.oo-slot__preview a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oo-slot__preview a:hover {
	color: var(--accent);
}

.oo-slot__foto {
	width: 100%;
	height: auto;
}

/* --- Whitepaperformulier: alleen als venster (of na versturen / zonder JS via #aanvraag) --- */

.oo-aanvraag:not(.is-venster):not(.is-status):not(:target) {
	display: none;
}

/* --- Telefoons en tablets ---------------------------------------------------------- */

@media (max-width: 64rem) {
	.oo .sectie__twee,
	.oo-missie__vlak,
	.oo-whitepaper__vlak,
	.oo-rmh__grid,
	.oo-slot__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.oo-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.oo-hero__kaart {
		min-height: 16rem;
	}

	.oo-hero__fotos {
		height: clamp(16rem, 50vw, 26rem);
	}

	.oo-team__lijst {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.oo-whitepaper__foto {
		max-width: 16rem;
	}
}

@media (max-width: 48rem) {
	.oo-intro .smal,
	.oo-team .sectie__twee,
	.oo-rmh__grid > div:first-child,
	.oo-klanten .kop,
	.oo-klanten__sub {
		padding-inline: 0.75rem;
	}

	.oo-hero__fotos {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0.6rem;
	}

	.oo-hero__fotos img {
		border-radius: 1.25rem;
	}

	.oo-hero__fotos img:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
	.oo-hero__fotos img:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
	.oo-hero__fotos img:nth-child(3),
	.oo-hero__fotos img:nth-child(6) { display: none; }
	.oo-hero__fotos img:nth-child(4) { grid-column: 2; grid-row: 2; }
	.oo-hero__fotos img:nth-child(5) { grid-column: 3; grid-row: 2; }

	.oo-team__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 0.75rem;
	}

	.oo-lid__naam {
		font-size: 1.125rem;
	}

	.oo-lid__rol {
		font-size: 0.9375rem;
	}

	.oo-bio[open] {
		grid-template-columns: minmax(0, 1fr);
		overflow-y: auto;
	}

	.oo-bio__foto {
		height: 14rem;
	}

	/* Lange knoplabels mogen afbreken op smalle telefoons */
	.oo .knop {
		max-width: 100%;
		white-space: normal;
	}

	.oo .knop__label {
		height: auto;
		min-height: var(--knop-h);
		padding-block: 0.6rem;
		line-height: 1.25;
	}

	.oo-bio__sluit {
		top: 0.5rem;
		right: 0.75rem;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background: var(--white);
	}
}

/* --- Voorbeeldrapport (venster met de PDF-pagina's, daaronder de profielscan) --- */

.oo-rapport {
	width: min(56rem, 100% - 2rem);
	height: min(52rem, 100% - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
	overflow: hidden;
}

.oo-rapport[open] {
	display: flex;
	flex-direction: column;
}

.oo-rapport::backdrop {
	background: rgba(11, 51, 66, 0.6);
}

.oo-rapport__paginas {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 3.5rem 1rem 2rem;
	overflow-y: auto;
}

.oo-rapport__pagina {
	display: block;
	width: 100%;
	max-width: 47.5rem;
	height: auto;
	border-radius: 0.5rem;
	background: var(--white);
	box-shadow: 0 0.75rem 2rem rgba(11, 51, 66, 0.15);
}

.oo-rapport__laden {
	margin: auto;
	font-family: var(--font-mono);
	color: var(--accent);
}

.oo-rapport__laden a {
	text-decoration: underline;
}

.oo-rapport__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
	background: var(--accent);
	color: var(--white);
}

.oo-rapport__cta > div {
	flex: 1 1 22rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.oo-rapport__kop {
	margin-bottom: 0.35rem;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.15;
}

.oo-rapport__sluit {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 0.25rem 0.75rem rgba(11, 51, 66, 0.15);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}

@media (max-width: 48rem) {
	.oo-rapport {
		width: calc(100% - 1rem);
		height: calc(100% - 1rem);
	}

	.oo-rapport__paginas {
		padding: 3.5rem 0.75rem 1.25rem;
	}

	.oo-rapport__cta .knop {
		max-width: 100%;
		white-space: normal;
	}
}

/* --- Kleinste telefoons (tot 360px) ------------------------------------------- */

@media (max-width: 48rem) {
	/* Heroknoppen mogen afbreken in plaats van buiten de hero te steken */
	.hero__knoppen .knop {
		max-width: 100%;
		white-space: normal;
	}

	.hero__knoppen .knop__label {
		height: auto;
		min-height: var(--knop-h);
		padding-block: 0.6rem;
		line-height: 1.25;
	}

	.home .citaat__tekst {
		font-size: clamp(1.625rem, 8vw, 2.25rem);
		overflow-wrap: break-word;
	}
}

@media (max-width: 24rem) {
	/* Lange functietitels ("Gezondheidswetenschapper,") mogen afbreken */
	.ed-review__auteur span {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.ed-banner__tekst {
		font-size: 1.5rem;
		overflow-wrap: break-word;
	}

	/* Footermenu's onder elkaar: "Persoonlijkheidstest" past niet in een halve kolom */
	.site-footer__menus {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__knoppen {
		margin-left: 0;
	}
}

/* ==========================================================================
   Gratis profielscan (v5, page-gratis-persoonlijkheidsrapport.php), bouwt op de ed-/tp-blokken
   ========================================================================== */

/* De tablet staat links in de foto: kaart rechts, zodat "Jouw rapport" zichtbaar blijft */
.ps-hero__foto {
	object-position: 50% 35%;
}

@media (min-width: 48.0625rem) {
	.ps-hero .ed-hero__vlak {
		justify-content: flex-end;
	}
}

.ps-systemen__intro {
	max-width: 44rem;
	margin-top: 1.5rem;
}

.ps-systemen__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ps-systemen .reden__titel em {
	font-family: var(--font-serif);
	font-style: italic;
}

.ps-knop {
	margin-top: 2.5rem;
}

.ps-trustpilot {
	min-height: 140px;
	margin-top: 3rem;
}

.ps-verder__intro {
	max-width: 44rem;
	margin-top: 1.5rem;
}

.ps-verder__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}

@media (max-width: 64rem) {
	.ps-systemen__grid,
	.ps-verder__lijst {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Aanbod (v5, page-aanbod.php) en Contact (v5, page-contact.php)
   ========================================================================== */

.aa-kop__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 2rem;
	font-family: var(--font-mono);
}

.aa-kop__nav a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.aa-kop__nav a:hover {
	color: var(--accent);
}

.aa-sectie {
	margin-top: var(--sectie);
	scroll-margin-top: 2rem;
}

.aa-intro {
	grid-template-columns: var(--twee-kolommen);
	column-gap: var(--twee-gat);
}

.aa-intro .lopend {
	max-width: none;
	font-size: 1rem;
	line-height: 1.6;
}

.aa-intro .lopend p + p {
	margin-top: 1em;
}

.aa-noot {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--ink);
}

.aa-rapporten,
.aa-trainingen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 3rem;
}

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

.aa-kaart .vinkjes {
	margin: 0.5rem 0 1.5rem;
}

.aa-prijs {
	margin-top: auto;
}

.aa-prijs s {
	margin-right: 0.5rem;
	font-size: 0.6em;
	color: var(--sub-fill);
}

.aa-training__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	margin-bottom: 1.75rem;
	object-fit: cover;
	border-radius: var(--r-klein);
}

.aa-training .tp-pakket__intro + .tp-pakket__intro {
	margin-top: 0.75rem;
}

.aa-bundel {
	margin-top: 3rem;
}

.aa-bundel__kaart {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: 2rem 3rem;
	align-items: center;
	max-width: 52rem;
}

.aa-bundel__kaart .tp-verder__rapport {
	margin: 0;
}

.aa-cta__tekst {
	max-width: 34rem;
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Contact */

.ct {
	margin-top: clamp(3rem, 5vw, 5rem);
}

.ct__grid {
	display: grid;
	grid-template-columns: var(--twee-kolommen);
	column-gap: var(--twee-gat);
	row-gap: 3rem;
	align-items: start;
}

.ct__intro {
	max-width: 36rem;
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 1.5vw, 1.625rem);
	line-height: 1.35;
	color: var(--ink);
}

.ct__foto {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	margin-top: 2.5rem;
	object-fit: cover;
	border-radius: var(--r-klein);
}

.ct__gegevens {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, auto));
	justify-content: start;
	gap: 1.5rem 3rem;
	margin: 2.5rem 0 0;
	color: var(--ink);
}

.ct__gegevens dt {
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--accent);
}

.ct__gegevens dd {
	margin: 0;
	line-height: 1.5;
}

.ct__gegevens a:hover {
	color: var(--accent);
}

.ct__formulier {
	padding: clamp(1.75rem, 3vw, 3rem);
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
}

.ct__formulier .kop {
	margin-bottom: 1.75rem;
}

.ct__formulier .dd-form input,
.ct__formulier .dd-form textarea {
	background: var(--white);
}

@media (max-width: 64rem) {
	.aa-intro,
	.ct__grid,
	.aa-trainingen {
		grid-template-columns: minmax(0, 1fr);
	}

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

@media (max-width: 48rem) {
	.aa-bundel__kaart {
		grid-template-columns: minmax(0, 1fr);
	}

	.aa-bundel__kaart .tp-verder__rapport {
		max-width: 14rem;
	}

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

/* ==========================================================================
   Kennisbank en artikelen (v5): parts/kennis-artikel.php, parts/kennis-overzicht.php, page-artikelen.php
   Bouwt op het juridische template (jr-kop, jr-body, jr-inhoud, jr-tekst).
   ========================================================================== */

.kn-kruimel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
	margin-bottom: 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--ink);
}

.kn-kruimel a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kn-kruimel a:hover {
	color: var(--accent);
}

.kn-kop .jr-kop__titel h1 {
	max-width: 50rem;
	font-size: clamp(2rem, 4vw, 3.75rem);
	line-height: 1.05;
}

.kn-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
	margin-top: 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--ink);
}

.kn-tekst {
	max-width: 46rem;
}

.kn-beeld {
	width: 100%;
	height: auto;
	margin: 0 0 2.5rem;
	border-radius: var(--r-klein);
}

.kn-deel .kn-beeld {
	margin: 1.5rem 0 0;
}

.kn-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 2.5rem;
	overflow: hidden;
	border-radius: var(--r-klein);
}

.kn-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.kn-intro {
	margin-bottom: 1rem;
	font-family: var(--font-serif);
	font-size: clamp(1.1875rem, 1.4vw, 1.375rem);
	line-height: 1.5;
}

.kn-intro p + p {
	margin-top: 0.9em;
}

/* Delen: h2 met ruimte erboven, h3/h4 dichter op de tekst */
.kn-deel {
	margin-top: 2.75rem;
}

.kn-deel--h3,
.kn-deel--h4 {
	margin-top: 1.75rem;
}

.kn-tekst h2,
.kn-tekst h3 {
	scroll-margin-top: 2rem;
}

.kn-tekst h3 {
	margin-bottom: 0.75rem;
	font-size: 1.375rem;
	line-height: 1.2;
}

/* Klik in de inhoudsopgave: pijltje bij de kop waar je landt, schuift in beeld en vaagt weg */
.jr-tekst .is-aangewezen {
	position: relative;
}

.jr-tekst .is-aangewezen::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: -2rem;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -0.75rem;
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' stroke='%23000' stroke-width='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 20 20' fill='none'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: pnl-kop-pijl 3s ease-out both;
}

@media (max-width: 48rem) {
	.jr-tekst .is-aangewezen::before {
		left: -1.375rem;
		width: 1.25rem;
		height: 1.25rem;
		margin-top: -0.625rem;
	}
}

@keyframes pnl-kop-pijl {
	0% {
		opacity: 0;
		transform: translateX(-0.625rem);
	}

	12%,
	70% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(0);
	}
}

.kn-tekst h4 {
	margin-bottom: 0.5rem;
	font-size: 1.125rem;
	font-weight: 500;
}

.kn-tekst p + p,
.kn-tekst p + ul,
.kn-tekst p + ol,
.kn-tekst ul + p,
.kn-tekst ol + p {
	margin-top: 1em;
}

.kn-tekst ul:not([class]),
.kn-tekst ol:not([class]) {
	display: grid;
	gap: 0.4rem;
	padding-left: 1.5rem;
}

.kn-tekst ul:not([class]) {
	list-style: disc;
}

.kn-tekst ol:not([class]) {
	list-style: decimal;
}

.kn-tekst li::marker {
	color: var(--accent);
}

/* Nadruk in de tekst: STIX cursief (merkregel), niet vet */
.kn-tekst strong,
.kn-tekst b {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}

.kn-inhoud h2 {
	margin: 2.75rem 0 1.25rem;
}

/* CTA-blok in de tekst */
.kn-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
	gap: 1.5rem;
	align-items: center;
	margin: 3rem 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
}

.kn-cta__kop {
	margin-bottom: 0.75rem;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.15;
}

.kn-cta .vinkjes {
	margin: 1.25rem 0 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.kn-cta .vinkjes li {
	align-items: flex-start;
}

.kn-cta .vink {
	margin-top: 0.15rem;
}

.kn-cta__noot {
	margin-top: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
}

.kn-cta__beeld {
	width: 100%;
	height: auto;
}

/* FAQ in het artikel */
.kn-faq {
	margin-top: 3.5rem;
}

.kn-faq h2 {
	margin-bottom: 1.25rem;
}

.kn-faq .faq__item {
	background: var(--paper);
}

.kn-faq__antwoord {
	padding: 0 2.25rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Auteur */
.kn-auteur {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--track);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.kn-auteur img {
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	border-radius: 50%;
}

.kn-auteur__label {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--accent);
}

.kn-auteur__naam {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.kn-auteur__link {
	display: inline-block;
	margin-top: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Kaartlijsten: verder in dit onderwerp, lees ook, overzichten */
.kn-lijst,
.kn-overzicht {
	margin-top: var(--sectie);
}

.kn-kop + .kn-overzicht {
	margin-top: clamp(3rem, 5vw, 5rem);
}

.kn-overzicht__intro {
	max-width: 46rem;
	font-family: var(--font-serif);
	font-size: clamp(1.1875rem, 1.4vw, 1.375rem);
	line-height: 1.5;
	color: var(--ink);
}

.kn-overzicht__kop {
	margin-top: 4rem;
}

.kn-kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}

.kn-kaart[hidden] {
	display: none;
}

.kn-kaart__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
}

.kn-kaart__beeld {
	flex: none;
	width: 100%;
	height: auto;
	min-height: 0; /* anders wint de beeldhoogte in de flexkolom van de aspect-ratio */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 40%;
}

/* Imagify zet uploads in een <picture> en verplaatst de klasse daarheen: dan het img erin laten vullen */
picture.kn-kaart__beeld,
picture.kn-beeld {
	display: block;
	overflow: hidden;
}

picture.kn-kaart__beeld img,
picture.kn-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

picture.kn-beeld img {
	height: auto;
}

/* Knoppen in de artikeltekst niet onderstrepen (de tekstlinks wel) */
.jr-tekst .knop {
	text-decoration: none;
}

.kn-kaart__tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

.kn-kaart__titel {
	font-size: 1.25rem;
	line-height: 1.2;
}

.kn-kaart__intro {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.kn-kaart__meer {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--accent);
}

.kn-kaart__meer--pijl {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.kn-kaart__meer--pijl svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.kn-categorie:hover .kn-kaart__meer--pijl svg,
.kn-categorie:focus-visible .kn-kaart__meer--pijl svg {
	transform: translateX(0.25rem);
}

.kn-kaart__link:hover .kn-kaart__titel,
.kn-categorie:hover .kn-categorie__titel {
	color: var(--accent);
}

/* Categorieën op de kennisbank */
.kn-categorieen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 3rem;
}

.kn-categorie {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	padding: 2rem 1.75rem;
	border-radius: var(--r-midden);
	background: var(--paper);
	color: var(--ink);
}

.kn-categorie__titel {
	font-size: 1.5rem;
	line-height: 1.15;
}

.kn-categorie__tekst {
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Filter op de artikelenpagina */
.kn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 2rem;
}

.kn-filter__knop {
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--ink);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

.kn-filter__knop:hover,
.kn-filter__knop.is-actief {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--white);
}

@media (max-width: 64rem) {
	.kn-kaarten,
	.kn-categorieen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.kn-kaarten,
	.kn-categorieen {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.kn-cta__beeld {
		display: none;
	}

	.kn-cta .knop {
		max-width: 100%;
		white-space: normal;
	}

	.kn-cta .knop__label {
		height: auto;
		min-height: var(--knop-h);
		padding-block: 0.6rem;
		line-height: 1.25;
	}

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

	.kn-faq__antwoord {
		padding-inline: 1.5rem;
	}
}

/* ==========================================================================
   Ritme (v5, 2026-10-19): één schaal voor koppen, hoeken en binnenmarges.
   Gemeten op alle v5-pagina's (1440 en 390): vier H1-maten, twee sectiekopmaten, acht maten
   voor kaarttitels en hoeken van 60px op telefoons. Hier trekken we dat gelijk via tokens;
   oudere regels hierboven blijven staan, deze komen erna en winnen.
   Maten zijn op 1440 en breder / telefoon; daartussen schaalt de clamp mee.
   ========================================================================== */

:root {
	--fs-h1: clamp(2.25rem, 4.17vw, 3.75rem);          /* 60 / 36 */
	--fs-kop: clamp(2rem, 3.5vw, 3.125rem);            /* 50 / 32 */
	--fs-kop-klein: clamp(1.625rem, 2.78vw, 2.5rem);   /* 40 / 26 */
	--fs-titel-l: clamp(1.5rem, 1.95vw, 1.75rem);      /* 28 / 24 */
	--fs-titel-s: clamp(1.25rem, 1.53vw, 1.375rem);    /* 22 / 20 */
	--fs-lead: 1.125rem;                               /* 18 */
	--fs-body: 1rem;                                   /* 16 */

	--kaart-pad: clamp(1.5rem, 2.78vw, 2.5rem);        /* 40 / 24 */
	--vlak-pad-groot: clamp(1.5rem, 4.17vw, 3.75rem);  /* 60 / 24 */
}

/* Hoeken krimpen mee op telefoons, zodat tekst niet tegen de bocht komt (60/40/30 wordt 32/24/20) */
@media (max-width: 48rem) {
	:root {
		--r-groot: 2rem;
		--r-midden: 1.5rem;
		--r-klein: 1.25rem;
	}
}

/* Paginatitel: één maat op alle pagina's (de video-titel op de homepage houdt zijn eigen maat) */
.jr-kop__titel h1,
.kn-kop .jr-kop__titel h1,
.ed-hero__titel,
.oo-hero__titel {
	font-size: var(--fs-h1);
	line-height: 1.05;
}

/* Sectiekoppen */
.kop,
.home .kop,
.oo .kop,
.agency .kop,
.ed-banner__tekst {
	font-size: var(--fs-kop);
	line-height: 1.05;
}

.kop.kop--klein,
.training__titel,
.dag__titel {
	font-size: var(--fs-kop-klein);
}

/* Kaarttitels: twee maten */
.ed-trainer__naam,
.dd-level__titel,
.jr-tekst h2,
.oo-bio__kop,
.vraag__titel {
	font-size: var(--fs-titel-l);
	line-height: 1.15;
}

.reden__titel,
.agency-item__title,
.tp-pakket__titel,
.tp-hero__kop,
.oo-lid__naam,
.oo-rapport__kop,
.oo-bio__kop--klein,
.kn-tekst h3,
.kn-cta__kop,
.kn-kaart__titel,
.kn-categorie__titel,
.jr-vraag__kop {
	font-size: var(--fs-titel-s);
	line-height: 1.2;
}

/* Lopende tekst: 18 (inleiding) of 16, geen 17 */
.slot__sub,
.aa-cta__tekst,
.oo-whitepaper .lopend,
.site-nav__motto {
	font-size: var(--fs-lead);
}

.ed-trainer,
.oo-lid__rol {
	font-size: var(--fs-body);
}

/* Binnenmarge: kaarten en grote vlakken elk één maat */
.testimonial__kaart,
.tp-pakket,
.ed-review,
.ed-hero__kaart,
.ed-na,
.reden,
.tp-stap,
.tp-voorwie__kaart,
.oo-hero__kaart,
.oo-rmh__kaart,
.ct__formulier,
.kn-cta,
.jr-vraag {
	padding: var(--kaart-pad);
}

.faq__vlak,
.home .faq__vlak,
.dd-level,
.dd-aanvraag__vlak,
.ed-banner__vlak,
.oo-whitepaper__vlak,
.oo-slot__grid {
	padding: var(--vlak-pad-groot);
}

/* Regelafstand lopende tekst: 1.6, kleine tekst 1.5 */
.lopend,
.ed-editie,
.slot__sub,
.aa-cta__tekst,
.tp-pakket__intro,
.oo-lid__rol,
.oo-rmh__uitleg {
	line-height: 1.6;
}

.tp-vertrouwd,
.tp-pakket__noot {
	line-height: 1.5;
}

/* Telefoons: banner-tekst past in zijn kaart, lange samenstellingen (persoonlijkheidstest) afbreken
   met een koppelteken in plaats van midden in het woord */
@media (max-width: 48rem) {
	.ed-banner__tekst {
		font-size: 2rem;
	}

	.ed-hero__titel {
		font-size: 2rem;
	}

	h1,
	h2,
	h3,
	.ed-hero__titel {
		overflow-wrap: break-word;
		hyphens: auto;
		hyphenate-limit-chars: 14 6 6; /* alleen lange samenstellingen, niet "begre-pen" */
	}

	.oo-missie__vlak {
		padding: var(--kaart-pad);
	}
}

@media (max-width: 24rem) {
	.ed-banner__tekst {
		font-size: 1.5rem;
	}
}

/* Filterknoppen kennisbank: niet over twee regels */
.kn-filter__knop {
	white-space: nowrap;
}

/* ==========================================================================
   Fotokop kennisbank-overzichten (pnl_kop_foto): trainingsfoto met de witte header erover,
   zelfde verloop van boven als de homepage-hero, en donker onderaan voor de titel.
   ========================================================================== */

.kn-kop--foto .jr-kop__vlak {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(24rem, 34vw, 40rem);
	padding-top: 11.5rem;
	background: var(--ink);
}

.kn-kop__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%; /* gezichten zitten meestal in het bovenste deel van de foto */
}

/* Kennisbank-hoofdpagina: foto gecentreerd */
.page-id-1351 .kn-kop__foto {
	object-position: 50% 50%;
}

/* Kenmerken: gezicht omhoog, zodat de titel er niet overheen valt */
.page-id-12223 .kn-kop__foto {
	object-position: 50% 62%;
}

.kn-kop--foto .jr-kop__vlak::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.35) 10rem, rgba(0, 0, 0, 0) 20rem),
		linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.2);
}

.kn-kop--foto .jr-kop__titel h1,
.kn-kop--foto .kn-kruimel {
	color: var(--white);
}

.kn-kop--foto .kn-kruimel a:hover {
	color: var(--accent);
}

@media (max-width: 64rem) {
	.kn-kop--foto .jr-kop__vlak {
		min-height: 22rem;
		padding-top: 7rem;
	}
}

@media (max-width: 48rem) {
	.kn-kop--foto .jr-kop__vlak {
		min-height: 20rem;
		padding-top: 6.5rem;
	}
}

/* ==========================================================================
   Reviews: slider met letterlijke reviews, bron per kaart
   ========================================================================== */

.reviews {
	margin-top: 3rem;
}

.reviews__rij {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 1.5rem) / 3);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.reviews__rij::-webkit-scrollbar {
	display: none;
}

.reviews__rij:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 0.25rem;
}

.reviews__rij > .ed-review {
	scroll-snap-align: start;
}

.reviews__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.reviews .ed-review__quote {
	margin: 1.25rem 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	white-space: pre-line;
}

.reviews__pijlen {
	justify-content: flex-end;
	margin-top: 1.25rem;
}

.reviews__pijlen[hidden] {
	display: none;
}

.review-sterren {
	display: inline-flex;
	gap: 0.15rem;
}

.review-sterren svg {
	width: 1.1rem;
	height: 1.1rem;
}

.review-sterren--trustpilot {
	color: #00B67A;
}

.review-sterren--google {
	color: #FBBC04;
}

.review-bron {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.review-bron:hover {
	color: var(--accent);
}

.review-bron__ster {
	width: 1rem;
	height: 1rem;
	color: #00B67A;
}

.testimonial__bron {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
}

.review-bronnen__label {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--ink);
	opacity: 0.65;
}

@media (max-width: 64rem) {
	.reviews__rij {
		grid-auto-columns: calc((100% - 1.5rem) / 2);
	}
}

@media (max-width: 48rem) {
	.reviews__rij {
		grid-auto-columns: 88%;
		gap: 1rem;
	}
}

/* Homepage: de methodiek als volle grijze band in plaats van een kaart (de enige rechte band op de pagina) */
.home .agency {
	padding-block: var(--sectie);
	background: var(--paper);
}

.home .agency__card {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

@media (max-width: 48rem) {
	.home .agency__card {
		padding-inline: 0.75rem;
	}
}

/* ==========================================================================
   Header blijft staan bij scrollen en krimpt vloeiend: balk, logo, menu en knop
   (site.js zet is-vast en is-los)
   ========================================================================== */

:root {
	--header-hoog: 6.5rem;
	--header-vast: 4.5rem;
	--header-duur: 0.35s;
}

@media (max-width: 64rem) {
	:root {
		--header-hoog: 5rem;
		--header-vast: 4rem;
	}
}

html {
	scroll-padding-top: calc(var(--header-vast) + 1rem); /* ankers komen niet onder de header */
}

.site-header {
	position: sticky;
	top: 0;
	background: var(--white);
	transition: background-color var(--header-duur) ease, box-shadow var(--header-duur) ease, margin-bottom var(--header-duur) ease;
}

.site-header--over {
	position: absolute;
	top: auto; /* blijft direct onder de topbar staan */
	background: transparent;
}

.site-header__inner {
	transition: min-height var(--header-duur) ease;
}

.site-logo {
	transform-origin: left center;
	transition: color var(--header-duur) ease, transform var(--header-duur) ease;
}

/* Lijn in plaats van rand: een rand zou de pagina 1px verschuiven */
.site-header.is-vast {
	box-shadow: 0 1px 0 var(--track);
}

.site-header.is-vast:not(.is-open) .site-header__inner {
	min-height: var(--header-vast);
}

/* Header over de hero: lag al buiten de flow, dus vast zonder dat de pagina verspringt */
.site-header.is-los {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

/* Zelfde ruimte in de flow als de hogere header, anders springt de pagina omhoog */
.site-header.is-vast:not(.is-los):not(.is-open) {
	margin-bottom: calc(var(--header-hoog) - var(--header-vast));
}

@media (min-width: 64.0625rem) {
	.site-nav__list > li > a {
		transition: color var(--header-duur) ease, font-size var(--header-duur) ease;
	}

	.site-nav__cta {
		transform-origin: right center;
		transition: background-color 0.2s ease, transform var(--header-duur) ease;
	}

	.site-header.is-vast .site-logo {
		transform: scale(0.84);
	}

	.site-header.is-vast .site-nav__list > li > a {
		font-size: 1rem;
	}

	.site-header.is-vast .site-nav__cta {
		transform: scale(0.86);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__inner,
	.site-logo,
	.site-nav__list > li > a,
	.site-nav__cta {
		transition: none;
	}
}

/* Homepage, Onze trainingen: de volgende edities */
.training__data {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	line-height: 1.4;
}

.training__data li {
	padding: 0.75rem 0;
	border-top: 1px solid rgba(11, 51, 66, 0.2);
}

.training__data li:last-child {
	border-bottom: 1px solid rgba(11, 51, 66, 0.2);
}

.training__locatie {
	display: block;
	font-size: 0.9375rem;
	opacity: 0.7;
}

.training__overleg {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Onze trainingen: twee kaarten naast elkaar; uitverkochte editie krijgt een neutrale badge */
.home .training__rechts {
	margin-top: 2rem;
}

.home .training .training__titel {
	margin-top: 2rem;
	font-size: clamp(1.75rem, 2.3vw, 2.45rem);
}

.training__badge--uitverkocht {
	background: var(--track);
	color: var(--ink);
}

/* Homepage cijfers: het teken > kleiner dan het getal */
.cijfer__teken {
	margin-right: 0.08em;
	font-size: 0.55em;
	vertical-align: 0.2em;
}

/* Homepage, Onze trainingen: knop naar Annelieke met haar foto in de pil */
.training__contact .knop__label {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding-left: 0.4rem;
}

.training__contact img {
	width: calc(var(--knop-h) - 0.8rem);
	height: calc(var(--knop-h) - 0.8rem);
	border-radius: 50%;
	object-fit: cover;
}

/* Homepage, Onze trainingen: foto zonder titel, even breed als de tekst eronder */
.home .training .training__kop {
	display: block;
	max-width: 32rem;
	margin-left: 0;
}

.home .training .training__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 321;
	object-fit: cover;
}

.home .training .training__body {
	margin-top: 2rem;
}

/* Footer: beeldmerk P rechts op de achtergrond, groot uitgesneden als lijntekening in blauw op ink (brandbook) */
.site-footer__vlak {
	position: relative;
	overflow: hidden;
}

.site-footer__vlak > *:not(.site-footer__p) {
	position: relative;
	z-index: 1;
}

.site-footer__p {
	position: absolute;
	top: 50%;
	right: clamp(-5rem, -3vw, -1.5rem);
	height: 125%;
	aspect-ratio: 33.95 / 43.351;
	transform: translateY(-50%);
	pointer-events: none;
}

.site-footer__p svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-footer__p path {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
	opacity: 0.2;
}

/* Telefoons en tablets: de footer is smal en hoog, de P staat rechtsonder */
@media (max-width: 64rem) {
	.site-footer__p {
		top: auto;
		right: -2rem;
		bottom: -3rem;
		width: min(80%, 30rem);
		height: auto;
		transform: none;
	}
}

/* Scores op dezelfde regel als de pijlen van de reviewslider (telefoons: eronder, daar is geen ruimte) */
@media (min-width: 48.0625rem) {
	.reviews + .review-bronnen {
		width: fit-content; /* breed genoeg voor de scores, de pijlen ernaast blijven klikbaar */
		margin: calc(-1 * var(--knop-h) + 0.05rem) auto 0;
	}
}

/* Aanbod: één training over de volle breedte, foto links en tekst rechts */
.aa-sectie .aa-trainingen {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64.0625rem) {
	.aa-sectie .aa-training {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--twee-gat);
		align-content: start;
	}

	.aa-sectie .aa-training > * {
		grid-column: 2;
	}

	.aa-sectie .aa-training .aa-training__foto {
		grid-column: 1;
		grid-row: 1 / span 12;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
	}
}

/* Trainingen in het menu: de volgende edities van de driedaagse */
.mega-kaart__edities {
	display: block;
	margin-top: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.mega-kaart__edities em {
	display: block;
	font-family: var(--font-serif);
	font-size: 0.9375rem;
}

.mega-kaart__edities span {
	display: block;
	white-space: nowrap;
}

/* Aanbod: ruimte boven de edities */
.aa-training .training__editie {
	margin-top: 1.5rem;
}

/* 404: grote foto met verloop in --ink, tekst op de inhoudslijn */
.nf__vlak {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: clamp(32rem, 82vh, 58rem);
	padding: 11.5rem var(--vlak-pad) clamp(3rem, 6vw, 5.5rem);
	border-radius: var(--r-groot);
	background: var(--ink);
	color: var(--white);
}

.nf__vlak::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(11, 51, 66, 0.9) 0, rgba(11, 51, 66, 0.55) 55%, rgba(11, 51, 66, 0.2) 100%), linear-gradient(180deg, rgba(11, 51, 66, 0.55) 0, rgba(11, 51, 66, 0) 35%), linear-gradient(0deg, rgba(11, 51, 66, 0.75) 0, rgba(11, 51, 66, 0.45) 55%, rgba(11, 51, 66, 0) 80%);
}

.nf__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nf__code {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(5rem, 13vw, 11rem);
	line-height: 1;
}

.nf__titel {
	margin: 0.5rem 0 2rem;
	max-width: 21em;
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: 1.1;
	color: var(--white);
}

/* ==========================================================================
   Auteurspagina's, bedank- en weggeverpagina's (author.php, parts/bedankt.php, page-big-five-*.php)
   ========================================================================== */

.au-profiel {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 46rem);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: clamp(3rem, 5vw, 5rem);
}

.au-profiel__foto {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-klein);
}

.au-profiel .lopend {
	margin-top: 1rem;
}

.au-profiel__links a {
	margin-left: 0.5rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dd-aanvraag__vlak > .kop + .dd-form {
	margin-top: 1.25rem;
}

/* Smalle desktop: de drie footerkolommen dichter op elkaar, anders past Kennisbank er niet naast */
@media (max-width: 78rem) {
	.site-footer__menus {
		column-gap: 1rem;
	}

	.site-footer__title {
		font-size: 1rem;
	}
}

/* Footer op tablet en telefoon: Kennisbank over de volle breedte in twee kolommen, zodat hij maar drie regels kost */
@media (max-width: 64rem) {
	.site-footer__menus > div:nth-child(3) {
		grid-column: 1 / -1;
	}

	.site-footer__menus > div:nth-child(3) .site-footer__links {
		display: block;
		columns: 2;
		column-gap: 2rem;
	}

	.site-footer__menus > div:nth-child(3) li {
		break-inside: avoid;
		margin-bottom: 0.75rem;
	}
}

@media (max-width: 48rem) {
	.site-footer__title {
		white-space: normal;
	}
}

/* "Persoonlijkheidstest" past niet in een halve kolom: Menu zo smal als nodig, de rest voor Testen en trainingen */
@media (min-width: calc(24rem + 1px)) and (max-width: 30rem) {
	.site-footer__menus {
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: 2rem;
	}
}

/* Lange knoppen op de weggeverpagina's passen op een smal scherm niet met pijl */
@media (max-width: 30rem) {
	.lp-knop .knop__pijl,
	#weggever_big_five_vs_disc .knop__pijl {
		display: none;
	}

	.lp-knop .knop__label,
	#weggever_big_five_vs_disc .knop__label {
		padding-inline: 1.1rem;
		font-size: 0.9375rem;
		white-space: nowrap;
	}
}

.kn-paginering {
	margin-top: 2.5rem;
}

.kn-paginering .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.kn-paginering .page-numbers.current {
	color: var(--accent);
}

.kn-meta a,
.kn-auteur__naam a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lp-tekst {
	max-width: 56rem;
	margin-top: clamp(3rem, 5vw, 5rem);
}

.lp-tekst .kop {
	margin-top: 3.5rem;
	margin-bottom: 1rem;
}

.lp-tekst .kop:first-child {
	margin-top: 0;
}

.lp-tekst .lopend p + p {
	margin-top: 1em;
}

.lp-tekst > .knop,
.lp-knop {
	margin-block: 2rem 1rem;
}

.lp-citaat {
	margin-top: 3rem;
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.3;
	color: var(--ink);
}

.lp-review {
	margin: 1.5rem 0 0;
	font-family: var(--font-serif);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ink);
}

.lp-review cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-style: normal;
}

@media (max-width: 48rem) {
	.au-profiel {
		grid-template-columns: minmax(0, 1fr);
	}

	.au-profiel__foto {
		max-width: 10rem;
	}
}