/* ==========================================================================
   Vera Funke Transformatie Therapie
   Eén stylesheet voor front én editor. Waarden komen uit het Figma-bestand
   "Vera Funke - Visual Design" (1440-frame, container 1232, tekstkolom 816).
   ========================================================================== */

/* Fonts, zelf gehost (Google Fonts, OFL) */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-latin-preload.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-preload.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Kleuren (Figma-variabelen) */
	--c-creme: #FCF2E8;          /* Grey 2, achtergrond */
	--c-wit: #FFFFFF;            /* Grey 1, niet meer als vlak gebruikt */
	--c-kaart: #F5E5D2;          /* kaartvlak: warm, tussen crème en de lijnkleur in */
	--c-lijn: #ECD5B6;           /* Grey 3, lijnen */
	--c-grijs: #6E6C66;          /* Grey 4, beschrijvingen */
	--c-donker: #36452B;         /* tekst en donkere vlakken; was #27331C (Figma), lichter op verzoek Vera 5-10 */
	--c-logo: #425333;           /* Logo en uitgelicht vlak (multiply) */
	--c-groen-licht: #CAD496;    /* Brand 3, lichtgroene vlakken */
	--c-label: #A9B27B;          /* Labels */
	--c-patroon: #B5BD8E;        /* Bladpatroon op donker */
	--c-oranje: #FF7B00;         /* Brand 1, knoppen */
	--c-oranje-hover: #E86F00;
	--c-oker: #F09807;           /* Illustratievlakken Over Vera (Figma) */
	--c-overlay: rgba(66, 83, 51, 0.4);   /* over foto/video, multiply */
	--c-kaart-donker: rgba(5, 33, 13, 0.9);

	/* Typografie */
	--font-heading: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-h1: 64px; --lh-h1: 64px;
	--fs-h2: 40px; --lh-h2: 48px;
	--fs-h3: 24px; --lh-h3: 32px;
	--fs-quote: 32px; --lh-quote: 40px;
	--fs-stat: 32px; --lh-stat: 40px;
	--fs-lead: 20px; --lh-lead: 40px;
	--fs-body: 16px; --lh-body: 32px;
	--fs-small: 16px; --lh-small: 24px;   /* minimaal 16px voor alle leestekst */
	--fs-btn: 14px; --tracking-btn: 0.06em;

	/* Maten (Spacing/Layout-variabelen) */
	--s-xxs: 8px; --s-xs: 16px; --s-s: 24px; --s-m: 32px; --s-l: 48px; --s-xl: 64px; --s-xxl: 80px; --s-xxxl: 128px;
	--container: 1232px;
	--narrow: 816px;
	--lees: 680px;            /* leesbreedte lopende tekst: ~70 tekens per regel */
	--col-6: 608px;
	--indent: 104px;
	--gutter: 16px;
	--side: 104px;
	--container-w: min(100vw - 2 * var(--side), var(--container));
	--bleed: max(0px, (100vw - var(--container-w)) / 2);
	--layout-spacing: 128px;   /* tussen blokken */
	--layout-top: 64px;        /* eerste blok na hero */
	--layout-bottom: 128px;    /* laatste blok voor footer */
	--article-spacing: 64px;   /* tussen tekstsecties */
	--btn-h: 48px;
	--radius-pill: 80px;
	--header-h: 112px;
	--shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, 0.16);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 1023px) {
	h1, h2, h3, .vf-h1, .vf-h2, .vf-h3 { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
	:root {
		--side: 16px;
		--header-h: 96px;
		--fs-h1: 48px; --lh-h1: 48px;
		--fs-h2: 32px; --lh-h2: 40px;
		--fs-quote: 24px; --lh-quote: 32px;
		--fs-lead: 18px; --lh-lead: 32px;
		--indent: 0px;
		--layout-spacing: 96px;
		--layout-bottom: 96px;
		--article-spacing: 48px;
	}
}
@media (min-width: 1024px) and (max-width: 1279px) {
	:root { --side: 48px; --indent: 48px; --header-h: 96px; }
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--c-creme);
	color: var(--c-donker);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
html.vf-nav-open, html.vf-nav-open body { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-donker); outline-offset: 3px; }
/* op donkere vlakken is donkergroen onzichtbaar: crème ring */
.vf-footer :focus-visible, .vf-hero-home :focus-visible, .vf-ervaring--donker :focus-visible,
.vf-ervaring--carrousel :focus-visible,
.vf-cta-kaart--donker :focus-visible, .vf-pakket--donker :focus-visible { outline-color: var(--c-creme); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vf-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 20px; background: var(--c-donker); color: var(--c-creme); border-radius: var(--radius-pill); }
.vf-skip:focus { top: 16px; }

/* Typografie */
h1, h2, h3, .vf-h1, .vf-h2, .vf-h3, .vf-quote, .vf-stat {
	font-family: var(--font-heading);
	font-weight: 300;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14, "wdth" 100;
	letter-spacing: 0;
	margin: 0;
	text-wrap: balance;
}
h1, .vf-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .vf-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .vf-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 400; }
h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tracking-btn); text-transform: uppercase; color: var(--c-logo); margin: 0; }
.vf-quote { font-weight: 200; font-size: var(--fs-quote); line-height: var(--lh-quote); }
.vf-stat { font-size: var(--fs-stat); line-height: var(--lh-stat); }
p { margin: 0; }
p + p, .vf-rich > * + *, .vf-tekst__inner > * + * { margin-top: var(--s-xs); }
.vf-rich h2 + *, .vf-rich h3 + *, .vf-tekst__inner h2 + *, .vf-tekst__inner h3 + * { margin-top: var(--s-xxs); }
.vf-rich * + h2, .vf-rich * + h3, .vf-tekst__inner * + h2, .vf-tekst__inner * + h3 { margin-top: var(--s-xl); }
/* koppen in lopende tekst: duidelijk groter en zwaarder dan de tekst eronder */
.vf-rich h2, .vf-tekst__inner h2 { font-size: var(--fs-quote); line-height: var(--lh-quote); font-weight: 400; }
.vf-rich h3, .vf-tekst__inner h3 { font-weight: 400; }
.vf-rich * + h4, .vf-tekst__inner * + h4 { margin-top: var(--s-m); }
.vf-rich h4 + *, .vf-tekst__inner h4 + * { margin-top: var(--s-xxs); }
.vf-rich ul, .vf-rich ol, .vf-tekst__inner ul, .vf-tekst__inner ol { margin: 0; padding-left: 24px; }
.vf-rich a, .vf-tekst__inner a { text-decoration: underline; }
/* prijsregel in een aanbod: groot genoeg om te vinden, met de voorwaarde ernaast */
.vf-prijsregel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-xxs); margin-top: var(--s-m); }
.vf-prijsregel strong { font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-stat); line-height: var(--lh-stat); font-variation-settings: "opsz" 14; }
.vf-prijsregel span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grijs); }
.vf-rich, .vf-tekst__inner, .vf-accordion__body, .vf-cta__tekst, .vf-ervaring-single__tekst { overflow-wrap: anywhere; }
.vf-rich a:hover, .vf-tekst__inner a:hover { text-decoration-color: var(--c-oranje); }
.vf-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.vf-small, .vf-eyebrow { font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-btn); font-weight: 500; }
.vf-eyebrow a { text-decoration: none; }
strong { font-weight: 600; }
hr, .wp-block-separator { border: 0; border-top: 1px solid var(--c-lijn); margin: var(--s-m) 0; }
.wp-block-image img { width: 100%; }
.wp-block-image figcaption { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grijs); margin-top: var(--s-xxs); }
.wp-block-quote { margin: 0; padding: 0; border: 0; font-family: var(--font-heading); font-weight: 200; font-size: var(--fs-quote); line-height: var(--lh-quote); font-variation-settings: "opsz" 14; }
.wp-block-quote cite { display: block; margin-top: var(--s-xs); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); font-style: normal; color: var(--c-grijs); }
.wp-block-table { margin-inline: 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border: 0; border-collapse: collapse; border-top: 1px solid var(--c-lijn); }
.wp-block-table td, .wp-block-table th { padding: 12px 16px 12px 0; border: 0; border-bottom: 1px solid var(--c-lijn); text-align: left; vertical-align: top; line-height: var(--lh-small); }
.wp-block-table th { font-weight: 600; }
.wp-block-table td:last-child, .wp-block-table th:last-child { white-space: nowrap; padding-right: 0; }
.wp-block-table a { text-decoration: underline; }
.wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-m); }
/* knoppen uit de editor krijgen dezelfde vorm als de themaknoppen */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xxs); min-height: var(--btn-h); padding: 8px var(--s-m); border: 1px solid var(--c-oranje); border-radius: var(--radius-pill); background: var(--c-oranje); color: var(--c-donker); box-shadow: var(--shadow-btn-primary); font-family: var(--font-body); font-size: var(--fs-btn); font-weight: 500; line-height: 24px; letter-spacing: var(--tracking-btn); text-transform: uppercase; text-decoration: none; }
.wp-block-button__link:hover { background: var(--c-oranje-hover); border-color: var(--c-oranje-hover); }
.vf-rich .wp-block-button__link, .vf-tekst__inner .wp-block-button__link { text-decoration: none; }
.wp-block-button.is-style-outline .wp-block-button__link { background: var(--c-creme); border-color: var(--c-donker); color: var(--c-donker); box-shadow: var(--shadow-btn); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--c-donker); color: var(--c-creme); }

/* Layout */
.vf-container { width: var(--container-w); margin-inline: auto; }
.vf-narrow { max-width: var(--narrow); }
.vf-section { padding-block: var(--layout-top) var(--layout-bottom); }
.vf-section--strak { padding-top: 0; }
.vf-block { position: relative; }
.vf-block + .vf-block { margin-top: var(--layout-spacing); }
.vf-block--vol + .vf-block--vol { margin-top: 0; }
.vf-block--artikel + .vf-block--artikel { margin-top: var(--article-spacing); }
.vf-main > .vf-block:first-child { margin-top: 0; }
.vf-main > .vf-block:not(.vf-block--vol):first-child { margin-top: var(--layout-top); }
.vf-main > .vf-block:last-child { margin-bottom: var(--layout-bottom); }
.vf-main > .vf-block--vol:last-child { margin-bottom: 0; }
.vf-hero-pagina + .vf-block, .vf-hero-home + .vf-block { margin-top: var(--layout-top); }
.vf-main > .vf-block.vf-hero-pagina:first-child, .vf-main > .vf-block.vf-hero-home:first-child { margin-top: 0; }
.vf-hero-pagina + .vf-block--vol { margin-top: var(--layout-top); }

/* Knoppen */
.vf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xxs);
	min-height: var(--btn-h); padding: 8px var(--s-m);
	border-radius: var(--radius-pill); border: 1px solid transparent;
	font-family: var(--font-body); font-size: var(--fs-btn); font-weight: 500; line-height: 24px; letter-spacing: var(--tracking-btn); text-transform: uppercase;
	text-decoration: none; text-align: center; cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.vf-btn:hover { text-decoration: none; }
