/* ==========================================================================
   Plastic Helden — Concept B · Energiek & Speels
   Gedrenkt PSF-blauw bovenin, aflopend naar het rustige lesbrief-register.
   ========================================================================== */

:root {
  --blauw: #0090d3;
  --blauw-diep: #00699a;
  --blauw-donker: #0678ac;
  --navy: #314b69;
  --navy-deep: #22354b;
  --inkt: #24384f;
  --grijsblauw: #bdccd4;
  --grijsblauw-m: #7d93a3; /* veldranden: 3.2:1 op wit (WCAG 1.4.11); --grijsblauw haalt maar 1.6:1 */
  --grijsblauw-d: #52677d;
  --mist: #f4f8fa;
  --groen: #51ae8b;
  --groen-diep: #2a6b52; /* AA-veilige tekstversie van groen (succesmeldingen) */
  --lichtgroen: #a2d0aa;
  --rood: #ea5157;
  --rood-diep: #d63b41;
  --les-navy: #283583;
  --les-magenta: #e6007e;
  --lijn: #dde6eb;

  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --maat: 1160px;
  --radius: 16px;
  --schaduw: 0 12px 32px -12px rgba(34, 53, 75, 0.3);
  /* Tweelaags focusring (DESIGN.md): binnenlaag contrasteert met het vlak,
     buitenlaag draagt de kleur — zo blijft de ring op elke grond zichtbaar.
     --focus voor lichte vlakken, --focus-donker voor header/hero/footer. */
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--rood-diep);
  --focus-donker: 0 0 0 3px var(--navy-deep), 0 0 0 6px #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* De *-reset hierboven verliest van GeneratePress' `ul, ol { margin: 0 0 1.5em 3em }`
   (elementselector > universele selector), waardoor elke lijst 3em inspringt.
   Daarom dezelfde specificiteit terugzetten. */
ul,
ol {
  margin: 0;
  padding: 0;
}
/* ...maar redactionele lijsten uit de editor hebben hun bullets én inspringing
   wél nodig, dus die krijgen hem binnen de contentcontainers terug. */
.entry-content ul,
.entry-content ol,
.rijketekst ul,
.rijketekst ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
  list-style: revert;
}
.entry-content li,
.rijketekst li {
  margin-bottom: 0.35em;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Het duiksysteem is scroll-gedreven beweging: bij reduced-motion gaat het
     hele systeem uit (app.js koppelt ook de scroll-meting los). */
  .duikzone,
  .dieptebalk,
  .diepteschaal {
    display: none !important;
  }
}

body {
  position: relative; /* anker voor de paginahoge dieptelat (uit concept C) */
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt);
  background: #fff;
}

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

/* Tekst selecteren kleurt als een marker over drukwerk (selectie-tint uit DESIGN.md) */
::selection {
  background: #cde9f8;
  color: var(--navy-deep);
}

.wrap {
  max-width: var(--maat);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

h1,
h2,
h3 {
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -0.02em;
}
h2 {
  color: var(--navy);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 700;
}
h3 {
  color: var(--navy);
  font-size: 1.18rem;
  font-weight: 600;
}

a {
  color: var(--blauw-diep);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--navy);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px; /* componenten met een eigen radius (pill, kaart, cirkel) behouden die: hun regel staat later in het bestand */
}
/* Op donkere vlakken (header, hero, footer) keert de ring om: donkere kern,
   witte buitenring. Knoppen hebben hun eigen tweelaags ring en blijven erbuiten. */
.site-header a:not(.btn):focus-visible,
.menu-toggle:focus-visible,
.hero a:not(.btn):focus-visible,
.hero button:not(.btn):focus-visible,
.site-footer a:focus-visible,
.footer-cookieknop:focus-visible,
.skiplink:focus-visible {
  box-shadow: var(--focus-donker);
}

.skiplink {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skiplink:focus {
  top: 0;
  color: #fff;
}

.ph {
  font-style: italic;
  border-bottom: 1px dashed currentColor;
}
.hero .ph {
  color: #d6eef9;
}
.waarom .ph {
  color: var(--grijsblauw-d);
}

/* ===== Knoppen ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 1rem/1.2 var(--font);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  /* Een pil die over twee regels breekt (header-CTA op ±390px) oogt kapot. */
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.18s ease-out;
}
.btn-s {
  padding: 0.55rem 1.15rem;
  font-size: 0.92rem;
}
.btn-l {
  padding: 1rem 3rem;
  font-size: 1.08rem;
}
/* :visited/:focus/:active expliciet: GP's globale a-states (0,1,1) winnen
   anders van .btn-red (0,1,0) en kleuren de knoptekst donker. */
.btn-red,
.btn-red:visited,
.btn-red:focus,
.btn-red:active {
  background: var(--rood-diep);
  color: #fff;
  /* Neutrale slagschaduw, geen roodgetinte gloed: die waas maakte de
     knoprand wollig (met name op de blauwe hero). */
  box-shadow: 0 8px 20px -10px rgba(10, 30, 50, 0.5);
}
.btn-red:hover {
  background: #c22f35;
  color: #fff;
  transform: translateY(-2px);
}
.btn-red:focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--rood-diep);
}
/* Secundaire knop op donkere vlakken (header-CTA): outline in plaats van
   vulling, zodat de rode hero-knop de enige prio-1 blijft. */
.btn-ghost,
.btn-ghost:visited,
.btn-ghost:focus,
.btn-ghost:active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.btn-ghost:hover {
  background: #fff;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px #fff;
  transform: translateY(-2px);
}
.btn-ghost:focus-visible {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.7),
    0 0 0 3px var(--navy-deep),
    0 0 0 6px #fff;
}
/* Op de blauwe gradienten (hero, pagina-kop) is het rood vrijwel even licht
   als de achtergrond (≈1.1:1): kleurcontrast alleen geeft geen scherpe rand.
   De witte binnenring levert de luminantierand (≥4.5:1 tegen rood én blauw). */
.hero .btn-red,
.hero .btn-red:visited,
.hero .btn-red:focus,
.hero .btn-red:active,
.pagina-kop .btn-red,
.pagina-kop .btn-red:visited,
.pagina-kop .btn-red:focus,
.pagina-kop .btn-red:active {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
    0 10px 24px -10px rgba(10, 30, 50, 0.55);
}
.hero .btn-red:focus-visible,
.pagina-kop .btn-red:focus-visible {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
    0 0 0 3px #fff,
    0 0 0 6px var(--rood-diep);
}
.btn:active {
  transform: translateY(1px);
}

/* ===== Header ===== */
/* Twee standen. Bovenaan de frontpage (.is-boven) is de balk glas: de
   hero-gradient loopt eronder door en de scrim bovenin de hero borgt het
   AA-contrast van de witte links (zie .hero). Na scroll — en op subpagina's
   en zonder JS altijd — vaart de AA-veilige vulling (::before) ervoor:
   wit op #0678AC = 4.9:1. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent; /* GP geeft .site-header wit; de vulling zit in ::before */
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blauw-donker);
  opacity: 1;
}
/* Alleen terug naar glas vervaagt; de vulling verschijnt direct, anders
   schuift bij snel scrollen de hero-tekst zichtbaar door het logo. */
body.ph-front .site-header.is-boven::before {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 4.5rem;
}
.brand {
  display: flex;
  align-items: center;
}
/* psf-logo-wit.svg = volledig PSF-logo, witte variant voor de donkere header */
.brand img {
  width: auto;
  height: 56px;
  margin-bottom: 6px; /* optisch centreren: het logo oogde te laag in de balk */
}
.site-header nav {
  margin-left: auto;
}
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.6rem;
}
.site-header nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover {
  border-bottom-color: #fff;
  color: #fff;
}

