/* ==========================================================================
   Casteleijn College: ontwerp 2026
   Gedurfd, typografisch en rustig tegelijk.
   ========================================================================== */

:root {
  /* Merkkleuren (uit het logo) */
  --blauw: #00457c;        /* Casteleijn-blauw */
  --nacht: #00233f;        /* diepste blauw: grote vlakken, tekst op groen */
  --groen: #00a297;        /* poldergroen */
  --groen-d: #00776f;      /* groen voor tekst/knoppen op licht */
  --mint: #7fe0d6;         /* groen voor tekst op donker */
  --mint-l: #d9f2ef;
  --zand: #f4f1ea;
  --papier: #fbfaf7;
  --inkt: #13212e;
  --grijs: #52606c;
  --lijn: rgb(0 35 63 / .14);
  --wit: #fff;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --tekst: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --g: clamp(16px, 4vw, 48px);
  --sectie: clamp(64px, 9vw, 120px);
  --r: 22px;
  --polder: polygon(9% 11%, 74% 3%, 97% 7%, 96% 92%, 42% 99%, 38% 64%, 3% 59%);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font: 400 1.125rem/1.65 var(--tekst);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--mint); color: var(--nacht); }
html { scrollbar-color: rgb(0 35 63 / .35) transparent; accent-color: var(--groen-d); caret-color: var(--groen-d); }
a { color: var(--groen-d); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blauw); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--groen); outline-offset: 3px; border-radius: 6px; }
.donker :focus-visible, .groen-vlak :focus-visible { outline-color: var(--wit); }
main:focus { outline: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }

h1, h2, h3, h4, .display {
  font-family: var(--display); font-weight: 800; color: var(--nacht);
  line-height: .98; letter-spacing: -.035em; margin: 0 0 .45em; text-wrap: balance;
}
h1, .d-1 { font-size: clamp(2.9rem, 6.8vw, 6rem); }
h2, .d-2 { font-size: clamp(2.3rem, 6vw, 5rem); }
.d-3 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; }
.h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; }
h4 { font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.2; }
.groen-tekst { color: var(--groen); }
.donker .groen-tekst { color: var(--mint); }
.lead { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; max-width: 34em; }
.donker .lead { color: #c9d8e5; }
.meer { margin: 20px 0 0; }
.klein { font-size: .95rem; color: var(--grijs); }
.datumregel { font-weight: 700; color: var(--groen-d); margin-bottom: 1.2rem; font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--g); }
.wrap--smal { max-width: 860px; }
.sectie { padding-block: var(--sectie); position: relative; }
.sectie--krap { padding-block: calc(var(--sectie) * .6); }
.donker { background: var(--nacht); color: #d7e3ee; }
.donker h1, .donker h2, .donker h3, .donker h4, .donker .display { color: var(--wit); }
.donker a:not(.knop) { color: var(--mint); }
.blauw-vlak { background: var(--blauw); }
.groen-vlak { background: var(--groen); color: var(--nacht); }
.groen-vlak a:not(.knop) { color: var(--nacht); }
.zand { background: var(--zand); }
.wit { background: var(--wit); }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }

.skiplink { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--nacht); color: var(--wit); padding: .8em 1.1em; border-radius: 10px; }
.skiplink:focus, .skiplink:hover { top: 12px; color: var(--wit); }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knoppen ---------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 700 1.05rem/1.1 var(--tekst); text-decoration: none; cursor: pointer;
  padding: 1em 1.5em; border-radius: 999px; border: 2px solid transparent;
  background: var(--nacht); color: var(--wit);
  transition: transform .25s var(--ease), background .2s, color .2s;
}
.knop:hover { transform: translateY(-2px); background: var(--blauw); color: var(--wit); }
.knop .i { transition: transform .25s var(--ease); }
.knop:hover .i { transform: translateX(4px); }
.knop--groen { background: var(--groen); color: var(--nacht); }
.knop--groen:hover { background: var(--mint); color: var(--nacht); }
.knop--wit { background: var(--wit); color: var(--nacht); }
.knop--wit:hover { background: var(--mint-l); color: var(--nacht); }
.knop--rand { background: transparent; color: currentColor; border-color: currentColor; }
.knop--rand:hover { background: var(--nacht); border-color: var(--nacht); color: var(--wit); }
.donker .knop--rand:hover { background: var(--wit); border-color: var(--wit); color: var(--nacht); }
.knop--licht { color: var(--wit); }
.knop--licht:hover { background: var(--wit); border-color: var(--wit); color: var(--nacht); }
.knop:active { transform: translateY(0) scale(.98); }
.knop--groot { font-size: 1.2rem; padding: 1.1em 1.8em; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pijl { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none; }
.pijl .i { transition: transform .25s var(--ease); }
.pijl:hover .i, a:hover > .pijl .i, .kaart:hover .pijl .i { transform: translateX(5px); }

/* Kop / navigatie -------------------------------------------------------- */
.kop { position: sticky; top: 0; z-index: 100; background: var(--papier); transition: box-shadow .25s; }
.kop.gescrold { box-shadow: 0 1px 0 var(--lijn), 0 10px 30px rgb(0 35 63 / .06); }
.kop__in { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.kop__logo { flex: none; margin-right: auto; display: block; }
.kop__logo img { width: 200px; }
.kop__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.kop__nav a {
  display: block; padding: .55em .8em; border-radius: 999px; text-decoration: none;
  color: var(--nacht); font-weight: 700; font-size: 1rem; white-space: nowrap;
}
.kop__nav a:hover { background: var(--mint-l); color: var(--nacht); }
.kop__nav a[aria-current] { background: var(--nacht); color: var(--wit); }
.kop__acties { display: flex; gap: 8px; align-items: center; }
.menuknop {
  display: none; align-items: center; gap: 10px; border: 2px solid var(--nacht); background: transparent; color: var(--nacht);
  border-radius: 999px; padding: .6em 1.05em; font: 700 1rem var(--tekst); cursor: pointer;
}
.menuknop__icoon { width: 20px; height: 12px; position: relative; }
.menuknop__icoon::before, .menuknop__icoon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.menuknop__icoon::before { top: 1px; } .menuknop__icoon::after { top: 9px; }
.menuknop[aria-expanded="true"] .menuknop__icoon::before { top: 5px; transform: rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__icoon::after { top: 5px; transform: rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 84px 0 0; z-index: 99; background: var(--nacht); color: var(--wit);
  overflow-y: auto; padding: 24px var(--g) 48px;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .3s var(--ease);
}
.menu-overlay.open { opacity: 1; visibility: visible; transform: none; }
.menu-overlay ul { list-style: none; margin: 0 0 32px; padding: 0; }
.menu-overlay li { border-bottom: 1px solid rgb(255 255 255 / .14); }
.menu-overlay a.menu-overlay__link { display: flex; flex-direction: column; padding: 18px 0; text-decoration: none; color: var(--wit); }
.menu-overlay__link strong { font: 800 clamp(1.9rem, 7vw, 2.6rem)/1 var(--display); letter-spacing: -.03em; }
.menu-overlay__link span { color: #a9bccd; font-size: 1rem; margin-top: 6px; }
.menu-overlay__link:hover strong, .menu-overlay__link[aria-current] strong { color: var(--mint); }
.menu-overlay__contact { display: grid; gap: 8px; color: #c5d4e1; }
.menu-overlay__contact a { color: var(--mint); }
body.menu-open { overflow: hidden; }

@media (max-width: 1180px) {
  .kop__nav { display: none; }
  .menuknop { display: inline-flex; }
}
@media (max-width: 520px) {
  .kop__logo img { width: 150px; }
  .kop__acties .knop { padding: .75em 1.05em; font-size: .95rem; }
  .menuknop__tekst { display: none; }
  .menuknop { padding: .7em; }
}

/* Hero ------------------------------------------------------------------- */
.hero { background: var(--nacht); color: #d7e3ee; overflow: hidden; position: relative; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: clamp(48px, 8vw, 110px) clamp(56px, 8vw, 120px); }
.hero h1 { color: var(--wit); margin-bottom: .3em; }
.hero h1 .groen-tekst { color: var(--mint); display: block; }
.hero .lead { color: #c9d8e5; margin-bottom: 2rem; }
.hero__collage { position: relative; aspect-ratio: 4 / 5; min-height: 320px; }
.hero__collage figure { position: absolute; margin: 0; clip-path: var(--polder); }
.hero__collage img { width: 100%; height: 100%; object-fit: cover; }
.hero__collage .f1 { inset: 0 0 22% 8%; }
.hero__collage .f2 { width: 58%; aspect-ratio: 1; left: -6%; bottom: 0; }
.hero__vorm { position: absolute; right: -8%; bottom: 6%; width: 38%; aspect-ratio: 1; background: var(--groen); clip-path: var(--polder); }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lead, .hero .knoppen { animation: binnen .9s var(--ease) both; }
  .hero .lead { animation-delay: .08s; }
  .hero .knoppen { animation-delay: .16s; }
  .hero__collage figure, .hero__vorm { animation: polder 1.1s var(--ease) both; }
  .hero__collage .f2 { animation-delay: .12s; }
  .hero__vorm { animation-delay: .22s; }
}
@keyframes binnen { from { transform: translateY(14px); } }
@keyframes polder { from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); } }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__collage { max-width: 440px; width: 86%; margin-inline: auto; aspect-ratio: 1 / 1; }
}

/* Paginakop (subpagina's) */
.pkop { background: var(--nacht); color: #d7e3ee; position: relative; overflow: hidden; }
.pkop__in { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(48px, 8vw, 112px); }
.pkop h1 { color: var(--wit); max-width: 12ch; }
.pkop h1 .groen-tekst { color: var(--mint); }
.pkop .lead { color: #c9d8e5; }
.pkop__vorm { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(40vw, 520px); aspect-ratio: 1; background: var(--groen); clip-path: var(--polder); }
.pkop__vorm img { width: 100%; height: 100%; object-fit: cover; }
.pkop--groen { background: var(--groen); color: var(--nacht); }
.pkop--groen h1, .pkop--groen .lead { color: var(--nacht); }
.pkop--groen .kruimel ol, .pkop--groen .kruimel a { color: var(--nacht); }
.pkop--groen h1 .groen-tekst { color: var(--wit); }
.pkop--groen .pkop__vorm { background: rgb(255 255 255 / .22); }
.pkop--foto h1, .pkop--foto .lead { max-width: min(100%, 14ch); }
.pkop--foto .lead { max-width: 28em; }
@media (min-width: 901px) { .pkop--foto .pkop__in > * { max-width: 58%; } }
@media (max-width: 900px) { .pkop:not(.pkop--foto) .pkop__vorm { display: none; } .pkop--foto .pkop__vorm { position: relative; opacity: 1; right: auto; top: auto; transform: none; width: 70%; margin: -24px 0 32px auto; } }
.kruimel ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 28px; padding: 0; font-size: .95rem; color: #a9bccd; }
.kruimel li + li::before { content: "→"; margin: 0 .55em; }
.kruimel a { color: var(--mint); }

/* Sprongmenu (op deze pagina) */
.sprong { position: sticky; top: 84px; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--lijn); }
.sprong ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.sprong a { display: block; white-space: nowrap; padding: .45em 1em; border-radius: 999px; border: 1.5px solid var(--lijn); color: var(--nacht); text-decoration: none; font-weight: 700; font-size: .95rem; }
.sprong a:hover, .sprong a.actief { background: var(--nacht); border-color: var(--nacht); color: var(--wit); }

/* Doelgroep-wegwijzer ---------------------------------------------------- */
.wegwijzer { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lijn); max-width: var(--wrap); margin-inline: auto; }
.wegwijzer a {
  display: flex; flex-direction: column; gap: 10px; padding: 32px clamp(16px, 2.4vw, 32px) 36px;
  text-decoration: none; color: var(--nacht); border-right: 1px solid var(--lijn); transition: background .25s;
}
.wegwijzer a:last-child { border-right: 0; }
.wegwijzer a:hover { background: var(--mint-l); color: var(--nacht); }
.wegwijzer small { font-weight: 700; font-size: .95rem; color: var(--groen-d); }
.wegwijzer strong { font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.05 var(--display); letter-spacing: -.02em; }
.wegwijzer span { color: var(--grijs); font-size: 1rem; }
.wegwijzer .i { margin-top: auto; width: 28px; height: 28px; color: var(--groen-d); transition: transform .25s var(--ease); }
.wegwijzer a:hover .i { transform: translateX(6px); }
@media (max-width: 900px) { .wegwijzer { grid-template-columns: 1fr 1fr; } .wegwijzer a:nth-child(2) { border-right: 0; } .wegwijzer a:nth-child(-n+2) { border-bottom: 1px solid var(--lijn); } }
@media (max-width: 600px) {
  .wegwijzer { grid-template-columns: 1fr; }
  .wegwijzer a { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; padding: 18px var(--g); border-right: 0; border-bottom: 1px solid var(--lijn); }
  .wegwijzer a > :not(.i) { grid-column: 1; }
  .wegwijzer .i { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .wegwijzer strong { font-size: 1.35rem; }
  .wegwijzer span { font-size: .95rem; }
}

/* Manifest: Rust. Ruimte. Richting. ------------------------------------- */
.manifest { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nacht); }
.manifest li { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; padding: clamp(24px, 4vw, 48px) 0; border-bottom: 2px solid var(--nacht); }
.manifest .manifest__woord { font: 800 clamp(3.2rem, 8.4vw, 6rem)/.9 var(--display); letter-spacing: -.04em; color: var(--nacht); margin: 0; }
.manifest__woord span { color: var(--groen); }
.manifest p { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.manifest li > div > p { margin-bottom: .7em; }
.manifest strong { display: block; font: 800 1.35rem/1.2 var(--display); color: var(--nacht); margin-bottom: 6px; letter-spacing: -.01em; }
@media (max-width: 760px) { .manifest li { grid-template-columns: 1fr; gap: 8px; } }

/* Cijfers --------------------------------------------------------------- */
.feiten { font: 600 clamp(1.7rem, 3.8vw, 3.3rem)/1.25 var(--display); letter-spacing: -.025em; color: var(--wit); max-width: 24ch; margin: 0; text-wrap: pretty; }
.feiten strong { font-weight: 800; white-space: nowrap; color: var(--mint); }
.cijfer__getal { font: 800 clamp(2.8rem, 5.6vw, 5.2rem)/.9 var(--display); letter-spacing: -.04em; color: var(--nacht); display: block; margin-bottom: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Kop met actie ernaast */
.koprij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); }
.koprij > div { max-width: 820px; }
.koprij h2 { margin-bottom: .2em; }
.koprij .lead { margin: 0; }

/* Leerwegkaarten -------------------------------------------------------- */
.lwlijst { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.lwkaart {
  position: relative; display: flex; flex-direction: column; min-height: 460px; border-radius: var(--r); overflow: hidden;
  background: var(--wit); color: var(--nacht); text-decoration: none; isolation: isolate;
  border: 1px solid var(--lijn); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lwkaart:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgb(0 35 63 / .16); color: var(--nacht); }
.lwkaart__foto { aspect-ratio: 4 / 3; overflow: hidden; }
.lwkaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lwkaart:hover .lwkaart__foto img { transform: scale(1.05); }
.lwkaart__tekst { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.lwkaart .lwkaart__naam { font: 800 2.3rem/.95 var(--display); letter-spacing: -.04em; margin: 0 0 4px; }
.lwkaart .lwkaart__sub { font-size: .95rem; color: var(--grijs); margin-bottom: 14px; }
.lwkaart p { font-size: 1rem; line-height: 1.5; }
.lwkaart .pijl { margin-top: auto; }
@media (max-width: 1100px) { .lwlijst { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lwlijst { grid-template-columns: 1fr; } .lwkaart { min-height: 0; } }

/* Theorie–praktijk-meter */
.meter { margin: 4px 0 18px; }
.meter__baan { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--blauw), var(--groen)); }
.meter__stip { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--wit); border: 5px solid var(--nacht); transform: translate(-50%, -50%); }
.meter__labels { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--grijs); margin-top: 8px; letter-spacing: .04em; text-transform: uppercase; }
.donker .meter__labels { color: #a9bccd; }
.donker .meter__stip { border-color: var(--mint); background: var(--nacht); }

/* Split-blokken ---------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--boven { align-items: start; }
.split--breed-links { grid-template-columns: 1.2fr .8fr; }
@media (max-width: 900px) { .split, .split--breed-links { grid-template-columns: 1fr; } .split__beeld--eerst { order: -1; } }
.polderfoto { clip-path: var(--polder); aspect-ratio: 1; overflow: hidden; }
.polderfoto img { width: 100%; height: 100%; object-fit: cover; }
.fotorond { border-radius: var(--r); overflow: hidden; }
.fotorond img { width: 100%; height: 100%; object-fit: cover; }

/* Route naar de toekomst ------------------------------------------------ */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; counter-reset: route; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; border-top: 3px dashed rgb(127 224 214 / .6); }
.route li { position: relative; padding-right: clamp(12px, 2.4vw, 36px); counter-increment: route; }
.route__stip { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 24px; background: var(--groen); color: var(--nacht); clip-path: var(--polder); font: 800 1.5rem var(--display); }
.route li:last-child .route__stip { background: var(--wit); }
.route h3 { color: var(--wit); margin-bottom: .4em; }
.route p { font-size: 1.02rem; color: #c9d8e5; }
@media (max-width: 900px) {
  .route { grid-template-columns: 1fr; gap: 8px; }
  .route::before { left: 33px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 3px dashed rgb(127 224 214 / .6); }
  .route li { display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 0 0 20px; }
  .route__stip { margin: 0; }
}

/* Video ------------------------------------------------------------------ */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.video > img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .3s, transform .8s var(--ease); }
.video:hover > img { opacity: .6; transform: scale(1.02); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__knop { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; border: 0; background: none; color: var(--wit); cursor: pointer; font: 800 clamp(1.3rem, 2.4vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; padding: 16px; text-align: center; }
.video__play { width: clamp(84px, 10vw, 128px); aspect-ratio: 1; display: grid; place-items: center; background: var(--groen); color: var(--nacht); clip-path: var(--polder); transition: transform .3s var(--ease); }
.video__play .i { width: 40%; height: 40%; margin-left: 6%; }
.video__knop:hover .video__play { transform: scale(1.08) rotate(-3deg); }
.video__info { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px; text-align: center; font-size: .82rem; color: #d7e3ee; }
.video.speelt > img, .video.speelt .video__knop, .video.speelt .video__info { display: none; }
.video__alt { margin: 12px 0 0; font-size: .95rem; color: var(--grijs); }
.donker .video__alt { color: #c9d8e5; }

/* Stappen --------------------------------------------------------------- */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); counter-reset: stap; }
.stappen > li { counter-increment: stap; position: relative; padding-top: 22px; border-top: 2px solid var(--nacht); }
.stappen > li::before { content: counter(stap); display: block; font: 800 clamp(4rem, 8vw, 6rem)/.8 var(--display); color: var(--groen-d); letter-spacing: -.04em; margin-bottom: 20px; }
.stappen h3 { margin-bottom: .4em; }
.stappen p:last-child { margin: 0; }
.donker .stappen > li { border-color: rgb(255 255 255 / .3); }
.donker .stappen > li::before { color: var(--mint); }
@media (max-width: 900px) { .stappen { grid-template-columns: 1fr; } .stappen > li { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; } .stappen > li::before { grid-row: span 3; margin: 0; font-size: 3.6rem; } }

/* Agenda ---------------------------------------------------------------- */
.agenda { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nacht); }
.agenda__item { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.agenda__item[hidden] { display: none; }
.agenda__datum { font: 800 1.9rem/1 var(--display); letter-spacing: -.03em; color: var(--nacht); font-variant-numeric: tabular-nums; }
.agenda__datum small { display: block; font: 700 .8rem var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--groen-d); margin-top: 4px; }
.agenda__tekst h3 { font-size: 1.3rem; margin: 0 0 4px; }
.agenda__tekst h3 a { color: var(--nacht); }
.agenda__tekst p { margin: 0; color: var(--grijs); font-size: 1rem; }
.agenda__soort { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25em .7em; border-radius: 999px; background: var(--mint-l); color: var(--nacht); margin-bottom: 6px; }
.agenda__item--activiteit .agenda__soort { background: var(--groen); }
.agenda__item--vakantie .agenda__soort { background: var(--zand); border: 1px solid var(--lijn); }
.agenda__leeg { color: var(--grijs); padding-top: 16px; }
.nieuwsregel { margin-top: clamp(32px, 5vw, 48px); padding-top: 20px; border-top: 2px solid var(--nacht); }
.nieuwsregel h3 { font-size: 1rem; font-family: var(--tekst); letter-spacing: 0; color: var(--groen-d); margin-bottom: 8px; }
.nieuwsregel > a:first-of-type { display: block; text-decoration: none; color: var(--nacht); margin-bottom: 12px; }
.nieuwsregel > a:first-of-type strong { display: block; font: 800 clamp(1.3rem, 2vw, 1.6rem)/1.15 var(--display); letter-spacing: -.02em; }
.nieuwsregel > a:first-of-type:hover strong { text-decoration: underline; }
.nieuwsregel time { font-size: .95rem; color: var(--grijs); }

/* Verhalen (nieuws) ----------------------------------------------------- */
.verhalen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.verhaal { position: relative; display: flex; flex-direction: column; }
.verhaal__foto { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 18px; background: var(--zand); }
.verhaal__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.verhaal:hover .verhaal__foto img { transform: scale(1.05); }
.verhaal time { font-size: .9rem; font-weight: 700; color: var(--groen-d); letter-spacing: .04em; }
.verhaal h3 { margin: 6px 0 10px; }
.verhaal h3 a { color: var(--nacht); text-decoration: none; }
.verhaal h3 a::after { content: ""; position: absolute; inset: 0; }
.verhaal h3 a:hover { text-decoration: underline; }
.verhaal p { color: var(--grijs); font-size: 1rem; margin: 0; }
.verhaal--groot { grid-column: span 2; }
.verhaal--groot .verhaal__foto { aspect-ratio: 16 / 9; }
.verhaal--groot h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
@media (max-width: 900px) { .verhalen { grid-template-columns: 1fr 1fr; } .verhaal--groot { grid-column: 1 / -1; } }
@media (max-width: 560px) { .verhalen { grid-template-columns: 1fr; } }

/* Vragen (accordeon) ---------------------------------------------------- */
.vragen { border-top: 2px solid var(--nacht); }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font: 800 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--nacht); }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mint-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%2300233f' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .3s var(--ease), background-color .2s; }
.vragen details[open] summary::after { transform: rotate(45deg); background-color: var(--groen); }
.vragen summary:hover { color: var(--blauw); }
.vragen__antwoord { padding: 0 64px 28px 0; max-width: 60em; }
.vragen__antwoord p { margin-bottom: .6em; }

/* Kaarten (algemeen) ---------------------------------------------------- */
.raster { display: grid; gap: clamp(16px, 2vw, 24px); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.kaart { position: relative; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.kaart > :last-child { margin-bottom: 0; }
.kaart h3 { margin-bottom: .45em; }
.kaart--link { text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.kaart--link:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 35 63 / .12); border-color: var(--groen); color: inherit; }
.kaart--link .pijl { margin-top: auto; padding-top: 12px; color: var(--groen-d); }
.kaart__vorm { width: 56px; height: 56px; display: grid; place-items: center; background: var(--mint-l); color: var(--nacht); clip-path: var(--polder); margin-bottom: 20px; }
.kaart__vorm .i { width: 26px; height: 26px; }
.donker .kaart { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); }
.zand .kaart { border-color: transparent; }

/* Tekst & lijsten */
.tekst { font-size: 1.15rem; }
.tekst > * + h2 { margin-top: 1.2em; }
.tekst > * + h3 { margin-top: 1.6em; }
.tekst li { margin-bottom: .4em; }
.vinken { list-style: none; padding: 0; margin: 0 0 1.4em; }
.vinken li { position: relative; padding-left: 38px; margin-bottom: .7em; }
.vinken li::before { content: ""; position: absolute; left: 0; top: .15em; width: 24px; height: 24px; background: var(--groen); clip-path: var(--polder); }
.vinken li::after { content: ""; position: absolute; left: 7px; top: calc(.15em + 6px); width: 10px; height: 6px; border-left: 2.5px solid var(--nacht); border-bottom: 2.5px solid var(--nacht); transform: rotate(-45deg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 1em; padding: 0; }
.chips li { padding: .45em 1em; border-radius: 999px; background: var(--mint-l); color: var(--nacht); font-weight: 700; font-size: .98rem; }
.donker .chips li { background: rgb(127 224 214 / .15); color: var(--mint); }
.kader { background: var(--mint-l); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.kader > :last-child { margin-bottom: 0; }
.kader > p { max-width: 70ch; }
.kader--nacht { background: var(--nacht); color: #d7e3ee; }
.donker .kader { background: rgb(127 224 214 / .12); color: #d7e3ee; }
.donker .kader strong, .donker .tekst strong { color: var(--wit); }
.smal { max-width: 16ch; }

/* Punten: open lijst met lijn erboven (in plaats van icoonkaartjes) */
.punten { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.punten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.punten > li { border-top: 2px solid var(--nacht); padding-top: 20px; }
.punten .i { display: block; width: 30px; height: 30px; color: var(--groen-d); margin-bottom: 14px; }
.punten h3 { margin-bottom: .3em; }
.punten p { margin: 0; }
.donker .punten > li { border-color: rgb(255 255 255 / .3); }
.donker .punten .i { color: var(--mint); }
@media (max-width: 480px) { .punten--2 { grid-template-columns: 1fr; } }
.kader--nacht a { color: var(--mint); }
.kader--nacht h3 { color: var(--wit); }

/* Downloads */
.downloads { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nacht); }
.downloads li { border-bottom: 1px solid var(--lijn); }
.downloads a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 8px; text-decoration: none; color: var(--grijs); transition: background .2s; }
.downloads a:hover { background: var(--mint-l); color: var(--grijs); }
.downloads .i { width: 28px; height: 28px; color: var(--groen-d); }
.downloads strong { display: block; font: 800 1.3rem/1.2 var(--display); letter-spacing: -.02em; color: var(--nacht); margin-bottom: 2px; }
.downloads__soort { font-weight: 700; font-size: .85rem; color: var(--nacht); background: var(--mint-l); border-radius: 999px; padding: .3em .8em; }
.downloads a:hover .downloads__soort { background: var(--wit); }

/* Tabellen */
.tabel-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--lijn); background: var(--wit); }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel tbody tr:last-child > * { border-bottom: 0; }
.tabel thead th { background: var(--nacht); color: var(--wit); font-weight: 700; }
.tabel th[scope="row"] { font-weight: 700; color: var(--nacht); }

/* Weekstrip (schooltijden) */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.week__dag { background: var(--wit); border-radius: 16px; padding: 18px 14px; text-align: center; border: 1px solid var(--lijn); }
.week__dag strong { display: block; font: 800 1.2rem var(--display); color: var(--nacht); margin-bottom: 10px; }
.week__blok { background: var(--groen); color: var(--nacht); border-radius: 10px; padding: 18px 6px; font-weight: 700; font-size: .95rem; line-height: 1.3; }
@media (max-width: 640px) { .week { grid-template-columns: 1fr; } .week__dag { display: flex; justify-content: space-between; align-items: center; text-align: left; } .week__dag strong { margin: 0; } .week__blok { padding: 8px 14px; } }

/* Formulier */
.formulier { display: grid; gap: 18px; }
.veld { display: grid; gap: 6px; }
.veld label { font-weight: 700; color: var(--nacht); }
.formulier input:not([type=checkbox]) { font: inherit; padding: .85em 1em; border: 2px solid var(--lijn); border-radius: 12px; background: var(--wit); color: var(--inkt); width: 100%; }
.formulier select { font: inherit; padding: .85em 2.6em .85em 1em; border: 2px solid var(--lijn); border-radius: 12px; color: var(--inkt); width: 100%; appearance: none;
  background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2300233f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.formulier input:focus, .formulier select:focus { outline: none; border-color: var(--groen-d); box-shadow: 0 0 0 4px rgb(0 162 151 / .2); }
.formulier [aria-invalid="true"] { border-color: #b3261e; }
.veld .akkoord { font-weight: 400; color: var(--inkt); }
.veld__fout { margin: 0; color: #b3261e; font-weight: 700; font-size: .95rem; }
.knop:disabled, .knop[aria-busy="true"] { opacity: .7; cursor: progress; transform: none; }
.formulier__melding { border-radius: var(--r); padding: clamp(20px, 3vw, 28px); background: var(--mint-l); color: var(--nacht); margin-top: 20px; }
.formulier__melding:focus { outline: none; }
.formulier__melding h3 { margin-bottom: .3em; }
.formulier__melding p { margin-bottom: .6em; }
.formulier__melding > :last-child { margin-bottom: 0; }
.formulier__melding--fout { background: #fcebe9; }
.formulier__melding--info { background: var(--zand); }
.formulier__melding textarea { display: block; width: 100%; min-height: 10em; margin: 12px 0; padding: .8em 1em; border: 2px solid var(--lijn); border-radius: 12px; background: var(--wit); color: var(--inkt); font: .95rem/1.5 var(--tekst); resize: vertical; }
.kaart--kaal { border: 0; }
@media (min-width: 901px) { .kaart--plak { position: sticky; top: 110px; } }
.avondtijd { font-size: clamp(2.6rem, 6vw, 4.5rem); }
.avondtijd span { color: var(--groen); }
.formulier .rij { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.akkoord { display: flex; gap: 12px; align-items: flex-start; }
.akkoord input { width: 22px; height: 22px; flex: none; margin-top: 3px; accent-color: var(--groen-d); }
.verplicht { color: #b3261e; }

/* Kaart (maps) */
.maps { border-radius: var(--r); overflow: hidden; min-height: 420px; background: var(--zand); border: 1px solid var(--lijn); }
.maps iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* Contactregels */
.contact-groot a { display: block; font: 800 clamp(1.6rem, 3.6vw, 2.8rem)/1.1 var(--display); letter-spacing: -.03em; color: var(--nacht); text-decoration: none; margin-bottom: 8px; word-break: break-word; }
.contact-groot a:hover { color: var(--groen-d); }

/* Galerij */
.galerij { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(140px, 18vw, 240px); gap: 12px; list-style: none; margin: 0; padding: 0; }
.galerij li { border-radius: var(--r); overflow: hidden; position: relative; grid-column: span 2; }
.galerij li:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.galerij li:nth-child(4), .galerij li:nth-child(5) { grid-column: span 3; }
.galerij img { width: 100%; height: 100%; object-fit: cover; }
.galerij figure { margin: 0; height: 100%; }
.galerij figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; background: rgb(0 35 63 / .85); color: var(--wit); font-size: .9rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; width: fit-content; }
@media (max-width: 760px) { .galerij { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .galerij li, .galerij li:nth-child(n) { grid-column: span 1; grid-row: span 1; } .galerij li:nth-child(1) { grid-column: span 2; grid-row: span 2; } }

/* Leerwegpagina: kenmerken & navigatie */
.lw-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lw-nav a { display: block; padding: 18px; border-radius: 16px; background: var(--wit); border: 1px solid var(--lijn); text-decoration: none; color: var(--nacht); }
.lw-nav a strong { display: block; font: 800 1.5rem/1 var(--display); letter-spacing: -.03em; }
.lw-nav a span { font-size: .9rem; color: var(--grijs); }
.lw-nav a:hover { border-color: var(--groen); }
.lw-nav a[aria-current] { background: var(--nacht); color: var(--wit); border-color: var(--nacht); }
.lw-nav a[aria-current] span { color: #a9bccd; }
@media (max-width: 760px) { .lw-nav { grid-template-columns: 1fr 1fr; } }

/* Grote afsluiter (CTA) ------------------------------------------------- */
.afsluiter { background: var(--groen); color: var(--nacht); overflow: hidden; position: relative; }
.afsluiter__in { position: relative; padding-block: clamp(64px, 10vw, 140px); }
.afsluiter h2 { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: .25em; max-width: 10ch; }
.afsluiter p { font-size: clamp(1.15rem, 2vw, 1.4rem); max-width: 32em; margin-bottom: 2rem; }
.afsluiter__stappen { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: as; }
.afsluiter__stappen li { counter-increment: as; border-top: 2px solid var(--nacht); padding-top: 16px; font-size: 1.05rem; line-height: 1.45; }
.afsluiter__stappen li::before { content: counter(as); display: block; font: 800 2.4rem/1 var(--display); letter-spacing: -.03em; margin-bottom: 10px; }
.afsluiter__stappen strong { display: block; font: 800 1.35rem/1.15 var(--display); letter-spacing: -.02em; margin-bottom: 4px; }
.afsluiter__meer { margin: 24px 0 0; }
.afsluiter__meer a { color: var(--nacht); }
@media (max-width: 760px) { .afsluiter__stappen { grid-template-columns: 1fr; } }
.afsluiter__vorm { position: absolute; right: -4%; bottom: -18%; width: min(46vw, 560px); aspect-ratio: 1; background: var(--nacht); clip-path: var(--polder); opacity: .1; }

/* Footer ---------------------------------------------------------------- */
.voet { background: var(--nacht); color: #b9cadb; font-size: 1rem; }
.voet a { color: var(--wit); }
.voet a:hover { color: var(--mint); }
.voet__boven { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-block: 72px 48px; }
.voet__logo { width: 220px; background: var(--wit); padding: 12px 16px; border-radius: 14px; margin-bottom: 20px; }
.voet h2 { font: 700 1.05rem var(--tekst); color: var(--mint); margin: 0 0 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 8px; }
.voet__onder { border-top: 1px solid rgb(255 255 255 / .12); }
.voet__onder .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px; font-size: .9rem; }
.voet__onder ul { display: flex; flex-wrap: wrap; gap: 20px; }
.voet__onder li { margin: 0; }
@media (max-width: 1000px) { .voet__boven { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voet__boven { grid-template-columns: 1fr; } }

/* Duimbalk (mobiel) */
.duimbalk { display: none; }
@media (max-width: 760px) {
  .js .duimbalk {
    display: flex; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
    padding: 8px; background: var(--nacht); border-radius: 999px; box-shadow: 0 12px 30px rgb(0 35 63 / .3);
    transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s;
  }
  .js .duimbalk.zichtbaar { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .duimbalk .knop { flex: 1; padding: .8em 1em; font-size: 1rem; }
  .duimbalk .knop--rand { flex: 0 0 auto; color: var(--wit); border-color: rgb(255 255 255 / .5); }
  .duimbalk .knop--rand:only-child { flex: 1; }
  .duimbalk .knop--rand:hover { background: var(--wit); border-color: var(--wit); color: var(--nacht); }
  body.menu-open .duimbalk { visibility: hidden; }
}

/* Beweging: alleen de hero komt binnen. Inhoud is altijd direct zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* Hulpklassen */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt { margin-top: clamp(32px, 5vw, 64px); }
.midden { text-align: center; }
.pt-0 { padding-top: 0; }

.lw-nav a { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

.hero .groen-tekst, .pkop:not(.pkop--groen) .groen-tekst { color: var(--mint); }