.vf-btn--primary { background: var(--c-oranje); border-color: var(--c-oranje); color: var(--c-donker); box-shadow: var(--shadow-btn-primary); }
.vf-btn--primary:hover { background: var(--c-oranje-hover); border-color: var(--c-oranje-hover); }
.vf-btn--outline, .vf-btn--light { background: var(--c-creme); border-color: var(--c-donker); color: var(--c-donker); box-shadow: var(--shadow-btn); }
.vf-btn--outline:hover, .vf-btn--light:hover { background: var(--c-donker); color: var(--c-creme); }
.vf-btn--donker { background: var(--c-donker); border-color: var(--c-donker); color: var(--c-creme); }
.vf-btn--text { background: none; border: 0; padding: 10px 0; min-height: 44px; box-shadow: none; }
.vf-btn--text:hover { text-decoration: underline; }
.vf-btn--rond { width: var(--btn-h); height: var(--btn-h); padding: 0; }
.vf-btn .vf-icon, .vf-icon { flex: none; width: 20px; height: 20px; }
.vf-btn:disabled { opacity: 0.4; cursor: default; }
.vf-link-pijl { display: inline-flex; align-items: center; gap: var(--s-xxs); padding: 4px 0; text-decoration: none; font-size: var(--fs-btn); font-weight: 500; line-height: 24px; letter-spacing: var(--tracking-btn); text-transform: uppercase; }
.vf-link-pijl:hover { text-decoration: underline; }
.vf-knoppen { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
@media (max-width: 767px) { .vf-knoppen .vf-btn { flex: 1 1 auto; } }

/* Decoratie: bladpatroon (masker in currentColor) */
.vf-decor { position: absolute; pointer-events: none; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.vf-decor--boom { right: 0; top: 0; width: 384px; height: 360px; -webkit-mask-image: url("../img/patroon-boom.svg"); mask-image: url("../img/patroon-boom.svg"); }
.vf-decor--cta { left: 53.59%; top: -38.12%; width: 62.99%; height: 276%; -webkit-mask-image: url("../img/patroon-cta.svg"); mask-image: url("../img/patroon-cta.svg"); }

/* Labels */
.vf-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.vf-tags li { background: var(--c-label); color: var(--c-donker); font-size: var(--fs-small); line-height: var(--lh-small); padding: 4px 14px; border-radius: 16px; }

/* Lees meer */
/* dicht: rij van 0fr, inhoud onzichtbaar en niet focusbaar (visibility wisselt pas na de inklap-animatie) */
.vf-leesmeer__inhoud { display: grid; grid-template-rows: 0fr; margin: 0; transition: grid-template-rows 0.4s var(--ease); }
.vf-leesmeer__inhoud > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.4s; }
.vf-leesmeer__inhoud > div > :first-child, .vf-leesmeer__inhoud > div > * + * { margin-top: var(--s-xs); }
.vf-leesmeer.is-open .vf-leesmeer__inhoud { grid-template-rows: 1fr; }
.vf-leesmeer.is-open .vf-leesmeer__inhoud > div { visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .vf-leesmeer__inhoud, .vf-leesmeer__inhoud > div { transition: none; } }
.vf-leesmeer__teaser > * + * { margin-top: var(--s-xs); }
.vf-leesmeer__knop { margin-top: var(--s-xxs); }
.vf-leesmeer__knop .vf-icon { transition: transform 0.3s var(--ease); }
.vf-leesmeer__knop[aria-expanded="true"] .vf-icon { transform: rotate(180deg); }
.vf-leesmeer.is-open .vf-leesmeer__puntjes { display: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.vf-header { position: sticky; top: 0; z-index: 100; background: var(--c-creme); border-bottom: 1px solid var(--c-donker); }
.admin-bar .vf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vf-header { top: 46px; } }
.vf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); min-height: var(--header-h); padding-block: var(--s-xs); }
.vf-header__logo { display: flex; align-items: center; gap: var(--s-xs); flex: none; color: var(--c-logo); text-decoration: none; }
/* praktijknaam naast het logo (Vera, 5-10) */
.vf-header__naam { display: grid; font-family: var(--font-heading); font-variation-settings: "opsz" 14; font-size: 20px; line-height: 24px; font-weight: 400; color: var(--c-donker); }
.vf-header__naam span:first-child { font-weight: 500; font-size: 1.2em; line-height: 1.1; }
/* even breed als "Vera Funke" erboven: 0.4841 x 1.2em */
.vf-header__naam span:last-child { font-size: 0.5809em; line-height: 1.3; }
.vf-header__logo-img { width: auto; height: 80px; }
/* logo in een vlak in de knopkleur (keuze Tufan 29-9, eerst oker zoals op de huidige site) */
.vf-lockup { display: grid; place-items: center; width: 72px; height: 72px; background: var(--c-oranje); }
.vf-lockup__boom { width: 45px; height: 61px; }
.vf-lockup__boom svg { width: 100%; height: 100%; }
.vf-header__toggle { display: none; }
.vf-nav { display: flex; align-items: center; gap: var(--s-s); }
.vf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-s); }
.vf-nav__item { position: relative; display: flex; align-items: center; }
/* oproepknop alleen in het uitklapmenu; op desktop staat de zwevende knop rechtsonder (20-10) */
@media (min-width: 1024px) { .vf-nav__cta { display: none; } }
.vf-nav__link { display: inline-flex; align-items: center; gap: var(--s-xxs); padding: 4px 0; font-size: var(--fs-btn); font-weight: 500; line-height: 24px; letter-spacing: var(--tracking-btn); text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.vf-nav__item:hover > .vf-nav__link { border-bottom-color: var(--c-donker); }
.vf-nav__expand { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 2px; padding: 0; background: none; border: 0; cursor: pointer; }
.vf-nav__expand .vf-icon { transition: transform 0.25s var(--ease); }
.vf-nav__item.is-expanded > .vf-nav__expand .vf-icon { transform: rotate(180deg); }
.vf-nav__sub {
	list-style: none; margin: 0; padding: var(--s-xs) 0;
	position: absolute; top: 100%; left: -24px; min-width: 370px;
	background: var(--c-creme); border: 1px solid var(--c-lijn); box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.vf-nav__item.is-expanded > .vf-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vf-nav__sub .vf-nav__item { display: block; }
.vf-nav__sub .vf-nav__link { display: flex; align-items: center; min-height: 44px; padding: 10px var(--s-s); border: 0; }
.vf-nav__sub .vf-nav__link:hover { text-decoration: underline; }

/* Volledig menu vanaf 1024 px, met een compactere header tot 1440 px; daaronder (tablet en mobiel) het uitklapmenu (5-10, 20-10). */
@media (min-width: 1024px) and (max-width: 1439px) {
	.vf-nav, .vf-nav__list { gap: var(--s-xs); }
	.vf-header__naam { font-size: 17px; line-height: 22px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
	.vf-lockup { width: 56px; height: 56px; }
	.vf-lockup__boom { width: 35px; height: 47px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
	.vf-nav, .vf-nav__list { gap: 12px; }
	.vf-header__naam { font-size: 16px; line-height: 20px; }
}
@media (max-width: 1023px) {
	.vf-header__logo-img { height: 64px; }
	.vf-lockup { width: 56px; height: 56px; }
	.vf-lockup__boom { width: 35px; height: 47px; }
	.vf-header__naam { font-size: 18px; line-height: 22px; }
	.vf-header__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer; }
	.vf-header__toggle .vf-icon { width: 20px; height: 20px; }
	.vf-header__toggle .vf-icon--close { display: none; }
	.vf-header.is-open .vf-header__toggle .vf-icon--menu { display: none; }
	.vf-header.is-open .vf-header__toggle .vf-icon--close { display: block; }
	.vf-nav {
		position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
		flex-direction: column; align-items: stretch; gap: var(--s-xl);
		padding: var(--s-xl) var(--side) var(--s-xxxl); overflow-y: auto;
		background: var(--c-creme);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
	}
	.vf-header.is-open .vf-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.vf-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.vf-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--c-donker); }
	.vf-nav__link { flex: 1; padding: var(--s-xs) 0; border: 0; white-space: normal; }
	.vf-nav { overflow-x: hidden; }
	.vf-nav__expand { width: 48px; height: 48px; margin: 0; }
	.vf-nav__expand .vf-icon { transform: rotate(-90deg); }
	.vf-nav__item.is-expanded > .vf-nav__expand .vf-icon { transform: rotate(0deg); }
	.vf-nav__sub { position: static; width: 100%; min-width: 0; border: 0; box-shadow: none; padding: 0 0 var(--s-xs); background: none; display: none; opacity: 1; visibility: visible; transform: none; }
	.vf-nav__item.is-expanded > .vf-nav__sub { display: block; }
	.vf-nav__sub .vf-nav__item { border: 0; }
	.vf-nav__sub .vf-nav__link { display: flex; align-items: center; min-height: 44px; padding: var(--s-xxs) 0 var(--s-xxs) var(--s-s); }
	.vf-nav__cta .vf-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.vf-footer { background: var(--c-donker); color: var(--c-creme); }
.vf-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); padding: var(--s-m) 0 var(--s-xl); }
.vf-footer__col { display: grid; gap: var(--s-m); align-content: start; }
.vf-footer__title { font-size: var(--fs-h3); line-height: var(--lh-h3); color: inherit; }
.vf-footer__menu, .vf-footer__contact, .vf-footer__legal, .vf-footer__badges { list-style: none; margin: 0; padding: 0; }
.vf-footer__menu, .vf-footer__contact { display: grid; gap: var(--s-xxs); justify-items: start; }
.vf-footer__menu a, .vf-footer__contact a, .vf-footer__contact span { display: inline-flex; align-items: center; gap: var(--s-xxs); padding: 4px 0; font-size: var(--fs-btn); font-weight: 500; line-height: 24px; letter-spacing: var(--tracking-btn); text-transform: uppercase; text-decoration: none; }
.vf-footer__menu a:hover, .vf-footer__contact a:hover { text-decoration: underline; }
.vf-footer__menu li.menu-item-scheiding { border-top: 1px solid var(--c-lijn); padding-top: var(--s-xxs); margin-top: 0; width: 296px; max-width: 100%; }
.vf-footer__contact li { display: flex; align-items: flex-start; gap: var(--s-xxs); }
.vf-footer__contact .vf-icon { margin-top: 6px; }
.vf-footer__contact span { padding: 0; }
.vf-footer__lijn { height: 1px; width: 296px; max-width: 100%; background: var(--c-lijn); }
.vf-footer__bottom { display: flex; align-items: center; gap: var(--gutter); padding: var(--s-s) 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-m); flex: 1; }
.vf-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.vf-footer__copy { margin: 0; }
.vf-footer__cookie { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.vf-footer__badges { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-xs); }
.vf-footer__badges img { height: 48px; width: auto; max-width: 112px; object-fit: contain; background: var(--c-creme); padding: 4px 8px; border-radius: 4px; transition: opacity 0.2s; }
.vf-footer__badges a:hover img { opacity: 0.85; }
@media (max-width: 1023px) {
	.vf-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-m); padding: var(--s-l) 0 var(--s-m); }
	.vf-footer__col { gap: var(--s-xs); }
	.vf-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-m); }
	.vf-footer__badges { order: -1; justify-content: flex-start; flex-wrap: wrap; gap: var(--s-xxs); }
	.vf-footer__legal { gap: var(--s-xxs) var(--s-xs); }
}