/* Hamburger (verschijnt < 700px; lost het ontbrekende mobiele menu op) */
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  place-items: center;
}
/* GP's eigen `button.menu-toggle` (flex-grow: 1, padding, border: 0) weegt
   zwaarder dan .menu-toggle; zonder dit rekt de knop uit over de halve balk. */
.site-header button.menu-toggle {
  flex: none;
  padding: 0;
  line-height: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
/* GP kleurt de toggle bij hover/focus/open donker; bij ons blijft hij wit. */
.site-header button.menu-toggle:hover,
.site-header button.menu-toggle:focus,
.site-header button.menu-toggle:active,
.site-header button.menu-toggle[aria-expanded='true'] {
  background: none;
  color: #fff;
}
.menu-toggle svg {
  width: 22px;
  height: 22px;
  grid-area: 1 / 1;
}
.menu-toggle .icon-close {
  display: none;
}
.menu-toggle[aria-expanded='true'] .icon-open {
  display: none;
}
.menu-toggle[aria-expanded='true'] .icon-close {
  display: block;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: clip;
  /* De hero schuift onder de glazen header (negatieve marge = headerhoogte).
     De bovenste gradient is de scrim die het witte header-tekstcontrast borgt
     zolang de balk transparant is: 0.42 dark (plus de lichte glastint) over
     de felste stop (#0090D3, incl. het witte ringen-watermerk) meet ≥4.8:1.
     Licht genoeg om de gradient en de vlekken door het glas te laten
     schijnen; loopt onder de balk uit naar 0. */
  background:
    linear-gradient(180deg, rgba(3, 40, 62, 0.34) 0, rgba(3, 40, 62, 0.34) 4.5rem, rgba(3, 40, 62, 0) 10rem),
    linear-gradient(115deg, var(--blauw-diep) 0%, var(--blauw-donker) 46%, var(--blauw) 78%);
  color: #fff;
  /* Headerhoogte + 1px border-bottom, anders schijnt de body als witte haarlijn door de transparante balk */
  margin-top: calc(-4.5rem - 1px);
  padding-block: calc(clamp(4.25rem, 9.5vw, 8rem) + 4.5rem + 1px) clamp(5.75rem, 11vw, 8.75rem);
}
.vlek {
  position: absolute;
  pointer-events: none;
}
.vlek-hero-1 {
  width: 46%;
  top: -18%;
  right: -8%;
  opacity: 0.5;
}
.vlek-hero-2 {
  width: 26%;
  bottom: 4%;
  left: -7%;
  opacity: 0.85;
}
.vlek-hero-3 {
  width: 30%;
  top: 30%;
  left: 34%;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
.hero-ringen {
  position: absolute;
  width: 520px;
  left: -140px;
  top: -120px;
  opacity: 0.16;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.hero h1 .accent {
  color: #ddf0e2;
}
.hero .lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  max-width: 30em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
/* GeneratePress geeft elke <ul> een margin-left van 3em; die inspringing duwt
   de vier facts van hun regel af. Daarom hier expliciet plat, net als .nav-menu. */
.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 2.2rem 0 0;
  padding: 0;
}
.hero-facts li {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-facts li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lichtgroen);
}

.hero-visual {
  position: relative;
  padding-top: 3.5rem;
}
.hero-held {
  position: absolute;
  z-index: 2;
  width: clamp(110px, 12vw, 160px);
  top: -1rem;
  right: -1rem;
  transform: rotate(8deg);
  animation: zweef 5.5s ease-in-out infinite;
  filter: drop-shadow(0 14px 20px rgba(0, 60, 90, 0.35));
}
@keyframes zweef {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(5deg) translateY(-14px);
  }
}
/* GeneratePress geeft elke <button> een eigen (donkere) achtergrond in
   hover/focus/active. Die vult het volledige buttonvlak en steekt onder de
   gedraaide kaart uit — daarom alle statussen expliciet plat zetten. */
.hero-card,
.hero-card:hover,
.hero-card:focus,
.hero-card:active,
.lescard,
.lescard:hover,
.lescard:focus,
.lescard:active {
  background: none;
  color: inherit;
  padding: 0;
  border: 0;
}
/* focus-ring blijft: hij staat eerder in het bestand, maar deze regels
   raken box-shadow niet, dus de rode ring overleeft. */
/* alleen de kaartafbeelding zelf, niet het pijltje in .hero-card-hint */
.hero-card > img {
  width: 100%;
}

.hero-card {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-decoration: none; /* als link (naar de video) */
  border-radius: 20px;
  transform: rotate(-2deg);
  filter: drop-shadow(0 24px 36px rgba(0, 45, 70, 0.45));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.hero-card:hover {
  transform: rotate(0deg) translateY(-6px);
}
.hero-card img {
  border-radius: 20px;
  height: auto;
}
.hero-card-hint {
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--navy);
  font: 700 0.95rem/1 var(--font);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(10, 30, 50, 0.5);
  white-space: nowrap;
}
/* Zelfde wenk als de "Bekijk les"-pijlen in het grid: de kaart nodigt uit */
.hero-card-hint img {
  transition: transform 0.2s ease-out;
}
.hero-card:hover .hero-card-hint img {
  transform: translateX(4px);
}
.scrollhint {
  position: absolute;
  left: 50%;
  bottom: 3.2rem;
  transform: translateX(-50%);
  color: #fff;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  animation: wenk 2.2s ease-in-out infinite;
}
.scrollhint svg {
  width: 20px;
  height: 20px;
}
@keyframes wenk {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 7px);
  }
}
.hero-golf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
}

/* ===== Waarom / intro ===== */
/* Redactioneel (keuze PSF, okt. 2026): kop en opening naast elkaar, de klasfoto
   paginabreed met het feitenblok als sticker, de rest van de tekst in twee
   kolommen (volle breedte, toch een leesbare regellengte) en de video als
   slotakkoord, bewust niet paginabreed (wens opdrachtgever). */
.waarom {
  position: relative;
  overflow: clip;
  isolation: isolate; /* de vlek (z-index -1) blijft binnen de sectie */
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.waarom-kop {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.waarom-kop h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
/* Zelfde maat als de hero-lead: de opening leest als intro, niet als bodytekst */
.waarom-lead p {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--navy);
}
.waarom-beeld {
  position: relative;
  margin-bottom: clamp(3.5rem, 7vw, 5rem);
}
.vlek-waarom {
  z-index: -1;
  width: 34%;
  right: -7%;
  top: -22%;
  opacity: 0.32;
}
.waarom-photo {
  position: relative;
}
/* :not(.waarom-emo): de emo is óók een direct child; zonder uitsluiting erft
   die de beeldverhouding (platgedrukte smiley) en tekent de box-shadow een
   rechthoekige waas rond zijn transparante afbeeldingsvak. */
.waarom-photo > img:not(.waarom-emo) {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 21 / 9;
  object-fit: cover;
  box-shadow: var(--schaduw);
}
/* Linksboven met tegengestelde rotatie: spiegelt de held (rechtsboven, +8°)
   zodat de twee secties zigzaggen i.p.v. twee keer dezelfde hoek herhalen. */
.waarom-emo {
  position: absolute;
  width: 112px;
  left: -1.2rem;
  top: -2.6rem;
  transform: rotate(-8deg);
  /* Compacter dan de hero-schaduw: de emo hangt deels boven de lichte
     paginachtergrond, waar een brede blur als vage rand leest i.p.v. diepte. */
  filter: drop-shadow(0 6px 10px rgba(34, 53, 75, 0.22));
}
/* Feitenblok als sticker op de foto: wit vlak, licht gekanteld */
.waarom-feiten {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: calc(-1 * clamp(1.5rem, 4vw, 2.5rem));
  width: min(25rem, 40%);
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -16px rgba(34, 53, 75, 0.45);
  rotate: -1.5deg;
}
.waarom-feiten h3 {
  margin-bottom: 0.7rem;
}
.waarom-feiten ul {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.waarom-feiten li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.98rem;
}
.waarom-feiten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blauw);
}
.waarom-kolommen {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
  column-rule: 1px solid var(--lijn);
}
.waarom-kolommen p + p {
  margin-top: 0.9rem;
}
.waarom-video {
  width: 100%;
  max-width: 52rem;
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  scroll-margin-top: 6rem; /* "Kijk de video" landt niet onder de sticky header */
}
body.admin-bar .waarom-video {
  scroll-margin-top: calc(6rem + 32px);
}
.waarom-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  background: var(--navy-deep); /* vlak zolang de speler laadt */
}

