/* ==========================================================================
   Darkenoe: thema-stijlen
   Ontwerprichting "Het pad": ieder kind zijn eigen weg, stap voor stap.
   ========================================================================== */

/* ---------- Lettertypes (lokaal) ---------- */
@font-face {
	font-family: "Fraunces Soft";
	src: url("../fonts/fraunces-soft.woff2") format("woff2");
	font-weight: 400 650;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Huisstijl ---------- */
:root {
	--creme: #FBF6EE;
	--zand: #F3E9DA;
	--zand-donker: #E7DCCB;
	--salie: #EAF1EC;
	--wit: #FFFFFF;
	--inkt: #1D2B36;
	--inkt-zacht: #4A5862;
	--teal: #1B5E5A;
	--teal-donker: #134744;
	--teal-licht: #9FD0BE;
	--blad: #5E9C83;
	--oker: #E9B03F;
	--terracotta: #D9683F;
	--terracotta-tekst: #8A4A1F;
	--fout: #A33A2A;

	--f-kop: "Fraunces Soft", Georgia, "Times New Roman", serif;
	--f-tekst: "Atkinson Hyperlegible", Verdana, "Segoe UI", Arial, sans-serif;

	--wrap: 1200px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--sectie: clamp(4.5rem, 10vw, 8.5rem);
	--radius: 22px;
	--radius-groot: 34px;
	--schaduw: 0 1px 2px rgba(29, 43, 54, .05), 0 12px 32px -12px rgba(29, 43, 54, .18);
	--header-h: 84px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
	margin: 0;
	background: var(--creme);
	color: var(--inkt);
	font-family: var(--f-tekst);
	font-size: 1.1875rem;          /* 19px */
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
@media (min-width: 960px) { body { font-size: 1.25rem; } } /* 20px */

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--teal-donker); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--f-kop); font-weight: 600; color: var(--inkt); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.25; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--teal-licht); color: var(--inkt); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--smal { max-width: 820px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--inkt); color: var(--creme); padding: .75rem 1.1rem; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 1rem; color: var(--creme); }
main:focus { outline: none; }

.lead { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.6; color: var(--inkt); max-width: 36em; }

.label {
	display: inline-flex; align-items: center; gap: .6rem;
	font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--teal); margin-bottom: 1.1rem;
}
.label-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--oker); box-shadow: 16px 0 0 -2px var(--terracotta); margin-right: 14px; }