/* --------------------------------------------------------------------------
   Hero home (video)
   -------------------------------------------------------------------------- */
.vf-hero-home { position: relative; isolation: isolate; color: var(--c-creme); }
.vf-hero-home__media { position: absolute; inset: 0; z-index: -1; background: var(--c-donker); overflow: hidden; }
.vf-hero-home__media video, .vf-hero-home__media img { width: 100%; height: 100%; object-fit: cover; }
.vf-hero-home__media::after { content: ""; position: absolute; inset: 0; background: var(--c-overlay); mix-blend-mode: multiply; }
.vf-hero-home__inner { display: grid; gap: var(--s-m); padding-block: var(--s-xxxl); justify-items: start; }
.vf-hero-home__titel { color: inherit; }
.vf-hero-home__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); width: 100%; }
.vf-kaart-lijst { background: var(--c-groen-licht); color: var(--c-donker); padding: var(--s-m); display: grid; gap: var(--s-xs); align-content: start; }
.vf-kaart-lijst__kop { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-kaart-lijst ul { margin: 0; padding-left: 24px; }
.vf-hero-home__slot { font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; }
/* propositie en knoppen direct onder de titel: meteen duidelijk wat het is en waar */
.vf-hero-home__lead { max-width: 760px; font-size: var(--fs-lead); line-height: var(--lh-lead); margin: calc(-1 * var(--s-xs)) 0 0; }
.vf-hero-home__knoppen { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
@media (max-width: 1023px) {
	/* Mobiel: de foto loopt door tot onder de kaarten, zodat alle tekst op de foto staat en licht kan zijn
	   (29-9: tekst viel eerder half op de foto, half ernaast, en was daar onleesbaar). */
	.vf-hero-home__media { inset: 0; }
	.vf-hero-home__media::after { background: rgba(28, 36, 20, 0.55); mix-blend-mode: normal; }
	.vf-hero-home__inner { padding-block: var(--s-l); }
	.vf-hero-home__kaarten { grid-template-columns: minmax(0, 1fr); }
	.vf-kaart-lijst { padding: var(--s-s); }
	.vf-hero-home__inner .vf-btn { width: 100%; }
	.vf-hero-home__knoppen { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero pagina
   -------------------------------------------------------------------------- */
.vf-hero-pagina { overflow-x: clip; }
.vf-hero-pagina__grid { display: flex; gap: var(--s-xxl); align-items: center; }
.vf-hero-pagina__tekst { flex: 1 1 0; min-width: 0; max-width: var(--narrow); display: grid; gap: var(--s-m); padding-block: var(--s-xl); }
.vf-hero-pagina__tekst .vf-eyebrow { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: calc(-1 * var(--s-xs)); }
.vf-hero-pagina__intro { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.vf-hero-pagina__intro--klein { font-size: var(--fs-body); line-height: var(--lh-body); }
.vf-hero-pagina__knoppen { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.vf-hero-pagina__feiten { display: flex; gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.vf-hero-pagina__feiten li { flex: 1 1 0; font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-stat); line-height: var(--lh-stat); font-variation-settings: "opsz" 14; }
.vf-hero-pagina__beeld { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 1; align-self: stretch; overflow: hidden; margin-right: calc(-1 * var(--bleed)); }
.vf-hero-pagina__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vf-hero-pagina__beeld--groen { background: var(--c-patroon); }
.vf-hero-pagina__beeld--groen img { object-fit: cover; object-position: center top; }
.vf-hero-pagina--zonder-beeld .vf-hero-pagina__tekst { padding-top: var(--s-xl); padding-bottom: var(--s-m); }
.vf-hero-pagina--zonder-beeld + .vf-block { margin-top: 0; }
@media (max-width: 1023px) {
	.vf-hero-pagina__grid { flex-direction: column; gap: var(--s-m); }
	.vf-hero-pagina--beeld-eerst .vf-hero-pagina__grid { flex-direction: column-reverse; }
	/* Overal dezelfde ruimte tussen header en eerste regel (29-9: tarieven en therapieën stonden er strak tegenaan). */
	.vf-hero-pagina__tekst, .vf-hero-pagina--zonder-beeld .vf-hero-pagina__tekst { padding-top: var(--s-xl); max-width: none; width: 100%; }
	.vf-hero-pagina--beeld-eerst .vf-hero-pagina__tekst { padding-top: 0; }
	.vf-hero-pagina__beeld { width: calc(100% + 2 * var(--side)); margin: 0 calc(-1 * var(--side)); flex: none; }
	.vf-hero-pagina__feiten { flex-direction: column; gap: var(--s-xs); }
	.vf-hero-pagina__knoppen .vf-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Klachten (labels) en tekstkolom
   -------------------------------------------------------------------------- */
.vf-klachten .vf-narrow, .vf-accordion .vf-narrow, .vf-tekst .vf-narrow { margin-inline: auto; }
.vf-klachten__inner { display: grid; gap: var(--s-m); }
.vf-klachten__tekst { display: grid; gap: var(--s-xs); }
/* Herken je dit, interactief: labels als tabs, per label een slide. Zonder JS staan de slides onder elkaar. */
.vf-klachten__slider { display: grid; gap: var(--s-s); }
.vf-klachten__tabs { display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.vf-klachten__tab { font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); padding: 6px 16px; border-radius: 999px; border: 1px solid var(--c-label); background: var(--c-label); color: var(--c-donker); cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.vf-klachten__tab:hover { background: transparent; }
.vf-klachten__tab[aria-selected="true"] { background: var(--c-donker); border-color: var(--c-donker); color: var(--c-creme); }
.vf-klachten__tab:focus-visible { outline: 2px solid var(--c-donker); outline-offset: 2px; }
.vf-klachten__panelen { position: relative; display: grid; gap: var(--s-s); }
.vf-klachten__paneel { background: var(--c-kaart); padding: var(--s-m) var(--s-m) calc(var(--s-m) + var(--btn-h)); display: grid; gap: var(--s-xxs); align-content: start; }
.vf-klachten__paneel p:last-child { font-size: var(--fs-lead, 20px); line-height: 1.5; margin: 0; }
.vf-klachten__teller { margin: 0; font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--c-grijs); }
.vf-klachten__nav { display: none; }
.vf-klachten__slider.is-js .vf-klachten__panelen { gap: 0; }
.vf-klachten__slider.is-js .vf-klachten__paneel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(32px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s; }
.vf-klachten__slider.is-js .vf-klachten__paneel.is-links { transform: translateX(-32px); }
.vf-klachten__slider.is-js .vf-klachten__paneel.is-actief { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s; }
.vf-klachten__slider.is-js .vf-klachten__nav { display: flex; gap: var(--s-xxs); position: absolute; right: var(--s-m); bottom: var(--s-s); grid-area: 1 / 1; }
@media (prefers-reduced-motion: reduce) { .vf-klachten__slider.is-js .vf-klachten__paneel { transition: none; transform: none; } }
@media (max-width: 767px) { .vf-klachten__slider.is-js .vf-klachten__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--side)); padding-inline: var(--side); } .vf-klachten__slider.is-js .vf-klachten__tabs::-webkit-scrollbar { display: none; } .vf-klachten__tab { white-space: nowrap; flex: 0 0 auto; } }
.vf-tekst--breed .vf-narrow { max-width: none; }
/* lopende tekst smaller dan de rest van de kolom: onder de 75 tekens per regel */
.vf-tekst__inner > p, .vf-tekst__inner > ul, .vf-tekst__inner > ol, .vf-tekst__inner > h2, .vf-tekst__inner > h3, .vf-tekst__inner > h4,
.vf-accordion__body > p, .vf-accordion__body > ul, .vf-accordion__body > ol,
.vf-ervaring-single__tekst > p { max-width: var(--lees); }
.vf-tekst--breed .vf-tekst__inner > * { max-width: none; }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
.vf-accordion__inner { display: grid; gap: var(--s-m); }
.vf-accordion__lijst { border-top: 1px solid var(--c-lijn); }
.vf-accordion__item { border-bottom: 1px solid var(--c-lijn); }
.vf-accordion__kop { display: flex; align-items: center; gap: var(--s-xs); padding: var(--s-xs) 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; }
.vf-accordion__kop::-webkit-details-marker { display: none; }
.vf-accordion__kop span { flex: 1; }
.vf-accordion__kop .vf-icon { transition: transform 0.3s var(--ease); }
.vf-accordion__item[open] > .vf-accordion__kop .vf-icon { transform: rotate(180deg); }
.vf-accordion__body { padding: 0 0 var(--s-m); }
.vf-accordion__body > * + * { margin-top: var(--s-xs); }
.vf-accordion__body * + h4 { margin-top: var(--s-m); }
.vf-accordion__body ul, .vf-accordion__body ol { margin: 0; padding-left: 24px; }

/* --------------------------------------------------------------------------
   Therapieën
   -------------------------------------------------------------------------- */
.vf-therapieen__inner { display: grid; gap: var(--s-m); }
/* Links de lijst met therapieën, rechts wat je aanwijst: sfeerbeeld, uitleg en een knop. */
.vf-therapieen__paneel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: stretch; }
.vf-therapieen__keuze { display: grid; gap: var(--s-xxs); margin: 0; padding: 0; list-style: none; }
.vf-therapieen__keuze > li { display: grid; }
.vf-therapie-keuze { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-xs); min-height: 96px; padding: var(--s-s); background: var(--c-groen-licht); color: var(--c-donker); text-decoration: none; transition: background-color 0.25s var(--ease), padding-left 0.25s var(--ease); }
.vf-therapie-keuze__titel { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; }
.vf-therapie-keuze__kort { display: none; grid-column: 1 / -1; font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-therapie-keuze .vf-icon { flex: none; transition: transform 0.25s var(--ease); }
.vf-therapie-keuze:hover, .vf-therapie-keuze:focus-visible, .vf-therapie-keuze.is-actief { background: var(--c-donker); color: var(--c-creme); text-decoration: none; padding-left: var(--s-m); }
.vf-therapie-keuze:hover .vf-icon, .vf-therapie-keuze.is-actief .vf-icon { transform: translateX(4px); }
/* vaste hoogte: het paneel verspringt niet als de ene therapie meer tekst heeft dan de andere */
.vf-therapieen__detail { position: relative; min-height: 572px; }
.vf-therapie-detail { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--s-s); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease); }
.vf-therapie-detail.is-actief { position: relative; opacity: 1; visibility: visible; }
.vf-therapie-detail__beeld { overflow: hidden; height: 340px; }
.vf-therapie-detail__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vf-therapie-detail__tekst { display: grid; gap: var(--s-xs); justify-items: start; }
.vf-therapie-detail__titel { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; margin: 0; }
.vf-therapie-detail__kort { margin: 0; min-height: 72px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vf-therapie-detail .vf-icon { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .vf-therapie-detail, .vf-therapie-keuze, .vf-therapie-keuze .vf-icon { transition: none; } }
@media (max-width: 1023px) {
	/* smal scherm: geen aanwijzen, dus alles in de lijst zelf */
	.vf-therapieen__paneel { grid-template-columns: minmax(0, 1fr); }
	.vf-therapieen__detail { display: none; }
	.vf-therapie-keuze { grid-template-columns: 1fr auto; align-items: start; row-gap: var(--s-xxs); min-height: 0; }
	.vf-therapie-keuze__kort { display: block; }
	.vf-therapie-keuze .vf-icon { grid-column: 2; grid-row: 1; align-self: center; }
	.vf-therapie-keuze:hover, .vf-therapie-keuze.is-actief { background: var(--c-groen-licht); color: var(--c-donker); padding-left: var(--s-s); }
	.vf-therapie-keuze:hover .vf-icon, .vf-therapie-keuze.is-actief .vf-icon { transform: none; }
}

/* --------------------------------------------------------------------------
   Ervaringen: kaart, carrousel, archief
   -------------------------------------------------------------------------- */
.vf-ervaring { position: relative; display: flex; flex-direction: column; gap: var(--s-xs); padding: var(--s-m); background: var(--c-kaart); color: var(--c-donker); overflow: hidden; isolation: isolate; }
.vf-ervaring--donker { background: var(--c-donker); color: var(--c-creme); }
.vf-ervaring--licht { background: var(--c-groen-licht); }
.vf-ervaring__decor { z-index: -1; color: var(--c-patroon); }
.vf-ervaring--licht .vf-ervaring__decor { color: var(--c-creme); opacity: 0.6; }
.vf-ervaring__body { display: grid; gap: var(--s-xxs); justify-items: start; }
.vf-ervaring__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-ervaring__tekst { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.vf-ervaring__body .vf-btn { margin-top: var(--s-xxs); }
.vf-ervaring__meta { display: flex; justify-content: space-between; gap: var(--s-xs); font-size: var(--fs-small); line-height: var(--lh-small); margin-top: auto; }

/* Groot (uitgelicht) in het archief */
.vf-ervaring--groot { padding: var(--s-xl) var(--s-xl) var(--s-m); justify-content: space-between; min-height: 348px; }
/* boom rechtsonder, klein genoeg om de tekst rustig te laten */
.vf-ervaring--groot .vf-ervaring__decor { top: auto; bottom: 0; right: 0; width: 248px; height: 232px; }
.vf-ervaring__quote { margin: 0; font-family: var(--font-heading); font-weight: 200; font-size: var(--fs-quote); line-height: var(--lh-quote); font-variation-settings: "opsz" 14; max-width: 688px; }
.vf-ervaring--groot .vf-ervaring__body { gap: var(--s-xs); }
.vf-ervaring--groot .vf-ervaring__meta { max-width: 688px; width: 100%; }

/* Carrousel */
.vf-ervaringen__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-m); }
.vf-carrousel { position: relative; min-width: 0; width: 100%; --kaart-b: min(816px, 100vw - 2 * var(--side)); }
.vf-carrousel__track { display: flex; gap: var(--s-l); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-inline: max(var(--side), (100vw - var(--kaart-b)) / 2); scrollbar-width: none; }
.vf-carrousel__track::-webkit-scrollbar { display: none; }
.vf-carrousel__track > * { flex: 0 0 var(--kaart-b); scroll-snap-align: center; }
.vf-ervaring--carrousel { flex-direction: row; align-items: center; gap: var(--s-m); height: 360px; padding: var(--s-l) var(--s-xl); background: var(--c-donker); color: var(--c-creme); }
.vf-ervaring--carrousel .vf-ervaring__body { flex: 1 1 0; min-width: 0; gap: var(--s-xs); display: grid; }
.vf-ervaring--carrousel .vf-ervaring__titel { font-weight: 200; font-size: var(--fs-quote); line-height: var(--lh-quote); }
.vf-ervaring--carrousel .vf-ervaring__tekst { font-family: var(--font-heading); font-weight: 200; font-size: 16px; line-height: 24px; font-variation-settings: "opsz" 14; max-height: 120px; }
/* naam en datum onderaan de kaart, met een haarlijn los van het citaat */
.vf-ervaring--carrousel .vf-ervaring__body { grid-template-rows: auto auto 1fr; align-self: stretch; }
.vf-ervaring--carrousel .vf-ervaring__meta { width: 100%; margin: 0; align-self: end; padding-top: var(--s-xs); border-top: 1px solid rgba(252, 242, 232, 0.25); align-items: baseline; font-family: var(--font-heading); font-weight: 300; font-variation-settings: "opsz" 14; }
.vf-ervaring--carrousel .vf-ervaring__naam { font-size: 20px; line-height: 24px; }
.vf-ervaring--carrousel .vf-ervaring__datum { font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-ervaring--carrousel .vf-ervaring__knop { flex: none; }
.vf-ervaring__meer { display: none; }
.vf-carrousel__nav { position: absolute; top: 50%; left: 50%; width: calc(var(--kaart-b) + var(--btn-h)); transform: translate(-50%, -50%); display: flex; justify-content: space-between; pointer-events: none; }
.vf-carrousel__knop { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: var(--btn-h); height: var(--btn-h); border-radius: var(--radius-pill); border: 0; background: var(--c-oranje); color: var(--c-donker); cursor: pointer; box-shadow: var(--shadow-btn-primary); transition: background-color 0.2s var(--ease), opacity 0.2s; }
.vf-carrousel__knop:hover { background: var(--c-oranje-hover); }
.vf-carrousel__knop:disabled { opacity: 0.35; cursor: default; }
.vf-ervaringen__alle { display: flex; justify-content: center; }
.vf-ervaringen__alle .vf-btn .vf-icon { width: 20px; height: 20px; }
/* buurkaarten zijn context, geen tweede aanbod: gedimd en zonder knop in de tabvolgorde */
.vf-carrousel__track > * { transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.vf-ervaringen .vf-carrousel__track > *:not(.is-actief) { background: var(--c-groen-licht); color: var(--c-donker); }
.vf-ervaringen .vf-carrousel__track > *:not(.is-actief) .vf-ervaring__decor { color: var(--c-creme); opacity: 0.6; }
.vf-ervaringen .vf-carrousel__track > *:not(.is-actief) .vf-ervaring__meta { border-top-color: rgba(39, 51, 28, 0.25); }
.vf-ervaringen .vf-carrousel__track > *:not(.is-actief) .vf-ervaring__knop { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .vf-carrousel__track > * { transition: none; } }

/* Keurmerken als eigen blok: in kleur en groot genoeg om te herkennen */
.vf-keurmerken__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s) var(--s-m); padding: var(--s-s) 0; border-top: 1px solid var(--c-lijn); border-bottom: 1px solid var(--c-lijn); }
.vf-keurmerken__tekst { margin: 0; flex: 1 1 280px; font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-keurmerken__lijst { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s); margin: 0; padding: 0; list-style: none; }
.vf-keurmerken__lijst img { height: 56px; width: auto; max-width: 132px; object-fit: contain; }
@media (max-width: 767px) { .vf-keurmerken__lijst img { height: 48px; } }

/* Vaste knop onderaan op mobiel: verschijnt na de eerste schermhoogte, verdwijnt bij de oproep, de agenda en de footer */
.vf-zwevende-cta { position: fixed; z-index: 90; display: flex; align-items: center; gap: var(--s-xxs); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; }
.vf-zwevende-cta.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.vf-zwevende-cta__tel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--c-donker); border-radius: var(--radius-pill); background: var(--c-creme); color: var(--c-donker); }
.vf-zwevende-cta__tel .vf-icon { width: 22px; height: 22px; }
/* telefoon breed: balk onderaan het scherm */
@media (max-width: 767px) {
	.vf-zwevende-cta { left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(252, 242, 232, 0.96); border-top: 1px solid var(--c-lijn); transform: translateY(110%); }
	.vf-zwevende-cta__knop { flex: 1 1 auto; }
}
/* vanaf tablet: zwevende knop rechtsonder */
@media (min-width: 768px) {
	.vf-zwevende-cta { right: var(--s-s); bottom: var(--s-s); transform: translateY(12px); }
	.vf-zwevende-cta__knop { box-shadow: 0 10px 30px rgba(23, 17, 14, 0.22); }
	.vf-zwevende-cta__tel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vf-zwevende-cta { transition: opacity 0.2s linear; transform: none; } }