/* ===== Zo werkt het ===== */
.steps {
  position: relative;
  overflow: clip;
  background: var(--mist);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.vlek-steps {
  width: 380px;
  right: -120px;
  top: -110px;
  opacity: 0.55;
}
.steps h2 {
  position: relative; /* boven de absolute vlek: op mobiel valt die over de titel */
  margin-bottom: 2.4rem;
}
.steps-list {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.steps-list li {
  position: relative;
}
.stap-head {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.stap-nr {
  width: 46px;
  height: 46px;
}
.stap-emo {
  width: 72px;
  height: auto;
}
.steps-list h3 {
  margin-bottom: 0.4rem;
}
.steps-list p {
  font-size: 0.98rem;
}
.steps-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
}
/* Banner onder de stappen (ACF "Banner"): vervangt de rode knop. Licht gekanteld
   zoals de herokaart; trekt recht bij hover. De knop staat in het beeld zelf. */
.steps-banner {
  display: block;
  width: min(100%, 44rem);
  border-radius: 20px;
  rotate: -1.5deg;
  filter: drop-shadow(0 20px 30px rgba(34, 53, 75, 0.3));
  transition: rotate 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.steps-banner:hover {
  rotate: 0deg;
  transform: translateY(-4px);
}
.steps-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ===== Lessen (rustig register) ===== */
.lessen {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.lessen-head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 44em;
  margin-bottom: 2.5rem;
}
.lessen-head-tekst {
  flex: 1;
}
.lessen-head p {
  margin-top: 0.6rem;
}
/* "Aansluiting kerndoelen": springt naar de uitklapbalk onderaan en klapt
   hem open (site.js). Eén witregel onder de intro (wens opdrachtgever). */
.lessen-head .sprong-link {
  margin-top: 1.6em;
  font-weight: 600;
}
.sprong-link a {
  text-decoration: none;
}
.sprong-link span {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
.sprong-link a:hover span {
  text-decoration-thickness: 2.5px;
}
.sprong-link svg {
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.15em;
  transition: transform 0.2s ease-out;
}
.sprong-link a:hover svg {
  transform: translateY(3px);
}
/* Tegengestelde rotatie van de held in de kop erboven (+8°), zelfde compacte
   schaduw als de waarom-emo op de lichte achtergrond. */
.lessen-emo {
  flex: none;
  width: clamp(64px, 8vw, 92px);
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 10px rgba(34, 53, 75, 0.22));
}

.lesgrid {
  list-style: none;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.lescard {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}
.lescard-thumb {
  display: block; /* span is inline: zonder dit werken overflow/radius niet */
  position: relative;
  flex: 0 0 clamp(220px, 32vw, 340px);
  border-radius: 14px;
  overflow: hidden;
  /* clip-path i.p.v. alleen overflow: rondt ook gecomposite children betrouwbaar
     af (overflow+radius lekt in Chromium bij fractionele Windows-scaling) */
  clip-path: inset(0 round 14px);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.lescard-thumb img {
  width: 100%;
  height: auto;
  border-radius: inherit; /* vangnet: img zelf ook afgerond tijdens de zoom */
}
/* De rand + afronding zitten in de afbeelding zelf gebakken; daarom schaalt de
   hele thumb mee (inclusief geschilderde rand) i.p.v. de foto erbinnen. */
.lescard:hover .lescard-thumb {
  transform: scale(1.03) rotate(0.4deg);
}
.lescard-body {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}
.lescard h3 {
  color: var(--blauw-diep);
  margin: 0 0 0.5rem;
  transition: color 0.15s ease-out;
}
.lescard:hover h3 {
  color: var(--navy);
}
.lescard p {
  font-size: 0.98rem;
  max-width: 46em;
}
.lescard-open {
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--rood-diep);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lescard-open svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease-out;
}
.lescard:hover .lescard-open svg {
  transform: translateX(4px);
}

.lescard.is-soon {
  cursor: default;
}
.lescard.is-soon .lescard-thumb {
  aspect-ratio: 880 / 500;
  background: var(--mist);
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--grijsblauw);
}
.soon-inner {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
}
.soon-inner img {
  width: 44px;
  height: 44px;
}
.soon-inner span {
  font-weight: 600;
  color: var(--grijsblauw-d);
  font-size: 0.9rem;
}
.lescard.is-soon h3,
.lescard.is-soon p {
  color: var(--grijsblauw-d);
}

/* ===== Contact ===== */
.contact {
  position: relative;
  overflow: clip;
  /* Wit, niet mist: de sectie ervoor (stappen) is al mist — twee mist-secties
     op elkaar maakt de grens onzichtbaar en breekt het wit/mist-rustsignaal. */
  background: #fff;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.vlek-contact {
  width: 420px;
  left: -150px;
  bottom: -160px;
  opacity: 0.4;
}
.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-emo {
  width: clamp(160px, 16vw, 200px);
  margin-bottom: 1.25rem;
  transform: rotate(-6deg);
  transform-origin: 50% 80%;
}
/* Wiebelt één keer als de cursor (of een vinger) hem raakt; site.js zet de
   klasse en haalt hem na de animatie weer weg, zodat hij altijd uitwiebelt. */
.contact-emo.wiebelt {
  animation: wiebel 0.9s ease-in-out;
}
@keyframes wiebel {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  20% {
    transform: rotate(-16deg) scale(1.05);
  }
  40% {
    transform: rotate(5deg) scale(1.05);
  }
  60% {
    transform: rotate(-12deg) scale(1.02);
  }
  80% {
    transform: rotate(-3deg);
  }
}
.contact-intro h2 {
  margin-bottom: 0.9rem;
}
.contact-form {
  /* Mist, niet wit: de contactsectie is wit, dus een wit paneel zou alleen
     op zijn schaduw drijven. Mist verschilt zelf maar 1.04:1 van wit, dus de
     rand — geen diepere vulling, keuze opdrachtgever — tekent het paneel af. */
  background: var(--mist);
  border: 1px solid var(--grijsblauw);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--schaduw);
  display: grid;
  gap: 1.1rem;
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}
.optional {
  font-weight: 400;
  color: var(--grijsblauw-d);
}
.field input[type='text'],
.field input[type='email'],
.field textarea {
  font: inherit;
  color: var(--inkt);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--grijsblauw-m);
  border-radius: 10px;
  background: #fff;
  width: 100%;
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--rood);
  box-shadow: var(--focus);
}
.field-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
}
.field-consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25rem;
  accent-color: var(--rood);
}
.field-consent label {
  font-weight: 400;
  color: var(--inkt);
}
.contact-form .btn {
  justify-self: start;
}
.form-note {
  color: var(--groen-diep); /* #51AE8B op wit is 2.5:1 — de diepe tekstversie haalt 6.3:1 */
  font-weight: 600;
}