/* ---------- Knoppen ---------- */
.knoppen { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.knop {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 56px; padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid var(--teal);
	background: var(--teal); color: var(--wit); font: 700 1.05rem/1.2 var(--f-tekst);
	text-decoration: none; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.knop:hover { background: var(--teal-donker); border-color: var(--teal-donker); color: var(--wit); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(19, 71, 68, .7); }
.knop--rustig { background: transparent; color: var(--teal); }
.knop--rustig:hover { background: var(--teal); color: var(--wit); }
.knop--klein { min-height: 48px; padding: .6rem 1.2rem; font-size: 1rem; }
.knop--vol { width: 100%; }
.knop .icon { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.knop:hover .icon { transform: translateX(3px); }
.knop[disabled] { opacity: .65; cursor: progress; transform: none; }

/* ---------- Header ---------- */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
	background: rgba(251, 246, 238, .9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--zand-donker); box-shadow: 0 6px 24px -18px rgba(29, 43, 54, .35); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: block; line-height: 0; }
.brand .logo-svg { height: 44px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .35rem; }
.site-nav a {
	display: block; padding: .6rem .95rem; border-radius: 999px; color: var(--inkt); text-decoration: none; font-weight: 700; font-size: 1.02rem;
	position: relative; transition: color .2s, background .2s;
}
.site-nav a::after {
	content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .38rem; height: 2px; border-radius: 2px; background: var(--oker);
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.site-nav a.nav-cta { background: var(--teal); color: var(--wit); margin-left: .5rem; padding: .7rem 1.35rem; }
.site-nav a.nav-cta::after { display: none; }
.site-nav a.nav-cta:hover, .site-nav a.nav-cta[aria-current="true"] { background: var(--teal-donker); }

.nav-toggle { display: none; }
@media (max-width: 899px) {
	:root { --header-h: 72px; }
	.brand .logo-svg { height: 38px; }
	.nav-toggle {
		display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem 1rem;
		background: var(--wit); color: var(--inkt); border: 1.5px solid var(--zand-donker); border-radius: 999px;
		font: 700 1rem/1 var(--f-tekst); cursor: pointer;
	}
	.nav-toggle-bars { position: relative; width: 20px; height: 12px; display: inline-block; }
	.nav-toggle-bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
	.nav-toggle-bars span:first-child { top: 1px; }
	.nav-toggle-bars span:last-child { top: 9px; }
	.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { top: 5px; transform: rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { top: 5px; transform: rotate(-45deg); }
	.site-nav {
		position: fixed; left: 0; right: 0; top: var(--header-h); background: var(--creme);
		border-bottom: 1px solid var(--zand-donker); box-shadow: 0 24px 40px -24px rgba(29, 43, 54, .35);
		padding: .75rem var(--gutter) 1.5rem; visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
	}
	.admin-bar .site-nav { top: calc(var(--header-h) + 46px); }
	.site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: .25rem; }
	.site-nav a { font-size: 1.25rem; padding: .9rem .25rem; border-radius: 0; border-bottom: 1px solid var(--zand); }
	.site-nav a::after { left: .25rem; right: auto; width: 2.5rem; bottom: .55rem; }
	.site-nav a.nav-cta { margin: 1rem 0 0; text-align: center; border-radius: 999px; padding: 1rem; border: 0; }
}

/* ---------- Hero ---------- */
.hero { padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)) 0 clamp(1rem, 3vw, 2rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero-naam {
	font-family: var(--f-kop); font-weight: 600; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: .32em; text-transform: uppercase;
	color: var(--teal); margin: 0 0 .35rem;
}
.eyebrow { font-weight: 700; color: var(--inkt-zacht); margin-bottom: 1.4rem; font-size: 1.05rem; }
.hero-titel { margin-bottom: 1.6rem; max-width: 13em; }
.hero .lead { margin-bottom: 0; }

.hero-beeld { position: relative; max-width: 520px; width: 100%; justify-self: center; }
@media (max-width: 959px) { .hero-beeld { max-width: 360px; } }
.boog {
	position: relative; aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius-groot) var(--radius-groot) / 40% 40% var(--radius-groot) var(--radius-groot);
	overflow: hidden; background: var(--zand);
}
.boog img { width: 100%; height: 100%; object-fit: cover; }
.hero-beeld.heeft-foto::before {
	content: ""; position: absolute; inset: auto -18px -18px auto; width: 46%; aspect-ratio: 1; border-radius: 50%;
	background: var(--salie); z-index: -1;
}
.hero-beeld.heeft-foto::after {
	content: ""; position: absolute; left: -14px; bottom: 18%; width: 28px; height: 28px; border-radius: 50%; background: var(--oker);
	box-shadow: 0 0 0 8px var(--creme);
}
.hero-illustratie { width: 100%; height: 100%; display: block; }
.ill-zon { fill: var(--oker); opacity: .9; }
.ill-heuvel { fill: var(--salie); }
.ill-pad { stroke: var(--teal); stroke-width: 9; stroke-linecap: round; }
.ill-steen--1 { fill: var(--terracotta); }
.ill-steen--2 { fill: var(--oker); }
.ill-steen--3 { fill: var(--teal-licht); }
.ill-blad path:first-child { fill: var(--blad); }
.ill-nerf { stroke: var(--creme); stroke-width: 3; stroke-linecap: round; }

/* ---------- Het pad (terugkerend detail) ---------- */
.pad { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); line-height: 0; }
.pad svg { width: 100%; height: auto; overflow: visible; display: block; }
.pad--flip svg { transform: scaleX(-1); }
@media (max-width: 640px) { .pad { overflow: hidden; padding: 0; } .pad svg { width: 170%; margin-left: -35%; } }
.pad-line { stroke: var(--teal); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 17; }
.pad-reveal { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pad-stap--1 { fill: var(--terracotta); }
.pad-stap--2 { fill: var(--oker); }
.pad-blad { fill: var(--blad); }
.pad-stap, .pad-blad { transform-box: fill-box; transform-origin: center; }

/* ---------- Secties ---------- */
.sectie { padding: var(--sectie) 0; }
.over { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.over-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 960px) {
	.over-grid { grid-template-columns: .9fr 1.1fr; row-gap: 3.5rem; }
}
.over-grid--foto { align-items: center; }
.over-grid--foto .over-kop .tekst { margin-top: 1.5rem; }
.over-beeld { border-radius: var(--radius-groot) var(--radius-groot) var(--radius-groot) 120px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 480px; width: 100%; background: var(--zand); }
.over-beeld img { width: 100%; height: 100%; object-fit: cover; }
.tekst p { max-width: 34em; }
.tekst p:first-child { font-size: clamp(1.25rem, 1.8vw, 1.4rem); line-height: 1.6; }

.wegen { display: grid; gap: 1.5rem; grid-column: 1 / -1; }
@media (min-width: 720px) { .wegen { grid-template-columns: 1fr 1fr; } }
.weg {
	position: relative; background: var(--wit); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: var(--schaduw); border-top: 5px solid var(--oker);
}
.weg--2 { border-top-color: var(--blad); }
.weg h3 { margin-bottom: .6rem; }
.weg p { margin: 0; font-size: 1.15rem; color: var(--inkt); }
.weg-icoon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--creme); color: var(--teal); margin-bottom: 1rem; }
.weg-icoon .icon { width: 28px; height: 28px; }