@media (max-width: 1023px) {
	/* Mobiel en tablet: brede kaart met de hele tekst; de rij krijgt de hoogte van de actieve kaart (main.js),
	   de pijlen staan onder de kaart in plaats van ernaast. */
	.vf-carrousel { --kaart-b: min(560px, 100vw - 48px); }
	.vf-carrousel__track { gap: 12px; align-items: flex-start; overflow-y: hidden; transition: height 0.4s var(--ease); }
	.vf-ervaring--carrousel { flex-direction: column; align-items: stretch; height: auto; padding: var(--s-s); gap: var(--s-xs); justify-content: flex-start; }
	.vf-ervaring--carrousel .vf-ervaring__body { grid-template-rows: auto; }
	.vf-ervaring--carrousel .vf-ervaring__titel { font-size: 24px; line-height: 32px; }
	.vf-ervaring--carrousel .vf-ervaring__tekst { max-height: none; -webkit-line-clamp: 8; font-size: 17px; line-height: 27px; }
	.vf-ervaring--carrousel.is-open .vf-ervaring__tekst { -webkit-line-clamp: unset; display: block; overflow: visible; }
	.vf-ervaring__meer:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
	.vf-ervaring__meer .vf-icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
	.vf-ervaring--carrousel.is-open .vf-ervaring__meer .vf-icon { transform: rotate(180deg); }
	.vf-ervaring--carrousel .vf-ervaring__knop { display: none; } /* hele tekst staat al in de kaart */
	.vf-ervaring--carrousel .vf-ervaring__decor { top: auto; bottom: 0; width: 288px; height: 270px; }
	.vf-carrousel__nav { position: static; transform: none; width: auto; justify-content: center; gap: var(--s-xs); margin-top: var(--s-xs); }
}