/* ===== Klassenchallenge: inzendformulier met upload (page-klassenchallenge.php) =====
   Zelfde paneel en velden als het contactformulier; daarbij een sleepvlak,
   een lijst met gekozen bestanden en een voortgangsbalk. */
/* Intro naast het formulier blijft staan terwijl je door het lange formulier
   scrolt (alleen als ze naast elkaar staan; onder 960px is het één kolom).
   Zelfde afstand onder de sticky header als de kerndoelen-toc. */
@media (min-width: 961px) {
  .kc .contact-intro {
    position: sticky;
    top: 6rem;
  }
  body.admin-bar .kc .contact-intro {
    top: calc(6rem + 32px);
  }
}
.kc-intro-tip {
  font-weight: 600;
  color: var(--navy);
}
/* GP geeft elke p 1.5em ondermarge (wint van de *-reset); hier regelt de grid-gap de ruimte */
.kc-form p,
.kc-bedankt p,
.kc-gesloten p {
  margin: 0;
}
.kc-hint {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--grijsblauw-d);
}
.kc-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}
.kc-drop {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.4rem 1rem;
  background: #fff;
  border: 2px dashed var(--grijsblauw-m);
  border-radius: 12px;
  transition:
    border-color 0.15s ease-out,
    background-color 0.15s ease-out;
}
.kc-drop.is-slepen {
  border-color: var(--blauw-diep);
  background: #e9f5fb;
}
.kc-drop-tekst {
  color: var(--navy);
}
/* Op telefoons en tablets valt er niets te slepen */
@media (hover: none) {
  .kc-drop-tekst {
    display: none;
  }
}
/* Het echte bestandsveld blijft focusbaar (toetsenbord), maar onzichtbaar;
   het label ernaast is de knop. Focus op het veld tekent de ring op de knop. */
.kc-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.field .kc-kies {
  justify-self: center; /* .contact-form .btn zet knoppen links */
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--navy);
}
.field .kc-kies:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}
.kc-input:focus-visible + .kc-kies {
  box-shadow:
    inset 0 0 0 2px var(--navy),
    var(--focus);
}
.kc-form.is-bezig .kc-drop {
  opacity: 0.55;
}
.kc-form.is-bezig .kc-kies {
  pointer-events: none;
}
.kc-lijst {
  display: grid;
  gap: 0.4rem;
  list-style: none;
}
.kc-lijst:empty {
  display: none;
}
.kc-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem 0.45rem 0.85rem;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  font-size: 0.92rem;
}
.kc-naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-info {
  color: var(--grijsblauw-d);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kc-item.is-klaar .kc-info {
  color: var(--groen-diep);
  font-weight: 600;
}
.kc-weg {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--grijsblauw-d);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.kc-weg svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.kc-weg:hover {
  background: var(--mist);
  color: var(--rood-diep);
}
.kc-weg:focus-visible {
  box-shadow: var(--focus);
}
.kc-fout {
  padding: 0.75rem 0.95rem;
  background: #fdeced;
  border: 1px solid #f1b1b4;
  border-radius: 10px;
  color: #a3262b;
  font-size: 0.95rem;
}
.kc-voortgang {
  display: grid;
  gap: 0.4rem;
}
.kc-balk {
  width: 100%;
  height: 0.7rem;
  appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--lijn);
}
.kc-balk::-webkit-progress-bar {
  background: var(--lijn);
}
.kc-balk::-webkit-progress-value {
  background: var(--groen);
  transition: width 0.3s ease-out;
}
.kc-balk::-moz-progress-bar {
  background: var(--groen);
}
.kc-status {
  font-size: 0.92rem;
  color: var(--navy);
}
.kc-verstuur[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.kc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.kc-bedankt,
.kc-gesloten {
  align-content: start;
}
.kc-bedankt:focus {
  outline: none;
}
.kc-bedankt-emo {
  width: 88px;
  transform: rotate(-6deg);
}
.kc-bedankt h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.35rem;
}
/* display: grid hierboven wint anders van het hidden-attribuut */
.contact-form[hidden],
.kc-voortgang[hidden] {
  display: none;
}

/* ===== Footer ===== */
.site-footer {
  position: relative;
  color: #fff;
  background: var(--navy-deep) url('../img/footer2.jpg') center / cover no-repeat;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Middenstop verzwaard van .28 naar .58: de linkkolommen lopen over het
     lichtste deel van de schildpadfoto — concept A mat daar ≈4.2:1, onder AA. */
  background: linear-gradient(180deg, rgba(20, 34, 52, 0.8), rgba(20, 34, 52, 0.58) 52%, rgba(20, 34, 52, 0.84));
}
.site-footer > .wrap {
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
}
.footer-col {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.footer-col h3 {
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 0.45rem;
}
.footer-col a,
.footer-col .footer-cookieknop {
  color: #cfe4f0;
  text-decoration: none;
  font-size: 0.96rem;
  width: fit-content;
}
.footer-col a:hover,
.footer-col .footer-cookieknop:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Knop die eruitziet als de links erboven (GP geeft knoppen een vlak). */
.footer-col .footer-cookieknop {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.footer-brand {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  align-content: start;
}
.footer-logo {
  width: 164px;
  height: auto;
}
.keurmerken {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 164px; /* even breed als .footer-logo, zodat uitlijnen t.o.v. het PSF-logo klopt */
  gap: 1.3rem;
}
.keurmerk-logo {
  height: auto;
}
.keurmerk-logo--cbf,
.keurmerk-logo--anbi {
  width: 100px;
}
.footer-base {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.socials {
  list-style: none;
  display: flex;
  gap: 0.8rem;
}
.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  transition:
    background-color 0.15s ease-out,
    border-color 0.15s ease-out;
}
.socials a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}
.socials svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.colofon {
  font-size: 0.88rem;
  color: #cfe4f0;
  text-align: center;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
/* Ingelogd: onder de WP-adminbalk beginnen (32px, mobiel 46px). */
.admin-bar .modal {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .modal {
    top: 46px;
  }
}
.modal[hidden] {
  display: none;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 34, 52, 0.68);
}
.modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 30px 60px -20px rgba(10, 20, 34, 0.5);
  animation: modal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* GeneratePress geeft elke <button> padding (10px 20px). Bij een vaste 42x42
   met border-box blijft er dan bijna geen contentbox over en staat het kruisje
   scheef in de cirkel — daarom padding expliciet op 0 en flex-centrering. */
.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--mist);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    transform 0.15s ease-out;
}
.modal-close:hover {
  background: var(--grijsblauw);
  transform: rotate(90deg);
}
.modal-close svg {
  display: block;
  width: 20px;
  height: 20px;
}
.modal-head {
  padding-right: 3rem;
}
.lesbadge {
  display: inline-flex;
  overflow: hidden;
  border-radius: 6px;
  font: 700 0.82rem/1 var(--font);
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
  /* Het drukwerk-blokje stempelt op het paneel (uit concept A gecanoniseerd).
     `backwards` houdt hem onzichtbaar tijdens de delay; het modal[hidden]-
     display:none reset de animatie, dus elke les stempelt opnieuw. */
  animation: stempel 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) 0.12s backwards;
}
@keyframes stempel {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(-6deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.96) rotate(1deg);
  }
  100% {
    transform: none;
  }
}
.lesbadge-les {
  background: var(--les-navy);
  color: #fff;
  padding: 0.45rem 0.6rem;
}
.lesbadge-nr {
  background: var(--les-magenta);
  color: #fff;
  padding: 0.45rem 0.6rem;
}
.modal-head h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
}
.modal-head p {
  margin-top: 0.4rem;
}
.modal-embed {
  margin-top: 1.4rem;
  border-radius: 14px;
  overflow: hidden;
}
.modal-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.embed-placeholder {
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blauw), var(--blauw-diep));
  color: #fff;
  text-align: center;
  padding: 1.5rem;
}
.embed-placeholder-inner {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  max-width: 30em;
}
.embed-placeholder-inner svg {
  width: 58px;
  height: 58px;
}
.embed-placeholder strong {
  font-size: 1.1rem;
}
.embed-placeholder span {
  font-size: 0.92rem;
  color: #dcf1fa;
}
/* Cookiebanner (plugin Pressidium): huisletter i.p.v. de systeemletter. */
#cc--main {
  --cc-font-family: var(--font);
}
/* Smiley met bril schuin over de bovenrand van de keuzebanner. */
#cc--main #cm::before {
  content: "";
  position: absolute;
  top: -46px;
  right: 18px;
  width: 92px;
  aspect-ratio: 1;
  background: url("../img/emo-bril-groen.webp") center / contain no-repeat;
  transform: rotate(8deg);
  pointer-events: none;
}
#cc--main #c-ttl {
  padding-right: 96px; /* titel loopt niet onder de smiley */
}
/* Externe media zonder cookietoestemming (inc/externe-media.php, site.js):
   het iframe staat klaar zonder src, de melding neemt zijn plek in. */