/* Aanpak: vier stappen op één pad, de stippen groeien per stap. */
.aanpak { background: var(--salie); border-radius: var(--radius-groot); margin: 0 clamp(.5rem, 2vw, 1.5rem); }
.aanpak-kop { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; position: relative; counter-reset: stap; }
.stap { position: relative; padding-left: 4.25rem; }
.stap h3 { margin-bottom: .45rem; }
.stap p { margin: 0; font-size: 1.15rem; max-width: 22em; }
.stap-nr { display: block; font-weight: 700; font-size: .9rem; letter-spacing: .12em; color: var(--teal); margin-bottom: .35rem; }
.stap-stip {
	--d: calc(14px + var(--i) * 6px);
	position: absolute; left: calc(22px - var(--d) / 2); top: calc(14px - var(--d) / 2 + .9rem); width: var(--d); height: var(--d); border-radius: 50%;
	background: var(--teal); box-shadow: 0 0 0 6px var(--salie); z-index: 1;
}
.stap:nth-child(1) .stap-stip { background: var(--terracotta); }
.stap:nth-child(2) .stap-stip { background: var(--oker); }
.stap:nth-child(3) .stap-stip { background: var(--blad); }
.stappen::before {
	content: ""; position: absolute; left: 20px; top: 1.6rem; bottom: 2rem; width: 4px;
	background: radial-gradient(circle, var(--teal) 2px, transparent 2.5px) center top / 4px 14px repeat-y;
	transform-origin: top;
}
@media (min-width: 960px) {
	.stappen { grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-top: 3.5rem; }
	.stap { padding-left: 0; }
	.stap-stip { left: 0; top: calc(-3.5rem + 22px - var(--d) / 2); }
	.stappen::before { left: 0; right: 4%; top: 20px; bottom: auto; width: auto; height: 4px; background-size: 14px 4px; background-repeat: repeat-x; background-position: left center; transform-origin: left; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.contact-grid > *, .over-grid > *, .hero-grid > * { min-width: 0; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.gegevens { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 1.25rem; }
.gegevens li { display: flex; gap: 1rem; align-items: flex-start; }
.gegevens-icoon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--wit); color: var(--teal); box-shadow: var(--schaduw); }
.gegevens-label { display: block; font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); }
.gegevens a, .gegevens address { font-size: 1.2rem; font-weight: 700; color: var(--inkt); word-break: break-word; }
.gegevens a { color: var(--teal); }