/* Archief */
.vf-ervaringen-archief__inner { display: grid; gap: var(--s-xl); }
.vf-ervaringen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); grid-auto-flow: dense; }
.vf-ervaring--groot { grid-column: span 2; }
.vf-ervaringen-grid > .vf-ervaring--groot:nth-child(7) { grid-column: 2 / span 2; }
@media (max-width: 1023px) {
	.vf-ervaringen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vf-ervaringen-grid > .vf-ervaring--groot:nth-child(7) { grid-column: span 2; }
	.vf-ervaring--groot { padding: var(--s-m); }
}
@media (max-width: 639px) {
	.vf-ervaringen-grid { grid-template-columns: minmax(0, 1fr); }
	.vf-ervaring--groot, .vf-ervaringen-grid > .vf-ervaring--groot:nth-child(7) { grid-column: auto; }
}
.vf-ervaring-single__inner { display: grid; gap: var(--s-m); }
.vf-ervaring-single__meta { display: flex; justify-content: space-between; gap: var(--s-xs); color: var(--c-grijs); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-ervaring-single__tekst { margin: 0; padding: 0; display: grid; gap: var(--s-xs); }

/* Paginering */
.vf-paginering .nav-links { display: flex; justify-content: center; align-items: center; gap: var(--s-xs); }
.vf-paginering .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: var(--btn-h); height: var(--btn-h); text-decoration: none; font-size: var(--fs-body); line-height: 24px; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.vf-paginering .page-numbers + .page-numbers:not(.next) { margin-left: -8px; }
.vf-paginering .page-numbers.current { background: var(--c-donker); color: var(--c-creme); }
.vf-paginering a.page-numbers:not(.prev):not(.next):hover { background: var(--c-groen-licht); }
.vf-paginering .prev, .vf-paginering .next { border: 1px solid var(--c-donker); border-radius: var(--radius-pill); background: var(--c-creme); }
.vf-paginering .next { background: var(--c-donker); color: var(--c-creme); }
.vf-paginering .prev:hover { background: var(--c-donker); color: var(--c-creme); }
.vf-paginering .next:hover { background: var(--c-logo); }
.vf-paginering .dots { width: auto; padding: 0 4px; }

/* --------------------------------------------------------------------------
   Beeld en tekst (Media Text Pair)
   -------------------------------------------------------------------------- */
.vf-beeld-tekst__grid { display: flex; gap: var(--gutter); align-items: center; }
.vf-beeld-tekst__beeld { flex: 0 0 calc(50% - var(--gutter) / 2); min-width: 0; position: relative; aspect-ratio: 1; overflow: hidden; }
.vf-beeld-tekst__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vf-beeld-tekst__beeld--oker { background: var(--c-groen-licht); } /* was oker; rustiger naast de tekst (Vera, 5-10) */
.vf-beeld-tekst__beeld--groen { background: var(--c-groen-licht); }
.vf-beeld-tekst__beeld--oker img, .vf-beeld-tekst__beeld--groen img { position: absolute; inset: 0; object-fit: contain; object-position: right bottom; padding: 10% 0 8% 22%; }
.vf-beeld-tekst__beeld--illustratie svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vf-beeld-tekst__beeld--illustratie svg [fill="#FF7B00"] { fill: var(--c-groen-licht); } /* oranje vlak zit in de svg zelf */
.vf-beeld-tekst__beeld--spiegel svg { transform: scaleX(-1); }
.vf-beeld-tekst__tekst { flex: 0 0 calc(50% - var(--gutter) / 2); min-width: 0; display: grid; gap: var(--s-m); justify-items: start; padding-left: var(--indent); }
.vf-beeld-tekst--omgekeerd .vf-beeld-tekst__beeld { order: 2; }
.vf-beeld-tekst--omgekeerd .vf-beeld-tekst__tekst { padding-left: 0; padding-right: var(--indent); }
.vf-beeld-tekst__tekst .vf-rich { display: grid; gap: var(--s-xs); }
/* met lees-meer geen grid-gap: de dichte 0fr-rij zou anders een dubbele tussenruimte geven */
.vf-beeld-tekst__tekst .vf-rich.vf-leesmeer { display: block; }
.vf-beeld-tekst--boven .vf-beeld-tekst__grid { align-items: flex-start; }
@media (max-width: 1023px) {
	.vf-beeld-tekst__grid { flex-direction: column; gap: var(--s-m); }
	.vf-beeld-tekst__beeld, .vf-beeld-tekst__tekst { flex: none; width: 100%; padding: 0; }
	.vf-beeld-tekst--omgekeerd .vf-beeld-tekst__beeld { order: 0; }
	.vf-beeld-tekst--foto .vf-beeld-tekst__beeld { order: 2; }
}

/* --------------------------------------------------------------------------
   In de media (carrousel met witte kaarten)
   -------------------------------------------------------------------------- */
.vf-media__inner { display: grid; gap: var(--s-s); }
/* In de media: chronologische perslijst, jaartal groot, medium als label, hele regel klikbaar */
.vf-media__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-xs); padding-bottom: var(--s-xs); border-bottom: 1px solid var(--c-donker); }
.vf-media__telling { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tracking-btn); text-transform: uppercase; color: var(--c-grijs); }
.vf-media__lijst { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: pers; }
.vf-pers + .vf-pers { border-top: 1px solid var(--c-lijn); }
.vf-pers__rij { display: grid; grid-template-columns: 7em minmax(0, 1fr) 40px; gap: var(--s-m); align-items: start; padding: var(--s-s) var(--s-s) var(--s-s) 0; color: inherit; text-decoration: none; transition: background-color 0.25s var(--ease), padding-left 0.25s var(--ease); }
a.vf-pers__rij:hover, a.vf-pers__rij:focus-visible { background: var(--c-kaart); padding-left: var(--s-s); text-decoration: none; }
.vf-pers__jaar { font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-h2); font-variation-settings: "opsz" 14; color: var(--c-label); transition: color 0.25s var(--ease); }
a.vf-pers__rij:hover .vf-pers__jaar { color: var(--c-oker); }
.vf-pers__inhoud { display: grid; gap: 6px; }
.vf-pers__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xxs); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-pers__soort { padding: 2px 12px; border: 1px solid var(--c-donker); border-radius: var(--radius-pill); font-size: 13px; letter-spacing: var(--tracking-btn); text-transform: uppercase; }
.vf-pers__bron { color: var(--c-grijs); }
.vf-pers__titel { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; }
.vf-pers__tekst { font-size: var(--fs-small); line-height: var(--lh-small); max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-pers__pijl { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--c-donker); transition: background-color 0.25s var(--ease), transform 0.25s var(--ease); }
.vf-pers__pijl .vf-icon { width: 18px; height: 18px; }
a.vf-pers__rij:hover .vf-pers__pijl { background: var(--c-oranje); border-color: var(--c-oranje); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .vf-pers__rij, .vf-pers__jaar, .vf-pers__pijl { transition: none; } }
@media (max-width: 767px) {
	.vf-pers__rij { grid-template-columns: minmax(0, 1fr) 40px; gap: var(--s-xs); padding: var(--s-s) 0; }
	.vf-pers__jaar { grid-column: 1 / -1; font-size: var(--fs-h3); line-height: var(--lh-h3); }
	a.vf-pers__rij:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Oproep (CTA Banner)
   -------------------------------------------------------------------------- */
.vf-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-s); min-height: 320px; padding: var(--s-xl); background: var(--c-groen-licht); color: var(--c-donker); }
/* boom rechtsonder in het vak */
.vf-cta__decor { z-index: -1; color: var(--c-creme); top: auto; bottom: 0; right: 0; }
.vf-cta__body { display: grid; gap: var(--s-xs); max-width: 720px; justify-items: start; }
.vf-cta__knoppen { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.vf-cta__tekst { font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-cta__tekst p + p { margin-top: var(--s-xs); }
.vf-cta--donker { background: var(--c-donker); color: var(--c-creme); }
.vf-cta--donker .vf-cta__decor { color: var(--c-patroon); }
@media (max-width: 1023px) {
	.vf-cta { padding: var(--s-s); min-height: 0; }
	.vf-cta__decor { width: 240px; height: 225px; opacity: 0.7; }
	.vf-cta .vf-btn { width: 100%; }
}
/* twee oproepen direct na elkaar: naast elkaar in twee kolommen (bijv. /intakeformulieren/) */
@media (min-width: 768px) {
	.vf-main:has(> .vf-cta-blok + .vf-cta-blok) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vf-main:has(> .vf-cta-blok + .vf-cta-blok) > * { grid-column: 1 / -1; }
	.vf-main > .vf-cta-blok:has(+ .vf-cta-blok), .vf-main > .vf-cta-blok + .vf-cta-blok { grid-column: auto; }
	.vf-main > .vf-cta-blok:has(+ .vf-cta-blok) > .vf-container { width: auto; height: 100%; margin-left: calc(100% - var(--container-w) / 2); margin-right: calc(var(--gutter) / 2); }
	.vf-main > .vf-cta-blok + .vf-cta-blok > .vf-container { width: auto; height: 100%; margin-left: calc(var(--gutter) / 2); margin-right: calc(100% - var(--container-w) / 2); }
	.vf-main > .vf-cta-blok:has(+ .vf-cta-blok) .vf-cta, .vf-main > .vf-cta-blok + .vf-cta-blok .vf-cta { height: 100%; }
	/* zelfde marges als de eerste kaart, anders staan ze niet op één lijn */
	.vf-main > .vf-hero-pagina + .vf-cta-blok + .vf-cta-blok { margin-top: var(--layout-top); }
	.vf-main > .vf-hero-pagina--zonder-beeld + .vf-cta-blok + .vf-cta-blok { margin-top: 0; }
	.vf-main > .vf-cta-blok:has(+ .vf-cta-blok:last-child) { margin-bottom: var(--layout-bottom); }
}

/* --------------------------------------------------------------------------
   Kaarten op foto (pakketten / stappen)
   -------------------------------------------------------------------------- */
.vf-pakketten { position: relative; isolation: isolate; color: var(--c-creme); padding: var(--s-xl) 0; text-align: center; }
.vf-pakketten__media { position: absolute; inset: 0; z-index: -1; background: var(--c-donker); overflow: hidden; }
.vf-pakketten__media img { width: 100%; height: 100%; object-fit: cover; }
.vf-pakketten__media::after { content: ""; position: absolute; inset: 0; background: var(--c-overlay); mix-blend-mode: multiply; }
.vf-pakketten__inner { display: grid; gap: var(--s-m); justify-items: center; }
.vf-pakketten__kop { color: inherit; max-width: var(--narrow); }
/* prijs bovenaan, verschillen vet, knop onderaan: keuzehulp in plaats van drie gelijke kaarten */

.vf-pakket__regels li.is-verschil { font-weight: 600; }
.vf-pakket__knop { margin-top: auto; padding-top: var(--s-s); }
.vf-pakket__knop .vf-btn { width: 100%; }
.vf-pakket__inhoud { display: flex; flex-direction: column; height: 100%; }
.vf-pakketten__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); width: 100%; }
.vf-pakket { display: flex; flex-direction: column; gap: var(--s-xs); background: var(--c-kaart-donker); padding: var(--s-l) var(--s-m); }
.vf-pakket__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); color: inherit; }
.vf-pakket__titel small, .vf-pakket__nummer { display: block; font-size: inherit; line-height: inherit; }
.vf-pakket__regels { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); line-height: var(--lh-small); display: grid; gap: var(--s-xs); }
.vf-pakket__tekst { font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-pakket__prijs { margin-top: auto; padding-top: var(--s-xs); font-size: var(--fs-body); line-height: var(--lh-body); }
/* prijs als eerste regel van de kaart, groot genoeg om te vergelijken */
.vf-pakket__prijs.vf-pakket__prijs--groot { margin: 0 0 var(--s-xxs); padding-top: 0; font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-stat); line-height: var(--lh-stat); font-variation-settings: "opsz" 14; }
.vf-pakketten__voet { max-width: var(--narrow); padding: 0 var(--s-xs); }
.vf-pakketten__scroller { position: relative; width: 100%; min-width: 0; }
.vf-pakketten__nav { display: none; }
@media (max-width: 1023px) {
	.vf-pakketten__scroller { width: calc(100% + 2 * var(--side)); justify-self: stretch; margin: 0 calc(-1 * var(--side)); }
	.vf-pakketten__nav { display: flex; justify-content: space-between; position: absolute; top: 50%; left: var(--side); right: var(--side); transform: translateY(-50%); pointer-events: none; }
	.vf-pakketten__nav .vf-carrousel__knop { pointer-events: auto; }
	.vf-pakketten__grid { display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0 var(--side); }
	.vf-pakketten__grid::-webkit-scrollbar { display: none; }
	.vf-pakket { flex: 0 0 303px; scroll-snap-align: center; }
}