.ext-media iframe[data-ext-src] {
  display: none;
}
.ext-media-melding .btn {
  margin-top: 0.3rem;
}
.ext-media-link,
.ext-media-link:visited {
  color: #fff;
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ext-media-link:hover {
  color: #dcf1fa;
}
.waarom-video .ext-media-melding {
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
/* Videoblok in pagina's: core houdt de 16:9 vast met een ::before in de
   wrapper en zet het iframe absoluut; de melding vult datzelfde vlak. */
.wp-has-aspect-ratio .ext-media {
  position: absolute;
  inset: 0;
}
.wp-has-aspect-ratio .ext-media-melding {
  height: 100%;
  aspect-ratio: auto;
}
.modal-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
}
.dl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 600 0.95rem/1.2 var(--font);
  text-decoration: none;
  color: var(--navy);
  background: var(--mist);
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  transition: background-color 0.15s ease-out;
}
.dl:hover {
  background: #e2ecf1;
  color: var(--navy);
}
.dl svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* Alleen échte links (a.dl) liften hun icoon — placeholders (span) blijven stil */
a.dl:hover svg {
  transform: translateY(-2px);
}
/* Lesbrief is de primaire download: rood icoon zodat hij opvalt tussen de knoppen.
   Alleen op de échte link (a.dl) — de placeholder blijft grijs. */
a.dl--lesbrief svg {
  color: var(--rood-diep);
}
.dl.is-placeholder {
  color: var(--grijsblauw-d);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--lijn);
  cursor: not-allowed;
}
/* Meer werkbladen: één knop met uitklaplijstje (app.js), zodat de balk overal gelijk blijft */
.dl-menu {
  position: relative;
}
.dl-menu-knop {
  border: 0;
  cursor: pointer;
}
.dl-menu-knop .dl-chevron {
  margin-left: -0.15rem;
  transition: transform 0.18s ease-out;
}
.dl-menu-knop[aria-expanded="true"] {
  background: #e2ecf1;
}
.dl-menu-knop[aria-expanded="true"] .dl-chevron {
  transform: rotate(180deg);
}
.dl-menu-lijst {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--lijn),
    0 14px 28px -10px rgba(10, 30, 50, 0.35);
}
.dl-menu-lijst[hidden] {
  display: none;
}
.dl-menu-lijst a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border-radius: 9px;
  font: 600 0.9rem/1.25 var(--font);
  color: var(--navy);
  text-decoration: none;
}
.dl-menu-lijst a:hover,
.dl-menu-lijst a:focus-visible {
  background: var(--mist);
  color: var(--navy);
}
.dl-menu-lijst svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* Downloadbevestiging (app.js): de download start stil, deze regel bevestigt hem */
.dl-note {
  margin-top: 0.9rem;
  color: var(--groen-diep);
  font-weight: 600;
  font-size: 0.95rem;
}

body.modal-open {
  overflow: hidden;
}

/* ===== Modal: embed-modus =====
   Bij een les mét LessonUp-embed wordt de modal een full-width drawer die
   van onderen omhoog schuift (naar het voorbeeld van het Van Gogh Museum),
   en bovenaan aansluit op de onderkant van de sticky header. De embed-pagina heeft zelf al
   een kop, slidepreview en bijlagen, dus onze kop verdwijnt en het iframe
   krijgt de volle hoogte. Onze downloads staan in een smalle balk erboven. */
.modal--embed {
  padding: 0;
  place-items: end stretch;
}
.modal--embed .modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Sluit precies aan op de onderkant van de sticky header (4.5rem hoog);
     de .admin-bar-offset op .modal is hierin al verrekend. */
  height: calc(100% - 4.5rem);
  max-height: none;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  /* Wit, niet navy: de LessonUp-embedpagina heeft een transparante
     achtergrond, dus de paneelkleur schijnt door de les heen. */
  background: #fff;
  animation-name: drawer-in;
}
@keyframes drawer-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
.modal--embed .modal-head {
  /* LessonUp toont zijn eigen kop; die van ons alleen voor screenreaders. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.modal--embed .modal-embed {
  flex: 1;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  /* De LessonUp-embed is transparant; mist als grond achter de slides. */
  background: var(--mist);
}
.modal--embed .modal-embed iframe {
  height: 100%;
  aspect-ratio: auto;
}
.modal--embed .embed-placeholder {
  /* Zonder embed-link vult de placeholder hetzelfde vlak als het iframe. */
  height: 100%;
  aspect-ratio: auto;
}
.modal--embed .modal-close {
  /* Verticaal gecentreerd in de witte downloadbalk bovenaan
     (balk ≈ 0.65rem padding ×2 + downloadknop ≈ 35px hoog). */
  z-index: 2;
  top: 0.45rem;
  right: 0.65rem;
}
.modal--embed .modal-downloads {
  /* Bovenaan de drawer, boven het iframe; rechts ruimte voor de sluitknop. */
  order: -1;
  margin: 0;
  padding: 0.65rem 4rem 0.65rem 0.9rem;
  background: #fff;
  gap: 0.6rem;
}
.modal--embed .modal-downloads:empty {
  display: none;
}
.modal--embed .dl {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}
.modal--embed .dl-note {
  /* de bevestigingsregel volgt de downloadbalk naar boven: zelfde witte strook */
  order: -1;
  margin: 0;
  padding: 0 0.9rem 0.65rem;
  background: #fff;
}

/* ===== Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease-out,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    max-width: 540px;
    margin-top: 1rem;
  }
  .scrollhint {
    display: none;
  }
  .lescard-thumb {
    flex-basis: clamp(180px, 30vw, 260px);
  }
  .steps-list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .waarom-emo {
    left: 0.4rem;
  }
  .waarom-kop {
    grid-template-columns: 1fr;
  }
  .waarom-beeld {
    margin-bottom: 2.5rem;
  }
  .waarom-photo > img:not(.waarom-emo) {
    aspect-ratio: 4 / 3;
  }
  /* Gestapeld: de sticker schuift onder de foto in plaats van erop */
  .waarom-feiten {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: -2.5rem 1rem 0;
    rotate: -1deg;
  }
  .waarom-kolommen {
    columns: 1;
  }
}
/* Hamburger < 1160px: logo + menu + "Website Plastic Soup Foundation" hebben
   samen ±1105px nodig (incl. scrollbalk), daaronder breken de menu-items over twee regels. */