.kaart { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--zand); aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .kaart { aspect-ratio: 4 / 5; } }
.kaart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kaart-voorbeeld { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem; text-align: center; }
.kaart-patroon { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaart-patroon path { fill: none; stroke: var(--wit); stroke-width: 14; stroke-linecap: round; }
.kaart-pin { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: var(--wit); box-shadow: 0 0 0 10px rgba(27, 94, 90, .15); }
.kaart-pin .icon { width: 30px; height: 30px; }
.kaart-acties { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: center; }
.kaart-link { font-weight: 700; }
.kaart-noot { position: relative; margin: 0; font-size: .95rem; color: var(--inkt-zacht); max-width: 30em; background: rgba(243, 233, 218, .85); padding: .1rem .5rem; border-radius: 8px; }

.formulier-kaart { background: var(--wit); border-radius: var(--radius-groot); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: var(--schaduw); }
.formulier-titel { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 1.5rem; }
.veld { margin-bottom: 1.35rem; }
.veld label { display: block; font-weight: 700; margin-bottom: .45rem; font-size: 1.05rem; }
.veld input, .veld textarea {
	width: 100%; min-height: 58px; padding: .85rem 1rem; font: inherit; font-size: 1.1rem; color: var(--inkt);
	background: var(--creme); border: 2px solid var(--zand-donker); border-radius: 14px;
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.veld textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.veld input:hover, .veld textarea:hover { border-color: #CDBEA7; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--teal); background: var(--wit); box-shadow: 0 0 0 4px rgba(27, 94, 90, .18); }
.veld.is-fout input, .veld.is-fout textarea { border-color: var(--fout); background: #FFF7F5; }
.veld-fout { color: var(--fout); font-weight: 700; font-size: 1rem; margin: .4rem 0 0; }
.dk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier-privacy { font-size: 1rem; color: var(--inkt-zacht); margin: .25rem 0 1.5rem; }
.formulier-status:not(:empty) { margin-top: 1.25rem; }
.melding { padding: 1.1rem 1.25rem; border-radius: 14px; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.5; }
.melding--ok { background: var(--salie); color: var(--teal-donker); border-left: 5px solid var(--teal); }
.melding--fout { background: #FDEDEA; color: var(--fout); border-left: 5px solid var(--fout); }
.formulier.is-verzonden .veld, .formulier.is-verzonden .formulier-privacy, .formulier.is-verzonden [data-submit] { display: none; }

/* ---------- Pagina's (privacy) ---------- */
.pagina-kop { padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 0; }
.pagina-kop h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.inhoud { padding-bottom: var(--sectie); padding-top: 1.5rem; }
.inhoud h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 2.2em; }
.inhoud ul { padding-left: 1.3em; }
.inhoud li { margin-bottom: .4em; }
.inhoud li::marker { color: var(--teal); }
.inhoud mark { background: #FFF1C9; padding: .1em .3em; border-radius: 4px; color: var(--inkt); }

/* ---------- 404 ---------- */
.nietgevonden { padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 var(--sectie); }
.nietgevonden-pad { display: block; width: min(100%, 460px); height: auto; margin-bottom: 1.5rem; overflow: visible; }
.ng-lijn { stroke: var(--teal); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 16; }
.ng-steen { fill: var(--terracotta); }
.ng-steen--2 { fill: var(--oker); }
.ng-vraag circle { fill: var(--salie); }
.ng-vraag text { font: 600 40px var(--f-kop); fill: var(--teal); }

/* ---------- Footer ---------- */
.site-footer { background: var(--inkt); color: #DCE3E6; padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.site-footer a { color: var(--creme); text-decoration: none; }
.site-footer a:hover { color: var(--teal-licht); text-decoration: underline; }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-brand .logo-svg { height: 46px; width: auto; margin-bottom: 1rem; }
.footer-brand p { margin: 0; color: #B9C3C9; font-size: 1.05rem; }
.footer-contact { display: grid; gap: .5rem; font-size: 1.05rem; align-content: start; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: 1.05rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom p { margin: 0; font-size: .95rem; color: #B9C3C9; }

/* ==========================================================================
   Beweging: alleen met JavaScript én zonder voorkeur voor minder beweging.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .pad .pad-reveal { stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
	.js .pad .pad-stap, .js .pad .pad-blad { transform: scale(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
	.js .pad .pad-stap--1 { transition-delay: .7s; }
	.js .pad .pad-stap--2 { transition-delay: 1.5s; }
	.js .pad .pad-blad { transition-delay: 2s; }
	.js .pad.is-in .pad-reveal { stroke-dashoffset: 0; }
	.js .pad.is-in .pad-stap, .js .pad.is-in .pad-blad { transform: scale(1); }

	.js .weg { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
	.js .weg--2 { transition-delay: .15s; }
	.js .weg.is-in { opacity: 1; transform: none; }

	.js .stappen::before { transform: scaleY(0); transition: transform 1.8s var(--ease); }
	.js .stap { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * .3s); }
	.js .stap-stip { transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * .3s + .1s); }
	.js .stappen.is-in::before { transform: none; }
	.js .stappen.is-in .stap { opacity: 1; transform: none; }
	.js .stappen.is-in .stap-stip { transform: scale(1); }
	@media (min-width: 960px) { .js .stappen::before { transform: scaleX(0); } .js .stappen.is-in::before { transform: none; } }

	.hero-tekst > * { animation: dk-op .9s var(--ease) both; }
	.hero-tekst > :nth-child(2) { animation-delay: .08s; }
	.hero-tekst > :nth-child(3) { animation-delay: .16s; }
	.hero-tekst > :nth-child(4) { animation-delay: .24s; }
	.hero-tekst > :nth-child(5) { animation-delay: .32s; }
	.hero-beeld { animation: dk-op 1.1s .2s var(--ease) both; }
	.ill-pad { stroke-dasharray: 520; stroke-dashoffset: 520; animation: dk-teken 2.4s .6s var(--ease) forwards; }
	.ill-steen, .ill-blad { transform-box: fill-box; transform-origin: center; animation: dk-groei .7s cubic-bezier(.34, 1.56, .64, 1) both; }
	.ill-steen--1 { animation-delay: 1s; }
	.ill-steen--2 { animation-delay: 1.4s; }
	.ill-steen--3 { animation-delay: 1.8s; }
	.ill-blad { animation-delay: 2.3s; transform-origin: left bottom; }
	.ill-zon { animation: dk-adem 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes dk-op { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dk-teken { to { stroke-dashoffset: 0; } }
@keyframes dk-groei { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dk-adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

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

/* ---------- Print ---------- */
@media print {
	.site-header, .pad, .kaart, .formulier-kaart, .nav-toggle { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.hero, .pagina-kop { padding-top: 0; }
}

/* Over-foto op kleinere schermen: na de tekst, minder hoog. */
@media (max-width: 959px) {
	.over-grid--foto .over-beeld { order: 2; aspect-ratio: 4 / 3; max-width: none; border-radius: var(--radius-groot) var(--radius-groot) var(--radius-groot) 80px; }
	.over-grid--foto .wegen { order: 3; }
	.hero-beeld.heeft-foto::before { inset: auto -10px -14px auto; width: 38%; }
}

/* Video bij Over Darkenoe (1.1.0) */
.over-video { position: relative; }
.over-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--zand); }
.video-knop {
	position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%; border: 0;
	display: grid; place-items: center; background: rgba(251, 246, 238, .94); color: var(--teal); cursor: pointer;
	box-shadow: 0 6px 18px -8px rgba(29, 43, 54, .5); transition: transform .2s var(--ease), background .2s;
}
.video-knop:hover { transform: scale(1.06); background: var(--wit); }
.video-knop .icon { width: 22px; height: 22px; }
.video-knop .icon-speel { display: none; }
.video-knop[aria-pressed="true"] .icon-pauze { display: none; }
.video-knop[aria-pressed="true"] .icon-speel { display: block; }

/* ==========================================================================
   Foto's van de school (1.2.0)
   ========================================================================== */

/* Foto bovenaan de twee "wegen" */
.weg--foto { padding-top: 0; overflow: hidden; }
.weg-foto { margin: 0 calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--zand); }
.weg-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.weg--foto:hover .weg-foto img { transform: scale(1.04); }
.weg--foto .weg-icoon { position: relative; margin-top: -26px; background: var(--wit); box-shadow: 0 0 0 6px var(--wit), var(--schaduw); }
.weg--1.weg--foto .weg-foto { border-bottom: 5px solid var(--oker); }
.weg--2.weg--foto .weg-foto { border-bottom: 5px solid var(--blad); }
.weg--foto { border-top: 0; }

/* Ronde foto's bij de vier stappen: ze groeien stap voor stap. */
.stap-foto {
	display: block; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; margin-bottom: 1rem;
	background: var(--wit); box-shadow: 0 0 0 6px var(--salie), var(--schaduw);
}
.stap-foto img { width: 100%; height: 100%; object-fit: cover; }
.stap-foto--leeg { background: var(--zand); }
.stappen--fotos .stap-stip { top: calc(var(--s) + 1rem + .9rem + 14px - var(--d) / 2); }
.stappen--fotos .stap { --s: calc(118px + var(--i) * 14px); }
@media (min-width: 960px) {
	.stappen--fotos { --fh: 250px; padding-top: calc(var(--fh) + 1.75rem + 3.5rem); }
	.stappen--fotos::before { top: calc(var(--fh) + 1.75rem + 20px); }
	.stappen--fotos .stap { --s: calc(var(--fh) * (.64 + var(--i) * .09)); }
	.stappen--fotos .stap-foto { position: absolute; left: 0; top: calc(-3.5rem - 1.75rem - var(--s)); width: min(var(--s), 100%); height: auto; aspect-ratio: 1; margin: 0; }
	.stappen--fotos .stap-stip { top: calc(-3.5rem + 22px - var(--d) / 2); }
}
@media (prefers-reduced-motion: no-preference) {
	.js .stappen--fotos .stap-foto { transform: scale(.85); opacity: 0; transition: transform .9s cubic-bezier(.34, 1.4, .64, 1), opacity .7s var(--ease); transition-delay: calc(var(--i) * .3s - .15s); }
	.js .stappen--fotos.is-in .stap-foto { transform: none; opacity: 1; }
}

/* Sfeerbeelden: vier foto's als stapstenen langs het pad */
.sfeer { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(1rem, 3vw, 2rem); }
.sfeer-compositie { position: relative; display: grid; grid-template-columns: 1.35fr .95fr 1.15fr .9fr; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: start; }
.sfeer-pad { position: absolute; left: -6%; width: 112%; top: 22%; height: 60%; z-index: 0; overflow: visible; }
.sfeer-pad path { stroke: var(--teal); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 17; opacity: .9; }
.sfeer-foto { position: relative; z-index: 1; margin: 0; translate: 0 var(--drift, 0px); }
.sfeer-foto:nth-of-type(1) { margin-top: 3.5rem; }
.sfeer-foto:nth-of-type(2) { margin-top: 0; }
.sfeer-foto:nth-of-type(3) { margin-top: 6rem; }
.sfeer-foto:nth-of-type(4) { margin-top: 1.5rem; }
.sfeer-kader { display: block; overflow: hidden; background: var(--zand); box-shadow: var(--schaduw); }
.sfeer-kader img { width: 100%; height: 100%; object-fit: cover; }
.sfeer .vorm-breed .sfeer-kader { aspect-ratio: 4 / 3; border-radius: 30px; }
.sfeer .vorm-rond .sfeer-kader { aspect-ratio: 1; border-radius: 50%; }
.sfeer .vorm-blad .sfeer-kader { aspect-ratio: 5 / 4; border-radius: 150px 26px 150px 26px; }
.sfeer .vorm-boog .sfeer-kader { aspect-ratio: 4 / 5; border-radius: 50% 50% 26px 26px / 40% 40% 26px 26px; }
@media (max-width: 759px) {
	.sfeer-compositie { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
	.sfeer-foto:nth-of-type(1) { margin-top: 0; }
	.sfeer-foto:nth-of-type(2) { margin-top: 2.5rem; }
	.sfeer-foto:nth-of-type(3) { margin-top: -1rem; }
	.sfeer-foto:nth-of-type(4) { margin-top: 1rem; }
	.sfeer .vorm-blad .sfeer-kader { border-radius: 90px 20px 90px 20px; }
	.sfeer-pad { top: 30%; height: 40%; }
}
@media (prefers-reduced-motion: no-preference) {
	.js .sfeer .sfeer-foto { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .14s); }
	.js .sfeer.is-in .sfeer-foto { opacity: 1; transform: none; }
	.js .sfeer .sfeer-pad path { stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 2.4s var(--ease) .3s; }
	.js .sfeer.is-in .sfeer-pad path { clip-path: inset(0 0 0 0); }
}

/* ---------- Credit: YellowMedia (donkere footer, witte variant) ---------- */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.ym { --ym: #f4c64a; --ym-ease: cubic-bezier(.2, .7, .2, 1); position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 2px; color: #B9C3C9; text-decoration: none; font-size: .95rem; }
.site-footer a.ym:hover { text-decoration: none; }
.ym__text { transition: color .4s var(--ym-ease); }
.ym__logo { position: relative; display: block; width: 140px; height: 15px; }
.ym__logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .55; transition: filter .6s var(--ym-ease), opacity .6s var(--ym-ease), transform .6s var(--ym-ease); }
.ym__logo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .95) 46%, var(--ym) 50%, rgba(255, 255, 255, .95) 54%, transparent 70%) no-repeat;
	background-size: 260% 100%; background-position: 130% 0;
	-webkit-mask: url("../img/yellowmedia-white.webp") center / contain no-repeat; mask: url("../img/yellowmedia-white.webp") center / contain no-repeat;
	opacity: 0; }
.ym__logo::before { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--ym); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ym-ease); }
.ym:hover .ym__text, .ym:focus-visible .ym__text { color: #FFFFFF; }
.ym:hover .ym__logo img, .ym:focus-visible .ym__logo img { filter: none; opacity: 1; transform: translateY(-1px) scale(1.04); }
.ym:hover .ym__logo::after, .ym:focus-visible .ym__logo::after { opacity: 1; animation: ymShine 1.1s .1s var(--ym-ease) forwards; }
.ym:hover .ym__logo::before, .ym:focus-visible .ym__logo::before { transform: scaleX(1); }
.ym:focus-visible { outline: 3px solid var(--ym); outline-offset: 4px; border-radius: 6px; }
@keyframes ymShine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .ym *, .ym *::before, .ym *::after { animation: none !important; transition: none !important; } }