/* Variant "nummers": grote cijfers, tekst links, op de foto */
.vf-pakketten--nummers { text-align: left; }
.vf-pakketten--nummers .vf-pakketten__inner { justify-items: start; }
.vf-pakketten--nummers .vf-pakketten__kop { max-width: 640px; }
.vf-pakketten--nummers .vf-pakket { position: relative; display: block; padding: var(--s-l) var(--s-l) var(--s-l); background: var(--c-kaart-donker); }
.vf-pakketten--nummers .vf-pakket__cijfer { display: block; font-family: var(--font-heading); font-weight: 200; font-size: 96px; line-height: 1; color: var(--c-creme); opacity: 0.35; font-variation-settings: "opsz" 14; margin: -8px 0 var(--s-s) -4px; }
.vf-pakketten--nummers .vf-pakket__inhoud { display: grid; gap: var(--s-xs); }
.vf-pakketten--nummers .vf-pakket__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-pakketten--nummers .vf-pakket__tekst, .vf-pakketten--nummers .vf-pakket__regels { font-size: var(--fs-small); line-height: var(--lh-small); opacity: 0.9; }
.vf-pakketten--nummers .vf-pakketten__voet { margin: 0; padding: 0; text-align: left; }

/* Variant "lijst": rustige opsomming op crème, zonder foto */
.vf-pakketten--lijst { color: var(--c-donker); text-align: left; padding: 0; }
.vf-pakketten--lijst .vf-pakketten__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-xl) var(--gutter); align-items: start; justify-items: stretch; }
.vf-pakketten--lijst .vf-pakketten__kop { max-width: 10em; color: var(--c-donker); position: sticky; top: calc(var(--header-h) + var(--s-m)); }
.vf-pakketten--lijst .vf-pakketten__scroller { width: auto; }
.vf-pakketten--lijst .vf-pakketten__grid { display: block; border-top: 1px solid var(--c-lijn); }
.vf-pakketten--lijst .vf-pakket { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-s); padding: var(--s-m) 0; background: none; border-bottom: 1px solid var(--c-lijn); }
.vf-pakketten--lijst .vf-pakket__cijfer { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-groen-licht); font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h3); line-height: 1; font-variation-settings: "opsz" 14; }
.vf-pakketten--lijst .vf-pakket__inhoud { display: grid; gap: var(--s-xxs); padding-top: 8px; }
.vf-pakketten--lijst .vf-pakket__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-pakketten--lijst .vf-pakket__tekst, .vf-pakketten--lijst .vf-pakket__regels { font-size: var(--fs-body); line-height: var(--lh-body); }
.vf-pakketten--lijst .vf-pakket__prijs { font-family: var(--font-heading); font-size: var(--fs-h3); }
.vf-pakketten--lijst .vf-pakketten__voet { grid-column: 2; margin: 0; padding: 0; text-align: left; color: var(--c-grijs); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-pakketten--lijst .vf-pakketten__nav { display: none !important; }
@media (max-width: 1023px) {
	.vf-pakketten--nummers .vf-pakket { padding: var(--s-m); }
	.vf-pakketten--nummers .vf-pakket__cijfer { font-size: 64px; }
	.vf-pakketten--lijst .vf-pakketten__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-m); }
	.vf-pakketten--lijst .vf-pakketten__kop { position: static; max-width: none; }
	.vf-pakketten--lijst .vf-pakketten__scroller { margin: 0; }
	.vf-pakketten--lijst .vf-pakketten__grid { padding: 0; overflow: visible; }
	.vf-pakketten--lijst .vf-pakket { flex: none; }
	.vf-pakketten--lijst .vf-pakketten__voet { grid-column: 1; }
}

/* Variant "tijdlijn": verticale route op donkergroen met bladpatroon */
.vf-pakketten--tijdlijn { background: var(--c-groen-licht); color: var(--c-donker); text-align: left; padding: var(--s-xxxl) 0; overflow: clip; isolation: isolate; }
/* boom rechtsonder in het vak, crème op het lichtgroene vlak */
.vf-pakketten__decor { z-index: -1; color: var(--c-creme); opacity: 0.9; top: auto; right: 0; bottom: 0; width: 360px; height: 338px; }
.vf-pakketten--tijdlijn .vf-pakketten__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-xl) var(--gutter); align-items: start; justify-items: stretch; }
/* titel bovenaan en meelopend: de kolom vult de rij, de titel zelf plakt binnen die kolom */
.vf-pakketten--tijdlijn .vf-pakketten__kop-kolom { align-self: stretch; grid-row: 1 / -1; }
.vf-pakketten--tijdlijn .vf-pakketten__kop { max-width: 10em; position: sticky; top: calc(var(--header-h) + var(--s-m)); }
.vf-pakketten--tijdlijn .vf-pakketten__scroller { width: auto; }
.vf-pakketten--tijdlijn .vf-pakketten__grid { display: block; position: relative; }
.vf-pakketten--tijdlijn .vf-pakketten__grid::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: rgba(39, 51, 28, 0.35); }
.vf-pakketten--tijdlijn .vf-pakket { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-s); padding: 0 0 var(--s-l); background: none; position: relative; }
.vf-pakketten--tijdlijn .vf-pakket:last-child { padding-bottom: 0; }
.vf-pakketten--tijdlijn .vf-pakket__cijfer { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--c-donker); background: var(--c-groen-licht); font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h3); line-height: 1; font-variation-settings: "opsz" 14; }
.vf-pakketten--tijdlijn .vf-pakket__inhoud { display: grid; gap: var(--s-xxs); padding-top: 8px; max-width: 560px; }
.vf-pakketten--tijdlijn .vf-pakket__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); color: inherit; }
.vf-pakketten--tijdlijn .vf-pakket__tekst, .vf-pakketten--tijdlijn .vf-pakket__regels { font-size: var(--fs-body); line-height: var(--lh-small); }
.vf-pakketten--tijdlijn .vf-pakket__prijs { font-family: var(--font-heading); font-size: var(--fs-h3); }
.vf-pakketten--tijdlijn .vf-pakketten__voet { grid-column: 2; margin: 0; padding: 0; text-align: left; opacity: 0.8; }
.vf-pakketten--tijdlijn .vf-pakketten__nav { display: none !important; }

/* Variant "groen": lichtgroene kaarten uit de therapiekaart-familie */
.vf-pakketten--groen { color: var(--c-donker); text-align: left; padding: 0; }
.vf-pakketten--groen .vf-pakketten__inner { justify-items: start; }
.vf-pakketten--groen .vf-pakketten__kop { color: var(--c-donker); max-width: var(--narrow); }
.vf-pakketten--groen .vf-pakket { display: grid; align-content: start; gap: var(--s-s); background: var(--c-groen-licht); padding: var(--s-l) var(--s-s); }
.vf-pakketten--groen .vf-pakket__cijfer { font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-h2); font-variation-settings: "opsz" 14; }
.vf-pakketten--groen .vf-pakket__inhoud { display: grid; gap: var(--s-xxs); }
.vf-pakketten--groen .vf-pakket__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-pakketten--groen .vf-pakket__tekst, .vf-pakketten--groen .vf-pakket__regels { font-size: var(--fs-body); line-height: var(--lh-small); }
.vf-pakketten--groen .vf-pakketten__voet { margin: 0; padding: 0; text-align: left; color: var(--c-grijs); }

/* Variant "foto-lijst": foto links, genummerde lijst rechts (Media Text Pair) */
.vf-pakketten--foto-lijst { color: var(--c-donker); text-align: left; padding: 0; }
.vf-pakketten--foto-lijst .vf-pakketten__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-m) var(--gutter); align-items: start; justify-items: stretch; }
.vf-pakketten--foto-lijst .vf-pakketten__kop { grid-column: 1 / -1; color: var(--c-donker); max-width: var(--narrow); }
.vf-pakketten__foto { aspect-ratio: 1; overflow: hidden; background: var(--c-lijn); position: sticky; top: calc(var(--header-h) + var(--s-m)); }
.vf-pakketten__foto img { width: 100%; height: 100%; object-fit: cover; }
.vf-pakketten--foto-lijst .vf-pakketten__scroller { width: auto; padding-left: var(--indent); }
.vf-pakketten--foto-lijst .vf-pakketten__grid { display: block; }
.vf-pakketten--foto-lijst .vf-pakket { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-s); padding: 0 0 var(--s-m); background: none; border: 0; }
.vf-pakketten--foto-lijst .vf-pakket + .vf-pakket { border-top: 1px solid var(--c-lijn); padding-top: var(--s-m); }
.vf-pakketten--foto-lijst .vf-pakket__cijfer { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-donker); color: var(--c-creme); font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h3); line-height: 1; font-variation-settings: "opsz" 14; }
.vf-pakketten--foto-lijst .vf-pakket__inhoud { display: grid; gap: var(--s-xxs); padding-top: 8px; }
.vf-pakketten--foto-lijst .vf-pakket__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-pakketten--foto-lijst .vf-pakket__tekst, .vf-pakketten--foto-lijst .vf-pakket__regels { font-size: var(--fs-body); line-height: var(--lh-small); }
.vf-pakketten--foto-lijst .vf-pakket__prijs { font-family: var(--font-heading); font-size: var(--fs-h3); }
.vf-pakketten--foto-lijst .vf-pakketten__voet { grid-column: 2; margin: 0; padding: 0 0 0 var(--indent); text-align: left; color: var(--c-grijs); }
.vf-pakketten--foto-lijst .vf-pakketten__nav { display: none !important; }
@media (max-width: 1023px) {
	.vf-pakketten--tijdlijn { padding: var(--s-xl) 0; }
	.vf-pakketten--tijdlijn .vf-pakketten__inner, .vf-pakketten--foto-lijst .vf-pakketten__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-m); }
	.vf-pakketten--tijdlijn .vf-pakketten__kop, .vf-pakketten__foto { position: static; max-width: none; }
	.vf-pakketten--tijdlijn .vf-pakketten__kop-kolom { align-self: start; }
	.vf-pakketten--tijdlijn .vf-pakketten__scroller, .vf-pakketten--foto-lijst .vf-pakketten__scroller { margin: 0; padding: 0; }
	.vf-pakketten--tijdlijn .vf-pakketten__grid, .vf-pakketten--foto-lijst .vf-pakketten__grid { padding: 0; overflow: visible; }
	.vf-pakketten--tijdlijn .vf-pakket, .vf-pakketten--foto-lijst .vf-pakket { flex: none; }
	.vf-pakketten--tijdlijn .vf-pakketten__voet, .vf-pakketten--foto-lijst .vf-pakketten__voet { grid-column: 1; padding-left: 0; }
	.vf-pakketten--groen .vf-pakket { flex: 0 0 303px; }
	.vf-pakketten__decor { width: 220px; height: 206px; }
}

/* --------------------------------------------------------------------------
   Calendly (CTA Kennismaking)
   -------------------------------------------------------------------------- */