.nav-psf {
  display: none;
}
@media (max-width: 1160px) {
  .header-inner {
    gap: 0.8rem;
  }
  /* Met hamburger staat de PSF-knop onderaan het uitklapmenu, niet in de balk. */
  .header-inner > .btn {
    display: none;
  }
  .menu-toggle {
    display: grid;
    margin-left: auto;
  }
  .site-header nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-left: 0;
    background: var(--blauw-donker);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 28px -18px rgba(10, 30, 50, 0.55);
    padding: 0.6rem clamp(1.25rem, 4vw, 2.5rem) 1.1rem;
  }
  .site-header.menu-open nav {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    gap: 0.1rem;
  }
  .site-header nav a {
    display: block;
    padding: 0.7rem 0;
    font-size: 1.05rem;
    border-bottom: 0;
  }
  .nav-psf {
    display: block;
    margin-top: 0.6rem;
  }
  /* .site-header nav a (blok, wit, 600) weegt zwaarder dan .btn-*: hier terugzetten. */
  .site-header nav .nav-psf a {
    display: inline-flex;
    padding: 0.55rem 1.15rem;
    font-size: 0.92rem;
    font-weight: 700;
  }
  .site-header nav .nav-psf a:hover {
    color: var(--navy);
  }
}
@media (max-width: 700px) {
  .lescard {
    flex-direction: column;
    align-items: stretch;
  }
  .lescard-thumb {
    flex-basis: auto;
  }
  /* Gestapeld: zonder de alinea-marge hoort "Ga naar de les" bij zijn eigen
     kaart en niet bij de volgende. */
  .lescard p {
    margin-bottom: 0;
  }
  .lesgrid {
    row-gap: 2.5rem;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* Eén kolom: logo's gecentreerd, net als de socials eronder; de keurmerken
     kleiner naast elkaar onder het PSF-logo (rechts uitgelijnd sprong in). */
  .footer-brand {
    justify-items: center;
  }
  .keurmerken {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 1.6rem;
  }
  .keurmerk-logo--cbf,
  .keurmerk-logo--anbi {
    width: 64px;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-held {
    width: 96px;
    top: -2.4rem;
    right: 0;
  }
}

/* ==========================================================================
   Uit concept C overgenomen: dieptemeter + duikbootje
   Aangepast aan concept B: de pagina is onderin wit (geen waterkolom), dus
   de peilstrepen en het bootje zijn hier navy/lichtblauw i.p.v. wit.
   ========================================================================== */

/* Dieptelat: één lat langs de linkerrand, van waterlijn tot footer,
   met zes peilstrepen op exact gelijke afstand (elke streep = 5 m). */
.diepteschaal {
  position: absolute;
  left: 0;
  z-index: 5;
  /* Iets ónder de golfrand (JS meet de waterlijn): zo ligt de "0 m"-streep op
     de romp van de duikboot op het opduikmoment, i.p.v. op zijn bovenkant. */
  top: calc(var(--waterlijn-doc, 100vh) * 1px + 3.25rem);
  bottom: 1.5rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.diepteschaal span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 700 0.82rem/1 var(--font);
  letter-spacing: 0.05em;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82); /* leesbaar op zowel blauw als wit */
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-radius: 0 999px 999px 0;
  /* Boven water links buiten beeld; schuift binnen zodra de duikboot binnenvaart.
     Kort houden: de entree kan pas starten als de waterlijn de startdiepte
     passeert, dus alles boven ~0.5s voelt als naijlen op het scrollen. */
  transform: translateX(calc(-100% - 0.5rem));
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.is-onderwater .diepteschaal span {
  transform: translateX(0);
}
/* Kleine cascade van boven naar beneden: de diepere strepen komen net iets later */
.diepteschaal span:nth-child(2) {
  transition-delay: 0.04s;
}
.diepteschaal span:nth-child(3) {
  transition-delay: 0.08s;
}
.diepteschaal span:nth-child(4) {
  transition-delay: 0.12s;
}
.diepteschaal span:nth-child(5) {
  transition-delay: 0.16s;
}
.diepteschaal span:nth-child(6) {
  transition-delay: 0.2s;
}
.diepteschaal span::before {
  content: '';
  width: 1.9rem;
  height: 2px;
  background: currentColor;
}
@media (min-width: 1320px) {
  .diepteschaal {
    display: flex;
  }
}

/* Duikzone: schermvullende laag die alles boven de waterlijn wegknipt.
   Zo kan de duikboot ook tijdens zijn uitvaar-animatie (of bij snel
   terugscrollen) nooit boven het wateroppervlak in de hero hangen.
   Fallback 9999: vóór de JS-meting is de hele laag dichtgeknepen.
   Let op: de clip-path maakt deze laag het ankerpunt voor de fixed
   duikboot erin — omdat de laag zelf schermvullend is, blijven de
   viewport-coördinaten van de duikboot gewoon kloppen. */
.duikzone {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  clip-path: inset(calc(max(0, var(--waterlijn, 9999)) * 1px) 0 0 0);
}

/* Duikbootje (vast, rechts): boven water onzichtbaar; zodra de waterlijn
   uit beeld scrollt vaart hij vanaf rechts binnen en daalt met --duik af */
.duikboot {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2.4rem);
  /* Startdiepte 20vh: de romp (die in de svg wat lager hangt dan de bellen)
     ligt zo op de "0 m"-streep op het moment van opduiken.
     Reisafstand zo gekozen dat het "−25 m"-label van de duikboot bij volledig
     uitscrollen op de hoogte van de onderste peilstreep (bottom: 1.5rem) eindigt. */
  top: calc(20vh + var(--duik, 0) * (80vh - 7rem));
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  pointer-events: none;
  /* Buiten beeld rechts geparkeerd (eigen breedte + right-marge) */
  transform: translateX(calc(100% + 3rem));
  visibility: hidden;
  transition:
    top 0.18s linear,
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
    visibility 0s linear 0.45s;
}
.is-onderwater .duikboot {
  transform: translateX(0);
  visibility: visible;
  transition:
    top 0.18s linear,
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.duikboot svg {
  width: clamp(66px, 6vw, 92px);
  height: auto;
  overflow: visible;
  /* Zachte lichte gloed: houdt de navy romp en periscoop leesbaar op de
     donkere footer, valt op wit weg tegen de achtergrond */
  filter: drop-shadow(0 12px 18px rgba(34, 53, 75, 0.3)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.65));
}
.duikboot-romp {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: subdobber 5.5s ease-in-out infinite;
}
@keyframes subdobber {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(3deg) translateY(-5px);
  }
}
.duikboot .bel {
  fill: none;
  stroke: rgba(0, 144, 211, 0.6); /* PSF-blauw: zichtbaar op wit én blauw */
  stroke-width: 1.5;
  opacity: 0;
  animation: subbel 3.2s linear infinite;
}
.duikboot .bel-2 {
  animation-delay: 1.1s;
}
.duikboot .bel-3 {
  animation-delay: 2.2s;
}
@keyframes subbel {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  100% {
    transform: translate(9px, -30px);
    opacity: 0;
  }
}
.duikboot-label {
  font: 700 0.8rem/1 var(--font);
  color: #fff;
  letter-spacing: 0.04em;
  background: var(--navy);
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  min-width: 3.4rem;
  text-align: center;
}

/* Dieptebalk: hetzelfde --duik-signaal als dunne voortgangsbalk op smallere schermen */
.dieptebalk {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 4.5rem; /* direct onder de sticky header van concept B */
  z-index: 45;
  height: 4px;
  background: rgba(49, 75, 105, 0.18);
  pointer-events: none;
}
.dieptebalk span {
  display: block;
  height: 100%;
  width: calc(var(--duik, 0) * 100%);
  /* Blauw, niet rood: rood betekent actie (Schaars-Rood-regel), en een rode
     balk onder de header leest bovendien als laadbalk. */
  background: var(--blauw-donker);
  border-radius: 0 2px 2px 0;
}
@media (max-width: 1080px) {
  .duikboot {
    display: none;
  }
  .dieptebalk {
    display: block;
  }
}