.vf-calendly__kaart { display: flex; gap: var(--s-xl); align-items: flex-start; background: var(--c-kaart); padding: var(--s-xl); }
.vf-calendly__tekst { flex: 0 0 320px; display: grid; gap: var(--s-s); align-content: start; }
.vf-calendly__punten { display: grid; gap: var(--s-xs); margin: 0; padding: 0; list-style: none; }
.vf-calendly__punten li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-calendly__punten .vf-icon { width: 24px; height: 24px; color: var(--c-logo); }
.vf-calendly__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.vf-calendly__contact { display: grid; gap: 4px; padding-top: var(--s-s); border-top: 1px solid var(--c-lijn); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-calendly__contact p { margin: 0 0 4px; color: var(--c-grijs); }
.vf-calendly__contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.vf-calendly__contact .vf-icon { width: 20px; height: 20px; flex: none; }
.vf-calendly__embed { flex: 1 1 0; min-width: 0; background: var(--c-creme); min-height: 640px; }
.vf-calendly__embed iframe { display: block; width: 100%; height: 700px; border: 0; }
.vf-calendly__leeg { padding: var(--s-m); font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-h3); }
/* staat achter de agenda en verdwijnt zodra het iframe geladen is */
.vf-calendly__embed { position: relative; }
.vf-calendly__laden { position: absolute; inset: 0; z-index: 0; display: grid; align-content: center; justify-items: center; gap: var(--s-xxs); margin: 0; padding: var(--s-m); text-align: center; color: var(--c-grijs); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-calendly__laden a { text-decoration: underline; }
.vf-calendly__embed iframe { position: relative; z-index: 1; }
.vf-ervaring-single__terug { margin: 0 0 var(--s-xs); }
.vf-link-pijl--terug .vf-icon { width: 20px; height: 20px; }
@media (max-width: 1023px) {
	.vf-calendly__kaart { flex-direction: column; gap: var(--s-m); padding: var(--s-s); }
	.vf-calendly__tekst { flex: none; }
	.vf-calendly__embed { flex: none; width: 100%; }
	.vf-calendly__embed iframe { height: 1000px; }
}

/* --------------------------------------------------------------------------
   Route
   -------------------------------------------------------------------------- */
.vf-route__inner { display: grid; gap: var(--layout-spacing); }
.vf-route__kop-blok { display: grid; gap: var(--s-m); }
.vf-route__grid { display: flex; gap: var(--gutter); align-items: start; }
.vf-route__beeld { flex: 0 0 calc(50% - var(--gutter) / 2); min-width: 0; aspect-ratio: 1; overflow: hidden; background: var(--c-lijn); }
.vf-route__beeld img { width: 100%; height: 100%; object-fit: cover; }
/* contactgegevens als kaartjes op de contactpagina */
.vf-route__contact { display: grid; gap: 2px; margin: 0 0 var(--s-m); padding: 0; list-style: none; }
.vf-contactkaart { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; gap: 2px var(--s-xs); align-items: center; padding: var(--s-s); background: var(--c-kaart); }
.vf-contactkaart .vf-icon { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--c-logo); }
.vf-contactkaart__label { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tracking-btn); text-transform: uppercase; color: var(--c-grijs); }
.vf-contactkaart__waarde { font-size: var(--fs-lead); line-height: var(--lh-lead); color: inherit; text-decoration: none; }
a.vf-contactkaart__waarde { text-decoration: underline; text-underline-offset: 3px; }
a.vf-contactkaart__waarde:hover { text-decoration-color: var(--c-oranje); }
.vf-route__tekst-kop { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; margin: 0 0 var(--s-xs); }
.vf-route__tekst { flex: 0 0 calc(50% - var(--gutter) / 2); min-width: 0; display: grid; gap: var(--s-s); justify-items: start; padding-left: var(--indent); }
.vf-route__tekst .vf-rich { display: grid; gap: var(--s-xs); }
/* Tarieven: eerst de prijs, dan de vergoeding, dan de btw-regel */
.vf-tarieven__inner { display: grid; gap: var(--s-m); }
.vf-tarieven__lijst { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vf-tarief { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-xs); padding: var(--s-s); background: var(--c-kaart); }
.vf-tarief__wat { display: grid; gap: 2px; }
.vf-tarief__omschrijving { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.vf-tarief__duur { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grijs); }
.vf-tarief__prijs { flex: none; font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-stat); line-height: var(--lh-stat); font-variation-settings: "opsz" 14; }
.vf-tarieven__vergoeding { display: grid; gap: var(--s-xs); padding: var(--s-s); background: var(--c-groen-licht); }
.vf-tarieven__vergoeding-kop { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variation-settings: "opsz" 14; margin: 0; }
.vf-tarieven__btw { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: var(--s-xs) 0 0; padding-top: var(--s-xs); border-top: 1px solid rgba(39, 51, 28, 0.2); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-tarieven__btw--los { margin: 0; padding-top: 0; border-top: 0; color: var(--c-grijs); }
.vf-tarieven__btw .vf-icon { width: 24px; height: 24px; color: var(--c-logo); }
@media (max-width: 767px) {
	.vf-tarief { flex-direction: column; align-items: flex-start; gap: var(--s-xxs); }
	.vf-tarief__prijs { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

/* los kaartblok: volle breedte of binnen de kolom, drie hoogtes */
.vf-kaart__frame { background: var(--c-lijn); }
.vf-kaart__frame iframe { display: block; width: 100%; height: 480px; border: 0; }
.vf-kaart--compact .vf-kaart__frame iframe { height: 320px; }
.vf-kaart--hoog .vf-kaart__frame iframe { height: 640px; }
.vf-kaart__knop { display: flex; justify-content: center; margin: var(--s-s) 0 0; }
@media (max-width: 767px) { .vf-kaart__frame iframe, .vf-kaart--hoog .vf-kaart__frame iframe { height: 320px; } }
.vf-route__kaart { background: var(--c-lijn); }
.vf-route__kaart iframe { display: block; width: 100%; height: 640px; border: 0; }
@media (max-width: 1023px) {
	.vf-route__grid { flex-direction: column; gap: var(--s-m); }
	.vf-route__beeld, .vf-route__tekst { flex: none; width: 100%; padding: 0; }
	.vf-route__kaart iframe { height: 420px; }
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.vf-archief__inner { display: grid; gap: var(--s-xl); }
.vf-artikelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vf-artikel-kaart { display: flex; flex-direction: column; background: var(--c-kaart); }
.vf-artikel-kaart__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vf-artikel-kaart__body { display: grid; gap: var(--s-xs); padding: var(--s-m); align-content: start; justify-items: start; }
.vf-artikel-kaart__titel { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-artikel-kaart__titel a { text-decoration: none; }
.vf-artikel-kaart__titel a:hover { text-decoration: underline; }
.vf-artikel-kaart .vf-eyebrow { color: var(--c-grijs); text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 1023px) { .vf-artikelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .vf-artikelen { grid-template-columns: minmax(0, 1fr); } }
.vf-artikel__kop { padding-bottom: var(--article-spacing); }
.vf-artikel__kop-inner { display: grid; gap: var(--s-m); }
.vf-artikel__kop .vf-eyebrow { color: var(--c-grijs); text-transform: none; letter-spacing: 0; font-weight: 400; }
.vf-artikel__beeld { margin: var(--article-spacing) 0 0; }
.vf-artikel__beeld img { width: 100%; max-height: 640px; object-fit: cover; }
.vf-artikel__inhoud > .vf-block:first-child { margin-top: 0; }
.vf-artikel__inhoud > :not(.vf-block) { width: min(var(--narrow), var(--container-w)); margin-inline: auto; }
.vf-artikel__inhoud > :not(.vf-block) + :not(.vf-block) { margin-top: var(--s-xs); }
.vf-artikel__inhoud > h2, .vf-artikel__inhoud > h3 { margin-top: var(--s-xl); }

/* Kruimelpad */
.rank-math-breadcrumb { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grijs); }
.rank-math-breadcrumb a { text-decoration: none; }
.rank-math-breadcrumb a:hover { text-decoration: underline; }
.rank-math-breadcrumb .separator { margin: 0 var(--s-xxs); }

/* Wachtwoordformulier */
.vf-password-form { display: grid; gap: var(--s-xs); max-width: 520px; padding: var(--s-m); background: var(--c-kaart); }
.vf-password-form__row { display: grid; gap: var(--s-xxs); justify-items: start; }
.vf-password-form label { font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-password-form input { font: inherit; width: 100%; padding: 12px 16px; border: 1px solid var(--c-donker); background: var(--c-creme); }

/* --------------------------------------------------------------------------
   Gravity Forms (Orbital-thema, kleuren via variabelen)
   -------------------------------------------------------------------------- */
.gform_wrapper.gravity-theme, .gform_wrapper.gform-theme--orbital {
	--gf-color-primary: var(--c-donker);
	--gf-color-primary-contrast: var(--c-creme);
	--gf-color-primary-darker: var(--c-logo);
	--gf-color-primary-lighter: var(--c-label);
	--gf-color-in-ctrl: var(--c-donker);
	--gf-color-in-ctrl-border: var(--c-donker);
	--gf-ctrl-border-color: var(--c-donker);
	--gf-ctrl-bg-color: var(--c-kaart);
	--gf-ctrl-radius: 0;
	--gf-ctrl-btn-bg-color-primary: var(--c-oranje);
	--gf-ctrl-btn-bg-color-secondary: var(--c-creme);
	--gf-ctrl-btn-bg-color-hover-secondary: var(--c-donker);
	--gf-ctrl-btn-color-primary: var(--c-donker);
	--gf-ctrl-btn-border-color-primary: var(--c-oranje);
	--gf-ctrl-btn-bg-color-hover-primary: var(--c-oranje-hover);
	--gf-ctrl-btn-radius: 80px;
	--gf-ctrl-btn-size-primary: 14px;
	--gf-ctrl-label-size-primary: 16px;
	--gf-ctrl-desc-size: 16px;
	--gf-ctrl-btn-padding-x: 32px;
	--gf-ctrl-btn-padding-y: 12px;
	--gf-ctrl-label-color-primary: var(--c-donker);
	--gf-ctrl-desc-color: var(--c-grijs);
	--gf-color-danger: #B2452E;
	--gf-font-family: var(--font-body);
	--gf-form-gap-y: 24px;
	--gf-form-gap-x: 16px;
}
.gform_wrapper .gform_button, .gform_wrapper .gform-theme-button, .gform_wrapper .gform-theme-button.vf-btn { text-transform: uppercase; letter-spacing: var(--tracking-btn); font-weight: 500; font-size: var(--fs-btn); }
.gform_wrapper .gfield_required { color: var(--c-oranje-hover); }
.gform_confirmation_message { padding: var(--s-m); background: var(--c-groen-licht); }
.gform_confirmation_message h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: var(--s-xxs); }

/* Intakepagina: infokolom + witte formulierkaart */
.vf-hero-pagina + .vf-intake { margin-top: 0; }
.vf-intake__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s-xl); align-items: start; }
.vf-intake__info { position: sticky; top: calc(var(--header-h) + var(--s-s)); display: grid; gap: var(--s-m); }
.vf-intake__kop { font-size: var(--fs-h3); line-height: var(--lh-h3);  font-weight: 400; }
.vf-intake__lijst { display: grid; gap: var(--s-xs); margin: 0; padding: 0; list-style: none; }
.vf-intake__lijst li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.vf-intake__lijst svg { width: 24px; height: 24px; color: var(--c-logo); }
.vf-intake__lijst strong { font-weight: 500; }
.vf-intake__contact { display: grid; gap: 8px; padding-top: var(--s-s); border-top: 1px solid var(--c-lijn); }
.vf-intake__contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.vf-intake__contact svg { width: 20px; height: 20px; flex: none; }
.vf-intake__kaart { background: var(--c-kaart); padding: var(--s-xl); min-width: 0; }
@media (max-width: 1023px) {
	.vf-intake__grid { grid-template-columns: 1fr; gap: var(--s-m); }
	.vf-intake__info { position: static; }
	.vf-intake__lijst { gap: 12px; }
	.vf-intake__kaart { padding: var(--s-s); margin-inline: calc(-1 * var(--side)); }
}

/* Gravity Forms in de kaart */
.vf-intake .gform_wrapper.gform-theme--orbital { --gf-form-gap-y: 32px; --gf-ctrl-bg-color: var(--c-creme); --gf-ctrl-border-color: var(--c-lijn); }
.vf-intake .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]), .vf-intake .gform_wrapper textarea, .vf-intake .gform_wrapper select { background-color: var(--c-creme) !important; border-color: #CDBA9E !important; }
.vf-intake .gform_wrapper input:focus, .vf-intake .gform_wrapper textarea:focus, .vf-intake .gform_wrapper select:focus { border-color: var(--c-donker) !important; outline: 2px solid var(--c-donker); outline-offset: 1px; box-shadow: none !important; }
.vf-intake .gform_wrapper textarea.medium { min-height: 136px; height: 136px; }
.vf-intake .gform_wrapper .gfield_label, .vf-intake .gform_wrapper .gform-field-label--type-sub { font-weight: 500; }
.vf-intake .gform_wrapper .gform-field-label--type-sub { font-weight: 400; color: var(--c-grijs); }
.vf-intake .gform_wrapper legend.gfield_label { margin-bottom: 12px; }
.vf-intake .gform_wrapper .gfield-choice-input:checked { background-color: var(--c-donker) !important; border-color: var(--c-donker) !important; }

/* Voortgangsbalk */
.gform_wrapper .gf_progressbar_wrapper { margin: 0 0 var(--s-l); padding: 0 0 var(--s-s); border-bottom: 1px solid var(--c-lijn); }
.gform_wrapper .gf_progressbar_title { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-donker); font-variation-settings: "opsz" 14; }
.gform_wrapper .gf_progressbar { height: 6px; padding: 0; background: var(--c-lijn); border-radius: 6px; overflow: hidden; box-shadow: none; }
.gform_wrapper .gf_progressbar_percentage { height: 6px; background: var(--c-donker) !important; border-radius: 6px; transition: width 0.4s var(--ease); }
.gform_wrapper .gf_progressbar_percentage span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .gform_wrapper .gf_progressbar_percentage { transition: none; } }