/* ==========================================================================
   WordPress-integratie
   ========================================================================== */

/* GP's admin bar mag de sticky header (en de dieptebalk eronder) niet overlappen */
body.admin-bar .site-header {
  top: 32px;
}
body.admin-bar .dieptebalk {
  top: calc(4.5rem + 32px);
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
  body.admin-bar .dieptebalk {
    top: calc(4.5rem + 46px);
  }
}
/* ≤ 600px zet WP de admin bar op position: absolute: hij scrollt mee weg.
   Door body { position: relative } zou hij dan 46px te laag over de header
   vallen, dus terug in de html-marge; de header plakt gewoon aan de bovenkant. */
@media (max-width: 600px) {
  body.admin-bar #wpadminbar {
    top: -46px;
  }
  body.admin-bar .site-header {
    top: 0;
  }
  body.admin-bar .dieptebalk {
    top: 4.5rem;
  }
}

/* Fluent Forms → mapping op de bestaande formulier-styling.
   Zet in Fluent Forms de eigen styling op "geen/minimaal". */
.contact-form--plugin {
  --fluentform-primary: var(--rood-diep);
}
.contact-form--plugin .ff-el-group {
  margin-bottom: 0;
}
.contact-form--plugin .ff-el-input--label label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.contact-form--plugin .ff-el-form-control {
  font: inherit;
  color: var(--inkt);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--grijsblauw-m);
  border-radius: 10px;
  background: #fff;
  width: 100%;
}
.contact-form--plugin .ff-el-form-control:focus-visible {
  border-color: var(--rood);
  box-shadow: var(--focus);
  outline: none;
}
.contact-form--plugin input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--rood);
}
/* Akkoord-checkbox (GDPR-veld) met inline link naar de privacyverklaring.
   Fluent Forms legt de rij als table-cells op; de tussenruimte zetten we
   daarom via padding op de tekstcel én breedte op de checkbox-cel. */
.contact-form--plugin .ff-el-tc {
  margin-top: 0.3rem;
}
.contact-form--plugin .ff-el-tc label.ff_tc_label > span.ff_tc_checkbox {
  width: 1.6rem;
  padding-top: 2px !important;
}
.contact-form--plugin .ff_t_c {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--inkt);
  padding-left: 0.2rem;
}
/* Het GDPR-veld rendert geen `.ff-el-input--label`, dus Fluent Forms zet er
   ook geen verplicht-sterretje bij. Zelfde vorm en kleur als de andere velden
   (`.ff-el-is-required.asterisk-right label:after`). Het veld is altijd
   verplicht — dat is niet uitschakelbaar in de editor. */
.contact-form--plugin .ff-el-tc .ff_t_c::after {
  content: ' *';
  color: var(--fluentform-danger, var(--rood-diep));
  margin-left: 3px;
}
/* Fluent Forms zet zijn eigen knopkleur inline via
   `form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style)` (0,3,1);
   de extra `.fluentform` hieronder wint daar met vier classes van. */
.contact-form--plugin .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 1rem/1.2 var(--font);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--rood-diep);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(10, 30, 50, 0.5);
  transition:
    background-color 0.15s ease-out,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.contact-form--plugin .fluentform .ff-btn-submit:hover {
  background: #c22f35;
  transform: translateY(-2px);
}
.contact-form--plugin .ff-message-success {
  color: var(--groen-diep);
  font-weight: 600;
}
/* Foutstaten: zonder deze mapping rendert een mislukte submit in rauwe
   plugin-styling — het spannendste moment verdient dezelfde taal als de rest. */
.contact-form--plugin .ff-el-is-error .ff-el-form-control {
  border-color: var(--rood-diep);
}
.contact-form--plugin .error,
.contact-form--plugin .ff-el-is-error .text-danger,
.contact-form--plugin .ff-errors-in-stack,
.contact-form--plugin .ff-message-error {
  color: var(--rood-diep);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 0.35rem;
}

/* ==========================================================================
   Subpagina's (contact, privacy, cookies, …) — page.php / page-contact.php
   ========================================================================== */

/* Paginakop: compacte variant van de hero, met dezelfde golfrand naar wit */
.pagina-kop {
  position: relative;
  overflow: clip;
  background: linear-gradient(115deg, var(--blauw-diep) 0%, var(--blauw-donker) 46%, var(--blauw) 78%);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
}
.pagina-kop h1 {
  position: relative;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  max-width: 22em;
}
.vlek-kop {
  width: 42%;
  top: -30%;
  right: -10%;
  opacity: 0.5;
}
.pagina-ringen {
  position: absolute;
  width: 420px;
  left: -130px;
  top: -140px;
  opacity: 0.16;
  pointer-events: none;
}
.pagina-golf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(36px, 6vw, 90px);
  display: block;
}

/* Lessenpagina: de kop op hero-sterkte. Dit is de hoofdbestemming van het
   pakket (menu + header-CTA wijzen hierheen), dus de kop spreekt in het
   verleidende register van de homepage-hero — het grid eronder blijft rustig.
   Sinds 25-10-2026 niet in gebruik (kleine kop); bewaard voor
   template-parts/lessen-kop-groot.php. */
.pagina-kop--lessen {
  padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(4.5rem, 9vw, 7rem);
}
.pagina-kop--lessen h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  max-width: 13em;
}
.pagina-kop--lessen .lead {
  position: relative;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  max-width: 30em;
  margin-top: 1.1rem;
}
.pagina-kop--lessen .hero-actions,
.pagina-kop--lessen .hero-facts {
  position: relative; /* boven de absolute vlek/ringen */
}
/* Zelfde zwevende held als in de homepage-hero, hier rechts naast de kop */
.pagina-held {
  position: absolute;
  z-index: 2;
  width: clamp(110px, 12vw, 170px);
  right: clamp(1.5rem, 10vw, 11rem);
  top: clamp(2.25rem, 5vw, 4rem);
  transform: rotate(8deg);
  animation: zweef 5.5s ease-in-out infinite;
  filter: drop-shadow(0 14px 20px rgba(0, 60, 90, 0.35));
  pointer-events: none;
}
@media (max-width: 900px) {
  .pagina-held {
    display: none; /* zou op smalle schermen over de kop/lead vallen */
  }
}

/* Inhoud: leesbare maat voor lopende tekst (privacy/cookies). Blokken met
   uitlijning 'Brede breedte' nemen de volle wrap, 'Volledige breedte' het
   hele scherm (blokstijlen zelf: blokken.css). */
.pagina-inhoud {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  overflow-x: clip; /* 100vw van .alignfull telt de scrollbalk mee */
}
.pagina-inhoud .entry-content > * {
  max-width: 46rem;
}
/* Klassenchallenge: de uitleg boven het formulier loopt over de volle wrap,
   net zo breed als het formulier eronder (verzoek Hanny). */
.pagina-inhoud--breed .entry-content > * {
  max-width: none;
}
/* Afbeelding met 'Rechts uitlijnen': de tekst loopt eromheen. Op een smal
   scherm is daar geen plek voor; dan staat hij gecentreerd tussen de tekst.
   Klassieke thema's krijgen <div class="wp-block-image"><figure class="alignright">,
   blokthema's <figure class="wp-block-image alignright">; beide afgedekt. */