/* Knoppenrij onder elke stap */
.gform_wrapper .gform_page_footer, .gform_wrapper .gform_footer { display: flex; flex-wrap: wrap; gap: var(--s-xs); justify-content: flex-end; margin-top: var(--s-l); padding-top: var(--s-s); border-top: 1px solid var(--c-lijn); }
.gform_wrapper .gform_page_footer .gform_previous_button { margin-right: auto; background-color: var(--c-creme) !important; }
.gform_wrapper .gform_page_footer .vf-btn, .gform_wrapper .gform_footer .vf-btn { border-radius: var(--radius-pill); min-height: 48px; padding-inline: var(--s-m); }
@media (max-width: 767px) { .gform_wrapper .gform_page_footer .vf-btn, .gform_wrapper .gform_footer .vf-btn { flex: 1 1 auto; } }

/* Tekstblokken in het formulier (tarieven, akkoord) */
.gform_wrapper .gfield--type-html { display: grid; gap: var(--s-xs); padding: var(--s-s); background: var(--c-creme); }
.gform_wrapper .gfield--type-html h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.gform_wrapper .gfield--type-html * + h3 { margin-top: var(--s-xs); }
.gform_wrapper .gfield--type-html h4 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-btn); }
.gform_wrapper .gfield--type-html ul { margin: 0; padding-left: 20px; }
.gform_wrapper .gfield--type-html a { text-decoration: underline; }
.vf-intake__pakketten { display: grid; gap: var(--s-xs); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vf-intake__pakketten > div { display: grid; gap: 8px; align-content: start; padding: var(--s-xs); background: var(--c-kaart); }
.gform_wrapper .gfield--type-consent .gfield_consent_description { max-height: none; border: 0; padding: 0; }
.gform_wrapper .gfield_description { color: var(--c-grijs); }
.gform_wrapper .gform_validation_errors { border: 1px solid #B2452E; background: var(--c-kaart); box-shadow: none; }

/* Animaties: hero-elementen verborgen tot GSAP ze overneemt (klasse via inline script, terugval na 2,5 s). */
.vf-anim:not(.vf-anim-klaar) .vf-hero-home__titel,
.vf-anim:not(.vf-anim-klaar) .vf-kaart-lijst,
.vf-anim:not(.vf-anim-klaar) .vf-hero-home__slot,
.vf-anim:not(.vf-anim-klaar) .vf-hero-home__lead,
.vf-anim:not(.vf-anim-klaar) .vf-hero-home__knoppen,
.vf-anim:not(.vf-anim-klaar) .vf-hero-pagina__tekst > *,
.vf-anim:not(.vf-anim-klaar) .vf-hero-pagina__beeld { visibility: hidden; }
.vf-header { transition: transform 0.35s var(--ease), box-shadow 0.25s var(--ease); }
.vf-header.is-verborgen { transform: translateY(-100%); }
.vf-header.is-verborgen:focus-within { transform: none; }

/* Diversen */
.vf-404__inner { display: grid; gap: var(--s-m); justify-items: start; min-height: 40vh; }
.vf-preview-placeholder { padding: var(--s-m); border: 1px dashed var(--c-label); background: var(--c-kaart); text-align: center; color: var(--c-grijs); }
.vf-preview-placeholder strong { display: block; color: var(--c-donker); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }
@media print { .vf-header, .vf-footer, .vf-carrousel__nav, .vf-btn { display: none !important; } body { background: #fff; color: #000; } }

/* --------------------------------------------------------------------------
   Correcties Vera 5-10-2026
   -------------------------------------------------------------------------- */
/* bedragen een stuk kleiner, op de therapiepagina's en de tarievenpagina */
:root { --fs-prijs: 22px; --lh-prijs: 30px; }
.vf-prijsregel strong,
.vf-pakket__prijs.vf-pakket__prijs--groot,
.vf-tarief__prijs,
.vf-pakketten--lijst .vf-pakket__prijs,
.vf-pakketten--tijdlijn .vf-pakket__prijs,
.vf-pakketten--foto-lijst .vf-pakket__prijs { font-size: var(--fs-prijs); line-height: var(--lh-prijs); }
@media (max-width: 767px) {
	.vf-tarief__prijs { font-size: 20px; line-height: 28px; }
}
/* footer: cursusnaam op een eigen regel */
.vf-footer__menu a:has(.vf-footer__menu-sub) { display: grid; gap: 2px; }
.vf-footer__menu-sub { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-small); }
/* cursusnaam in lopende tekst subtiel onderscheiden */
.vf-cursusnaam { font-family: var(--font-heading); font-variation-settings: "opsz" 14; font-weight: 500; font-style: italic; white-space: nowrap; }
@media (max-width: 479px) { .vf-cursusnaam { white-space: normal; } }
/* intakeformulier: pakkettitel uitgelicht, tarieven onderaan het blok */
.vf-intake__pakketten > div { grid-template-rows: auto 1fr auto; padding: 0; overflow: hidden; }
.gform_wrapper .vf-intake__pakketten h4 { margin: 0; padding: 12px var(--s-xs); background: var(--c-groen-licht); color: var(--c-donker); }
.gform_wrapper .vf-intake__pakketten ul { margin: 0; padding: 0 var(--s-xs) 0 calc(var(--s-xs) + 20px); }
.gform_wrapper .vf-intake__tarief { margin: 0; padding: 12px var(--s-xs) var(--s-xs); border-top: 1px solid var(--c-lijn); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-intake__tarief strong { font-weight: 500; }

/* --------------------------------------------------------------------------
   Correcties Vera 9-10-2026
   -------------------------------------------------------------------------- */
/* knop naar boven, linksonder; op mobiel boven de vaste balk */
.vf-naar-boven { position: fixed; z-index: 89; left: var(--s-s); bottom: var(--s-s); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--c-donker); border-radius: var(--radius-pill); background: var(--c-creme); color: var(--c-donker); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; }
.vf-naar-boven.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.vf-naar-boven .vf-icon { width: 22px; height: 22px; }
@media (max-width: 767px) { .vf-naar-boven { left: auto; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .vf-naar-boven { transition: opacity 0.2s linear; transform: none; } }
/* pakketten op mobiel: pijlen onder de kaarten, niet over de tekst */
@media (max-width: 1023px) {
	.vf-pakketten__nav { position: static; transform: none; justify-content: center; gap: var(--s-xs); margin-top: var(--s-s); }
}
/* tarieven: duur en bedrag samen op één regel naast de omschrijving */
@media (max-width: 767px) {
	.vf-tarief { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: var(--s-xs); }
	.vf-tarief__wat { display: contents; }
	.vf-tarief__duur { white-space: nowrap; }
	.vf-tarief__prijs { white-space: nowrap; }
}
.wp-block-table td:nth-child(2), .wp-block-table th:nth-child(2) { white-space: nowrap; }
/* zorgwijzer-link past op mobiel op één regel */
@media (max-width: 479px) { .vf-tarieven__vergoeding .vf-rich a { font-size: 13px; } }
/* in de media: tekst volledig tonen */
.vf-pers__tekst { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* koppen: alleen afbreken waar een zacht afbreekstreepje staat */
.vf-hero-pagina h1 { hyphens: manual; -webkit-hyphens: manual; }
/* tabelcellen: afbreken op lettergrepen, niet midden in een woord */
.wp-block-table td, .wp-block-table th { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
/* foto's van Vera linken naar de fotograaf; de link neemt de maat van de beeldhouder over */
.vf-foto-link { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Cookiebanner (Consent Mode v2, inc/consent.php)
   -------------------------------------------------------------------------- */
.vf-cookie { position: fixed; z-index: 100; left: var(--s-s); bottom: var(--s-s); width: min(440px, calc(100vw - 2 * var(--s-s))); padding: var(--s-s); background: var(--c-creme); color: var(--c-donker); border: 1px solid var(--c-lijn); border-radius: 8px; box-shadow: 0 8px 32px rgba(39, 51, 28, 0.16); }
.vf-cookie[hidden] { display: none; }
.vf-cookie__titel { margin: 0 0 var(--s-xxs); font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vf-cookie__tekst { margin: 0 0 var(--s-xs); font-size: var(--fs-small); line-height: var(--lh-small); }
.vf-cookie__knoppen { display: flex; gap: var(--s-xxs); }
.vf-cookie__knoppen .vf-btn { flex: 1 1 0; }
@media (max-width: 767px) {
	.vf-cookie { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border-width: 1px 0 0; padding: var(--s-xs) var(--gutter) calc(var(--s-xs) + env(safe-area-inset-bottom, 0px)); }
}