.pagina-inhoud .entry-content {
  display: flow-root; /* houdt een zwevende afbeelding binnen de inhoud */
}
.pagina-inhoud .entry-content > .wp-block-image .alignright,
.pagina-inhoud .entry-content > .wp-block-image.alignright {
  float: right;
  width: min(22rem, 40%);
  margin: 0.4em 0 1.5em 2.5rem;
}
.pagina-inhoud .entry-content > .wp-block-image .alignright img,
.pagina-inhoud .entry-content > .wp-block-image.alignright img {
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .pagina-inhoud .entry-content > .wp-block-image .alignright,
  .pagina-inhoud .entry-content > .wp-block-image.alignright {
    float: none;
    width: auto;
    max-width: 22rem;
    margin: 1.5em auto;
  }
  /* Klassenchallenge: de collage staat in de editor bovenaan (op breed loopt de
     tekst eromheen); gestapeld zou de pagina met dat drukke beeld openen. Daarom
     schuift hij hier naar het eind van de uitleg, vlak voor het formulier. */
  .pagina-inhoud--breed .entry-content {
    display: flex;
    flex-direction: column;
  }
  .pagina-inhoud--breed .entry-content > .wp-block-image:has(.alignright),
  .pagina-inhoud--breed .entry-content > .wp-block-image.alignright {
    order: 1;
  }
}
/* GP schuift .alignwide 40px (mobiel 30px) buiten de kolom; bij ons is de
   wrap de grens, anders valt het blok op mobiel buiten beeld. Ook genest
   (brede kolommen in een brede groep in een kader): daar telt GP's
   verschuiving per laag op. */
.pagina-inhoud .entry-content .alignwide {
  max-width: none;
  width: auto;
  margin-inline: 0;
}
.ph-sub .pagina-inhoud .entry-content > .alignfull {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* Een volle breedte-kader loopt tot de schermrand: geen ronde hoeken, en de
   inhoud blijft op de maat van de wrap. */
.ph-sub .pagina-inhoud .entry-content > .alignfull.wp-block-group {
  border-radius: 0;
  border-inline: 0;
  padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), calc(50vw - var(--maat) / 2 + clamp(1.25rem, 4vw, 2.5rem)));
}
.pagina-inhoud .entry-content h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  margin: 2em 0 0.6em;
}
.pagina-inhoud .entry-content h3 {
  margin: 1.6em 0 0.5em;
}
.pagina-inhoud .entry-content p {
  margin-bottom: 1em;
}
.pagina-inhoud .entry-content > *:first-child {
  margin-top: 0;
}
.pagina-inhoud .entry-content > *:last-child {
  margin-bottom: 0;
}

/* Lessenpagina: aansluiting op de kerndoelen, dichtgeklapt onder de lessen.
   Rustige mist-balk; open is het een gewone leeskolom. */
.kerndoelen {
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.uitklap {
  scroll-margin-top: 6rem; /* bij #kerndoelen niet onder de sticky header */
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: #fff;
}
.uitklap summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 3vw, 1.6rem);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.uitklap summary::-webkit-details-marker {
  display: none;
}
.uitklap[open] summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--lijn);
}
.uitklap summary h2 {
  margin: 0; /* GP geeft h2 een ondermarge; die drukt de tekst uit het midden */
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.uitklap summary:hover h2 {
  color: var(--blauw-diep);
}
.uitklap summary:focus-visible {
  box-shadow: var(--focus);
}
.uitklap-pijl {
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.uitklap[open] .uitklap-pijl {
  transform: rotate(180deg);
}
.uitklap-body {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.1rem, 3vw, 1.6rem) clamp(1.6rem, 3.5vw, 2.4rem);
}
.uitklap-inhoud {
  max-width: 46rem;
}
.uitklap-inhoud [id] {
  scroll-margin-top: 6rem; /* toc-sprongen niet onder de sticky header */
}

/* Sticky inhoudsopgave rechts: vult de ruimte naast de leeskolom en laat
   leraren direct naar één kerndoel springen. */
.uitklap-toc {
  display: none;
}
@media (min-width: 960px) {
  .uitklap-body.heeft-toc {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(14rem, 17rem);
    justify-content: space-between;
    gap: 3rem;
  }
  .uitklap-toc {
    display: block;
    position: sticky;
    top: 6rem;
    align-self: start;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    border-left: 1px solid var(--lijn);
    font-size: 0.86rem;
    line-height: 1.35;
  }
  /* Ingelogd: de header staat 32px lager onder de WP-adminbalk (zie
     body.admin-bar .site-header); de toc en de sprongdoelen schuiven mee. */
  body.admin-bar .uitklap-toc {
    top: calc(6rem + 32px);
    max-height: calc(100vh - 7.5rem - 32px);
  }
  body.admin-bar .uitklap-inhoud [id] {
    scroll-margin-top: calc(6rem + 32px);
  }
}
.uitklap-toc ol {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.uitklap-toc ol:last-child {
  margin-bottom: 0;
}
.uitklap-toc a {
  display: flex;
  gap: 0.55rem;
  margin-left: -1px; /* actieve streep valt over de toc-rand */
  padding: 0.32rem 0 0.32rem 1.1rem;
  border-left: 2px solid transparent;
  color: var(--grijsblauw-d);
  text-decoration: none;
}
.uitklap-toc a:hover {
  color: var(--navy);
}
.uitklap-toc a:focus-visible {
  box-shadow: var(--focus);
  border-radius: 4px;
}
.uitklap-toc a.is-actief {
  border-left-color: var(--blauw-diep);
  color: var(--navy);
}
.uitklap-toc .toc-vak {
  margin: 0; /* GP's p-ondermarge */
}
.uitklap-toc .toc-vak a {
  padding-block: 0.2rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blauw-diep);
}
.uitklap-toc .toc-nr {
  flex: none;
  min-width: 1.4em;
  font-weight: 700;
  color: var(--blauw-diep);
  font-variant-numeric: tabular-nums;
}
.uitklap-inhoud p {
  margin-bottom: 1em;
}
.uitklap-inhoud h3 {
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  margin-bottom: 0.6em;
}
.uitklap-inhoud h4 {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700; /* GP zet h4 op 400 */
  line-height: 1.3;
  margin: 1.8em 0 0.4em;
}
/* Vak-label boven elk blok (Nederlands / OJW) */
.uitklap-inhoud .kerndoelen-vak {
  margin: 3em 0 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blauw-diep);
}
.uitklap-inhoud > .kerndoelen-vak:first-child {
  margin-top: 0;
}
/* SLO-definitie in dezelfde letter en kleur als de argumentatie (kleiner of
   grijzer oogde rommelig); het vette label onderscheidt ze. Kleinere marge
   houdt beide als één blok bij het kerndoel. */
.uitklap-inhoud .slo {
  margin-bottom: 0.5em;
}
.uitklap-inhoud > *:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .uitklap-pijl {
    transition: none;
  }
}

/* Contactpagina: korte intro sluit strak aan op de contactsectie eronder */
.pagina-inhoud--intro {
  padding-block: clamp(2rem, 4.5vw, 3rem);
}

/* Tabellen uit de editor (o.a. de gegevens-tabellen in de privacyverklaring):
   scrollen binnen hun eigen container in plaats van de pagina te verbreden */
.pagina-inhoud .entry-content .wp-block-table {
  overflow-x: auto;
  margin: 0 0 1.5em;
}
.pagina-inhoud .entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.55;
}
.pagina-inhoud .entry-content th,
.pagina-inhoud .entry-content td {
  border: 1px solid var(--lijn);
  padding: 0.65rem 0.8rem;
  vertical-align: top;
  text-align: left;
  min-width: 13rem;
}
.pagina-inhoud .entry-content th {
  background: var(--mist);
  color: var(--navy);
}